dive into html5 - marcin zajkowski @ snt, microsoft

33
Stażysta Microsoft Polska

Upload: marcin-zajkowski

Post on 18-Dec-2014

145 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft

Stażysta Microsoft Polska

Page 2: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft

• Agenda

Page 3: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft

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
Page 6: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft
Page 8: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft

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

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

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

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

HEADER

NAV

ARTICLE

ASIDE

FOOTER

SECTION

HTML5 – tagi semantyczne

Page 14: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft

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
Page 16: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft

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

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

<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 20: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft

DEMO <canvas>

Page 21: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft

<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

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

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

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

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

Narzędzia developerskie

SP1 +

SP1

Page 28: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft
Page 29: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft

Co dalej z HTML5? „C# developers – learn JavaScript!”

Windows 8 (Metro UI)

Page 30: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft

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 33: Dive into HTML5 - Marcin Zajkowski @ SNT, Microsoft

Dziękuję!