Maquetado con HTML y CSS
Post on 26-Jan-2015
17227 Views
Preview:
DESCRIPTION
Transcript
MaquetadoDiseño de interfaces y maquetado web
Manuel Razzari http://convistaalmar.com.ar
http://creativecommons.org/licenses/by/2.5/ar/
2
¿Qué es una página web?
3
¿Qué es una página web?
4
¿Qué es una página web?
5
¿Qué es un tag?
HTMLMarkup language: lenguaje de marcado
Tag: etiqueta
Hola, <strong>que tal</strong>
6
¿Qué es un tag?
Puedo poner una etiqueta adentro de otra.
<p>Hola, <strong>que tal</strong></p>
7
¿Qué es un tag?
Toda etiqueta que se abre tiene que cerrarse.Siempre tiene que quedar una adentro de otra.
Bien:
<p>Hola, <strong>que tal</strong></p>
Mal:
<p>Hola, <strong>que tal</p></strong>
8
Árbol de elementos
9
Doctype
Nos dice que tipo de documento es y su versión.
10
Head
Información acerca de la página.
11
Title
Aparece en la barra de título y en los tabs.
12
Title
Es el link principal en los resultados de búsqueda.
http://www.socialpatterns.com/search-engine-optimization/writing-better-titles/
13
Title
http://www.deyalexander.com.au/publications/page-titles.html
14
Body
Lo que se ve dentro de la ventana del navegador
15
El validador
¿Cómo sé que lo estoy haciendo bien?
http://validator.w3.org
Nos asegura que:• Los tags están bien tipeados• Están correctamente anidados• No falta ningún elemento requerido• No hay errores de sintaxis
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you
16
El validador
<p>Hola, <strong>que tal</p></strong>
17
Links
HTMLMarkup Language
18
Links
HTMLHyperText Markup Language
pagina1.html
pagina2.html
foto.jpg
etc.
19
Links
Link entre dos páginas.a: ancla
href: referencia hipertextual
pagina1.html
http://glyphobet.net/blog/essay/206
20
Links
Link entre dos páginas.a: ancla
href: referencia hipertextual
pagina1.html
http://glyphobet.net/blog/essay/206
21
Links
Link entre dos páginas.a: ancla
href: referencia hipertextual
pagina1.html
http://glyphobet.net/blog/essay/206
22
Links
Link entre dos páginas.a: ancla
href: referencia hipertextual
pagina2.htmlpagina1.html
http://glyphobet.net/blog/essay/206
23
Atributos
<a href="pagina2.html">ir a página 2</a>
nombre valor
24
URLs
URL absoluta:<a href="http://www.lanacion.com.ar/espectaculos/">Espectáculos</a>
25
URLs
URLs relativas<a href="pagina2.html">ir a página 2</a><a href="fotos/pagina2.html">ver foto</a>
26
No sólo linkear a otro recurso, sino incluirlo.<a href="fotos/foto.jpg">ver foto</a>
Imágenes
27
No sólo linkear a otro recurso, sino incluirlo.<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Imágenes
28
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Imágenes
29
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Imágenes
Tag de imagen
30
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Imágenes
Tag de imagen
URL de la imagen(gif, jpg, png)
31
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Imágenes
Tag de imagen
URL de la imagen(gif, jpg, png)
Ancho y alto
32
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Imágenes
Tag de imagen
URL de la imagen(gif, jpg, png)
Texto alternativoAncho y alto
33
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Imágenes
Tag de imagen
URL de la imagen(gif, jpg, png)
Texto alternativoAncho y alto Cierre
34
Imágenes
¿Cómo ve Google una imagen?
35
Imágenes
¿Cómo ve Google una imagen?
No entiende nada.
36
Imágenes
37
Imágenes
38
Imágenes
39
Imágenes
http://tinyurl.com/alt-decision-treehttp://webaim.org/techniques/alttext/
40
Imágenes
Decoraciónalt=""Mejor: CSS!
http://tinyurl.com/alt-decision-treehttp://webaim.org/techniques/alttext/
41
Imágenes
Contenido(informacióno funcional)alt="texto breve"
Decoraciónalt=""Mejor: CSS!
http://tinyurl.com/alt-decision-treehttp://webaim.org/techniques/alttext/
42
Imágenes
Contenido(informacióno funcional)alt="texto breve"
Decoraciónalt=""Mejor: CSS!
Informaciónredundantealt=""
http://tinyurl.com/alt-decision-treehttp://webaim.org/techniques/alttext/
43
Imágenes
Elemento con contenido<p>Tags con contenido adentro</p>
Elemento sin contenido<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Al no tener texto, ni otro elemento adentro, el elemento se cierra solo.
<tag />
http://www.w3.org/TR/xhtml-media-types/#C_2
44
Tags más comunes●p●img●a●h1, h2, hn…●div ●ul, ol, li●strong, em, b, i●span●link●head, title, body
a abbr address area article aside audio b base bb bdo blockquote body br button canvas caption cite code col colgroup command datagrid datalist dd del details dialog dfn div dl dt em embed eventsource fieldset figure footer form h1 h2 h3 h4 h5 h6 head header hr html i iframe img input ins kbd label legend li link mark map menu meta meter nav noscript object ol optgroup option output p param pre progress q rp rt samp script section select small source span strong style sub sup table tbody td textarea tfoot th thead time title tr ul var video
45
Encabezados
46
Encabezados
47
Encabezados
48
Encabezados
http://www.456bereastreet.com/archive/200901/headings_heading_hierarchy_and_document_outlines/
49
Encabezados
http://tinyurl.com/3vlphez
50
Encabezados
!!!
http://tinyurl.com/3vlphez
51
Encabezados
Generación automática de índice
http://fuelyourcoding.com/scripts/toc/
54
Saltos de línea
55
Listas
56
Listas
Viñetas con imágenes
58
Listas
Menúes, tabs
http://www.alistapart.com/articles/taminglists/, http://www.alistapart.com/articles/slidingdoors/
59
Listas anidadas
http://www.htmldog.com/articles/suckerfish/
63
Listas
<ul>Unordered list.
<ol>Ordered list.
http://javirecetas.com/bizcocho-de-vainilla
64
Listas<ul> <li>Esto</li> <li>Es</li> <li>Bueno</li></ul>
<ol> <li>También</li> <li>Bueno</li> <li>Esto</li></ol>
* Esto<br />* No<br />* Está<br />* Bien<br />
1. Esto<br />2. Mucho<br />3. Menos<br />
65
Punto punto punto
http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm
66
Punto punto punto
<span class=”pt2”>········· ·························· ··························· ·····················</span>
http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm
67
Punto punto punto
<span class=”pt2”>········· ·························· ··························· ·····················</span>
.botones {border-bottom: 1px dotted #969696;}
http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm
68
Setenta mil pesos
https://github.com/mercadolibre/chico/issues/632
69
Énfasis
Fragmentos importantes<p><strong>¡Urgente!</strong> Hoy se agotan los cupos.</p>
Cambio de tono, afecta significado.<p>“Llamá un doctor <em>ahora</em>”</p>
Destaque visual, no necesariamente importante<p><b>Sí, pero quién nos curará</b> del fuego sordo,
del fuego sin color que corre al anochecer...</p>
Fragmentos en otro idioma, términos técnicos.<p>¡Me pareció ver un lindo <i>felis silvestris catus</i>!</p>
http://html5doctor.com/i-b-em-strong-element/
70
Etiquetas genéricas
<div>...</div>: contenedor genérico
71
Etiquetas genéricas
<div>...</div>: contenedor genérico
72
Etiquetas genéricas
<div>...</div>: contenedor genérico
73
Etiquetas genéricas
<div>...</div>: contenedor genérico
74
Etiquetas genéricas
<div>...</div>: contenedor genérico
75
Etiquetas genéricas
<span>...</span>: fragmento genérico<p>José López, abogado.
Tel: <span class="tel">54 11 50227763</span></p>
José López, abogado.
Tel: ☎ 54 11 50227763
76
Etiquetas genéricas
<span>...</span>: fragmento genérico<p>José López, abogado.
Tel: <span class="tel">54 11 50227763</span></p>
José López, abogado.
Tel: ☎ 54 11 50227763
<p>José López, abogado.
Tel: <span class="tel"> <span class="type">Home</span> 54 11 50227763 </span></p>
José López, abogado.
Tel: ⌂ 54 11 50227763
77
Beneficios del marcado semántico
●SEO●Accesibilidad●Diseño cacheable●Future proof!
Hace posible●Rediseños más rápidos●Responsive design●Progressive enhancement
78
¡El HTML ganará!
● Web apps● ChromeOS● Boot to Gecko● HTML5 en Windows 8● Mac OS Dashboard apps● iPad, ePub● Apache Cordova (PhoneGap)
http://platform.html5.org/
80
CSS
Hojas de estilo en cascada.
Se complementan con el HTML,describiendo el diseño visual de una página.
http://www.popandshorty.bigcartel.com/product/you-are-the-css-to-my-html-button
81
CSS Zen Garden
http://www.mezzoblue.com/zengarden/alldesigns/
83
Múltiples dispositivos
http://www.alistapart.com/articles/responsive-web-design/
84
Incluir el CSS
Elemento link<link rel="stylesheet" href="css/style.css" />
85
Incluir el CSS
Elemento link<link rel="stylesheet" href="css/style.css" />
Elemento link<link rel="stylesheet" href="css/style.css" />
Print CSS<link rel="stylesheet" href="css/style.css" media="print" />
Media queries - “responsive design”<link rel="stylesheet" href="css/720.css" media="screen and (min-width: 720px)" />
86
HTML base
Maquetado de ejemplo en http://pub.cvam.com.ar/ixda/2011/maquetado
87
88
Selectores
Redefinir tags de HTML
h1 {color: #249999;}
a {color: #0071BC;}
89
Selectores
Redefinir tags de HTML
h1 {color: #249999;}
a {color: #0071BC;}
90
Selectores
Todo se puede cambiar
<p>Para diseñar interfaces web <b>efectivas, atractivas, y usables</b> Inicio...</p>
91
Selectores
Todo se puede cambiar
<p>Para diseñar interfaces web <b>efectivas, atractivas, y usables</b> Inicio...</p>
b {font-weight: normal;background: #FFFF99;}
92
Selectores
Class
Para botones y similares, no me sirve pegarle a todos los <a>!
a {color: #FFFFFF;background: #637580;}
93
Selectores
Class
Class me permite agrupar por tipo.
.button {color: #FFFFFF;background: #637580;}
<a class="button">Ver posts anteriores</a>
94
Selectores
Clases semánticos, no descriptivos
.gris_chico {color: #CCCCCC;font-size: 80%;}
.fecha {color: #CCCCCC;font-size: 80%;}
95
Selectores
ID
Un elemento que es único en la página.
#intro {color: #FFFFFF;background: #28DBD5;}
<p id="intro">IxDA es la Asociación de Diseño de Interacción. Somos una red global dedicada a la práctica profesional...<a href="info.html">Ver más</a>
</p>
96
Selectores
ID
97
Reglas de CSS
Anatomía de una regla de CSS.
selector {atributo: valor;}
98
Múltiples selectores
Una regla puede tener más de un selector.
.button {background: #586875;}
#footer {background: #586875;}
99
Múltiples selectores
Una regla puede tener más de un selector.
.button {background: #586875;}
#footer {background: #586875;}
.button,#footer {
background: #586875;}
separados por comas
100
Múltiples selectores
Una regla puede tener más de un selector.
.button {background: #586875;}
#footer {background: #586875;}
.button,#footer {
background: #586875;}
separados por comas.button,#footer {
background: #586875;}
.button {text-transform: uppercase;}
102
Modelo de caja#intro { … }
103
Bordesborder: 1px solid #24BCB7;
104
Márgenesmargin: 1em;
105
Márgenesmargin: 1em;
106
Márgenesmargin: 0 0 1em 0;
107
Color de fondobackground: #28DBD5;
108
Color de fondobackground: #28DBD5;
109
Rellenopadding: 10px;
110
Rellenopadding: 10px 240px 10px 10px;
top right bottom left “trouble”
111
Rellenopadding: 10px 240px 10px 10px;
top right bottom left “trouble”
112
Imagen de fondobackground: #28DBD5 url(../img/intro.gif);
intro.gif
113
Imagen de fondobackground: #28DBD5 url(../img/intro.gif);
intro.gif
114
Fondo repetidobackground: #28DBD5 url(../img/intro.gif) no-repeat;
opciones: repeat, repeat-x, repeat-y
115
Posición del fondobackground: #28DBD5 url(../img/intro.gif) no-repeat 350px -35px;
left top
116
Bloque vs Línea
<p>Para diseñar interfaces web <b>efectivas, atractivas, y usables</b>! Inicio: Miércoles 1 de junio...</p>
<p>Horario: de 19 a 22 hs.</p>
http://webdesignfromscratch.com/html-css/css-block-and-inline/
117
Bloque vs Línea
<p>Para diseñar interfaces web <b>efectivas, atractivas, y usables</b>! Inicio: Miércoles 1 de junio...</p>
<p>Horario: de 19 a 22 hs.</p>
Elemento en línea
http://webdesignfromscratch.com/html-css/css-block-and-inline/
118
Bloque vs Línea
<p>Para diseñar interfaces web <b>efectivas, atractivas, y usables</b>! Inicio: Miércoles 1 de junio...</p>
<p>Horario: de 19 a 22 hs.</p>
Elemento en línea
Elemento de bloque
http://webdesignfromscratch.com/html-css/css-block-and-inline/
119
Elementos flotantes
<img src="float.jpg" alt="Taza" />
<p>Vestibulum ut magna...</p>
http://css.maxdesign.com.au/floatutorial/
120
Elementos flotantes
<img src="float.jpg" alt="Taza" />
<p>Vestibulum ut magna...</p>
img {float: left;width: 150px;}
http://css.maxdesign.com.au/floatutorial/
121
Elementos flotantes
<img src="float.jpg" alt="Taza" />
<p>Vestibulum ut magna...</p>
img {float: left;width: 150px;}
p {float: left;width: 150px;}
http://css.maxdesign.com.au/floatutorial/
122
<div id="main">...</div><div id="sidebar">...</div><div id="footer">...</div>
123
#main {...}
#sidebar {...}
#footer {...}
124
#main {float: left;}
#sidebar {float: left;}
#footer {...}
125
#main {float: left;}
#sidebar {float: left;}
#footer {clear: both;}
126
#main {float: left;margin-right: 55px;}
#sidebar {float: left;}
#footer {clear: both;}
127
Técnica de “faux columns”
http://www.alistapart.com/articles/fauxcolumns/
128
Técnica de “faux columns”
#sidebar {background: #f2f2f2;}
:(
http://www.alistapart.com/articles/fauxcolumns/
129
Técnica de “faux columns”
<div id="content"><div id="main">...</div><div id="sidebar">...</div><div id="footer">...</div>
</div>
wrapper
http://www.alistapart.com/articles/fauxcolumns/
130
Técnica de “faux columns”
<div id="content"><div id="main">...</div><div id="sidebar">...</div><div id="footer">...</div>
</div>
content.gif
#content {background: url(../img/content.gif);}
wrapper
http://www.alistapart.com/articles/fauxcolumns/
131
Clear usando overflow
#footer {clear: both;}
<div id="content"><div id="main">...</div><div id="sidebar">...</div><div id="footer">...</div>
</div>
http://www.quirksmode.org/css/clearing.html
132
Clear usando overflow
<div id="content"><div id="main">...</div><div id="sidebar">...</div><div id="footer">...</div>
</div>
Sin el footer, el wrapper se colapsa, porque los floats no están en el flujo normal del documento.
http://www.quirksmode.org/css/clearing.html
133
Clear usando overflow
<div id="content"><div id="main">...</div><div id="sidebar">...</div>
</div>
#content {overflow: auto;width: 100%;}
O bien hidden
http://www.quirksmode.org/css/clearing.html
134
Posicionamiento
135
Relativo
#intro_more {position: relative;}
136
Relativo
#intro_more {position: relative;top: 40px;left: -50px;}
137
Absoluto
#intro_more {position: absolute;top: 0;left: 0;}
138
Absoluto
#intro_more {position: absolute;top: 0;left: 0;}
#intro {position: relative;}
139
Absoluto
#intro_more {position: absolute;top: 0;left: 0;}
#intro {position: relative;}
#intro_more {position: absolute;bottom: 12px;right: 20px;}
140
Fijo
#intro_more {position: fixed;bottom: 12px;right: 20px;}
141
Fijo
#intro_more {position: fixed;bottom: 12px;right: 20px;}
142
Fijo
#intro_more {position: fixed;bottom: 12px;right: 20px;}
143
La cascada
Ante dos selectores iguales, el último tiene prioridad: pisa al anterior....
h2 {color: #ff0000;}
...
h2 {color: #249898;}
...
144
La cascada
Muchas propiedades se heredan de los elementos contenedores.h2 {
font-family: Arial;}
p {font-family: Arial;}
.fecha {font-family: Arial;}
145
La cascada
Muchas propiedades se heredan de los elementos contenedores.h2 {
font-family: Arial;}
p {font-family: Arial;}
.fecha {font-family: Arial;}
body {font-family: Arial;}
146
La cascada
Cuando algo se repite, generalizar..texto {
font-family: Arial;}
<p class="texto">Loren ipsum…</p><p class="texto">Dolor sit amet…</p><p class="texto">Consectetur adipiscing…</p>
147
La cascada
Cuando algo se repite, generalizar..texto {
font-family: Arial;}
<p class="texto">Loren ipsum…</p><p class="texto">Dolor sit amet…</p><p class="texto">Consectetur adipiscing…</p>
<div class="texto"><p>Loren ipsum…</p><p>Dolor sit amet…</p><p>Consectetur adipiscing…</p>
</div>
148
La cascada
Cuando algo se repite, generalizar.
149
La cascada
Cuando algo se repite, generalizar.
150
La cascada
Especificidad, selectores contextuales.a {
font-family: Arial;color: blue;}
#mainMenu a {color: red;
background: url("../img/mainmenu.gif") repeat-x;
border: 1px solid #D7D8D9; display: block; padding: 0 14px; text-decoration: none;
}
http://librosweb.es/css/capitulo2/selectores_basicos.html
151
Tamaño de tipografías
body {font-size: 13px;*font-size: small; /* IE <= 7 */}
h2 {font-size: 160%;}
p {/* nada! hereda de body*/}
.fecha {font-size: 80%;}
http://developer.yahoo.com/yui/3/examples/cssfonts/cssfonts-size.html
152
Pila de tipografías
“Font stack”
body {font-family: Cambria, Georgia, Times, “Times New Roman”, serif;} Cambria
Georgia Times
153
¿Qué tipografías puedo usar?
http://www.codestyle.org/css/font-family/
154
¿Qué tipografías puedo usar?
¡Cualquiera!Elegir una que tenga licencia @font-face.
● http://Typekit.com (Din, Futura, Meta, Trajan, Dax)● http://Webfonts.fonts.com (Helvetica, Frutiger, Univers!)● http://Webtype.com (Interstate, Gill Sans)● http://Fontsquirrel.com (open source / free / custom)● http://Google.com/webfonts (open source)
155
Mejora progresiva
El contenido, siempre accesible.
http://tinyurl.com/653gfd7
156
Esto no es un link<a id="ToppageUC1_Mainmenubuild2_BemestingButton1_Lin kButton1" class="MenuButton" href="javascript:__doPostBack('ToppageUC1$Mainmenu build2$BemestingButton1$LinkButton1','')">Inicio</a>
http://slideshare.net/pazguille/estndares-web-con-chico-ui, https://twitter.com/danwrong/status/205300456547823616
157
Esto no es un link<a id="ToppageUC1_Mainmenubuild2_BemestingButton1_Lin kButton1" class="MenuButton" href="javascript:__doPostBack('ToppageUC1$Mainmenu build2$BemestingButton1$LinkButton1','')">Inicio</a>
http://slideshare.net/pazguille/estndares-web-con-chico-ui, https://twitter.com/danwrong/status/205300456547823616
<p id="rep">Ver reputación</p><script>$("#rep").bind("click", function () { window.location = "http://ejemplo.com"; });</script>
158
Esto no es un link<a id="ToppageUC1_Mainmenubuild2_BemestingButton1_Lin kButton1" class="MenuButton" href="javascript:__doPostBack('ToppageUC1$Mainmenu build2$BemestingButton1$LinkButton1','')">Inicio</a>
http://slideshare.net/pazguille/estndares-web-con-chico-ui, https://twitter.com/danwrong/status/205300456547823616
<a href="https://twitter.com/#!mrazzari/status/205322525339693057">
<p id="rep">Ver reputación</p><script>$("#rep").bind("click", function () { window.location = "http://ejemplo.com"; });</script>
159
Esto no es un link<a id="ToppageUC1_Mainmenubuild2_BemestingButton1_Lin kButton1" class="MenuButton" href="javascript:__doPostBack('ToppageUC1$Mainmenu build2$BemestingButton1$LinkButton1','')">Inicio</a>
http://slideshare.net/pazguille/estndares-web-con-chico-ui, https://twitter.com/danwrong/status/205300456547823616
<a href="https://twitter.com/#!mrazzari/status/205322525339693057">
<p id="rep">Ver reputación</p><script>$("#rep").bind("click", function () { window.location = "http://ejemplo.com"; });</script>
160
Mejora progresiva<a href="javascript:window.open('index.htm','popup','width=300,height=400');">
Abrir popup muy mal</a>
<a href="#" onClick="window.open('index.htm','popup','width=300,height=400')">También mal
</a>
Está roto para:● Usuarios sin JS● Buscadores● Agregar a favoritos● Abrir en otro tab / ventana● Ver link en barra de estado● Verificadores de links
http://www.nosolousabilidad.com/articulos/popups_javascript.htm
161
Mejora progresiva
<a href="index.htm" target="popup" onClick="window.open('index.htm', 'popup', 'width=300,height=400'); return false;">
Un poco mejor</a>
http://www.nosolousabilidad.com/articulos/popups_javascript.htm
162
Mejora progresiva
<a href="index.htm" target="popup" onClick="window.open('index.htm', 'popup', 'width=300,height=400'); return false;">
Un poco mejor</a>
<a href="index.htm" target="popup" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">
Mucho mejor!</a>
http://www.nosolousabilidad.com/articulos/popups_javascript.htm
163
Mejora progresiva
<a href="index.html" class="pop-me-up">Mejorísimo</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="js/funciones.js"></script>
// Funciones.jsjQuery(function($) { $('.pop-me-up').click(function(e){ window.open($(this).attr("href"), "popup", "width=300,height=400"); return false; });});
164
Mejora progresiva
Aceptar las diferencias.
Navegador moderno
vs.
Internet Explorer 7
165
Mejora progresiva
Polyfills: JavaScripts que dan funcionalidad a navegadores que no la soportan nativamente.
Ejemplo: CSS3 multi column
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
166
Como pedir ayuda
● Validar el código
● Lista de correo: http://ovillo.org
● Enviar un link a la página con problemas (es mejor que pegar código en un mail). “Testcase”.
● Google! (Alguien ya tuvo tu mismo problema)
● FAQshttp://mezzoblue.com/css/cribsheethttp://css-discuss.incutio.com
167
Como evaluar qué es bueno
Antes de copiar de la web un fragmento de código, script o plugin...● Validarlo● Testearlo en nuestros browsers objetivo● CSS y JS no entremezclados con el HTML● Escalable (text zoom)● Usa el framework o librería que ya usás● Si hay <a>, que apunten a una URL● Puedo tabular de un link a otro● El código parece prolijo (comentado, identado)
168
Herramientas
● Firebughttp://getfirebug.com/whatisfirebug
● Chrome Dev Toolshttps://developers.google.com/chrome-developer-tools/
● Web developer extensionhttps://addons.mozilla.org/en-US/firefox/addon/web-developer/
● Screen calipershttp://www.iconico.com/caliper/skins.aspx
● IE Collectionhttp://utilu.com/IECollection/
● SelectOraclehttp://tux.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py
top related