HTML 5 Open Day Lecturer Roi Yehoshua roiyeho gmail

Agenda • HTML 5. 0 Introduction • Overview of HTML 5 new features •

Introduction • HTML 5 is the next generation of HTML and it will be

HTML 5 Goals • New features should be based on HTML, CSS, DOM, and

HTML 5 New Features • • • New structural elements Canvas <video> and <audio>

HTML 5 Desktop Browser Support 7 © Roi Yehoshua, 2012

The Mobile Web Challenge • The mobile web is massive • 10+ billion web-enabled

Mobile Web • Web technology is the one thing all devices have in common

One codebase, all platforms 10 © Roi Yehoshua, 2012

j. Query Mobile • A unified, HTML 5 -based user interface system for all

Real-World j. QM http: //www. jqmgallery. com/ 12 © Roi Yehoshua, 2012

Phone. Gap • Phone. Gap is an open-source mobile development framework

Phone. Gap Selected Apps 15 © Roi Yehoshua, 2012

Web vs. Native Web Coding Native Write once, test everywhere Write everywhere, test everywhere

HTML 5 Editors • HTML 5 Open Source Editors • Komodo Edit http: //www.

The HTML 5 Skeleton • DOCTYPE is always the first tag but no URL

HTML 5 new structural tags • HTML 5 has a series of new structural

Canvas • Canvas is an API for 2 D drawing • Canvas is resolution-independent

Using Canvas • The <canvas> element is a container <canvas id=

