Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft
-
Upload
marcin-zajkowski -
Category
Technology
-
view
147 -
download
0
description
Transcript of Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft
![Page 1: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/1.jpg)
Stażysta Microsoft Polska
![Page 2: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/2.jpg)
• Agenda
![Page 3: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/3.jpg)
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…
![Page 4: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/4.jpg)
![Page 6: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/6.jpg)
![Page 7: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/7.jpg)
Doctype
![Page 8: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/8.jpg)
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>
![Page 9: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/9.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
![Page 10: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/10.jpg)
Struktura strony html
<div id="logo" class="header"/>
<div id="menu" class="navigation"/>
<div id="content"...
<div…
<div id="footer" class="footer"/>
<div…
![Page 11: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/11.jpg)
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
![Page 12: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/12.jpg)
HEADER
NAV
ARTICLE
ASIDE
FOOTER
SECTION
HTML5 – tagi semantyczne
![Page 14: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/14.jpg)
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
![Page 15: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/15.jpg)
![Page 16: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/16.jpg)
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">
![Page 18: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/18.jpg)
Grafika - <canvas> Rysowanie / wyświetlanie obrazów
API Javascript
Tryb „bezpośredni” – akceleracja
Manipulacja pixelami
Rzeczywiste dane
Zamiana pixeli
GRY!
![Page 19: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/19.jpg)
<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
![Page 21: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/21.jpg)
<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>
![Page 22: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/22.jpg)
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>
![Page 23: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/23.jpg)
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ść
![Page 24: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/24.jpg)
HTML5 <audio> Wsparcie standardów rynkowych
– MP3
– ACC
API
Atrybuty
– src
– autoplay
– controls
– preload
<audio id="audio" src="nuta.mp3" controls> </audio>
![Page 25: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/25.jpg)
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ść
![Page 27: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/27.jpg)
Narzędzia developerskie
SP1 +
SP1
![Page 28: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/28.jpg)
![Page 29: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/29.jpg)
Co dalej z HTML5? „C# developers – learn JavaScript!”
Windows 8 (Metro UI)
![Page 30: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/30.jpg)
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!”
![Page 31: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/31.jpg)
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:
![Page 33: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft](https://reader034.fdocuments.net/reader034/viewer/2022051412/5495c0f7ac79591d2e8b4ec6/html5/thumbnails/33.jpg)
Dziękuję!