Download Document

Maquetado
Diseño de interfaces y maquetado web
Manuel Razzari
http://convistaalmar.com.ar
http://creativecommons.org/licenses/by/2.5/ar/
¿Qué es una página web?
2
¿Qué es una página web?
3
¿Qué es una página web?
4
¿Qué es un tag?
HTML
Markup language: lenguaje de marcado
Tag: etiqueta
Hola, <strong>que tal</strong>
5
¿Qué es un tag?
Puedo poner una etiqueta adentro de otra.
<p>Hola, <strong>que tal</strong></p>
6
¿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>
7
Árbol de elementos
8
Doctype
Nos dice que tipo de documento es y su versión.
9
Head
Información acerca de la página.
10
Title
Aparece en la barra de título y en los tabs.
11
Title
Es el link principal en los resultados de búsqueda.
12
http://www.socialpatterns.com/search-engine-optimization/writing-better-titles/
Title
13
http://www.deyalexander.com.au/publications/page-titles.html
Body
Lo que se ve dentro de la ventana del navegador
14
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
15
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you
El validador
<p>Hola, <strong>que tal</p></strong>
16
Links
HTML
Markup Language
17
Links
HTML
HyperText Markup Language
pagina2.html
foto.jpg
pagina1.html
etc.
18
Links
Link entre dos páginas.
a: ancla
href: referencia hipertextual
pagina1.html
19
http://glyphobet.net/blog/essay/206
Links
Link entre dos páginas.
a: ancla
href: referencia hipertextual
pagina1.html
20
http://glyphobet.net/blog/essay/206
Links
Link entre dos páginas.
a: ancla
href: referencia hipertextual
pagina1.html
21
http://glyphobet.net/blog/essay/206
Links
Link entre dos páginas.
a: ancla
href: referencia hipertextual
pagina1.html
22
http://glyphobet.net/blog/essay/206
pagina2.html
Atributos
<a href="pagina2.html">ir a página 2</a>
nombre
23
valor
URLs
URL absoluta:
<a href="http://www.lanacion.com.ar/espectaculos/">Espectáculos</a>
24
URLs
URLs relativas
<a href="pagina2.html">ir a página 2</a>
<a href="fotos/pagina2.html">ver foto</a>
25
Imágenes
No sólo linkear a otro recurso, sino incluirlo.
<a href="fotos/foto.jpg">ver foto</a>
26
Imágenes
No sólo linkear a otro recurso, sino incluirlo.
<a href="fotos/foto.jpg">ver foto</a>
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
27
Imágenes
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
28
Imágenes
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Tag de
imagen
29
Imágenes
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Tag de
imagen
30
URL de la imagen
(gif, jpg, png)
Imágenes
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Tag de
imagen
31
URL de la imagen
(gif, jpg, png)
Ancho y alto
Imágenes
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Tag de
imagen
32
URL de la imagen
(gif, jpg, png)
Ancho y alto
Texto alternativo
Imágenes
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />
Tag de
imagen
33
URL de la imagen
(gif, jpg, png)
Ancho y alto
Texto alternativo
Cierre
Imágenes
¿Cómo ve Google una imagen?
34
Imágenes
¿Cómo ve Google una imagen?
No entiende nada.
35
Imágenes
36
Imágenes
37
Imágenes
38
Imágenes
39
http://tinyurl.com/alt-decision-tree
http://webaim.org/techniques/alttext/
Imágenes
Decoración
alt=""
Mejor: CSS!
40
http://tinyurl.com/alt-decision-tree
http://webaim.org/techniques/alttext/
Imágenes
Decoración
alt=""
Mejor: CSS!
Contenido
(información
o funcional)
alt="texto
breve"
41
http://tinyurl.com/alt-decision-tree
http://webaim.org/techniques/alttext/
Imágenes
Decoración
alt=""
Mejor: CSS!
Contenido
(información
o funcional)
alt="texto
breve"
Información
redundante
alt=""
42
http://tinyurl.com/alt-decision-tree
http://webaim.org/techniques/alttext/
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 tag
se cierra solo.
<tag />
43
http://www.w3.org/TR/xhtml-media-types/#C_2
Tags más comunes
p
●img
●a
●h1, h2, hn…
●div
●ul, ol, li
●strong, em, b, i
●span
●link
●head, title, body
●
44
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
Encabezados
45
Encabezados
46
Encabezados
47
Encabezados
48
http://www.456bereastreet.com/archive/200901/headings_heading_hierarchy_and_document_outlines/
Encabezados
49
http://tinyurl.com/3vlphez
Encabezados
!!!
50
http://tinyurl.com/3vlphez
Encabezados
Generación automática de índice
51
http://fuelyourcoding.com/scripts/toc/
Encabezados
52
http://www.youtube.com/watch?v=AmUPhEVWu_E
Encabezados
:-(
53
http://www.viaresto.clarin.com/
Saltos de línea
54
Listas
55
Listas
Viñetas con imágenes
56
Listas
Lista con links: navegación
57
http://css.maxdesign.com.au/
Listas
Menúes, tabs
58
http://www.alistapart.com/articles/taminglists/, http://www.alistapart.com/articles/slidingdoors/
Listas anidadas
59
http://www.htmldog.com/articles/suckerfish/
Listas
60
http://www.lanacion.com.ar
Listas
61
http://www.lanacion.com.ar
Listas
[...]
62
http://www.lanacion.com.ar
Listas
<ul>
Unordered list.
<ol>
Ordered list.
63
http://javirecetas.com/bizcocho-de-vainilla
Listas
*
*
*
*
Esto<br />
No<br />
Está<br />
Bien<br />
1. Esto<br />
2. Mucho<br />
3. Menos<br />
64
<ul>
<li>Esto</li>
<li>Es</li>
<li>Bueno</li>
</ul>
<ol>
<li>También</li>
<li>Bueno</li>
<li>Esto</li>
</ol>
Punto punto punto
65
http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm
Punto punto punto
<span class="pt2">·········
··························
···························
·····················</span>
66
http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm
Punto punto punto
<span class="pt2">·········
··························
···························
·····················</span>
67
http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm
.botones {
border-bottom: 1px dotted #969696;
}
É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>
68
http://html5doctor.com/i-b-em-strong-element/
Etiquetas genéricas
<div>...</div>: contenedor genérico
69
Etiquetas genéricas
<div>...</div>: contenedor genérico
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
<span>...</span>: fragmento genérico
<p>José López, abogado.
Tel: <span class="tel">54 11 50227763</span>
</p>
José López, abogado.
Tel:
74
☎ 54 11 50227763
Etiquetas genéricas
<span>...</span>: fragmento genérico
<p>José López, abogado.
class="tel">
Tel: <span class="tel">54
11 50227763</span>
<span class="type">Home</span>
</p>
54 11 50227763
</span>
</p>
José López, abogado.
Tel:
75
☎ 54 11 50227763
⌂
Beneficios del marcado
semántico
SEO
●Accesibilidad
●Diseño cacheable
●Future proof!
●
Hace posible
●Rediseños más rápidos
●Responsive design
●Progressive enhancement
76
¡El HTML ganará!
77
●
Web apps
●
La nube, ChromeOS
●
HTML5 en Windows 8
●
iPad, ePub
http://platform.html5.org/
CSS
Hojas de estilo en cascada.
Se complementan con el HTML,
describiendo el diseño visual de una página.
78
CSS Zen Garden
79 http://www.mezzoblue.com/zengarden/alldesigns/
Múltiples medios
80 http://www.raoulwallenberg.net/
Múltiples dispositivos
81
http://www.alistapart.com/articles/responsive-web-design/
Incluir el CSS
Elemento link
<link rel="stylesheet" href="css/style.css" />
82
Incluir el 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)" />
83
HTML base
84
Maquetado de ejemplo en http://pub.cvam.com.ar/ixda/2011/maquetado
85
Selectores
Redefinir tags de HTML
h1 {
color: #249999;
}
a{
color: #0071BC;
}
86
Selectores
Redefinir tags de HTML
h1 {
color: #249999;
}
a{
color: #0071BC;
}
87
Selectores
Todo se puede cambiar
<p>Para diseñar interfaces web <b>efectivas,
atractivas, y usables</b> Inicio...</p>
88
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;
}
89
Selectores
Class
Para botones
y similares, no me sirve
pegarle a todos los <a>!
a {
color: #FFFFFF;
background: #637580;
}
90
Selectores
Class
Class me permite
agrupar por tipo.
.button {
color: #FFFFFF;
background: #637580;
}
<a class="button">Ver posts anteriores</a>
91
Selectores
Clases semánticos, no descriptivos
.gris_chico {
color: #CCCCCC;
font-size: 80%;
}
.fecha {
color: #CCCCCC;
font-size: 80%;
}
92
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>
93
Selectores
ID
94
Reglas de CSS
Anatomía de una regla de CSS.
selector {
atributo: valor;
}
95
Múltiples selectores
Una regla puede tener más de un selector.
.button {
background: #586875;
}
#footer {
background: #586875;
}
96
Múltiples selectores
Una regla puede tener más de un selector.
separados por comas
.button
.button,{
#footer
background:
{
#586875;
}
background:
#586875;
}
#footer {
background: #586875;
}
97
Múltiples selectores
Una regla puede tener más de un selector.
separados por comas
.button
.button,{
#footer
background:
{
#586875;
}
background:
#586875;
}
#footer {
background:
#586875;
.button
{
}
text-transform: uppercase;
}
98
Modelo de caja
99 http://www.redmelon.net/tstme/box_model/
Modelo de caja
#intro { … }
100
Bordes
border: 1px solid #24BCB7;
101
Márgenes
margin: 1em;
102
Márgenes
margin: 1em;
103
Márgenes
margin: 0 0 1em 0;
104
Color de fondo
background: #28DBD5;
105
Color de fondo
background: #28DBD5;
106
Relleno
padding: 10px;
107
Relleno
padding: 10px 240px 10px 10px;
top right bottom left “trouble”
108
Relleno
padding: 10px 240px 10px 10px;
top right bottom left “trouble”
109
Imagen de fondo
background: #28DBD5 url(../img/intro.gif);
intro.gif
110
Imagen de fondo
background: #28DBD5 url(../img/intro.gif);
intro.gif
111
Fondo repetido
background: #28DBD5 url(../img/intro.gif) no-repeat;
opciones: repeat, repeat-x, repeat-y
112
Posición del fondo
background: #28DBD5 url(../img/intro.gif) no-repeat 350px -35px;
left
top
113
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>
114
http://webdesignfromscratch.com/html-css/css-block-and-inline/
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
115
http://webdesignfromscratch.com/html-css/css-block-and-inline/
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
116
http://webdesignfromscratch.com/html-css/css-block-and-inline/
Elementos flotantes
<img src=”float.jpg” alt=”Taza” />
<p>Vestibulum ut magna...</p>
117
http://css.maxdesign.com.au/floatutorial/
Elementos flotantes
<img src=”float.jpg” alt=”Taza” />
<p>Vestibulum ut magna...</p>
img {
float: left;
width: 150px;
}
118
http://css.maxdesign.com.au/floatutorial/
Elementos flotantes
<img src=”float.jpg” alt=”Taza” />
<p>Vestibulum ut magna...</p>
img {
float: left;
width: 150px;
}
p {
float: left;
width: 150px;
}
119
http://css.maxdesign.com.au/floatutorial/
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
120
#main {
...
}
#sidebar {
...
}
#footer {
...
}
121
#main {
float: left;
}
#sidebar {
float: left;
}
#footer {
...
}
122
#main {
float: left;
}
#sidebar {
float: left;
}
#footer {
clear: both;
}
123
#main {
float: left;
margin-right: 55px;
}
#sidebar {
float: left;
}
#footer {
clear: both;
}
124
Técnica de “faux columns”
125
http://www.alistapart.com/articles/fauxcolumns/
Técnica de “faux columns”
#sidebar {
background: #f2f2f2;
}
:(
126
http://www.alistapart.com/articles/fauxcolumns/
Técnica de “faux columns”
wrapper
<div id="content">
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</div>
127
http://www.alistapart.com/articles/fauxcolumns/
Técnica de “faux columns”
content.gif
#content {
background:
url(../img/content.gif);
}
wrapper
<div id="content">
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</div>
128 http://www.alistapart.com/articles/fauxcolumns/
Clear usando overflow
#footer {
clear: both;
}
<div id="content">
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</div>
129 http://www.quirksmode.org/css/clearing.html
Clear usando overflow
Sin el footer, el
wrapper se colapsa,
porque los floats no
están en el flujo
normal del documento.
<div id="content">
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</div>
130 http://www.quirksmode.org/css/clearing.html
Clear usando overflow
O bien hidden
#content {
overflow: auto;
width: 100%;
}
<div id="content">
<div id="main">...</div>
<div id="sidebar">...</div>
</div>
131 http://www.quirksmode.org/css/clearing.html
Posicionamiento
132
Relativo
#intro_more {
position: relative;
}
133
Relativo
#intro_more {
position: relative;
top: 40px;
left: -50px;
}
134
Absoluto
#intro_more {
position: absolute;
top: 0;
left: 0;
}
135
Absoluto
#intro_more {
position: absolute;
top: 0;
left: 0;
}
136
#intro {
position: relative;
}
Absoluto
#intro_more {
position: absolute;
top: 0; 12px;
bottom:
left: 0;
right:
20px;
}
137
#intro {
position: relative;
}
Fijo
#intro_more {
position: fixed;
bottom: 12px;
right: 20px;
}
138
Fijo
#intro_more {
position: fixed;
bottom: 12px;
right: 20px;
}
139
Fijo
#intro_more {
position: fixed;
bottom: 12px;
right: 20px;
}
140
La cascada
Ante dos selectores iguales, el último tiene prioridad:
pisa al anterior.
...
h2 {
color: #ff0000;
}
...
h2 {
...
141
color: #249898;
}
La cascada
Muchas propiedades se heredan de los
elementos contenedores.
h2 {
p {
font-family: Arial;
}
font-family: Arial;
}
.fecha {
font-family: Arial;
}
142
La cascada
Muchas propiedades se heredan de los
elementos contenedores.
h2 {
p {
font-family: Arial;
}
font-family: Arial;
}
.fecha {
font-family: Arial;
}
body {
font-family: Arial;
}
143
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>
144
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>
145
La cascada
Especificidad, selectores contextuales.
a {
font-family: Arial;
color: blue;
}
#mainMenu a {
color: green;
background: url
("../img/mainmenu.gif")
repeat-x;
border: 1px solid #D7D8D9;
display: block;
padding: 0 14px;
text-decoration: none;
}
146
http://librosweb.es/css/capitulo2/selectores_basicos.html
Tamaño de tipografías
body {
font-size: 13px;
*font-size: small;
}
h2 {
p {
/* IE <= 7 */
font-size: 160%;
}
/* nada! hereda de body*/
}
.fecha {
font-size: 80%;
}
147
http://developer.yahoo.com/yui/3/examples/cssfonts/cssfonts-size.html
Pila de tipografías
“Font stack”
body {
font-family: Cambria, Georgia, Times, “Times New Roman”, serif;
}
Cambria
Georgia
Times
148
¿Qué tipografías puedo usar?
149
http://www.codestyle.org/css/font-family/
¿Qué tipografías puedo usar?
¡Cualquiera!
Elegir una que tenga licencia @font-face.
150
●
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)
Mejora progresiva
El contenido, siempre accesible.
151
http://tinyurl.com/653gfd7
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
● Validación
152
http://www.nosolousabilidad.com/articulos/popups_javascript.htm
Mejora progresiva
<a href="index.htm" target="popup" onClick="window.open('index.htm', 'popup',
'width=300,height=400'); return false;">
Un poco mejor
</a>
153
http://www.nosolousabilidad.com/articulos/popups_javascript.htm
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>
154
http://www.nosolousabilidad.com/articulos/popups_javascript.htm
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.js
jQuery(function($) {
$('.pop-me-up').click(function(e){
window.open($(this).attr("href"), 'popup', 'width=300,height=400');
return false;
});
});
155
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)
●
FAQs
http://mezzoblue.com/css/cribsheet
http://css-discuss.incutio.com
156
Como evaluar qué es bueno
Antes de copiar de la web un fragmento de código,
script o plugin...
157
●
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)
Herramientas
●
Firebug
http://getfirebug.com/whatisfirebug
●
Web developer extension
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
●
Screen calipers
http://www.iconico.com/caliper/skins.aspx
●
IE Collection
http://utilu.com/IECollection/
●
SelectOracle
http://tux.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py
158