SlideShare a Scribd company logo
1 of 25
HTML5
WINNING THE FUTURE?
        Sergey Galitskiy @Lohika
                      7 Dec 2012
Немножко магии
HTML5 как тренд
Путь истинный

• Пользовательский    • W3C
       подход
HTML5 – что это?
HTML5
• Simplified and updated syntax (doctype, charset, boolean
  attributes etc.)
• Lots of new, changed, obsolete and absent elements and
  attributes
• New semantic tags like <header>, <footer>, <section>, <article>
  and many others
• <audio> and <video> tags for media content and API control
  the playback
• <canvas> tag for dynamic bitmap graphics
• <svg> for inline scalable vector graphics
• <math> tag for inline MathML content
• New form input types
• API for offline Web applications.
• Editing API and new contenteditable attribute
• Drag&Drop API and draggable attribute
• History API to control session history
•
    HTML5+1
    ECMAScript 5
•   All CSS-staff, including CSS 2.1 & CSS3
•   Geolocation API
•   WEB Storage, Web Sockets API and Web Workers
•   HTML MicroData for machine-readable data
•   Indexed DB and WebSQL Database
•   Special API to work with <canvas> tag
•   WebGL
•   HTML Media capture and Media capture API
•   File API(File API Writer & API Directories and System)
•   Navigation Timing to access timing information
•   HTML5 Web messaging and Server-Send events
Концепция HTML5
1. Доступность
2. Адаптивность
3. Асинхронность
•   Доступ к сети
•   Доступ к серверу(получение данных)
•   Взаимодействие с пользователем
•   Процессы в браузере
4. Плюшки




http://caniuse.com/
ЛОЖКА
ДЕГТЯ
Браузеры
•   HTML5 Semantic Tags — IE9+
•   HTML5 Canvas, Audio + Video, SVG — IE9+
•   HTML5 Offline|Application Cache, Web Forms — IE10+
•   ARIA, role attributes — IE8+, IE9+
•   CSS3 Media Queries, Transforms 2D, Fonts (Font-face + WOFF),
    Borders & Backgrounds (Border Radius, Multiple Backgrounds) —
    IE9+
•   CSS3 Exclusions and Shapes, Grid Layout, Flexible Box, Transforms
    3D, Transitions, Animations, Borders & Backgrounds (Gradients)
    — IE10+
•   Web Storage — IE8+
•   IndexedDB, Web Sockets, Web Workers, Web Messaging — IE10+
•   IE Pinned Sites — IE9+
Что же делать?
• Здраво мыслить
• Упрощать
• Polyfill (Modernizr)

 Web socket -> flash -> comet
 Canvas -> flash|jpg
 SVG -> flash|VML
 ...
• Не используйте html5 




          ИЛИ НЕТ?
QUESTIONS?
• Бонус
SERGEY GALITSKIY
                                                               Email:      sgalitskiy@lohika.com
                                                               Skype:      sergiyko911.gluck
                                                               FB:         http://facebook.com/sgalitskiy




© Данное повествование отражало суть мыслей автора и никоим образом не претендует на всесторонее изучение html5

More Related Content

Similar to HTML5. Winning the future?

Yaremchuk - Drupal CodeLobster
Yaremchuk - Drupal CodeLobsterYaremchuk - Drupal CodeLobster
Yaremchuk - Drupal CodeLobster
Andrii Podanenko
 
Скорость не в ущерб качеству, web-разработка на Java, Java day, Omsk, 2014
Скорость не в ущерб качеству, web-разработка на Java, Java day, Omsk, 2014Скорость не в ущерб качеству, web-разработка на Java, Java day, Omsk, 2014
Скорость не в ущерб качеству, web-разработка на Java, Java day, Omsk, 2014
Anna Tarasenko
 
Технические особенности Docsvision 5
Технические особенности Docsvision 5Технические особенности Docsvision 5
Технические особенности Docsvision 5
Docsvision
 
сравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикссравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикс
Andrii Podanenko
 
Frontend в режиме реального времени [05.03.15]
Frontend в режиме реального времени [05.03.15]Frontend в режиме реального времени [05.03.15]
Frontend в режиме реального времени [05.03.15]
GoIT
 

Similar to HTML5. Winning the future? (20)

Сергей Мезенцев — Семантический винегрет
Сергей Мезенцев — Семантический винегрет Сергей Мезенцев — Семантический винегрет
Сергей Мезенцев — Семантический винегрет
 
Html5 css3 занятие 1
Html5 css3 занятие 1Html5 css3 занятие 1
Html5 css3 занятие 1
 
