HTML5. Winning the future?

HTML5WINNING THE FUTURE?

Sergey Galitskiy @Lohika7 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 -> cometCanvas -> flash|jpgSVG -> flash|VML...

• Не используйте html5

ИЛИ НЕТ?

QUESTIONS?

• Бонус

SERGEY GALITSKIY

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

Email: [email protected]: sergiyko911.gluckFB: http://facebook.com/sgalitskiy

HTML5. Winning the future?

Technology

Transcript of HTML5. Winning the future?