Html5 presentation slides
description
Transcript of Html5 presentation slides
![Page 1: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/1.jpg)
HTML5
Younes Baghor
Younes Baghor
+Younes Baghor - @webwizart
![Page 2: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/2.jpg)
Introduction
![Page 3: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/3.jpg)
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?
![Page 4: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/4.jpg)
What is HTML5
![Page 5: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/5.jpg)
5
What is HTML5A Little History,
WHATWG
![Page 6: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/6.jpg)
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 ….
![Page 7: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/7.jpg)
What is HTML5HTML5 Rocks
The great guy’s of the Chrome team made this Demo/Presentation Check it out.
Click me for preview
![Page 8: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/8.jpg)
Detection & Fallback
![Page 9: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/9.jpg)
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 :(}
![Page 10: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/10.jpg)
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
![Page 11: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/11.jpg)
Change of Movement
![Page 12: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/12.jpg)
12
Change of MovementThe Web
Image – Brad Frost presentation future friendly
![Page 13: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/13.jpg)
Tools
![Page 15: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/15.jpg)
15
Tools Node.js
Just one language
Non-blocking
![Page 16: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/16.jpg)
Patterns & Principles
![Page 17: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/17.jpg)
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
![Page 18: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/18.jpg)
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
![Page 19: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/19.jpg)
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
![Page 20: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/20.jpg)
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
![Page 21: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/21.jpg)
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)
![Page 22: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/22.jpg)
22
Patterns & Principles JavaScript
The Good Parts
Unobtrusive Javascript
Callback’s and Non-blocking
Closure.
![Page 24: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/24.jpg)
Why Use HTML5 Now
![Page 25: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/25.jpg)
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.
![Page 26: Html5 presentation slides](https://reader035.fdocuments.in/reader035/viewer/2022062514/558b0995d8b42ae4758b4580/html5/thumbnails/26.jpg)
26
Thank you
+Younes Baghor
@webwizart