Cardify

Cardify es un plugin de jQuery, que dado un contenedor busca todas las imágenes que encuentre dentro del contenedor y reemplaza por un nuevo elemento <figure> que contenga la imagen (<img>) además de un <figcaption> con el texto del atributo alt de la imagen.

Desarrollado para Laboratoria

DEMO :

Desarrollo del plugin

Como sabemos, jQuery es de las más potentes y utilizadas librerías de Javascript, reconocida como el propio framework de Javascript que se caracteriza por las funciones y eventos que implementa en este lenguaje.

Por lo que consideramos los siguientes puntos para la creación de nuestro plugin:

I -Momenclatura del plugin

Hay un patrón generalizado de la nomenclatura de los plugins:

jquery.nombre_plugin.js

Lógicamente, siempre debes de incluír la librería jQuery antes del código de extensión.

Referencias: Momenclatura del script del plugin - Post de investigación 1, Momenclatura del script del plugin - Post de investigación 2

II -Inicializar el plugin

La manera de inicializar el plugin de jQuery es básicamente obtener un parámetro “$” (signo de dólar), el cual representará nuestro objeto de jQuery; una vez obtenido el parámetro, extendemos su funcionalidad añadiendo “.fn.extend”

Este método (extend) nos permite incrementar funcionalidad a jQuery, pues todo el código de nuestro plugin debe de ir definido dentro de él.

Otra manera de inicializar.

  $.fn.cardify = function() {
  };

III -Construyendo el plugin

Vamos a crear un método que debe buscar todas las imágenes que encuentre dentro del contenedor y reemplazarlas por un nuevo elemento <figure> que contenga la imagen (<img>) además de un <figcaption> con el texto del atributo alt encapsulados dentro del objeto jQuery. Para ello vamos a usar el método genérico de jQuery llamado each(). Este método ejecuta una función en el contexto de cada elemento encontrado:

  $(this).find('img').each(function() {
    // Cada etiqueta img tomara como padre una etiqueta figure
    $(this).wrap('<figure></figure>');
    // A cada padre de la etiqueta img se le pondra como ultimo hijo una etiqueta figcaption
    // A cada figcaption se le pondra como texto el atributo de su imagen correspondiente
    $(this).parent().append($('<figcaption>' + $(this).attr('alt') + '</figcaption>'));

    // hover
    $(this).hover(function () {
      $(this).css('opacity', '0.2');
      $(this).next().css('display', 'none');
    }, function () {
      $(this).css('opacity', '1');
      $(this).next().css('display', 'block');
    });
  });

Guía de uso

Implementacion del plugin Cardify a un proyecto

Para el uso de nuestro plugin Cardify en tu proyecto debes incluir dos archivos importantes.

jquery.cardify.css en los que se incluyen los estilos necesarios para la implementación del funcionamiento correcto del plugin.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Ejemplo de vinculación de la hoja de estilos del plugin cardify -->
  <link rel="stylesheet" href="ruta-del-archivo/jquery.cardify.css">
  <title>Document</title>
</head>

jquery.cardify.js que es el script donde se ha desarrollado la funcionalidad del plugin.

<body>
  ...

  <!-- Ejemplo de vinculación del archivo js del plugin -->
  <script src="ruta-del-archivo/jquery.cardify.js"></script>
</body>

Uso

Para que el plugin de cardify aplique su funcionalidad, debemos implementar la siguiente línea de código al archivo propio Javascript del proyecto que el usuario haya creado.

// seleccionamos al contenedor que tenga la clase y luego que aplica la funcionalidad de cardify
$('.cardify-mode').cardify();

Este se aplicará de manera que buscará todos los elementos (<img>) que se encuentren dentro del contenedor con clase .cardify-mode , envolviendo cada imagen en un <figure> y añadiendo el <figcaption> con el texto del atributo alt de cada elemento (<img>).

Ejemplo

La estructura inicial HTML a trabajar es un contenedor que contiene todos los elementos (<img>).

  <div class="container cardify-mode" id="hello">
    <img src="assets/images/paisaje1.jpg" alt="Relax yourself" title="Live the paradise">
    <img src="assets/images/paisaje2.jpg" alt="Be Happy" title="Live the paradise">
    <img src="assets/images/paisaje3.jpg" alt="Be Magic" title="Live the paradise">
    <img src="assets/images/paisaje4.jpg" alt="Enjoy" title="Live the paradise">
    <img src="assets/images/paisaje5.jpg" alt="Thank you :3" title="Live the paradise">
    <img src="assets/images/paisaje6.jpg" alt="Dont Worry" title="Live the paradise">
    <img src="assets/images/paisaje7.jpg" alt="Just be Happy" title="Live the paradise">
    <img src="assets/images/paisaje8.jpg" alt="Good Morning Princess" title="Live the paradise">
    <img src="assets/images/paisaje9.jpg" alt="Live your Live" title="Live the paradise">
    <img src="assets/images/paisaje10.jpg" alt="Dont Worry" title="Live the paradaise">
    <img src="assets/images/paisaje11.jpg" alt="Be Magic" title="Live the paradaise">
    <img src="assets/images/paisaje12.jpg" alt="Thank you :3" title="Live the paradaise">
    <img src="assets/images/paisaje13.jpg" alt="Just be Happy" title="Live the paradaise">
    <img src="assets/images/paisaje14.jpg" alt="Enjoy" title="Live the paradaise">
    <img src="assets/images/paisaje15.jpg" alt="Be Happy" title="Live the paradaise">
  </div>

