View
12
Download
0
Category
Preview:
Citation preview
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Frameworks CSS: Bootstrap
Álvaro Yuste Torregrosa
Estudiante de Ingeniería Multimedia
Universidad de Alicante (España)
IDW-HI-1
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Contacto
ayt1@alu.ua.es
@AlvYuste
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Objetivos
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Definición general del término “Framework”.
• Herramientas • Pautas
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Definición de Framework CSS.
• Herramientas • Pautas para Desarrollar el estilo de
nuestra página web.
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Usos comunes.
• Sustituir elementos predeterminados del navegador.
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Usos comunes.
• Sustituir elementos predeterminados del navegador. • Ayudar a hacer el texto accesible en cualquier soporte.
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Usos comunes.
• Sustituir elementos predeterminados del navegador. • Ayudar a hacer el texto accesible en cualquier soporte. • Crear cualquier layout robusto fácilmente.
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Principales Frameworks CSS.
• BluePrint (http://blueprintcss.org/) • 960 Grid System (http://960.gs/)
• 12 Columnas de 60px, y espacio de
10px entre ellas. • 16 Columnas de 40px, y espacio de 10px entre ellas.
• 24 Columnas de 30px, y espacio de 10px entre ellas.
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Principales Frameworks CSS.
• YUI, Yahoo! User Interface (http://yuilibrary.com/)
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Desplegables, grupos de botones, barras de navegación, migas de pan, paginación, etiquetas, tipografías, alertas, barras de progreso, iconos …
Principales Frameworks CSS.
• Twitter Bootstrap (http://twitter.github.com/bootstrap)
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Desplegables, grupos de botones, barras de navegación, migas de pan, paginación, etiquetas, tipografías, alertas, barras de progreso, iconos …
Principales Frameworks CSS.
• Twitter Bootstrap (http://twitter.github.com/bootstrap)
http://glyphicons.com/
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Desplegables, grupos de botones, barras de navegación, migas de pan, paginación, etiquetas, tipografías, alertas, barras de progreso, iconos …
Principales Frameworks CSS.
• Twitter Bootstrap (http://twitter.github.com/bootstrap)
http://glyphicons.com/
Less CSS (http://lesscss.org/)
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Desplegables, grupos de botones, barras de navegación, migas de pan, paginación, etiquetas, tipografías, alertas, barras de progreso, iconos …
Principales Frameworks CSS.
• Twitter Bootstrap (http://twitter.github.com/bootstrap)
http://glyphicons.com/
Less CSS (http://lesscss.org/)
Repositorio Github (https://github.com/)
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Ejemplo de uso de Bootstrap.
http://twitter.github.com/bootstrap
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Ejemplo de uso de Bootstrap.
http://twitter.github.com/bootstrap
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
├── img/
│ ├── glyphicons-halflings.png
│ ├── glyphicons-halflings-white.png
└── README.md
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Ejemplo de uso de Bootstrap.
http://twitter.github.com/bootstrap
<head>
…
<link rel="stylesheet" type="text/css"
href="css/bootstrap.css" />
…
</head>
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Botones en Bootstrap.
http://twitter.github.com/bootstrap
<body>
<div>
<button> 1 </button>
<button> 2 </button>
<button> 3 </button>
</div>
</body>
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Botones en Bootstrap.
http://twitter.github.com/bootstrap
<body>
<div class="btn-group">
<button class="btn">1</button>
<button class="btn btn-danger">2</button>
<button class="btn btn-succes">3</button>
</div>
</body>
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Rejillas en Bootstrap.
http://twitter.github.com/bootstrap
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Rejillas en Bootstrap.
http://twitter.github.com/bootstrap
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Rejillas en Bootstrap.
http://twitter.github.com/bootstrap
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Rejillas en Bootstrap.
http://twitter.github.com/bootstrap
span12
span3 span9
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Rejillas en Bootstrap.
span12
span3 span9
row
row
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Rejillas en Bootstrap.
span12
span3 span9
row
row
<div class=”row”>
<div class=”span12”>
<!--Rótulo-->
</div>
</div>
<div class=”row”>
<div class=”span3”>
<!--Menú-->
</div>
<div class=”span9”>
<!--Contenido-->
</div>
</div>
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Rejillas en Bootstrap.
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Conclusión
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Conclusión
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Conclusión
Ventajas • Ahorrar tiempo. • Asegurar funcionalidad. • Diseño atractivo. • Soporte de grandes comunidades.
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
Enlaces de interés • Documentación:
http://www.librosweb.es/css_avanzado/capitulo5.html
http://en.wikipedia.org/wiki/CSS_frameworks
• Ejemplos
http://twitter.github.com
http://blueprintcss.org/
http://yuilibrary.com/
http://960.gs/
Icons from Glyphicons Free, licensed under CC BY 3.0.
HIS
TOR
IA
Introducción al desarrollo web http://idesweb.es/
http://idesweb.es/
idw@idesweb.es @idesweb
Recommended