View
3.049
Download
0
Category
Tags:
Preview:
DESCRIPTION
Geoff Gallway's great HTML5 presentation given during the March 2010 St Louis Perl Mongers meeting.
Citation preview
HTML5, CSS3 and The Future of
Web TechnologiesOr: Internet Explorer Sucks
Become a fan
HTML History
1993 20101995 1997 1999
HTML 1.0
HTML 3.2
HTML 2.0
HTML 4.0
HTML5
CSS 2 ?HTML 4.011998
CSS 3
WHATWG
• Web Hypertext Application Technology Working Group
• Apple, Mozilla, Opera, Google
• Started in 2004
The Browser Landscape
WebKit Browsers
Standards Support
IE (8) Firefox WebKitEnhanced JS
SpeedNo Yes Yes
HTML5 tags No* Yes Yes
Geolocation API No Yes Yes
Client-Side Storage
No Yes Yes
Web Fonts Yes Yes Yes
CSS Properties No Yesish OMG!
Faster Javascript
Nitro JavaScript Engine - WebKit/Safari
TraceMonkey and Tamarin - Firefox/Mozilla
V8 JavaScript Engine - Google Chrome
Native Audio + Video<video src=”movie.mp4” controls=”controls”/><audio src=”track.mp3” controls=”controls”/>
audio|video.loop.height|width.autoplay.autobuffer.style.opacity.duration.currentTime
CSS3 Web Fonts
@font-face { font-family: ProFontWindows; src: url(“ProFontWindows.ttf”);}.myFontClass { font-family: ProFontWindows;}
HTML5 StructureH
TM
L 4
HT
ML
5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META charset=”utf-8”>
HTML5 Geolocationnavigator.geolocation.getCurrentPosition(⨍);
HTML5 <canvas>
<canvas id=”example” height=”200” width=”200”>Your browser does not support HTML5 canvas.</canvas>
<script language=”javascript”>var example = document.getElementById('example');var context = example.getContext('2d');context.fillStyle = "rgb(255,0,0)";context.fillRect(30, 30, 50, 50);</script>
HTML5 Local Storage
CSS3 Properties
• border-radius: 5px
• box-shadow: 5px 5px 10px rgba(200,200,200, 0.9)
• gradients:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(220, 220, 220, 0.8)), to(rgba(255,255,255,0.8)));
• animations/transforms
• multiple backgrounds
MOAR STUFS
CSS3 Selectors
Drag-n-DropHistory
Management
New <FORM> Controls
Worker Threads
DatalistsUndo Support
WebGL
Cross-Domain
Scripting
3D CSS Transforms
High-speed Rail
Healthcare Reform
Native Video/Audio
(Haha, I used Comic Sans)
What’s next
• HTML5: Draft. Final in 2012?
• CSS3: Various modules further along.
• Play around now.
Links
http://youtube.com/html5
http://www.chromeexperiments.com/
http://blog.whatwg.org/
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://www.w3.org/Style/CSS/current-work
http://www.css3.info/
http://diveintohtml5.org/
One more thing... IE9
• Audio, Video support (H.264, MP3)
• Improved JavaScript engine
• CSS3, HTML5
• SVG
• GPU Acceleration
• No XP support
Recommended