La estructura HTML del contenedor implementando el plugin quedará de la siguiente manera.

<div class="container cardify-mode">
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje1.jpg" alt="Relax yourself" class="image-styles-inline"><figcaption class="figcaption-styles-inline">Relax yourself</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje2.jpg" alt="Be Happy" class="image-styles-inline"><figcaption class="figcaption-styles-inline">Be Happy</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje3.jpg" alt="Be Magic" class="image-styles-inline" style="opacity: 1;"><figcaption class="figcaption-styles-inline" style="opacity: 0;">Be Magic</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje4.jpg" alt="Enjoy" class="image-styles-inline" style="opacity: 1;"><figcaption class="figcaption-styles-inline" style="opacity: 0;">Enjoy</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje5.jpg" alt="Thank you :3" class="image-styles-inline"><figcaption class="figcaption-styles-inline">Thank you :3</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje6.jpg" alt="Dont Worry" class="image-styles-inline"><figcaption class="figcaption-styles-inline">Dont Worry</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje7.jpg" alt="Just be Happy" class="image-styles-inline" style="opacity: 1;"><figcaption class="figcaption-styles-inline" style="opacity: 0;">Just be Happy</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje8.jpg" alt="Good Morning Princess" class="image-styles-inline" style="opacity: 1;"><figcaption class="figcaption-styles-inline" style="opacity: 0;">Good Morning Princess</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje9.jpg" alt="Live your Live" class="image-styles-inline"><figcaption class="figcaption-styles-inline">Live your Live</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje10.jpg" alt="Dont Worry" class="image-styles-inline"><figcaption class="figcaption-styles-inline">Dont Worry</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje11.jpg" alt="Be Magic" class="image-styles-inline"><figcaption class="figcaption-styles-inline">Be Magic</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje12.jpg" alt="Thank you :3" class="image-styles-inline"><figcaption class="figcaption-styles-inline">Thank you :3</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje13.jpg" alt="Just be Happy" class="image-styles-inline"><figcaption class="figcaption-styles-inline">Just be Happy</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje14.jpg" alt="Enjoy" class="image-styles-inline"><figcaption class="figcaption-styles-inline">Enjoy</figcaption></figure>
    <figure class="figure-styles-inline"><img src="../assets/images/paisaje15.jpg" alt="Be Happy" class="image-styles-inline"><figcaption class="figcaption-styles-inline">Be Happy</figcaption></figure>
  </div>

Flujo de trabajo en equipo

Para efectos de organización en el trabajo colaborativo se han creado tres ramas en este repositorio. Cada desarrolladora usará la rama asignada para ella de la siguiente manera:

Dayam Llerena: d-plugin
Lucero Hospina: l-plugin
Margarita Sutta: m-plugin

Progreso propuesto

Se nos proponen los siguientes checklists de progreso para cada semana:

SEMANA 1.

Formar equipo.
Elegir reto.
Hacer fork de reto modelo o crear nuevo repo si has propuesto un reto no propuesto por Laboratoria.
Escribir primera versión del README.md con una descripción general de la librería así como ejemplos (snippets) de uso y configuración (si fuera necesario).
Crear issues y milestones que sirvan como hoja de ruta (roadmap)
Inicializar proyecto con npm init y git init.
Crear index.html con ejemplo principal de uso.

SEMANA 2.

Agregar tests que describan la API de tu librería y los casos de uso esperados.
Implementar funcionalidad esencial.
Hacer code review con tus compañeras e instructorxs.

SEMANA 3.

Completar implementación de librería y ejemplo principal (usando la librería).
Hacer code review con tus compañeras e instructorxs.
Preparar tu demo/presentación.
Publicar el ejemplo principal (index.html) en GitHub pages.

Requisitos

Todos los retos deben incluir por los menos los siguientes archivos:

README.md con descripción del módulo, instrucciones de instalación, uso y documentación.
index.js: Librería debe exportar una función u objeto al entorno global (window) y hacer uso de features de ES6 donde sea apropiado.
index.html: Página web de la librería con ejemplo funcionando.
package.json con nombre, versión, descripción, autores, licencia, dependencias, scripts (pretest, test, ...).
.eslintrc con configuración para linter (ver guía de estilo de JavaScript).
.gitignore para ignorar node_modules u otras carpetas que no deban incluirse en control de versiones (git).

Hacker edition (opcional):

Si la librería está dirigida al navegador, debe adherirse al patrón UMD para poder ser usado con AMD, CommonJS y como variable global del navegador.
Integración continua con Travis o Circle CI

Desarrolladoras

Margarita Sutta: GitHub Account.
Lucero Hospina: GitHub Account.
Dayam Llerena: GitHub Account.

Name		Name	Last commit message	Last commit date
Latest commit History 86 Commits
public		public
src		src
.babelrc		.babelrc
.eslintrc		.eslintrc
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Cardify

Desarrollado para Laboratoria

Desarrollo del plugin

I -Momenclatura del plugin

II -Inicializar el plugin

III -Construyendo el plugin

Guía de uso

Uso

Ejemplo

Flujo de trabajo en equipo

Progreso propuesto

Requisitos

About

Releases

Packages

Languages

dayamll/cardify

Folders and files

Latest commit

History

Repository files navigation

Cardify

Desarrollado para Laboratoria

Desarrollo del plugin

I -Momenclatura del plugin

II -Inicializar el plugin

III -Construyendo el plugin

Guía de uso

Uso

Ejemplo

Flujo de trabajo en equipo

Progreso propuesto

Requisitos

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages