Taller maquetacion web

TA L L E R D E
MAQUETACIÓN WEB
D E S D E E L P S D H A S TA X H T M L & C S S

por Andrés Bayona

1
miércoles 16 de junio de 2010

¿QUÉ ES UN FRAMEWORK
BASADO CSS ?

2

Conjunto de librerías en CSS que nos facilitan
mucho la vida.

3

¿QUÉ VENTAJAS TIENE ?

4

- 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

¿CUÁLES SON MIS
OPCIONES ?

6

- Blueprint CSS Grid Framework.
- Yahoo YUI Gridd CSS.
- YAML y TAML Builder.
- Grid Designer.
- 960 CSS Grid System.
- Marker CSS (made in Spain)
- ...

7

¿POR QUÉ BLUEPRINT ?
8

- 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

¿QUÉ ES UNA REJILLA ?
También llamada Grilla, GRID, red,malla,...

10

11

¿QUÉ SE PUEDE HACER
CON BLUEPRINT?

12

13

¿CÓMO SE EMPIEZA ?

14

Para empezar hay que descargarse la última versión
(0.9.1) de Blueprint de la web oficial.

http://www.blueprintcss.org/

15

¿QUÉ TRAE BLUEPRINT?

16

INDEX.HTML

IE.CSS SCREEN.CSS PRINT.CSS

RESET.CSS GRID.CSS FORMS.CSS TYPOGRAPHY.CSS

17

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

¿CÓMO INSERTO
BLUEPRINT EN EL
ARCHIVO HTML?

19

<html>
<head>

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

</head>
<body>
......
</body>
</html>

20

¿Y SI NO DEBO EDITAR
LOS 3 ARCHIVOS CSS,
CÓMO REALIZO MI PROPIO
DISEÑO?

21

Creando una hoja de estilos para estos casos.


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

<link rel="stylesheet" href="style.css" type="text/

22

BIEN, YA SABEMOS LO
BÁSICO, AHORA COMIEZA
LO BUENO...

23

Blueprint tiene una serie de clases que hay
que conocer...

24

.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

.container
Puedes 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

.SPAN (COLUMNA)

27

.span
Hay 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

.span
Ya 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="span-4">Menu</div>
<div class="span-4">Fotos</div>
<div class="span-4 last">Publicidad</div>
</div>

29

.APPEND (RIGHT)

30

.append-x
Con 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="span-4 append-2">Menu</div>
<div class="span-4 append-2">Fotos</div>
</div>

31

.PREPEND (LEFT)

32

.prepend-x
Se 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="span-4 append-2">Menu</div>
<div class="span-4 prepend-4">Fotos</div>
</div>

33

YA SABEMOS LO BÁSICO,
AHORA TOCA PRACTICAR!

34

Taller maquetacion web

Más contenido relacionado

La actualidad más candente

Similar a Taller maquetacion web

Más de IMAGINA EDUCATION SLU

Taller maquetacion web