HTML5

Younes Baghor

Younes Baghor

+Younes Baghor   -    @webwizart

Introduction

3

Web developer | Coder | Gamer | Web Traveler

Younes Baghor

+Younes Baghor

@webwizart

What is HTML5, Detection Fallback Change of Movement Tools Examples Why HTML5 Now?

What is HTML5

5

What is HTML5A Little History,

WHATWG

6

What is HTML5The Whole Picture,

We think now more mobile

We respond more social

Our design approach changed

Seeking new boundaries NO-SQL,

Cross-Domain-Request,

Server-side JavaScript,

Responsive design,

Phone API ….

What is HTML5HTML5 Rocks

The great guy’s of the Chrome team made this Demo/Presentation Check it out.

Click me for preview

Detection & Fallback

Detection & FallbackModernizr

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

if (Modernizr.canvas) {  // let's draw some shapes!} else {  // no native canvas support available :(}

Detection & FallbackPollyFill’s

“The browser being a cracked wall, and you would use pollyfilla paste to   smoothing the cracks”. – Remy Sharp

So the web communities has build a large collection of Pollyfill’s you can find on Github - Modrnizr

Change of Movement

12

Change of MovementThe Web

Image – Brad Frost presentation future friendly

Tools

14

Toolslibraries and frameworks

Click me

15

Tools Node.js

Just one language

Non-blocking

Patterns & Principles

17

Patterns & Principles Graceful Degradation: -> think browser

Build for the most advanced and fancy browsers

Only big errors get fixed for a few previous versions.

Make sure that for the functionality you use, other minor browsers can use an alternative.

Image – Brad Frost presentation future friendly

18

Patterns & Principles Progressive Enhancement: -> think content

Start from the content

Make a site work for everybody

Detect browser functionality and upgrade.

Image – Brad Frost presentation future friendly

19

Patterns & Principles Progressive Enhancement: -> think content

Here the author Aaron Gustafson used a great M&M analogy for P.E. Where the peanut is the content and structure in HTML, the chocolate is the style with CSS and at last the finishing glaze being Javascript. As you can see this involves the Unobtrusive design approach.

Image – Dave Stewart

20

Patterns & Principles RESPONSIVE DESIGN

Responds under certain circumstances. ‘

Detect browser functionality and upgrade.

With Media Queries we can respond to screen size hide or move content

Click me for preview

21

IMPROVEMENTS

Mobile First forces you to design web products that are focused, fast and frequently used. – Luke Wroblewski

Don’t forget, the day’s that the desktop browser was superior to mobile are behind

us (WAP)

22

Patterns & Principles JavaScript

The Good Parts

Unobtrusive Javascript

Callback’s and Non-blocking

Closure.

23

Examples

Click me for preview

Why Use HTML5 Now

25

So Why Use HTML5 Now ?

HTML5 has undoubtedly the biggest potential market reach WORA – Write once. Run anywhere Reduce Cost No updating or different versions Growing support from large companies Facebook, Apple, Google, Microsoft, YouTube. Less Photoshop Better SEO Wai Aria Microdata and Semantic tags Geolocation Simplicity, Flexibility and Standardization Windows 8 has full HTML5 support into the Operating System.

Over the longer term, not switching will ultimately put you at a competitive disadvantage.

26

Thank you

+Younes Baghor

@webwizart