Mod 1 – Overview of HTML and CSS

Describe structure of an HTML page

Basic HTML elements and attributes


Create basic HTML page
Display graphics and create links between pages
Page 1 of 54

Create an HTML form

Integrate simple JavaScript into page
----------------------------------------------------------------------------------------------------------------------------------------------
Page 2 of 54
Page 3 of 54
Mod 2 – Creating and Styling HTML Pages

Creating an HTML5 Page

Styling an HTML5 Page (rem allows to size elements based on a relative size to the root or html element)
Page 4 of 54
Page 5 of 54
Mod 3 – Intro to JavaScript

Overview of JavaScript
JavaScript is a programming/scripting language that supports the use of:
1. Variables = store info
2. Operators = performing calculations
3. Functions = reusable blocks of code
4. Conditional Statements and Loops = program flow
5. Objects = related properties, methods and events
Variables = Storing info for later use in the script
Data Types = Identify the type of data stored in a variable (JavaScript defines the type for you)
Operators = Math, Comparisons,
Page 6 of 54
Functions = grouped blocks of code for reuse
Page 7 of 54
Conditional Statements
Looping Statements
Page 8 of 54
Objects
Page 9 of 54
JSON Arrays
Page 10 of 54

Introduction to Document Object Model (DOM) vs BOM (Browser Object Model)
Finding Elements of a page
Adding elements to an item on the page
Page 11 of 54
Handling Events through the DOM
Page 12 of 54

Intro to JQuery
JQuery is an open source JavaScript library. One library to c[]reate consistent code for all browsers
Page 13 of 54
Page 14 of 54
Mod 4 – Creating Forms to Collect and Validate Data

Creating HTML5 Forms
Html Input Types and Elements
Page 15 of 54
Html5 Input Attributes

Validating User Input by Using HTML5 Attributes
Required attr.
Pattern attr. (regular expression
CSS feedback
Page 16 of 54

Validating User Input with JavaScript
Empty strings
Page 17 of 54
Mod 5 – Communicating with a Remote Server

Sending and Receiving data by using the XMLHttpRequest Object
HTTP GET Requests = browser requests (GET) content from the server. The server then responses (SENDS) content back to the browser.
TEXT FILE --
XML FILE –
Page 18 of 54

Sending and Receiving data by using the jQuery Library
**** Don’t forget to place the jquery script reference in the page *****
}).error(function() {
alert("error occurred during get operation");
});
Page 19 of 54
Mod 6 – Styling HTML5 by Using CSS3

Styling Text with CSS3

Styling Block Elements
Columns –
Blocks –

Pseudo-Classes and Elements
First-letter—
Page 20 of 54
Selection --
Links –

Enhancing Graphical Effects
Page 21 of 54
Page 22 of 54
Mod 7– Creating Objects and Methods by Using JavaScript

Writing Well-Structured JavaScript

Creating Custom Objects
JavaScript is an object oriented programming language. As such developers have the option to create user defined objects to use within their apps.
In order to create a custom object you use the “new” keyword
Using a constructor
Simply build a function to use when creating an object
Object Methods
Page 23 of 54
Using Prototypes
The objects prototype property allows the developer to add properties and methods to an object at any point. These properties and methods then
become available to any instance of the object.
Page 24 of 54

Extending Objects
Encapsulation
Page 25 of 54
Inherit Objects
Page 26 of 54
Page 27 of 54
Mod 8 – Creating Interactive Pages by using HTML5 APIs

Interacting with Files
FileReader Object – TEXT
Page 28 of 54
FileReader Object – IMAGE
Drag n Drop Image Reader
Page 29 of 54
Page 30 of 54
Drag-n-Drop Elements
rea

Incorporating Multimedia
Page 31 of 54
Add video through js
“

Reacting to Browser Location and Context
GeoLocation
Page 32 of 54
Visibility/Hidden
Page 33 of 54
Browser check

Debugging a Web App
Page 34 of 54
Mod 9 – Adding Offline Support for Web Apps

Reading and Writing Data Locally
Window.sessionStorage = temp storage until browser is closed
Window.localStorage = persistent storage until cleared
Page 35 of 54
Destroy enemies kept in localStorage
Page 36 of 54

