Павел Ловцевич,
                LOVATA Group
Web Standards Days, Минск 2009
Знакомая картина?
Год 2022. Эра блаженства
Будущее зависит от тебя!
Вчера
        XHTML 2



                  Web Apps 1
Сегодня
Вы можете помочь!
http://blog.whatwg.org/w3c-restarts-html-effort
Ian Hickson
«This is what we're doing. If the
implementation turns out to show that
the spec sucks, the spec will change.»
Новые тэги
                  <header > <mark>
               <article> <canvas>
              <figure>                    ...
<!DOCTYPE html>
 <header>
<!DOCTYPE html>
 <header>


<section>
<!DOCTYPE html>
 <header>


<section>
 <article>



 <article>
<!DOCTYPE html>
 <header>


<section>         <aside>
 <article>



 <article>
<!DOCTYPE html>
 <header>


<section>         <aside>
 <article>



 <article>




<footer>
<!DOCTYPE html>
 <header>
  <nav>

<section>         <aside>
 <article>



 <article>




<footer>
 <nav>
Новые тэги
                      <header >

          <article>
                             <mark>
                      ...
<video> и graceful degradation
<video width="640" height="360" src="http://site.com/video.mp4”>
       <object>
          ...
Поддержка видео-кодеков



   Theora   Theora Theora Theora
                    MP4   H.264
Поддержка аудио-кодеков



   .wav   .ogg   .mp3   .ogg
          .wav   .wav   .wav
<input type=“” />
Кроме того
•Video & Audio API
•Drag & Drop API
•Geolocation API
•Web Storage
•Form validation
Объявляем тип языка разметки



 <!DOCTYPE html>
Костыль для Internet Explorer
 <!--[if IE]>
 <script>
           document.createElement('header');
           document.cre...
HTML5 IE enabling script
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]...
Задаем базовые свойства
header, footer, section, nav, article, aside {
    margin: 0px;
    padding: 0px;
    display: blo...
Валидация HTML5
http://html5.validator.nu
Синтаксис HTML5
•описание согласно терминам DOM;
•HTML-сериализация ;
•XML-сериализация.
HTML-сериализация
<!DOCTYPE html>
<html>
       <head>
             <title>An HTML Document</title>
       </head>
       ...
XML-сериализация
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
       <head>
             <title>An HTML Doc...
Преимущества HTML-сериализации
•обратная совместимость;
•«мягкий» синтаксис, прощающий мелкие ошибки;
•возможность сокраще...
Преимущества XML-сериализации
•«жесткий» синтаксис, порождающий качественный
код;
•интеграция с другими XML-стандартами (S...
HTML5 на различных платформах
HTML5
FIN
Спасибо за внимание! Вопросы?




                       lovtsevich@lovata.com
          pavel.lovtsevich@web-standard...
HTML5. Будем знакомы! Павел Ловцевич
HTML5. Будем знакомы! Павел Ловцевич
HTML5. Будем знакомы! Павел Ловцевич
HTML5. Будем знакомы! Павел Ловцевич
HTML5. Будем знакомы! Павел Ловцевич
HTML5. Будем знакомы! Павел Ловцевич
HTML5. Будем знакомы! Павел Ловцевич
Upcoming SlideShare
Loading in …5
×

HTML5. Будем знакомы! Павел Ловцевич

1,786 views

Published on

HTML5. Будем знакомы! Павел Ловцевич

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,786
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5. Будем знакомы! Павел Ловцевич

  1. 1. Павел Ловцевич, LOVATA Group Web Standards Days, Минск 2009
  2. 2. Знакомая картина?
  3. 3. Год 2022. Эра блаженства
  4. 4. Будущее зависит от тебя!
  5. 5. Вчера XHTML 2 Web Apps 1
  6. 6. Сегодня
  7. 7. Вы можете помочь! http://blog.whatwg.org/w3c-restarts-html-effort
  8. 8. Ian Hickson «This is what we're doing. If the implementation turns out to show that the spec sucks, the spec will change.»
  9. 9. Новые тэги <header > <mark> <article> <canvas> <figure> <details> <progress> <hgroup> <meter> <video> <audio> <aside> <time> <nav> <footer> <output> <section>
  10. 10. <!DOCTYPE html> <header>
  11. 11. <!DOCTYPE html> <header> <section>
  12. 12. <!DOCTYPE html> <header> <section> <article> <article>
  13. 13. <!DOCTYPE html> <header> <section> <aside> <article> <article>
  14. 14. <!DOCTYPE html> <header> <section> <aside> <article> <article> <footer>
  15. 15. <!DOCTYPE html> <header> <nav> <section> <aside> <article> <article> <footer> <nav>
  16. 16. Новые тэги <header > <article> <mark> <canvas> <figure> <hgroup> <details> <meter> <progress> <audio> <aside> <video> <nav> <time> <footer> <section> <output>
  17. 17. <video> и graceful degradation <video width="640" height="360" src="http://site.com/video.mp4”> <object> <param value="http://site.com/video.mp4"> <param value="true"> <param value="false"> <embed src="http://site.com/video.mp4"> </embed> </object> </video>
  18. 18. Поддержка видео-кодеков Theora Theora Theora Theora MP4 H.264
  19. 19. Поддержка аудио-кодеков .wav .ogg .mp3 .ogg .wav .wav .wav
  20. 20. <input type=“” />
  21. 21. Кроме того •Video & Audio API •Drag & Drop API •Geolocation API •Web Storage •Form validation
  22. 22. Объявляем тип языка разметки <!DOCTYPE html>
  23. 23. Костыль для Internet Explorer <!--[if IE]> <script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); </script> <![endif]-->
  24. 24. HTML5 IE enabling script <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> http://code.google.com/p/html5shiv/
  25. 25. Задаем базовые свойства header, footer, section, nav, article, aside { margin: 0px; padding: 0px; display: block; }
  26. 26. Валидация HTML5 http://html5.validator.nu
  27. 27. Синтаксис HTML5 •описание согласно терминам DOM; •HTML-сериализация ; •XML-сериализация.
  28. 28. HTML-сериализация <!DOCTYPE html> <html> <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document.</p> </body> </html>
  29. 29. XML-сериализация <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document.</p> </body> </html>
  30. 30. Преимущества HTML-сериализации •обратная совместимость; •«мягкий» синтаксис, прощающий мелкие ошибки; •возможность сокращения кода; •низкий порог входа разработчиков.
  31. 31. Преимущества XML-сериализации •«жесткий» синтаксис, порождающий качественный код; •интеграция с другими XML-стандартами (SVG, MathML и пр.). •совместимость со стандартными средствами обработки XML (часто применяется при обработке и публикации материалов).
  32. 32. HTML5 на различных платформах
  33. 33. HTML5
  34. 34. FIN Спасибо за внимание! Вопросы? lovtsevich@lovata.com pavel.lovtsevich@web-standards.ru

×