Web & Mobile DeveloperTowers Watson Inc.
2
 What is HTML5 Features Adoption Is HTML5 ready Now? Changes from previous HTMLs     What’s added     What’s deprec...
HTML5 is is a language for structuring and presentingcontent for the World Wide Web, a core technology ofthe Internet. It ...
The biggest names in the Industry Disney Research In Motion Google Apple Microsoft5
Yes and No.HTML5 is now ready for use by developersprovided they use fallbacks since thespecification for HTML5 is not yet...
   Markup     Forms     Multimedia     Graphics   New APIs       Graphics       Media Playback       GeoLocation  ...
Like any other evolving technologies. HTML5 alsodeprecates some outdated tags such as:basefontbigcenter      Attributes...
<header> - Defines a header region of a page orsection.<footer> - Defines a footer region of a page orsection.<nav> - Defi...
New Input Tags<input type=“range”><input type=“number”><input type=“date”><input type=“email”><input type=“url”><input typ...
<input type="range" min="0" max="10"name="priority" value="0" id="priority" >11
<input type="number" name="estimated_hours"min="0" max="1000“ id="estimated_hours" >12
 <input type="date" name="start_date"  id="start_date" value="2010-12-01" >13
<input type="email" name="email" id="email">14
<input type="url" name="url" id="url">15
<input type="color" name="project_color"id="project_color">16
<input type=“search” name=“textsearch”id=“searchfield” >17
<input type="range" min="0" max="10"name="priority" value="0" id="priority" >18
Multimedia has become an integral part ofour internet usage thus, HTML5 addedsupport for both Video and Audio <Video> <A...
Support for MP3, AAC, OGG<audio id="drums" controls>   <source src="sounds/ogg/drums.ogg"type="audio/ogg">   <source src="...
Support for MP4, OGV, WebM format<video controls>   <source src="video/h264/01_blur.mp4">   <source src="video/theora/01_b...
Supports creation of vector based graphicsthrough the use of javascript<canvas id="myCanvas">your browser does not support...
23
 New DOM Selectors Audio and Video Using the Canvas Knowing your Location Web Sockets
 No minimum system requirements Easier to code Faster execution/response Extends the ability The completeness of HTML5
 getElementById() getElementsByTagName() getElementsByClassName() querySelector() querySelectorAll()
Wait, there’s no light andthere’s no flash! How’s ourparty?
   Media Functions     Play()     Pause()     Load()
   Media Properties     Volume     Duration     Muted     Paused     Loop
   Events     Play     Pause     Abort     Ended     Progress
   Drawing in the canvas     Preparing your workspace     Creating a simple path      ○ beginPath();      ○ lineTo();  ...
   Drawing simples shapes     Circle      ○ Arc();     Square      ○ fillRect();
   Web workers     separate JS processes() running in separate        threads,       executes concurrently,       does...
Workers1.jsMainProc.js   Workers2.js              Workers3.js
   Put it to work     new Worker();     onmessage();     postmessage();
   Using Geolocation     Remember: Always ask for permission!     I have no GPS!      ○ IPAddress      ○ WiFi      ○ Ce...
   Hey! Mr. Navigator…     coords.latitude     coords.longitude     getCurrentPosition()
   Communicate in a whole new way     TCP over the Web     2-way communication for the Internet      ○ Use a client bro...
   Tuning in     URL     websocket()     open(), onopen     close(), onclose     onmessage()     postmessage()
   Consider older browsers     Detect Browser     Detect Feature availability
Basic html5 and javascript
Basic html5 and javascript
Upcoming SlideShare
Loading in …5
×

Basic html5 and javascript

