Skip to content
This repository has been archived by the owner on Jan 24, 2023. It is now read-only.

Link correctos, vista mobile acomodada. #40

Open
wants to merge 79 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
79 commits
Select commit Hold shift + click to select a range
0971988
subiendo estructura
LeslyN Jan 27, 2018
e6ebab3
Iniciando estructura
LeslyN Jan 27, 2018
3e17285
añadiendo carpeta assets con imágenes
AraceliGS Jan 27, 2018
1dd4dc5
terminando de añadir la estructura bas de la página
AraceliGS Jan 27, 2018
79ad9dd
añadiendo guìa de estilos
AraceliGS Jan 27, 2018
da3a9e1
añadiendo maquetación de cardify
AraceliGS Jan 27, 2018
8efdbbd
corrigiendo identación, creando archivos package.json y gitignore
LeslyN Jan 28, 2018
ac04be4
Merge remote-tracking branch 'upstreamAraceli/master' into avance1
LeslyN Jan 28, 2018
8b21ab0
añadiendo estilos extra a la maquetaciòn y fuente al encabezado
AraceliGS Jan 28, 2018
dc64ddd
subiendo proyecto actualizado
AraceliGS Jan 28, 2018
7ffbdbb
extrayendo cambios
LeslyN Jan 28, 2018
b004436
Merge pull request #4 from AraceliGS/avance1
LeslyN Jan 28, 2018
9a74c17
extrayendo cambios al master
LeslyN Jan 28, 2018
1182977
archivos creados
LeslyN Jan 28, 2018
b0ada01
actualización de README
LeslyN Jan 28, 2018
2e9d6a4
Merge branch 'master' into master
LeslyN Jan 28, 2018
0916d01
primera actualización readme
LeslyN Jan 28, 2018
d3ef26d
corrigiendo estructura
LeslyN Jan 28, 2018
fd60147
corrigiendo estructura
LeslyN Jan 28, 2018
a8157cc
añadiendo avances del plugin cardify
AraceliGS Jan 29, 2018
69cfc25
forma correcta de escritura
LeslyN Jan 29, 2018
b1dfe35
Merge remote-tracking branch 'upstreamAraceli/master'
LeslyN Jan 29, 2018
dba2eb0
añadiendo avances del plugin cardify
LeslyN Jan 29, 2018
8c73fcc
De rama a master
LeslyN Jan 29, 2018
f2ff05c
Merge branch 'avance1'
LeslyN Jan 29, 2018
b6d9c68
Merge branch 'master' of https://github.com/AraceliGS/cardify
LeslyN Jan 29, 2018
97ea35d
añadiendo avances
AraceliGS Jan 29, 2018
bd7c3e0
Merge branch 'avance1' of https://github.com/AraceliGS/cardify into a…
AraceliGS Jan 29, 2018
d051d7f
optimizando funcionalidad de plugin cardify
AraceliGS Jan 29, 2018
b61b31e
Merge branch 'avance1'
AraceliGS Jan 29, 2018
0d84aa6
sacando estructura sobrante en img
LeslyN Jan 29, 2018
1a39a8d
cambios hacia master
LeslyN Jan 29, 2018
2a15a6d
cambios a ES6
LeslyN Jan 30, 2018
df4b2ef
Cambiando estructura de archivos y terminando funcionalidad
LeslyN Jan 31, 2018
95ba1b9
mouseover en imágenes
LeslyN Jan 31, 2018
47f1ec7
cambios de estructura y funcionalidad
LeslyN Jan 31, 2018
3a71b91
añadiendo modificaciones en el plugin
AraceliGS Jan 31, 2018
de6c463
añadiendo cambios al archivo
AraceliGS Jan 31, 2018
c92de69
Merge branch 'master' of https://github.com/AraceliGS/cardify
AraceliGS Feb 1, 2018
a4b34be
Caption visible
LeslyN Feb 1, 2018
c02fbe4
Figcaption visible
LeslyN Feb 1, 2018
64ebe69
terminando las modificaciones de la funcionalidad
AraceliGS Feb 1, 2018
c6187c9
actualización de semana 3 del archivo README.md
LeslyN Feb 1, 2018
25576c1
actualización de semana 3 del archivo README.md
LeslyN Feb 1, 2018
c31819c
añadiendo avances del evento mouseout
AraceliGS Feb 2, 2018
c6ce93f
mejorando mi readme con etiquetas
AraceliGS Feb 2, 2018
09aff41
Corrigiendo errores del archivo README y mejorando la estructura
AraceliGS Feb 2, 2018
f68cad9
Subiendo nuevas adiciones al README- herramientas a utilizar para cre…
AraceliGS Feb 2, 2018
34fbdd6
Reestructuración de estilos
LeslyN Feb 2, 2018
40eeb92
resolviendo conflictos
LeslyN Feb 2, 2018
b29e321
estilos de figcaption, modificación de mouseout, validación
LeslyN Feb 2, 2018
aca5caf
funcionalidad completa, estilos solo por modificar el efecto en la im…
LeslyN Feb 2, 2018
2a6a06d
subiendo snippets
AraceliGS Feb 2, 2018
c2a6fd4
Merge branch 'master' of https://github.com/AraceliGS/cardify
AraceliGS Feb 2, 2018
f8d9cc0
subiendo modificaciones a un snippet y al README en general
AraceliGS Feb 2, 2018
4d589aa
Tamaño de imágenes correcto
LeslyN Feb 2, 2018
b79e185
actualización de readme, imágenes de tamaños correctos, efecto hover …
LeslyN Feb 2, 2018
191c499
Estilos de descripción
LeslyN Feb 2, 2018
f914261
Cambios de estilos, actualización readme, prototipado, imágenes tamañ…
LeslyN Feb 2, 2018
6a7e3db
sacando contenedor
LeslyN Feb 2, 2018
d0c73b8
subiendo actualizaciones del README
AraceliGS Feb 2, 2018
9f66675
añadiendo nuevos estilos al figcaption
AraceliGS Feb 3, 2018
bc46097
modificando nuevos estilos al figcaption
AraceliGS Feb 3, 2018
1bf52c2
Merge remote-tracking branch 'upstream/master'
LeslyN Feb 4, 2018
1e45950
figcaption con opacidad en toda la imagen, link de descarga y github,…
LeslyN Feb 4, 2018
1639039
botón de descarga, link a github, figcaption con opacidad en toda la …
LeslyN Feb 4, 2018
c12760a
links con icons y acceso en vista mobile
LeslyN Feb 4, 2018
5d1912d
Link correctos, vista mobile acomodada.
LeslyN Feb 4, 2018
302df9b
modificando estilso del figcaption
AraceliGS Feb 4, 2018
c309eee
modificando errores segun la guia de estilos
AraceliGS Feb 5, 2018
beec1a5
borrando cambios en el index
AraceliGS Feb 5, 2018
496397b
organización
LeslyN Feb 5, 2018
0ac373b
Merge remote-tracking branch 'upstream/master'
LeslyN Feb 5, 2018
e2be667
efecto espacio en vista mobile corregido
LeslyN Feb 5, 2018
a95a807
vista mobile corregido, vista de tarjeta información de instalación, …
LeslyN Feb 5, 2018
60c3fa4
Vista mobile corregido, vista de tarjeta información de instalación.
LeslyN Feb 5, 2018
05f38d9
modificando README
AraceliGS Feb 21, 2018
f333723
Reemplazando antiguas imágenes
AraceliGS Mar 26, 2019
76cc7c4
actualizando imagen que muestra el resultado final
AraceliGS Mar 26, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["env"]
}
29 changes: 29 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -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
}
}
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
161 changes: 130 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,54 +1,153 @@
# Cardify

