lita-html5.pdf
Post on 04-Jun-2018
217 Views
Preview:
TRANSCRIPT
-
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
-
8/14/2019 lita-html5.pdf
2/32
pinboard.in #tag
pinboard.in/u:jasonclark/t:lita-html5/
-
8/14/2019 lita-html5.pdf
3/32
twitter #hashtag
#litahtml5
-
8/14/2019 lita-html5.pdf
4/32
Overview
Revolution or Evolution? New Features and Functions Demos Getting StartedQuestions
-
8/14/2019 lita-html5.pdf
5/32
Hello, My Name is
Background, Position HTML, Programming experience? Experience with CSS3? What do you want to learn most?
-
8/14/2019 lita-html5.pdf
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
-
8/14/2019 lita-html5.pdf
7/32
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html
-
8/14/2019 lita-html5.pdf
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
-
8/14/2019 lita-html5.pdf
9/32
Chrome Experiments
Arcade Fire - The Wilderness Downtownhttp://www.chromeexperiments.com/arcadefire/
-
8/14/2019 lita-html5.pdf
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
-
8/14/2019 lita-html5.pdf
11/32
HTML5 as "umbrella" Term
Changes to HTML specAdditions to CSS spec New Javascript APIs
-
8/14/2019 lita-html5.pdf
12/32
Evolution into HTML5
Reacting to how the web is used
-
8/14/2019 lita-html5.pdf
13/32
A Minimal HTML5 Document
title
-
8/14/2019 lita-html5.pdf
14/32
Semantic & Functional Markup
header footer nav section article figure aside mark menu contenteditable attribute
-
8/14/2019 lita-html5.pdf
15/32
Microdata
Markup for making HTML machine-readable
itemscope itemtype itemprop
-
8/14/2019 lita-html5.pdf
16/32
Microdata Book Example
-
8/14/2019 lita-html5.pdf
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
...
-
8/14/2019 lita-html5.pdf
18/32
Native Video and Audio
simple markup no plugin! limited vid formats: .ogv, .mp4, webm
-
8/14/2019 lita-html5.pdf
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
-
8/14/2019 lita-html5.pdf
20/32
Forms
field types - email, date validation regular expressions still need to watch for security/hacks
-
8/14/2019 lita-html5.pdf
21/32
Markup
-
8/14/2019 lita-html5.pdf
22/32
Data URIs
Embed small files inline in documents
data:[][;charset=]
[;base64],
-
8/14/2019 lita-html5.pdf
23/32
HTML5 right now? IE?
-
8/14/2019 lita-html5.pdf
24/32
Demos & Examples
It's your call....
-
8/14/2019 lita-html5.pdf
25/32
catalog.douglascountylibraries.org/EcontentRecord/19339/Viewer?item=3439864
-
8/14/2019 lita-html5.pdf
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
-
8/14/2019 lita-html5.pdf
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/
-
8/14/2019 lita-html5.pdf
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/
-
8/14/2019 lita-html5.pdf
29/32
Resources (cont.)
HTML5 Boilerplateohttp://html5boilerplate.com/
HTML5rockso
html5rocks.com
HTML5 Please
o html5please.com/#use
-
8/14/2019 lita-html5.pdf
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
-
8/14/2019 lita-html5.pdf
31/32
Questions?
twitter.com/jaclarkwww.lib.montana.edu/~jason/talks.php
-
8/14/2019 lita-html5.pdf
32/32
http://www.gesteves.com/experiments/starwars.html
top related