Build Web Apps with HTML5, CSS, JavaScript

Building Web Apps with HTML5 & Javascript
Presented by: Abdel Moneim Emad

Basic knowledge about HTML4.01(AKA HTML)
Fair knowledge about JavaScript
Basic knowledge about CSS
Fair knowledge about Internet & Mobile browsers
Basic knowledge about Object Oriented Programming

Introduction about HTML (and HTML5 of course)
Structure - Document Object Model (DOM)
Behavior – JavaScript Objects & Functions
Geo-location
Web Storage (or may be better call it Local Storage?)
Extroverted Apps (Web Services)
Other many useful topics

The old HTML 4.01 version of the doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
The new doctype for HTML5 is simply:
<!doctype html>
The old meta-tag:
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
The new meta-tag is simply:
<meta charset="utf-8">

The old CSS link:
<link type="text/css" rel="stylesheet" href="lounge.css">
The new CSS link is simply:
<link rel="stylesheet" href="lounge.css">
The old SCRIPT link:
<script type=“javascript” src="lounge.js“></script>
The new SCRIPT link is simply:
<script src="lounge.js“></script>

That’s It?
Where is the amazing
new features? And
what this presentation
is all about

1- The browser loads a document, which includes markup
written in HTML and style written in CSS.
2- As the browser loads your page, it also creates
an internal model of your document that
contains all the elements of your HTML markup.
3- While the browser is loading your page it’s also loading your
JavaScript code, which typically begins executing just
after the page loads.

4- Using JavaScript, you can interact with your page by
manipulating the DOM, react to user or browser-generated
events, or make use of all
the new APIs.
5- The APIs give you access to audio, video, 2D drawing with the
canvas, local storage and a bunch of other great technologies
needed to build apps. And remember, to make use of
all these APIs, we need JavaScript.

HTML markup = Structure
CSS style = Presentation
JavaScript = Behavior
Structure + Presentation =
Some great-looking pages, but they’re still just pages.
Structure + Presentation + Behavior =
An interactive experience; or, even better, full blown web apps.

Video Audio Canvas
Web
Storage
Geo-
location
Offline Web
Access
Score
Out of
555
Firefox √ √ √ √ √ √ 446
Safari √ √ √ √ √ √ 397
Google
Chrome
√ √ √ √ √ √ 503
Mobile
Webkit
√ √ √ √ √ √ 420
IE 6, 7, 8 30
IE 9 √ √ √ √ √ 128
IE 10, 11 √ √ √ √ √ √ 363

keep in mind that some of the newer features of HTML5 might
not be supported, which leads back to the question of how to
handle that.
Always make fallbacks section to handle different behaviors for
different browsers with different versions
Try to inform your web app visitors of any problems because of
the browser they use.
Sometimes, no problem to mention the supported browsers

Probably, you already know how to write JS scripts.
BUT who wants to be a scripter when can be a
programmer?
It’s time to learn about JavaScript functions and objects.
They’re the key to writing code that is more powerful, better
organized and more maintainable.

Variables are declared using var and a name. No types are
required, and you don’t have to give it a value unlike some
other languages.
var width;
var width = 10;
var myTableWidth = 10; (Note the Camel Case)
var isChecked = true; (Boolean variable)
var name = "Abdel Moneim Emad"; (String variable)

