1 / 66

HTML5

HTML5. Agenda. The „WOW” Jak to powstaje? HTML5 features Podsumowanie Q&A. www.beautyoftheweb.com. DEMO. Co i jak?. HTML5. Device Access. Offline Storage. Semantics. 3D Effects / Graphics. Connectivity. Performance. CSS3. Multimedia. Jak oni pracują?.

tale
Download Presentation

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

  2. Agenda The „WOW” Jak to powstaje? HTML5 features Podsumowanie 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 CSS3 Grid CSS3 Flexbox CSS3 Gradient CSS3 Multi-Column ECMAScript 5 StrictMode

  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>

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

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

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

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

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

  23. Tagi semantyczne DEMO

  24. <video> / <audio> HTML5

  25. HTML5 <video> / <audio> <video id="video" controlsautoplay> <sourcesrc="sample.mp4" type="video/mp4"/> </video> <audio id="audio" src="sample.mp3" controls></audio>

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

  27. HTML5 <video> Kompatybilność

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

  29. HTML5 <audio> Kompatybilność

  30. <video> / <audio> DEMO

  31. <canvas> HTML5

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

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

  34. <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

  35. <canvas> DEMO

  36. <svg> HTML5

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

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

  39. Narzędzia SVG Microsoft Visio Adobe Ilustrator Inkspace

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

  41. <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>

  42. <svg> DEMO

  43. <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ść

  44. CSS3

  45. 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

  46. 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

  47. 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

  48. CSS 2.1 CSS 3 • screen oraz print • Brak responsywności • Nadmiarowośc pracy • Wsparcie dla mobile to rzadkość • CSS Media Queries

More Related