Download as KEY, PPTX
![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)
Uploaded byJohn Boxall
Client-side Transformations
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.
More Related Content
Client-side Transformations
- 1. Client-side Transformations @johnboxall @vanjs march 9 2011
- 2. What are client-sidetransformations?
- 3. What are client-sidetransformations? 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 youever want to do this?
- 7. Why would youever want to do this? Because you make mobile websites!
- 8. To make mobilewebsites we used to do this PHONE PROXY CONTENT
- 9. To make mobilewebsites we used to do this • good • bad • layout control • politics • resource control • operations PHONE PROXY CONTENT
- 10. Client-side transformations letus do this JS PHONE PROXY CONTENT
- 11. Client-side transformations letus do this
- 12. Client-side transformations letus do this • good • bad • layout control • ??? • resource control JS PHONE CONTENT
- 13. How should weimplement 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 weimplement layout control? <html> <body> <h1>One</h1> <h2>Two</h1> <script type="text/javascript"> $('h2').before('h1'); </script> </body> </html>
- 15. How should weimplement 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 weimplement 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 weimplement 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 weimplement resource control? <script type="text/javascript"> var $doc = $(document).bind('beforeload', function(e) { e.preventDefault(); }); </script>
- 19. How can weimplement 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 weimplement 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 weimplement 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 weimplement resource control? <script type="text/x-javascript">alert('one');</script>
- 23. How can weimplement 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 weimplement 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 weimplement 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 weimplement 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 weimplement 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 weimplement 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 XResource control
- 30. Let’s build amobile 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