By: Yousef Hatem
HTML is the basic building block for any web page
It is a standard maintained by W3C
The last version of the standard is H...
The new standard!
It is the result of collaboration between W3C and
WHATWG
WHATWG = Web Hypertext Application Technology W...
Yes!
It is supported by most browser vendors
In fact, most of the specification has been actually
implemented!
Compatibility
through standardizing the solutions of modern web sites requirements
Openness and Innovation
By replacing 3r...
Compatibility
through standardizing the solutions of modern web sites requirements
Openness and Innovation
By replacing 3r...
Simpler Scripting, New Elements, New Attributes
And some elements are deprecated as well
New JavaScript Libraries
Standard...
No need for type attributes
<script src=“foo.js”>
Instead of
<script src=“foo.js” type=“text/javascript”>
Simple Character Enconding
<meta charset=“utf-8”>
Instead of
<meta http-equiv="Content-Type" content="text/html; charset=u...
More Semantic Elements
no more <div> nor <span>!
HTML 4.01 Script
HTML 5 Script
More Semantic Elements
no more <div> nor <span>!
HTML 5 Script
More Semantic Elements
no more <div> nor <span>!
Source http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques
One of the most important new elements
Cancels out the dependency on 3rd-party plug-ins
Plays natively from the browser
Br...
Very simple to use
<video height=“200” width=“300” poster=“homer.png” controls>
<source type=“video/mp4” src=“simpsons.mp4...
Very simple to use as well
<audio autoplay loop controls>
<source type=“audio/ogg” src=“simpsons.mp4”></source>
<source ty...
Some new attributes has been added
To extend the element’s functionality, for example, adding the draggable attribute
for ...
Old forms do not suffice anymore!
Old forms offers only with few types, text, radio, checkbox, password,…
Modern developme...
Types included
Email URL Search
Date Color Range
Multi-file upload Regular Expressions Number
yet even more! …
These new w...
Example
<form>
<input type=“email” name=“iEmail” required=“true”>
<input type=“text” pattern=“[A-Z][0-9]” name=“iReg”>
<in...
These APIs provide a standardization for common
tasks performed in modern web development
Standardizes the common function...
Canvas
2D drawing using
JavaScript
Persistent Storage
Giant cookies to remember
user data, better user
experience
Geo-loca...
Provides 2D drawing into the browser using only
HTML, CSS, and JavaScript
No need for 3th-party plug-ins
“You can do most ...
Example
<canvas id=“myCanvas”>
</canvas>
<script>
var myCanvas = document.getElementById(“myCanvas”);
var context = myCanv...
Share your location with the web application giving
it your longitude and latitude
The API knows your location by searchin...
navigator.getCurrentPosition(position_handler);
function position_handler(position)
{
var latitude = position.coords.latit...
Cookies are problematic sometimes!
Small in size, bundled in every request, exposed in traffic
Session storage and local s...
in session storage, data remains until the tab is
closed
Set a new <key,value> pair: sessionStorage.setItem(‘key’, ‘value’...
in session storage, data remains until the tab is
closed
Set a new <key,value> pair: sessionStorage.setItem(‘key’, ‘value’...
getElementByClassName
returns an array of all elements that are sharing the same class name
Editable Elements
Just add the...
Yousef Hatem
Website: http://www.hyousef.com
Twitter: @hyousef
Html 5 – future of the web
Html 5 – future of the web
Html 5 – future of the web
Html 5 – future of the web
Html 5 – future of the web
Upcoming SlideShare
Loading in …5
×

Html 5 – future of the web

1,232 views

Published on

HTML5 is a new technology designed to cope with the new trends in web. This presentation offers a brief introduction to this technology.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,232
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Html 5 – future of the web

  1. 1. By: Yousef Hatem
  2. 2. HTML is the basic building block for any web page It is a standard maintained by W3C The last version of the standard is HTML 4.01 W3C = World Wide Web Consortium, its job is to keep the Web stable, up and running
  3. 3. The new standard! It is the result of collaboration between W3C and WHATWG WHATWG = Web Hypertext Application Technology Work Group It will take some time (actually a lot) to mature, stabilize, and spread
  4. 4. Yes! It is supported by most browser vendors In fact, most of the specification has been actually implemented!
  5. 5. Compatibility through standardizing the solutions of modern web sites requirements Openness and Innovation By replacing 3rd-party plug-ins with free and open standards Simplicity More semantic tags, simple headers, separating content from presentation which make developers’ life easier
  6. 6. Compatibility through standardizing the solutions of modern web sites requirements Openness and Innovation By replacing 3rd-party plug-ins with free and open standards Simplicity More semantic tags, simple headers, separating content from presentation which make developers’ life easier
  7. 7. Simpler Scripting, New Elements, New Attributes And some elements are deprecated as well New JavaScript Libraries Standardizes the common functionality needed in Web 2.0
  8. 8. No need for type attributes <script src=“foo.js”> Instead of <script src=“foo.js” type=“text/javascript”>
  9. 9. Simple Character Enconding <meta charset=“utf-8”> Instead of <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  10. 10. More Semantic Elements no more <div> nor <span>! HTML 4.01 Script
  11. 11. HTML 5 Script More Semantic Elements no more <div> nor <span>!
  12. 12. HTML 5 Script More Semantic Elements no more <div> nor <span>!
  13. 13. Source http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques
  14. 14. One of the most important new elements Cancels out the dependency on 3rd-party plug-ins Plays natively from the browser Browser vendors are increasingly supporting it Ogg is supported in Firefox, Chrome, and Opera MP4 is supported in Safari, Chrome, and Opera During Google IO 2010, Google open-sourced VP8 in WebM project
  15. 15. Very simple to use <video height=“200” width=“300” poster=“homer.png” controls> <source type=“video/mp4” src=“simpsons.mp4”></source> <source type=“video/ogg” src=“simpsons.ogv”></source> </video>
  16. 16. Very simple to use as well <audio autoplay loop controls> <source type=“audio/ogg” src=“simpsons.mp4”></source> <source type=“audio/mp3” src=“simpsons.ogv”></source> </audio>
  17. 17. Some new attributes has been added To extend the element’s functionality, for example, adding the draggable attribute for elements to add the dragging ability
  18. 18. Old forms do not suffice anymore! Old forms offers only with few types, text, radio, checkbox, password,… Modern development needs more types, such as Email, Date, Regular Expression… There is a lot of nonstandard workarounds (for example, using JavaScript for client-side checks to make sure the user wrote numbers only) HTML5 is loaded with a plethora of new types Not all browsers currently support these types Overtime, the support will increase, specially when it becomes part of the standard
  19. 19. Types included Email URL Search Date Color Range Multi-file upload Regular Expressions Number yet even more! … These new web forms are backup-compatible When being opened in an old browser, the gracefully fallback to text inputs
  20. 20. Example <form> <input type=“email” name=“iEmail” required=“true”> <input type=“text” pattern=“[A-Z][0-9]” name=“iReg”> <input type=“number” name=“iNum” autofocus=“true”> <input type=“url” name=“iURL” placeholder=“Type URL!" > <button>Submit!</button> </form>
  21. 21. These APIs provide a standardization for common tasks performed in modern web development Standardizes the common functionality needed in Web 2.0
  22. 22. Canvas 2D drawing using JavaScript Persistent Storage Giant cookies to remember user data, better user experience Geo-location Share you location with other visitors, geography-based content Web Sockets Allowing browsers to communicatewith others using Sockets instead of HTTP Web Workers Making web applications multithreaded which boosts its performance Server-Sent Events Standardized streaming from server to client Drag and Drop Standardize the drag and drop functionality, better user experience Video and Audio Provide native browser support for playing video and audio Offline Web Applications Website is responsive even when it is offline
  23. 23. Provides 2D drawing into the browser using only HTML, CSS, and JavaScript No need for 3th-party plug-ins “You can do most things with web standards today,… In some ways, you may say you don't need Flash.” Jon von Tetzchner, Opera CEO Supported by W3C, implemented in most browsers, and will be extended to 3D canvas using Web GL IE stills lacking support for canvas, however, there are some hacks to workaround this
  24. 24. Example <canvas id=“myCanvas”> </canvas> <script> var myCanvas = document.getElementById(“myCanvas”); var context = myCanvas.getContext(“2d”); context.fillStyle = ‘rgb(255, 0, 0)’; context.fillRect(0, 0, 50, 50); </script>
  25. 25. Share your location with the web application giving it your longitude and latitude The API knows your location by searching you IP, nearby Wi-Fi hotspots, proxy servers, cell-phone tower, and dedicated GPS devices http://www.mozilla.com/en-US/firefox/geolocation/ http://diveintohtml5.org/geolocation.html
  26. 26. navigator.getCurrentPosition(position_handler); function position_handler(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; //Do your magic with the coordinates! } Example
  27. 27. Cookies are problematic sometimes! Small in size, bundled in every request, exposed in traffic Session storage and local storage are two new data- storage attributes Not sent to the remote web servers, larger sizes, different life-time methods
  28. 28. in session storage, data remains until the tab is closed Set a new <key,value> pair: sessionStorage.setItem(‘key’, ‘value’); Get the value: sessionStorage.key in local storage, data remains even if the system is rebooted! Set a new <key,value> pair: localStorage.setItem(‘key’, ‘value’); Get the value: localStorage.key
  29. 29. in session storage, data remains until the tab is closed Set a new <key,value> pair: sessionStorage.setItem(‘key’, ‘value’); Get the value: sessionStorage.key in local storage, data remains even if the system is rebooted! Set a new <key,value> pair: localStorage.setItem(‘key’, ‘value’); Get the value: localStorage.key
  30. 30. getElementByClassName returns an array of all elements that are sharing the same class name Editable Elements Just add the contenteditable=“true” to make an element editable!
  31. 31. Yousef Hatem Website: http://www.hyousef.com Twitter: @hyousef

×