Adding Offline Support by Using App Cache
Build a manifest page that tells the browser which content will be made available offline
Use the document.body to add a listener for the events “ononline” and “onoffline” based on the events you can then hide content that is neccessary
Page 37 of 54
Mod 10 – Implementing an Adaptive User Interface

Supporting Multiple Form Factors
ProtoFluid is an excellent site to help test the look of your site with different screen sizes
Design Considerations
Screen size
Input Type (no hover on mobile)
Browser capabilities
Images (large Images!
Page Layout (Fixed vs. relative)
Screen Orientation
Printing (expand/hide stuff)

Creating an Adaptive User Interface
CSS Media Queries
Setting a Media Query for the CSS allows the developer to create different style for media types
Another good site for media query info http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
@media screen
@media print
@media screen, print
These media queries are placed in the existing style sheet or called out in the css link in the head tag such as;
Css print file ex.
For print it’s a good idea to remove content that isn’t necessary such as navigation
Page 38 of 54
Show this link: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Resize the window to show how the page changes based on window size
Media queries with parameters are something that can be done as well.
This looks for mobile devices with max width of 480px
Flexible Images/Layout
Page 39 of 54
Page 40 of 54
Mod 11 – Creating Adv. Graphics

Creating Interactive Graphics using SVG
SVg (Scalable Vector Graphics) nice crisp graphics (Can be styled with CSS and referred to in script

Drawing Graphics using the Canvas API
Rectangles
Page 41 of 54
Paths
Page 42 of 54
Page 43 of 54
Mod 12 – Animating the User Interface

Applying CSS Transitions
Transistions
Detecting end of transition
Page 44 of 54

Transforming Elements
Translate/Skew
Page 45 of 54
Animate Translate
3d transform
Page 46 of 54

Applying CSS Keyframe Animations
Page 47 of 54
Chrome/safar
Page 48 of 54
Play animation through js
Apply the animation to a class that is added once a button is pressed
Page 49 of 54
Page 50 of 54
Mod 13 – Implementing Real-time Communications by Using Web Sockets

Into to Web Sockets
 Opening a Web Socket allows a client (browser) to communicate with the server through their own private connection. This opens up resources
giving the user a smooth experience.
 Regular web pages are static pages and may become outdated as soon as they hit the client (ex. Stock info, real-time sports updates, etc…)
 Web sockets allow for a persistent bi-directional socket connection for communication
 They are closed either explicitly or when a timeout is reached
example
Web Browser: I'm going to keep this line open in case you have some stuff to send me.
Web Server: Okay. Check on me.
Web Browser: You got anything yet?
Web Server: No.
Web Browser: You got anything yet?
Web Server: No
Web Browser: You got anything yet?
Web Server: Yep, here it is.
The difficulty with that technology is that the web browser kept having to ask (in technical terms, the
word is poll) the server for new information. With WebSockets, it'll look a bit more like this.
Web Browser: I'm going to open up this line in case you have some stuff to send me.
Web Server:
I'll let you know when I do.
[ time passes ]
Web Server:

Browser, I've got something for you!
Using the Web Socket API
Page 51 of 54
Just let me know when you do.
Do this in the chapter 13 lab. Build an empty html doc and communicate with the web socket there
Page 52 of 54
Mod 14 – Performing Background Processing by Using Web Workers

Understanding Web Workers
 Web workers essentially do work that is typically handled through js on a page. Web workers are hosted in the browser
 The benefit is instead of slowing the page down with large js scripts you can hand some of the work off to a web worker that runs in parallel to the
web page.
 Since the web worker is off doing the large amount of work this opens up a much faster experience for the users
 Web workers do not have access to the content on the page. In order for the web worker to get content the site must pass it info
 Dedicated web workers are tied to a specific page and stop when the page is closed
 Shared web workers can access all pages and stop when the app closes

Performing Asynchronous Processing by Using Web Workers
Demo the large loop strictly through javascript
Same example but modified to include a web worker doing the large loop
Page 53 of 54
Web worker
Page 54 of 54