actualizando archivos

.babelrc

@@ -0,0 +1,3 @@
+{
+ "presets": ["env"]
+}

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
+  "rules": {
+    "keyword-spacing": 1,
+    "space-before-function-paren": [1, "never"],
+    "eqeqeq": 1,
+    "space-infix-ops": 1,
+    "comma-spacing": 1,
+    "brace-style": 1,
+    "no-multiple-empty-lines": 1,
+    "camelcase": 1,
+    "func-call-spacing": 1,
+    "key-spacing": 1,
+    "semi": 1,
+    "no-floating-decimal": 1,
+    "no-multi-spaces": 1,
+    "object-property-newline": 1,
+    "padded-blocks": [1, "never"],
+    "space-before-blocks": 1,
+    "space-in-parens": 1,
+    "spaced-comment": 1,
+    "quotes": [1, "single"],
+    "id-length": [1, { "exceptions": ["i", "j", "x"] }],
+    "indent": [1, 2],
+    "no-array-constructor": 1
+  }
+}

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    "extends": "google"
+};

.gitignore

@@ -0,0 +1 @@
+node_modules/

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - 'stable'
+script:

README.md

@@ -1,54 +1,98 @@
-# Cardify
+# Cardify 
 
-* **Track:** _Common Core_
-* **Curso:** _JS Deep Dive: Crea tu propia librería usando JavaScript_
-* **Unidad:** _Producto final_
+Cardify es un plugin de jQuery que aplica un efecto de hover a tus imágenes envolviendolas en una etiqueta `<figure>`, rescatando su descripción del atributo alt e insertando el texto en una etiqueta `<figcaption>`. Es fácil de usar y rápido de configurar.
 
-***
+![screenshot](https://raw.githubusercontent.com/PazAutumn/cardify/cardify/Screenshot-2018-3-25%20Cardify%20Example.png)
 
-Implementar un plugin de jQuery que dado un _contenedor_ 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` de la imagen.
+## Proyecto desarrollado en [Laboratoria](http://laboratoria.la)
 
-## Flujo de trabajo
 
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
-   de este repositorio.
+![icon]()
 
-2. Luego deberás **clonar** tu fork en tu máquina. Recuerda que el comando a usar
-   es `git clone` y su estructura normalmente se ve así:
+## En  [Chile](http://chile.com)
 
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/cardify.git
-   ```
+[![GitHub issue age](https://img.shields.io/badge/Created-January%202018-yellow.svg?style=for-the-badge)](https://github.com/PazAutumn/cardify)
+[![Build Status](https://travis-ci.org/PazAutumn/cardify.svg?branch=cardify)](https://travis-ci.org/PazAutumn/cardify)
+[![cardify version](https://img.shields.io/badge/Last%20version-1.5.5-yellow.svg?style=for-the-badge)](https://github.com/PazAutumn/cardify)
+[![autores](https://img.shields.io/badge/author-pazautumn%2C%20gabycasti-yellow.svg?style=for-the-badge)](https://github.com/PazAutumn/cardify)
 
-3. Cuando hayas terminado tu producto, envía un Pull Request a la rama que tus
-   instructorxs este repositorio
-   (puedes solicitar apoyo de tus profes para este paso).
+## Descripción:
 
-> Nota: No olvides que es una buena práctica describir tu proyecto en este
-> archivo `README.md` :smiley:.
+### ¿Cómo funciona?
 
-***
+Cardify es un plugin de jQuery que aplica un efecto de hover a tus imágenes envolviendolas en una etiqueta `<figure>`, rescatando su descripción del atributo `alt` e insertando el texto en una etiqueta `<figcaption>`. Es fácil de usar y rápido de configurar.
 
 ## Instalación
 
 ### Global (navegador)
 
-```html
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-<script src="path-to-cardify.js"></script>
+#### .html
 ```
+<script src="dist/app.js"></script>
+```
+### Uso
 
-## Uso
-
-```js
-// `container` es el selector del contenedor donde se buscarán todas las
-// imágenes a ser procesadas.
-$(container).cardify({});
+#### .js
+```
+var cardify = require('cardify');
 ```
 
-## Ejemplos
+1. Para que el plugin funcione primero debes inicializar tu proyecto en la terminal con el comando
+
+   `npm init`
+
+2. Descargar cardify desde tu terminal con el comando
+
+   `npm install cardify`
+
+3. Para que tu proyecto se vea en el navegador debes instalar [**Browserify**](http://browserify.org/) de manera global en tu computadora con el siguiente comando en tu terminal
+
+   `npm install -g browserify`
+
+   Luego crea en la raíz de tu proyecto las carpetas `src` y `dist` con el archivo `app.js` dentro de cada una, luego ejecuta browserify de la siguiente manera para que tu js original que se encuentra en la carpeta `src` se guarde modificado en la carpeta `dist`
+
+   `browserify src/app.js -o dist/app.js`
+
+4. Enlaza el archivo 'Browserificado' en tu .html
+
+   `<script src="dist/app.js"></script>`
+
+5. En tu archivo .js principal pega el siguiente código
+
+   `var cardify = require('cardify');`
+
+6. Finalmente, recuerda poner tus imagenes dentro de una etiqueta contenedora con clase `cardify` y asignarle el atributo `alt` como en el siguiente ejemplo.
+
+   ```
+   <div class='cardify'>
+      <img src='https://pbs.twimg.com/media/ClFixn2UoAA85OZ.jpg' alt='Osito'>
+   </div>
+   ```
+
+### **Ten en cuenta que el comando `browserify src/app.js -o dist/app.js` del paso número 3 deberás repetirlo cada vez que actualices el plugin desde tu terminal**
+
+## Y listo! ya estás preparado para usar cardify.
+
+## Ejemplo
+
+![Ejemplo Cardify](http://www.grupojega.cl/images/gifcardify.gif)
+
+## Demo
+![alt text](http://www.grupojega.cl/images/demo.gif)
+
+
+## Herramientas
+
+**Producción:**
+* jquery: 3.3.1
+
+**Desarrollo:**
+* browserify: 15.2.0
+* chai: 4.1.2
+* mocha: 5.0.0
+* eslint: 4.16.0
+* babel-cli: 6.26.0
+* babel-preset-env: 1.6.1
+* jsdom: 11.6.1
+
 
-...

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Cardify</title>
+  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
+</head>
+<body style="background-color: #704010; font-family: Pacifico, cursive;">
+    <h2 style="font-size:70px; color: white; text-align: center">Cardify</h2>
+    <hr width="90%">
+    <div class="cardify" align="center">
+      <img src="https://pbs.twimg.com/media/ClFixn2UoAA85OZ.jpg" style="border:white 1px dotted" alt="Osito">
+      <img src="https://78.media.tumblr.com/7abd3b7ae58a290dbf509e9c39427f47/tumblr_mjgkiuTCQJ1s7mg7ko5_500.gif" style="border:white 1px dotted" alt="León">
+      <img src="http://japonpop.japonshop.com/wp-content/uploads/2014/10/arte-latte-japon-gatos-japonshop03.png" style="border:white 1px dotted" alt="Gato">
+    </div>
+    <hr width="90%">
+
+<script src="lib/main.js"></script>
+</body>
+</html>

index.js

@@ -0,0 +1,3 @@
+var cardifyimg = require("src/cardify");
+module.exports = cardifyimg;
+