Download - Taller maquetacion web
![Page 1: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/1.jpg)
TA L L E R D E MAQUETACIÓN WEB
DESDE EL PSD HASTA XHTML & CSS
por Andrés Bayona
1
miércoles 16 de junio de 2010
![Page 2: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/2.jpg)
¿QUÉ ES UN FRAMEWORK BASADO CSS ?
2
miércoles 16 de junio de 2010
![Page 3: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/3.jpg)
Conjunto de librerías en CSS que nos facilitan mucho la vida.
3
miércoles 16 de junio de 2010
![Page 4: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/4.jpg)
¿QUÉ VENTAJAS TIENE ?
4
miércoles 16 de junio de 2010
![Page 5: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/5.jpg)
- Ahorro de tiempo en procesos repetitivos- Consistencia entre los elementos HTML y CSS- Elimina la necesidad de utilizar tablas anidadas en HTML - Apoyo cross-browsing entre los navegadores más populares y las últimas versiones.- Se puede utilizar tanto páginas estáticas como CMS más complejos.- Se apoyan en Estándares Webs (W3C).
5
miércoles 16 de junio de 2010
![Page 6: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/6.jpg)
¿CUÁLES SON MIS OPCIONES ?
6
miércoles 16 de junio de 2010
![Page 7: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/7.jpg)
- Blueprint CSS Grid Framework.- Yahoo YUI Gridd CSS.- YAML y TAML Builder.- Grid Designer.- 960 CSS Grid System.- Marker CSS (made in Spain)- ...
7
miércoles 16 de junio de 2010
![Page 8: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/8.jpg)
¿POR QUÉ BLUEPRINT ?
8
miércoles 16 de junio de 2010
![Page 9: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/9.jpg)
- Curva de aprendizaje más corta.- Muy robusto.- Se integra muy bien con otros frameworks (jQuery).- Su nivel de cross-browser es del 99%.- No es restrictivo.- Es el más pequeño en tamaño.- Tiene una hoja de estilos para impresión.- Clases fácil de recordar.- Te puedes crear tu propia rejilla http://bgg.kemtzy.com- Gran comunidad detrás.
9
miércoles 16 de junio de 2010
![Page 10: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/10.jpg)
¿QUÉ ES UNA REJILLA ?También llamada Grilla, GRID, red,malla,...
10
miércoles 16 de junio de 2010
![Page 11: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/11.jpg)
11
miércoles 16 de junio de 2010
![Page 12: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/12.jpg)
¿QUÉ SE PUEDE HACER CON BLUEPRINT?
12
miércoles 16 de junio de 2010
![Page 13: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/13.jpg)
13
miércoles 16 de junio de 2010
![Page 14: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/14.jpg)
¿CÓMO SE EMPIEZA ?
14
miércoles 16 de junio de 2010
![Page 15: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/15.jpg)
Para empezar hay que descargarse la última versión (0.9.1) de Blueprint de la web oficial.
http://www.blueprintcss.org/
15
miércoles 16 de junio de 2010
![Page 16: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/16.jpg)
¿QUÉ TRAE BLUEPRINT?
16
miércoles 16 de junio de 2010
![Page 17: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/17.jpg)
SCREEN.CSS
RESET.CSS GRID.CSS FORMS.CSS TYPOGRAPHY.CSS
PRINT.CSSIE.CSS
INDEX.HTML
17
miércoles 16 de junio de 2010
![Page 18: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/18.jpg)
Este framework tiene unos pocos archivos que debes incluir en tu archivo XHTML;1. blueprint/screen.css: Incluye el archivo reset.css, typography.css, forms.css y grid.css.2. blueprint/print.css: este archivo establece algunas normas de impresión preestablecidas, de modo que las versiones impresas de tu sitio web se ve mejor que normalmente lo haría.3. blueprint/ie.css:incluye todos los hacks para IE6 e IE7. *Se recomienda no editar estos archivos ya que podemos afectar a la maquetación de todos los elementos de la web.
18
miércoles 16 de junio de 2010
![Page 19: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/19.jpg)
¿CÓMO INSERTO BLUEPRINT EN EL ARCHIVO HTML?
19
miércoles 16 de junio de 2010
![Page 20: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/20.jpg)
<html><head> <!-- Enlazo Blueprint CSS Framework --> <link rel="stylesheet" href="screen.css" type="text/css" media="screen"> <link rel="stylesheet" href="print.css" type="text/css" media="print"> <link rel="stylesheet" href="ie.css" type="text/css" media="screen"><!-- Termina Blueprint -->
</head><body>
......</body></html>
20
miércoles 16 de junio de 2010
![Page 21: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/21.jpg)
¿Y SI NO DEBO EDITAR LOS 3 ARCHIVOS CSS,
CÓMO REALIZO MI PROPIO DISEÑO?
21
miércoles 16 de junio de 2010
![Page 22: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/22.jpg)
Creando una hoja de estilos para estos casos.
<!-- Enlazo Blueprint CSS Framework --> <link rel="stylesheet" href="screen.css" type="text/css" media="screen"> <link rel="stylesheet" href="print.css" type="text/css" media="print"> <link rel="stylesheet" href="ie.css" type="text/css" media="screen"><!-- Termina Blueprint --><link rel="stylesheet" href="style.css" type="text/css" media="screen">
22
miércoles 16 de junio de 2010
![Page 23: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/23.jpg)
BIEN, YA SABEMOS LO BÁSICO, AHORA COMIEZA
LO BUENO...
23
miércoles 16 de junio de 2010
![Page 24: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/24.jpg)
Blueprint tiene una serie de clases que hay que conocer...
24
miércoles 16 de junio de 2010
![Page 25: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/25.jpg)
.container
Para empezar tenemos que utilizar la clase .container. Por defecto, tiene una anchura de 950 px y esta centrada en el medio de la pantalla.
25
miércoles 16 de junio de 2010
![Page 26: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/26.jpg)
.containerPuedes añadir 24 columnas a este contenedor, con una anchura por columna de 30px y un margen derecho de 10px a cada columna, exceptuando la última columna.
1 span= 30 px (width) + 10 px (margin-right) = 40px
24 span x 40= 960 (-10 px span-24) = 950px<div class="container"></div>
26
miércoles 16 de junio de 2010
![Page 27: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/27.jpg)
.SPAN (COLUMNA)
27
miércoles 16 de junio de 2010
![Page 28: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/28.jpg)
.spanHay 24 columnas para escoger y puedes realizar cualquier maquetación con esas columnas.Por ejemplo, puedes añadir una estructura de 4 cajas compuestas por 4,12, 4 y 4.
<div class="container"> <div class="span-4">Menu</div> <div class="span-12">Contenido</div> <div class="span-4">Fotos</div> <div class="span-4">Publicidad</div>
</div>
28
miércoles 16 de junio de 2010
![Page 29: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/29.jpg)
.spanYa hemos dicho que cada columna tiene un margen de 10px. Cuando tenemos la estructura del ejemplo anterior, hay que indicarle que la última columna que no tenga margen, porque entonces se rompería la estructura del .container.Para solucionar este problema, Blueprint utiliza la clase .last. Cuando añades esta clase, la estructura cuadrará perfectamente.<div class="container"> <div class="span-4">Menu</div> <div class="span-12">Contenido</div> <div class="span-4">Fotos</div> <div class="span-4 last">Publicidad</div>
</div>
29
miércoles 16 de junio de 2010
![Page 30: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/30.jpg)
.APPEND (RIGHT)
30
miércoles 16 de junio de 2010
![Page 31: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/31.jpg)
.append-xCon la clase append-x añadimos columnas vacías, de separación, a la derecha de la columna que se le aplica. Por ejemplo:<div class="container"> <div class="span-4 append-2">Menu</div> <div class="span-10">Contenido</div> <div class="span-4 append-2">Fotos</div> <div class="span-2 last">Publicidad</div>
</div>
31
miércoles 16 de junio de 2010
![Page 32: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/32.jpg)
.PREPEND (LEFT)
32
miércoles 16 de junio de 2010
![Page 33: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/33.jpg)
.prepend-xSe añaden columnas vacías, de separación, pero esta vez a la izquierda de la columna a la cual se la aplica la clase. Por ejemplo:<div class="container"> <div class="span-4 append-2">Menu</div> <div class="span-8">Contenido</div> <div class="span-4 prepend-4">Fotos</div> <div class="span-2 last">Publicidad</div>
</div>
33
miércoles 16 de junio de 2010
![Page 34: Taller maquetacion web](https://reader033.vdocuments.pub/reader033/viewer/2022052410/5553042bb4c905533f8b4861/html5/thumbnails/34.jpg)
YA SABEMOS LO BÁSICO, AHORA TOCA PRACTICAR!
34
miércoles 16 de junio de 2010