Maquetado con HTML y CSS

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


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

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
a: ancla

pagina1.html


Links
a: ancla

pagina1.html pagina2.html


Atributos
<a href="pagina2.html">ir a página 2</a>
nombre valor

23

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.
<img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />

27

Imágenes


28

Imágenes


Tag de
imagen

29

Imágenes


Tag de URL de la imagen
imagen (gif, jpg, png)

30

Imágenes


Tag de URL de la imagen Ancho y alto

31

Imágenes


Tag de URL de la imagen Ancho y alto Texto alternativo

32

Imágenes


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

33

Imágenes
¿Cómo ve Google una imagen?

34

Imágenes
¿Cómo ve Google una imagen?

No entiende nada.
35

Imágenes

http://tinyurl.com/alt-decision-tree
39 http://webaim.org/techniques/alttext/

Imágenes
Decoración
alt=""
Mejor: CSS!


Imágenes
Decoración
alt=""
Mejor: CSS!

Contenido
(información
o funcional)
alt="texto
breve"


Imágenes
Decoración
alt=""
Mejor: CSS!

Contenido
(información
o funcional)
alt="texto
breve"

Información
redundante
alt=""


Imágenes
Elemento con contenido
<p>Tags con contenido adentro</p>

Elemento sin contenido

Al no tener texto, ni otro elemento adentro, el
elemento se cierra solo.
<tag />

43 http://www.w3.org/TR/xhtml-media-types/#C_2

Tags más 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

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/

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


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>También</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>

Setenta mil pesos

68 https://github.com/mercadolibre/chico/issues/632

É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>

69 http://html5doctor.com/i-b-em-strong-element/

Etiquetas genéricas
<div>...</div>: contenedor genérico

70


71


72


73


74

<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

75

<span>...</span>: fragmento genérico
<p>José López, abogado.
class="tel">
Tel: <span class="tel">54 11 50227763</span>
</p> <span class="type">Home</span>
54 11 50227763
</span>
</p>
José López, abogado.

Tel: ☎ 54 11 50227763
⌂

76

Beneficios del marcado
semántico
●SEO
●Accesibilidad

●Diseño cacheable

●Future proof!

Hace posible
●Rediseños más rápidos

●Responsive design

●Progressive enhancement

77

¡El HTML ganará!
● Web apps
● ChromeOS
● Boot to Gecko
● HTML5 en Windows 8
● Mac OS Dashboard apps
● iPad, ePub
● Apache Cordova (PhoneGap)

78 http://platform.html5.org/

http://platform.html5.org/

La plataforma Web

79

CSS
Hojas de estilo en cascada.

Se complementan con el HTML,
describiendo el diseño visual de una página.

80 http://www.popandshorty.bigcartel.com/product/you-are-the-css-to-my-html-button

CSS Zen Garden

81 http://www.mezzoblue.com/zengarden/alldesigns/

Múltiples medios

82 http://www.raoulwallenberg.net/

Múltiples dispositivos

83 http://www.alistapart.com/articles/responsive-web-design/

Incluir el CSS
Elemento link
<link rel="stylesheet" href="css/style.css" />

84

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)" />

85

HTML base

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

Selectores
Redefinir tags de HTML

h1 {
color: #249999;
}

a{
color: #0071BC;
}

88

Selectores
Redefinir tags de HTML

h1 {
color: #249999;
}

a{
color: #0071BC;
}

89

Selectores
Todo se puede cambiar
<p>Para diseñar interfaces web <b>efectivas,
atractivas, y usables</b> Inicio...</p>

90

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;
}

91

Selectores
Class

Para botones
y similares, no me sirve
pegarle a todos los <a>!

a {
color: #FFFFFF;
background: #637580;
}

92

Selectores
Class

Class me permite
agrupar por tipo.

.button {
color: #FFFFFF;
}

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

Selectores
Clases semánticos, no descriptivos

.gris_chico {
color: #CCCCCC;
font-size: 80%;
}

.fecha {
color: #CCCCCC;
font-size: 80%;
}

94

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>

95

Reglas de CSS
Anatomía de una regla de CSS.

selector {
atributo: valor;
}

97

Múltiples selectores
Una regla puede tener más de un selector.

.button {
}

#footer {
}

98

separados por comas
.button {
.button,
#footer {
}
}
#footer {
}

99

separados por comas
.button {
.button,
#footer {
}
}
#footer {
.button {
}
text-transform: uppercase;
}

100

Modelo de caja

101 http://www.redmelon.net/tstme/box_model/

Modelo de caja
#intro { … }

102

Bordes
border: 1px solid #24BCB7;

103

Márgenes
margin: 1em;

104

Márgenes
margin: 1em;

