lita-html5.pdf

8/14/2019 lita-html5.pdf

1/32

Building Web Applications with

HTML5, CSS3, and Javascript:An Introduction to HTML5

Jason ClarkHead of Digital Access & Web ServicesMontana State University Library


2/32

pinboard.in #tag

pinboard.in/u:jasonclark/t:lita-html5/


3/32

twitter #hashtag

#litahtml5


4/32

Overview

Revolution or Evolution? New Features and Functions Demos Getting StartedQuestions


5/32

Hello, My Name is

Background, Position HTML, Programming experience? Experience with CSS3? What do you want to learn most?


6/32

Terms: HTML, CSS, API

Does everybody know what these elements are?CSS- style rules for HTML documentsHTML- markup tags that structure docs- browsers read them and display according to rulesAPI (application programming interface)- set of routines, protocols, and tools for buildingsoftware applications


7/32

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html


8/32

HTML5 spec from WHATWG

The World Wide Web's markup language has always beenHTML. HTML was primarily designed as a language forsemantically describing scientific documents, although itsgeneral design and adaptations over the years has enabled

it to be used to describe a number of other types ofdocuments.

The main area that has not been adequately addressed byHTML is a vague subject referred to as Web Applications.

This specification attempts to rectify this, while at the sametime updating the HTML specifications to address issuesraised in the past few years.

www.whatwg.org/specs/web-apps/2005-09-01/#introduction


9/32

Chrome Experiments

Arcade Fire - The Wilderness Downtownhttp://www.chromeexperiments.com/arcadefire/


10/32

HTML5 Working Examples

HTML5 Mobile Feed Widgetwww.lib.montana.edu/~jason/files/html5-mobile-feed/

BookMeUpwww.lib.montana.edu/beta/bookme/

Learn more by viewing sourceOR Downloading from jasonclark.info or github.com/

jasonclark


11/32

HTML5 as "umbrella" Term

Changes to HTML specAdditions to CSS spec New Javascript APIs


12/32

Evolution into HTML5

Reacting to how the web is used


13/32

A Minimal HTML5 Document

title


14/32

Semantic & Functional Markup

header footer nav section article figure aside mark menu contenteditable attribute


15/32

Microdata

Markup for making HTML machine-readable

itemscope itemtype itemprop


16/32

Microdata Book Example


17/32

Link Relations

Explain why you're pointing to another page."I'm pointing to this other page because..."

rel=alternate

rel=archives

rel=author

rel=external

rel=icon

rel=licenserel=prefetch

rel=search

rel=sidebar

rel=tag

...


18/32

Native Video and Audio

simple markup no plugin! limited vid formats: .ogv, .mp4, webm


19/32

Canvas

Draw into HTML elements via scripting(usually JavaScript)

draw graphs, make photo compositions, create animations or even

do real-time video processing


20/32

Forms

field types - email, date validation regular expressions still need to watch for security/hacks


21/32

Markup


22/32

Data URIs

Embed small files inline in documents

data:[][;charset=]

[;base64],


23/32

HTML5 right now? IE?


24/32

Demos & Examples

It's your call....


25/32

catalog.douglascountylibraries.org/EcontentRecord/19339/Viewer?item=3439864


26/32

Demos

YouTube HTML5 demoo http://www.youtube.com/html5

24 ways CSS3 demoo

http://24ways.org/

HTML5 Demos

o http://html5demos.com/ Other possible examples:

ogeolocation

o localStorage


27/32

What Type of Support?

see "When can I use"ohttp://a.deveria.com/caniuse/

Mobile browsers leading the way Modernizr

http://www.modernizr.com/ HTML5 enabling script

ohttp://remysharp.com/2009/01/07/html5-enabling-script/


28/32

Resources

HTML5 Tag Reference (W3Schools)o w3schools.com/html5/html5_reference.asp

Cross Browser Support Tableso

www.findmebyip.com/litmus/

HTML5 Doctor

o html5doctor.com/ CSS3 Previews (CSS3.info)

owww.css3.info/preview/

HTML5 & CSS3 Cheat Sheets

o webresourcesdepot.com/html-5-and-css3-cheat-sheets-collection/


29/32

Resources (cont.)

HTML5 Boilerplateohttp://html5boilerplate.com/

HTML5rockso

html5rocks.com

HTML5 Please

o html5please.com/#use


30/32

Assignment 1

Using HTML5 Class Template http://www.lib.montana.edu/~jason/files/html5-mobile-

feed/template.html

1. Add header, nav, section, aside, footer2. Add content (dummy text) into each new tag3. Add microdata to page


31/32

Questions?

twitter.com/jaclarkwww.lib.montana.edu/~jason/talks.php


32/32

http://www.gesteves.com/experiments/starwars.html

lita-html5.pdf

Documents