Embed Size (px)
Citation preview
HTML5 H Y P E R T E X T M A R K U P L A N G U A G E V E R S I O N 5
A N A S A B U D A Y A H
www.abudayah.com
Rough Timeline of Web Technologies
1991 HTML1994 HTML 21996 CSS + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless Web Design2005 AJAX2009 HTML 5* + CSS 3*
• Its open source
• Standard technology (WHATWG + W3C)
• Successor of HTML v4.01 & XHTML v1.0
HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
What is HTML5?
• More markup to replace scripting.
• HTML5 should be device independent.
• The development process should be visible to the public.
Rules:
Some of the most interesting new features in HTML5:
• The canvas element for drawing.• The video and audio elements for media playback.• Better support for local offline storage.• New content specific elements, like article, footer, header, nav, section.• New form controls, like calendar, date, time, email, url, search..
New Features:
New Markup Elements<header>, <nav>, <aside>, <footer>…
New Media Elements<Audio>, <video>, <source>, <embed>.
The Canvas Element<canvas>
New Form Elements<datalist>, <keygen>…
New Input Type Attribute ValuesTel, search, url, email, datetime, color, number…
HTML5 Standard Attributes:item{empty/url}, subject{id}, draggable{true/false/auto}..
New Elements in HTML5:
Window Event:Onafterprint, onerror, ononline, onoffline…
Form Events*onreset event was deletedOninput, oninvalid, onforminput…
Keybord EventsNo new events..
Mouse EventsOndragstart, ondrag, ondrop..
Media EventsOnplay, onpause, onprogress..
More: http://www.w3schools.com/html5/html5_reference.asp
New Event Attributes:
<div id=“header”>
<div id=“nav”>
<div id=“article”>
<div id=“footer”>
<div id=“aside”><div id=“section”>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><div id=“header”> <h1>header</h1></div><div id=“header”> <a href=“home.html”>Home</a> <a href=“about.html”>About</a></div><div id=“article”> <h1>Article title..</h1> <p>Text…..</p></div><div id=“section”> <p>Section1</p></div><div id=“aside”> <p>About us…<p></div><div id=“footer”> <p>All rights received</p></div></body></html>
HTML4 Page layout:
<header> Defines a header for a section or page
<nav> Defines navigation links
<aside> Defines content aside from the page content
<article> Defines an article
<section> Defines a section
<footer> Defines a footer for a section or page
<header>
<nav>
<article>
<footer>
<aside><section>
<!DOCTYPE HTML><html><body><header> <h1>Title</h1></header><nav> <a href=“home.html”>Home</a> <a href=“about.html”>About</a></nav><article> <h1>Article title..</h1> <p>Text…..</p></article><section> <p>Section1</p></section><aside> <p>About us…<p></aside><footer> <p>All rights received</p></footer></body></html>
HTML5 Page layout:
HTML5 FLASH / Silverlight
Property + Open source - Proprietary (Adobe).
Prevalence - not yet implemented everywhere. + Flash present on almost every computers.
Multimedia + no need for embed code- Dose not use a specific format.
- need for embed code+ use default format (FLV,MP3).
Browsers
+ not need for external plugins.- no browser fully support for HTML5.
- need for external plugins.- Crashes browser.- Not support for navigation keys like Back button.
Capacity/load
+ faster - Slower- Take much requirements on CPU.
SEO + friendly with search engines. - Not friendly with search engines.
Chart on Flash and html5 canvas:http://www.zingchart.com/flash-and-html5-canvas/
HTML5 vs. Flash/Silverlight:
1. Basic page.Basic web page using header & nav & aside elements.http://abudayah.com/files/html5/basicpage/
2. MultimediaAudio & Videohttp://abudayah.com/files/html5/multimedia/
3. Drag and DropDrag and drop demo in a HTML document, using the
HTML5 drag and drop API.http://abudayah.com/files/html5/dragdrop/
4. Canvas:Drawing Graphics with Canvashttp://abudayah.com/files/html5/canvas/
HTML5 Examples:
Slides:http://slides.html5rocks.com
Get Location:http://html5demos.com/geo
Upload Files:http://email.jeeran.com
Image gallery:http://www.apple.com/html5/showcase/gallery More: http://www.apple.com/html5
interactive comic: http://www.nevermindthebullets.com/
CAPMANhttp://www.kesiev.com/akihabara/demo/game-capman.html
Google smash:http://mrdoob.com/92/Google_Gravity_HTML5
Canvas Video:http://craftymind.com/factory/html5video/CanvasVideo.html
HTML5 Examples:
NO!.. Because:1. is not completed.2. Not fully browser support.3. DRM issues.
How can we move forward ?• It is a good time for learning.• Build web pages HTML4/XHTML + html5 + JS• Building browser-specific apps.• Focusing on the mobile.
Is it possible to build sites on HTML5 now?
Thank you :)
Anas AbuDayahFront-end Web Developer
Twitter: @abudayah
www.abudayah.com
Last update: 11 Aug 2011
![[HTML5 CONVERSION] What Flash Did For Websites Before HTML5 Got The Hype](https://img.dokumen.tips/doc/110x75/5577d0e1d8b42ae0418b4e2f/html5-conversion-what-flash-did-for-websites-before-html5-got-the-hype.jpg)
