際際滷

際際滷Share a Scribd company logo
HTML5
WINNING THE FUTURE?
        Sergey Galitskiy @Lohika
                      7 Dec 2012
亠仄仆仂亢从仂 仄舒亞亳亳
HTML5. Winning the future?
HTML5 从舒从 亠仆亟
HTML5. Winning the future?
 亳亳仆仆亶

 仂仍亰仂于舒亠仍从亳亶     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. 仂仗仆仂
HTML5. Winning the future?
2. 亟舒仗亳于仆仂
HTML5. Winning the future?
HTML5. Winning the future?
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

HTML5. Winning the future?

  • 1. HTML5 WINNING THE FUTURE? Sergey Galitskiy @Lohika 7 Dec 2012
  • 7. HTML5 仂 仂?
  • 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
  • 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 ...
  • 25. SERGEY GALITSKIY Email: sgalitskiy@lohika.com Skype: sergiyko911.gluck FB: http://facebook.com/sgalitskiy 息 舒仆仆仂亠 仗仂于亠于仂于舒仆亳亠 仂舒亢舒仍仂 仄仍亠亶 舒于仂舒 亳 仆亳从仂亳仄 仂弍舒亰仂仄 仆亠 仗亠亠仆亟亠 仆舒 于亠仂仂仆亠亠 亳亰亠仆亳亠 html5

Editor's Notes

  • #2: 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.
  • #3: 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.
  • #5: This is another option for an Overview slides using transitions.
  • #8: This is another option for an Overview slides using transitions.
  • #12: This is another option for an Overview slide.
  • #14: This is another option for an Overview slide.
  • #15: This is another option for an Overview slide.
  • #16: This is another option for an Overview slide.
  • #17: 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.
  • #18: 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.
  • #19: Use a section header for each of the topics, so there is a clear transition to the audience.
  • #20: 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.
  • #22: Keep it brief. Make your text as brief as possible to maintain a larger font size.
  • #24: Microsoft Engineering Excellence Microsoft Confidential
  • #26: 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.