Introduccion Al Diseño y Maquetacion de Interfaces Web

Maquetado
Diseo de interfaces y maquetado web
Manuel Razzari
http://convistaalmar.com.ar
http://creativecommons.org/licenses/by/2.5/ar/
Qu es una pgina web?
2
3
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 versin.
9
Head
Informacin acerca de la pgina.
10
Title
Aparece en la barra de ttulo y en los tabs.
11
Title
Es el link principal en los resultados de bsqueda.
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
Cmo s que lo estoy haciendo bien?
http://validator.w3.org
Nos asegura que:

Los tags estn bien tipeados
Estn correctamente anidados
No falta ningn 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 pginas.
a: ancla
href: referencia hipertextual
pagina1.html
19 http://glyphobet.net/blog/essay/206
Links
a: ancla
pagina1.html
Links
a: ancla
pagina1.html
Links
a: ancla
pagina1.html pagina2.html
Atributos
<a href="pagina2.html">ir a pgina 2</a>
nombre valor
23
URLs
URL absoluta:
<a href="http://www.lanacion.com.ar/espectaculos/">Espectculos</a>
24
URLs
URLs relativas
<a href="pagina2.html">ir a pgina 2</a>
<a href="fotos/pagina2.html">ver foto</a>
25
Imgenes
No slo linkear a otro recurso, sino incluirlo.
<a href="fotos/foto.jpg">ver foto</a>
26
Imgenes
No slo 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
Imgenes
28
Imgenes
Tag de
imagen
29
Imgenes
Tag de URL de la imagen

imagen (gif, jpg, png)
30
Imgenes
Tag de URL de la imagen Ancho y alto

31
Imgenes
Tag de URL de la imagen Ancho y alto Texto alternativo

32
Imgenes
Tag de URL de la imagen Ancho y alto Texto alternativo Cierre

33
Imgenes
Cmo ve Google una imagen?
34
Imgenes
Cmo ve Google una imagen?
No entiende nada.
35
Imgenes
36
Imgenes
37
Imgenes
38
Imgenes
http://tinyurl.com/alt-decision-tree
39 http://webaim.org/techniques/alttext/
Imgenes
Decoracin
alt=""
Mejor: CSS!
Imgenes
Decoracin
alt=""
Mejor: CSS!
Contenido
(informacin
o funcional)
alt="texto
breve"
Imgenes
Decoracin
alt=""
Mejor: CSS!
Contenido
(informacin
o funcional)
alt="texto
breve"
Informacin
redundante
alt=""
Imgenes
Elemento con contenido
<p>Tags con contenido adentro</p>
Elemento sin contenido

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 ms comunes
p
img a abbr address area article aside audio b
base bb bdo blockquote body br button
a canvas caption cite code col colgroup
command datagrid datalist dd del details
h1, h2, hn dialog dfn div dl dt em embed
div
eventsource fieldset figure footer form h1
h2 h3 h4 h5 h6 head header hr html i
ul, ol, li iframe img input ins kbd label legend li
link mark map menu meta meter nav
strong, em, b, i noscript object ol optgroup option output p
param pre progress q rp rt samp script
span section select small source span strong
style sub sup table tbody td textarea tfoot
link
th thead time title tr ul var video
head, title, body
44
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
Generacin automtica 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 lnea
54
Listas
55
Listas
Vietas con imgenes
56
Listas
Lista con links: navegacin
57 http://css.maxdesign.com.au/
Listas
Menes, 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
Listas
[...]
Listas
<ul>
Unordered list.
<ol>
Ordered list.
63 http://javirecetas.com/bizcocho-de-vainilla
Listas
* Esto<br /> <ul>
* No<br /> <li>Esto</li>
* Est<br /> <li>Es</li>
* Bien<br /> <li>Bueno</li>
</ul>
1. Esto<br /> <ol>

2. Mucho<br /> <li>Tambin</li>
3. Menos<br /> <li>Bueno</li>
<li>Esto</li>
</ol>
64
Punto punto punto
65 http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm
Punto punto punto
<span class="pt2">

</span>
Punto punto punto
<span class="pt2"> .botones {

border-bottom: 1px dotted #969696;
}
</span>
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 quin nos curar</b> del fuego sordo,
del fuego sin color que corre al anochecer...</p>
Fragmentos en otro idioma, trminos tcnicos.

