Maquetado con HTML y CSS

1. Maquetado Diseño de interfaces y maquetado webManuel Razzarihttp://convistaalmar.com.arhttp://creativecommons.org/licenses/by/2.5/ar/

2. ¿Qué es una página web?2

5. ¿Qué es un tag? HTML Markup language: lenguaje de marcado Tag: etiqueta Hola, <strong>que tal</strong>5

6. ¿Qué es un tag? Puedo poner una etiqueta adentro de otra. <p>Hola, <strong>que tal</strong></p>6

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

8. Árbol de elementos8

9. Doctype Nos dice que tipo de documento es y su versión.9

10. Head Información acerca de la página.10

11. Title Aparece en la barra de título y en los tabs.11

12. Title Es el link principal en los resultados de búsqueda.12 http://www.socialpatterns.com/search-engine-optimization/writing-better-titles/

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

14. Body Lo que se ve dentro de la ventana del navegador14

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 sintaxis15 http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

16. El validador <p>Hola, <strong>que tal</p></strong>16

17. Links HTML Markup Language17

18. Links HTML HyperText Markup Language pagina2.html foto.jpg pagina1.html etc.18

19. Links Link entre dos páginas. a: ancla href: referencia hipertextual pagina1.html19 http://glyphobet.net/blog/essay/206

22. Links Link entre dos páginas. a: ancla href: referencia hipertextual pagina1.html pagina2.html22 http://glyphobet.net/blog/essay/206

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

24. URLs URL absoluta: <a href="http://www.lanacion.com.ar/espectaculos/">Espectáculos</a>24

25. URLs URLs relativas <a href="pagina2.html">ir a página 2</a> <a href="fotos/pagina2.html">ver foto</a>25

26. Imágenes No sólo linkear a otro recurso, sino incluirlo. <a href="fotos/foto.jpg">ver foto</a>26

27. 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

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

29. Imágenes <img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" /> Tag de imagen29

30. Imágenes <img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" /> Tag de URL de la imagen imagen (gif, jpg, png)30

31. Imágenes <img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" /> Tag de URL de la imagen Ancho y alto imagen (gif, jpg, png)31

32. Imágenes <img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" /> Tag de URL de la imagen Ancho y alto Texto alternativo imagen (gif, jpg, png)32

33. Imágenes <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 imagen (gif, jpg, png)33

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

35. Imágenes ¿Cómo ve Google una imagen? No entiende nada.35

36. Imágenes36

37. Imágenes37

38. Imágenes38

39. Imágenes http://tinyurl.com/alt-decision-tree39 http://webaim.org/techniques/alttext/

40. Imágenes Decoración alt="" Mejor: CSS! http://tinyurl.com/alt-decision-tree40 http://webaim.org/techniques/alttext/

41. Imágenes Decoración alt="" Mejor: CSS! Contenido (información o funcional) alt="texto breve" http://tinyurl.com/alt-decision-tree41 http://webaim.org/techniques/alttext/

42. Imágenes Decoración alt="" Mejor: CSS! Contenido (información o funcional) alt="texto breve" Información redundante alt="" http://tinyurl.com/alt-decision-tree42 http://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 />43 http://www.w3.org/TR/xhtml-media-types/#C_2

44. 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, body44

45. Encabezados45

46. Encabezados46

47. Encabezados47

48. Encabezados48 http://www.456bereastreet.com/archive/200901/headings_heading_hierarchy_and_document_outlines/

49. Encabezados49 http://tinyurl.com/3vlphez

50. Encabezados !!!50 http://tinyurl.com/3vlphez

51. Encabezados Generación automática de índice51 http://fuelyourcoding.com/scripts/toc/

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

53. Encabezados :-(53 http://www.viaresto.clarin.com/

54. Saltos de línea54

55. Listas55

56. Listas Viñetas con imágenes56

57. Listas Lista con links: navegación57 http://css.maxdesign.com.au/

58. Listas Menúes, tabs58 http://www.alistapart.com/articles/taminglists/, http://www.alistapart.com/articles/slidingdoors/

59. Listas anidadas59 http://www.htmldog.com/articles/suckerfish/

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

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

62. Listas [...]62 http://www.lanacion.com.ar

63. Listas <ul> Unordered list. <ol> Ordered list.63 http://javirecetas.com/bizcocho-de-vainilla

64. 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

65. Punto punto punto65 http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm

66. Punto punto punto <span class=”pt2”>········· ·························· ··························· ·····················</span>66 http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm

67. Punto punto punto <span class=”pt2”>········· .botones { ·························· border-bottom: 1px dotted #969696; ··························· } ·····················</span>67 http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm

68. Setenta mil pesos68 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>69 http://html5doctor.com/i-b-em-strong-element/

70. Etiquetas genéricas <div>...</div>: contenedor genérico70

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 5022776375

76. Etiquetas genéricas <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

77. Beneficios del marcado semántico ●SEO ●Accesibilidad ●Diseño cacheable ●Future proof! Hace posible ●Rediseños más rápidos ●Responsive design ●Progressive enhancement77

78. ¡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/

79. http://platform.html5.org/ La plataforma Web79

80. 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

81. CSS Zen Garden81 http://www.mezzoblue.com/zengarden/alldesigns/

82. Múltiples medios82 http://www.raoulwallenberg.net/

83. Múltiples dispositivos83 http://www.alistapart.com/articles/responsive-web-design/

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

85. 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

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

87. 87

88. Selectores Redefinir tags de HTML h1 { color: #249999; } a{ color: #0071BC; }88

89. Selectores Redefinir tags de HTML h1 { color: #249999; } a{ color: #0071BC; }89

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

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

92. Selectores Class Para botones y similares, no me sirve pegarle a todos los <a>! a { color: #FFFFFF; background: #637580; }92

93. Selectores Class Class me permite agrupar por tipo. .button { color: #FFFFFF; background: #637580; } <a class="button">Ver posts anteriores</a>93

94. Selectores Clases semánticos, no descriptivos .gris_chico { color: #CCCCCC; font-size: 80%; } .fecha { color: #CCCCCC; font-size: 80%; }94

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

96. Selectores ID96

97. Reglas de CSS Anatomía de una regla de CSS. selector { atributo: valor; }97

98. Múltiples selectores Una regla puede tener más de un selector. .button { background: #586875; } #footer { background: #586875; }98

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

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

101. Modelo de caja101 http://www.redmelon.net/tstme/box_model/

102. Modelo de caja #intro { … }102

103. Bordes border: 1px solid #24BCB7;103

104. Márgenes margin: 1em;104

105. Márgenes margin: 1em;105

106. Márgenes margin: 0 0 1em 0;106

107. Color de fondo background: #28DBD5;107

108. Color de fondo background: #28DBD5;108

109. Relleno padding: 10px;109

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

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

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

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

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

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

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>116 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ínea117 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 bloque118 http://webdesignfromscratch.com/html-css/css-block-and-inline/

119. Elementos flotantes <img src="float.jpg" alt="Taza" /> <p>Vestibulum ut magna...</p>119 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; }120 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; }121 http://css.maxdesign.com.au/floatutorial/

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

123. #main { ... } #sidebar { ... } #footer { ... }123

124. #main { float: left; } #sidebar { float: left; } #footer { ... }124

125. #main { float: left; } #sidebar { float: left; } #footer { clear: both; }125

126. #main { float: left; margin-right: 55px; } #sidebar { float: left; } #footer { clear: both; }126

127. Técnica de “faux columns”127 http://www.alistapart.com/articles/fauxcolumns/

128. Técnica de “faux columns” #sidebar { background: #f2f2f2; } :(128 http://www.alistapart.com/articles/fauxcolumns/

129. Técnica de “faux columns” wrapper <div id="content"> <div id="main">...</div> <div id="sidebar">...</div> <div id="footer">...</div> </div>129 http://www.alistapart.com/articles/fauxcolumns/

130. 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>130 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>131 http://www.quirksmode.org/css/clearing.html

132. 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>132 http://www.quirksmode.org/css/clearing.html

133. Clear usando overflow O bien hidden #content { overflow: auto; width: 100%; } <div id="content"> <div id="main">...</div> <div id="sidebar">...</div> </div>133 http://www.quirksmode.org/css/clearing.html

134. Posicionamiento134

135. Relativo #intro_more { position: relative; }135

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

137. Absoluto #intro_more { position: absolute; top: 0; left: 0; }137

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

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

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

143. La cascada Ante dos selectores iguales, el último tiene prioridad: pisa al anterior. ... h2 { color: #ff0000; } ... h2 { color: #249898; } ...143

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

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

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

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

148. La cascada Cuando algo se repite, generalizar.148

149. La cascada Cuando algo se repite, generalizar.149

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; }150 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%; }151 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 Times152

153. ¿Qué tipografías puedo usar?153 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)154

155. Mejora progresiva El contenido, siempre accesible.155 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>156 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> <p id="rep">Ver reputación</p> <script> $("#rep").bind("click", function () { window.location = "http://ejemplo.com"; }); </script>157 http://slideshare.net/pazguille/estndares-web-con-chico-ui, https://twitter.com/danwrong/status/205300456547823616

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> <p id="rep">Ver reputación</p> <script> $("#rep").bind("click", function () { window.location = "http://ejemplo.com"; }); </script> <a href="https://twitter.com/#!mrazzari/status/205322525339693057">158 http://slideshare.net/pazguille/estndares-web-con-chico-ui, https://twitter.com/danwrong/status/205300456547823616

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> <p id="rep">Ver reputación</p> <script> $("#rep").bind("click", function () { window.location = "http://ejemplo.com"; }); </script> <a href="https://twitter.com/#!mrazzari/status/205322525339693057">159 http://slideshare.net/pazguille/estndares-web-con-chico-ui, https://twitter.com/danwrong/status/205300456547823616

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 links160 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>161 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>162 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; });});163

164. Mejora progresiva Aceptar las diferencias. Navegador moderno vs. Internet Explorer 7164

165. Mejora progresiva Polyfills: JavaScripts que dan funcionalidad a navegadores que no la soportan nativamente. Ejemplo: CSS3 multi column165 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) ● FAQs http://mezzoblue.com/css/cribsheet http://css-discuss.incutio.com166

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

168. 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.py168