Scribd
Upload
59 views45 pages

Cil2012 html5

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. 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.

Uploaded by

sreejeshkeralam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
59 views45 pages

Cil2012 html5

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. 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.

Uploaded by

sreejeshkeralam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

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
pinboard.in #tag
pinboard.in/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
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html
Chrome Experiments
Arcade Fire - The Wilderness Downtown
http://www.chromeexperiments.com/arcadefire/
HTML5 Working Examples
HTML5 Mobile Feed Widget
www.lib.montana.edu/~jason/files/html5-mobile-feed/
BookMeUp
www.lib.montana.edu/~jason/files/bookme/
Learn more by viewing source
OR
Downloading from jasonclark.info or github.com/
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="style.css">
<script src="script.js"></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="http://vocab.example.net/book"
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
index.html
styles.css
images/logo.png
Scripts/global.js
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="http://html5shiv.googlecode.com/svn/
trunk/html5.js"></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 - http://css3exp.com/moon/
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="shetland.css" />
Responsive Web Design, Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
@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....
catalog.douglascountylibraries.org/EcontentRecord/19339/Viewer?item=3439864
Demos
YouTube HTML5 demo
o http://www.youtube.com/html5
24 ways CSS3 demo
o http://24ways.org/
HTML5 Demos
o http://html5demos.com/
Other possible examples:
o geolocation
o localStorage
What Type of Support?
see "When can I use"
o http://a.deveria.com/caniuse/
Mobile browsers leading the way
Modernizr
http://www.modernizr.com/
HTML5 enabling script
o http://remysharp.com/2009/01/07/html5-
enabling-script/
Resources
HTML5 Tag Reference (W3Schools)
o w3schools.com/html5/html5_reference.asp
Cross Browser Support Tables
o www.findmebyip.com/litmus/
HTML5 Doctor
o html5doctor.com/
CSS3 Previews (CSS3.info)
o www.css3.info/preview/
HTML5 & CSS3 Cheat Sheets
o webresourcesdepot.com/html-5-and-css3-
cheat-sheets-collection/
Resources (cont.)
HTML5 Boilerplate
o http://html5boilerplate.com/
HTML5rocks
o html5rocks.com
HTML5 Please
o html5please.com/#use
Questions?
twitter.com/jaclark
www.lib.montana.edu/~jason/talks.php
http://www.gesteves.com/experiments/starwars.html

You might also like