Take the HTML5 Tour! November  15, 2011 Vincci Kwong Franklin D. Schurz Library Indiana University South Bend Indiana Libr...
A Bit of History
Why Pay Attention to HTML5? <ul><li>New elements </li></ul><ul><li>Backward compatible </li></ul><ul><li>Reduces plug-ins ...
Current HTML5 Support <ul><li>http://html5test.com </li></ul><ul><li>http://findmebyip.com </li></ul><ul><li>http://canius...
The Outline Algorithm <ul><li>Think of it as a table of contents </li></ul><ul><li>Section and heading content is used to ...
Current Page Structure Main Navigation Main Content Right Column  Area Left Navigation CLAS Banner
Outline Page Structure <ul><li>College of Liberal Arts and Sciences </li></ul><ul><li>Main page navigation </li></ul><ul><...
Structuring Page Content <ul><li>Structural Tags: </li></ul><ul><li>nav </li></ul><ul><li>aside </li></ul><ul><li>footer <...
Structuring Interior Content <ul><li>Structural Tags: </li></ul><ul><li>nav </li></ul><ul><li>header </li></ul><ul><li>foo...
Put Them All Together <ul><li><body> </li></ul><ul><li><heading> </li></ul><ul><li><h1>College of Liberal Arts and Science...
Check with Document Outlines <ul><li>Google Chrome plug-in </li></ul><ul><li>HTML5 Outliner </li></ul><ul><ul><li>http://g...
Getting Started…… <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org...
Forms in HTML5 <ul><li>- New input types </li></ul><ul><li>- Data placeholder </li></ul><ul><li>- Date picker </li></ul><u...
Email and URL <ul><li>Email </li></ul><ul><li>Email: <INPUT  type=&quot;email&quot;  NAME=&quot;Email&quot; SIZE=&quot;20&...
Number <ul><li>HTML 4 </li></ul><ul><li>Number of User(s): <input name=&quot;nouser&quot; size=&quot;5&quot;> </li></ul>HT...
Data PlaceHolder <ul><li>HTML 4 </li></ul><ul><li><input type='text' name= ‘name' id=‘name‘ onBlur=&quot;if(this.value==''...
Date Picker <ul><li>HTML5 </li></ul><ul><li><font color='red ‘ size=&quot;+1&quot;><b>*</b></font>Date: </li></ul><ul><li>...
Required Fields <ul><li>HTML 4 </li></ul><ul><li><FORM METHOD=&quot;POST&quot; ACTION= “conferencerm.php&quot;name=&quot;c...
Figure HTML5 <figure> <img src=&quot;http://library.iusb.edu/erc/Brandon.jpg&quot; alt=&quot;Brandon&quot; width=&quot;250...
HTML5 Video <ul><li>eliminate 3rd party plug-in dependencies </li></ul><ul><li>eliminate complicated deployment </li></ul>...
Encoding Video <ul><li>Firefox plug-in ( http://firefogg.org ) </li></ul><ul><ul><li>- ogv and webm </li></ul></ul><ul><li...
Adding Video <ul><li><video  width=&quot;420&quot; height= &quot; 315&quot; controls preload=&quot;false&quot;> </li></ul>...
Canvas <ul><li><canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot; style=&quot;border:1px solid #...
Geolocations http://10k.aneventapart.com/Entry/Details/548
Address <ul><li><address> </li></ul><ul><li>Written by <a href=mary@mary.com>Mary Lee</a><br> </li></ul><ul><li>574-520-09...
Mark <ul><li><p>Do not forget to buy <mark>milk</mark> today.</p> </li></ul>
Details <ul><li><details open=&quot;open&quot;> </li></ul><ul><li><p>If your browser supports this element, it should allo...
Ruby <ul><li><p lang=&quot;zh-CN&quot;>... </li></ul><ul><li><ruby> </li></ul><ul><li>汉  < rt> hàn </rt> </li></ul><ul><li...
What tags are fading away? <ul><li>Presentational </li></ul><ul><ul><li>- basefont, big, center, font, s, strike, tt, u </...
Helpful Resources <ul><li>W3C HTML5 Tutorials </li></ul><ul><ul><li>http://www.w3schools.com/html5/default.asp </li></ul><...
5 Things to Remember about HTML5 <ul><li>Still being develop </li></ul><ul><li>Won’t break your old site </li></ul><ul><li...
Questions? <ul><li>Feel free to contact me at </li></ul><ul><ul><li>Email:  [email_address] </li></ul></ul><ul><ul><li>AIM...
Upcoming SlideShare
Loading in...5
×

Take the HTML5 Tour!

817

Published on

This presentation gives a quick overview of the basics of HTML5.

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

No Downloads
Views
Total Views
817
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Take the HTML5 Tour!

  1. 1. Take the HTML5 Tour! November 15, 2011 Vincci Kwong Franklin D. Schurz Library Indiana University South Bend Indiana Library Federation Annual Conference
  2. 2. A Bit of History
  3. 3. Why Pay Attention to HTML5? <ul><li>New elements </li></ul><ul><li>Backward compatible </li></ul><ul><li>Reduces plug-ins </li></ul><ul><li>Increase interactivity </li></ul><ul><li>Increasing popularity </li></ul>
  4. 4. Current HTML5 Support <ul><li>http://html5test.com </li></ul><ul><li>http://findmebyip.com </li></ul><ul><li>http://caniuse.com </li></ul>
  5. 5. The Outline Algorithm <ul><li>Think of it as a table of contents </li></ul><ul><li>Section and heading content is used to define the outline </li></ul><ul><li>Body is established as the outline root </li></ul><ul><li>Items are added to the outline as sectioning content is found </li></ul><ul><li>Initial heading content is used to name sections </li></ul><ul><li>Sectioning content contained within sections is nested in the outline </li></ul>
  6. 6. Current Page Structure Main Navigation Main Content Right Column Area Left Navigation CLAS Banner
  7. 7. Outline Page Structure <ul><li>College of Liberal Arts and Sciences </li></ul><ul><li>Main page navigation </li></ul><ul><li>Left navigation </li></ul><ul><li>Discover our world </li></ul><ul><ul><li>CLAS News </li></ul></ul><ul><ul><li>Build skills that prepare you for your career and life </li></ul></ul><ul><li>Right column area </li></ul><ul><ul><li>Student profiles </li></ul></ul><ul><ul><li>Faculty profiles </li></ul></ul><ul><ul><li>Donation </li></ul></ul>main navigation Discover Our World Right Column Area footer Left Nav. College of Liberal Arts and Sciences
  8. 8. Structuring Page Content <ul><li>Structural Tags: </li></ul><ul><li>nav </li></ul><ul><li>aside </li></ul><ul><li>footer </li></ul><ul><li>section </li></ul>main navigation <nav> Discover Our World <section> Right Column Area <aside> Footer <footer> Left Nav. <nav> College of Liberal Arts and Sciences <section>
  9. 9. Structuring Interior Content <ul><li>Structural Tags: </li></ul><ul><li>nav </li></ul><ul><li>header </li></ul><ul><li>footer </li></ul><ul><li>section </li></ul><ul><li>article </li></ul>main navigation <nav> Student Profiles <section> Footer <footer> Left Nav. <nav> Build Skills… <article> Donation <article> CLAS News <section> College of Liberal Arts and Sciences <header> Discover Our World <section> Faculty Profiles <section>
  10. 10. Put Them All Together <ul><li><body> </li></ul><ul><li><heading> </li></ul><ul><li><h1>College of Liberal Arts and Sciences</h1> </li></ul><ul><li></heading> </li></ul><ul><li><section> </li></ul><ul><li><h1>Discover our world</h1> </li></ul><ul><li><p>Links to departments</p> </li></ul><ul><li></section> </li></ul><ul><li><section> </li></ul><ul><li><h1>CLAS news</h1> </li></ul><ul><li><p>New stories</p> </li></ul><ul><li></section> </li></ul><ul><li><article> </li></ul><ul><li><h1>Build skills that prepare you for your career and life</h1> </li></ul><ul><li><p>Every undergraduate student......</p> </li></ul><ul><li></article> </li></ul><ul><li><aside> </li></ul><ul><li><h1>Right content area</h1> </li></ul><ul><li><section> </li></ul><ul><li><h1>Student Profiles</h1> </li></ul><ul><li></section> </li></ul><ul><li><section> </li></ul><ul><li><h1>Faculty Profiles</h1> </li></ul><ul><li></section> </li></ul><ul><li><article> </li></ul><ul><li><h1>Donation</h1> </li></ul><ul><li></article> </li></ul><ul><li></aside> </li></ul><ul><li></body> </li></ul>
  11. 11. Check with Document Outlines <ul><li>Google Chrome plug-in </li></ul><ul><li>HTML5 Outliner </li></ul><ul><ul><li>http://gsnedders.html5.org/outliner </li></ul></ul>
  12. 12. Getting Started…… <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><!DOCTYPE HTML> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;en-US&quot;> <html lang=&quot;en&quot;> <meta charset=&quot;UTF-8&quot;> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; />
  13. 13. Forms in HTML5 <ul><li>- New input types </li></ul><ul><li>- Data placeholder </li></ul><ul><li>- Date picker </li></ul><ul><li>- Required fields </li></ul>
  14. 14. Email and URL <ul><li>Email </li></ul><ul><li>Email: <INPUT type=&quot;email&quot; NAME=&quot;Email&quot; SIZE=&quot;20&quot; required> </li></ul>Web Address Organization/Club URL: <INPUT type=&quot;url&quot; NAME= &quot; URL&quot; SIZE=&quot;30&quot;>
  15. 15. Number <ul><li>HTML 4 </li></ul><ul><li>Number of User(s): <input name=&quot;nouser&quot; size=&quot;5&quot;> </li></ul>HTML5 Number of User(s): <input type=&quot;number&quot; name=&quot;nouser&quot; size=&quot;5&quot; min=&quot;1&quot; value=&quot;1&quot; max=&quot;10&quot;>
  16. 16. Data PlaceHolder <ul><li>HTML 4 </li></ul><ul><li><input type='text' name= ‘name' id=‘name‘ onBlur=&quot;if(this.value=='') this.value='Type in your first and last name';&quot; onClick=&quot;if(this.value=='Type in your first and last name') this.value='';&quot; value=&quot;Type in your first and last name&quot; /> </li></ul>HTML5 <INPUT type=&quot;text&quot; NAME=&quot;Name&quot; SIZE=&quot;30&quot; placeholder=&quot;Type in your first and last name&quot; >
  17. 17. Date Picker <ul><li>HTML5 </li></ul><ul><li><font color='red ‘ size=&quot;+1&quot;><b>*</b></font>Date: </li></ul><ul><li><input type=&quot;date&quot; name=&quot;date&quot;> </li></ul><font color='red' size=&quot;+1&quot;><b>*</b></font>Date: <SELECT NAME='Month'> <OPTION VALUE='mm'>mm</OPTION> <OPTION VALUE='1'>Jan</OPTION><OPTION VALUE='2'>Feb</OPTION><OPTION VALUE='3'>Mar</OPTION><OPTION VALUE='4'>Apr</OPTION><OPTION VALUE='5'>May</OPTION><OPTION VALUE='6'>Jun</OPTION><OPTION VALUE='7'>Jul</OPTION><OPTION VALUE='8'>Aug</OPTION><OPTION VALUE='9'>Sep</OPTION><OPTION VALUE='10'>Oct</OPTION><OPTION VALUE='11'>Nov</OPTION><OPTION VALUE='12'>Dec</OPTION> </SELECT>&nbsp; <SELECT NAME='Day'><OPTION VALUE='dd'>dd</OPTION><OPTION VALUE='1'>1</OPTION><OPTION VALUE='2'>2</OPTION><OPTION VALUE='3'>3</OPTION><OPTION VALUE='4'>4</OPTION><OPTION VALUE='5'>5</OPTION><OPTION VALUE='6'>6</OPTION><OPTION VALUE='7'>7</OPTION><OPTION VALUE='8'>8</OPTION><OPTION VALUE='9'>9</OPTION><OPTION VALUE='10'>10</OPTION> <OPTION VALUE='11'>11</OPTION><OPTION VALUE='12'>12</OPTION><OPTION VALUE='13'>13</OPTION><OPTION VALUE='14'>14</OPTION><OPTION VALUE='15'>15</OPTION><OPTION VALUE='16'>16</OPTION><OPTION VALUE='17'>17</OPTION><OPTION VALUE='18'>18</OPTION><OPTION VALUE='19'>19</OPTION><OPTION VALUE='20'>20</OPTION><OPTION VALUE='21'>21</OPTION><OPTION VALUE='22'>22</OPTION><OPTION VALUE='23'>23</OPTION><OPTION VALUE='24'>24</OPTION><OPTION VALUE='25'>25</OPTION><OPTION VALUE='26'>26</OPTION><OPTION VALUE='27'>27</OPTION><OPTION VALUE='28'>28</OPTION><OPTION VALUE='29'>29</OPTION><OPTION VALUE='30'>30</OPTION> <OPTION VALUE='31'>31</OPTION></SELECT>&nbsp; <SELECT NAME='Year'><OPTION VALUE='yyyy'>yyyy</OPTION><OPTION VALUE='2006'>2006</OPTION><OPTION VALUE='2007'>2007</OPTION> </SELECT> HTML 4
  18. 18. Required Fields <ul><li>HTML 4 </li></ul><ul><li><FORM METHOD=&quot;POST&quot; ACTION= “conferencerm.php&quot;name=&quot;conferenceroom&quot; onSubmit=&quot;return (checkform())&quot;> </li></ul><ul><li>function checkform(){ </li></ul><ul><li>if (document.conferenceroom.Name.value == &quot;&quot;){ </li></ul><ul><li>alert(&quot;Name is required.&quot;); </li></ul><ul><li>return false; </li></ul><ul><li>} </li></ul><ul><li>if (document.conferenceroom.Phone.value == &quot;&quot;){ </li></ul><ul><li>alert(&quot;Phone is required.&quot;); </li></ul><ul><li>return false; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>HTML5 Name: <INPUT type=&quot;text&quot; NAME=&quot;Name&quot; SIZE=&quot;30&quot; placeholder=&quot;Type in your first and last name&quot; required > Opera Chrome
  19. 19. Figure HTML5 <figure> <img src=&quot;http://library.iusb.edu/erc/Brandon.jpg&quot; alt=&quot;Brandon&quot; width=&quot;250&quot; height=&quot;228&quot;> <figcaption> Brandon Bauschke, Assistand Head of ERC </figcaption> </figure>
  20. 20. HTML5 Video <ul><li>eliminate 3rd party plug-in dependencies </li></ul><ul><li>eliminate complicated deployment </li></ul><ul><li>current specification does not declare a standard video codec </li></ul><ul><ul><li>H.264 (.mp4): Microsoft, Apple, Google </li></ul></ul><ul><ul><li>Ogg Theora (.ogv): Firefox, Opera, Google </li></ul></ul><ul><ul><li>VP8 (.webm): Google </li></ul></ul>
  21. 21. Encoding Video <ul><li>Firefox plug-in ( http://firefogg.org ) </li></ul><ul><ul><li>- ogv and webm </li></ul></ul><ul><li>HandBrake ( http://handbrake.fr/ ) </li></ul><ul><ul><li>- mp4 </li></ul></ul>
  22. 22. Adding Video <ul><li><video width=&quot;420&quot; height= &quot; 315&quot; controls preload=&quot;false&quot;> </li></ul><ul><li><source src=&quot;_video/explore_promo.mp4&quot; type=&quot;video/mp4&quot; /> </li></ul><ul><li><source src=&quot;_video/explore_promo.ogv&quot; type=&quot;video/ogg&quot; /> </li></ul><ul><li></video> </li></ul>
  23. 23. Canvas <ul><li><canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot; style=&quot;border:1px solid #c3c3c3;&quot;> </li></ul><ul><li>Your browser does not support the canvas element. </li></ul><ul><li></canvas> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var c=document.getElementById(&quot;myCanvas&quot;); </li></ul><ul><li>var cxt=c.getContext(&quot;2d&quot;); </li></ul><ul><li>var grd=cxt.createLinearGradient(0,0,175,50); </li></ul><ul><li>grd.addColorStop(0,&quot;#FF0000&quot;); </li></ul><ul><li>grd.addColorStop(1,&quot;#00FF00&quot;); </li></ul><ul><li>cxt.fillStyle=grd; </li></ul><ul><li>cxt.fillRect(0,0,175,50); </li></ul><ul><li></script> </li></ul>- draw graphics on a web page
  24. 24. Geolocations http://10k.aneventapart.com/Entry/Details/548
  25. 25. Address <ul><li><address> </li></ul><ul><li>Written by <a href=mary@mary.com>Mary Lee</a><br> </li></ul><ul><li>574-520-0989<br> </li></ul><ul><li></address> </li></ul>Written by Mary Lee 574-520-0989
  26. 26. Mark <ul><li><p>Do not forget to buy <mark>milk</mark> today.</p> </li></ul>
  27. 27. Details <ul><li><details open=&quot;open&quot;> </li></ul><ul><li><p>If your browser supports this element, it should allow you to expand and collapse these details. </li></ul><ul><li></p> </li></ul><ul><li></details> </li></ul>
  28. 28. Ruby <ul><li><p lang=&quot;zh-CN&quot;>... </li></ul><ul><li><ruby> </li></ul><ul><li>汉 < rt> hàn </rt> </li></ul><ul><li>字 < rt> zì </rt> </li></ul><ul><li></ruby> </li></ul><ul><li>… </p> </li></ul>... 汉字 ... hàn zì
  29. 29. What tags are fading away? <ul><li>Presentational </li></ul><ul><ul><li>- basefont, big, center, font, s, strike, tt, u </li></ul></ul><ul><li>Accessibility and usability </li></ul><ul><ul><li>- frame, frameset, noframes </li></ul></ul><ul><li>Low usage </li></ul><ul><ul><li>- acronym, applet, isindex, dir </li></ul></ul><ul><li>Attributes </li></ul>a, link: rev, charset All block level: align img: longdesc, name, hspace, vspace table, tr, th, td: bgcolor html: version table:border, cell padding, cell spacing, valign th: abbr td, th: height, width td: scope body: background
  30. 30. Helpful Resources <ul><li>W3C HTML5 Tutorials </li></ul><ul><ul><li>http://www.w3schools.com/html5/default.asp </li></ul></ul><ul><li>McGrath, Mike. HTML5 in Easy Steps . Southam: Easy Steps Limited, 2011. Print. </li></ul><ul><li>Lawson, Bruce, and Remy Sharp. Introduction to HTML5 . Berkeley: New Riders, 2011. Print. </li></ul><ul><li>Video for Everybody </li></ul><ul><ul><li>http://camendesign.com/code/video_for_everybody </li></ul></ul><ul><li>CanvasDemos </li></ul><ul><ul><li>http://www.canvasdemos.com </li></ul></ul>
  31. 31. 5 Things to Remember about HTML5 <ul><li>Still being develop </li></ul><ul><li>Won’t break your old site </li></ul><ul><li>More semantic </li></ul><ul><li>Codecs matter </li></ul><ul><li>Not all-browser compatible </li></ul>
  32. 32. Questions? <ul><li>Feel free to contact me at </li></ul><ul><ul><li>Email: [email_address] </li></ul></ul><ul><ul><li>AIM: himffy </li></ul></ul><ul><ul><li>Yahoo: vincci_kwong </li></ul></ul><ul><ul><li>MSN: [email_address] </li></ul></ul><ul><ul><li>Phone: 574-520-4444 </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×