1 / 57

HTML5

HTML5. Konrad Pawlak. s zybysium.studentlive.pl. Agenda. The „WOW” Co to? Czy HTML5 istnieje? Demonstracyja Jak odpalić rakietę Ficzery HTML5 Podsumowanie. www.beautyoftheweb.com. l e demo. Co to?. HTML5. Device Access. Offline Storage. Semantics. 3D Effects / Graphics.

tamera
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. Konrad Pawlak szybysium.studentlive.pl

  3. Agenda The „WOW” Co to? Czy HTML5 istnieje? Demonstracyja Jak odpalić rakietę Ficzery HTML5 Podsumowanie

  4. www.beautyoftheweb.com le demo

  5. Co to? HTML5

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

  7. W3C HTML grupa robocza • 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

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

  9. HTML5 w IE9 Akceleracja sprzętowa

  10. IE6 countdown… 3... 2… 1…

  11. Czy HTML5 istnieje?

  12. Krótko o historii… W3C (1 października 1994 roku) zrzesza ponad 400 organizacji. Ostatni zatwierdzony standard HTML4 - 1998 rok. Mega-poprawny XHTML 2

  13. Krótko o historii…

  14. Jak oni pracują?

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

  16. Czyli jak zacząć pisać Jak odpalić rakietę?

  17. Narzędzia

  18. Narzędzia + SP1 SP1

  19. Narzędzia

  20. Hjuston do rakiety – ‚odpalamy’ Demonstracyja

  21. Ficzery HTML5

  22. <!DOCTYPE HTML>

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

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

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

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

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

  28. <video> / <audio> HTML5

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

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

  31. HTML5 <video> Kompatybilność

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

  33. HTML5 <audio> Kompatybilność

  34. <canvas> HTML5

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

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

  37. <canvas> DEMO

  38. <svg> HTML5

  39. HTML5 <svg> - scenariusze Wektorowa grafika 2D -> XML Wysokiej jakości odwzorowanie w dokumentach Grafiki / Wykresy / Mapy Multimedia i Grafika (CSS/Plakaty/Animacje JS) Gry

  40. Narzędzia SVG Microsoft Visio Adobe Ilustrator Inkspace

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

  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. <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. CSS 2.1 CSS 3 • screen oraz print • Brak responsywności • Nadmiarowość pracy • Wsparcie dla mobile to rzadkość • CSS Media Queries

  46. WOFF Web Open Font Format Kompatybilność wstecz (Embedded OpenType – EOT)

  47. Skąd naumieć się HTML5, JavaScript i CSS3 Zasoby

  48. Kursy – HTML5 • http://channel9.msdn.com/Series/Darmowy-kurs-HTML5 • http://www.w3schools.com/html5/default.asp

More Related