Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie Html5 presentation slides
Ähnlich wie Html5 presentation slides (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Html5 presentation slides
- 1. HTML5 Younes Baghor +Younes Baghor - @webwizart Younes Baghor
- 2. Introduction
- 3. Web developer | Coder | Gamer | Web Traveler 3 What is HTML5, Detection Fallback Change of Movement Tools Examples Why HTML5 Now? Younes Baghor +Younes Baghor @webwizart
- 5. What is HTML5A Little History, 5 WHATWG
- 6. What is HTML5The Whole Picture, 6 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 ….
- 7. What is HTML5HTML5 Rocks Click me for preview The greatguy’s of the Chrome team made this Demo/Presentation Check it out.
- 9. 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 :(}
- 10. Detection & FallbackPollyFill’s “The browser being a cracked wall, and you would use pollyfillapaste to smoothing the cracks”. – Remy Sharp So the web communities has build a large collection of Pollyfill’s you can find on Github - Modrnizr
- 12. Change of MovementThe Web 12 Image – Brad Frost presentationfuture friendly
- 13. Tools
- 14. Toolslibraries and frameworks 14 Click me
- 15. Tools Node.js Just one language Non-blocking 15
- 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. 17 Image – Brad Frost presentationfuture friendly
- 18. Patterns & Principles Progressive Enhancement: -> think content Start from the content Make a site work for everybody Detect browser functionality and upgrade. 18 Image – Brad Frost presentationfuture 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. 19 Image – Dave Stewart
- 20. Patterns & Principles RESPONSIVE DESIGN 20 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 21 Don’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 JavaScript 22 The Good Parts Unobtrusive Javascript Callback’s and Non-blocking Closure.
- 23. Examples 23 Click 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 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. 26 Thank you+Younes Baghor @webwizart