HTML5 ~= HTML + CSS + JS APIS

HTML5

Web Development to the next level

Rough Timeline of Web Technologies

JS APIs

- Client Side Storage (Web SQL Database, App Cache, Web Storage)

- Communication (Web Socket, Worker Workers)

- Desktop Experience (Notification, Drag and Drop API)

Client Side Storage

Web StorageNew methods for storing data on the client- localStorage – storages data with no limit- sessionStorage – stores data for one session

Client Side Storage

App CacheWeb application that work offline.

Communication

Web SocketBi-directional, full duplex communications

channels, over a singel Transmission Control Protocol (TCP) socket, designed to be implemented in web browsers and web servers.

Client Side Storage

Web SQL DatabaseBring SQL to the client side.

Communication

Worker WorkersPossibility to load a JS file dynamically and

then have it process code in a background process, not affecting the user interface and it’s response level.

Desktop Experience

NotificationPop up notification desktop app-style.

Desktop Experience

Drag and Drop APISimply drag and drop object.

Geolocation

Detect where you are now.

HTML

- Semantics (New tags, Link relation, Microdata)

- Accessibility (ARIA – Accessibility Rich Internet Applications)

- Web Form 2.0 (Input fields)- Multimedia (Audio Tag, Video Tag)- 2D and 3D Drawing (Canvas, Web GL, SVG)

Semantics

New tags

New tags

Semantics

Link relations- A way to explain why you’re pointing to

another page.- <a href=“somelink.html” rel=“nofollow”

>some text</a>

Link relations

Semantics

Microdata

Microdata

Accessibility

ARIA (Accessible Rich Internet Application)- Defines a way to make web content and web

applications more accessible to people with disabilities.

Web Form 2.0

New form field types- Slider- Color field- Search text field- Email field- Digit (number) field- Telephone field- etc

Multimedia

Video tag and Audio tag- Playing video or audio without plugin.

2D and 3D Drawing

Canvas- Allows for dynamic, scriptable rendering of

2D shapes and bitmap images.

2D and 3D Drawing

Canvas 3D (WebGL)- Allows for dynamic, scriptable rendering of

3D shapes and bitmap images.

2D and 3D Drawing

SVG (Scalable Vector Graphic)- Specification of an XML-based file format for

describing two-dimensional vector graphics, both static and dynamic.

CSS

- New selectors- Typography- Visuals

- Text wrapping- Columns- Text Stroke- Opacity

- HSL - Rounded Corners - Gradients - Shadow - Transitions, Transforms and Animations

New selector

Typography

New font support

Visuals

- Text wrapping- Columns- Text Stroke- Opacity - HSL- Rounded Corners- Gradients- Shadow

And the rest…

- Transitions- Transforms- Animations

Thank you

May the force be with you…