Maquetado con HTML y CSS

MaquetadoDiseño de interfaces y maquetado web

Manuel Razzari http://convistaalmar.com.ar

http://creativecommons.org/licenses/by/2.5/ar/

http://convistaalmar.com.ar/

http://creativecommons.org/licenses/by/2.5/ar/

2

¿Qué es una página web?

3


4


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/

http://www.socialpatterns.com/search-engine-optimization/writing-better-titles/

13

Title

http://www.deyalexander.com.au/publications/page-titles.html

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

http://validator.w3.org/

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



pagina1.html



21

Links



pagina1.html



22

Links



pagina2.htmlpagina1.html



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


Imágenes

Tag de imagen

30


Imágenes

Tag de imagen

URL de la imagen(gif, jpg, png)

31


Imágenes

Tag de imagen


Ancho y alto

32


Imágenes

Tag de imagen


Texto alternativoAncho y alto

33


Imágenes

Tag de imagen


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/

http://tinyurl.com/alt-decision-tree

http://webaim.org/techniques/alttext/

40

Imágenes

Decoraciónalt=""Mejor: CSS!




41

Imágenes

Contenido(informacióno funcional)alt="texto breve"





42

Imágenes

Contenido(informacióno funcional)alt="texto breve"


Informaciónredundantealt=""




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

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/

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/

http://fuelyourcoding.com/scripts/toc/

52

Encabezados

http://www.youtube.com/watch?v=AmUPhEVWu_E

http://www.youtube.com/watch?v=AmUPhEVWu_E

53

Encabezados

:-(

http://www.viaresto.clarin.com/

http://www.viaresto.clarin.com/

54

Saltos de línea

55

Listas

56

Listas

Viñetas con imágenes

57

Listas

Lista con links: navegación

http://css.maxdesign.com.au/

http://css.maxdesign.com.au/

58

Listas

Menúes, tabs

http://www.alistapart.com/articles/taminglists/, http://www.alistapart.com/articles/slidingdoors/

http://www.alistapart.com/articles/taminglists/

http://www.alistapart.com/articles/slidingdoors/

59

Listas anidadas

http://www.htmldog.com/articles/suckerfish/

http://www.htmldog.com/articles/suckerfish/

60

Listas

http://www.lanacion.com.ar

http://www.lanacion.com.ar/

61

Listas



62

Listas

[...]



63

Listas

<ul>Unordered list.

<ol>Ordered list.

http://javirecetas.com/bizcocho-de-vainilla

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>



67

Punto punto punto

<span class=”pt2”>········· ·························· ··························· ·····················</span>

.botones {border-bottom: 1px dotted #969696;}



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/

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

70

Etiquetas genéricas

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

71



72



73



74



75


<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


<span>...</span>: fragmento genérico<p>José López, abogado.

Tel: <span class="tel">54 11 50227763</span></p>


Tel: ☎ 54 11 50227763

<p>José López, abogado.

Tel: <span class="tel"> <span class="type">Home</span> 54 11 50227763 </span></p>


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/

79

La plataforma Web



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/

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

82

Múltiples medios

http://www.raoulwallenberg.net/

http://www.raoulwallenberg.net/

83

Múltiples dispositivos

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

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



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

http://pub.cvam.com.ar/ixda/2011/maquetado

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





.button,#footer {

background: #586875;}

separados por comas

100





.button,#footer {


separados por comas.button,#footer {


.button {text-transform: uppercase;}

101

Modelo de caja

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

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

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



Elemento en línea



118

Bloque vs Línea



Elemento en línea

Elemento de bloque



119

Elementos flotantes

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

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

http://css.maxdesign.com.au/floatutorial/

120

Elementos flotantes



img {float: left;width: 150px;}


121

Elementos flotantes



img {float: left;width: 150px;}

p {float: left;width: 150px;}


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


#footer {clear: both;}

126

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



127

Técnica de “faux columns”

http://www.alistapart.com/articles/fauxcolumns/


128


#sidebar {background: #f2f2f2;}

:(



129


<div id="content"><div id="main">...</div><div id="sidebar">...</div><div id="footer">...</div>

</div>

wrapper



130



</div>

content.gif

#content {background: url(../img/content.gif);}

wrapper



131

Clear usando overflow



</div>

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


132



</div>

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



133


<div id="content"><div id="main">...</div><div id="sidebar">...</div>

</div>

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

O bien hidden



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 {position: relative;}

139

Absoluto


#intro {position: relative;}

#intro_more {position: absolute;bottom: 12px;right: 20px;}

140

Fijo

#intro_more {position: fixed;bottom: 12px;right: 20px;}

141

Fijo


142

Fijo


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 {


p {font-family: Arial;}

.fecha {font-family: Arial;}

body {font-family: Arial;}

146

La cascada

Cuando algo se repite, generalizar..texto {


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


<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

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

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/

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)

http://Typekit.com/

http://Webfonts.fonts.com/

http://Webtype.com/

http://Fontsquirrel.com/

http://Google.com/webfonts

155

Mejora progresiva

El contenido, siempre accesible.

http://tinyurl.com/653gfd7

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

http://slideshare.net/pazguille/estndares-web-con-chico-ui

https://twitter.com/danwrong/status/205300456547823616

157



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



158



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




159



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




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>



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>



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

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

http://ovillo.org/

http://mezzoblue.com/css/cribsheet

http://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

http://getfirebug.com/whatisfirebug

https://developers.google.com/chrome-developer-tools/

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

http://www.iconico.com/caliper/skins.aspx

http://utilu.com/IECollection/

http://tux.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py

Maquetado con HTML y CSS

Technology

Transcript of Maquetado con HTML y CSS