You can’t mess with the DOM until the page has fully
loaded.
i.e. use window.onload = [Your Function]
<script>
function init() {
var company = document.getElementById(“softwareCompany");
company.innerHTML = “ We are at Intercom Enterprises!";
}
window.onload= init;
</script>

var tempByHour = new array();
tempByHour[0] = 59.2;
tempByHour[1] = 60.1;
tempByHour[2] = 63;
tempByHour[3] = 65;
tempByHour[4] = 62;
Or
var tempByHour = [59.2, 60.1, 63, 65, 62];
//adding another item…
tempByHour[5] = 61;

window.onload = init;
function init() {
var button = document.getElementById("addButton");
button.onclick = handleButtonClick;
}
function handleButtonClick() {
var songName = document.getElementById("songTextInput").value;
var li = document.createElement("li");
li.innerHTML = songName;
var ul = document.getElementById("playlist");
ul.appendChild(li);
}

function cook(degrees, mode, duration) {
// your code here
}
cook(425.0, "bake", 45);
cook(425.0, "bake", 45);
You define a function with parameters
And call a function with arguments

var levelThreshold = 1000; //GLOBAL Variable
function getScore(points) {
var score; //LOCAL Variable
for (var i = 0; i < levelThreshold; i++) {
//code here
}
return score;
}
Global variables die after the page ends (Even with a REFRESH)
Local variables die after the function ends

Functions are also values:
function addOne(num) {
return num + 1;
}
var plusOne = addOne;
var result = plusOne(1);
Functions can be anonymous (without name):
var f = function(num) {
return num + 1;
}
var result = f(1);

var fido = {
name: "Fido",
weight: 40,
breed: "Mixed",
loves: ["walks", "fetching balls"]
bark: function() {
alert(this.name+“ says Woof woof!");
}
};
Access object properties with “dot” notation:
var w = fido.weight;
Access object properties using a string with [] notation:
var w = fido["weight"];

Change a property value:
fido.weight = 27;
fido.loves.push("chewing bones");
Enumerate an object’s all properties:
var prop;
for (prop in fido) {
alert("Fido has a " + prop + " property ");
if (prop == "name") {
alert("This is " + fido[prop]);
}
}

Get the length of an array property:
var noOfHoppies = fido.loves.length;
Call the object method:
fido.bark();
Add a new property anytime:
fido.age = 4;
fido.loves.push("chewing bones");
Likewise, you can delete any property:
delete fido.age;

fido.weight = 48;
fido is a reference to an object, which means the object doesn’t live in the fido variable,
but is pointed to by the fido variable.
loseWeight(fido);
function loseWeight(dog) {
dog.weight = dog.weight - 10;
}
When we pass fido into loseWeight, what gets assigned to the dog parameter is a copy
of the reference, not a copy of the object. So fido and dog point to the same object.

So, What if we have another dog, called “Tiny” with a different characteristics (of
course still like any dog)
var tiny = {
name: “Tiny",
weight: 8,
breed: "Chawalla",
};
Duplicate Code, Waste and Error prone
“One of the aims of object-oriented programming is to maximize code reuse”
Here comes the CONSTRUCTOR

function Dog(name, breed, weight) {
this.name = name;
this.breed = breed;
this.weight = weight;
this.bark = function() {
alert(this.name + " says Woof!");
};
}
var fido = new Dog("Fido", "Mixed", 38);
var tiny = new Dog("Tiny", "Chawalla", 8);

Create web pages that are location aware
Get users’ POIs without even asking him to enter their
location
Get the nearest point to what the users are standing on.
Use your Offline GPS, Assisted GPS, 3G, WiFi or even your IP
The best location-aware device can be your smart phone,
tablet, laptop (or even your desktop PC)

 Can be specified in:
 degrees/minutes/seconds (47˚38’34’’, 122˚32’32’’)
 Decimal values (47.64, -122.54)
 To convert degrees to decimal, you can use this function:
function degreesToDecimal(degrees, minutes, seconds) {
return degrees + (minutes / 60.0) + (seconds / 3600.0);
}
 When you run a Geolocation web app for the first time, you’ll
notice a request in the browser asking for your permission to
use your location. This is a browser security check

function computeDistance(startCoords, destCoords) {
var startLatRads = degreesToRadians(startCoords.latitude);
var startLongRads = degreesToRadians(startCoords.longitude);
var destLatRads = degreesToRadians(destCoords.latitude);
var destLongRads = degreesToRadians(destCoords.longitude);
var Radius = 6371; // radius of the Earth in km
var distanceInKm = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
Math.cos(startLatRads) * Math.cos(destLatRads) *
Math.cos(startLongRads - destLongRads)) * Radius;
return distanceInKm;
}
function degreesToRadians(degrees) {
var radians = (degrees * Math.PI)/180;
return radians;
}

Put this line in the head of your HTML document:
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
And the following DIV element in the body of your HTML document:
<div id="map"></div>
(sets the map <div> to 400px by 400px with a black border in CSS)
var map;
function showMap(coords) {
var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude);
var mapOptions = {zoom: 10, center: googleLatAndLong,
mapTypeId: google.maps.MapTypeId.ROADMAP};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions);
}

