This document discusses HTML5 and provides an introduction to its key features. It begins with a brief history of HTML5 and its development. It then explores aspects of HTML5 like detection and fallback methods using Modernizr and polyfills, tools for building HTML5 projects like Node.js, and design patterns like progressive enhancement. The document provides examples of HTML5 features and argues that HTML5 adoption allows for wider reach, reduced costs, and future-proofing websites given its growing support by major companies and browsers.

1. HTML5Younes Baghor+Younes Baghor - @webwizartYounes Baghor

2. Introduction

3. Web developer | Coder | Gamer | Web Traveler3 What is HTML5, Detection Fallback Change of Movement Tools Examples Why HTML5 Now?Younes Baghor+Younes Baghor @webwizart

4. What is HTML5

5. What is HTML5A Little History,5WHATWG

6. What is HTML5The Whole Picture,6We think now more mobileWe respond more socialOur design approach changedSeeking new boundaries NO-SQL, Cross-Domain-Request, Server-side JavaScript, Responsive design, Phone API ….

7. What is HTML5HTML5 RocksClick me for previewThe greatguy’s of the Chrome team made this Demo/Presentation Check it out.

8. Detection & Fallback

9. Detection & FallbackModernizrModernizr 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 :(}

10. Detection & FallbackPollyFill’s“The browser being a cracked wall, and you would use pollyfillapaste to smoothing the cracks”. – Remy SharpSo the web communities has build a large collection of Pollyfill’s you can find on Github - Modrnizr

11. Change of Movement

12. Change of MovementThe Web12Image – Brad Frost presentationfuture friendly

13. Tools

14. Toolslibraries and frameworks14Click me

15. Tools Node.js Just one language Non-blocking15

16. Patterns & Principles

17. Patterns & Principles Graceful Degradation: -> think browserBuild for the most advanced and fancy browsersOnly big errors get fixed for a few previous versions. Make sure that for the functionality you use, other minor browsers can use an alternative. 17Image – Brad Frost presentationfuture friendly

18. Patterns & Principles Progressive Enhancement: -> think contentStart from the contentMake a site work for everybody Detect browser functionality and upgrade.18Image – Brad Frost presentationfuture friendly

19. Patterns & Principles Progressive Enhancement: -> think contentHere 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.19Image – Dave Stewart

20. Patterns & Principles RESPONSIVE DESIGN20Responds under certain circumstances. ‘Detect browser functionality and upgrade.With Media Queries we can respond to screen size hide or move contentClick me for preview

21. IMPROVEMENTS21Don’t forget, the day’s that the desktop browser was superior to mobile are behind us (WAP)Mobile First forces you to design web products that are focused, fast and frequently used. – Luke Wroblewski

22. Patterns & Principles JavaScript22The Good PartsUnobtrusive JavascriptCallback’s and Non-blockingClosure.

23. Examples23Click me for preview

24. Why Use HTML5 Now

25. So Why Use HTML5 Now ?25 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 Microdataand Semantic tagsGeolocation 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. 26Thank you+Younes Baghor @webwizart