1 / 72

HTML5

HTML5. Tomasz Wiśniewski Developer Evangelist Microsoft Sp. z o.o. Agenda. The „WOW” Jak to powstaje? HTML5 features Q&A. www.beautyoftheweb.com. DEMO. Co i jak?. HTML5. Device Access. Offline Storage. Semantics. 3D Effects / Graphics. Connectivity. Performance. CSS3.

riona
Télécharger la présentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Tomasz Wiśniewski Developer Evangelist Microsoft Sp. z o.o.

  2. Agenda The „WOW” Jak to powstaje? HTML5 features Q&A

  3. www.beautyoftheweb.com DEMO

  4. Co i jak? HTML5

  5. Device Access Offline Storage Semantics 3D Effects /Graphics Connectivity Performance CSS3 Multimedia

  6. Jak oni pracują?

  7. W3C HTML WorkingGroup • Chair • Sam Ruby (IBM) • Paul Cotton (Microsoft) • Maciej Stachowiak (Apple) • 40 organizacji członkowskich • 411 uczestników • 280 zaproszonych ekspertów • 16 osób z zespołów Microsoft • 9 publikacji • HTML5 • HTML Canvas 2d Context • HTML: The Markup • HTML5 diffs from HTML4 • PolyglotMarkup Rekomendacje są za darmo

  8. Stan na: 13-go lipca 2011 CSS GENERATED CONTENT FOR PAGED MEDIA PROGRAMMABLE HTTP CACHING & SERVING CSS CASCADING & INHERITANCE CSS BACKGROUNDS & BORDERS DOM L2 TRAVERSAL AND RANGE UNIFORM MESSAGING POLICY CSS MULTI-COLUMN LAYOUT DOM L3 VIEWS & FOMUTING DOM L3 ABSTRACT SCHEMAS CSS 2D TRANSFORMATIONS CSS 3D TRANSFORMATOINS CSS BASIC USER INTERFACE CSS FLEXIBLE BOX LAYOUT PAINTING, FILLING, COLOR HTML5 DIFF FROM HTML4 DOCUMENT STRUCTURE CSS GRID POSITIONING CSS TEMPLATE LAYOUT CSS BASIC BOX MODEL DOM L3 LOAD & SAVE CANVAS 2D CONTEXT XMLHTTPREQUEST L2 SERVER-SENT EVENTS WEB SQL DATABASDE CSS WRITING MODES ELEMENT TRAVERSAL CSS VALUES & UNITS DOM L3 VALIDATION CSS SNAPSHOT 2007 CSS MEDIA QUERIES TEXT ALTERNATIVES POLYGLOT MARKUP CSS IMAGE VALUES CSS PRINT PROFILE XMLHTTPREQUEST PROGRESS EVENTS CSS PAGED MEDIA CSS TRANSITIONS CSS ANIMATIONS CSS NAMESPACES WEB SOCKETS API SELECTORS API L2 ECMASCRIPT 5 WEB DOM CORE DOM L3 EVENTS HTML5 MARKUP DOM L2 EVENTS SELECTORS API DOM L3 XPATH WEB STORAGE WEB WORKERS DOM L2 VIEWS DOM L2 HTML DOM L2 STYLE CSS LINE GRID BASIC SHAPES TRANSFORMS CSS SCOPING DOM L3 CORE DOM L2 CORE HTML + RDFA CSS SPEECH MICRODATA GRADIENTS CSS COLOR CSS FONTS SCRIPTING INDEXED DB CSS RUBY CSS TEXT STYLING WEB IDL FILE API DOM L1 GEO-LOCATION FILTERS HTML5 FONTS PATHS CORS TEXT SMIL ECMA Geolocation HTML CSS SVG Web Apps CandidateRecommendation First Published Working Draft Recommendation Working Draft Last Call

  9. Podejście Microsoft do HTML5 IE9 IE Platform Previews HTML5 Labs Gotowe witrynyHTML5 Standardy „work in progress” Wschodzącestandardy beautyoftheweb.com ietestdrive.com html5labs.com

  10. HTML5 w IE9 Akceleracja sprzętowa

  11. HTML w IE10 Platform Preview

  12. < HTML5 LABS > HTML5 IndexedDB HTML5 Web Sockets HTML5 File API HTML5 Media Capture API

  13. IE6 countdown… 3... 2… 1…

  14. HTML5 features

  15. Narzędzia + SP1 SP1

  16. + + = HTML CSS 3 JavaScript • Markup • Forms • ARIA • Microdata • Canvas • Video • Inne… • Geolocation • Web Storage • Web Sockets • FileAPI • Media Capture • IndexedDB • Inne… • Selectors • Media Queries • Fonts • Transforms • Transitions • Animation • Inne…

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

  18. <!DOCTYPE HTML>

  19. Składnia <imgsrc="sample.jpg" /> = <imgsrc="sample.jpg"> <imgsrc="sample.jpg"> = <imgsrc=sample.jpg> <IMG SRC=sample.jpg> = <imgsrc=sample.jpg> = <iMgSrC=sample.jpg>

  20. HTML5 – tagi semantyczne <div id="logo" class="header"/> <div id="menu" class="navigation"/> <div id="content"... <div… <div… <div id="footer" class="footer"/>

  21. 10 najpopularniejszych ID Źródło:http://devfiles.myopera.com/articles/572/idlist-url.htm

  22. 10 najpopularniejszych nazw class Źródło:http://devfiles.myopera.com/articles/572/classlist-url.htm

  23. HTML5 – tagi semantyczne HEADER NAV ARTICLE ASIDE SECTION FOOTER

  24. Tagi semantyczne DEMO

  25. <video> / <audio> HTML5

  26. HTML5 <video> / <audio> <video id="video" controlsautoplay> <sourcesrc="sample.mp4" type="video/mp4"/> </video> <objectheight="380" type="application/x-silverlight-2" width="640"> <param name="source" value="Resources/player.xap"> <param name="initParams„value="deferredLoad=true,duration=0, m=http://localhost:64689/02.%20Video/Videos/video.mp4, autostart=false,autohide=true,showembed=true,postid=0"> <param name="background" value="#00FFFFFF"> </object> <audio id="audio" src="sample.mp3" controls></audio>

  27. HTML5 <video> Wiele formatów Łączenie z innymi elementami Akceleracja sprzętowa (dekodowanie GPU)

  28. HTML5 <video> Kompatybilność

  29. HTML5 <audio> Wsparcie standardów rynkowych • MP3 • ACC API Atrybuty • src • autoplay • controls • preload

  30. HTML5 <audio> Kompatybilność

  31. <video> / <audio> DEMO

  32. <canvas> HTML5

  33. HTML5 <canvas> Rysowanie API JavaScript i podstawowe elementy Tryb „bezpośredni” Czarna skrzynka

  34. HTML5 <canvas> - scenariusze Manipulacja pikselami Dane rzeczywiste Zamiana pikseli Gry

  35. <canvas> <canvas id="myCanvas" width="200" height="200"> Yourbrowserdoesn’tsupportCanvas, sorry. </canvas> <scripttype="text/javascript"> varexample = document.getElementById("myCanvas"); varcontext = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script> Brak wsparcia

  36. Narzędzia CANVAS AI->Canvashttp://visitmix.com/labs/ai2canvas/

  37. <canvas> DEMO

  38. <svg> HTML5

  39. HTML5 <svg> Wektorowa grafika 2D -> XML „Trwały” tryb Dostęp poprzez DOM Stylowanie za pomocą CSS i ARIA Inline/plik

  40. HTML5 <svg> - scenariusze Wysokiej jakości odwzorowanie w dokumentach Grafiki / Wykresy / Mapy Multimedia i Grafika (CSS/Plakaty/Animacje JS) Gry SEO i ARIA

  41. Narzędzia SVG Microsoft Visio Adobe Ilustrator Inkspace

  42. <svg> <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg>

  43. <svg> DEMO

  44. <canvas> vs <svg> Skomplikowane sceny, Obliczenia matematyczne w czasie rzeczywistym Obrazy statyczne <canvas> <svg> Manipulacja video Wysokiej jakości dokumenty (wyświetlanie / drukowanie) Wysoka wydajność

  45. CSS3

  46. CSS3 IE9 Roundedcorners via the border-radius property CSS3 background and borderfeatures The opacityproperty RGBA, HSL, and HSLA colormodels CSS3 fontsproperties and new web fontformats CSS3 media queries CSS3 namespaces CSS3 values and units CSS3 selectors CSS3 2D transforms

  47. CSS3 IE9 + Developers Roundedcorners via the border-radius property CSS3 background and borderfeatures The opacityproperty RGBA, HSL, and HSLA colormodels CSS3 fontsproperties and new web fontformats CSS3 media queries CSS3 namespaces CSS3 values and units CSS3 selectors CSS3 2D transforms

  48. CSS3 IE9 + Designers Roundedcorners via the border-radius property CSS3 background and borderfeatures The opacityproperty RGBA, HSL, and HSLA colormodels CSS3 fontsproperties and new web fontformats CSS3 media queries CSS3 namespaces CSS3 values and units CSS3 selectors CSS3 2D transforms

More Related