HTML5 - Jagiellonian University
Download
Report
Transcript HTML5 - Jagiellonian University
HTML5
Tomasz Wiśniewski
Developer Evangelist Microsoft Sp. z o.o.
Agenda
The „WOW”
Jak to powstaje?
HTML5 features
Q&A
PAGE 3
DEMO
www.beautyoftheweb.com
HTML5
Co i jak?
Device Access
Offline Storage
Semantics
Connectivity
Performance
CSS3
PAGE 6
3D Effects /
Graphics
Multimedia
Jak oni pracują?
W3C HTML Working Group
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
PAGE 8
9 publikacji
HTML5
HTML Canvas 2d Context
HTML: The Markup
HTML5 diffs from HTML4
Polyglot Markup
Rekomendacje są za darmo
HTML
PAGE 9
CSS
Web Apps
SVG
Geolocation
ECMA
Stan na: 13-go lipca 2011
Podejście Microsoft do HTML5
IE9
IE Platform Previews
HTML5 Labs
Gotowe witryny
HTML5
Standardy
„work in progress”
Wschodzące
standardy
PAGE 10
HTML5 w IE9
HTML5
• Nowe elementy Markup
• Canvas
• Audio
• Video
• Local storage
• Cross-Window Messaging
• API do zaznaczania tekstu
• Parsing SVG in HTML
CSS3
• 2D Transforms
• Border Radius
• Box-Shadow
• Czcionki (WOFF)
• Media Queries
• Multiple Backgrounds
• Namespaces
• Opacity
• rgba(), hsl(), hsla()
• Selectors (IE8)
SVG
• Shapes
• Clipping, Masking and
Compositing
• Transforms
• Extensibility
• Gradients
• Interactivity
• Linking and Views
• Painting and Colors
• Paths
• Text
Akceleracja sprzętowa
PAGE 11
Inne
• ECMA Script 5(poza Strict
Mode)
• Native JSON support (IE8)
• Performance API
• Geolokalizacja
• Data-uri (IE8)
• DOM L2, L3
• Selectors API L2
• AJAX Navigation (IE8)
• DOMParser i XML Serializer
• ICC v2 and Color Profile
• ARIA
HTML w IE10 Platform Preview
HTML5
•
•
•
•
•
•
Drag&Drop
File API
Forms Validation
Sandbox
Web Workers
async
PAGE 12
CSS3
•
•
•
•
•
Grid
Flexbox
Gradient
Multi-Column
Floats
Inne
•
•
•
•
•
Web Performance API
ECMA Script 5 Strict Mode
Advanced Hit Testing API
Media Queries Listeners
Removal of Style Sheet
Limits
< HTML5 LABS >
HTML5 IndexedDB
HTML5 Web Sockets
HTML5 File API
HTML5 Media Capture API
PAGE 13
IE6 countdown… 3... 2… 1…
PAGE 14
PAGE 15
HTML5 features
Narzędzia
SP1
SP1
+
HTML
•
•
•
•
•
•
•
Markup
Forms
ARIA
Microdata
Canvas
Video
Inne…
PAGE 17
CSS 3
•
•
•
•
•
•
•
Selectors
Media Queries
Fonts
Transforms
Transitions
Animation
Inne…
JavaScript
•
•
•
•
•
•
•
Geolocation
Web Storage
Web Sockets
FileAPI
Media Capture
IndexedDB
Inne…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
PAGE 18
PAGE 19
Składnia
<img src="sample.jpg" /> = <img src="sample.jpg">
<img src="sample.jpg"> = <img src=sample.jpg>
<IMG SRC=sample.jpg> = <img src=sample.jpg> = <iMg SrC=sample.jpg>
PAGE 20
HTML5 – tagi semantyczne
<div id="logo" class="header"/>
<div id="menu" class="navigation"/>
<div id="content"...
<div…
<div…
<div id="footer" class="footer"/>
PAGE 21
10 najpopularniejszych ID
footer
content
header
logo
container
main
table1
menu
layer1
autonumber1
0
50000
100000
150000
200000
250000
300000
350000
PAGE 22
Źródło: http://devfiles.myopera.com/articles/572/idlist-url.htm
10 najpopularniejszych nazw class
footer
menu
style1
msonormal
text
content
title
style2
header
copyright
0
20000
40000
60000
80000
100000
120000
140000
160000
180000
200000
PAGE 23
Źródło: http://devfiles.myopera.com/articles/572/classlist-url.htm
HTML5 – tagi semantyczne
HEADER
NAV
ARTICLE
SECTION
FOOTER
PAGE 24
ASIDE
PAGE 25
DEMO
Tagi semantyczne
HTML5
<video> / <audio>
HTML5 <video> / <audio>
<object
height="380"
type="application/x-silverlight-2"
width="640">
<video
id="video"
controls autoplay>
<param name="source" value="Resources/player.xap">
<source
src="sample.mp4" type="video/mp4"/>
<param name="initParams„
</video> value="deferredLoad=true,duration=0,
m=http://localhost:64689/02.%20Video/Videos/video.mp4,
autostart=false,autohide=true,showembed=true,postid=0">
<param
value="#00FFFFFF">
<audioname="background"
id="audio" src="sample.mp3"
controls></audio>
</object>
HTML5 <video>
Wiele formatów
Łączenie z innymi elementami
Akceleracja sprzętowa (dekodowanie GPU)
PAGE 28
HTML5 <video>
Kompatybilność
H.264
VP8 (WebM)
PAGE 29
9
6.0.1
13.0.782.218
11.50
5.1
TAK
TAK
NIE*
TAK
TAK*
TAK
NIE
TAK
TAK
NIE*
HTML5 <audio>
Wsparcie standardów rynkowych
MP3
ACC
API
Atrybuty
src
autoplay
controls
preload
HTML5 <audio>
Kompatybilność
9
5
12
11.50
5
ACC
TAK
TAK
NIE
NIE
TAK
TAK
NIE
NIE
NIE
NIE
WAV
NIE
TAK
TAK
TAK
TAK
MP3
PAGE 31
PAGE 32
DEMO
<video> / <audio>
HTML5
<canvas>
HTML5 <canvas>
Rysowanie
API JavaScript i podstawowe elementy
Tryb „bezpośredni”
Czarna skrzynka
PAGE 34
HTML5 <canvas> - scenariusze
Manipulacja pikselami
Dane rzeczywiste
Zamiana pikseli
Gry
PAGE 35
<canvas>
<canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support Canvas, sorry.
</canvas>
<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
PAGE 36
Brak wsparcia
Narzędzia
CANVAS
AI->Canvas
http://visitmix.com/labs/ai2canvas/
PAGE 37
PAGE 38
DEMO
<canvas>
HTML5
<svg>
HTML5 <svg>
Wektorowa grafika 2D -> XML
„Trwały” tryb
Dostęp poprzez DOM
Stylowanie za pomocą CSS i ARIA
Inline/plik
HTML5 <svg> - scenariusze
Wysokiej jakości odwzorowanie w dokumentach
Grafiki / Wykresy / Mapy
Multimedia i Grafika (CSS/Plakaty/Animacje JS)
Gry
SEO i ARIA
PAGE 41
Narzędzia
SVG
Microsoft Visio
Adobe Ilustrator
Inkspace
<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>
PAGE 43
PAGE 44
DEMO
<svg>
<canvas> vs <svg>
Skomplikowane sceny,
Obliczenia matematyczne
w czasie rzeczywistym
Obrazy
statyczne
<canvas>
<svg>
Wysoka
wydajność
Manipulacja
video
Wysokiej jakości
dokumenty
(wyświetlanie /
drukowanie)
PAGE 46
CSS3
CSS3
IE9
Rounded corners via the border-radius property
CSS3 background and border features
The opacity property
RGBA, HSL, and HSLA color models
CSS3 fonts properties and new web font formats
CSS3 media queries
CSS3 namespaces
CSS3 values and units
CSS3 selectors
CSS3 2D transforms
PAGE 47
CSS3
IE9 + Developers
Rounded corners via the border-radius property
CSS3 background and border features
The opacity property
RGBA, HSL, and HSLA color models
CSS3 fonts properties and new web font formats
CSS3 media queries
CSS3 namespaces
CSS3 values and units
CSS3 selectors
CSS3 2D transforms
PAGE 48
CSS3
IE9 + Designers
Rounded corners via the border-radius property
CSS3 background and border features
The opacity property
RGBA, HSL, and HSLA color models
CSS3 fonts properties and new web font formats
CSS3 media queries
CSS3 namespaces
CSS3 values and units
CSS3 selectors
CSS3 2D transforms
PAGE 49
PAGE 50
CSS 2.1
•
•
•
•
screen oraz print
Brak responsywności
Nadmiarowośc pracy
Wsparcie dla
mobile to rzadkość
PAGE 51
CSS 3
• CSS Media Queries
CSS 3 – Media Queries
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
@media screen and (min-width: 320px) and (max-width: 480px)
@media not print and (max-width: 600px)
@media screen(x) and (y), print(a) and (b)
PAGE 52
CSS3 Grid Alignment
PAGE 53
CSS3 Grid Alignment
1
2
3
PAGE 54
CSS3 Selectors
PAGE 55
CSS3 Flexible Box
PAGE 56
CSS3 Flexible Box
1
2
3
PAGE 57
CSS3 Multi-Column Layout
PAGE 58
CSS3 Positioned Floats
PAGE 59
WOFF
Web Open Font Format
Kompatybilność wstecz (Embedded OpenType – EOT)
PAGE 60
PAGE 61
DEMO
CSS3 / WOFF
INNE
Modernizr
PAGE 64
DEMO
Modernizr
Zasoby
Książki – HTML5
Książki – CSS3
Książki – JavaScript
Linki
www.beautyoftheweb.com
www.ietestdrive.com
www.html5labs.com
PAGE 69
Linki - inne
http://diveintohtml5.com/
http://html5boilerplate.com/
http://www.modernizr.com/
http://msdn.microsoft.com/en-us/library/gg589511(v=VS.85).aspx
PAGE 70
PAGE 71
Q&A
Thank you.
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.