Take the HTML5 Tour!

Take the HTML5 Tour! November 15, 2011 Vincci Kwong Franklin D. Schurz Library Indiana University South Bend Indiana Library Federation Annual Conference

Why Pay Attention to HTML5? ,[object Object],[object Object],[object Object],[object Object],[object Object]

Current HTML5 Support ,[object Object],[object Object],[object Object]

The Outline Algorithm ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Current Page Structure Main Navigation Main Content Right Column Area Left Navigation CLAS Banner

Outline Page Structure ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],main navigation Discover Our World Right Column Area footer Left Nav. College of Liberal Arts and Sciences

Structuring Page Content ,[object Object],[object Object],[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Check with Document Outlines ,[object Object],[object Object],[object Object]

Getting Started…… ,[object Object],<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <html lang="en"> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Forms in HTML5 ,[object Object],[object Object],[object Object],[object Object]

Email and URL ,[object Object],[object Object],Web Address Organization/Club URL: <INPUT type="url" NAME= " URL" SIZE="30">

Number ,[object Object],[object Object],HTML5 Number of User(s): <input type="number" name="nouser" size="5" min="1" value="1" max="10">

Data PlaceHolder ,[object Object],[object Object],HTML5 <INPUT type="text" NAME="Name" SIZE="30" placeholder="Type in your first and last name" >

Date Picker ,[object Object],[object Object],[object Object],<font color='red' size="+1"><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>  <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>  <SELECT NAME='Year'><OPTION VALUE='yyyy'>yyyy</OPTION><OPTION VALUE='2006'>2006</OPTION><OPTION VALUE='2007'>2007</OPTION> </SELECT> HTML 4

Required Fields ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],HTML5 Name: <INPUT type="text" NAME="Name" SIZE="30" placeholder="Type in your first and last name" required > Opera Chrome

Figure HTML5 <figure> <img src="http://library.iusb.edu/erc/Brandon.jpg" alt="Brandon" width="250" height="228"> <figcaption> Brandon Bauschke, Assistand Head of ERC </figcaption> </figure>

HTML5 Video ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Encoding Video ,[object Object],[object Object],[object Object],[object Object]

Adding Video ,[object Object],[object Object],[object Object],[object Object]

Canvas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],- draw graphics on a web page

Geolocations http://10k.aneventapart.com/Entry/Details/548

Address ,[object Object],[object Object],[object Object],[object Object],Written by Mary Lee 574-520-0989

Details ,[object Object],[object Object],[object Object],[object Object]

Ruby ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],... 汉字 ... hàn zì

What tags are fading away? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

5 Things to Remember about HTML5 ,[object Object],[object Object],[object Object],[object Object],[object Object]

Questions? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Take the HTML5 Tour!

Recomendados

Recomendados

Más contenido relacionado

Similar a Take the HTML5 Tour!

Similar a Take the HTML5 Tour! (20)

Más de Vincci Kwong

Más de Vincci Kwong (11)

Último

Último (20)

Take the HTML5 Tour!