Clase 7: Libreras

Launchpad 2017
Temario del curso

Recapitulacin clase anterior

Libreras:
Hover
Lightbox
Css Slidy
Font Awesome
 Libreras

En informtica las libreras o bibliotecas, son un conjunto de funcionalidades

codificadas en un lenguaje de programacin, que ofrecen una interfaz
correspondiente con la funcin por la cual son invocadas.
En otras palabras, las libreras son cdigos hechos para cumplir una funcin
en especfico, adems de ser reutilizables siempre que sean requeridos.
Al desarollar pginas web, una parte importante de las funcionalidades que
necesitemos, probablemente ya han sido implementadas por otras personas
y muchas veces, hasta publicadas como librera
 Hover.css (1/5)
La librera hover.css es una coleccin de efectos hover hechos con CSS 3
Para usar la librera, visita el siguiente link: http://ianlunn.github.io/Hover/
Selecciona Download on GitHub
Hover.css (2/5)
En github tenemos la posibilidad de ver todos los archivos que contiene
la librera, ver cmo se implementa y descargarla (entre otras cosas)

Archivos Descarga Implementacin (Readme.md)

Hover.css (3/5)
Selecciona el botn de descarga y luego la opcin Download ZIP,
descarga el archivo a una carpeta dentro de launchpad, que se llame
librerias.

Descomprime el archivo en la misma carpeta y entra a

hover-master/css. Los archivos hover.css y hover-min.css son los
que nos van a servir, los dos contienen la misma informacin, pero
hover-min.css es ms liviano y rpido debido a no tener espacios en
todo el documento, abre los dos archivos y compralos
Hover.css (4/5)

Crea una carpeta en launchpad llamada clase7 que contenga otra

llamada ejercicio_hover
Dentro de ejercicio_hover, crea un archivo HTML y una carpeta llamada
css, que contenga un archivo style.css
Copia el archivo hover.css y pegalo en la carpeta css recin creada (de
esta manera mantienes la librera intacta para proyectos futuros y usas en
tu proyecto solo lo necesario)
Conecta en tu HTML los dos archivos CSS, de tal manera que style.css
est abajo de hover.css. Esto es para poder sobre-escribir las clases de
hover.css si queremos modificar los estilos
 Hover.css (4/5)
En el link incial (http://ianlunn.github.io/Hover/) se pueden ver ejemplos de lo
que producen los efectos al pasar el mouse encima

Elige un efecto que te guste y buscalo por su nombre en el documento

hover.css, todos los efectos estn sealados como comentario (/* Float */)
 Hover.css (5/5)

En tu HTML genera un botn y aplicale la clase que contiene el efecto que

seleccionaste (hvr-float), revisa el resultado en tu navegador

Haz como mnimo dos etiquetas button ms y prueba con distintos efectos
Font Awesome (1/4)
Font Awesome es una librera que entrega conos generados con vectores,
por lo que se pueden agrandar y achicar a gusto y los podemos estilizar
con CSS, como si fueran un texto
Para usar la librera, visita el siguiente link: http://fontawesome.io/
Selecciona Download y especifica que quieres Font Awesome 4,
descargando la librera en la carpeta librerias antes creada
Font Awesome (2/4)
Descomprime el archivo
Nuevamente en la carpeta css tenemos font-awesome.css y su
versin min. Para usar la librera se necesita uno de esos dos
documentos y la carpeta fonts completa
Crea una nueva carpeta en clase7 llamada ejercicio_fa, que
contenga un HTML, la carpeta fonts de la librera y una carpeta css
con dos documentos: font-awesome.css (de la librera) y style.css
Font Awesome (3/4)
En tu documento HTML, inserta el esqueleto HTML y conecta las dos
hojas de estilo
En la pgina http://fontawesome.io/, selecciona la opcin Icons

Elige un cono que te guste y al seleccionarlo con el mouse, vers una

pgina con el cdigo para incluirlo en tu HTML, incluye un cono y
revisa el resultado
Font Awesome (4/4)

Al elegir la opcin Examples, podemos ver distintas maneras de

manipular y controlar los conos

Intenta incluir como mnimo tres conos y prueba en base a los

ejemplos: agrandar uno, girar otro y animar el tercero
Envuelve un cono en una etiqueta <p>, seleccionala en el
documento style.css y dale un font-size y color especficos.
Revisa el resultado en el navegador
Lightbox (1/3)
Lightbox es una librera basada en javascript, que sirve para navegar entre
una galera de fotos. Permite que, al pinchar una imagen, sta se abra en
una ventana llamada lightbox que se antepondra al fondo
Lightbox (2/3)
Visita el link http://lokeshdhakar.com/projects/lightbox2/
En la pgina encontrars un botn de descarga, ejemplos de como se
ve y una descripcin de cmo implementar la librera en nuestro
proyecto
Descarga la librera en la carpeta librerias y descomprmela
Entra a la carpeta dist y en ella encontrars tres carpetas. Para
nuestro proyecto necesitamos lightbox.min.css, la carpeta images
completa y el documento javascript lightbox-plus-jquery.min.js
Copia estos archivos y pgalos en una nueva carpeta dentro de
clase7, que se llame ejercicio_lightbox.Hazlo de tal manera, que el
documento .js quede en una carpeta js y el .css en una carpeta
css y la carpeta images debe estar al mismo nivel que las otras dos
Crea un documento HTML y otro CSS
 Lightbox (3/3)
En tu documento HTML conecta las dos hojas de estilo

Para agregar el documento javascript usaremos la etiqueta <script>.

Copia y pega el siguiente cdigo antes del cierre de la etiqueta
</body>

Descarga las imgenes por slack e insrtalas dentro de una etiqueta

<a>. El link debe llevar a la imagen grande y la etiqueta <img>,
debe contener la versin min. Revisa el resultado en tu navegador

Asigna la galera a la que pertenece la foto Asigna un ttulo a la foto

 CSSslidy (1/3)
CSSslidy es una librera basada en javascript, que sirve para crear una
galera del tipo slide
Visita el siguiente link https://dudleystorey.github.io/CSSslidy/ y abre
en una nueva pestaa la pgina github

Github
CSSslidy (2/3)
Descarga desde github la librera en tu carpeta librerias
En este caso solo necesitaremos el documento cssslidy.js
Crea una nueva carpeta en clase7, que se llame ejercicio_cssslidy.
La carpeta debe contener un nuevo documento HTML y una carpeta
js con el documento cssslidy.js
En tu documento HTML inserta el siguiente cdigo (en github puedes
copiar la estructura slidy-container para sustituir slo las rutas y
ttulos)

Ttulos
CSSslidy (3/3)

Podemos personalizar la librera con ciertas opciones que ofrece. En

github se muestra un ejemplo y una lista con las opciones disponibles
Intenta usando un par de ellas y ve el resultado