dive into html5 - marcin zajkowski @ snt, microsoft
DESCRIPTION
TRANSCRIPT
Stażysta Microsoft Polska
• Agenda
HTML CSS 3 JavaScript
• Znaczniki
• Formy
• ARIA
• Microdata
• Canvas
• Video
• Inne…
• Selektory
• Media Queries
• Czcionki
• Transformacje
• Przejścia
• Animacje
• Inne…
• Geolokalizacja
• Web Storage
• Web Sockets
• FileAPI
• Media Capture
• IndexedDB
• Inne…
Doctype
Składnia
<img src="obrazek.jpg" /> = <img src="obrazek.jpg">
<img src="obrazek.jpg”> = <img src=obrazek.jpg>
<IMG SRC=obrazek.jpg> = <img src=obrazek.jpg> = <iMg SrC=obrazek.jpg>
Nowe znaczniki • article
• aside
• audio
• bdo
• canvas
• command
• datalist
• details
• embed
• figcaption
• figure
• footer
• header
• hgroup
• keygen
• mark
• meter
• nav
• output
• progress
• rp
• rt
• ruby
• section
• source
• summary
• time
• video
• wbr
Struktura strony html
<div id="logo" class="header"/>
<div id="menu" class="navigation"/>
<div id="content"...
<div…
<div id="footer" class="footer"/>
<div…
0 50000 100000 150000 200000
copyright
header
style2
title
content
text
msonormal
style1
menu
footer
<div class=””>
0 100000 200000 300000
autonumber1
layer1
menu
table1
main
container
logo
header
content
footer
<div id=””>
TOP10
HEADER
NAV
ARTICLE
ASIDE
FOOTER
SECTION
HTML5 – tagi semantyczne
CSS3
• Zaokrąglone rogi dzięki właściwości ’border-radius’
• Nowe funkcje teł i obramowań
• Właściwość ’opacity’ - nieprzezroczystość
• Modele kolorów RGBA, HSL oraz HSLA
• Web’owe formaty czcionek
• CSS3 media queries
• Przestrzenie nazw CSS3
• Nowe wartości i jednostki
• Selektory CSS3
• Transformacje 2D
Grafika - SVG Wektorowa grafika 2D -> XML
Skalowalność
Rozwijana od 1999 r. przez W3C
Dostęp poprzez DOM
Stylowanie za pomocą CSS i ARIA
<svg> </svg>
<embed id="ksztaltyzpliku" src="plik.svg"
type="image/svg+xml">
DEMO SVG
Grafika - <canvas> Rysowanie / wyświetlanie obrazów
API Javascript
Tryb „bezpośredni” – akceleracja
Manipulacja pixelami
Rzeczywiste dane
Zamiana pixeli
GRY!
<canvas id="mojaKanwa" width="200" height="200"> Twoja przeglądarka nie wspiera obiektów Canvas. </canvas> <script type="text/javascript"> var example = document.getElementById("mojaKanwa"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>
Brak wsparcia
<canvas> - przykład
DEMO <canvas>
<canvas> <svg>
Wysoka wydajność
Manipulacja video
Skomplikowane sceny, Obliczenia matematyczne
w czasie rzeczywistym Obrazy statyczne
Wysokiej jakości dokumenty
(wyświetlanie / drukowanie)
<canvas> VS <svg>
HTML5 <video> Obsługa wielu formatów
Możliwość łączenia z innymi elementami strony
Akceleracja sprzętowa (dekodowanie GPU)
<video id="video" controls autoplay> <source src="bbb.mp4" type="video/mp4"/> </video>
HTML5 <video>
9 6.0.1 13.0.782.218 11.50 5.1
H.264 TAK NIE* TAK* NIE TAK
VP8 (WebM) TAK TAK TAK TAK NIE*
Kompatybilność
HTML5 <audio> Wsparcie standardów rynkowych
– MP3
– ACC
API
Atrybuty
– src
– autoplay
– controls
– preload
<audio id="audio" src="nuta.mp3" controls> </audio>
HTML5 <audio>
9 5 12 11.50 5
MP3 TAK NIE TAK NIE NIE
ACC TAK NIE TAK NIE NIE
WAV NIE TAK TAK TAK TAK
Kompatybilność
Narzędzia developerskie
SP1 +
SP1
Co dalej z HTML5? „C# developers – learn JavaScript!”
Windows 8 (Metro UI)
Podsumowanie
HTML5 = HTML + CSS3 + JavaScript (* Razor)
Uproszczenia, standaryzacja, nowości
Obsługa multimediów i grafiki na najwyższym
poziomie
DreamSpark – darmowe narzędzia do tworzenia
własnych aplikacji
High School Tech Hero – „teraz Wy!”
Linki, materiały, kontakt… http://msdn.microsoft.com/en-us/ie/aa740469 -
„encyklopedia” ;]
http://channel9.msdn.com/Series/Darmowy-kurs-HTML5 - darmowy kurs
Prezentacja (linki)
[email protected] Kontakt:
Dziękuję!