IT IS AN EDUCATIONAL CENTER , WHICH IS ESTABLISHED ON 2015 .
Thursday, 31 August 2017
Building Web Applications with
HTML5, CSS3, and Javascript:
An Introduction to HTML5
Jason Clark
Head of Digital Access & Web Services
Montana State University Library
pinboard.in #tag
pinboard.in/u:jasonclark/t:lita-html5/
twitter #hashtag
#litahtml5
Overview
• Revolution or Evolution?
• New Features and Functions
• Demos
• Getting Started
• Questions
Hello, My Name is…
• Background, Position
• HTML, Programming experience?
• Experience with CSS3?
• What do you want to learn most?
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
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html
HTML5 spec from WHATWG
“The World Wide Web's markup language has always been
HTML. HTML was primarily designed as a language for
semantically describing scientific documents, although its
general design and adaptations over the years has enabled
it to be used to describe a number of other types of
documents.
The main area that has not been adequately addressed by
HTML is a vague subject referred to as Web Applications.
This specification attempts to rectify this, while at the same
time updating the HTML specifications to address issues
raised in the past few years.”
www.whatwg.org/specs/web-apps/2005-09-01/#introduction
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/beta/bookme/
• Learn more by viewing source
OR
• Downloading from jasonclark.info or github.com/
jasonclark
HTML5 as "umbrella" Term
• Changes to HTML spec
• Additions to CSS spec
• New Javascript APIs
Evolution into HTML5
Reacting to how the web is used
A Minimal HTML5 Document
title
Semantic & Functional Markup
• header
• footer
• nav
• main
• section
• article
• aside
• figure
• figcaption
• details
• mark
• menu
• datalist
• contenteditable
attribute
• data-* attributes
Microdata – RDFa Lite
RDFa markup for machine-readable HTML
• vocab
• typeof
• property
Microdata RDFa Lite - Book
Title
A River Runs Through It
and Other Stories
Author
Norman Maclean
Publication date
October 1, 2001
ID
0226500667
Microdata 1.0
Markup for machine-readable HTML
• itemscope
• itemtype
• itemprop
Microdata 1.0 - Book
Title
A River Runs Through It
and Other Stories
Author
Norman Maclean
Publication date
October 1,
2001
ID
0226500667
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=license
rel=prefetch
rel=search
rel=sidebar
rel=tag
...
Native Video and Audio
• simple markup
• no plugin
• limited vid formats: .ogv, .mp4, webm
Canvas
Draw into HTML elements via scripting
(usually JavaScript)
draw graphs, make photo compositions, create animations or even
do real-time video processing
Details
Widget functionality to obtain additional
information or controls
• Create collapsible navigation menus, FAQ widgets, basic toggle
functions, etc.
Question [toggle +/-]