Client-side Transformations
0 likes234 views
The document discusses client-side transformations, which involve altering a webpage's content on the client side for improved mobile website creation. It outlines the advantages and implementation techniques for layout and resource control using JavaScript, including methods to manipulate HTML elements and manage script loading. Additionally, it presents example codes demonstrating these techniques and encourages the exploration of client-side transformations.
![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>](https://image.slidesharecdn.com/client-side-transformations-110310012940-phpapp02/85/Client-side-Transformations-17-320.jpg)
![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>](https://image.slidesharecdn.com/client-side-transformations-110310012940-phpapp02/85/Client-side-Transformations-19-320.jpg)
![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>](https://image.slidesharecdn.com/client-side-transformations-110310012940-phpapp02/85/Client-side-Transformations-20-320.jpg)
![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>](https://image.slidesharecdn.com/client-side-transformations-110310012940-phpapp02/85/Client-side-Transformations-21-320.jpg)
![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);](https://image.slidesharecdn.com/client-side-transformations-110310012940-phpapp02/85/Client-side-Transformations-31-320.jpg)
![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);](https://image.slidesharecdn.com/client-side-transformations-110310012940-phpapp02/85/Client-side-Transformations-32-320.jpg)
![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);](https://image.slidesharecdn.com/client-side-transformations-110310012940-phpapp02/85/Client-side-Transformations-33-320.jpg)
![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);](https://image.slidesharecdn.com/client-side-transformations-110310012940-phpapp02/85/Client-side-Transformations-34-320.jpg)
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
Editor's Notes
- #2: \n
- #3: The ability to transform the way a webpage is loaded by the client.\n
- #4: The ability to transform the way a webpage is loaded by the client.\n
- #5: SHOW ME\n
- #6: 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
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: Why didn&#x2019;t you just do this in the beginning\n
- #13: \n
- #14: So we got this, how are we actually gonna make it work?\n
- #15: So we got this, how are we actually gonna make it work?\n
- #16: So we got this, how are we actually gonna make it work?\n
- #17: So we got this, how are we actually gonna make it work?\n
- #18: So we got this, how are we actually gonna make it work?\n
- #19: http://developer.apple.com/library/safari/#documentation/Tools/Conceptual/SafariExtensionGuide/MessagesandProxies/MessagesandProxies.html#//apple_ref/doc/uid/TP40009977-CH14-SW9\n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: So ... can we do that dynamcially?\n
- #25: So ... can we do that dynamcially?\n
- #26: So ... can we do that dynamcially?\n
- #27: So ... can we do that dynamcially?\n
- #28: So ... can we do that dynamcially?\n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n