Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Maquetado con HTML y CSS

26,246 views

Published on

Módulo 4 del
Curso IxDA BA 2012: Introducción al diseño y maquetación de interfaces web.

http://ixda.com.ar/?p=602


* Cómo se construye una página
* Marcado semántico, accesibilidad
* Uso apropiado de elementos más comunes
. Listas, links, imágenes, encabezados
. Elementos de bloque vs línea
. Árbol de elementos, jerarquía
* Doctype, validación
* URLs, la web como red de recursos
* CSS, separación de contenido y presentación
* Clases y IDs, selectores semánticos, cascada
* El modelo de caja, posicionamiento, elementos flotantes
* Fuentes, font stacks, tamaños, tipografías básicas, font-face, licencias
* Recorte de imágenes
* Errores más comunes
* Impacto en el posicionamiento en buscadores

Published in: Technology
  • hundreds of girls living near you. F.U.C.K ONE TONIGHT!  http://t.cn/AiuW9zn5
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Muchas gracias!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Maquetado con HTML y CSS

  1. 1. Maquetado Diseño de interfaces y maquetado webManuel Razzarihttp://convistaalmar.com.arhttp://creativecommons.org/licenses/by/2.5/ar/
  2. 2. ¿Qué es una página web?2
  3. 3. ¿Qué es una página web?3
  4. 4. ¿Qué es una página web?4
  5. 5. ¿Qué es un tag? HTML Markup language: lenguaje de marcado Tag: etiqueta Hola, <strong>que tal</strong>5
  6. 6. ¿Qué es un tag? Puedo poner una etiqueta adentro de otra. <p>Hola, <strong>que tal</strong></p>6
  7. 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. 8. Árbol de elementos8
  9. 9. Doctype Nos dice que tipo de documento es y su versión.9
  10. 10. Head Información acerca de la página.10
  11. 11. Title Aparece en la barra de título y en los tabs.11
  12. 12. Title Es el link principal en los resultados de búsqueda.12 http://www.socialpatterns.com/search-engine-optimization/writing-better-titles/
  13. 13. Title13 http://www.deyalexander.com.au/publications/page-titles.html
  14. 14. Body Lo que se ve dentro de la ventana del navegador14
  15. 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. 16. El validador <p>Hola, <strong>que tal</p></strong>16
  17. 17. Links HTML Markup Language17
  18. 18. Links HTML HyperText Markup Language pagina2.html foto.jpg pagina1.html etc.18
  19. 19. Links Link entre dos páginas. a: ancla href: referencia hipertextual pagina1.html19 http://glyphobet.net/blog/essay/206
  20. 20. Links Link entre dos páginas. a: ancla href: referencia hipertextual pagina1.html20 http://glyphobet.net/blog/essay/206
  21. 21. Links Link entre dos páginas. a: ancla href: referencia hipertextual pagina1.html21 http://glyphobet.net/blog/essay/206
  22. 22. Links Link entre dos páginas. a: ancla href: referencia hipertextual pagina1.html pagina2.html22 http://glyphobet.net/blog/essay/206
  23. 23. Atributos <a href="pagina2.html">ir a página 2</a> nombre valor23
  24. 24. URLs URL absoluta: <a href="http://www.lanacion.com.ar/espectaculos/">Espectáculos</a>24
  25. 25. URLs URLs relativas <a href="pagina2.html">ir a página 2</a> <a href="fotos/pagina2.html">ver foto</a>25
  26. 26. Imágenes No sólo linkear a otro recurso, sino incluirlo. <a href="fotos/foto.jpg">ver foto</a>26
  27. 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. 28. Imágenes <img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" />28
  29. 29. Imágenes <img src="fotos/foto.jpg" width="100" height="150" alt="Puesta de sol" /> Tag de imagen29
  30. 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. 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. 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. 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. 34. Imágenes ¿Cómo ve Google una imagen?34
  35. 35. Imágenes ¿Cómo ve Google una imagen? No entiende nada.35
  36. 36. Imágenes36
  37. 37. Imágenes37
  38. 38. Imágenes38
  39. 39. Imágenes http://tinyurl.com/alt-decision-tree39 http://webaim.org/techniques/alttext/
  40. 40. Imágenes Decoración alt="" Mejor: CSS! http://tinyurl.com/alt-decision-tree40 http://webaim.org/techniques/alttext/
  41. 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. 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. 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. 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. 45. Encabezados45
  46. 46. Encabezados46
  47. 47. Encabezados47
  48. 48. Encabezados48 http://www.456bereastreet.com/archive/200901/headings_heading_hierarchy_and_document_outlines/
  49. 49. Encabezados49 http://tinyurl.com/3vlphez
  50. 50. Encabezados !!!50 http://tinyurl.com/3vlphez
  51. 51. Encabezados Generación automática de índice51 http://fuelyourcoding.com/scripts/toc/
  52. 52. Encabezados52 http://www.youtube.com/watch?v=AmUPhEVWu_E
  53. 53. Encabezados :-(53 http://www.viaresto.clarin.com/
  54. 54. Saltos de línea54
  55. 55. Listas55
  56. 56. Listas Viñetas con imágenes56
  57. 57. Listas Lista con links: navegación57 http://css.maxdesign.com.au/
  58. 58. Listas Menúes, tabs58 http://www.alistapart.com/articles/taminglists/, http://www.alistapart.com/articles/slidingdoors/
  59. 59. Listas anidadas59 http://www.htmldog.com/articles/suckerfish/
  60. 60. Listas60 http://www.lanacion.com.ar
  61. 61. Listas61 http://www.lanacion.com.ar
  62. 62. Listas [...]62 http://www.lanacion.com.ar
  63. 63. Listas <ul> Unordered list. <ol> Ordered list.63 http://javirecetas.com/bizcocho-de-vainilla
  64. 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. 65. Punto punto punto65 http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm
  66. 66. Punto punto punto <span class=”pt2”>········· ·························· ··························· ·····················</span>66 http://edant.clarin.com/diario/2004/05/03/um/m-752951.htm
  67. 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. 68. Setenta mil pesos68 https://github.com/mercadolibre/chico/issues/632
  69. 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. 70. Etiquetas genéricas <div>...</div>: contenedor genérico70
  71. 71. Etiquetas genéricas <div>...</div>: contenedor genérico71
  72. 72. Etiquetas genéricas <div>...</div>: contenedor genérico72
  73. 73. Etiquetas genéricas <div>...</div>: contenedor genérico73
  74. 74. Etiquetas genéricas <div>...</div>: contenedor genérico74
  75. 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. 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. 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. 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. 79. http://platform.html5.org/ La plataforma Web79
  80. 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. 81. CSS Zen Garden81 http://www.mezzoblue.com/zengarden/alldesigns/
  82. 82. Múltiples medios82 http://www.raoulwallenberg.net/
  83. 83. Múltiples dispositivos83 http://www.alistapart.com/articles/responsive-web-design/
  84. 84. Incluir el CSS Elemento link <link rel="stylesheet" href="css/style.css" />84
  85. 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. 86. HTML base86 Maquetado de ejemplo en http://pub.cvam.com.ar/ixda/2011/maquetado
  87. 87. 87
  88. 88. Selectores Redefinir tags de HTML h1 { color: #249999; } a{ color: #0071BC; }88
  89. 89. Selectores Redefinir tags de HTML h1 { color: #249999; } a{ color: #0071BC; }89
  90. 90. Selectores Todo se puede cambiar <p>Para diseñar interfaces web <b>efectivas, atractivas, y usables</b> Inicio...</p>90
  91. 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. 92. Selectores Class Para botones y similares, no me sirve pegarle a todos los <a>! a { color: #FFFFFF; background: #637580; }92
  93. 93. Selectores Class Class me permite agrupar por tipo. .button { color: #FFFFFF; background: #637580; } <a class="button">Ver posts anteriores</a>93
  94. 94. Selectores Clases semánticos, no descriptivos .gris_chico { color: #CCCCCC; font-size: 80%; } .fecha { color: #CCCCCC; font-size: 80%; }94
  95. 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. 96. Selectores ID96
  97. 97. Reglas de CSS Anatomía de una regla de CSS. selector { atributo: valor; }97
  98. 98. Múltiples selectores Una regla puede tener más de un selector. .button { background: #586875; } #footer { background: #586875; }98
  99. 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. 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. 101. Modelo de caja101 http://www.redmelon.net/tstme/box_model/
  102. 102. Modelo de caja #intro { … }102
  103. 103. Bordes border: 1px solid #24BCB7;103
  104. 104. Márgenes margin: 1em;104
  105. 105. Márgenes margin: 1em;105
  106. 106. Márgenes margin: 0 0 1em 0;106
  107. 107. Color de fondo background: #28DBD5;107
  108. 108. Color de fondo background: #28DBD5;108
  109. 109. Relleno padding: 10px;109
  110. 110. Relleno padding: 10px 240px 10px 10px; top right bottom left “trouble”110
  111. 111. Relleno padding: 10px 240px 10px 10px; top right bottom left “trouble”111
  112. 112. Imagen de fondo background: #28DBD5 url(../img/intro.gif); intro.gif112
  113. 113. Imagen de fondo background: #28DBD5 url(../img/intro.gif); intro.gif113
  114. 114. Fondo repetido background: #28DBD5 url(../img/intro.gif) no-repeat; opciones: repeat, repeat-x, repeat-y114
  115. 115. Posición del fondo background: #28DBD5 url(../img/intro.gif) no-repeat 350px -35px; left top115
  116. 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. 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. 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. 119. Elementos flotantes <img src="float.jpg" alt="Taza" /> <p>Vestibulum ut magna...</p>119 http://css.maxdesign.com.au/floatutorial/
  120. 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. 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. 122. <div id="main">...</div> <div id="sidebar">...</div> <div id="footer">...</div>122
  123. 123. #main { ... } #sidebar { ... } #footer { ... }123
  124. 124. #main { float: left; } #sidebar { float: left; } #footer { ... }124
  125. 125. #main { float: left; } #sidebar { float: left; } #footer { clear: both; }125
  126. 126. #main { float: left; margin-right: 55px; } #sidebar { float: left; } #footer { clear: both; }126
  127. 127. Técnica de “faux columns”127 http://www.alistapart.com/articles/fauxcolumns/
  128. 128. Técnica de “faux columns” #sidebar { background: #f2f2f2; } :(128 http://www.alistapart.com/articles/fauxcolumns/
  129. 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. 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. 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. 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. 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. 134. Posicionamiento134
  135. 135. Relativo #intro_more { position: relative; }135
  136. 136. Relativo #intro_more { position: relative; top: 40px; left: -50px; }136
  137. 137. Absoluto #intro_more { position: absolute; top: 0; left: 0; }137
  138. 138. Absoluto #intro_more { #intro { position: absolute; position: relative; top: 0; } left: 0; }138
  139. 139. Absoluto #intro_more { #intro { position: absolute; position: relative; bottom: top: 0; 12px; } right: 20px; left: 0; }139
  140. 140. Fijo #intro_more { position: fixed; bottom: 12px; right: 20px; }140
  141. 141. Fijo #intro_more { position: fixed; bottom: 12px; right: 20px; }141
  142. 142. Fijo #intro_more { position: fixed; bottom: 12px; right: 20px; }142
  143. 143. La cascada Ante dos selectores iguales, el último tiene prioridad: pisa al anterior. ... h2 { color: #ff0000; } ... h2 { color: #249898; } ...143
  144. 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. 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. 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. 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. 148. La cascada Cuando algo se repite, generalizar.148
  149. 149. La cascada Cuando algo se repite, generalizar.149
  150. 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. 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. 152. Pila de tipografías “Font stack” body { font-family: Cambria, Georgia, Times, “Times New Roman”, serif; } Cambria Georgia Times152
  153. 153. ¿Qué tipografías puedo usar?153 http://www.codestyle.org/css/font-family/
  154. 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. 155. Mejora progresiva El contenido, siempre accesible.155 http://tinyurl.com/653gfd7
  156. 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. 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. 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. 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. 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. 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. 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. 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. 164. Mejora progresiva Aceptar las diferencias. Navegador moderno vs. Internet Explorer 7164
  165. 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. 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. 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. 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

×