105

Márgenes
margin: 0 0 1em 0;

106

Color de fondo

107

Color de fondo

108

Relleno
padding: 10px;

109

Relleno
padding: 10px 240px 10px 10px;
top right bottom left “trouble”

110

Relleno
padding: 10px 240px 10px 10px;
top right bottom left “trouble”

111

Imagen de fondo
background: #28DBD5 url(../img/intro.gif);

intro.gif

112

Imagen de fondo
background: #28DBD5 url(../img/intro.gif);

intro.gif

113

Fondo repetido
background: #28DBD5 url(../img/intro.gif) no-repeat;
opciones: repeat, repeat-x, repeat-y

114

Posición del fondo
background: #28DBD5 url(../img/intro.gif) no-repeat 350px -35px;
left top

115

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>

116 http://webdesignfromscratch.com/html-css/css-block-and-inline/

Bloque vs Línea

Elemento
en línea


Bloque vs Línea

Elemento
en línea
Elemento
de bloque


Elementos flotantes
<img src="float.jpg" alt="Taza" />

<p>Vestibulum ut magna...</p>

119 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>

122

#main {
...
}

#sidebar {
...
}

#footer {
...
}

123

#main {
float: left;
}

#sidebar {
float: left;
}

#footer {
...
}

124

#main {
float: left;
}

#sidebar {
float: left;
}

#footer {
clear: both;
}

125

#main {
float: left;
margin-right: 55px;
}

#sidebar {
float: left;
}

#footer {
clear: both;
}

126

Técnica de “faux columns”

127 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>

131 http://www.quirksmode.org/css/clearing.html


Sin el footer, el
wrapper se colapsa,
porque los floats no
están en el flujo
normal del documento.

<div id="content">
</div>


O bien hidden

#content {
overflow: auto;
width: 100%;
}

<div id="content">
</div>


Relativo

#intro_more {
position: relative;
}

135

Relativo

#intro_more {
position: relative;
top: 40px;
left: -50px;
}

136

Absoluto

#intro_more {
position: absolute;
top: 0;
left: 0;
}

137

Absoluto

#intro_more { #intro {
position: absolute; position: relative;
top: 0; }
left: 0;
}

138

Absoluto

#intro_more { #intro {
position: absolute; position: relative;
bottom:
top: 0; 12px; }
right: 20px;
left: 0;
}

139

Fijo

#intro_more {
position: fixed;
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

La cascada
Ante dos selectores iguales, el último tiene prioridad:
pisa al anterior.
...

h2 {
color: #ff0000;
}

...

h2 {
color: #249898;
}

...

143

La cascada
Muchas propiedades se heredan de los
elementos contenedores.
h2 {
font-family: Arial;
}

p {
font-family: Arial;
}

.fecha {
font-family: Arial;
}

144

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;
}

145

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>

146

La cascada
.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>

147

La cascada

148

La cascada

149

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;
}

150 http://librosweb.es/css/capitulo2/selectores_basicos.html

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%;
}

151 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

152

¿Qué tipografías puedo usar?

153 http://www.codestyle.org/css/font-family/

¿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)

154

Mejora progresiva
El contenido, siempre accesible.

155 http://tinyurl.com/653gfd7

Esto no es un link
<a id="ToppageUC1_Mainmenubuild2_BemestingButton1_Lin kButton1"
class="MenuButton" href="javascript:__doPostBack('ToppageUC1$Mainmenu
build2$BemestingButton1$LinkButton1','')">Inicio</a>

156 http://slideshare.net/pazguille/estndares-web-con-chico-ui, https://twitter.com/danwrong/status/205300456547823616

Esto no es un link

<p id="rep">Ver reputación</p>
<script>
$("#rep").bind("click", function () {
window.location = "http://ejemplo.com";
});
</script>


Esto no es un link

<script>
});
</script>

<a href="https://twitter.com/#!mrazzari/status/205322525339693057">


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

160 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">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;
});
});

163

Mejora progresiva
Aceptar las diferencias.

Navegador moderno

vs.

Internet Explorer 7

164

Mejora progresiva
Polyfills: JavaScripts que dan funcionalidad a
navegadores que no la soportan nativamente.

Ejemplo: CSS3 multi column
165 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

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

166

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)
167

Herramientas
● Firebug
http://getfirebug.com/whatisfirebug

● Chrome Dev Tools
https://developers.google.com/chrome-developer-tools/

● 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

168

Maquetado con HTML y CSS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Maquetado con HTML y CSS

Similar a Maquetado con HTML y CSS (20)

Más de Manuel Razzari

Más de Manuel Razzari (6)

Último

Último (19)

Maquetado con HTML y CSS