Weitere ähnliche Inhalte Ähnlich wie Clean separation (20) Kürzlich hochgeladen (20) Clean separation14. view
controller
model
Back End Example
19. JS
CSS
HTML
Front End
28. Before
<table border="0" cellspacing="0" cellpadding="0" width="100%"
height="100%">
<tr>
<td valign="top" width="75%" bgcolor="red"><font color="#ffffff"
size="2">Hello world</font></td>
<td valign="top" width="25%" bgcolor="blue"><a
onmouseover="foo()"
onmouseout="bar()"
href="http://www.google.com" style="color:#fff">Cool</a></td>
</tr>
</table>
29. After - HTML
<div class="main">
<div class="content">Hello world</
div>
<div class="callout"><a
href="http://
www.google.com">Cool</a></div>
</div>
41. Print stylesheets
body{font:10pt times new roman;}
h1{border-bottom:1pt solid black;
color:#000; font-size:12pt; text-
transform: uppercase; padding:0 0 3pt
0;}
.navigation{display:none}
.content{width:7.5in}
46. Examples in the wild
• jQuery + jQuery UI
• Sencha Ext-js/GXT
• CSS Zen Garden
47. Examples in the wild
• jQuery + jQuery UI
• Sencha Ext-js/GXT
• CSS Zen Garden
48. Examples in the wild
• jQuery + jQuery UI
• Sencha Ext-js/GXT
• CSS Zen Garden
Hinweis der Redaktion Audience - knows HTML, but not really\n\n\n \n\n \n\n separate lunch and learn beginner series\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n Add example of bad code\n Probably need 3 slides, show each layer\n \n\n \n\n Presentation in the content layer\nWhat if presentation needs to change?\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n Fast dev, not maintainable\n \n\n \n\n \n\n \n\n \n\n