A HTML5 platform demókon keresztül

334 views

Published on

Az előadás témája a HTML5 platform programozása:
- canvas,
- svg,
- audio,
- video,
- webfonts

Az előadás megtekinthető itt:
http://devportal.hu/tv/Default.aspx?auth=0&sid=92353d2f-32a4-41e0-97f6-3a2663598249

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
334
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

A HTML5 platform demókon keresztül

  1. 1. HTML5 platform Canvas, SVG, Web fonts, Audio, Video, … Dávid Zoltán david.zoltan@aut.bme.hu BMEAAIT
  2. 2. Demo
  3. 3. Canvas var canvas = document.getElementById('rajztabla'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgba( 0, 255, 0, 0.5 )'; ctx.translate(300, 250); for (var i = 0; i < 10; i++) { ctx.rotate(0.2 * Math.PI); ctx.fillRect(20, 0, 200, 100); } PAGE 3
  4. 4. SVG <!DOCTYPE html> <html> <body> <svg> <rect width="600" height="150" style="fill:red" /> <rect width="600" height="150" y="150" style="fill:white" /> <rect width="600" height="150" y="300" style="fill:green" /> </svg> </body> </html> PAGE 4
  5. 5. @font-face @font-face { font-family: SajatFont; src: url("myfont.woff"); } <p style="font: 20pt SajatFont"> Richter Elemér, kilenc kutya, hat egér </p> PAGE 5
  6. 6. Video <video id="myVideo" loop controls onmouseover="this.play()" onmouseout="this.pause()"> <source src="video.mp4"> </video> PAGE 6
  7. 7. Audio <audio id="player" controls src='zene.mp3'> </audio> document.getElementById('player').volume = 0.5; document.getElementById('player').play(); document.getElementById('player').pause(); document.getElementById('player').currentTime = 0; PAGE 7
  8. 8. Local storage localStorage.setItem('msg', 'Sziasztok!'); localStorage.getItem('msg'); localStorage.removeItem('msg'); PAGE 8
  9. 9. Feature detection PAGE 9
  10. 10. Van-e local storage? function supports_html5_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } } PAGE 10
  11. 11. Van-e local storage? - Modernizr if (Modernizr.localstorage) PAGE 11
  12. 12. diveintohtml5.info PAGE 12
  13. 13. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. Thank you.
  14. 14. tanfolyam@msdnkk.hu

×