Your SlideShare is downloading. ×
  • Like
Pushing the Web: Interesting things to Know
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Pushing the Web: Interesting things to Know

  • 3,475 views
Published

 

Published in Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,475
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
12
Comments
0
Likes
2

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. Pushing the web:Interesting things to knowabout upcoming webstandards By Shwetank Dixit, Opera Software
  • 2. about meWeb Evangelist, Opera DeveloperRelations TeamMember, W3C Mobile Web for SocialDevelopment GroupMember, W3C Web EducationCommunity Grouptwitter.com/shwetankemail: shwetankd@opera.com
  • 3. Front-end development - a lot of learn!
  • 4. We’ll focus on a few things
  • 5. We’ll focus on a few things HTML5 and friends
  • 6. Same Origin Policy Our story begins from here...
  • 7. Same Origin Policy1. Let /A/ be the first origin being compared, and let /B/ be the second origin being compared. 2. If either /A/ or /B/ is not a scheme/host/port tuple, return an implementation-defined value. 3. If /A/ and /B/ have scheme components that are not identical, return false. 4. If /A/ and /B/ have host components that are not identical, return false. 5. If /A/ and /B/ have port components that are not identical, return false. 6. Return true.
  • 8. Same Origin PolicyShould have the same...Scheme / Host / Port
  • 9. Same Origin PolicyThese will NOT match, and considered separate originshttp://www.example.orghttps://www.example.org
  • 10. Same Origin PolicyThese will NOT match, and considered separate originshttp://www.example.orghttp://xyz.example.org
  • 11. Same Origin PolicyThese will NOT match, and considered separate originshttp://www.example.orghttp://www.example.org:1337
  • 12. Same Origin PolicyThese WILL match, and are considered the same originhttp://www.example.org/abc/http://www.example.org/xyz/
  • 13. Storage: Web Storage
  • 14. The problem with cookiesUnreliableNo programmatic APIs to manipulate itNot structuredMost of important of all ...Small file size, so very limited data can bestored.
  • 15. Web StorageSession Storage and Local Storage
  • 16. localStorage.setItem(yourkey,yourvalue); // Store the valuevar item = localStorage.getItem(yourkey); // Retrieve the value and assignit to a variableExample of using Web Storage to store andretrieve values in the browser’s local storageWith this, even if you close the browser and re-open the page again, the values shouldstill load properly.
  • 17. You can store images (andmore) with localStorage ....BUT DON”T.
  • 18. Automatically save enteredform info locallyin case page crashes or closes, person canresume from where he left off
  • 19. STORE USER DATA OFFLINE PERIODICALLY<textarea id="draft" rows="10" cols="30"></textarea>......function saveMessage(){� var message = document.getElementById("draft");� localStorage.setItem("message", message.value)}setInterval(saveMessage, 500);
  • 20. Or...You could save only when you detect a newkeystroke (or a minimum number of them)
  • 21. GotchaTwo tabs updating the same value
  • 22. Storage eventsKnow if some other page has changed thevalue or not
  • 23. GET NEW VALUE IF ITS BEEN CHANGED IN PARALLEL TABaddEventListener(storage, function(event){� if (e.oldValue){� alert(changed from +event.oldValue+ to +event.newValue+);� }}, false);
  • 24. GotchaUsing a free hosting service - Don’t use localstorage with it if they store users accountson different directories.e.g, freehosting.com/user1and freehosting.com/user2
  • 25. Cross Origin ResourceSharing (CORS)
  • 26. Whats CORS?CORS is a system of headers and rules thatallow browsers and servers to communicatewhether or not a given origin is allowedaccess to a resource stored on another.
  • 27. Access-Control-Allow-OriginHeader to Let the referrer know whether it isallowed to use the target resource.
  • 28. Access-Control-Allow-OriginAccess-Control-Allow-Origin: nullAccess-Control-Allow-Origin: *Access-Control-Allow-Origin: http://foo.example
  • 29. Cross Domain XHRvar xhr = new XMLHttpRequest();var onLoadHandler = function(event) { /* do something with the response */}xhr.open(GET,http://url-of-other.server/and/path/to/script);
  • 30. Capture JS errors ... with JS
  • 31. window.onerror
  • 32. window.onerrorError MessageLine NumberFile URL in question
  • 33. window.onerrorwindow.onerror = function(message, url, linenumber) { alert("JavaScript error: " + message + " on line " +linenumber + " for " + url);}
  • 34. What could you do with it?
  • 35. Better looking errormessages.
  • 36. Log errors in a flat file or DB.
  • 37. WebSockets
  • 38. Previous techniquesContinuous PollingLong Polling
  • 39. WebSocketsBuilt Over HTTPFull DuplexBi-Directional
  • 40. HTTP Server ‘upgrades’ toa WebSocket server
  • 41. The initiating handshake from the client should look like this:GET /chat HTTP/1.1 Host: server.example.com Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13And on the serverHTTP/1.1 101 Switching Protocols Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec-WebSocket-Protocol: chat
  • 42. What happens1. The client sends the Sec-WebSocket-Key string dGhlIHNhbXBsZSBub25jZQ==2. The server appends the magic string to form the stringdGhlIHNhbXBsZSBub25jZQ== 258EAFA5-E914-47DA-95CA-C5AB0DC85B113. Now the server generates the SHA-1 hash for this longer string, which isb37a4f2cc0624f1690f64606cf385945b2bec4ea4. Finally, the server base64-encodes the hash string to gives3pPLMBiTxaQ9kYGzzhZRbK+xOo=5. And this base64-encoded value is used in the Sec-WebSocket-Accept headerin the server’s response.
  • 43. WebSockets APIif (WebSocket in window){ /* WebSocket is supported. You can proceed with your code*/} else { /*WebSockets are not supported. Try a fallback method like long-polling etc*/}
  • 44. WebSockets APIvar connection = new WebSocket(ws://example.org:12345/myapp);or wss://, which is the secure socket variant to ws:// in the same way https is tohttpvar connection = new WebSocket(wss://secure.example.org:67890/myapp);
  • 45. Handling an open connectionconnection.onopen = function(){ /*Send a small message to the console once the connection is established */ console.log(Connection open!);}
  • 46. Sending Messagesconnection.send(Hey server, whats up?);orvar message = {name: bill murray,comment: No one will ever believe you};connection.send(JSON.stringify(message));
  • 47. Receiving Messagesconnection.onmessage = function(e){ var server_message = e.data; console.log(server_message);}
  • 48. Use CasesAny App which wants real time updating of info1. High performance web based games2. Sport Scores3. Social Media real time updates4. Breaking news real time updates5. Chat applications
  • 49. My Websockets article onDeveloperFusionhttp://www.developerfusion.com/article/143158/an-introduction-to-websockets/
  • 50. Device OrientationAccess to gyroscope, accelerometer info etc
  • 51. Access gyroscope infowindow.addEventListener("deviceorientation", function(event) { // process event.alpha, event.beta andevent.gamma }, true);
  • 52. Access accelerometer infowindow.addEventListener("devicemotion",function(event) { // Process event.acceleration }, true);
  • 53. Another sneak peak
  • 54. Check for accessvar options = {‘video’: true, ‘audio’: false};if (navigator.getUserMedia){ navigator.getUserMedia(options, v_success, v_error); }else{ not_supported(); }
  • 55. Check for accessvar video_element = document.querySelector(video);......function v_success(stream){ video_element.src = stream;}
  • 56. Use camera + <video> +<canvas> for new tricksvar button = document.querySelector(#button);button.addEventListener(click,snapshot, false);......function snapshot(){ var c = document.querySelector(canvas); var ctx = c.getContext(2d); var cw = c.clientWidth; var ch = c.clientHeight; ctx.drawImage(video_element, 0, 0, cw, ch); }
  • 57. Keep in mindWebRTC spec (containing getUserMedia) isstill in flux. Not a mature standard yet.Webkit has prefixed its version ofgetUserMedia.
  • 58. Get it on:Opera Labs BuildLatest Opera.NextOpera Mobile 12
  • 59. Opera Dragonfly
  • 60. (RIGHT-CLICK ON PAGE) -> ‘INSPECT ELEMENT’
  • 61. Inspect the DOM
  • 62. Debug JavaScript
  • 63. Network inspector
  • 64. Style profiler
  • 65. Tools - Color Picker
  • 66. Remote debugging
  • 67. Opera Mobile Emulator
  • 68. Opera Mobile Emulator
  • 69. Opera Mobile Emulator
  • 70. The Developer Briefcase
  • 71. ‘Edit the Page’ extension
  • 72. Other developer extensions forOpera- YSlow!- PageRank- Firebug Lite- LiveReload- Layers- ResizeMe- GitHub Notifierand more... HTTPS://ADDONS.OPERA.COM/EN/EXTENSIONS/CATEGORY/WEB-DEVELOPMENT
  • 73. Read up onDev.opera.com
  • 74. Cheers!More questions? Ask me now or contact meat:shwetankd@opera.comor, twitter.com/shwetank