future shock treatment
ctrl+s SVN
HTML CSS JavaScript
elements attributes class names IDs HTML
body id="users" /users/ body id="users" class="view" /users/username body id="users" class="edit" /users/username/edit HTML
site <body> <div class="section"> ... </div><!-- /.section --> .section { width: 60%; }
site-area <body id="users"> <div class="section"> ... </div><!-- /.section --> #users .section { width: 40%; }
site-area-page <body id="users" class="view"> <div class="section"> ... </div><!-- /.section --> #users.view .section { width: 100%; } #users.edit .section { width: 80%; }
element selectors attribute selectors class selectors ID selectors CSS
global styles helper styles page structure styles page-specific styles CSS
typography.css colour.css layout.css CSS
screen.css print.css handheld.css CSS
screen.css <link rel="stylesheet" media="screen" type="text/css" href="screen.css?20090622"> CSS
reset lists tables forms CSS library
CSS framework
JavaScript framework
jQuery “Find stuff and do stuff to it.” CSS selectors
jQuery jQuery(selector).event(function(){ action; }); document .getElementById('foo') .getElementsByTagName('bar') jQuery('#foo .bar')
jQuery <script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1/jquery.min.js"> </script>
jQuery jQuery(function($) { $('body').addClass('hasJS'); }); .hasJS .module { display: none; }
progressive disclosure pattern recognition
<a href="#login" class="toggler">log in</a> ... <div id="login"> ... </div><!-- /#login --> .hasJS #login { display: none; position: absolute; } jQuery('a.toggler').click(function() { var id = jQuery(this).attr('href'); jQuery(id).slideToggle('fast'); });
table:hover thead th a table tbody tr:hover th a table tbody tr td a:hover
a-grade known knowns c-grade known unknowns x-grade unknown unknowns browser support IE6
[ ] a t ie6 p = 50 log ––––– + 1 t a ie6 IE6
box-shadow: 5px 5px 0 rgba(0,0,13,0.3)
blockquote p:last-child
text-shadow: 1px 1px 1px #fff; border-radius: 1em;
640 % 800 1024 1280 screen support
min-width: px max-width: em screen support
formats text binary simple complex open closed
standards OED Duden microformats W3C 2022? HTML5
<header></header> <nav></nav> <section> <header></header> <article></article> <article></article> <footer></footer> </section> <aside></aside> <footer></footer> HTML5
<div class="header"></div><!-- /.header --> <div class="nav"></div><!-- /.nav --> <div class="section"> <div class="header"></div><!-- /.header --> <div class="article"></div><!-- /.article --> <div class="article"></div><!-- /.article --> <div class="footer"></div><!-- /.footer --> </div><!-- /.section --> <div class="aside"></div><!-- /.aside --> <div class="footer"></div><!-- /.footer --> HTML5
/users/ /users/username /users/username/edit /does/ /does/teach/ /does/teach/ajax URIs
“Cool URIs don’t change” —Tim Berners-Lee, 01998 Historical note: At the end of the 20th century when this was written, “cool” was an epithet of approval particularly among young, indicating trendiness, quality, or appropriateness. http://www.w3.org/Provider/Style/URI
http://www.flickr.com/photos/rachelandrew/357308665/ http://www.flickr.com/photos/withassociates/3212670286/ http://www.flickr.com/photos/eggplant/44101381/
Recommend
More recommend