Displaying Marker (Pin) on Map:
var markerOptions = {position: latlong,map: map,title: title,clickable: true};
var marker = new google.maps.Marker(markerOptions);
Displaying Info Window after click on Marker:
var infoWindowOptions = {content: content,position: latlong};
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker, "click", function() {
infoWindow.open(map);
});

Making Extroverted Apps (Web Services)
Gather data and bring it all back to build a better
experiences mixing all that great data together.
Move over XML, meet JSON
Browser Security Policy!!
Meet JSONP
It’s time for Timer

1. The server has some data that is frequently updated and the server
made them available via web service
2. When the user calls the web app, the browser will load it including
the HTML markup, CSS and JavaScript
3. The app makes a web request to retrieve the data from the server
4. The app receives data back from the server
5. The app takes a look at the data and update the page’s DOM to
reflect the newly retrieved data
6. The browser updates the page based on the updated DOM and the
user sees the results
7. The app goes back to step 3. As a result, the page appears to be
updated in near real-time

var url = "http://someserver.com/data.json";
var request = new XMLHttpRequest();
request.open("GET", url);
request.onload = function() {
if (request.status == 200) {
alert(request.responseText);
}
};
request.send(null); //In our case, we retrieve data not send it

JSON is JavaScript Object Notation and it has a number of
advantages: size, readability and being native to
JavaScript
You can parse it quickly and easily straight into JavaScript
values and objects
You can use it to exchange JavaScript data over the
network
You can use it to store data in a local store with the Web
Storage API

JSON  String
var fido = new Dog("Fido", "Mixed", 38);
var fidoAsString = JSON.stringify(fido);
OUTPUT: {name:"Fido",breed:"Mixed",weight:38}
String  JSON
var fidoAsJSON = JSON.parse(fidoAsString);
alert(“Dog name is “+ fidoAsJSON.name);

When your pages is served from XDomain.com and uses
XMLHTTPRequest to get data from YDomain.com, the
browser sees this request is to a different domain than the
page, and shuts it down and Request denied.
The browser thinks of it as a security issue.
To avoid the same-origin security issues, you must use
JSONP

Tired of stuffing your client data into that tiny 4KB cookie?
That was fun in the 90s, but we’ve got much bigger needs
today
What if I said we could get you 5MB on every user’s
browser?
Need to store any object locally on your user’s device and
to make use of it in your web app?
Need to make an offline (or semi-offline) web app
Meet the new HTML5 Web storage API

localStorage.setItem("sticky_0", "Pick up dry
cleaning");
localStorage.setItem("sticky_1", "Cancel cable tv,
who needs it now?");
localStorage.getItem("sticky_0");
var numItems =
parseInt(localStorage.getItem("numitems"));
numItems = numItems + 1;
localStorage.setItem("numitems", numItems);

localStorage.setItem("sticky_0", "Pick up dry
cleaning");
localStorage["sticky_0"] = "Pick up dry cleaning";
var sticky = localStorage.getItem("sticky_0");
var sticky = localStorage["sticky_0“];
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage[key];
alert(value);
}

localStorage.removeItem(key);
localStorage.clear();
var stickyObj = {"value": value,"color": color};
localStorage.setItem(key,
JSON.stringify(stickyObj));
sessionStorage["username"] = "amemad“;

This is just the beginning and we need more practice.
Some advanced topics not mentioned like audio,
video, canvas and web workers.
HTML5 APIs are written in a clever way, learn from them
and try to make your coding style at the same level.
Documentation is important as much as the code itself.
Thanks to “Head First: HTML5 Programming” book, it
inspired and helped me a lot in preparing those slides.

To download all the code and sample files,
please visit:
http://wickedlysmart.com/hfhtml5
http://www.html5rocks.com/en/tutorials/websoc
kets/basics/

Build Web Apps with HTML5, CSS, JavaScript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Build Web Apps with HTML5, CSS, JavaScript

Similar to Build Web Apps with HTML5, CSS, JavaScript (20)

Recently uploaded

Recently uploaded (20)

Build Web Apps with HTML5, CSS, JavaScript

Editor's Notes