31
HISTORIA 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

ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

  • Upload
    others

  • View
    11

  • Download
    0

Embed Size (px)

Citation preview

Page 1: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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

Page 2: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Contacto

[email protected]

@AlvYuste

Page 3: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Objetivos

Page 4: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Definición general del término “Framework”.

• Herramientas • Pautas

Page 5: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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.

Page 6: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Usos comunes.

• Sustituir elementos predeterminados del navegador.

Page 7: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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.

Page 8: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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.

Page 9: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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.

Page 10: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Principales Frameworks CSS.

• YUI, Yahoo! User Interface (http://yuilibrary.com/)

Page 11: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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)

Page 12: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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/

Page 13: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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

Page 14: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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

Page 15: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Ejemplo de uso de Bootstrap.

http://twitter.github.com/bootstrap

Page 16: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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

Page 17: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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>

Page 18: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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>

Page 19: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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>

Page 20: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Rejillas en Bootstrap.

http://twitter.github.com/bootstrap

Page 21: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Rejillas en Bootstrap.

http://twitter.github.com/bootstrap

Page 22: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Rejillas en Bootstrap.

http://twitter.github.com/bootstrap

Page 23: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Rejillas en Bootstrap.

http://twitter.github.com/bootstrap

span12

span3 span9

Page 24: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Rejillas en Bootstrap.

span12

span3 span9

row

row

Page 25: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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>

Page 26: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Rejillas en Bootstrap.

Page 27: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Conclusión

Page 28: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

Conclusión

Page 29: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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.

Page 30: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

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.

Page 31: ORIA Frameworks CSS: Bootstraprua.ua.es/dspace/bitstream/10045/26796/1/CSS - Frameworks...ORIA Introducción al desarrollo web Frameworks CSS: Bootstrap Álvaro Yuste Torregrosa Estudiante

HIS

TOR

IA

Introducción al desarrollo web http://idesweb.es/

http://idesweb.es/

[email protected] @idesweb