Mit Google Docs veröffentlicht
2013_12_html5
Automatisch alle 5 Minuten aktualisiert

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

31/12/2013

till 2100

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

7/1/2014

till 2230

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

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

3

14/1/2014

till 2230

CSS3

CSS Basics
Introduction
Background

Text

Font

Border

Outline
Margine

Padding

List

Table

Dimension

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

21/1/2014

on 28/1/2014 we won’t have a meeting

CSS3

CSS Basics
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).

-

28/1/2014

-

-

-

5

4/2/2014

JavaScript

JavaScript Programming
Introduction
Basic Elements


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

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

6

11/2/2014

JavaScript

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

Array

Date

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

2. towards next meeting please bring headphones.

3. towards next meeting pls go over the more important topics such as anonymous functions.

7

18/2/2014

JavaScript

JavaScript Programming

Functions
Global Object

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

2. please complete all assignments 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

25/2/2014

till 2230

JavaScript

JavaScript Programming
Document Object Model
Anonymous Functions

Events Handling
Error 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 in all topics we covered in class.  

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

9

4/3/2014

JavaScript

JavaScript Programming
JavaScript and CSS
Handling Images
Live Connect
CodeLinting
Regular Expressions
Memory Management
Lambda Expressions
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

11/3/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

18/3/2014

JavaScript

DOM Fundamentals
Methods & Properties
Accessing
Node Info
Node List
Navigation


JavaScript Programming
Iterators
Asynchronous Programming

Design Patterns in JavaScript
Introduction

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

25/3/2014

JavaScript

JavaScript Programming
Using Cookies
Object Oriented Programming (prototype)

Google JavaScript Style Guide
Introduction
Language Rules
Style Rules

1. for next meeting please bring a laptop or arrange a remote control for your desk top. in addition , pls bring headphones.

2. please complete the assignments in object oriented programming (assignments that you still haven’t completed).

3. pls complete the ‘username cookie’ assignment.

4. 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 

1/4/2014

Client Side JavaScript Frameworks

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

Design Patterns in JavaScript
Classic Design Patterns
JavaScript MV* Patterns

1. you should complete all the assignments in jquery course (all topics… including the ones we didn’t cover in class).

2. you should complete the ‘shapes factory assignment’

14

8/4/2014

Client Side JavaScript Frameworks

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

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

15

29/4/2014

Client Side JavaScript Frameworks

AngularJS Basics
Introduction
Basics
Routing
Navigation Menu
Filters

Introduction to Git

Distributed Work
GitHub Jump Start

GitLogs

Date.js Basics
Introduction
Jump Start

Modernizr.js Basics
Introduction
Jump Start

Microtext.js Basics
Introduction
Jump Start

Galleria 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:
Date.js Basics
Modernizr Basics
Microtext.js Basics
Galleria

4. 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.



16

13/5/2014

Client Side JavaScript Frameworks

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

Highcharts.js Basics
Introduction
Jump Start

Moment.js Basics
Introduction
Jump Start

Zxcvbn.js Basics
Introduction
Jump Start

Underscore.js Basics
Introduction
Jump Start  



1. humus tiny project phases #1 #2  

2. please complete the assignments in all topics covered in class.

17

20/5/2014

Client Side JavaScript Frameworks

Twitter Bootstrap
Introduction

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.

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

18

27/5/2014

Client Side JavaScript Frameworks

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

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

0. please complete the assignments in the topics covered in class.

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.

19

10/6/2014

HTML5

Introduction to HTML5

Introduction
Multimedia

Video Capturing
Geo Location
Offline Storage


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

Paper.js Basics
Introduction
Jump Start

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.

6. please complete the assignments in all topics covered in class.

20

17.6.2014

HTML5

Introduction to HTML5

Canvas 2D Graphics
Canvas 3D Graphics

Communication
Web Workers
Accessing Files
IndexedDB

1. towards next meeting i recommend on watching the 30min video about web sockets at https://www.youtube.com/watch?v=UlGOnYdGqtY.

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

3. pls rewrite the code that works with the db in the todolist tiny project to use the indexdb (instead of websql).

21

HTML5

Introduction to HTML5
Web Sockets
HTML5 Forms
Drag & Drop


-

22

1/7/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

1. towards next meeting please watch (recommended.. not critic!) the video of my jump start lecture for mongodb at https://www.youtube.com/watch?v=22qwKc3PVzg.

23

8/7/2014

Data Bases in JavaScript

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

PouchDB Basics
Introduction
Jump Start

TeffyDB Basics
Introduction
Jump Start

1. complete coupons platform project phase #10.

24

15/7/2014

Server Side in JavaScript

Node.js Basics
Introduction
Jump Start
Basics
MySQL


Mongoose
Introduction
Jump Start

1. Complete phase 11 in the coupons project.

2. please execute the code sample (or something similar) in node.js slides for working with mysql.


3. towards next meeting please install on your laptop the required software for developing Java applications for the android platform: You should install the Eclipse ADT at
http://developer.android.com/sdk/index.html once u download please enter the Android SDK manager (from the Eclipse top menu) and install the components for Android 19.

25

22/7/2014

Hybrid Applications


Android Fundamentals
Introduction
Web View

Phone Gap Basics
Introduction
Basics

Twitter Bootstrap
Jump Start

Dojo Toolkit
Introduction
Jump Start  
Modules (till the creation of a new module)

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.

8. towards next meeting please follow the video clip at https://www.youtube.com/watch?feature=player_embedded&v=W1EDIVd6gR0 and create a basic simple website based on h5bp template together with twitter bootstrap.

26

29/7/2014
12/8/2014

Web Browsers Extensions

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

Twitter Bootstrap
Introduction

Jump Start
Templates
Jumbatron
Glyphicons
Navigation Bar

Dojo Toolkit
Modules (from the creation of a new module)
DOM Query
Ajax
Visual Effects

Introduction to JSDoc
Introduction
Jump Start  
Tags

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 ongoing project.

27

19/8/2014

Responsive Web Applications

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

Grunt Basics
Introduction
Jump Start

Backbone.js Basics
Introduction
Jump Start

Introduction
Jump Start
Models
Views
Routing
Collections
Events

28

26/8/2014

UML Analysis & Design

UML Fundamentals
Use Case Diagram
Class Diagram
Activity Diagram
Package Diagram

SOAML Fundamentals
Introduction
Basics

SysML Fundamentals
Introduction
Basics

Polymer.js Basics
Introduction
Jump Start


Introduction to Git

Distributed Work
GitHub Jump Start

GitLogs

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).