© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.

il

What is HTML5? The New Elements Migration to HTML5 HTML5 APIs CSS3 Q&A Summary

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel

2

HTML5 is... • The future of the web • Not just a marketing message • Still under development • Supposed to be ready by 2014 (maybe…)

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel

3

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel

4

• • • • • •

Accessibility Searchability Internationalization Interoperability Many new JavaScript APIs and improved capabilities Many new CSS3 capabilities

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel

5

Bnei Brak 51202 Israel 6 . 14-18 Baruch Hirsch St.© Copyright SELA software & Education Labs Ltd.

14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 7 .© Copyright SELA software & Education Labs Ltd.

14-18 Baruch Hirsch St.• No need for div elements all over the place • New ways to mean what you actually meant to mean • Use new structural elements HTML 4 HTML 5 © Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 8 .

Header Nav Section The page header shown on the page. not the same as <head> Collection of links to other pages A part or chapter in a book. or essentially the content body of the page • And More © Copyright SELA software & Education Labs Ltd.Element Article Footer Description Defines an article (for example within a section) Footer elements contain information about their containing element: who wrote it. etc. copyright. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 9 .

or a fractional value Progress Output Time Represents the completion progress of a task Represents the result of a calculation Represents a specific moment in time © Copyright SELA software & Education Labs Ltd.Element Mark Meter Defines marked text Description Represents a scalar gauge providing a measurement within a known range.Bnei Brak 51202 Israel 10 . 14-18 Baruch Hirsch St.

