Tallermaquetacionweb 100617063433 Phpapp02

TA L L E R D E
MAQUETACIN WEB
D E S D E E L P S D H A S TA X H T M L & C S S
por Andrs Bayona
1
mircoles 16 de junio de 2010
QU ES UN FRAMEWORK
BASADO CSS ?
2
Conjunto de libreras 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 ms
populares y las ltimas versiones.
- Se puede utilizar tanto pginas estticas como CMS
ms complejos.
- Se apoyan en Estndares Webs (W3C).
5
CULES 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 ms corta.
- Muy robusto.
- Se integra muy bien con otros frameworks (jQuery).
- Su nivel de cross-browser es del 99%.
- No es restrictivo.
- Es el ms pequeo en tamao.
- Tiene una hoja de estilos para impresin.
- Clases fcil de recordar.
- Te puedes crear tu propia rejilla http://bgg.kemtzy.com
- Gran comunidad detrs.
9
QU ES UNA REJILLA ?
Tambin llamada Grilla, GRID, red,malla,...
10
11
QU SE PUEDE HACER
CON BLUEPRINT?
12
13
CMO SE EMPIEZA ?
14
Para empezar hay que descargarse la ltima versin
(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
impresin preestablecidas, de modo que las versiones impresas de tu
sitio web se ve mejor que normalmente lo hara.
3. blueprint/ie.css:incluye todos los hacks para IE6 e IE7.
*Se recomienda no editar estos archivos ya que podemos afectar a la

maquetacin de todos los elementos de la web.
18
CMO 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,
CMO REALIZO MI PROPIO
DISEO?
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
BSICO, 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 aadir 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
maquetacin con esas columnas.
Por ejemplo, puedes aadir 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 rompera la
estructura del .container.
Para solucionar este problema, Blueprint utiliza la clase .last. Cuando
aades 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 aadimos columnas vacas, de separacin, 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 aaden columnas vacas, de separacin, 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 BSICO,
AHORA TOCA PRACTICAR!
34

Tallermaquetacionweb 100617063433 Phpapp02

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tallermaquetacionweb 100617063433 Phpapp02

Cargado por

Copyright:

Formatos disponibles

TA L L E R D E

por Andrs Bayona

IE.CSS SCREEN.CSS PRINT.CSS

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

*Se recomienda no editar estos archivos ya que podemos afectar a la

Para empezar tenemos que utilizar la clase .container.

1 span= 30 px (width) + 10 px (margin-right) = 40px

24 span x 40= 960 (-10 px span-24) = 950px

También podría gustarte