• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
第5回SCDN - Things that become possible with HTML5
 

第5回SCDN - Things that become possible with HTML5

on

  • 404 views

 

Statistics

Views

Total Views
404
Views on SlideShare
404
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

第5回SCDN - Things that become possible with HTML5 第5回SCDN - Things that become possible with HTML5 Presentation Transcript

  • Things that becomepossible with HTML5 Atsuya Takagi
  • Introduction• (@atsuya)• M.S. in computer science from California State University, Northridge• book on node• http://about.me/atsuya
  • Motion with CSS• http://www.htmlfivewow.com/slide42
  • 3D transforms with CSS• http://www.htmlfivewow.com/slide44
  • Canvas• http://www.htmlfivewow.com/slide47
  • 2D Canvas• http://www.htmlfivewow.com/slide49
  • WebGL• http://www.htmlfivewow.com/slide51• http://www.htmlfivewow.com/slide52
  • Audio• http://www.htmlfivewow.com/slide57
  • Play Sound• http://www.htmlfivewow.com/slide59
  • Generate Sound• http://www.htmlfivewow.com/slide60
  • Realtime Audio Analysis• http://www.htmlfivewow.com/slide64
  • File• http://www.htmlfivewow.com/slide17
  • Directory• http://www.htmlfivewow.com/slide18
  • Drag and Drop• http://www.htmlfivewow.com/slide19
  • FileReader• http://www.htmlfivewow.com/slide23
  • Blob URL• http://www.htmlfivewow.com/slide25
  • File System• http://www.htmlfivewow.com/slide29
  • File System Access• http://www.htmlfivewow.com/slide30
  • file transferring
  • file transferringusing browsers
  • actual P2P
  • but Flash sucks
  • tensoid
  • Demo
  • not actual P2P
  • but it rocks
  • Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
  • Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
  • Websocket• bi-directional, full-duplex• browser initiates connection to server • server can push anytime • no polling. it’s realtime.
  • Websocket in tensoid• all communications regarding file transfer• send/receive base64 encoded data• some traffic control
  • Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
  • Inside tensoid• file API to read file• websocket for send/receive• node as connection hub
  • TM• single threaded, event loop, non-blocking server framework • every api call is asynchronous• write server code in javascript
  • TM
  • Node in tensoid• all server side stuff• websocket talks to node• receive data from sender, transfer that data to receiver
  • 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
  • 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
  • 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
  • Resources• http://www.html5rocks.com• http://www.htmlfivewow.com/• http://nodejs.org/• http://socket.io/• https://github.com/atsuya/tensoid
  • Thank you!