datetimelocal) © Copyright SELA software & Education Labs Ltd. month. week.Types Email Url Number Range Search Color Date pickers (date.Bnei Brak 51202 Israel 11 . datetime. 14-18 Baruch Hirsch St. time.

allows selection of multiple files Specifies a pattern used to validate an input field A short hint intended to aid the user with data entry Boolean attribute to indicate that the element is required Limits allowed values.Attribute Min.Bnei Brak 51202 Israel 12 . 14-18 Baruch Hirsch St. Max Multiple Pattern Placeholder Required Step Description Accepted min and max values Related to file input type. thus indicating the granularity required And many more © Copyright SELA software & Education Labs Ltd.

14-18 Baruch Hirsch St.© Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 13 .

Enable to play video natively in the browser Video can be composited with anything else on the page HTML content.264.mp4" id="videoTag" width="640px" height="360px"> <!-.Only shown when browser doesn’t support video --> <!-. GPU-based decoding in most of the browsers <video src="video. SVG graphics Include standard codecs like: h.You Could Embed Flash or Silverlight Video Here --> </video> . images. ogg and webm Hardware accelerated.

You could embed Flash or Silverlight audio here --> </audio> .Only shown when browser doesn’t support audio --> <!-.Enable to play audio natively in the browser Industry-standard MP3 and AAC audio Fully scriptable via the DOM <audio src="audio.mp3" id="audioTag" autoplay controls> <!-.

Bnei Brak 51202 Israel 16 . 14-18 Baruch Hirsch St.Attribute Width Height Audio *controls *autoplay *loop Poster *preload pixels pixels muted controls autoplay loop URL preload value description The width of the video The height of the video Is audio muted Is video has controls Is video start automatically Is video run in loop Is video has initial picture Is video preloaded *src URL The source of the video * Attribute applies to audio as well © Copyright SELA software & Education Labs Ltd.

Method name canPlayType Return value DOMString. 14-18 Baruch Hirsch St.e.“” Probably Maybe Arguments type description Checks whether the type of media can be displayed. other methods like those currently found in specific browsers may yet be included © Copyright SELA software & Education Labs Ltd. i. Loads the media Load Play Pause Plays the media Pauses the media • Since the standard is not complete yet. if the appropriate codec is found..Bnei Brak 51202 Israel 17 .

14-18 Baruch Hirsch St.© Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 18 .

footer. header. etc. © Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 19 . article.• Change the DOCTYPE to – <!DOCTYPE html> • Set Character Encoding – Use HTTP Content-Type header or – Use a Unicode Byte Order Mark character at the start of the file or – Use <meta charset="UTF-8"> • Replace divs with new structural elements – section. 14-18 Baruch Hirsch St.

© Copyright SELA software & Education Labs Ltd. frameset. canvas. • Deprecate obsolete attributes – target attribute on link. • Deprecate obsolete elements – frame.• Use the new attributes wherever they are needed – media. • Use the new elements to explore new opportunities – SVG. autofocus for input types. etc. etc. 14-18 Baruch Hirsch St. etc.Bnei Brak 51202 Israel 20 . form. audio. longdesc attribute on img and iframe. font. video. etc.

Bnei Brak 51202 Israel 21 . 14-18 Baruch Hirsch St.© Copyright SELA software & Education Labs Ltd.

14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela. 14-18 Baruch Hirsch St.co.il © Copyright SELA software & Education Labs Ltd.© Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 22 .

sorry. circles. 50.getContext("2d").fillRect(30. </script> . 30.0. context. boxes. text and rasterized images <canvas id="myCanvas" width="200" height="200"> Your browser doesn’t support Canvas. </canvas> <script type="text/javascript"> var example = document.getElementById("myCanvas").fillStyle = "rgb(255.0)".A block element that allows developers to draw 2D graphics using JavaScript Methods for drawing include: paths. 50). var context = example. context.

14-18 Baruch Hirsch St.© Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 24 .

linking and views © Copyright SELA software & Education Labs Ltd. scripting. markers. gradients.• Create and draw 2D vector graphics using XML – Vector images are composed of shapes instead of pixels – Based on the SVG 1. colors. 14-18 Baruch Hirsch St. clipping. masking. shapes.Bnei Brak 51202 Israel 25 . transforms. styling. paths.1 2nd Edition Full specification • Support for: – Full DOM access to SVG elements – Document structure. patterns.

w3. 14-18 Baruch Hirsch St.<svg width="400" height="200" xmlns="http://www.Bnei Brak 51202 Israel 26 .org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg> © Copyright SELA software & Education Labs Ltd.

© Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 27 . 14-18 Baruch Hirsch St.

complementing each other © Copyright SELA software & Education Labs Ltd. but with varying degrees of effort • You can use Canvas and SVG in the same application. 14-18 Baruch Hirsch St.• HTML5 specifies two graphics models: – SVG – Canvas • Almost any vector graphic can be drawn with either technology .Bnei Brak 51202 Israel 28 .

Graphs Static Images Complex scenes. Printing © Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 29 . 14-18 Baruch Hirsch St.Screen Capture Interactive Charts. lots of objects Video Manipulation Web Advertising 2D Gaming High-Fidelity Documents for Viewing.

var val = localStorage. localStorage.key = "value".getItem("key"). var val = localStorage.key.Replacement for Cookies Simple API sessionStorage Data is accessible to any page from the same site opened in that window localStorage Data spans multiple windows and lasts beyond the current session localStorage. "value). .setItem("key".

14-18 Baruch Hirsch St.© Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 31 .

• At its simplest. an offline web application is a list of URLs – HTML. called a manifest file – The manifest file is just a text file located on the web server • A web browser that implements HTML5 offline applications will – Read the list of URLs from the manifest file – Download the resources and cache them locally – Automatically keep the local copies up to date as they change © Copyright SELA software & Education Labs Ltd. images. CSS. or any other kind of resource • The home page of the application points to this list.Bnei Brak 51202 Israel 32 . JavaScript. 14-18 Baruch Hirsch St.

• An offline web application revolves around a cache manifest file • What’s a manifest file? – A list of all of the resources that your web application might need to access while it’s disconnected from the network.Bnei Brak 51202 Israel 33 . 14-18 Baruch Hirsch St. using a manifest attribute on your <html> element © Copyright SELA software & Education Labs Ltd. – In order to bootstrap the process of downloading and caching these resources. you need to point to the manifest file.

The Content-Type of .manifest"> <body> </body> </html> © Copyright SELA software & Education Labs Ltd.manifest in the server must be set to text/cache-manifest. otherwise. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 34 . the manifest won’t be downloaded properly <!DOCTYPE HTML> <html manifest="/MyAppCache.

jpg © Copyright SELA software & Education Labs Ltd.js /image1.html NETWORK: /login.The manifest file contains three sections The explicit section (the default). 14-18 Baruch Hirsch St.css /myjs.Bnei Brak 51202 Israel 35 . which defines all the files that need to be cached in the client machine The network section (online white list section). which defines all the resources that can’t be cached and can therefore only work when there is a connection The fallback section. which defines what to do if some file is not successfully cached CACHE MANIFEST FALLBACK: /offline.aspx CACHE: /mycss.

14-18 Baruch Hirsch St.• To find out the status of the connection. you can register to the ononline and onoffline events © Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 36 . you can use the online DOM property of the navigator object • To be notified when the status of the network connection changes.

} else { alert('Unexpected event: ' + e.').event.type) { alert('The browser is OFFLINE. 14-18 Baruch Hirsch St.type) { alert('The browser is ONLINE. document.onload = function () { document.').type). if ('online' == e.Bnei Brak 51202 Israel 37 .function reportConnectionEvent(e) { if (!e) e = window.body. } else if ('offline' == e.body. } © Copyright SELA software & Education Labs Ltd.onoffline = reportConnectionEvent. } } window.ononline = reportConnectionEvent.

