• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Стандарты HTML5 и CSS3 и рождение нового веба вместе с Internet Explorer 9

  • 1,641 views
Published

Стандарты объединяют разработчиков браузеров и упрощают жизнь разработчикам веб-сайтов. Что мы получаем с приходом HTML5 и CSS3, и как они будут поддерживаться в Internet Explorer 9, во многом …

Стандарты объединяют разработчиков браузеров и упрощают жизнь разработчикам веб-сайтов. Что мы получаем с приходом HTML5 и CSS3, и как они будут поддерживаться в Internet Explorer 9, во многом определяет будущее веба. В докладе будет проведен обзор того, что принесут веб-разработчикам HTML5, CSS3 и Internet Explorer 9.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,641
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1.
  • 2. Стандарты HTML5 и CSS3:рождение нового веба вместе с InternetExplorer 9
    Гайдар Магдануров
    Веб-евангелист
    Microsoft
    DT 201
  • 3. Содержание
    Веб-стандарты
    Участие Microsoft в комитетах W3C
    Поддержка стандартов в IE9
    HTML 5
    CSS 3
  • 4. Стандартыв WWW
    Стандарты – это нужно
    HTML 5, SVG, CSS 3, DOM L2 и L3, ECMAScript
    Стандартны – это сложно
    Рабочая группа HTML – 1100 страниц, 40 организаций, 411 участников, 280 приглашенных экспертов
  • 5. Стандарты - правда сложно!
    1991 - HTML 1.0
    1995 - HTML 2.0
    1997 - HTML 3.0
    1997 - HTML 4.0
    2000 - XHTML 1.0
    2000 - Начало работы над XHTML 2.0
    2006 - XHTLM 2.0
    2008 -Первый черновик HTML 5.0
    2009 - XHTML 2.0
    … 2222 - HTML 5.0
  • 6. Стандарты в Internet Explorer 9
    HTML 5
    XHTML
    CSS 3
    SVG
    DOM Level2 и Level3
    ECMAScript 5
  • 7. Стандарты в Internet Explorer 9
    Кросс-браузерная совместимость
    Высокая интерактивность
    Богатый пользовательский интерфейс
    Высокая производительность
    Ощущение настольного приложения
  • 8. HTML 5
  • 9. Структура документа
    Упрощенный DOCType
    <!doctype html>
    Разрешены перекрывающиеся теги
    <b><i>Да, так можно, но не нужно!</b></i>
    Не обязательны кавычки атрибутов
    <div class=myClass>Можно, но …</div>
    Атрибуты без значений (binary)
    <video controls>Важно наличие присутствия</video>
  • 10. Структура документа
    Не обязательны структурные тегов
    <!doctype html>
    <meta charset=utf-8>
    <title>Моя Страница</title>
    <p>Да, это корректный документ, но…</p>
  • 11. Устаревшие элементы
    <applet> - следует использовать <embed>
    <big>- следует использовать CSS
    <blink> - следует использовать CSS
    <center> - следует использовать CSS
    <font> - следует использовать CSS
    <marquee> - дурацкая затея ранних IE…
    Поддерживаются, однако помечены устаревшими
  • 12. Новая жизнь старых элементов
    <ol>- устаревший HTML 4, вернулся в HTML 5
    <dl>- испольование для имен/значений
    <cite>- указание на название статьи/книги
    <address>- контактная информация автора
    <em>- выделение
    <i>- «интонация» текста
    <strong>- указание на важность
    <b>- изменение стиля, без важности
    <hr>- разбиение текста на уровне параграфа
    <small>- мелкий шрифт (например, copyright)
  • 13. Новые элементы
    <header> - заголовок документа указания
    <footer> - «подвал» предшественника
    <nav> - элементы навигации
    <aside> -врезка
    <article> - самостоятельный блок контента
    <section> - группировка контента
    <audio> - аудио без плагинов
    <video> - видео без плагинов
    <svg>- векторные изображения в XML
    <canvas> - поверхность «для рисования»
  • 14. Новые элементы форм
    Строгая типизация и валидация ввода
    Спецификация не описывает изображение
    <input type='range' min='0' max='50' value='0' />
    <input results='10' type='search' />
    <input type='text' placeholder='Search inside' />
    <input type='color' />
    <input type='number' />
    <input type='email' /><input type='url' />
    <input type='tel' />
    <input type='date' /><input type='time' />
    <input type='month' /> <input type='week' />
  • 15. Элементы Audio и Video
    Не требуются плагины
    Управление JavaScript
    Простое добавление тегов на страницу
    Кодеки аудио: MP3, AAC
    Кодеки видео: H.264
    Нет DRM
    Нет простых средств управления загрузкой канала (привет, Silverlight!)
  • 16. Audio
  • 17. Video
  • 18. CSS 3
  • 19. Рамки
  • 20. Фоновые изображения
  • 21. Импорт шрифтов
    @font-face {
    font-family: AyitaPro; src: url('media/AyitaPro.woff');
    }
    <div style="font: bold 18pt AyitaPro, sans-serif;">
    ALL ABOARD</div>
  • 22. Media Queries
    Зависимости от возможностей устройств
    <link href="No.css" rel="stylesheet" media="screen and (max-width:1199px)" type="text/css" />
    <link href="No.css" rel="stylesheet" media="screen and (min-width:1301px)" type="text/css" />
    <link href="Yes.css" rel="stylesheet" media="screen and (min-width:1200px) and (max-width: 1300px)" type="text/css" />
  • 23. Селекторы
    function makeAllH2Red() {
    varelem = document.querySelectorAll("h2 + p");
    varcount = elem.length;
    vari = 0;
    for (i = 0; i <= count; i++) {elem[i].style.color = "red"; }
    }
    varelem = document.querySelectorAll("ulli:nth-child(odd)");// varelem = document.querySelectorAll("table.test > tr > td");
  • 24. Цвета в HSL
  • 25. Прозрачность
  • 26. ECMAScript 5 и производительность
    DOM Storage
    SVG
    Canvas
    Разное…
  • 27. DOM хранилище
    Аналог Cookie файлов на клиенте
    Уровень сеанса
    sessionStorage.myKeyName= “hello”;
    varresult = sessionStorage.myKeyName;
    Локальное хранилище
    localStorage.myKeyName= “Hi!”;
    varlocal = localStorage.myKeyName;
    Использование
    function offlineEventReceived() {
    varelemText = document.getElementById("blogPostInput");
    vartextToSave = elemText.value;
    localStorage.savedBlogPost= textToSave;
    localStorage.savedBlogPostTime= (new Date()).getTime();
    }
  • 28. Canvas
  • 29. SVG
  • 30. Ресурсы
    Спецификация HTML 5
    http://dev.w3.org/html5/spec/Overview.html
    Спецификация CSS 3
    http://www.w3.org/TR/css3-roadmap/
    Спецификация SVG
    http://www.w3.org/TR/SVG/
    «Шпаргалка» про Canvas
    http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
  • 31. Официальные курсы и сертификация Microsoft
    Более 300 официальных курсов Microsoft доступно в России.
    Официальные курсы можно прослушать только в авторизованных учебных центрах Microsoft
    под руководством опытного сертифицированного инструктора Microsoft
    интенсивное обучение с акцентом на практику
    более 80-и учебных центров более чем в 20-и городах России (+ дистанционные и выездные курсы)
    Сертификат Microsoft - показатель квалификации ИТ-специалиста для работодателя .
    • Microsoft предлагает гибкую систему сертификаций.
    • 32. Все курсы, учебные центры и центры тестирования: www.microsoft.com/rus/learning
    40
    57
    %
    %
    Доказательство № 75
    Доказательство № 119
    рекрутеров считают сертификацию сотрудников одним из критериев для повышения в должности
    сертифицированных специалистов считают, что сертификация помогла им получить работу или повышение
  • 33. Специальные предложения
    Сертификационный пакет со вторым шансом
    Пакеты экзаменационных ваучеров со скидкой от 15 до 20% и бесплатной пересдачей («вторым шансом»). Все экзамены сдаются одним человеком.
    Сэкономьте 15% на сертификации вашей ИТ-команды
    Пакет из 10-и экзаменационных ваучеров со скидкой 15% для сотрудников ИТ-отдела. «Второй шанс» включен. Ваучеры можно произвольно распределять между сотрудниками.
    Microsoft Certified Career Conference
    Первая 24-часовая глобальная виртуальная конференция с 18 ноября с 15.00 (моск. время) по 19 ноября 2010 г.
    Сессии по технологиям и построению карьеры
    Скидка 50% для сертифицированных специалистов Microsoft и студентов
    Бесплатная подписка на TechNet для слушателей официальных курсов
    Некоторые курсы по SharePoint, Windows 7; WindowsServer 2008; SQL Server 2008
    Детали: www.microsoft.com/rus/learning
    С 22 ноября 2010 г. – подписка TechNet бесплатно для слушателей курсов. Количество ограничено!
  • 34. Обратная связь
    Ваше мнение очень важно для нас. Пожалуйста, оцените доклад, заполните анкету и сдайте ее при выходе из зала
    Спасибо!
  • 35. Вопросы
    DT 201
    Гайдар Магдануров
    Веб-евангелист
    GaidarMa@microsoft.com
    Blogs.msdn.com/gaidar
    Twitter.com/gaidar
    Ищите меня в зоне «Спроси эксперта» после 15.30.