Mobile web apps
Mobile web appsMobile web apps
Mobile web apps
 
Мультиязычные проекты - разработка, продвижение, подводные камни #RIW2015
Мультиязычные проекты - разработка, продвижение, подводные камни #RIW2015Мультиязычные проекты - разработка, продвижение, подводные камни #RIW2015
Мультиязычные проекты - разработка, продвижение, подводные камни #RIW2015
 
Yaremchuk - Drupal CodeLobster
Yaremchuk - Drupal CodeLobsterYaremchuk - Drupal CodeLobster
Yaremchuk - Drupal CodeLobster
 
Скорость не в ущерб качеству, web-разработка на Java, Java day, Omsk, 2014
Скорость не в ущерб качеству, web-разработка на Java, Java day, Omsk, 2014Скорость не в ущерб качеству, web-разработка на Java, Java day, Omsk, 2014
Скорость не в ущерб качеству, web-разработка на Java, Java day, Omsk, 2014
 
Veb 2 0
Veb 2 0Veb 2 0
Veb 2 0
 
Каким будет SEO в начале 2017 года и как нам в этом поможет Wordpress?
Каким будет SEO в начале 2017 года и как нам в этом поможет Wordpress? Каким будет SEO в начале 2017 года и как нам в этом поможет Wordpress?
Каким будет SEO в начале 2017 года и как нам в этом поможет Wordpress?
 
Гетерогенные сервисы для highload-проектов на примере Imhonet.ru и 4talk.im, ...
Гетерогенные сервисы для highload-проектов на примере Imhonet.ru и 4talk.im, ...Гетерогенные сервисы для highload-проектов на примере Imhonet.ru и 4talk.im, ...
Гетерогенные сервисы для highload-проектов на примере Imhonet.ru и 4talk.im, ...
 
C# Web. Занятие 01.
C# Web. Занятие 01.C# Web. Занятие 01.
C# Web. Занятие 01.
 
Технические особенности Docsvision 5
Технические особенности Docsvision 5Технические особенности Docsvision 5
Технические особенности Docsvision 5
 
сравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикссравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикс
 
Frontend в режиме реального времени [05.03.15]
Frontend в режиме реального времени [05.03.15]Frontend в режиме реального времени [05.03.15]
Frontend в режиме реального времени [05.03.15]
 
Git, как инструмент управления веб-контентом
Git, как инструмент управления веб-контентомGit, как инструмент управления веб-контентом
Git, как инструмент управления веб-контентом
 
Gitlab devconf
Gitlab devconfGitlab devconf
Gitlab devconf
 
Инструкция по переходу на HTTPs
Инструкция по переходу на HTTPsИнструкция по переходу на HTTPs
Инструкция по переходу на HTTPs
 
My Open Source (Sept 2017)
My Open Source (Sept 2017)My Open Source (Sept 2017)
My Open Source (Sept 2017)
 
Александр Воинов - Тренды Web
Александр Воинов - Тренды WebАлександр Воинов - Тренды Web
Александр Воинов - Тренды Web
 
Динамическая и статическая локализация
Динамическая и статическая локализацияДинамическая и статическая локализация
Динамическая и статическая локализация
 
Компонентный подход: скучно, неинтересно, бесперспективно
Компонентный подход: скучно, неинтересно, бесперспективноКомпонентный подход: скучно, неинтересно, бесперспективно
Компонентный подход: скучно, неинтересно, бесперспективно
 

Recently uploaded

CVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdfCVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdf
Хроники кибер-безопасника
 
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdfСИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
Хроники кибер-безопасника
 
Cyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdfCyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdf
Хроники кибер-безопасника
 
2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf
Хроники кибер-безопасника
 
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Ирония безопасности
 
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
Ирония безопасности
 

Recently uploaded (9)

Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdfMalware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
 
CVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdfCVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdf
 
Ransomware_Q3 2023. The report [RU].pdf
Ransomware_Q3 2023.  The report [RU].pdfRansomware_Q3 2023.  The report [RU].pdf
Ransomware_Q3 2023. The report [RU].pdf
 
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdfСИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
 
Cyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdfCyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdf
 
2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf
 
MS Navigating Incident Response [RU].pdf
MS Navigating Incident Response [RU].pdfMS Navigating Incident Response [RU].pdf
MS Navigating Incident Response [RU].pdf
 
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
 
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
 

