Html5 - short intro
Upcoming SlideShare
Loading in...5
×
 

Html5 - short intro

on

  • 2,333 views

 

Statistics

Views

Total Views
2,333
Views on SlideShare
2,324
Embed Views
9

Actions

Likes
1
Downloads
16
Comments
0

3 Embeds 9

http://cssis.tomboone.com 4
http://cssis.org 4
http://cssis.local 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5 - short intro Html5 - short intro Presentation Transcript

    • HTML5Jason EisemanLibrarian for Emerging TechnologiesYale Law School
    • 1990
    • <title>Hypertext Links</title><h1>Links and Anchors</h1>A link is the connection between one piece of<a href=WhatIs.html>hypertext</a> and another. 1990
    • “Support Existing Content”HTML5 Design Principles:http://www.w3.org/TR/html-design-principles
    • World Wide Web Consortium
    • W3C HTML 4.01 - 1999 XHTML 1.0 - 2002 XHTML 1.1 - 2010http://www.w3.org/
    • Web Hypertext ApplicationTechnology Working Group
    • WHATWG Web Forms 2.0 - 2004http://www.whatwg.org
    • WHATWG & W3C HTML5 - 2008 - working draft 2012? - candidate 2022? - standardhttp://www.w3.org
    • So why worry about HTML5 now?2022?
    • Internet Firefox Chrome Explorer 9 Safari Opera all support HTML5 todayToday?
    • Today?
    • Today?
    • semantics &page structure
    • <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML: XHTML 1.0 Strict//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-strict.dtd">HTML5: <!DOCTYPE html>DOCTYPE
    • XHTML: <script type="text/javascript" src="javascript.js"></script>HTML5: <script src="javascript.js"></script>Scripts
    • XHTML: <link type="text/css" rel="stylesheet" media="all" href="style.css" />HTML5: <link rel="stylesheet" href="style.css" />Stylesheets
    • <div id= "header"> <div id= "nav"> <div id= "section"> <div id= "sidebar"> <div id= "footer">Semantics & Page Structure
    • <header> <nav> <article> <section> <aside> <footer>Semantics & Page Structure
    • MicroformatsSemantics & Page Structure
    • forms
    • ValidationForms
    • Required FieldsForms
    • PlaceholderForms
    • Forms
    • DatalistForms
    • Forms
    • Date PickersForms
    • Forms
    • <input name="email" type="email" /><input name="url" type="url" />Forms
    • @Forms
    • / .comForms
    • http://jasoneiseman.com/aall11/forms.htmlForms
    • rich internet applications
    • canvas
    • a drawing surfaceCanvas
    • <canvas id="theCanvas" width="800" height="800"></canvas>Canvas
    • <script type="application/javascript">function draw() {var canvas=document.getElementById(theCanvas);var context=canvas.getContext(2d);context.strokeRect(10, 10, 600, 200);context.font="bold 40px sans-serif";Canvas
    • <body onload="draw()"> <canvas id="theCanvas" width="800" height="800"> <img src="carrells.gif" /> </canvas></body>Canvas
    • Canvas
    • http://jasoneiseman.com/aall11/canvas.htmlCanvas
    • Canvas - paper.js - available at: http://paperjs.org
    • video
    • browser-native videoVideo
    • <video src="movie.mp4" controls width="360"height="240" poster= "placeholder.jpg "></video>Video
    • X Ogg WebM/VP8 Firefox X Ogg WebM/VP8 Chrome H.264 X XInternet Explorer 9 H.264 X X SafariVideo
    • http://jasoneiseman.com/aall11/video.htmlVideo
    • Video
    • Video
    • <video controls preload width="270" height="186" poster ="poster.png"> <source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/mp4"> <source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/ogg"><object width="270" height="186"> <param name="movie" value="http://jasoneiseman.com/aall11/chain.swf"> <embed src="http://jasoneiseman.com/aall11/chain.swf" width="270"height="186"></object></video>Video
    • <video width="270" height="186" controls preload poster ="poster.png">Video
    • <source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/mp4"><source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/ogg">Video
    • <object width="270" height="186"> <param name="movie" value="http://jasoneiseman.com/aall11/chain.swf"> <embed src="http://jasoneiseman.com/aall11/chain.swf" width="270"height="186"></object>Video
    • Video
    • Video
    • <head> <script type="text/javascript" src="http://html5.kaltura.org/js" ></script></head><body> <video kentryid="0_swup5zao" kwidgetid="_243342"></video></body>Video
    • Video
    • Dive Into HTML5 http://diveintohtml5.org/video.htmlVideo
    • audio
    • browser-native audioAudio
    • <audio src="audio.mp3" controls></audio>Audio
    • <audio controls><source src="audio.mp3" type= "audio/mpeg"><source src="audio.ogg" type= "audio/ogg"></audio>Audio
    • http://jasoneiseman.com/aall11/audio.html Audio
    • advanced functionality
    • geolocationAdvanced Functionality
    • local storageAdvanced Functionality
    • offline web applicationsAdvanced Functionality
    • browser historyAdvanced Functionality
    • further reading
    • http://www.abookapart.com/products/html5-for-web-designers
    • http://diveintohtml5.org/
    • http://www.html5rocks.com/en/
    • http://jasoneiseman.com/aall11.zip jasoneiseman@gmail.comFurther Reading