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.

Like this presentation? Why not share!

Like this? Share it with your network

Share

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

on

  • 2,146 views

Стандарты объединяют разработчиков браузеров и упрощают жизнь разработчикам веб-сайтов. Что мы получаем с ...

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

Statistics

Views

Total Views
2,146
Views on SlideShare
2,146
Embed Views
0

Actions

Likes
1
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Стандарты HTML5 и CSS3 и рождение нового веба вместе с Internet Explorer 9 Presentation 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.