HTML 5 Presentation

What is HTML5?

What is HTML5? (cont.)

What is HTML5? (cont.)

When will HTML5 be official?

What does HTML5 do?

What has HTML5 replaced?

Factoids

Comparison

Evaluation

Comparison (cont.)

HTML5 Features

Semantic: Overview

• New semantic tags for contextual mark up of text

• Update of few old tags for improved accessibility and search ability

• Allows to describe more precisely what content is

Semantic: Page Layout

Semantic: New/Modified Elements

Semantic: Misc.

Simplified Doctype Minimal HTML5 Page

Simplified Character Set

Semantic: Misc.

Speech input

New form types

Meter and progress bar

Semantic: Form field types for mobile

CSS3• Greater flexibility over presentation and layout

• New CSS Selectors to allow for specific targeting for styles

• Delivers a wide range of stylization and effects, enhancing web pages without sacrificing their semantic structure or performance

• Latest version of the CSS standard, introducing exciting new effects like dynamic color gradients, 2D and 3D transforms, multi-column and flexible layouts, calculations, transitions, animations, and media queries to tailor different styles for different devices

• Not technically part of HTML5, CSS3 is a separate — though closely connected — set of standards, emerging and evolving in tandem with HTML5

CSS3: Features

Multimedia• Supports native multimedia embedded in pages

• New audio and video elements embed sound and moving pictures into web pages without any proprietary plug-ins

Graphics and 3D• Supports natively SVG, Canvas, WebGL, and CSS3 3D features

• Flat vector shapes can be now brought to 3-dimensional life

Device Access• Supports the increasing range of device capabilities

o Tilt, Device Orientationo Geolocationo Acceleration or motion

• Allows usage of various input and output devices

Performance• Greater speed optimization and better usage of computer hardware

• Make apps more seamless and make dynamic content load faster with a variety of techniques and technologies such as Web Workers, XMLHttpRequest Level 2 (the technology behind Ajax), and the History API.

Offline and Storage• Enable webpages to store data on the client-side locally and operate offline

• Only download resources that have changed

• Enables offline browsing

• Manage offline/online complexity, including: application caching, local or offline storage, and online/offline events status

• Uses HTML5 App Cache, Local Storage, Indexed Database, and the File API specifications..

• Kind of like "Super Cookies," but with much more space to store both one-time data and persistent app databases, like email

Offline and Storage: Features

Connectivity• Improves connectivity speeds and data exchanges between the server and the client

• More efficient connectivity means more real-time chats, faster games, and better communication.

• Enables full duplex, bi-directional communication

HTML5 Pros

HTML5 Cons

HTML5 Cons (cont.)

Useful Resources• Gaming: http://www.webapptesting.com/infographic-html5-and-mobile-

gaming/2012/11/html5-gaming-infographic/

• iGate: Mobile Apps: Native Vs Mobi-web Vs Hybrid solutions https://iken.igate.com/BAC/White%20Papers/Enterprise%20Mobility/Mobile%20Apps%20Native%20Vs%20Mobi-web%20Vs%20Hybrid%20solutions.pdf

• HTML5 Infographic: http://css.dzone.com/articles/fresh-look-html5-infographic

• History of HTML5: http://visually.visually.netdna-cdn.com/TheHistoryofHTML5_4ffc89a1614e6_w650.jpg

• Benefits and Risks: http://www.zfort.com/blog/html5-simple-facts-in-depth-analysis-of-html5-benefits-and-risks/

• Issues: http://blog.caplin.com/2012/07/16/the-pain-of-html5/

• Cheat Sheet: http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/