Geoff Gallaway's March 2010 HTML5 Presentation
21
HTML5, CSS3 and The Future of Web Technologies Or: Internet Explorer Sucks
description
Geoff Gallway's great HTML5 presentation given during the March 2010 St Louis Perl Mongers meeting.
Transcript of Geoff Gallaway's March 2010 HTML5 Presentation
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
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support](https://static.fdocuments.net/doc/165x107/5a903bb67f8b9a4a268e1ade/ms-html5-microsoft-edge-internet-explorer-html5-ms-html5pdfmicrosoft.jpg)
