ݺߣ

ݺߣShare a Scribd company logo

Take the HTML5 Tour!

?Download as PPT, PDF?
?
Vincci Kwong
Vincci Kwong

This document provides a summary of HTML5 features including: 1. New HTML5 elements make pages more semantic and reduce the need for plugins. Support for HTML5 is increasing across browsers. 2. HTML5 introduces new form input types like email, url, number, and date which provide better user experiences for entering that data. 3. HTML5 features like video, canvas, geolocation, and forms make content richer and pages more interactive without plugins. Tags are presented to structure page content in an outline format.

1 of 32
Downloaded 47 times
Take the HTML5 Tour! November 15, 2011 Vincci Kwong Franklin D. Schurz Library Indiana University South Bend Indiana Library Federation Annual Conference
A Bit of History
Why Pay Attention to HTML5? New elements Backward compatible Reduces plug-ins Increase interactivity Increasing popularity
Current HTML5 Support http://html5test.com http://findmebyip.com http://caniuse.com
The Outline Algorithm Think of it as a table of contents Section and heading content is used to define the outline Body is established as the outline root Items are added to the outline as sectioning content is found Initial heading content is used to name sections Sectioning content contained within sections is nested in the outline
Current Page Structure Main Navigation Main Content Right Column Area Left Navigation CLAS Banner
Outline Page Structure College of Liberal Arts and Sciences Main page navigation Left navigation Discover our world CLAS News Build skills that prepare you for your career and life Right column area Student profiles Faculty profiles Donation main navigation Discover Our World Right Column Area footer Left Nav. College of Liberal Arts and Sciences
Structuring Page Content Structural Tags: nav aside footer section main navigation <nav> Discover Our World <section> Right Column Area <aside> Footer <footer> Left Nav. <nav> College of Liberal Arts and Sciences <section>
Structuring Interior Content Structural Tags: nav header footer section article 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>
Put Them All Together <body> <heading> <h1>College of Liberal Arts and Sciences</h1> </heading> <section> <h1>Discover our world</h1> <p>Links to departments</p> </section> <section> <h1>CLAS news</h1> <p>New stories</p> </section> <article> <h1>Build skills that prepare you for your career and life</h1> <p>Every undergraduate student......</p> </article> <aside> <h1>Right content area</h1> <section> <h1>Student Profiles</h1> </section> <section> <h1>Faculty Profiles</h1> </section> <article> <h1>Donation</h1> </article> </aside> </body>
Check with Document Outlines Google Chrome plug-in HTML5 Outliner http://gsnedders.html5.org/outliner
Getting Started <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <!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; />
Forms in HTML5 - New input types - Data placeholder - Date picker - Required fields
Email and URL Email Email: <INPUT type=&quot;email&quot; NAME=&quot;Email&quot; SIZE=&quot;20&quot; required> Web Address Organization/Club URL: <INPUT type=&quot;url&quot; NAME= &quot; URL&quot; SIZE=&quot;30&quot;>
Number HTML 4 Number of User(s): <input name=&quot;nouser&quot; size=&quot;5&quot;> 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;>
Data PlaceHolder HTML 4 <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; /> HTML5 <INPUT type=&quot;text&quot; NAME=&quot;Name&quot; SIZE=&quot;30&quot; placeholder=&quot;Type in your first and last name&quot; >
Date Picker HTML5 <font color='red size=&quot;+1&quot;><b>*</b></font>Date: <input type=&quot;date&quot; name=&quot;date&quot;> <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
Required Fields HTML 4 <FORM METHOD=&quot;POST&quot; ACTION= conferencerm.php&quot;name=&quot;conferenceroom&quot; onSubmit=&quot;return (checkform())&quot;> function checkform(){ if (document.conferenceroom.Name.value == &quot;&quot;){ alert(&quot;Name is required.&quot;); return false; } if (document.conferenceroom.Phone.value == &quot;&quot;){ alert(&quot;Phone is required.&quot;); return false; } } 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
Figure HTML5 <figure> <img src=/slideshow/take-the-html5-tour/10202336/&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>
HTML5 Video eliminate 3rd party plug-in dependencies eliminate complicated deployment current specification does not declare a standard video codec H.264 (.mp4): Microsoft, Apple, Google Ogg Theora (.ogv): Firefox, Opera, Google VP8 (.webm): Google
Encoding Video Firefox plug-in ( http://firefogg.org ) - ogv and webm HandBrake ( http://handbrake.fr/ ) - mp4
Adding Video <video width=&quot;420&quot; height= &quot; 315&quot; controls preload=&quot;false&quot;> <source src=/slideshow/take-the-html5-tour/10202336/&quot;_video/explore_promo.mp4&quot; type=&quot;video/mp4&quot; /> <source src=&quot;_video/explore_promo.ogv&quot; type=&quot;video/ogg&quot; /> </video>
Canvas <canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot; style=&quot;border:1px solid #c3c3c3;&quot;> Your browser does not support the canvas element. </canvas> <script type=&quot;text/javascript&quot;> var c=document.getElementById(&quot;myCanvas&quot;); var cxt=c.getContext(&quot;2d&quot;); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,&quot;#FF0000&quot;); grd.addColorStop(1,&quot;#00FF00&quot;); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script> - draw graphics on a web page
Geolocations http://10k.aneventapart.com/Entry/Details/548
Address <address> Written by <a href=mary@mary.com>Mary Lee</a><br> 574-520-0989<br> </address> Written by Mary Lee 574-520-0989
Mark <p>Do not forget to buy <mark>milk</mark> today.</p>
Details <details open=&quot;open&quot;> <p>If your browser supports this element, it should allow you to expand and collapse these details. </p> </details>
Ruby <p lang=&quot;zh-CN&quot;>... <ruby> < rt> hn </rt> < rt> z </rt> </ruby> </p> ... ... hn z
What tags are fading away? Presentational - basefont, big, center, font, s, strike, tt, u Accessibility and usability - frame, frameset, noframes Low usage - acronym, applet, isindex, dir Attributes 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
Helpful Resources W3C HTML5 Tutorials http://www.w3schools.com/html5/default.asp McGrath, Mike. HTML5 in Easy Steps . Southam: Easy Steps Limited, 2011. Print. Lawson, Bruce, and Remy Sharp. Introduction to HTML5 . Berkeley: New Riders, 2011. Print. Video for Everybody http://camendesign.com/code/video_for_everybody CanvasDemos http://www.canvasdemos.com
5 Things to Remember about HTML5 Still being develop Wont break your old site More semantic Codecs matter Not all-browser compatible
Questions? Feel free to contact me at Email: [email_address] AIM: himffy Yahoo: vincci_kwong MSN: [email_address] Phone: 574-520-4444

More Related Content

Take the HTML5 Tour!

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