chore(03 interactive): updates branch with master

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 *.swp
 *.log
+.vscode/
 node_modules/
 
 #documents extensions

.mdlintignore

@@ -1 +1,4 @@
-node_modules/
+**/node_modules/
+03-interactive-site/
+04-social-network/
+06-spa/

.mdlintrc

@@ -1,8 +1,31 @@
 {
   "default": true,
-  "ul-style": { "style": "sublist" },
-  "ol-prefix": { "style": "ordered" },
+  "line-length": {
+    "code_blocks": false,
+    "headers": false
+  },
+  "ul-style": {
+    "style": "sublist"
+  },
+  "ol-prefix": {
+    "style": "ordered"
+  },
   "no-duplicate-header": false,
-  "no-trailing-punctuation": { "punctuation": ".,;:!" },
-  "no-inline-html": { "allowed_elements": ["sup", "solution"] }
-}
+  "no-trailing-punctuation": {
+    "punctuation": ".,;:!"
+  },
+  "no-inline-html": {
+    "allowed_elements": [
+      "sup",
+      "solution",
+      "table",
+      "thead",
+      "tbody",
+      "tr",
+      "th",
+      "td",
+      "iframe",
+      "pre"
+    ]
+  }
+}

01-intro/01-introduction/00-welcome-and-orientation.md → 01-intro/01-introduction/00-welcome-and-orientation/README.md

@@ -1,5 +1,11 @@
 # Bienvenida y orientación
 
+* Tipo: `lectura`
+* Formato: `self-paced`
+* Duración: `10min`
+
+***
+
 Hola y bienvenida a la tercera etapa del proceso de selección: el pre-trabajo.
 Debes sentirte muy orgullosa de estar dispuesta a invertir tu tiempo y esfuerzo
 para completar una de las etapas más importantes del proceso. Esta etapa
@@ -15,7 +21,9 @@ individual e independiente.
 
 La duración aproximada del curso es de 15-20 horas. Tú podrás avanzar a tu
 propio ritmo, pero te recomendamos organizarte con tiempo para que vayas
-haciéndolo poco a poco. Tendrás hasta el **jueves 3 de agosto** para terminar.
+haciéndolo poco a poco. El equipo de Laboratoria estará recordándoles
+constantemente las fechas de cierre para el pretrabajo, no olvides anotarla y
+tenerla presente.
 
 Para pasar a la siguiente etapa del proceso de selección es necesario que
 completes todo el pre-trabajo. Las postulantes que demuestren el mayor
