Your SlideShare is downloading. ×
第5回SCDN - Things that become possible with HTML5
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

第5回SCDN - Things that become possible with HTML5

333

Published on

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
333
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Things that becomepossible with HTML5 Atsuya Takagi
    • 2. Introduction• (@atsuya)• M.S. in computer science from California State University, Northridge• book on node• http://about.me/atsuya
    • 3. Motion with CSS• http://www.htmlfivewow.com/slide42
    • 4. 3D transforms with CSS• http://www.htmlfivewow.com/slide44
    • 5. Canvas• http://www.htmlfivewow.com/slide47
    • 6. 2D Canvas• http://www.htmlfivewow.com/slide49
    • 7. WebGL• http://www.htmlfivewow.com/slide51• http://www.htmlfivewow.com/slide52
    • 8. Audio• http://www.htmlfivewow.com/slide57
    • 9. Play Sound• http://www.htmlfivewow.com/slide59
    • 10. Generate Sound• http://www.htmlfivewow.com/slide60
    • 11. Realtime Audio Analysis• http://www.htmlfivewow.com/slide64
    • 12. File• http://www.htmlfivewow.com/slide17
    • 13. Directory• http://www.htmlfivewow.com/slide18
    • 14. Drag and Drop• http://www.htmlfivewow.com/slide19
    • 15. FileReader• http://www.htmlfivewow.com/slide23
    • 16. Blob URL• http://www.htmlfivewow.com/slide25
    • 17. File System• http://www.htmlfivewow.com/slide29
    • 18. File System Access• http://www.htmlfivewow.com/slide30
    • 19. file transferring
    • 20. file transferringusing browsers
    • 21. actual P2P
    • 22. but Flash sucks
    • 23. tensoid
    • 24. Demo
    • 25. not actual P2P
    • 26. but it rocks
    • 27. Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
    • 28. Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
    • 29. Websocket• bi-directional, full-duplex• browser initiates connection to server • server can push anytime • no polling. it’s realtime.
    • 30. Websocket in tensoid• all communications regarding file transfer• send/receive base64 encoded data• some traffic control
    • 31. Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
    • 32. Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
    • 33. TM• single threaded, event loop, non-blocking server framework • every api call is asynchronous• write server code in javascript
    • 34. TM
    • 35. Node in tensoid• all server side stuff• websocket talks to node• receive data from sender, transfer that data to receiver
    • 36. Detail of tensoid• listen to file drag and drop• notify node about file is ready• node records sender’s session id• node sends back the url
    • 37. Detail of tensoid• receiver accesses the url• notify node to start transferring• node notifies sender to start• sender sends data, node receives it, node sends it to receiver• sender notifies when it’s done
    • 38. Conclusion• html5 rocks• a lot of existing web applications has already adapted• so many things you can do with it• tensoid is just one of them
    • 39. Resources• http://www.html5rocks.com• http://www.htmlfivewow.com/• http://nodejs.org/• http://socket.io/• https://github.com/atsuya/tensoid
    • 40. Thank you!

    ×