<p>Me pareci ver un lindo <i>felis silvestris catus</i>!</p>
68 http://html5doctor.com/i-b-em-strong-element/
Etiquetas genricas
<div>...</div>: contenedor genrico
69
Etiquetas genricas
70
Etiquetas genricas
71
Etiquetas genricas
72
Etiquetas genricas
73
Etiquetas genricas
<span>...</span>: fragmento genrico
<p>Jos Lpez, abogado.
Tel: <span class="tel">54 11 50227763</span>
</p>
Jos Lpez, abogado.
Tel: 54 11 50227763
74
Etiquetas genricas
<span>...</span>: fragmento genrico
<p>Jos Lpez, abogado.
class="tel">
Tel: <span class="tel">54 11 50227763</span>
</p> <span class="type">Home</span>
54 11 50227763
</span>
</p>
Jos Lpez, abogado.
Tel: 54 11 50227763

75
Beneficios del marcado
semntico
SEO
Accesibilidad
Diseo cacheable
Future proof!
Hace posible
Rediseos ms rpidos
Responsive design
Progressive enhancement
76
El HTML ganar!
Web apps
La nube, ChromeOS
HTML5 en Windows 8
iPad, ePub
77 http://platform.html5.org/
CSS
Hojas de estilo en cascada.
Se complementan con el HTML,

describiendo el diseo visual de una pgina.
78
CSS Zen Garden
79 http://www.mezzoblue.com/zengarden/alldesigns/
Mltiples medios
80 http://www.raoulwallenberg.net/
Mltiples 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 disear interfaces web <b>efectivas,
atractivas, y usables</b> Inicio...</p>
88
Selectores
Todo se puede cambiar
<p>Para disear 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;
}
<a class="button">Ver posts anteriores</a>

91
Selectores
Clases semnticos, 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 pgina.

#intro {
color: #FFFFFF;
background: #28DBD5;
}
<p id="intro">IxDA es la Asociacin de Diseo de Interaccin.

Somos una red global dedicada a la prctica profesional...
<a href="info.html">Ver ms</a>
</p>
93
Selectores
ID
94
Reglas de CSS
Anatoma de una regla de CSS.
selector {
atributo: valor;
}
95
Mltiples selectores
Una regla puede tener ms de un selector.
.button {
}
#footer {
}
96
Mltiples selectores
separados por comas
.button
.button,{
#footer
background:
{ #586875;
}
}
#footer {
}
97
Mltiples selectores
separados por comas
.button
.button,{
#footer
background:
{ #586875;
}
}
#footer {
background:
.button { #586875;
}
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
Mrgenes
margin: 1em;
102
Mrgenes
margin: 1em;
103
Mrgenes
margin: 0 0 1em 0;
104
Color de fondo
105
Color de fondo
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
Posicin del fondo
background: #28DBD5 url(../img/intro.gif) no-repeat 350px -35px;
left top
113
Bloque vs Lnea
<p>Para disear interfaces web
<b>efectivas, atractivas, y usables</b>!
Inicio: Mircoles 1 de junio...</p>
<p>Horario: de 19 a 22 hs.</p>
114 http://webdesignfromscratch.com/html-css/css-block-and-inline/
Bloque vs Lnea
Elemento
en lnea
Bloque vs Lnea
Elemento
en lnea
Elemento
de bloque
Elementos flotantes
<img src=float.jpg alt=Taza />
<p>Vestibulum ut magna...</p>
117 http://css.maxdesign.com.au/floatutorial/
Elementos flotantes
img {
float: left;
width: 150px;
}
Elementos flotantes
img {
float: left;
width: 150px;
}
p {
float: left;
width: 150px;
}
<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
Tcnica de faux columns
125 http://www.alistapart.com/articles/fauxcolumns/
#sidebar {
background: #f2f2f2;
}
:(
wrapper
<div id="content">
</div>
content.gif
#content {
background:
url(../img/content.gif);
}
wrapper
<div id="content">
</div>
Clear usando overflow
#footer {
clear: both;
}
<div id="content">
</div>
129 http://www.quirksmode.org/css/clearing.html
Sin el footer, el
wrapper se colapsa,
porque los floats no
estn en el flujo
normal del documento.
<div id="content">
</div>
O bien hidden
#content {
overflow: auto;
width: 100%;
}
<div id="content">
</div>
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 { #intro {
position: absolute; position: relative;
top: 0; }
left: 0;
}
136
Absoluto
#intro_more { #intro {
position: absolute; position: relative;
top: 0; 12px;
bottom: }
left: 0;
right: 20px;
}
137
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 {
color: #249898;
}
...
141
La cascada
Muchas propiedades se heredan de los
elementos contenedores.
h2 {
font-family: Arial;
}
p {
font-family: Arial;
}
.fecha {
font-family: Arial;
}
142
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;
}
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
Tamao de tipografas
body {
font-size: 13px;
*font-size: small; /* IE <= 7 */
}
h2 {
font-size: 160%;
}
p {
/* nada! hereda de body*/
}
.fecha {
font-size: 80%;
}
147 http://developer.yahoo.com/yui/3/examples/cssfonts/cssfonts-size.html
Pila de tipografas
Font stack
body {
font-family: Cambria, Georgia, Times, Times New Roman, serif;
}
Cambria
Georgia
Times
148
Qu tipografas puedo usar?
149 http://www.codestyle.org/css/font-family/
Qu tipografas 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)
150
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')">