Drawing Rectangle example <head> <script> function draw. Rect() { var canvas = document. get.

Drawing Paths Example function draw. Triangle() { var canvas = document. get. Element. By.

Drawing Images Example function draw. Image() { var canvas = document. get. Element. By.

Canvas Image Filtering • It’s possible to paint a png or jpeg image on

Canvas Image Filtering function filter. Image() { var img = document. get. Element. By.

Canvas Image Filtering function gray. Scale(image. Data) { var data = image. Data. data;

Canvas Image Filtering 29 © Roi Yehoshua, 2012

Games created with Canvas • A first person shooter • http: //www. benjoffe. com/code/de

SVG • SVG is an alternative W 3 C spec for creating graphics •

Embedding SVG in HTML 5 • HTML 5 allows embedding SVG directly using the

Canvas vs. SVG • Vectors vs. Pixels • SVG is vector based • Canvas

HTML 5 Multimedia • Multimedia support has always been a delivery issue • Commonly

HTML 5 Video • The <video> element has a src attribute • By default

The Codec Issue • The HTML 5 spec does not mandate a specific video

The Source element • Media must be supported in multiple formats • The <source>

Video API • <video> element can be controlled via Java. Script • Used to

Video API • current. Time attribute • When read, this attribute returns the current

Video API Demo • http: //www. w 3. org/2010/05/video/mediaevents. html 40 © Roi Yehoshua,

HTML 5 Audio • Almost identical to the video element • source elements need

Combining Canvas with Video Effects • http: //www. craftymind. com/factory/html 5 video/Canvas. Vide o.

Local Storage • Local storage will mean the death of cookies • Problems with

Local Storage • Local storage can store up to 5 MB (per site) •

Working with Local Storage • Web storage is based on named key/value pairs •

Working with Local Storage • Use set. Item() method to save the key-value pair

Exploring Web Storage State • Webkit browsers have the best support for looking at

Dealing with Complex Objects • AJAX applications often hold JSON data structures • Using

JSON and Java. Script • JSON is a subset of the object literal notation

JSON Serialization • There are two JSON methods in Java. Script: • JSON. stringify(obj)

JSON Serialization local. Storage. products = JSON. stringify(products); var p = JSON. parse(local. Storage.

Get JSON from Server $. ajax({ $. get. JSON('ajax/test. json', type: 'POST', function (data)

Web SQL • Web SQL gives us the ability to create a real database

Create and Open Database • If you try to open a database that doesn’t

Execute SQL • execute. Sql() is used for both read and write statements, includes

Execute SQL • To select values from the table, you can use a callback

HTML 5 Forms • HTML 5 defines many new input types and attributes to

New Input Elements • HTML 5 adds 13 new type options • Mostly extend

HTML 5 Forms Browser Support 59 © Roi Yehoshua, 2012

Email Input Type • Add type value of email • <input type=“email”> • What

Number Input Type • Numbers often need to be constrained by range • New

Number Input Type • Browser support issues • Chrome and Opera display these as

Range Input Type • Creates a slider bar • Currently supported only by Chrome

In Chrome In Opera 65 ©" src="https://present5.com/presentation/0519b86ce7d661752864e8ecf9577331/image-65.jpg" alt="Date Input Type In Chrome In Opera 65 ©" />

Form Validation • HTML 5 defines 8 types of input validations • These are

Required Fields • You can force a field to be mandatory on the client

Type Validations • Using the new HTML 5 input fields, you can explicitly create

Pattern Validations • You can use the pattern attribute to specify your own custom

Custom Validation Messages • You can set a custom validation message using the method

Custom Validations • You can use set. Custom. Validity() to add your own custom

input[type=text]: focus: valid, input[type=email]: focus: valid, input[type=number]:" src="https://present5.com/presentation/0519b86ce7d661752864e8ecf9577331/image-72.jpg" alt="Styling with CSS 3 72 © Roi Yehoshua, 2012

Placeholder attribute • The placeholder attribute offers default text • Gives the user example or instruction for the field • Sometimes called a watermark • Can only be used for text fields 73 © Roi Yehoshua, 2012

Geolocation • Geolocation API lets you share your location with trusted web sites • The latitude and longitude are available to Java. Script on the page • Enables to provide location-aware things like finding local businesses or showing your location on a map 74 © Roi Yehoshua, 2012

Get Location • navigator. geolocation is the entry point for all location related calls • To get hold of the user’s current position use the get. Current. Position() method navigator. geolocation. get. Current. Position(show. Location, handle. Location. Error); • Location querying is asynchronous, so a callback is supplied • Mandatory success callback, optional error method 75 © Roi Yehoshua, 2012

Get Location • When user agrees, a position object is passed to the success method function show. Location(position) { var lat = position. coords. latitude; var long = position. coords. longitude; var when = position. timestamp; } • Position object has two properties • coords – list of properties about location (next slide) • timesatmp – date and time when location was calculated 76 © Roi Yehoshua, 2012

Coords object • Only latitude, longitude and accuracy are guaranteed • Depends on device whether the other are supported Property Type Description latitude double Decimal degrees longitude double Decimal degrees altitude double or null Meters above the referenced ellipsoid accuracy double Meters altitude. Accuracy double or null Meters heading double or null Degrees clockwise from true north speed double or null Meters/second 77 © Roi Yehoshua, 2012

Location Tracking • Receive notifications about location changes • Can be used for navigation apps, sport apps, and more • Use navigation. getolocation. watch. Position() to start navigator. geolocation. watch. Position(success, error); watching a user’s position • The method returns a watch id. Keep it. When tracking is no longer needed, use clear. Watch() with the watch id to stop. • The callback of watch. Position will get called every time location has changed 78 © Roi Yehoshua, 2012

Google Maps API • A Java. Script API to display embedded maps in web sites • Works on both desktop and mobile devices • Free to use • Full documentation: http: //code. google. com/apis/maps/d ocumentation/javascript/ 79 © Roi Yehoshua, 2012

Google Maps API • Add the following Java. Script to your page: • Assign a special empty div that will contain the map. Recommended size of the div is entire page.

• Display the map by creating a google. maps. Map object • To initialize a Map, first create a Map options object to contain map initialization variables and pass it to the Map object 80 © Roi Yehoshua, 2012

Google Maps API var ns = google. maps; var map; function init() { var opts = { center: new ns. Lat. Lng(0, 0), zoom: 1, map. Type. Id: ns. Map. Type. Id. HYBRID // or ROADMAP or SATELLITE }; map = new ns. Map(document. get. Element. By. Id("map"), opts); } 81 © Roi Yehoshua, 2012

Update Location on Map function update. Location() { navigator. geolocation. get. Current. Position(success, error); } function success(position) { var latlng = new ns. Lat. Lng(position. coords. latitude, position. coords. longitude); map. set. Center(latlng); map. set. Zoom(17); } 82 © Roi Yehoshua, 2012

Markers • Markers identify points on the map. • Place markers on the map using google. maps. Marker • Markers can receive "click" events, and are often used within event listeners to bring up info windows. function draw. Marker(latlng) { marker = new ns. Marker({ position: latlng, map: map, title: 'You are here!' }); } 83 © Roi Yehoshua, 2012

Offline Applications • HTML 5 introduces new methods for enabling a web site or web application to function without a network connection. • When you’re working on a mobile connection and your signal drops having some level of access is better than nothing. • Can run a completely offline app as a standalone 85 © Roi Yehoshua, 2012

Manifest File • The application cache is controlled by a plain text file with a. manifest extension • Contains a list of resources to be stored for use when there is no network connectivity. • If the user goes offline but has visited the site while online, the cached resources will be loaded so the user can still view the site in a limited form. 86 © Roi Yehoshua, 2012

Manifest file • A sample manifest file CACHE MANIFEST # Offline cache v 1 # html files article. html # css files assets/styles. css # js files assets/javascript. js # images assets/ico_ninja-star. gif 88 © Roi Yehoshua, 2012

Manifest file • Every page that needs to use the manifest must link to it, using the manifest attribute Offline App 89 © Roi Yehoshua, 2012

Web Workers • Web Workers allow for a multi-threaded execution of Java. Script programs. • A Web. Worker is a Java. Script script executed from an HTML page that runs in the background, independently of other, user-interface scripts that may also have been executed from the same HTML page. • Can be used to perform a computationally expensive task without interrupting the user interface. • Web workers are currently supported by Safari, Chrome, Operaand Mozilla Firefox • IE 10 added support for Web Workers in Platform Preview 2 90 © Roi Yehoshua, 2012

Web Workers • Web workers interact with the document via message passing. • The following code loads a Java. Script file var worker = new Worker("worker_script. js"); • To send message to the worker, use the post. Message() method of the worker object worker. post. Message("Hello World!"); 91 © Roi Yehoshua, 2012

Web Workers • The event onmessage is used to retrieve information in the worker. onmessage = function (event) { alert("Received message " + event. data); do. Something(); } function do. Something() { //do worker. post. Message("Work done!"); } 92 © Roi Yehoshua, 2012

Web Sockets • Web. Socket is a technology providing for bidirectional, full-duplex communications channels, over a single TCP socket. • It is designed to be implemented in web browsers and web servers, but it can be used by any client or server application. • Chrome 14, Firefox 7 and Internet Explorer 10 are currently the only browsers supporting the latest draft specification ("hybi-10") of the Web. Socket protocol. 94 © Roi Yehoshua, 2012

Web Sockets • Needs a dedicated server supporting web sockets • Server-Side implementations: • Socket. IO, Jetty (Java), Ruby, Python, Perl • Client Side: Native support on i. Phone. • Full Solution: Socket. IO. • socket. io also provides a lot of extra functionality over existing web sockets 95 © Roi Yehoshua, 2012

Web Sockets Client var connection = new Web. Socket('ws: //foo. org/wall'); connection. onopen = function () { connection. send('Ping'); }; connection. onerror = function (error) { console. log('Web. Socket Error ' + error); }; connection. onmessage = function (e) { console. log('Server: ' + e. data); }; 96 © Roi Yehoshua, 2012

CSS 3 • Like HTML 5, CSS 3 is a living standard • No unified standard yet • W 3 C has split the spec into modules • Each has its own timeline • CSS 3 Modules Recommendation Status • http: //www. css 3. info/modules/

CSS 3 New Features • • • Improved Selectors Border Radius Box and Text Shadow RGBA color Multiple Columns Box Resizing Gradients Transitions Transforms Media Queries

CSS 3 Media Queries • You can query device dimensions: /* Landscape smart phone */ @media (min-width: 321 px) and (max-width: 480 px) { /* style goes here */ } • You can also query device orientation: @media (orientation: portrait) { /* style goes here */ } 99 © Roi Yehoshua, 2012

CSS 3 Media Queries • You can also query device pixel density #header { background: url(medium-density-image. png); } @media (-webkit-device-pixel-ratio: 1. 5) { /* CSS for high-density screens */ #header { background: url(high-density-image. png); } } @media (-webkit-device-pixel-ratio: 0. 75) { /* CSS for low-density screens */ #header { background: url(low-density-image. png); } } 100

CSS 3 Media Queries • It is also possible to use completely different CSS files – The following example links to different CSS file dependent on the device’s pixel density 101 © Roi Yehoshua, 2012

Responsive Web Design • Responsive Web Design (RWD) essentially indicates that a web site is crafted to use CSS 3 media queries with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also flexible images. • As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning and scrolling. 102 © Roi Yehoshua, 2012

Responsive Web Design • In the following example, we are going to adapt the layout of a simple web page that contains a banner, a main content area and a side bar with 3 news items to different screen sizes and orientations • We will need to classify the page into one of the following 4 types of screens: 103 – Desktop or tablet landscape mode – Tablet portrait mode – Smartphone landscape mode – Smartphone portrait mode © Roi Yehoshua, 2012