Geoff Gallaway's March 2010 HTML5 Presentation
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Geoff Gallaway's March 2010 HTML5 Presentation

on

  • 3,873 views

Geoff Gallway's great HTML5 presentation given during the March 2010 St Louis Perl Mongers meeting.

Geoff Gallway's great HTML5 presentation given during the March 2010 St Louis Perl Mongers meeting.

Statistics

Views

Total Views
3,873
Views on SlideShare
3,849
Embed Views
24

Actions

Likes
4
Downloads
107
Comments
1

3 Embeds 24

http://stlouis.pm.org 22
http://www.slideshare.net 1
http://feeds2.feedburner.com 1

Accessibility

Categories

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

Geoff Gallaway's March 2010 HTML5 Presentation Presentation Transcript

  • 1. HTML5, CSS3 and The Future of Web Technologies Or: Internet Explorer Sucks
  • 2. Become a fan
  • 3. HTML History HTML 1.0 HTML5 HTML 2.0 CSS 3 ? HTML 3.2 HTML 4.0 CSS 2 HTML 4.01 1993 1995 1997 1998 1999 2010
  • 4. WHATWG • Web Hypertext Application Technology Working Group • Apple, Mozilla, Opera, Google • Started in 2004
  • 5. The Browser Landscape
  • 6. WebKit Browsers
  • 7. Standards Support IE (8) Firefox WebKit Enhanced JS No Yes Yes Speed HTML5 tags No* Yes Yes Geolocation API No Yes Yes Client-Side No Yes Yes Storage Web Fonts Yes Yes Yes CSS Properties No Yesish OMG!
  • 8. Faster Javascript Nitro JavaScript Engine - WebKit/Safari TraceMonkey and Tamarin - Firefox/Mozilla V8 JavaScript Engine - Google Chrome
  • 9. 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
  • 10. CSS3 Web Fonts @font-face { font-family: ProFontWindows; src: url(“ProFontWindows.ttf”); } .myFontClass { font-family: ProFontWindows; }
  • 11. HTML5 HTML 4 HTML5 Structure <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// www.w3.org/TR/html4/ strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!DOCTYPE HTML> <META charset=”utf-8”>
  • 12. HTML5 Geolocation navigator.geolocation.getCurrentPosition(⨍);
  • 13. 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>
  • 14. HTML5 Local Storage
  • 15. 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
  • 16. MOAR Comic Sans) (Haha, I used STUFS Drag-n-Drop WebGL History Native Video/Audio Management Undo CSS3 Datalists Support Selectors Worker New 3D CSS Cross- Threads <FORM> Transforms Domain Healthcare Controls High-speed Rail Scripting Reform
  • 17. What’s next • HTML5: Draft. Final in 2012? • CSS3:Various modules further along. • Play around now.
  • 18. 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/
  • 19. One more thing... IE9 • Audio,Video support (H.264, MP3) • Improved JavaScript engine • CSS3, HTML5 • SVG • GPU Acceleration • No XP support