Your SlideShare is downloading. ×
0
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
A HTML5 platform demókon keresztül
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A HTML5 platform demókon keresztül

106

Published on

Az előadás témája a HTML5 platform programozása: …

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
106
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 platform Canvas, SVG, Web fonts, Audio, Video, … Dávid Zoltán david.zoltan@aut.bme.hu BMEAAIT
  • 2. Demo
  • 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. 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. @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. Video <video id="myVideo" loop controls onmouseover="this.play()" onmouseout="this.pause()"> <source src="video.mp4"> </video> PAGE 6
  • 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. Local storage localStorage.setItem('msg', 'Sziasztok!'); localStorage.getItem('msg'); localStorage.removeItem('msg'); PAGE 8
  • 9. Feature detection PAGE 9
  • 10. Van-e local storage? function supports_html5_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } } PAGE 10
  • 11. Van-e local storage? - Modernizr if (Modernizr.localstorage) PAGE 11
  • 12. diveintohtml5.info PAGE 12
  • 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. tanfolyam@msdnkk.hu

×