HTML5. Winning the future?

  • 1. HTML5 WINNING THE FUTURE? Sergey Galitskiy @Lohika 7 Dec 2012
  • 3.
  • 5.
  • 8. HTML5 • Simplified and updated syntax (doctype, charset, boolean attributes etc.) • Lots of new, changed, obsolete and absent elements and attributes • New semantic tags like <header>, <footer>, <section>, <article> and many others • <audio> and <video> tags for media content and API control the playback • <canvas> tag for dynamic bitmap graphics • <svg> for inline scalable vector graphics • <math> tag for inline MathML content • New form input types • API for offline Web applications. • Editing API and new contenteditable attribute • Drag&Drop API and draggable attribute • History API to control session history
  • 9. HTML5+1 ECMAScript 5 • All CSS-staff, including CSS 2.1 & CSS3 • Geolocation API • WEB Storage, Web Sockets API and Web Workers • HTML MicroData for machine-readable data • Indexed DB and WebSQL Database • Special API to work with <canvas> tag • WebGL • HTML Media capture and Media capture API • File API(File API Writer & API Directories and System) • Navigation Timing to access timing information • HTML5 Web messaging and Server-Send events
  • 12.
  • 14.
  • 15.
  • 16. 3. Асинхронность • Доступ к сети • Доступ к серверу(получение данных) • Взаимодействие с пользователем • Процессы в браузере
  • 20. HTML5 Semantic Tags — IE9+ • HTML5 Canvas, Audio + Video, SVG — IE9+ • HTML5 Offline|Application Cache, Web Forms — IE10+ • ARIA, role attributes — IE8+, IE9+ • CSS3 Media Queries, Transforms 2D, Fonts (Font-face + WOFF), Borders & Backgrounds (Border Radius, Multiple Backgrounds) — IE9+ • CSS3 Exclusions and Shapes, Grid Layout, Flexible Box, Transforms 3D, Transitions, Animations, Borders & Backgrounds (Gradients) — IE10+ • Web Storage — IE8+ • IndexedDB, Web Sockets, Web Workers, Web Messaging — IE10+ • IE Pinned Sites — IE9+
  • 21. Что же делать? • Здраво мыслить • Упрощать • Polyfill (Modernizr) Web socket -> flash -> comet Canvas -> flash|jpg SVG -> flash|VML ...
  • 22. • Не используйте html5  ИЛИ НЕТ?
  • 25. SERGEY GALITSKIY Email: sgalitskiy@lohika.com Skype: sergiyko911.gluck FB: http://facebook.com/sgalitskiy © Данное повествование отражало суть мыслей автора и никоим образом не претендует на всесторонее изучение html5

Editor's Notes

  1. This template can be used as a starter file for presenting training materials in a group setting. Sections Right-click on a slide to add sections. Sections can help to organize your slides or facilitate collaboration between multiple authors. Notes Use the Notes section for delivery notes or to provide additional details for the audience. View these notes in Presentation View during your presentation. Keep in mind the font size (important for accessibility, visibility, videotaping, and online production) Coordinated colors Pay particular attention to the graphs, charts, and text boxes. Consider that attendees will print in black and white or grayscale. Run a test print to make sure your colors work when printed in pure black and white and grayscale. Graphics, tables, and graphs Keep it simple: If possible, use consistent, non-distracting styles and colors. Label all graphs and tables.
  2. Give a brief overview of the presentation. Describe the major focus of the presentation and why it is important. Introduce each of the major topics. To provide a road map for the audience, you can repeat this Overview slide throughout the presentation, highlighting the particular topic you will discuss next.
  3. This is another option for an Overview slides using transitions.
  4. This is another option for an Overview slides using transitions.
  5. This is another option for an Overview slide.
  6. This is another option for an Overview slide.
  7. This is another option for an Overview slide.
  8. This is another option for an Overview slide.
  9. What will the audience be able to do after this training is complete? Briefly describe each objective how the audience will benefit from this presentation.
  10. What will the audience be able to do after this training is complete? Briefly describe each objective how the audience will benefit from this presentation.
  11. Use a section header for each of the topics, so there is a clear transition to the audience.
  12. Add slides to each topic section as necessary, including slides with tables, graphs, and images. See next section for sample table, graph, image, and video layouts.
  13. Keep it brief. Make your text as brief as possible to maintain a larger font size.
  14. Microsoft Engineering Excellence Microsoft Confidential
  15. Microsoft Engineering Excellence Microsoft Confidential Is your presentation as crisp as possible? Consider moving extra content to the appendix. Use appendix slides to store content that you might want to refer to during the Question slide or that may be useful for attendees to investigate deeper in the future.