1. HTML 5 CSS 3
Александр
Котоманов
Верстальщик
19.08.10
1
2. План
тренинга
• Что
нового
в
HTML
5
• Вебшрифты
• Audio
и
Video
• Canvas
и
SVG
• Drag&Drop
• Формы
• CSS
3
• JS
APIs
• Поддержка
браузерами
19.08.10
2
3. 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
4. HTML
5.
Уже
сейчас
Правильный
Doctype!
<!DOCTYPE
html>
19.08.10
4
5. 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
6. 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
7. 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
8. HTML
5.
Уже
сейчас
• UTF-‐8
<meta
charset="UTF-‐8">
19.08.10
8
9. HTML
4
Layout
Семантика:
• Элементы
• Id
и
Class
• Микроформаты
Семантика
(фр.
séman€que
от
греч.
σημαντικός
—
обозначающий)
19.08.10
9
10. HTML
5
Layout
• header
• footer
• sec€on
• ar€cle
• aside
• nav
19.08.10
10
