<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 9: HTML5 controls & jQuery UI — INFO 343 Autumn 2012</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>INFO 343 Lecture 9</h1>
<h2>HTML5 controls & jQuery UI</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>HTML5 controls & jQuery UI</h1>
<h3>Lecture 9</h3>
<!-- <h4>
Suggested Reading: <br/>
<a href="http://css3.bradshawenterprises.com/"><cite>Using CSS3 Transitions, Transforms, and Animation</cite></a> by Rich Bradshaw
</h4> -->
<p class="license">
© 2012 Morgan Doocy and/or Marty Stepp, Jessica Miller
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="../s5/images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide titleslide">
<h1>HTML5 & new form controls</h1>
<ol>
<li><strong>HTML5 & new form controls</strong></li>
<li>Advanced widgets with jQuery UI</li>
</ol>
</div>
<div class="slide">
<h1>What is HTML 5?</h1>
<div style="width: 20%; float: right; margin: 1em; text-align: center">
<img src="HTML5_logo_512.png" alt="HTML5 Logo" style="width: 100%; max-width: 512px;"/><br/>
<img src="HTML5_Styling_512.png" alt="CSS3 logo" style="width: 100%; max-width: 512px" />
</div>
<ul>
<li>
Newest version of HTML standard <img src="images/w3c-logo.png" alt="w3c" style="height: 30px" />
<ul>
<li>Successor to HTML 4.01 and XHTML 1.1</li>
</ul>
</li>
<li>
Balance between too-loose-ness of HTML 4 and too-strict-ness of XHTML
<ul>
<li>Relaxes rules, e.g. with inline-block elements inside of block elements</li>
<li>
No more self-closing tags, and shorter boolean attributes:<br/>
<code><del><input type="checkbox" checked<em>="checked"</em> <em>/</em>></del></code> ←<br/>
<code><input type="checkbox" checked></code>
</li>
</ul>
</li>
<li>
Reduces the browser’s need for plugins to display content, e.g. multimedia
</li>
<li>
Make web content more rich, semantically meaningful, descriptive, accessible
</li>
<li>
More easily enable the web as an application platform (Web 2.0)
</li>
</ul>
</div>
<div class="slide">
<h1>The HTML5 ecosphere</h1>
<p>When people say “HTML5” they often mean more than just HTML:</p>
<style type="text/css">
#html5_ecosphere {
list-style-type: none;
padding-left: 2em;
margin-left: 0;
position: relative;
}
#html5_ecosphere img {
height: 1.25em;
vertical-align: middle;
position: absolute;
left: 0;
}
.html5-marker {
height: 1em;
background-color: white;
padding: .15em;
vertical-align: middle;
}
</style>
<ul id="html5_ecosphere">
<li><img src="HTML5_Offline_Storage_512.png" alt="HTML5 Offline & Storage logo" /> New DOM features for offline browsing, local storage/databases, files API</li>
<li><img src="HTML5_Styling_512.png" alt="CSS3 logo" /> Next-generation CSS3 styles</li>
<li><img src="HTML5_Device_Access_512.png" alt="HTML5 Device Access logo" /> Device access: Geolocation, integration with cameras/microphones, tilt orientation, etc.</li>
<li><img src="HTML5_Semantics_512.png" alt="HTML5 semantics logo" /> New semantic tags in HTML itself</li>
<li><img src="HTML5_Connectivity_512.png" alt="HTML5 connectivity logo" /> New, advanced connectivity features like “push” technology and improved Ajax</li>
<li><img src="HTML5_Multimedia_512.png" alt="HTML5 multimedia logo" /> Built-in support for video and audio codecs, JS-based playback control (no more Flash!)</li>
<li><img src="HTML5_3D_Effects_512.png" alt="HTML5 3D/effects logo" /> Vector image drawing (SVG, Canvas), CSS3 3D effects & animations</li>
</ul>
<p style="font-size: 150%">“HTML5” ≈ HTML5 + CSS3 + JS3 + new DOM features</p>
</div>
<div class="slide">
<h1>HTML5 document template <img class="html5-marker" src="HTML5_logo_512.png" alt="HTML5 Logo" /></h1>
<div style="float: left; width: 48%">
<p>Old XHTML 1.1 template:</p>
<div class="example">
<pre class="syntaxtemplate html" style="margin-top: 0;">
<em><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></em>
<html <em>xmlns="http://www.w3.org/1999/xhtml"</em>>
<head>
<em><meta http-equiv="content-type" content="text/html; charset=UTF-8" /></em>
<title>Page Title</title>
</head>
<body>
</body>
</html>
</pre>
</div>
</div>
<div style="float: right; width: 48%">
<p>New HTML5 template:</p>
<div class="example">
<pre class="syntaxtemplate html5" style="margin-top: 0">
<em><!DOCTYPE html></em>
<html>
<head>
<em><meta charset="utf-8"></em>
<title>Page Title</title>
</head>
<body>
</body>
</html>
</pre>
</div>
</div>
<ul style="clear: both;">
<li style="float: left; width: 48%">Ugly, tedious.</li>
<li style="float: right; width: 48%">Yes, thank you.</li>
</ul>
</div>
<div class="slide">
<h1>XHTML 1.1 page structure</h1>
<div class="figure">
<img src="images/html5-bad-tags.gif" alt="bad tags" />
</div>
<ul>
<li>
Web pages often have to give semantic meaning to content through <code>class</code> and <code>id</code> attributes, rather than through the tag elements themselves
</li>
</ul>
</div>
<div class="slide">
<h1>HTML 5 page structure</h1>
<div class="figure">
<img src="images/html5-good-tags.gif" alt="good tags" />
</div>
<ul>
<li>New HTML5 page section tags describe the content better.</li>
</ul>
</div>
<div class="slide">
<h1>New tags in HTML5 <img class="html5-marker" src="HTML5_logo_512.png" alt="HTML5 Logo" /></h1>
<table class="standard">
<tr>
<td><code>header</code>, <code>footer</code>, <code>section</code>, <code>aside</code>, <code>nav</code>, <code>article</code></td>
<td>
“structural” tags for splitting page into sections<br/>
<small>deprecates <del><code><div id="header"></code></del>, <del><code><div class="article"></code></del></small>
</td>
</tr>
<tr>
<td><a href="http://html5doctor.com/the-figure-figcaption-elements/"><code>figure</code>, <code>figcaption</code></a></td>
<td>tags for “figures” (images, code samples, audio/video, etc.) optionally with caption</td>
</tr>
<tr>
<td><a href="http://html5doctor.com/the-hgroup-element/"><code>header</code>, <code>hgroup</code></a></td>
<td>group titles, subtitles, and header metatdata together</td>
</tr>
<tr>
<td><a href="http://html5doctor.com/an-introduction-to-the-canvas-2d-api/"><code>canvas</code></a></td>
<td>an area that can be drawn in using JavaScript</td>
</tr>
<tr>
<td><a href="http://html5doctor.com/i-b-em-strong-element/"><code>i</code>, <code>b</code></a>, <a href="http://html5doctor.com/u-element/"><code>u</code></a>, <a href="http://html5doctor.com/small-hr-element/"><code>small</code>, <code>hr</code></a></td>
<td>old, “bad” tags with new, “good” semantic meanings</td>
</tr>
<tr>
<td><a href="http://html5doctor.com/native-audio-in-the-browser/"><code>audio</code></a>, <a href="http://html5doctor.com/the-video-element/"><code>video</code></a>, <code>source</code>, <a href="http://html5doctor.com/video-the-track-element-and-webm-codec/"><code>track</code></a>, <code>embed</code></td>
<td>tags for embedded multimedia content</td>
</tr>
</table>
</div>
<div class="slide">
<h1>More new HTML5 tags <img class="html5-marker" src="HTML5_logo_512.png" alt="HTML5 Logo" /></h1>
<table class="standard">
<tr>
<td><a href="http://html5doctor.com/the-output-element/"><code>output</code></a></td>
<td>the result of a calculation</td>
</tr>
<tr>
<td><a href="http://html5doctor.com/draw-attention-with-mark/"><code>mark</code></a></td>
<td>drawing attention/highlighting</td>
</tr>
<tr>
<td><a href="http://html5doctor.com/measure-up-with-the-meter-tag/"><code>meter</code></a>, <a href="http://www.w3schools.com/tags/tag_progress.asp"><code>progress</code></a></td>
<td>gauges/indicators</td>
</tr>
<tr>
<td><a href="http://html5doctor.com/the-details-and-summary-elements/"><code>summary</code>, <code>details</code></a></td>
<td>“disclosure” widget for showing/hiding details</td>
</tr>
<tr>
<td><a href="http://html5doctor.com/microdata/"><code>item<var>*</var></code></a>, <a href="http://html5doctor.com/html5-custom-data-attributes/"><code>data-<var>*</var></code></a>, <a href="http://html5doctor.com/microformats/"><code>rel</code></a></td>
<td>new attributes for microformats, microdata, and custom data</td>
</tr>
<tr>
<td><a href="http://html5doctor.com/the-time-element/"><code>time</code></a></td>
<td>a date/time</td>
</tr>
<tr>
<td><a href="http://html5doctor.com/the-nsfw-element/"><code>nsfw</code></a></td>
<td>potentially objectionable content (not really)</td>
</tr>
</table>
</div>
<div class="slide">
<h1>New HTML5 form controls <img class="html5-marker" src="HTML5_logo_512.png" alt="HTML5 Logo" /></h1>
<style type="text/css">
#keypad_images {
list-style-type: none;
overflow: hidden;
padding: 0;
float: right;
max-width: 18em;
margin: 1em;
font-size: 90%;
}
#keypad_images li {
float: left;
margin: .5em;
list-style-type: none;
max-width: 5em;
}
#keypad_images li img {
width: 100%;
}
#widget_images {
margin: 0;
padding: 0;
}
#widget_images li {
float: left;
list-style-type: none;
margin-right: 1em;
}
</style>
<ul id="keypad_images">
<li><img src="android-form-number.png" alt="Android number keyboard"/><br/>Number keypad on Android</li>
<li><img src="iphone-form-email.png" alt="iPhone email keyboard"/><br/>Email keypad on iOS</li>
<li><img src="iphone-form-tel.png" alt="iPhone telephone keyboard"/><br/>Telephone keypad on iOS</li>
</ul>
<ul>
<li>New text boxes for specific data types
<ul>
<li>Number, email address, URL, telephone number</li>
<li>Mobile browsers adapt their keyboard for specific input</li>
</ul>
</li>
<li>New widgets for specific applications
<ul>
<li>
Calendar date picker
<img style="float: right; margin: .5em 1em 1em 1em; width: 7em" src="images/input-type-datetime.png" alt="Date/time picker"/>
</li>
<li>Range slider</li>
<li>“Spinner”</li>
<li>Color picker</li>
<li>Search box</li>
</ul>
</li>
</ul>
<ul id="widget_images">
<li><img src="images/input-type-range.png" alt="Range slider" /></li>
<li><img src="images/input-type-number.png" alt="Number spinner" /></li>
<li><img src="images/input-type-search.png" alt="Search box" /></li>
<li><img style="margin-top: -2em;" src="color-supported-opera11.png" alt="Color picker" /></li>
</ul>
</div>
<div class="slide">
<h1>New HTML5 Text boxes <img class="html5-marker" src="HTML5_logo_512.png" alt="HTML5 Logo" /></h1>
<div class="example">
<pre class="examplecode html">
<label>Email: <input type="<em>email</em>"></label>
<label>Phone: <input type="<em>tel</em>" <em>placeholder="Phone number"</em>></label>
<label>Search: <input type="<em>search</em>" <em>results="5"</em> placeholder="Google search"
<em>autosave="info343_html5_search_example"</em>></label>
</pre>
<div class="exampleoutput insertoutput">
</div>
</div>
<ul>
<li>Browsers beginning to implement <a href="http://wufoo.com/html5/types/1-email.html">built-in validation</a> based on type of field
<ul>
<li>Try typing gibberish in the email field in Firefox!</li>
</ul>
</li>
<li>Serves as hint to mobile browser for type of keyboard to display</li>
<li>Fallback to <code><input type="text"></code> in non-supporting browsers</li>
<li>Placeholder text disappears when you begin typing</li>
<li>Search box has a different look in Windows, Mac, etc.</li>
</ul>
</div>
<div class="slide">
<h1>Number ranges: sliders & spinners <img class="html5-marker" src="HTML5_logo_512.png" alt="HTML5 Logo" /></h1>
<div class="example">
<pre class="examplecode html">
Angle: <input type="<em>range</em>" value="180" <em>min="0" max="360" step="1"</em>>
Blur: <input type="<em>number</em>" value="0.5" size="3" min="0" step="0.1"> pixels
</pre>
<div class="exampleoutput insertoutput">
</div>
</div>
<ul>
<li>Range: an “imprecise” draggable number-selection knob</li>
<li>Number: a precise incrementer/decremeter</li>
<li>Can specify <code>min</code>/<code>max</code>/<code>step</code>; <code>value</code> is default value.</li>
<li><strong>These don’t currently work in Firefox!</strong></li>
</ul>
</div>
<div class="slide">
<h1>Complex widgets: date and color pickers <img class="html5-marker" src="HTML5_logo_512.png" alt="HTML5 Logo" /></h1>
<div class="example">
<pre class="examplecode html">
Birthdate: <input type="<em>date</em>" value="1980-10-31">
Favorite color: <input type="<em>color</em>">
</pre>
<div class="exampleoutput insertoutput">
</div>
</div>
<ul>
<li>
Date picker: some browsers (Opera, Chrome) display complex calendar UI.
<ul>
<li>Safari uses a spinner instead for this.</li>
</ul>
</li>
<li><strong>Color ONLY works in Chrome and Opera!</strong></li>
</ul>
</div>
<div class="slide">
<h1>Status report: <code>progress</code> and <code>meter</code> <img class="html5-marker" src="HTML5_logo_512.png" alt="HTML5 Logo" /></h1>
<div class="example">
<pre class="examplecode html">
Page <em><meter value="3" min="1" max="7">3 of 7</meter></em>.
<em><progress min="0" max="100" value="33">Installing…</progress></em>
<progress>Updating…</progress>
</pre>
<div class="exampleoutput insertoutput">
</div>
</div>
<ul>
<li>Meter: a fixed measurement or ratio</li>
<li>Progress: a temporary, fleeting indication of completion</li>
<li>Supported by Chrome, Firefox, Opera, and Safari 6.</li>
</ul>
</div>
<div class="slide">
<h1>Browser support for HTML5 features</h1>
<ul>
<li>HTML5 is still under development(!)</li>
<li>Support for each new feature varies widely across browsers.</li>
<li>Detailed lists of features browsers support, by version:
<ul>
<li><a href="http://caniuse.com/">Can I use…</a></li>
<li><a href="http://www.quirksmode.org/dom/html5.html">QuirksMode</a></li>
</ul>
</li>
<li>View your browser’s scoresheet: <a href="http://html5test.com/">HTML5 Test</a></li>
<li>Advice on when and how to use next-gen features: <a href="http://html5please.com/">HTML5 Please</a></li>
<li>Form controls fall back to <code><input type="text"></code></li>
<li class="incremental">How to ensure your widget will work?</li>
</ul>
</div>
<div class="slide titleslide">
<h1>Advanced widgets with jQuery UI</h1>
<ol>
<li>HTML5 & new form controls</li>
<li><strong>Advanced widgets with jQuery UI</strong></li>
</ol>
</div>
<div class="slide">
<h1>Reliable widgets: jQuery UI</h1>
<div style="text-align: center"><img src="jquery-ui.png" alt="jQuery UI logo" /></div>
<pre class="examplecode js" style="clear: left; font-size: 80%">
<em><link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css"/></em>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="<em>http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js</em>"></script>
</pre>
<ul>
<li><span class="term">jQuery UI</span> contains more than just effects</li>
<li>Must be loaded after jQuery in code</li>
<li>Must also load jQuery UI CSS theme for widgets’ look and feel</li>
<li><a href="http://jqueryui.com/demos/">Demos, demos, and more demos!</a></li>
</ul>
</div>
<!-- <div class="slide">
<h1>What's <a class="popup" href="http://slides.html5rocks.com/#slide16">new</a> in HTML 5?</h1>
<ul>
<li>
semantic <a class="popup" href="http://www.w3schools.com/html5/html5_reference.asp"><strong>tags</strong></a>: <code>nav</code>, <code>aside</code>, <code>header</code>, <code>footer</code>, <code>section</code>, <code>article</code>
</li>
<li>
<img src="images/input-type-datetime.png" alt="date/time" style="float: right; margin-left: 1em" />
<strong>Forms</strong> 2.0: sliders, search bars, color/number/email/url/date/time, placeholders, ... <br />
<img src="images/input-type-range.png" alt="slider" />
<img src="images/input-type-search.png" alt="search" style="margin-left: 50px" />
<img src="images/input-type-number.png" alt="number" style="margin-left: 50px" />
</li>
<li>
<strong><code>audio</code></strong> and <strong><code>video</code></strong> tags for embedding multimedia <br />
<img src="images/html5-video.jpg" alt="video" style="width: 200px" />
</li>
<li>
<strong><code>canvas</code></strong> tag for drawing 2D shapes in HTML/JS (like <code>DrawingPanel</code>)
(ref
<a class="popup" href="http://thinkvitamin.com/dev/html-5-dev/how-to-draw-with-html-5-canvas/">1</a>,
<a class="popup" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">2</a>,
<a class="popup" href="https://developer.mozilla.org/en/canvas_tutorial">3</a>) <br />
<img src="images/html5-canvas.png" alt="canvas" />
</li>
</ul>
</div>
<div class="slide">
<h1>What's new, continued</h1>
<ul>
<li>
<a class="popup" href="http://en.wikipedia.org/wiki/Semantic_Web">semantic web</a> / <a class="popup" href="http://diveintohtml5.org/extensibility.html">microdata</a> <strong>attributes</strong>: <code>rel="..."</code>, <code>itemscope</code>, <code>itemtype</code>, <code>itemprop</code> <br />
<img src="images/microdata.png" alt="microdata" />
</li>
<li>
<img src="images/svg-lion.gif" alt="SVG" style="float: right; margin-left: 1em" />
<strong>accessibility</strong> features ("<a href="http://standardssuck.org/aria-in-html5">ARIA</a>")
</li>
<li>
embedding of rich XML-like formats such as <a href="http://en.wikipedia.org/wiki/Svg"><strong>SVG</strong></a> vector graphics
</li>
<li>
other stuff: offline apps, <a class="popup" href="http://diveintohtml5.org/geolocation.html">geolocation</a>, cross-document messaging, MIME type registration, history management, ...
</li>
</ul>
</div> -->
<!--#include virtual="../s5/commonbottom.html" -->