Client-side Transformations
•Als KEY, PDF herunterladen•
0 gefällt mir•231 views
Client-side transformations allow you to remix a webpage after it has been delivered using JavaScript. Learn how to relayout a page and manage the loading of external resources all from the comfort of the client!
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Client-side Transformations
Ähnlich wie Client-side Transformations (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Client-side Transformations
- 1. Client-side Transformations @johnboxall @vanjs march 9 2011
- 2. What are client-side transformations?
- 3. What are client-side transformations? Transforming a webpage. On the client side.
- 4. Taking your content... <html> <body> <h1>one</h1> <h2>two</h2> <body> </html>
- 5. Taking your content... and remixing it! <html> <html> <body> <body> <h1>one</h1> <h2>two</h2> <h2>two</h2> <h1>one</h1> <body> <body> </html> </html>
- 6. Why would you ever want to do this?
- 7. Why would you ever want to do this? Because you make mobile websites!
- 8. To make mobile websites we used to do this PHONE PROXY CONTENT
- 9. To make mobile websites we used to do this • good • bad • layout control • politics • resource control • operations PHONE PROXY CONTENT
- 10. Client-side transformations let us do this JS PHONE PROXY CONTENT
- 11. Client-side transformations let us do this
- 12. Client-side transformations let us do this • good • bad • layout control • ??? • resource control JS PHONE CONTENT
- 13. How should we implement layout control? <html> <html> <body> <body> <h1>one</h1> <h2>two</h2> <h2>two</h2> <h1>one</h1> <body> <body> </html> </html>
- 14. How should we implement layout control? <html> <body> <h1>One</h1> <h2>Two</h1> <script type="text/javascript"> $('h2').before('h1'); </script> </body> </html>
- 15. How should we implement layout control? <html> <body> <script type="text/javascript"> var $body = $('body').hide(); </script> <h1>One</h1> <h2>Two</h1> <script type="text/javascript"> $(function() { $('h2').before($('h1')); $body.show(); }); </script> </body> </html>
- 16. How can we implement resource control? <html> <body> <script type="text/javascript" src="one.js"></script> <script type="text/javascript" src="two.js"></script> </body> </html>
- 17. How can we implement resource control? <html> <body> <script type="text/javascript" src="one.js"></script> <script type="text/javascript" src="two.js"></script> <script type="text/javascript"> $('[src="one.js"]').before($('[src="two.js"]')); </script> </body> </html>
- 18. How can we implement resource control? <script type="text/javascript"> var $doc = $(document).bind('beforeload', function(e) { e.preventDefault(); }); </script>
- 19. How can we implement resource control? <html> <body> <script type="text/javascript"> var scripts = []; var $doc = $(document).bind('beforeload', function(e) { scripts.push(e.target); e.preventDefault(); }); $(function() { $doc.unbind('beforeload'); (function loadScripts() { var script = scripts.pop(); if (script) $.getScript(script.src, loadScripts); })(); }); </script> <script type="text/javascript" src="one.js"></script> <script type="text/javascript" src="two.js"></script> </body> </html>
- 20. How can we implement resource control? <html> <body> <script type="text/javascript"> var scripts = []; var $doc = $(document).bind('beforeload', function(e) { scripts.push(e.target); e.preventDefault(); }); $(function() { $doc.unbind('beforeload'); (function loadScript() { var script = scripts.pop(); if (script) $.getScript(script.src, loadScript); })(); }); </script> <script type="text/javascript" src="one.js"></script> <script type="text/javascript" src="two.js"></script> </body> </html>
- 21. How can we implement resource control? <html> <body> <script type="text/javascript"> var scripts = []; var $doc = $(document).bind('beforeload', function(e) { scripts.push(e.target); e.preventDefault(); }); $(function() { $doc.unbind('beforeload'); (function loadScript() { var script = scripts.pop(); if (script) $.getScript(script.src, loadScript); })(); }); </script> <script type="text/javascript">alert('one');</script> <script type="text/javascript">alert('two');</script> </body> </html>
- 22. How can we implement resource control? <script type="text/x-javascript">alert('one');</script>
- 23. How can we implement resource control? <html> <body> <noscript> <script type="text/javascript">alert('one');</script> <script type="text/javascript">alert('two');</script> </noscript> </body> </html>
- 24. How can we implement resource control? <html> <body> <script type="text/javascript"> document.write('x3Cnoscript>'); </script> <script type="text/javascript">alert('one');</script> <script type="text/javascript">alert('two');</script> </noscript> </body> </html>
- 25. How can we implement resource control? <html> <body> <script type="text/javascript"> document.write('x3Cnoscript>'); </script> <script type="text/javascript">alert('one');</script> <script type="text/javascript">alert('two');</script> </noscript> </body> </html>
- 26. How can we implement resource control? <html> <body> <script type="text/javascript"> document.write('x3Cnoscript>'); </script> <script type="text/javascript">alert('one');</script> <script type="text/javascript">alert('two');</script> </noscript> </body> </html>
- 27. How can we implement resource control? <html> <body> <script type="text/javascript"> document.write('x3Cstyle type="text/x-css">'); </script> <script type="text/javascript">alert('one');</script> <script type="text/javascript">alert('two');</script> </style> </body> </html>
- 28. How can we implement resource control? <html> <body> <script type="text/javascript"> document.write('x3Cstyle type="text/x-css">'); </script> <script type="text/javascript">alert('one');</script> <script type="text/javascript">alert('two');</script> </style> <script type="text/javascript"> var $scripts = $($('style').html()); $scripts.reverse(); $('body').append($scripts); </script> </body> </html>
- 29. X Layout control X Resource control
- 30. Let’s build a mobile site using CST.
- 31. var $content = $($('style').html()); var context = { '#title': $('h1', $content), '#price': $(div.price, $content).html(), '#sizes': (function() { return $('#size', $content); }) } var templateStr = [ '<div id="title"></div>', '<div id="price"></div>', '<div id="sizes"></div>' ].join(''); var $transform = $.template(templateStr, context); $('body').append($transform);
- 32. var $content = $($('style').html()); var context = { '#title': $('h1', $content), '#price': $(div.price, $content).html(), '#sizes': (function() { return $('#size', $content); }) } var templateStr = [ '<div id="title"></div>', '<div id="price"></div>', '<div id="sizes"></div>' ].join(''); var $transform = $.template(templateStr, context); $('body').append($transform);
- 33. var $content = $($('style').html()); var context = { '#title': $('h1', $content), '#price': $(div.price, $content).html(), '#sizes': (function() { return $('#size', $content); }) } var templateStr = [ '<div id="title"></div>', '<div id="price"></div>', '<div id="sizes"></div>' ].join(''); var $transform = $.template(templateStr, context); $('body').append($transform);
- 34. var $content = $($('style').html()); var context = { '#title': $('h1', $content), '#price': $(div.price, $content).html(), '#sizes': (function() { return $('#size', $content); }) } var templateStr = [ '<div id="title"></div>', '<div id="price"></div>', '<div id="sizes"></div>' ].join(''); var $transform = $.template(templateStr, context); $('body').append($transform);
- 35. Client-side Transformations PS. We’re hiring: http://mobify.me/jobs/ @johnboxall @vanjs march 9 2011
Hinweis der Redaktion
- \n
- The ability to transform the way a webpage is loaded by the client.\n
- The ability to transform the way a webpage is loaded by the client.\n
- SHOW ME\n
- Totally remix the page.\nUse existing components - or don&#x2019;t\nHoney Badger - it just care. We don&#x2019;t care about your original HTML. (but we could if we wanted to)\n
- \n
- \n
- \n
- \n
- \n
- Why didn&#x2019;t you just do this in the beginning\n
- \n
- So we got this, how are we actually gonna make it work?\n
- So we got this, how are we actually gonna make it work?\n
- So we got this, how are we actually gonna make it work?\n
- So we got this, how are we actually gonna make it work?\n
- So we got this, how are we actually gonna make it work?\n
- http://developer.apple.com/library/safari/#documentation/Tools/Conceptual/SafariExtensionGuide/MessagesandProxies/MessagesandProxies.html#//apple_ref/doc/uid/TP40009977-CH14-SW9\n
- \n
- \n
- \n
- \n
- So ... can we do that dynamcially?\n
- So ... can we do that dynamcially?\n
- So ... can we do that dynamcially?\n
- So ... can we do that dynamcially?\n
- So ... can we do that dynamcially?\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n