* **Track:** _Common Core_
* **Curso:** _JS Deep Dive: Crea tu propia librería usando JavaScript_
* **Unidad:** _Producto final_
Cardify es una librería, una herramienta que busca facilitar a los programadores su trabajo. El resultado es un efecto sobre las imágenes: al pasarles el mouse encima, se vuelven opacas y sobre éstas se muestra un fondo negro con una breve descripción a elección del usuario.

***
![image](https://user-images.githubusercontent.com/32301650/36492011-1f427f9c-16fa-11e8-8d6a-7bbaf0ef8cd0.png)

## Desarrollado para

[Laboratoria](http://laboratoria.la)

## Objetivo

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.

## Herramientas Tecnológicas

* HTML 5

* CSS 3

* Framework Materialize

* Librería jQuery

* Javascript

* Babel

* Node.js

* Guía de Estilos(`.eslintrc`)

## Getting Started

### Estructura de Carpetas

```bash
Proyecto
├── public/
│ ├── assets/
│ │ ├── images/
│ │ ├── // Imágenes
│ │
│ ├── css/
│ │ ├── main.css
│ │
│ ├── js/
│ │ ├── app.js(ES5)
│ │ └── index.js(ES5)
│ │
│ ├── index.html
│ │
│ └── vendors/
│ ├── jquery
│ │ ├── jquery-3.2.1.min.js
│ │
│ ├── materialize││framework de tu elección
├── src/
│ ├── app.js(ES6)
│ ├── index.js(ES6)
├── README.md
├── .gitignore
├── package.json
└── .eslintrc

```

Para incluir este plugin a tu proyecto, inserta el archivo `index.js` en una etiqueta script en tu archivo HTML:

```bash
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/materialize/js/materialize.min.js"></script>
<script src="js/index.js"></script>
<script src="js/app.js"></script>
```

### Inicializando con jQuery

```bash
$('img').cardify();
```

## Flujo de trabajo

1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
de este repositorio.
1. Se realizó un [fork](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
del repositorio brindado por `Laboratoria`.

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í:
2. Se desarrolló la página web a la cual se le implementa el plugin Cardify.

```bash
git clone https://github.com/<nombre-de-usuario>/cardify.git
```
3. Primero, Cardify lo que hace es detectar si existe contenedor.

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).
4. Si no existe te manda una alerta confirmando que no ha encontrado ningún conetendor.

> Nota: No olvides que es una buena práctica describir tu proyecto en este
> archivo `README.md` :smiley:.
5. Si lo encuentra, entonces al pasar el mouse encima de la imagen:

***
* La imagen es envuelta por un elemento figure.
* Se extrae su descripción contenida en el atributo alt y es encerrada en un figcaption, al cual se le añade algunos estilos.

## Instalación
## Planificación

### Global (navegador)
1. Semana 1 - días:

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="path-to-cardify.js"></script>
```
- **Miércoles 24**: Tomar decisiones del reto a desarrollar.
- Encargadas: Araceli y Lesly.
- Resultado: Se determinó por unanimidad realizar el reto 2 - Cardify.

## Uso
- **Jueves 25**: Investigación del material a utilizar, como son los issues y milestones.
- Encargadas: Araceli y Lesly.

```js
// `container` es el selector del contenedor donde se buscarán todas las
// imágenes a ser procesadas.
$(container).cardify({});
```
- **Viernes 26**: Iniciamos la estructura del reto elegido y se hizo la asignación de tareas aplicando el issues.
- Encargadas: Araceli y Lesly
- Resultado: Planificación parte 1, se puede observar dándole click en el siguiente enlace: [Issue 1](https://github.com/AraceliGS/cardify/issues/1).

- **Sábado 27**: Se realizó la maquetación, asignación de tareas del día, se añadieron los archivos package.json y .gitignore.
- Encargadas: Araceli y Lesly
- Resultado:
- Scketch inicial.
- Estructura inicial y estilos.
- Asignación de tareas empleando issues, Planificación - parte 2: [Issue 2](https://github.com/AraceliGS/cardify/issues/3).
- Primera versión de nuestro archivo package.json.
- Primera actualización del archivo README.md.
- Investigación de plugin.

2. Semana 2 - días:

- **Lunes 29, Martes 30, Miércoles 31**: Se dió el término de la funcionalidad y estilos al plugin, reestructuración de archivos y carpetas con uso del transpilador Babel, actualizacición del archivo README.md, actualización de issues.
- Encargadas: Araceli y Lesly

3. Semana 3 - días:
- **Jueves 01, Viernes 02 de febrero**: Se hizo actualizaciones de acuerdo al feedback obtenido en el code review por nuestro squad, actualización del readme, snippets.
- Encargadas: Araceli y Lesly.

## Anexos

### Scketch

![scketch-inicial](public/assets/docs/scketch-inicial.jpg "scketch-inicial")

## Prototipado

![prototipado](public/assets/docs/prototipado.png "prototipado")

## Ejemplos
## Resultado Final

...
![resultado-final](public/assets/docs/resultado-final.JPG "resultado-final")
Loading