com/offlineapp © Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 38 . 14-18 Baruch Hirsch St.http://html5demos.

fuel stations. • Other applications want to gather information about user locations for future use • There have been several ways to get user location information: – Installing a GPS-based client application on the user’s device – Finding the user’s IP and using it to figure out the user’s location – And so on © Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 39 .• Many applications are based on user location – Finding nearby restaurants. 14-18 Baruch Hirsch St. etc.

If the call succeeds. 14-18 Baruch Hirsch St. the browser will call a service.Bnei Brak 51202 Israel 40 .• HTML5 introduces a new Geolocation specification – The user must agree to share his or her location • Chooses to share location one time only or over multiple sessions – After the user agreement. the browser will get the user’s coordinates and other location information • The specification doesn’t define how to implement this service in the browser © Copyright SELA software & Education Labs Ltd.

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 41 .

Bnei Brak 51202 Israel 42 . have a high start-up performance cost.• Background workers that run scripts in parallel with their main page – Independent of any user interface scripts • Allow thread-like operations on the client side that include message-passing mechanisms for coordination • Expected to be long-lived. and a high per-instance memory cost • Shouldn’t be used for every task! © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 43 .

14-18 Baruch Hirsch St.bidirectional communications channels. and exposes sandboxed sections of a user’s local file system to web applications – Web Sockets .• HTML5 includes a lot of other APIs that you can consider.Bnei Brak 51202 Israel 44 . over a single TCP socket • And many more © Copyright SELA software & Education Labs Ltd. For example: – Web Notifications – display simple notifications to the user – File API – navigates a file system.

css" rel="stylesheet" media="screen and (min-width:1301px)" type="text/css" /> <link href="Presentation.css" rel="stylesheet" media="screen and (max-width:1199px)" type=“ text/css" /> <link href="DoNotDisplay.<link href="DoNotDisplay.css" rel="stylesheet" media="screen and (min-width:1200px) and (maxwidth: 1300px)" type="text/css" /> .

• CSS3 Color – Alpha color with rgba() and hsla() color functions – Transparency control with the opacity property • CSS3 Backgrounds and Borders – Round corners with the border-radius property – Multiple background images per element – box-shadow property on block elements .

.

• CSS3 include much more: – – – – – CSS3 Animations CSS3 Transformations CSS3 Fonts CSS3 Border and Background CSS3 layouts: • Flexbox • Templating • Multi-Columns – More © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 48 .

Bnei Brak 51202 Israel 49 .© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.

14-18 Baruch Hirsch St.© Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel Source: http://fmbip.com/litmus/ .

com/litmus/ © Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel . 14-18 Baruch Hirsch St.Source: http://fmbip.

• HTML5 is HTML – you’re already most of the way there • Most visitors’ browsers can handle most things • Many strategies can be used to implement: – – – – Lowest common denominator Vertical slices – target a specific HTML5 functionality JavaScript ‘Polyfills’ can be used to patch the holes Using fallbacks strategies © Copyright SELA software & Education Labs Ltd.Bnei Brak 51202 Israel 52 . 14-18 Baruch Hirsch St.

Bnei Brak 51202 Israel 53 . 14-18 Baruch Hirsch St.© Copyright SELA software & Education Labs Ltd.

Bnei Brak 51202 Israel 54 . 14-18 Baruch Hirsch St.• Develop once! – Multiple devices reach – Multiple platforms reach © Copyright SELA software & Education Labs Ltd.

Sign up to vote on this title
UsefulNot useful