Tambin mal
</a>
Est roto para:

Usuarios sin JS
Buscadores
Agregar a favoritos
Abrir en otro tab / ventana
Validacin
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>
Mejora progresiva
<a href="index.htm" target="popup" onClick="window.open('index.htm', 'popup',
Un poco mejor
</a>
<a href="index.htm" target="popup" onClick="window.open(this.href, this.target,

Mucho mejor!
</a>
Mejora progresiva
<a href="index.html" class="pop-me-up">Mejorsimo</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 cdigo
Lista de correo: http://ovillo.org
Enviar un link a la pgina con problemas

(es mejor que pegar cdigo 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 cdigo,
script o plugin...
Validarlo
Testearlo en nuestros browsers objetivo
CSS y JS no entremezclados con el HTML
Escalable (text zoom)
Usa el framework o librera que ya uss
Si hay <a>, que apunten a una URL
Puedo tabular de un link a otro
El cdigo parece prolijo (comentado, identado)
157
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

Introduccion Al Diseño y Maquetacion de Interfaces Web

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introduccion Al Diseño y Maquetacion de Interfaces Web

Enviado por

Direitos autorais:

Formatos disponíveis

Maquetado

Diseo de interfaces y maquetado web

Hola, <strong>que tal</strong>

<p>Hola, <strong>que tal</strong></p>

<p>Hola, <strong>que tal</strong></p>

<p>Hola, <strong>que tal</p></strong>

Nos asegura que:

Estn correctamente anidados

No falta ningn elemento requerido

No hay errores de sintaxis

<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />

<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />

<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />

Tag de URL de la imagen

<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />

Tag de URL de la imagen Ancho y alto

<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />

Tag de URL de la imagen Ancho y alto Texto alternativo

<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />

Tag de URL de la imagen Ancho y alto Texto alternativo Cierre

Elemento sin contenido

Al no tener texto, ni otro elemento adentro, el tag

Generacin automtica de ndice

1. Esto<br /> <ol>

<span class="pt2"> .botones {

Cambio de tono, afecta significado.

Destaque visual, no necesariamente importante

Fragmentos en otro idioma, trminos tcnicos.

Jos Lpez, abogado.

Se complementan con el HTML,

Media queries - responsive design

84 Maquetado de ejemplo en http://pub.cvam.com.ar/ixda/2011/maquetado

<a class="button">Ver posts anteriores</a>

Un elemento que es nico en la pgina.

<p id="intro">IxDA es la Asociacin de Diseo de Interaccin.

<p class="texto">Loren ipsum</p>

<p class="texto">Loren ipsum</p>

<a href="#" onClick="window.open('index.htm','popup','width=300,height=400')">

Est roto para:

Abrir en otro tab / ventana

<a href="index.htm" target="popup" onClick="window.open(this.href, this.target,

Lista de correo: http://ovillo.org

Enviar un link a la pgina con problemas

Google! (Alguien ya tuvo tu mismo problema)

Web developer extension

Você também pode gostar