DevFest Makerere html5 presentation by caesar mukama

382 views

Published on

This presentation explains the relevance of using HTML5 which is one of the Google technologies. It's a basic tutorial designed to encourage students to use HTML5 when developing applications.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
382
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
6
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

DevFest Makerere html5 presentation by caesar mukama

  1. 1. HTML5 DevFest 2013
  2. 2. Caesar Mukama Work as Front End Designer for MyZiki Ltd. Contact me at mcaesar88@gmail.com
  3. 3. On the menu ● Why HTML5 is important. ● Structure ● Form Input Types and Tags ● 3 New Tags ● Features ● Error Handling ● Summary
  4. 4. What is HTML5?
  5. 5. HTML5 = XHTML + NEW MARKUP + JS APIS
  6. 6. Why is HTML5 important?
  7. 7. New Industry Standard Starting 2014
  8. 8. Reduced Development Time
  9. 9. Preloaded with some CSS3 Bling
  10. 10. Lots of new Features
  11. 11. Mobile Friendly
  12. 12. HTML5 XHTML
  13. 13. HTML5 Structure
  14. 14. XHTML <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset=" utf-8"/> </head> <body> ... </body> </html>
  15. 15. … minus XML declaration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset=" utf-8"/> </head> <body> ... </body> </html>
  16. 16. ... minus DOCTYPE attributes <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset=" utf-8"/> </head> <body> ... </body> </html>
  17. 17. … plus short meta content <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset=" utf-8"/> </head> <body> ... </body> </html>
  18. 18. … minus useless definitions <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css"/> </head> <body> ... </body> </html>
  19. 19. = HTML5 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Page Title</title> <link rel="stylesheet" href="style.css"/> </head> <body> ... </body> </html>
  20. 20. That’s why we need HTML5.
  21. 21. 28 Tags, 13 Form Input Types New Tags article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr New Input Types color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
  22. 22. Where did they come from?
  23. 23. Source: https://developers.google.com/webmasters/state-of-the-web/2005/classes Top 20 Class Names
  24. 24. <div class=”header”> <div class=”header”> <div class=”section”> <div class=”article”> <div class=”footer”> <div class=”footer”> <div class=”nav”> <div class=”aside”>
  25. 25. <header> <header> <section> <article> <footer> <footer> <nav> <aside>
  26. 26. 28 Tags, 13 Form Input Types New Tags article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr New Input Types color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
  27. 27. 28 Tags, 13 Form Input Types New Tags article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr New Input Types color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
  28. 28. <input id="event” placeholder="DevFest Makerere"> <input id=”firstName” required> <input id=”lastName” autofocus pattern=[a-zA-Z]>
  29. 29. <input id="event” placeholder="DevFest Makerere"> <input id=”firstName” required> <input id=”lastName” autofocus pattern=[a-zA-Z]> <input type="color" name="favcolor"> <input type="date" name="birthday"> <input type="datetime" name="bdaytime"> <input type="number" name="quantity" min="1" max="5"> <input type="range" name="points" min="1" max="10">
  30. 30. <input id="event” placeholder="DevFest Makerere"> <input id=”firstName” required> <input id=”lastName” autofocus pattern=[a-zA-Z]> <input type="color" name="favcolor"> <input type="date" name="birthday"> <input type="datetime" name="bdaytime"> <input type="number" name="quantity" min="1" max="5"> <input type="range" name="points" min="1" max="10"> … much more.
  31. 31. 28 Tags, 13 Form Input Types New Tags article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr New Input Types color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
  32. 32. 28 Tags, 13 Form Input Types New Tags article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr New Input Types color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
  33. 33. Why do we need a video and an audio element?
  34. 34. Thousands of audio and video services
  35. 35. was meant for foreign objects <object> … </object>
  36. 36. was meant for foreign objects <object> … </object> but video and audio are NOT foreign
  37. 37. plugins are foreign objects
  38. 38. <video width="320" height="240" controls src="movie.mp4" type="video/mp4" /> Syntax ?
  39. 39. <video width="320" height="240" controls src="movie.mp4" type="video/mp4" /> Syntax ?
  40. 40. <video width="320" height="240" controls src="movie.mp4" type="video/mp4" /> Syntax ?
  41. 41. Correct Syntax <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video>
  42. 42. Confused?
  43. 43. Confused?
  44. 44. All browser should have at least 2 new Codes by default: HTML5 Specifications said...
  45. 45. All browser should have at least 2 new Codes by default: ● Ogg Vorbis for audio ● Ogg Theora for video HTML5 Specifications said...
  46. 46. Google was onboard, Everyone followed
  47. 47. Google was onboard, Everyone followed BUT Apple and Nokia Said No.
  48. 48. MPEG LA
  49. 49. .mp3, .mp4, .m4a, .mpg ... MPEG LA
  50. 50. ● MPEG better quality ● Already most widely used ● Xiph.com’s BDS license not open source. Their Suggested alternative ● H.264/MPEG most relevant video encoding ● MP3, AAC best audio compression and quality. Their argument
  51. 51. Audio & video specification is incomplete
  52. 52. What to do ...for now? ● Convert videos to multiple formats ● Use multiple sources ● Then control with js
  53. 53. FOR NOW! <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video>
  54. 54. Canvas
  55. 55. Just like MS Paint...
  56. 56. … in your browser.
  57. 57. Paint with javascript instead of a brush
  58. 58. Paint with javascript instead of a brush <!DOCTYPE html> <html> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); ctx.fill(); </script> <body> <canvas id="myCanvas" width="200" height="100"></canvas> </body> </html>
  59. 59. Paint with javascript instead of a brush <!DOCTYPE html> <html> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); ctx.fill(); </script> <body> <canvas id="myCanvas" width="200" height="100"></canvas> </body> </html>
  60. 60. What can I do with Canvas? Besides .
  61. 61. Other 2D Drawings
  62. 62. Rende 3D (via Web GL)
  63. 63. Error Handling ( in brief )
  64. 64. “Tag Soup”
  65. 65. ● 90% of pages on the web are malformed. ● In XHTML, such pages break “Tag Soup”
  66. 66. ● 90% of pages on the web are malformed. ● In XHTML, such pages break ● Tag Soup means HTML5 runs malformed pages on purpose then corrects them. “Tag Soup”
  67. 67. Modernizr.js
  68. 68. Modernizr.js ● a JavaScript library ● detects HTML5 and CSS3 features ● in the user’s browser.
  69. 69. Modernizr.js Plain Javascript function getSupportedTransform() { var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '); for(var i = 0; i < prefixes.length; i++) { if(document.createElement('div'). style[prefixes[i]] !== undefined) { return prefixes[i]; } } return false; } if ( getSupportedTransform() ) { // Browser supports CSS3 Transforms }
  70. 70. Modernizr.js Plain Javascript function getSupportedTransform() { var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '); for(var i = 0; i < prefixes.length; i++) { if(document.createElement('div'). style[prefixes[i]] !== undefined) { return prefixes[i]; } } return false; } if ( getSupportedTransform() ) { // Browser supports CSS3 Transforms } With Modernizer if ( Modernizer. csstransforms ) { // Browser supports CSS3 Transforms }
  71. 71. HTML5 is w i d e r
  72. 72. Play Time
  73. 73. Demo slides.html5rocks.com
  74. 74. slides.html5rocks.com diveintohtml5.com html5boilerplate.com w3.org Bookmarks
  75. 75. Caesar Mukama Contact me at mcaesar88@gmail.com Questions?

×