Published using Google Docs
2014_05_html5
Updated automatically every 5 minutes

HTML5 Cross Platform Mobile Applications

This course focuses on the relevant web technologies for developing the client side of web applications and hybrid ones. Whether your target is developing a cross platform mobile application or a one page web application this course is for you. The course focuses on the use of JavaScript, its libraries and HTML5. The course includes 140 academic hours organized in ten parts. The training material (slides, video clips, assignments, solutions and code samples) for the entire course is organized in small online courses on the e-learning platform we use during the course.


Fundamental Topics in Software Development (1th Part)
This part covers the very basic topics in software development which are necessary in order to learn all other topics the course includes. This part focuses on very basic topics in procedural programming, basics of html and css. (10 academic hours)

User Interface Design in CSS (2th Part)

This part focuses on CSS3 in order to get the required understanding for the development of user interface using web technologies such as JavaScript, HTML5 and CSS. This part is essential for understanding the final outcome of every web application. (10 academic hours)

Software Development in JavaScript (3th Part)

This part covers the JavaScript programming language and is essential for the rest of the course. You cannot learn HTML5 nor any of the famous popular libraries as jQueryMobile, PhoneGap or AngularJS without knowing JavaScript. (40 academic hours)

Client Side JavaScript Frameworks (4th Part)

This part covers some of the most popular client side JavaScript frameworks such as jQuery, jQueryMobile, MooTools, AngularJS and many others. Some of these frameworks allow us to develop rich graphics user interface both for desktop applications and mobile ones. Others allow us to develop a structured client side which is relevant whether you develop a web application or an hybrid one for mobile telephones and tablets or the desktop. The more important frameworks get more hours. (30 academic hours)

The HTML5 Ecosystem (5th Part)

The HTML5 ecosystem is everything the HTML5 specification covers and beyond. We will start with covering the official parts of HTML5 and continue with some of the more interesting HTML5 capabilities that still weren’t added to the specification. (15 academic hours).

Social Web Applications (6th Part)

Whether you develop a web application or an hybrid one you might want to interact with social networks as Facebook and others. This part of the courses focuses on using the Facebook JavaScript SDK. (5 academic hours)

Databases in JavaScript (7th Part)

Some of the most popular no-sql databases allow us to write in JavaScript the code that interacts with them. This part of the course focuses on using the MongoDB no-sql database and in addition covers some of the most popular databases that were written in JavaScript. (5 academic hours).

Server Side JavaScript Frameworks (8th Part)
Using node.js as well as many other JavaScript frameworks we can develop the server side in JavaScript. This part focuses on that option and in addition it overviews the cloud based possibilities. (5 academic hours)

Android Hybrid Applications (9th Part)

Taking a web application optimized for mobile telephone and wraps it as an hybrid application for android or any other mobile telephones platform is fairly simple. We will do it for android. Doing the same for iPhone or any other mobile platform is pretty much the same idea. (5 academic hours)

Web Browsers Extensions (10th Part)

This part focuses on learning how to develop extensions for web browsers. In addition, we will learn how to develop applications for ChromeOS, the new coming operating system, and learn how to place them for sale through the Chrome web store. (5 academic hours).

Responsive Web Applications (11th Part)

Developing one website that fits all platform including mobile telephones, tablets, tv and desktops is the next challenge. This part of the course covers the available possibilities. (5 academic hours)

Analysis & Design using UML (12th Part)

This part summarizes the course and provides the students with analysis and design capabilities using UML. Based on the technological skills acquired during the course we learn how to analyze and design web and mobile hybrid applications and how to use UML, SOAML and SysML doing that process. (5 academic hours)


Date

Topic

Online Course

Comments

1

12/5/2014

Fundamental Topics

Introduction to The Internet
Internet History, The Web, HTTP Protocol, Web Services, Websites


Introduction to Procedural Programming
Simple Variables, Input & Output, If Statement, While Loop

XHTML Fundamentals
Introduction, Headings, Images, Links

1. You can find the JavaScript slides at http://www.abelski.com/moodle/course/view.php?id=13.

2. towards next meeting you should complete all assignments in topics ‘if statement’ and ‘while loop’. your solution should include code in javascript (level 2 only). u can find the assignments inside the ‘introduction to procedural programming’

