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
XHTML Fundamentals | 1. You can find the JavaScript slides at http://www.abelski.com/moodle/course/view.php?id=13. |
2 | 19/5/2014 | Fundamental Topics | Introduction to Procedural Programming XHTML Fundamentals | 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. |
26/5/2014 | CSS3 | CSS Basics Text Font | 1. towards next meeting please complete all assignments in all topics. 3. towards next meeting please try to go over the git slides. | |
4 | 2/6/2014 | CSS3 | CSS Basics Outline Padding List Table Dimension Animations 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. 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). |
5 | 9/6/2014 | JavaScript | JavaScript Programming | 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 Array Date | 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). |
7 | 23/6/2014 | JavaScript | Functions (except for apply and call functions) | 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: |
8 | 30/6/2014 | JavaScript | JavaScript Programming String Math Location Navigator Screen History | 1. lotto numbers tiny project phase #1. 2. converter tiny project phase #1. 4. please get ready for next meeting going over the prototype topic (in oop). 6. please go over the following topics on your own: String Math Location Navigator Screen History |
9 | 7/7/2014 | JavaScript | JavaScript Programming OOP (Prototype) | 1. towards next meeting please watch my ajax lecture (in hebrew) at https://www.youtube.com/watch?feature=player_embedded&v=8OIncYs8ANs. 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 DOM Fundamentals Parsing | 1. please complete opening hours tiny project phase #1. |
11 | 21/7/2014 | JavaScript | DOM Fundamentals
| 1. personal expenses tracker application, phase #1, phase #2 |
12 | 28/7/2014 | JavaScript | JavaScript Style Guide | 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. |
11/8/2014 | Client Side JavaScript Frameworks | The jQuery + jQuery UI Libraries | 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 | 1. lotto numbers tiny project phase #2. 2. converter tiny project phase #2. 6. you should complete the ‘shapes factory assignment’ |
15 | 25/8/2014 | Client Side JavaScript Frameworks | AngularJS Basics | 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: Highcharts Basics, |
16 | 1/9/2014 | Client Side JavaScript Frameworks | Distributed Work GitLogs The Cookie Object Overlays | 1. humus tiny project phases #1 #2 |
17 | 8/9/2014 | Client Side JavaScript Frameworks | Adapts.js Basics Howler.js Basics JSZip Basics | 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 Smoke.js Basics Two.js Basics Video.js Basics Yepnope.js Basics Moris.js Basics UAParser.js Basics
| 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. |
22/9/2014 | HTML5 | Introduction Video Capturing | 1. lotto numbers tiny project phase #4. 3. please compelte phase #3 in todo list tiny project 5. complete coupons platform phase #9. | |
20 | 29/9/2014 | HTML5 | Canvas 2D Graphics | 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 | HTML5 | Introduction to HTML5 | 1. please complete phase #3.5 in the todo list tiny project. |
20/10/2014 | Social Web Applications | Facebook JavaScript SDK
| 1. towards next meeting please try to add facebook social plugins to your twitter bootstrap based website. | |
27/10/2014 | Data Bases in JavaScript | Mongo DB Basics TeffyDB Basics | 1. complete coupons platform project phase #10. | |
3/11/2014 | Server Side in JavaScript | Node.js Basics
| 1. Complete phase 11 in the coupons project. | |
25 | 10/11/2014 | Hybrid Applications | Android Fundamentals | 1. lotto numbers tiny project phase #5. 2. converter tiny project phase #3. 3. opening hours project phase #3. 5. please compelte phase #4 in todolist tiny project 7. please complete phase 12 in the coupons platform project. |
26 | 17/11/2014 | Web Browsers Extensions | Chrome OS Extensions | 1. lotto numbers tiny project phase #6. 2. converter tiny project phase #6. 4. expenses tracking tiny project phase #6. 5. please complete phase #5 in todo list tiny project 7. please complete phase 13 in the coupons platform on going project. |
27 | 24/11/2014 | Responsive Web Applications | Responsive Web Design | |
28 | 1/12/2014 | UML Analysis & Design | UML Fundamentals | 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).