@@ -59,7 +67,9 @@ el apoyo del staff de profesores de Laboratoria.
 * [Lima](https://facebook.com/groups/LaboratoriaLima20172/)
 * [Ciudad de México](https://facebook.com/groups/LaboratoriaMX20172/)
 * [Santiago de Chile](https://facebook.com/groups/LaboratoriaCHILE20172/)
+* [Guadalajara](https://www.facebook.com/groups/LaboratoriaGDL20171/)
 
+<!--
 ### 2. Horas de consulta
 
 Cada sede de Laboratoria tiene horarios de consulta para que puedas visitarnos y
@@ -80,41 +90,30 @@ Las horas de consulta por sede son las siguientes:
   - Jueves 20 de julio de 4pm a 6pm.
   - Jueves 27 de julio de 4pm a 6pm.
   - Martes 1 de agosto de 4pm a 6pm.
+* Guadalajara. Av. Adolfo López Mateos Sur 2077, Jardines de Plaza del Sol,
+  Guadalajara, Jal.
+-->
 
-### 3. Correo
+### 2. Correo
 
-Si no logras resolver tus dudas a través de Facebook o de las horas de consulta,
-también tendrás la opción de escribirle directamente a nuestro staff de
-profesores para resolver dudas puntuales. Trata de utilizar esta opción como
-último recurso ya que mientras más correos recibamos, más nos tardaremos en
-responderlos.
+Si no has podido resolver tus dudas y necesitas  recibir la ayuda de nuestro
+equipo de formación, también tendrás la opción de escribirle al equipo de
+selección y entrenamiento del bootcamp, a través de los datos de contacto
+señalados por sede.
+
+Trata de utilizar esta opción como último recurso ya que mientras más correos
+recibamos, más nos tardaremos en responderlos.
 
 Los contactos para cada sede, son los siguientes:
 
 * Lima:
-  - Michelle Seguil, michelle@laboratoria.la
-  - Arabela Rojas, arabela@laboratoria.la
+  - Alejandra Ramírez: alejandra@laboratoria.la
 * Ciudad de México:
-  - Jonathan Parra, jonathan@laboratoria.la
-  - Adoración Cid, adoracion@laboratoria.la
-  - Grissel Rocha, grissel@laboratoria.la
+  - Lucile Baratier: lucile@laboratoria.la
 * Santiago de Chile:
-  - Allison Guzmán: allison@laboratoria.la
-  - Belén Recabal: belen@laboratoria.la
-  - Alexandra Neira; alexandra@laboratoria.la
-  - Nadia Tapia: nadia@laboratoria.la
-  - Marcia Millanao: marcia@laboratoria.la
-
-<!--
-## Fechas importantes
-
-Si estás tomando este curso como parte del proceso de admisión a Laboratoria,
-las fechas importantes son ....
-
-## Expectativas
-
-Nuestra expectativa con este curso es...
--->
+  - Valentina Smith: valentina@laboratoria.la
+* Guadalajara:
+  - Karla Rejas: karla@laboratoria.la
 
 ## Sobre este curso
 
@@ -132,24 +131,20 @@ en el mundo tech.
 
 ### Aprenderás
 
-* Entender qué es la programación y por qué aprender a programar.
-* Entender qué es JavaScript y por qué aprenderlo.
-* Tener un primer acercamiento al mundo del código, creando tu primera página
-  web.
+* Entender **qué es la programación** y por qué aprender a programar.
+* Entender **qué es JavaScript** y por qué aprenderlo.
+* Tener un primer acercamiento al mundo del código, creando **tu primera página
+  web**.
 * A darle dinamismo a tu web utilizando JavaScript.
-* Algunos conceptos básicos de programación como: variables, tipos datos y
+* Algunos **conceptos básicos de programación** como: variables, tipos datos y
   operadores.
 
-### Duración
-
-* Total: 15-20 horas.
-* Modalidad: Self-paced (a tu propio ritmo - online).
-
 ### Requerimientos previos
 
 Ningún conocimiento previo de programación es necesario para completar este
 curso. Está diseñado para principiantes.
 
+<!--
 ## Syllabus
 
 Este pre-work consta de 2 módulos principales:
@@ -161,28 +156,34 @@ información sobre cómo, a través del código, podrás transformar tu futuro.
 Además, te daremos algunos consejos para aprender a aprender. Después de eso,
 ¡te enseñaremos a crear tu primera página web!
 
-| # | Tipo | Tópico
-| - | ----- | -----
-| 00 | Lectura | Bienvenida y orientación
-| 01 | Lectura | Growth Mindset
-| 02 | Lectura | ¿Qué es la programación y porqué aprender a programar?
-| 03 | Lectura | Tu primer sitio web
-| 04 | Quiz | Prueba tu conocimiento
+* Sesión 1: lectura
+  - Unidad 1: Bienvenida y orientación
+* Sesión 2: lectura
+  - Unidad 1: Growth Mindset
+* Sesión 3: lectura
+  - Unidad 1: ¿Qué es la programación y porqué aprender a programar?
+* Sesión 4: lectura
+  - Unidad 1: Tu primer sitio web
+* Sesión 5: quiz
+  - Unidad 1: Prueba tu conocimiento
 
 ### Módulo 2: Variables y tipos de datos
 
 El segundo módulo entrará a más detalle en algunos conceptos base de la
 programación, como lo son las variables, los tipos de datos y los operadores.
 
-| # | Tipo | Tópico
-| - | ----- | -----
-| 01 | Lectura | Valores, tipos de datos y operadores
-| 02 | Lectura | Variables
-| 03 | Lectura | Manipulando `strings` y `numbers`
-| 04 | Lectura | Comentarios en JavaScript
-| 05 | Video | Practicando con ejercicios de variables y tipos de datos
-| 06 | Quiz | Prueba tu conocimiento
-
-***
-
-[EMPEZAR](01-growth-mindset.md)
+* Sesión 1: lectura
+  - Unidad 2: Valores, tipos de datos y operadores
+* Sesión 2: lectura
+  - Unidad 2: Variables
+* Sesión 3: lectura
+  - Unidad 2: Manipulando `strings` y `numbers`
+* Sesión 4: lectura
+  - Unidad 2: Comentarios en JavaScript
+* Sesión 5: seminario
+  - Unidad 2: Practicando con ejercicios de variables y tipos de datos
+* Sesión 6: quiz
+  - Unidad 2: Prueba tu conocimiento
+* Sesión 7: practice
+  - Unidad 2: Ejercicios
+-->

01-intro/01-introduction/01-growth-mindset.md → 01-intro/01-introduction/01-growth-mindset/README.md

@@ -1,5 +1,9 @@
 # Growth Mindset
 
+* Tipo: `lectura`
+* Formato: `self-paced`
+* Duración: `20min`
+
 ## Objetivos de aprendizaje
 
 * Entender qué es Growth Mindset (mentalidad de crecimiento) y adoptarla antes
@@ -14,8 +18,8 @@ iniciar tu carrera en el sector digital en un periodo muy corto de tiempo.
 Seguramente te habrás preguntado cómo podrás lograrlo, y la respuesta está en
 **aprender a aprender**.
 
-¿Alguna vez has leído o escuchado algo sobre Growth Mindset? Al finalizar este
-módulo, esperamos que no sólo entiendas este concepto, sino que adoptes una
+¿Alguna vez has leído o escuchado algo sobre Growth Mindset? Al finalizar esta
+lectura, esperamos que no sólo entiendas este concepto, sino que adoptes una
 mentalidad de crecimiento que te permita enfrentar los retos de aprender algo
 nuevo, y tener la confianza de saber que podrás superarlos.
 
@@ -69,13 +73,7 @@ proceso.**
 
 Mira este video sobre Growth mindset (10 min)
 
-Instrucciones para ponerle subtítulos en español al video:
-
-* Dar click a la tuerca de configuración/settings
-* Click en subtítulos/subtitles
-* Seleccionar español/spanish
-
-[![Video Growth Mindset](http://img.youtube.com/vi/pN34FNbOKXc/0.jpg)](http://www.youtube.com/watch?v=pN34FNbOKXc)
+[![Video Growth Mindset](http://img.youtube.com/vi/pN34FNbOKXc/0.jpg)](http://www.youtube.com/watch?v=pN34FNbOKXc&cc_lang_pref=es&cc_load_policy=1)
 
 ## Desarrollando Growth Mindset
 
@@ -88,11 +86,11 @@ reflexionar y encontrar estrategias para cambiar.
 La siguiente imagen resume algunas de las diferencias entre ambas mentalidades,
 y te ayudará a identificar cómo mejorar:
 
-![Image Growth Mindset](https://raw.githubusercontent.com/Laboratoria/curricula-js/intro-js/01-intro/01-introduction/growth%20mindset.png)
+![Image Growth Mindset](https://user-images.githubusercontent.com/25912510/35746484-ef89fb66-0814-11e8-9da8-0440d5b0375c.png)
 
 ## Growth Mindset en Laboratoria
 
-Antes de pasar al siguiente módulo queremos darte algunos consejos para tu
+Antes de pasar a la siguiente lectura queremos darte algunos consejos para tu
 proceso de aprendizaje:
 
 1. El aprendizaje es mejor y perdura más cuando necesitas esforzarte más. Los
@@ -120,6 +118,4 @@ Y para ello, tú tendrás que proponerte lo siguiente:
 > a decir “no puedo”, sino que cambiaré esta frase por “no puedo aún”, porque
 > tengo una mentalidad de crecimiento.
 
-***
-
-[Sí, me propongo y me comprometo](02-why-learn-to-code.md)
+**Sí, me propongo y me comprometo.**

01-intro/01-introduction/02-why-learn-to-code.md → 01-intro/01-introduction/02-why-learn-to-code/README.md

@@ -1,5 +1,9 @@
 # ¿Por qué aprender a programar?
 
+- Tipo: `lectura`
+- Formato: `self-paced`
+- Duración: `20min`
+
 ## Objetivos de aprendizaje
 
 - Entender qué es la programación y por qué aprender a programar.
@@ -12,8 +16,6 @@ El texto a continuación es una traducción al español, con ciertos ajustes, de
 capítulo 1 de [JavaScript for kids](http://pepa.holla.cz/wp-content/uploads/2015/11/JavaScript-for-Kids.pdf),
 Nick Morgan, 2015.
 
-***
-
 ## ¿Qué es la programación?
 
 Las computadoras son máquinas increíblemente poderosas, capaces de realizar
@@ -145,7 +147,3 @@ tu computadora, únicamente utilizando el navegador.
 Última nota final sobre el contexto de JavaScript como lenguaje de programación:
 JavaScript _**no**_ es lo mismo que Java. Java es _otro_ lenguaje de
 programación. Mucha gente los confunde. Tú no :)
-
-***
-
-[Continuar](03-your-first-website.md)

01-intro/01-introduction/03-your-first-website.md → 01-intro/01-introduction/03-your-first-website/README.md

@@ -1,5 +1,9 @@
 # Tu primer sitio web
 
+- Tipo: `lectura`
+- Formato: `self-paced`
+- Duración: `20min`
+
 ## Objetivos
 
 - Entender la función del HTML para crear la estructura básica de una página
@@ -16,8 +20,6 @@ capítulo 5 de [JavaScript for kids](http://pepa.holla.cz/wp-content/uploads/201
 Nick Morgan, 2015; y de [Eloquent JavaScript](http://eloquentjavascript.net/),
 de Marijn Haverbeke, 2014.
 
-***
-
 ## HTML: HyperText Markup Language
 
 La consola de JavaScript que hemos utilizando hasta ahora es ideal para probar
@@ -49,7 +51,7 @@ dice, te lo explicaremos paso a paso más abajo):
 Al abrir este mismo documento HTML en un navegador (como Chrome), se ve lo
 siguiente:
 
-![Vista en Chrome](img-my-first-website.png)
+![Vista en Chrome](https://user-images.githubusercontent.com/25912510/35747209-7899e2de-0817-11e8-9ae7-fcfe96122470.png)
 
 El navegador "lee" el archivo HTML (el texto y las etiquetas que están adentro)
 y las presenta según las reglas del lenguaje. Por ejemplo, los textos que están
@@ -95,7 +97,7 @@ etiqueta de finalización `</p>`. El texto que se encuentra entre las etiquetas
 de apertura y de cierre es el _contenido_ del elemento.
 
 > El elemento `p` (párrafo) como ejemplo:
-![Ejemplo etiqueta](img-tag-sample.png)
+![Ejemplo etiqueta](https://user-images.githubusercontent.com/25912510/35747217-7bb85acc-0817-11e8-9248-5b00951cf963.png)
 
 Hagamos un recorrido por todos los elementos de nuestro documento:
 
@@ -177,12 +179,12 @@ ambos documentos a través del mismo elemento `script`, de la siguiente manera:
 ```
 
 El mismo elemento `script` tiene un "atributo" llamado `src` (de source, que
-  significa fuente en inglés), al cual se le puede asignar la ruta de tu
-  documento JavaScript.
+significa fuente en inglés), al cual se le puede asignar la ruta de tu
+documento JavaScript.
 
 ## Añádele interacción a tu web
 
-¡Ahora te toca a to! Continúa con Michelle siguiendo los pasos para agregarle
+¡Ahora te toca a tí! Continúa con Michelle siguiendo los pasos para agregarle
 interacción a tu página web:
 
 Los pasos a seguir son:
@@ -210,7 +212,3 @@ Aquí el video de Michelle:
 
 y deplegándola en [GitHub Pages](https://pages.github.com/)
 -->
-
-***
-
-[Continuar](04-prueba-tu-conocimiento.md)