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

     ...
¿QUÉ ES UN FRAMEWORK
         BASADO CSS ?



                                2
miércoles 16 de junio de 2010
Conjunto de librerías en CSS que nos facilitan
       mucho la vida.




                                3
miércoles 16 de...
¿QUÉ VENTAJAS TIENE ?



                                4
miércoles 16 de junio de 2010
- Ahorro de tiempo en procesos repetitivos
       - Consistencia entre los elementos HTML y CSS
       - Elimina la necesi...
¿CUÁLES SON MIS
                                  OPCIONES ?



                                       6
miércoles 16 de j...
- Blueprint CSS Grid Framework.
       - Yahoo YUI Gridd CSS.
       - YAML y TAML Builder.
       - Grid Designer.
      ...
¿POR QUÉ BLUEPRINT ?
                                8
miércoles 16 de junio de 2010
- Curva de aprendizaje más corta.
       - Muy robusto.
       - Se integra muy bien con otros frameworks (jQuery).
      ...
¿QUÉ ES UNA REJILLA ?
                También llamada Grilla, GRID, red,malla,...




                                    ...
11
miércoles 16 de junio de 2010
¿QUÉ SE PUEDE HACER
               CON BLUEPRINT?



                                12
miércoles 16 de junio de 2010
13
miércoles 16 de junio de 2010
¿CÓMO SE EMPIEZA ?



                                14
miércoles 16 de junio de 2010
Para empezar hay que descargarse la última versión
       (0.9.1) de Blueprint de la web oficial.

                       ...
¿QUÉ TRAE BLUEPRINT?



                                16
miércoles 16 de junio de 2010
INDEX.HTML




                   IE.CSS              SCREEN.CSS           PRINT.CSS




         RESET.CSS              G...
Este framework tiene unos pocos archivos que debes incluir en tu
    archivo XHTML;
    1. blueprint/screen.css: Incluye e...
¿CÓMO INSERTO
                                BLUEPRINT EN EL
                                ARCHIVO HTML?


            ...
<html>
    <head>
          <!-- Enlazo Blueprint CSS Framework -->
          <link rel="stylesheet" href="screen.css"
   ...
¿Y SI NO DEBO EDITAR
       LOS 3 ARCHIVOS CSS,
     CÓMO REALIZO MI PROPIO
             DISEÑO?

                        ...
Creando una hoja de estilos para estos casos.

          <!-- Enlazo Blueprint CSS Framework -->
          <link rel="styl...
BIEN, YA SABEMOS LO
         BÁSICO, AHORA COMIEZA
              LO BUENO...


                                23
miércole...
Blueprint tiene una serie de clases que hay
   que conocer...




                                24
miércoles 16 de junio...
.container

    Para empezar tenemos que utilizar la clase .container.
    Por defecto, tiene una anchura de 950 px y esta...
.container
    Puedes añadir 24 columnas a este contenedor, con una
    anchura por columna de 30px y un margen derecho de...
.SPAN (COLUMNA)



                                       27
miércoles 16 de junio de 2010
.span
    Hay 24 columnas para escoger y puedes realizar cualquier
    maquetación con esas columnas.
    Por ejemplo, pue...
.span
     Ya hemos dicho que cada columna tiene un margen de 10px. Cuando
     tenemos la estructura del ejemplo anterior...
.APPEND (RIGHT)



                                       30
miércoles 16 de junio de 2010
.append-x
     Con la clase append-x añadimos columnas vacías, de separación, a la
     derecha de la columna que se le ap...
.PREPEND (LEFT)



                                       32
miércoles 16 de junio de 2010
.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 ...
YA SABEMOS LO BÁSICO,
     AHORA TOCA PRACTICAR!



                                34
miércoles 16 de junio de 2010
Próxima SlideShare
Cargando en…5
×

Taller maquetacion web

4.872 visualizaciones

Publicado el

Diapositivas

Publicado en: Tecnología, Educación
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
4.872
En SlideShare
0
De insertados
0
Número de insertados
361
Acciones
Compartido
0
Descargas
231
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Taller maquetacion web

  1. 1. 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
  2. 2. ¿QUÉ ES UN FRAMEWORK BASADO CSS ? 2 miércoles 16 de junio de 2010
  3. 3. Conjunto de librerías en CSS que nos facilitan mucho la vida. 3 miércoles 16 de junio de 2010
  4. 4. ¿QUÉ VENTAJAS TIENE ? 4 miércoles 16 de junio de 2010
  5. 5. - 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
  6. 6. ¿CUÁLES SON MIS OPCIONES ? 6 miércoles 16 de junio de 2010
  7. 7. - 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
  8. 8. ¿POR QUÉ BLUEPRINT ? 8 miércoles 16 de junio de 2010
  9. 9. - 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
  10. 10. ¿QUÉ ES UNA REJILLA ? También llamada Grilla, GRID, red,malla,... 10 miércoles 16 de junio de 2010
  11. 11. 11 miércoles 16 de junio de 2010
  12. 12. ¿QUÉ SE PUEDE HACER CON BLUEPRINT? 12 miércoles 16 de junio de 2010
  13. 13. 13 miércoles 16 de junio de 2010
  14. 14. ¿CÓMO SE EMPIEZA ? 14 miércoles 16 de junio de 2010
  15. 15. 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
  16. 16. ¿QUÉ TRAE BLUEPRINT? 16 miércoles 16 de junio de 2010
  17. 17. INDEX.HTML IE.CSS SCREEN.CSS PRINT.CSS RESET.CSS GRID.CSS FORMS.CSS TYPOGRAPHY.CSS 17 miércoles 16 de junio de 2010
  18. 18. 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
  19. 19. ¿CÓMO INSERTO BLUEPRINT EN EL ARCHIVO HTML? 19 miércoles 16 de junio de 2010
  20. 20. <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
  21. 21. ¿Y SI NO DEBO EDITAR LOS 3 ARCHIVOS CSS, CÓMO REALIZO MI PROPIO DISEÑO? 21 miércoles 16 de junio de 2010
  22. 22. 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
  23. 23. BIEN, YA SABEMOS LO BÁSICO, AHORA COMIEZA LO BUENO... 23 miércoles 16 de junio de 2010
  24. 24. Blueprint tiene una serie de clases que hay que conocer... 24 miércoles 16 de junio de 2010
  25. 25. .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
  26. 26. .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 miércoles 16 de junio de 2010
  27. 27. .SPAN (COLUMNA) 27 miércoles 16 de junio de 2010
  28. 28. .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 miércoles 16 de junio de 2010
  29. 29. .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="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
  30. 30. .APPEND (RIGHT) 30 miércoles 16 de junio de 2010
  31. 31. .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="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
  32. 32. .PREPEND (LEFT) 32 miércoles 16 de junio de 2010
  33. 33. .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="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
  34. 34. YA SABEMOS LO BÁSICO, AHORA TOCA PRACTICAR! 34 miércoles 16 de junio de 2010

×