html 5 – future of the web
DESCRIPTION
HTML5 is a new technology designed to cope with the new trends in web. This presentation offers a brief introduction to this technology.TRANSCRIPT
By: Yousef Hatem
HTML is the basic building block for any web page
It is a standard maintained by W3CThe 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
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
Yes!
It is supported by most browser vendors
In fact, most of the specification has been actually implemented!
Compatibilitythrough standardizing the solutions of modern web sites requirements
Openness and InnovationBy replacing 3rd-party plug-ins with free and open standards
SimplicityMore semantic tags, simple headers, separating content from presentation which
make developers’ life easier
Compatibilitythrough standardizing the solutions of modern web sites requirements
Openness and InnovationBy replacing 3rd-party plug-ins with free and open standards
SimplicityMore semantic tags, simple headers, separating content from presentation which
make developers’ life easier
Simpler Scripting, New Elements, New AttributesAnd some elements are deprecated as well
New JavaScript LibrariesStandardizes the common functionality needed in Web 2.0
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=utf-8">
More Semantic Elementsno more <div> nor <span>!
HTML 4.01 Script
HTML 5 Script
More Semantic Elementsno more <div> nor <span>!
HTML 5 Script
More Semantic Elementsno more <div> nor <span>!
Source http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques
One of the most important new elementsCancels out the dependency on 3rd-party plug-ins
Plays natively from the browser
Browser vendors are increasingly supporting itOgg 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
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>
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>
Some new attributes has been addedTo extend the element’s functionality, for example, adding the draggable attribute
for elements to add the dragging ability
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 typesNot all browsers currently support these types
Overtime, the support will increase, specially when it becomes part of the standard
Types includedEmail URL Search
Date Color Range
Multi-file upload Regular Expressions Numberyet even more! …
These new web forms are backup-compatibleWhen being opened in an old browser, the gracefully fallback to text inputs
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>
These APIs provide a standardization for common tasks performed in modern web development
Standardizes the common functionality needed in Web 2.0
Canvas2D drawing using
JavaScript
Persistent StorageGiant cookies to remember
user data, better user experience
Geo-locationShare you location with other
visitors, geography-based content
Web SocketsAllowing browsers to
communicate with others using Sockets instead of
HTTP
Web WorkersMaking web applications
multithreaded which boostsits performance
Server-Sent EventsStandardized streaming from
server to client
Drag and DropStandardize the drag and drop functionality, better
user experience
Video and AudioProvide native browser
support for playing video and audio
Offline Web Applications
Website is responsive even when it is offline
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
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>
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
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
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
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
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
getElementByClassNamereturns an array of all elements that are sharing the same class name
Editable ElementsJust add the contenteditable=“true” to make an element editable!
Yousef Hatem
Website: http://www.hyousef.comTwitter: @hyousef