Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FOWD NYC 2012 - HTML5

Avatar for Claire Chandler Claire Chandler
October 22, 2012
Technology
1
240

FOWD NYC 2012 - HTML5

Easy ways to implement and get started using HTML5 and integrating CSS3.

Avatar for Claire Chandler

Claire Chandler

October 22, 2012
Tweet

Other Decks in Technology

See All in Technology
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
11
77k
更高效率低成本的 Observability 2.0 時代即將來臨 (Observability 2.0 Why you need know) - DevOpsDays Taiwan 2025
Avatar for Scott Liao shazi7804
0
370
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
Avatar for hogelog hogelog
3
1.2k
「技術負債にならない・間違えない」 権限管理の設計と実装
Avatar for naro143 naro143
30
9k
サプライチェーン攻撃に学ぶModuleの仕組みと セキュリティ対策
Avatar for kuro kuro_kurorrr
3
650
日経が挑戦するデータ民主化 ~ セルフサービス基盤がもたらす利点と苦悩~/nikkei-tech-talk-37
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
210
SOC2取得の全体像
Avatar for shonansurvivors shonansurvivors
1
200
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
20k
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
Avatar for Yoichiro Shimizu budougumi0617
4
790
Deep Research と NotebookLM を使い倒す！レガシーリプレイスの技術選定と学習コスト削減術
Avatar for tet0-h tet0h
0
2.6k
VCC 2025 Write-up
Avatar for bata_24 bata_24
0
110
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
Avatar for Satoru Ishikawa ishikawa_satoru
1
120

Featured

See All Featured
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.7k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.7k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
950

Transcript

  1. HTML5 What’s New? What’s Next? FOWD - October 22, 2012

    - Claire Chandler Tuesday, October 23, 12

  2. <!DOCTYPE html> Tuesday, October 23, 12

  3. <!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd">

    Tuesday, October 23, 12

  4. Semantic Code Tuesday, October 23, 12

  5. <article> defines an article <canvas> Used to draw graphics, on

    the fly, via scripting (usually JavaScript) <details> an additional detailed section that can be shown or hidden <footer> Defines a footer for a document or section <header> Defines a header for a document or section <nav> Defines navigation links Tuesday, October 23, 12

  6. <figure> specifies self contained content such as illustrations, diagrams, photos,

    etc. <hgroup> a new tag that groups <h1> thru <h6> sections on a page <source> identifies source of audio or video <time> HTML5 has a time element This enables you to annotate a human-readable date with an unambiguous machine-readable one. <video> defines video or movie <audio> defines sound content Tuesday, October 23, 12

  7. basic HTML5 page <body> <div id="pageContainer"> <header id="pageHeader"></header> <div id="contentContainer"

    class="clearfix"> <nav id="pageNav"></nav> <section id="pageSection"> <header class="sectionHeader"></header> <article class="sectionArticle"></article> <footer class="sectionFooter"></footer> </section> <aside id="pageAside"></aside> </div> <footer id="pageFooter"></footer> </div> </body> Tuesday, October 23, 12

  8. Tuesday, October 23, 12

  9. obsolete elements <center> <font> <frameset> <frame> <noframes> Tuesday, October 23,

    12

  10. good resources for guide to supported elements w3.org Tuesday, October

    23, 12

  11. Quick Tricks & Demos Tuesday, October 23, 12

  12. audio & video <video width="320" height="240" controls> <source src="clouds.mp4" type="video/mp4">

    Your browser does not support the video tag. </video> <audio controls> <source src="goldfish-fortknox.m4a" type="audio/mpeg"> Your browser does not support the audio element. </audio> http://claireeyedesign.com/FOWD/presentation-pieces/ video.html Tuesday, October 23, 12

  13. canvas http://www.w3schools.com/html/tryit.asp filename=tryhtml5_canvas_empty http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/ Cheatsheet http://www.nihilogic.dk/labs/canvas_sheet/ HTML5_Canvas_Cheat_Sheet.pdf Tuesday, October 23,

    12

  14. SVG (scalable vector graphics) http://www.w3schools.com/html/tryit.asp? filename=tryhtml5_svg_ex Tuesday, October 23, 12

  15. canvas vs SVG Tuesday, October 23, 12

  16. placeholder text <form action="demo_form.asp"> <input type="text" name="fname" placeholder="First name" /><br

    /> <input type="text" name="lname" placeholder="Last name" /><br /> <input type="submit" value="Submit" /> </form> http://www.w3schools.com/html5/tryit.asp? filename=tryhtml5_input_placeholder Tuesday, October 23, 12

  17. required text attribute <form action="demo_form.asp"> Username: <input type="text" name="usrname" required="required"

    /> <input type="submit" /> </form> Tuesday, October 23, 12

  18. editable content http://www.w3schools.com/html5/tryit.asp? filename=tryhtml5_global_contenteditable http://html5demos.com/contenteditable Tuesday, October 23, 12

  19. geolocation getCurrentPosition () Tuesday, October 23, 12

  20. local storage localStorage.lastname="Smith"; document.getElementById("result").innerHTML ="Last name: " + localStorage.lastname; html5demos.com/storage-events

    Tuesday, October 23, 12

  21. drag and drop <img draggable="true"> http://html5demos.com/drag http://claireeyedesign.com/FOWD/presentation-pieces/ drag-drop.html Tuesday, October

    23, 12

  22. caniuse.com html5readiness.com www.html5rocks.com/en/resources html5test.com browser support Tuesday, October 23, 12

  23. CSS3 Integration Tuesday, October 23, 12

  24. box shadows and filter:dropshadow http://demosthenes.info/blog/598/boxshadow- property-vs-dropshadow-filter-a-complete- comparison Tuesday, October 23,

    12

  25. opacity img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier

    */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } http://www.claireeyedesign.com/FOWD/presentation-pieces/photo- opacity.html Tuesday, October 23, 12

  26. text-shadows text shadow h1 { text-shadow: 5px 5px 5px #FF803D;

    } http://www.claireeyedesign.com/FOWD/presentation-pieces/photo- opacity.html Tuesday, October 23, 12

  27. What’s Next with HTML5? Tuesday, October 23, 12

  28. browser form validation Tuesday, October 23, 12

  29. new form input types color date datetime datetime-local email month

    number range search tel time url week http://claireeyedesign.com/FOWD/presentation-pieces/ form-elements.html Tuesday, October 23, 12

  30. full-screen http://html5-demos.appspot.com/static/fullscreen.html Tuesday, October 23, 12

  31. filters brightness blur hue saturation grayscale http://www.inserthtml.com/2012/06/css-filters/ Tuesday, October 23,

    12

  32. animations http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/ Tuesday, October 23, 12

  33. grids Tuesday, October 23, 12