546 views
498 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
546
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Basic html5 and javascript

  1. 1. Web & Mobile DeveloperTowers Watson Inc.
  2. 2. 2
  3. 3.  What is HTML5 Features Adoption Is HTML5 ready Now? Changes from previous HTMLs  What’s added  What’s deprecated Exercise3
  4. 4. HTML5 is is a language for structuring and presentingcontent for the World Wide Web, a core technology ofthe Internet. It is the fifth revision of the HTML standard(originally created in 1990 and most recentlystandardized as HTML4 in 1997[1]) and as of August2011[update] is still under development. Its core aimshave been to improve the language with support for thelatest multimedia while keeping it easily readable byhumans and consistently understood by computers anddevices (web browsers, parsers etc.). HTML5 isintended to subsume not only HTML4, but XHTML1 andDOM2HTML (particularly JavaScript) as well.4
  5. 5. The biggest names in the Industry Disney Research In Motion Google Apple Microsoft5
  6. 6. Yes and No.HTML5 is now ready for use by developersprovided they use fallbacks since thespecification for HTML5 is not yet finalized.According to the W3C, HTML5 is still inDraft. So expect changes to happenanytime. The expected completion is 2022or later. Although many parts of thespecifications are already stable and maybe implemented.6
  7. 7.  Markup  Forms  Multimedia  Graphics New APIs  Graphics  Media Playback  GeoLocation  Web Sockets  Web Workers Error Handling7
  8. 8. Like any other evolving technologies. HTML5 alsodeprecates some outdated tags such as:basefontbigcenter Attributes:font • aligns • link, vlink, alink, and text attributes on the body tagstrike • bgcolortt • height and widthU • scrolling on the iframe elementframe • valignframeset • hspace and vspace • cellpadding, cellspacing, and border on tablenoframes8
  9. 9. <header> - Defines a header region of a page orsection.<footer> - Defines a footer region of a page orsection.<nav> - Defines a navigation region of a page orsection.<section> - Defines a logical region of a page ora grouping of content.<article> - Defines an article or complete piece ofcontent.<aside> - Defines secondary or related content.9
  10. 10. New Input Tags<input type=“range”><input type=“number”><input type=“date”><input type=“email”><input type=“url”><input type=“color”><input type=“Search”>10
  11. 11. <input type="range" min="0" max="10"name="priority" value="0" id="priority" >11
  12. 12. <input type="number" name="estimated_hours"min="0" max="1000“ id="estimated_hours" >12
  13. 13.  <input type="date" name="start_date" id="start_date" value="2010-12-01" >13
  14. 14. <input type="email" name="email" id="email">14
  15. 15. <input type="url" name="url" id="url">15
  16. 16. <input type="color" name="project_color"id="project_color">16
  17. 17. <input type=“search” name=“textsearch”id=“searchfield” >17
  18. 18. <input type="range" min="0" max="10"name="priority" value="0" id="priority" >18
  19. 19. Multimedia has become an integral part ofour internet usage thus, HTML5 addedsupport for both Video and Audio <Video> <Audio>19
  20. 20. Support for MP3, AAC, OGG<audio id="drums" controls> <source src="sounds/ogg/drums.ogg"type="audio/ogg"> <source src="sounds/mp3/drums.mp3"type="audio/mpeg"> <a href="sounds/mp3/drums.mp3">Downloaddrums.mp3</a></audio>20
  21. 21. Support for MP4, OGV, WebM format<video controls> <source src="video/h264/01_blur.mp4"> <source src="video/theora/01_blur.ogv"> <source src="video/webm/01_blur.webm"> <p>Your browser does not support the videotag.</p></video>21
  22. 22. Supports creation of vector based graphicsthrough the use of javascript<canvas id="myCanvas">your browser does not support the canvas tag </canvas><script type="text/javascript">var canvas=document.getElementById(myCanvas);var ctx=canvas.getContext(2d);ctx.fillStyle=#FF0000;ctx.fillRect(0,0,80,100);</script>22
  23. 23. 23
  24. 24.  New DOM Selectors Audio and Video Using the Canvas Knowing your Location Web Sockets
  25. 25.  No minimum system requirements Easier to code Faster execution/response Extends the ability The completeness of HTML5
  26. 26.  getElementById() getElementsByTagName() getElementsByClassName() querySelector() querySelectorAll()
  27. 27. Wait, there’s no light andthere’s no flash! How’s ourparty?
  28. 28.  Media Functions  Play()  Pause()  Load()
  29. 29.  Media Properties  Volume  Duration  Muted  Paused  Loop
  30. 30.  Events  Play  Pause  Abort  Ended  Progress
  31. 31.  Drawing in the canvas  Preparing your workspace  Creating a simple path ○ beginPath(); ○ lineTo(); ○ moveTo(); ○ Stroke();
  32. 32.  Drawing simples shapes  Circle ○ Arc();  Square ○ fillRect();
  33. 33.  Web workers  separate JS processes() running in separate threads,  executes concurrently,  doesn’t block the UI,  allow you to extract up to the last drop of juice from a multicore CPU,  can be dedicated (single tab) or shared among tabs/windows,
  34. 34. Workers1.jsMainProc.js Workers2.js Workers3.js
  35. 35.  Put it to work  new Worker();  onmessage();  postmessage();
  36. 36.  Using Geolocation  Remember: Always ask for permission!  I have no GPS! ○ IPAddress ○ WiFi ○ Cellphone
  37. 37.  Hey! Mr. Navigator…  coords.latitude  coords.longitude  getCurrentPosition()
  38. 38.  Communicate in a whole new way  TCP over the Web  2-way communication for the Internet ○ Use a client browser that implements the WebSocket protocol. ○ Write code in a webpage that creates a client websocket. ○ Write code on a web server that responds to a client request through a websocket
  39. 39.  Tuning in  URL  websocket()  open(), onopen  close(), onclose  onmessage()  postmessage()
  40. 40.  Consider older browsers  Detect Browser  Detect Feature availability

×