take the html5 tour!

November 15, 2011

Take the HTML5 Tour!

Vincci KwongFranklin D. Schurz Library

Indiana University South BendIndiana 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 StructureMain Navigation

Main Content

Right Column Area

Left Navigation

CLAS Banner

Outline Page StructureCollege of Liberal Arts and

Sciences1. Main page navigation2. Left navigation3. Discover our world

i. CLAS Newsii. Build skills that prepare

you for your career and life

4. Right column areai. Student profilesii. Faculty profilesiii. Donation

main navigation

Discover Our World Right Column Area

footer

LeftNav.

College of Liberal Arts and Sciences

Structuring Page ContentStructural Tags:• nav• aside• footer• section

main navigation <nav>

Discover Our World<section>

Right Column Area<aside>

Footer <footer>

LeftNav.<nav>

College of Liberal Arts and Sciences <section>

Structuring Interior Content

main navigation <nav>

Student Profiles<section>

Footer <footer>

LeftNav.<nav>

Build Skills…<article>

Donation<article>

CLAS News<section>

College of Liberal Arts and Sciences <header>

Discover Our World<section>

Faculty Profiles<section>

Structural Tags:• nav• header• footer• section• article

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 "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!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- New input types- Data placeholder- Date picker- Required fields

Email and URL

EmailEmail: <INPUT

type="email" NAME="Email" SIZE="20" required>

Web AddressOrganization/Club URL: <INPUT type="url" NAME= " URL" SIZE="30">

Number

HTML 4Number of User(s): <input name="nouser" size="5">

HTML5Number of User(s): <input type="number" name="nouser" size="5" min="1" value="1" max="10">

Data PlaceHolder

HTML 4<input type='text' name=‘name' id=‘name‘ onBlur="if(this.value=='')

this.value='Type in your first and last name';" onClick="if(this.value=='Type in your first and last name') this.value='';" value="Type in your first and last name" />

HTML5<INPUT type="text" NAME="Name" SIZE="30" placeholder="Type in your first and last name">

Date Picker

HTML5<font color='red‘

size="+1"><b>*</b></font>Date:

<input type="date" name="date">

<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

HTML 4<FORM METHOD="POST"

ACTION=“conferencerm.php"name="conferenceroom" onSubmit="return (checkform())">

function checkform(){ if (document.conferenceroom.Name.value == ""){ alert("Name is required."); return false; }

if (document.conferenceroom.Phone.value == ""){alert("Phone is required.");return false;}

}

HTML5Name: <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• 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="420" height= " 315" controls preload="false"><source src="_video/explore_promo.mp4" type="video/mp4" /><source src="_video/explore_promo.ogv" type="video/ogg" /></video>

Canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.</canvas>

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");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 [email protected]>Mary Lee</a><br>574-520-0989<br></address>

Written by Mary Lee574-520-0989

Mark

<p>Do not forget to buy <mark>milk</mark> today.</p>

Details

<details open="open"><p>If your browser supports this element, it should allow

you to expand and collapse these details.</p></details>

Ruby

<p lang="zh-CN">...<ruby> 汉 <rt> hàn </rt> 字 <rt> zì </rt></ruby>…</p>

... 汉字 ...hàn 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 ResourcesW3C 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 HTML51. Still being develop2. Won’t break your old site3. More semantic4. Codecs matter5. Not all-browser compatible

Questions?Feel free to contact me at

• Email: [email protected]• AIM: himffy• Yahoo: vincci_kwong• MSN: [email protected]• Phone: 574-520-4444

take the html5 tour!

Technology