2

19/5/2014

Fundamental Topics

Introduction to Procedural Programming
Arrays, Functions

XHTML Fundamentals
Tables, Lists, Forms

Introduction to Object Oriented Programming
Objects

1. you can find the javascript slides about functions at http://www.abelski.com/courses/javascript/function.pdf.

2. you can find the javascript slides about arrays at http://www.abelski.com/courses/javascript/array.pdf.

3. towards meeting 6 please watch matrix (the first movie… and the best of all)

4. u can find the javascript slides about oop at http://www.abelski.com/courses/javascript/oop.pdf.

5. towards next meeting please compelte assignmetns level 1 and 2 in topics arrays and functions (at http://www.abelski.com/moodle/course/view.php?id=73) and please submit at haim.michael.homework@gmail.com. When possible please try to write the code in JavaScript.

6. please go over the css slides for next meeting.

7. please arrange an http serve on your laptopc (instructions can be found in our google group)

8. please complete ‘bmi form’ assignment in the ‘xhtml fundamentals’ course… u can find it at
http://www.abelski.com/moodle/mod/assignment/view.php?id=6420. pls submit the solution at haim.michael.homework@gmail.com.

3

 26/5/2014

CSS3

CSS Basics
Introduction
Background

Text

Font

1. towards next meeting please complete all assignments in all topics.

2. towards next meeting make sure you know all the commands listed at
http://www.abelski.com/courses/windows/the_command_line.pdf

3. towards next meeting please try to go over the git slides.

4. towards next meeting please bring headphones.

4

 2/6/2014

CSS3

CSS Basics
Border

Outline
Margine

Padding

List

Table

Dimension
Positioning
Images
Transforms
Transitions

Animations
Columns
Navigation
Forms
Media Queries
Debugging
Classification

Google WebFonts
Introduction
Jump Start

Introduction to Git

Introduction

Basics

1. go over the video clips in the git basics topic and do the same on your computer.

2.  go over the video clips in the  google webfonts  topic and do the same on your computer.

3. towards next meeting please install xampp (or mamp). u can find video clip that explains how to install at http://www.phpbook.co.il. in addition, please install phpstorm. make sure htdocs is the workspace.

http://www.xampp.org 

http://www.jetbrains.com/phpstorm/ 

4. please complete all assignments in css.

5. towards next meeting please go over javascript slides and watch the video clips (the ones we are going to cover next meeting).

6. please go over the debugging slides in css fundamentals course and try on your end doing the same code you see in the video clips.

5

9/6/2014

JavaScript

JavaScript Programming
Introduction
Basic Elements


1. towards next meeting please complete all assignments in topics covered in class. the facebook like button assignment is not mandatory.

2. towards next meeting please go over the slides and the video clips of the object oriented programming topic.

3. please print and sign the legal document for getting the phpstorm license. the legal document is available in pdf in our google group.

6

16/6/2014

JavaScript

JavaScript Programming
Object Oriented Programming (excluding the prototype sub topic)
Debugging (part 1)

Array

Date

Date.js Basics
Introduction
Jump Start

1. please complete all assignments in topics covered in class (except the ‘employee extends person’ assignment in object oriented programming and except for the assignment in data.js).

2. towards next meeting pls go over the topics planned for next meeting.

7

23/6/2014

JavaScript

JavaScript Programming

Functions (except for apply and call functions)
Global Object
Debugging (part 2)

1. get ready for next meeting going over the topics: oop prototype, anonymous functions and document object model.

2. please complete all assignments (levels 1,2) in topic functions.

3. please catch up with the recursive functions topic by watching the relevant video clips at:
www.csharpbook.co.il 
www.phpbook.co.il 

8

30/6/2014

JavaScript

JavaScript Programming
Document Object Model
Anonymous Functions

Events Handling
Window
Boolean
Number

String

Math

Location

Navigator

Screen

History

1. lotto numbers tiny project phase #1.

2. converter tiny project phase #1.

3. please complete all assignments (level 1,2) in all topics we covered in class.  

4. please get ready for next meeting going over the prototype topic (in oop).

5.  please watch the ajax jump start video clip. u can find it at
https://www.youtube.com/watch?v=8OIncYs8ANs.

6. please go over the following topics on your own:
Window
Boolean
Number

String

Math

Location

Navigator

Screen

History
please complete all assignments in those topics.

9

 7/7/2014

JavaScript

JavaScript Programming
Error Handling

OOP (Prototype)
Functions (apply and call functions)
JavaScript and CSS
Handling Images
Live Connect
CodeLinting
JSON Parsing


1. towards next meeting please watch my ajax lecture (in hebrew) at https://www.youtube.com/watch?feature=player_embedded&v=8OIncYs8ANs.

2. pls complete the assignments in those topics covered in class.

3. make sure you have xampp installed on your pc. http://www.phpbook.co.il/wordpress/?p=107 

10

 14/7/2014

JavaScript


JavaScript

Ajax Fundamentals
Introduction to Ajax
The XmlHttpRequest Object
Consuming Web Services

DOM Fundamentals
Overview
Nodes

Parsing

1. please complete opening hours tiny project phase #1.

2. please complete all assignments in ajax fundamentals topics and in dom fundamentals topics. covered in class.

11

 21/7/2014

JavaScript

DOM Fundamentals
Methods & Properties
Accessing
Node Info
Node List
Navigation


JavaScript Programming
Iterators
Asynchronous Programming
Regular Expressions
Memory Management

Google Charts
Introduction
Jump Start

1. personal expenses tracker application, phase #1, phase #2

2. please go over the slides of the debugging topic in javascript programming course

12

 28/7/2014

JavaScript

JavaScript Style Guide
Introduction
Language Rules
Style Rules

HTML Style Guide
Introduction
Guidelines Overview

CSS Style Guide
Introduction
Guidelines Overview

Ajax Fundamentals
JSONP Pattern
Cross Site HTTP Requests
Mashups
JSON
Web Services

1. pls go over the code u wrote so far in the tiny project and make sure it is in according to google style guide.

13 

11/8/2014

Client Side JavaScript Frameworks













JavaScript

The jQuery + jQuery UI Libraries
Introduction
Basics
Ajax
Buttons
Tabs
Accordion
Dialog
Slider
Date Picker
Auto Complete
Drag & Drop
Resizing
Animation

JavaScript Programming
Using Cookies
Lambda Expressions

1. you should complete all the assignments in jquery course (all topics… including the ones we didn’t cover in class) - except for “coupons administrator” and “mystical information” assignments.  

2. towards next meeting u can get ready with jquerymobile using the video clip at https://www.youtube.com/watch?v=zFSTN8JnFEk.

14

 18/8/2014

Client Side JavaScript Frameworks

jQuery Mobile Basics
Introduction
Pages
Dialogs
Themes
Buttons
Lists
Toolbars
Layout
Form

Design Patterns in JavaScript
Introduction
Classic Design Patterns
JavaScript MV* Patterns

1. lotto numbers tiny project phase #2.

2.  converter tiny project phase #2.

3. opening hours tiny project phase #2.

4. expenses tracking tiny project phase #3.

5. complete coupons project phases #1 #2

6. you should complete the ‘shapes factory assignment’

15

 25/8/2014

Client Side JavaScript Frameworks

AngularJS Basics
Introduction
Basics
Routing
Navigation Menu
Filters

Modernizr.js Basics
Introduction
Jump Start

Microtext.js Basics
Introduction
Jump Start

Galleria Basics
Introduction
Jump Start

Zxcvbn.js Basics
Introduction
Jump Start

Twitter Bootstrap
Introduction
Jump Start
Templates

Highcharts.js Basics
Introduction
Jump Start

1. You should complete the assignments in jQueryMobile course.

2. please complete todo list tiny project phase #1 #2

3. please complete the assignments in the following courses:
Zxcvb.ja Basics,

Highcharts Basics,
Modernizr Basics
Microtext.js Basics
Galleria



16

1/9/2014  

Client Side JavaScript Frameworks

Introduction to Git

Distributed Work
GitHub Jump Start

GitLogs

MooTools Basics
Introduction
Functions
Classes
The Browser Object
The Request Class

The Cookie Object

Google Maps
Introduction
Jump Start

Overlays

Barousel.js Basics
Introduction
Jump Start

Moment.js Basics
Introduction
Jump Start

Underscore.js Basics
Introduction
Jump Start  

Angular.js Basics
Ajax

1. humus tiny project phases #1 #2  

2. please complete the assignmetns in all topics covered in our meeting.

3. please go over the video clips in ‘distributed work’ topic in ‘introduction to git’ course and do the same technical steps the video shows on your pc. please don’t waste time on going over the gihub jump start.

17

8/9/2014

Client Side JavaScript Frameworks

Adapts.js Basics
Introduction
Jump Start

Handlebars.js Basics
Introduction
Jump Start

Howler.js Basics
Introduction
Jump Start

json2html.js Basics
Introduction
Jump Start

JSZip Basics
Introduction
Jump Start  

Lightbox Basics
Introduction
Jump Start

Lo-Dash Basics
Introduction
Jump Start  

Log4JavaScript Basics
Introduction
Jump Start  


1. please complete phase #3 in the coupons platform ongoing project.

2. please complete phase #4 in the coupons platform ongoing project.

3. please complete all assignments in all topics covered in class.

18

15/9/2014

Client Side JavaScript Frameworks

Dojo Toolkit
Introduction
Jump Start  
DOM Query
Ajax
Visual Effects


Introduction to JSDoc
Introduction
Jump Start  
Tags


QUnit Testing Framework
Introduction
Jump Start

Smoke.js Basics
Introduction
Jump Start

Sugar.js Basics
Introduction
Jump Start  

Two.js Basics
Introduction
Jump Start  

Video.js Basics
Introduction
Jump Start  

Yepnope.js Basics
Introduction
Jump Start  

Moris.js Basics
Introduction
Jump Start  

Mustache.js Basics
Introduction
Jump Start

UAParser.js Basics
Introduction
Jump Start

Paper.js Basics
Introduction
Jump Start

Math.js Basics
Intrduction
Jump Start

String.js Basics
Introduction
Jump Start

OpenLayers.js Basics
Introduction
Jump Start

Turn.js Basics
Introduction
Jump Start

Numeral.js Basics
Introduction
Jump Start

LESS.js Basics
Introduction
Variables
Functions
Nested Rules
Mixins


Google FontLoader
Introduction
Jump Start  

Pixastic.js Basics
Introduction
Jump Start

List.js Basics
Introduction
Jump Start

1. lotto numbers tiny project phase #3.

2. Complete phase 5 in your solution for the coupons ongoing project.

3. Complete phase 6 in your solution for the coupons platform ongoing project.

4. Complete phase 7 in your solution for the coupons platform ongoing project.

5. Complete phase 8 in your solution for the coupons platform ongoing project.

6. Please complete the small little assignments in each one of the topics covered in class.

19

22/9/2014

HTML5

Introduction to HTML5

Introduction
Multimedia

Video Capturing
Geo Location
Offline Storage


1. lotto numbers tiny project phase #4.

2. expenses tracking tiny project phase #4.

3. please compelte phase #3 in todo list tiny project  

4. complete humus tiny project phase #3

5. complete coupons platform phase #9.

20

29/9/2014

HTML5

Introduction to HTML5

Canvas 2D Graphics
Canvas 3D Graphics
Web Sockets
Web Workers
Files Access

1. towards next meeting please make an effort to catch up with all tiny projects and with the coupons final project.

21

6/10/2014

meeting on 13/10/2014 doesnot take place… it is sukot

HTML5

Introduction to HTML5
IndexedDB Database (explaining again the difficult parts)
Communication
HTML5 Forms
Drag & Drop

Mongo DB Basics
Introduction

1. please complete phase #3.5 in the todo list tiny project.

2. please complete phase #4.5 in the personal expenses tiny project

3. please complete phase #4.5 in the lotto numbers tiny project.

4. please complete phase #9.5 in the coupons platform project.

5. please complete phase #2.5 in the converter tiny project.

6. please follow the video clip at
http://www.phpbook.co.il/wordpress/2012/07/%D7%A4%D7%99%D7%AA%D7%95%D7%97-%D7%90%D7%A4%D7%9C%D7%99%D7%A7%D7%A6%D7%99%D7%94-%D7%91%D7%A1%D7%99%D7%A1%D7%99%D7%AA-%D7%9C%D7%A4%D7%99%D7%99%D7%A1%D7%91%D7%95%D7%A7/ and set up an account on facebook.. install the developer application and create a new facebook application.. please move forward till you get the phase in which you need to approve your identity to facebook using sms or credit card and make sure you complete this phase.

22

20/10/2014

Social Web Applications

Facebook JavaScript SDK
Introduction
User Session
The Graph API
User Interaction
XFBML Parsing
FQL Queries
Facebook Graph API
Introduction
Data Selection
Graph Introspection
User Authorization
Pages Interaction
Graph Publishing
Objects Deletion
Profile Photos
Facebook Places
Graph Search
Facebook Social Plugin
Introduction
JavaScript SDK
Like Button
Recommendations
Like Box
Activity Feed
Login Button
Comments


Backbone.js Basics
Introduction
Jump Start
Models
Views
Routing
Collections
Events

1. towards next meeting please try to add facebook social plugins to your twitter bootstrap based website.

23

27/10/2014

Data Bases in JavaScript

Mongo DB Basics
Jump Start
MongoDB Shell
Data Types
CRUD Operations
Querying
Indexing

PouchDB Basics
Introduction
Jump Start

TeffyDB Basics
Introduction
Jump Start

1. complete coupons platform project phase #10.

24

3/11/2014

Server Side in JavaScript

Node.js Basics
Introduction
Jump Start
Basics
MySQL
Debugging
Timers


Mongoose
Introduction
Jump Start

1. Complete phase 11 in the coupons project.

25

10/11/2014

Hybrid Applications


Android Fundamentals
Introduction
Web View

Phone Gap Basics
Introduction
Basics

1. lotto numbers tiny project phase #5.

2. converter tiny project phase #3.

3. opening hours project phase #3.

4. expenses tracking tiny project phase #5.

5. please compelte phase #4 in todolist tiny project

6. please complete humus tiny project phase #4

7. please complete phase 12 in the coupons platform project.

26

17/11/2014

Web Browsers Extensions

Chrome OS Extensions
Jump Start
Architecture
Desktop Notifications
Content Scripts
Deployment Options
Packaged Apps
Browser Actions
Manifest File
Options Page
Page Actions

1. lotto numbers tiny project phase #6.

2. converter tiny project phase #6.

3. opening hours tiny project phase #4.

4. expenses tracking tiny project phase #6.

5. please complete phase #5 in todo list tiny project

6. please complete phase #5 in humus tiny project

7. please complete phase 13 in the coupons platform on going project.

27

24/11/2014

Responsive Web Applications

Responsive Web Design
Introduction
Navigation
Media Queries
Templates
Images
Layout
Videos
Menus

Grunt Basics
Introduction
Jump Start


28

1/12/2014

UML Analysis & Design

UML Fundamentals
Use Case Diagram
Class Diagram
Activity Diagram
Package Diagram

SOAML Fundamentals
Introduction
Basics

SysML Fundamentals
Introduction
Basics

1. please complete phase 14 in the coupons platform project.


Changes Logs:

August 15th:

The topic ‘MV* Design Patterns’ was added to the JavaScript topic in meeting 11.

September 1th:

The following JavaScript libraries were added to the ‘Client Side JavaScript Libraries’ topic in meeting 18:

Microtext.js
UAParser.js
Paper.js
Math.js
String.js  
OpenLayers.js
LESS.js
Google Charts
Google FontLoader
Turn.js

September 16th:

Video Capturing was added to the HTML5 topic.

Lambda Expressions was added to the JavaScript Programming topic.

October 16th:

Code Linting and Iterators were added to the JavaScript Programming topic.
Grunt Basics was added to the the Server Side in JavaScript topic.

MySQL and Basics were added to the node.js sub-topic in Server Side in JavaScript topic.

December 17th:

The topics covered in AngularJS were changed. More topics were added. The animation topic was removed (it isn’t why we want to use angularjs).