Html5 and-css3
35
19.08.10 1 Обзор HTML 5 и CSS 3 Александр Котоманов Верстальщик
-
Upload
alex-kotomanov -
Category
Documents
-
view
1.631 -
download
0
Transcript of Html5 and-css3
19.08.10 1
Обзор
HTML 5 и CSS 3
Александр Котоманов Верстальщик
План тренинга
• Что нового в HTML 5 • Вебшрифты • Audio и Video • Canvas и SVG • Drag&Drop • Формы • CSS 3 • JS APIs • Поддержка браузерами
19.08.10 2
HTML 5. Немного истории
1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2005 AJAX 2009 HTML 5
19.08.10 3
HTML 5. Уже сейчас
Правильный Doctype!
<!DOCTYPE html>
19.08.10 4
HTML 5. Уже сейчас
Для IE <!-‐-‐[if IE]> <script> document.createElement(’header’); document.createElement(’footer’); document.createElement(’sec�on’); document.createElement(’aside’); document.createElement(’nav’); document.createElement(’ar�cle’); </script> <![endif]-‐-‐>
19.08.10 5
HTML 5. Уже сейчас
Мой выбор: <!-‐-‐[if lte IE 8]> <script type="text/javascript" src="h�p://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-‐-‐>
19.08.10 6
HTML 5. Уже сейчас
Для FF 2 и Camino 1: <html lang="en" xmlns="h�p://www.w3.org/1999/xhtml">
Content-‐type из text/html в applica�on/xhtml+xml RewriteCond %{REQUEST_URI} \.html$ RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-‐8]|9pre|9a|9b[0-‐4])\.[0-‐9.]+).*Gecko RewriteRule .* -‐ [T=applica�on/xhtml+xml]
или if (preg_match('/rv:1\.(([1-‐8]|9pre|9a|9b[0-‐4])\.[0-‐9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) { header('Content-‐type: applica�on/xhtml+xml'); }
19.08.10 7
HTML 5. Уже сейчас
• UTF-‐8 <meta charset="UTF-‐8">
19.08.10 8
HTML 4 Layout
Семантика: • Элементы • Id и Class • Микроформаты
Семантика (фр. séman�que от греч. σημαντικός — обозначающий)
19.08.10 9
HTML 5 Layout
• header • footer • sec�on • ar�cle • aside • nav
19.08.10 10
HTML 5 Content
• audio • canvas • details
• dialog • embed • figure • source • video
19.08.10 11
HTML 5 Inline elements
• mark • meter • �me (date�me) • progress
19.08.10 12
HTML 5 Forms
19.08.10 13 h�p://pepelsbey.net/pres/html5-‐in-‐fact/e/form/index.htm
HTML 5 Forms
• Datalist
• Command <menu>
<command onclick="alert('first command')" label="Do 1st Command"/> <command onclick="alert('second command')" label="Do 2nd Command"/> <command onclick="alert('third command')" label="Do 3rd Command"/>
</menu>
• Autofocus, Required • Type=number, email, url, date, range • Output
19.08.10 14
Вебшрифты
• Всё просто:
@font-face {
font-family: ‘MyFont';
src: url('myfont.eot'); /* IE6+ */
src: local('MyFont'),
url('myfont.woff') format('woff'),
/* FF3.6 */
url('myfont.ttf') format('truetype');
/* Saf3+,Chrome,FF3.5,Opera10+ */
}
19.08.10 15
Вебшрифты
• sIFR • Typekit • Cufon • Typotheque (Flash / JS / SVG / VML)
19.08.10 16
HTML 5 Audio
19.08.10 17
<audio controls autobuffer> <source src="elvis.ogg" /> <source src="elvis.mp3" /> </audio>
Кроссбраузерное решение: h�p://www.happyworm.com/jquery/jplayer/
HTML 5 Video
• Было: <object classid="clsid:d27cdb6e-‐ae6d-‐11cf-‐96b8-‐444553540000" width="425" height="344" codebase="h�p://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="h�p://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="applica�on/x-‐shockwave-‐flash" width="425" height="344" src="h�p://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
• Стало: <video width="640" height="360" src="h�p://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png"> <a href="h�p://www.youtube.com/demo/google_main.mp4">download the video</a </video>
19.08.10 18
HTML 5 Video
19.08.10 19
Canvas & SVG
19.08.10 20
h�p://babarun.ru/content/canvas/
Canvas & SVG
19.08.10 21
h�p://9elements.com/io/projects/html5/canvas/
Canvas & SVG
19.08.10 22 h�p://svg-‐edit.googlecode.com/svn/branches/2.4/editor/svg-‐editor.html
Canvas & SVG
19.08.10 23 h�p://ie.microso².com/testdrive/Graphics/55TagCloud/Default.xhtml
HTML 5. Drag & Drop
19.08.10 24
h�p://pepelsbey.net/pres/html5-‐in-‐fact/e/drag/index.htm
CSS 3
19.08.10 25
.box_round { -‐moz-‐border-‐radius: 15px; /* FF1+ */ -‐webkit-‐border-‐radius: 15px; /* Saf3+, Chrome */ border-‐radius: 15px; /* Opera 10.5, IE 9 */ }
CSS 3
19.08.10 26
.box_shadow { -‐moz-‐box-‐shadow: 0px 0px 20px #ffffff; /* FF3.5+ */ -‐webkit-‐box-‐shadow: 0px 0px 20px #ffffff; /* Saf3.0+, Chrome */ box-‐shadow: 0px 0px 20px #ffffff; /* Opera 10.5, IE 9.0 */ }
CSS 3
19.08.10 27
.box_gradient { background-‐image:
-‐moz-‐linear-‐gradient(top, #444444, #999999); /* FF3.6 */ background-‐image: -‐webkit-‐gradient(linear,le² top,le² bo�om,
color-‐stop(0, #444444),color-‐stop(1, #999999)); /* Saf4+, Chrome */ }
CSS 3
19.08.10 28
.box_rotate { -‐moz-‐transform: rotate(7.5deg); /* FF3.5+ */ -‐o-‐transform: rotate(7.5deg); /* Opera 10.5 */ -‐webkit-‐transform: rotate(7.5deg); /* Saf3.1+, Chrome */ }
CSS анимация
19.08.10 29 h�p://pepelsbey.net/pro/2009/12/special-‐effects-‐tea/5.htm
JS APIs
• Web Storage • Web SQL Database • Applica�on Cache API • No�fica�ons • Drag and Drop • Geoloca�on
19.08.10 30
Поддержка браузерами
19.08.10 31
h�p://html5test.com/
Поддержка браузерами
19.08.10 32 h�p://www.findmebyip.com/litmus/
Поддержка браузерами
19.08.10 33 h�p://html5readiness.com/
Полезные ресурсы (HTML)
• Черновик спецификации h�p://dev.w3.org/html5/spec/Overview.html
• h�p://html5doctor.com/ • h�p://diveintohtml5.org/ • h�p://html5gallery.com/ • h�p://html5demos.com/ • h�p://www.quackit.com/html_5/tags/ • h�p://media.smashingmagazine.com/cdn_smash/wp-‐content/uploads/images/html5-‐cheat-‐sheet/html5-‐cheat-‐sheet.pdf
19.08.10 34
Полезные ресурсы (CSS)
• h�p://www.css3.info/ • h�p://css3please.com/ • h�p://css3generator.com/
19.08.10 35
