HTML5 and CSS3:
New Markup & Styles for the Emerging Web
Jason Clark
Head of Digital Access & Web Services
Montana State University Libraries
twitter #hashtag
#cilhtml5
[Link] #tag
[Link]/u:jasonclark/t:cil-html5/
Terms: HTML, CSS, API
Does everybody know what these elements are?
CSS
- style rules for HTML documents
HTML
- markup tags that structure docs
- browsers read them and display according to rules
API (application programming interface)
- set of routines, protocols, and tools for building
software applications
Overview
Revolution or Evolution?
New Features and Functions
Demos
Getting Started
Questions
[Link]
Chrome Experiments
Arcade Fire - The Wilderness Downtown
[Link]
HTML5 Working Examples
HTML5 Mobile Feed Widget
[Link]/~jason/files/html5-mobile-feed/
BookMeUp
[Link]/~jason/files/bookme/
Learn more by viewing source
OR
Downloading from [Link] or [Link]/
jasonclark
HTML5 as "umbrella" Term
Changes to HTML spec
New Javascript APIs
Additions to CSS spec
Evolution into HTML5
Reacting to how the web is used
A Minimal HTML5 Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet"
href="[Link]">
<script src="[Link]"></script>
</head>
<body>
<!-- page content -->
</body>
</html>
Semantic & Functional Markup
header
footer
nav
section
article
aside
mark
contenteditable attribute
Microdata
Markup for making HTML machine-readable
itemscope
itemtype
itemprop
Microdata Book Example
<dl itemscope
itemtype="[Link]
itemid="urn:isbn:0226500667"
<dt>Title</dt>
<dd itemprop="title">A River Runs Through It
and Other Stories</dd>
<dt>Author</dt>
<dd itemprop="author">Norman Maclean</dd>
<dt>Publication date</dt>
<dd itemprop="pubdate">October 1, 2001</dd>
</dl>
Native Video and Audio
simple markup
no plugin!
limited vid formats: .ogv, .mp4, webm
<video width="320" height="240 controls="controls">
<source src="film.mp4" type="video/mp4" />
Your browser doesnt support the video tag.
</video>
Forms <form>
field types - email, date
validation
regular expressions
still need to watch for security/hacks
<form> Markup
<input type="email" required>
<input type="date">
<input type="url">
<input type="email" required autofocus>
Javascript APIs
Desktop programming for the web
Geolocation
w3c API
accurate
supported in Firefox 3.6, Safari 4
File API, Drag & Drop API
Uploading of files
Drag & drop API in combination with a
draggable attribute
History API
Preserve the state of the page
Enabling back button in client-side scripts
sessionStorage
mega COOKIE
Stores key/value pairs while page is open
localStorage
mega COOKIE
Stores key/value pairs that persist after
page and browser are closed
Offline Storage Cache Manifest
Work without a connection
1. Create cache manifest file
2. Set server to allow for manifest file type
3. Link to manifest file in HTML <head>
CACHE MANIFEST
#store the files below
[Link]
[Link]
images/[Link]
Scripts/[Link]
Offline Storage - IndexedDB
My browser can haz database!
Simple key/value store within browser
Up to 5 MB of data storage
W3C discontinued Web SQL Database spec
HTML5 right now? IE?
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8" />
<title>HTML5 right now</title>
<!--[if IE]>
<script src="[Link]
trunk/[Link]"></script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section {display:block;}
</style>
</head>
<body>
<!-- ready to roll with HTML5 now -->
</body>
</html>
Evolution into CSS3
Rethinking web displays and styles
Rounded Elements
border-radius declaration
smooth out your interfaces
button effects
Gradients/Opacity
no more background images
transparency
Transitions
Animation behavior
Scaling, fading, easing, etc.
body {
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
transition:all .2s linear;
}
Columns and Grids
Layout and page structure
Goodbye, Float?
ul#content {
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #eee;
-webkit-column-gap: 1em;
-moz-column-count: 3;
-moz-column-rule: 1px solid #eee;
-moz-column-gap: 1em;
column-count: 3;
column-rule: 1px solid #eee;
column-gap: 1em;
display: block;
}
CSS3 example - [Link]
Media Queries
switch stylesheets based on width and
height of viewport
same content, new view depending on
device
@media screen and (max-device-
width:480px) {mobile styles
here...}
Media Queries in Action
<link rel="stylesheet"
type="text/css media="screen
and (max-device-width:480px) and
(resolution: 163dpi)
href="[Link]" />
Responsive Web Design, Ethan Marcotte
[Link]
@Font-Face
bring in fonts
use any licensed TrueType (.ttf) or
OpenType (.otf) font
independent of machine it's being rendered
on...
Demos & Examples
It's your call....
Demos & Examples
It's your call....
[Link]/EcontentRecord/19339/Viewer?item=3439864
Demos
YouTube HTML5 demo
o [Link]
24 ways CSS3 demo
o [Link]
HTML5 Demos
o [Link]
Other possible examples:
o geolocation
o localStorage
What Type of Support?
see "When can I use"
o [Link]
Mobile browsers leading the way
Modernizr
[Link]
HTML5 enabling script
o [Link]
enabling-script/
Resources
HTML5 Tag Reference (W3Schools)
o [Link]/html5/html5_reference.asp
Cross Browser Support Tables
o [Link]/litmus/
HTML5 Doctor
o [Link]/
CSS3 Previews ([Link])
o [Link]/preview/
HTML5 & CSS3 Cheat Sheets
o [Link]/html-5-and-css3-
cheat-sheets-collection/
Resources (cont.)
HTML5 Boilerplate
o [Link]
HTML5rocks
o [Link]
HTML5 Please
o [Link]/#use
Questions?
[Link]/jaclark
[Link]/~jason/[Link]
[Link]
