Upload batch from C CLI

Uploaded via hf-downloader C client

.gitattributes

@@ -229,3 +229,33 @@ subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/0
 subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/04-Aprender[[:space:]]sobre[[:space:]]Diseño[[:space:]]de[[:space:]]interfaz[[:space:]]de[[:space:]]usuario/07-Desarrollo[[:space:]]de[[:space:]]Aplicaciones[[:space:]]Web[[:space:]]con[[:space:]]Componentes[[:space:]]Reutilizables.mp4 filter=lfs diff=lfs merge=lfs -text
 subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/04-Aprender[[:space:]]sobre[[:space:]]Diseño[[:space:]]de[[:space:]]interfaz[[:space:]]de[[:space:]]usuario/08-Implementación[[:space:]]de[[:space:]]Themes[[:space:]]en[[:space:]]Aplicaciones[[:space:]]Web[[:space:]]con[[:space:]]CSS[[:space:]]y[[:space:]]SAS.mp4 filter=lfs diff=lfs merge=lfs -text
 subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/04-Aprender[[:space:]]sobre[[:space:]]Diseño[[:space:]]de[[:space:]]interfaz[[:space:]]de[[:space:]]usuario/09-Selección[[:space:]]y[[:space:]]uso[[:space:]]adecuado[[:space:]]de[[:space:]]imágenes[[:space:]]para[[:space:]]la[[:space:]]web.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/04-Aprender[[:space:]]sobre[[:space:]]Diseño[[:space:]]de[[:space:]]interfaz[[:space:]]de[[:space:]]usuario/10-Uso[[:space:]]Eficiente[[:space:]]de[[:space:]]Animaciones[[:space:]]y[[:space:]]Videos[[:space:]]en[[:space:]]Páginas[[:space:]]Web.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/04-Aprender[[:space:]]sobre[[:space:]]Diseño[[:space:]]de[[:space:]]interfaz[[:space:]]de[[:space:]]usuario/11-Repaso[[:space:]]y[[:space:]]Construcción[[:space:]]Final[[:space:]]de[[:space:]]Aplicación[[:space:]]Web[[:space:]]en[[:space:]]React.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/05-Conclusiones/01-Colaboración[[:space:]]efectiva[[:space:]]con[[:space:]]equipos[[:space:]]de[[:space:]]diseño.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/05-Conclusiones/01-apuntesdisenoprograma_139d88e4-e2d8-4439-82e3-caef7a5777c1.pdf filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/05-Conclusiones/01-captura-de-pantalla-2020-06-17-a-las-11-32-52_760f7a73-bdba-4b2a-857a-da592b3ef34c.png filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/05-Conclusiones/01-captura-de-pantalla-2020-06-17-a-las-11-32-52_63e5cc59-9612-4b9b-a387-fed7e40cee39.png filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/05-Conclusiones/01-captura-de-pantalla-2020-06-17-a-las-11-32-52_c265d4d4-047b-422d-9e46-71ff1cde216e.png filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/05-Conclusiones/01-resumen_85711f76-94a1-4b00-ae90-6485be79be62.png filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/05-Conclusiones/01-resumen_9f45bd34-bdf8-4243-a1bd-bff40f237bbe.png filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/05-Conclusiones/01-resumen_969e11a4-b9d9-465c-97f7-909bbc74555c.png filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/05-Conclusiones/01-resumen_27a2e897-7991-4c91-9f32-d54a4b057f57.png filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/05-Conclusiones/01-apuntesdisenoprograma_139d88e4-e2d8-4439-82e3-caef7a5777c1_727c675f-5f17-443a-b66e-0c219bba9484.pdf filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Diseño[[:space:]]para[[:space:]]Developers/06-Mentoría[[:space:]]Expert/01-Diseño[[:space:]]Web[[:space:]]Responsive[[:space:]]Integración[[:space:]]de[[:space:]]Equipos[[:space:]]y[[:space:]]Herramientas.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/01-Introducción[[:space:]]a[[:space:]]JavaScript/01-Fundamentos[[:space:]]de[[:space:]]JavaScript[[:space:]]para[[:space:]]Principiantes.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/01-Introducción[[:space:]]a[[:space:]]JavaScript/02-Instalación[[:space:]]y[[:space:]]Configuración[[:space:]]de[[:space:]]JavaScript[[:space:]]en[[:space:]]Visual[[:space:]]Studio[[:space:]]Code.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/01-Introducción[[:space:]]a[[:space:]]JavaScript/03-Instalación[[:space:]]y[[:space:]]configuración[[:space:]]de[[:space:]]Visual[[:space:]]Studio[[:space:]]Code[[:space:]]y[[:space:]]Nodejs[[:space:]]en[[:space:]]Windows.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/01-Introducción[[:space:]]a[[:space:]]JavaScript/04-Variables[[:space:]]y[[:space:]]Buenas[[:space:]]Prácticas[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/01-Introducción[[:space:]]a[[:space:]]JavaScript/05-Tipos[[:space:]]de[[:space:]]Datos[[:space:]]en[[:space:]]JavaScript[[:space:]]Primitivos[[:space:]]y[[:space:]]Complejos.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/01-Introducción[[:space:]]a[[:space:]]JavaScript/06-Manipulación[[:space:]]de[[:space:]]Strings[[:space:]]en[[:space:]]JavaScript[[:space:]]Escritura[[:space:]]Concatenación[[:space:]]y[[:space:]]Substrings.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/01-Introducción[[:space:]]a[[:space:]]JavaScript/07-Números[[:space:]]y[[:space:]]Operaciones[[:space:]]Matemáticas[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/01-Introducción[[:space:]]a[[:space:]]JavaScript/08-Conversión[[:space:]]de[[:space:]]Tipos[[:space:]]en[[:space:]]JavaScript[[:space:]]Implícita[[:space:]]y[[:space:]]Explícita.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/01-Introducción[[:space:]]a[[:space:]]JavaScript/09-Conversión[[:space:]]de[[:space:]]Tipos[[:space:]]en[[:space:]]JavaScript[[:space:]]Explícita[[:space:]]e[[:space:]]Implícita.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/01-Operadores[[:space:]]de[[:space:]]Comparación[[:space:]]en[[:space:]]JavaScript[[:space:]]Igualdad[[:space:]]y[[:space:]]Desigualdad.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/02-Operadores[[:space:]]Lógicos[[:space:]]en[[:space:]]Programación[[:space:]]AND[[:space:]]OR[[:space:]]y[[:space:]]NOT.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/03-Estructuras[[:space:]]Condicionales[[:space:]]Uso[[:space:]]de[[:space:]]IF[[:space:]]ELSE[[:space:]]y[[:space:]]ELSE[[:space:]]IF[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/04-Juego[[:space:]]de[[:space:]]Adivinanza[[:space:]]Programación[[:space:]]con[[:space:]]Estructuras[[:space:]]Condicionales.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/05-Estructura[[:space:]]y[[:space:]]uso[[:space:]]del[[:space:]]condicional[[:space:]]Switch[[:space:]]en[[:space:]]programación.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/06-Ciclo[[:space:]]For[[:space:]]Iteración[[:space:]]de[[:space:]]Listas[[:space:]]y[[:space:]]Uso[[:space:]]de[[:space:]]Consolelog[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/07-Iteración[[:space:]]con[[:space:]]forof[[:space:]]en[[:space:]]JavaScript[[:space:]]para[[:space:]]arrays[[:space:]]y[[:space:]]strings.mp4 filter=lfs diff=lfs merge=lfs -text
+subir/Curso[[:space:]]de[[:space:]]Fundamentos[[:space:]]de[[:space:]]JavaScript/02-Estructuras[[:space:]]de[[:space:]]Control[[:space:]]y[[:space:]]Lógica/08-Iteración[[:space:]]sobre[[:space:]]Objetos[[:space:]]con[[:space:]]forIn[[:space:]]en[[:space:]]JavaScript.mp4 filter=lfs diff=lfs merge=lfs -text

subir/Curso de Diseño para Developers/04-Aprender sobre Diseño de interfaz de usuario/09-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/mssroboto/diseno-para-programadores/tree/master/4-app

subir/Curso de Diseño para Developers/04-Aprender sobre Diseño de interfaz de usuario/09-Selección y uso adecuado de imágenes para la web.vtt

@@ -0,0 +1,597 @@
+WEBVTT
+
+00:00.000 --> 00:06.000
+Ya tienes los elementos esenciales para tu
+aplicación.
+
+00:06.000 --> 00:08.800
+Ahora vamos a añadir los elementos
+decorativos
+
+00:08.800 --> 00:11.800
+y que nos ayuden a reforzar el mensaje que
+queremos transmitir.
+
+00:11.800 --> 00:14.200
+Uno de esos elementos son las imágenes
+para web,
+
+00:14.200 --> 00:17.400
+pero ¿cómo podemos seleccionar imágenes
+adecuadas para la web?
+
+00:17.400 --> 00:19.200
+Lo primero que tenemos que tener
+claro
+
+00:19.200 --> 00:21.400
+son los formatos que podemos utilizar.
+
+00:21.400 --> 00:22.800
+Hay una gran variedad de
+formatos,
+
+00:22.800 --> 00:24.800
+pero por lo general no
+sabemos
+
+00:24.800 --> 00:27.000
+qué tipo de formato usar en qué escenario.
+
+00:27.000 --> 00:29.000
+El primero de ellos es el
+JPG.
+
+00:29.000 --> 00:32.800
+El JPG está indicado para fotografías o
+imágenes con degradados.
+
+00:32.800 --> 00:35.400
+Un JPG bien comprimido no debería pesar
+mucho
+
+00:35.400 --> 00:38.200
+y puede agregarle gran valor a tu página web.
+
+00:38.200 --> 00:40.200
+El siguiente es el
+PNG.
+
+00:40.200 --> 00:42.600
+El PNG está indicado para imágenes
+decorativas
+
+00:42.600 --> 00:44.200
+y fotografías
+también,
+
+00:44.200 --> 00:47.000
+pero que requieran un fondo transparente.
+
+00:47.000 --> 00:50.600
+JPG versus PNG, yo recomiendo siempre usar
+JPG
+
+00:50.600 --> 00:53.000
+y utilizar PNG para los casos en los
+que
+
+00:53.000 --> 00:56.000
+necesitemos tener el fondo transparente,
+
+00:56.000 --> 00:59.400
+un color de fondo, un texto en la parte de
+atrás.
+
+00:59.400 --> 01:01.800
+Solamente en esos casos recomendaría
+PNG
+
+01:01.800 --> 01:05.000
+porque PNG es mucho más pesado que JPG.
+
+01:05.600 --> 01:08.200
+Otros formatos que existen son el SVG.
+
+01:08.200 --> 01:10.200
+El SVG es un formato en
+vectores
+
+01:10.200 --> 01:11.800
+que se puede convertir a
+código
+
+01:11.800 --> 01:14.800
+y esto está indicado para usar íconos,
+animaciones
+
+01:14.800 --> 01:17.200
+y transiciones de baja
+complejidad.
+
+01:17.200 --> 01:20.400
+Esto es vectorial y permite editar las
+propiedades con CSS.
+
+01:20.400 --> 01:23.200
+Nosotros lo podemos crear en un programa
+de ilustración
+
+01:23.200 --> 01:25.000
+como Adobe
+Illustrator.
+
+01:25.000 --> 01:27.200
+Lo exportamos y esto lo podemos
+importar
+
+01:27.200 --> 01:28.600
+como código en nuestro
+proyecto
+
+01:28.600 --> 01:30.800
+y empezar a cambiarle los
+bordes,
+
+01:30.800 --> 01:33.800
+el color, el tamaño por medio de
+propiedades de CSS.
+
+01:33.800 --> 01:36.800
+Entonces es muy útil y no es tan pesado.
+
+01:36.800 --> 01:39.000
+El otro formato que existe es el GIF.
+
+01:39.000 --> 01:41.000
+Yo no recomiendo mucho el uso de
+GIF
+
+01:41.000 --> 01:42.400
+porque es muy
+pesado.
+
+01:42.400 --> 01:45.400
+Lo recomiendo para uso de imágenes de poco
+tamaño
+
+01:45.400 --> 01:47.200
+e íconos animados
+pequeñitos,
+
+01:47.200 --> 01:50.200
+pero no recomendaría utilizar una imagen
+GIF
+
+01:50.200 --> 01:53.000
+para, no sé, el fondo de un
+hero
+
+01:53.000 --> 01:54.400
+o el fondo de una
+página
+
+01:54.400 --> 01:56.400
+porque son imágenes que son muy
+pesadas
+
+01:56.400 --> 01:58.800
+y a veces las animaciones no se
+reproducen
+
+01:58.800 --> 02:00.200
+de una manera tan
+fluida
+
+02:00.200 --> 02:02.200
+por el mismo peso de la
+animación.
+
+02:03.400 --> 02:06.200
+Ahora que ya tenemos claro cuál formato
+elegir,
+
+02:06.200 --> 02:09.200
+vamos a elegir qué imágenes podemos elegir.
+
+02:09.200 --> 02:11.600
+Lo primero que todo es elegir
+imágenes
+
+02:11.600 --> 02:13.600
+que le aporten verdaderamente al contenido.
+
+02:13.600 --> 02:16.200
+Muchas veces creamos un
+wireframe
+
+02:16.200 --> 02:18.000
+y decimos, acaba de venir una imagen,
+
+02:18.000 --> 02:20.200
+pero no sabemos específicamente por qué.
+
+02:20.200 --> 02:22.400
+Y luego, cuando terminamos nuestros
+componentes,
+
+02:22.400 --> 02:24.600
+vamos a añadir las imágenes y no tenemos
+ni idea
+
+02:24.600 --> 02:26.800
+de qué animación o de qué imagen añadir.
+
+02:26.800 --> 02:30.000
+Lo importante es siempre piensa las
+imágenes como un extra,
+
+02:30.000 --> 02:31.800
+como un aporte al
+contenido
+
+02:31.800 --> 02:34.200
+y no como un elemento que va a estar
+abandonado
+
+02:34.200 --> 02:38.200
+en el medio de la página sin ningún objetivo.
+
+02:38.200 --> 02:39.200
+Siguiente.
+
+02:39.200 --> 02:42.200
+Utiliza imágenes en las que tu público
+objetivo se vea reflejado.
+
+02:42.200 --> 02:43.800
+Esto también es muy
+importante.
+
+02:43.800 --> 02:46.000
+Si vamos a hacer una página de comida,
+
+02:46.000 --> 02:49.000
+le da más credibilidad utilizar fotos
+verdaderas
+
+02:49.000 --> 02:50.600
+de la comida que estamos
+vendiendo.
+
+02:50.600 --> 02:53.200
+¿Por qué? A veces usamos fotos de
+stock
+
+02:53.200 --> 02:54.600
+que se ven muy
+bonitas,
+
+02:54.600 --> 02:56.400
+pero que no están reflejando la realidad,
+
+02:56.400 --> 03:01.200
+entonces no le estamos transmitiendo
+confianza a un usuario.
+
+03:01.200 --> 03:01.800
+Siguiente.
+
+03:01.800 --> 03:04.600
+Elige imágenes consistentes con paletas de
+colores.
+
+03:04.600 --> 03:05.600
+Por ejemplo, en mi
+caso,
+
+03:05.600 --> 03:08.400
+yo escogí una paleta de color amarillo con
+negro.
+
+03:08.400 --> 03:10.600
+Si escogiera una imagen de una
+hamburguesa
+
+03:10.600 --> 03:13.800
+en la que predominan los colores morados,
+azules,
+
+03:13.800 --> 03:16.000
+o un color que no esté en
+línea
+
+03:16.000 --> 03:18.400
+con la línea gráfica de mi aplicación,
+
+03:18.400 --> 03:19.600
+pues se va a ver
+rara
+
+03:19.600 --> 03:21.000
+y al momento de incluir la
+imagen,
+
+03:21.000 --> 03:22.000
+pues no va a
+combinar
+
+03:22.000 --> 03:24.200
+y se va a ver como un bloque
+independientemente
+
+03:24.200 --> 03:25.800
+a toda la
+página.
+
+03:25.800 --> 03:26.400
+Siguiente.
+
+03:26.400 --> 03:27.600
+Cuidado con la
+licencia.
+
+03:27.600 --> 03:29.400
+Es importante que si vas a
+usar
+
+03:29.400 --> 03:31.600
+una imagen de stock bajada a internet,
+
+03:31.600 --> 03:34.800
+verifiques que efectivamente tenga la
+licencia
+
+03:34.800 --> 03:36.400
+para esa
+imagen.
+
+03:36.400 --> 03:38.200
+Hay otras consideraciones
+importantes
+
+03:38.200 --> 03:40.600
+que son las de rendimiento y accesibilidad.
+
+03:40.600 --> 03:44.200
+Una de ellas es evitar exportar imágenes
+con texto incrustado.
+
+03:44.200 --> 03:46.600
+Esto lo vimos en la clase de accesibilidad.
+
+03:46.600 --> 03:49.200
+Y el tema es que nuestros usuarios van a
+poder navegar
+
+03:49.200 --> 03:50.800
+con el teclado por la
+página
+
+03:50.800 --> 03:54.600
+y van a tener que leer los títulos, los
+subtítulos, etc.
+
+03:54.600 --> 03:56.800
+No es una buena práctica añadir, por ejemplo,
+
+03:56.800 --> 03:59.200
+un título metido dentro de una imagen.
+
+03:59.200 --> 04:01.800
+Esto no va a ser
+legible
+
+04:01.800 --> 04:05.600
+ni va a ser fácil de leer por un lector de
+pantalla.
+
+04:05.600 --> 04:07.000
+Y en cuanto a
+calidad,
+
+04:07.000 --> 04:09.400
+se van a ver los bordes del texto muy
+borrosos,
+
+04:09.400 --> 04:11.000
+entonces no es
+recomendable.
+
+04:11.000 --> 04:12.000
+Siguiente.
+
+04:12.000 --> 04:14.600
+Exportar las imágenes al tamaño del
+contenedor final.
+
+04:14.600 --> 04:16.000
+Cuando corremos un
+audit
+
+04:16.000 --> 04:18.400
+para ver cuál es el performance de nuestra
+página web,
+
+04:18.400 --> 04:20.400
+vemos que hay un error muy
+común
+
+04:20.400 --> 04:22.600
+y es que estamos trayendo imágenes muy
+grandes
+
+04:22.600 --> 04:25.000
+para el contenedor en el que las estamos
+utilizando.
+
+04:25.000 --> 04:27.600
+Entonces, si tenemos un detalle de
+producto
+
+04:27.600 --> 04:29.600
+con una imagen de
+100%,
+
+04:29.600 --> 04:32.000
+no es necesario que incluyamos en nuestro
+proyecto
+
+04:32.000 --> 04:34.000
+una imagen de 2.000 x
+2.000,
+
+04:34.000 --> 04:36.800
+porque esto va a hacer que el tiempo de
+carga de nuestra página
+
+04:36.800 --> 04:39.400
+sea mucho mayor para algo que no es necesario.
+
+04:39.400 --> 04:40.800
+Siguiente.
+
+04:40.800 --> 04:43.400
+Considera el uso de estrategias como lazy
+loading.
+
+04:43.400 --> 04:47.200
+De esto pueden leer un poco más en internet,
+
+04:47.200 --> 04:49.600
+pero básicamente el lazy loading lo que
+hace
+
+04:49.600 --> 04:52.200
+es que va cargando las imágenes de un
+sitio progresivamente
+
+04:52.200 --> 04:54.000
+a medida que vamos haciendo
+scroll.
+
+04:54.000 --> 04:56.600
+Esto nos ayuda a aumentar el tiempo de
+carga de la página
+
+04:56.600 --> 05:00.200
+porque cuando damos Enter después de ir a
+una URL,
+
+05:00.200 --> 05:02.400
+la página va a traer solamente la capa de
+texto
+
+05:02.400 --> 05:03.400
+y la capa de
+estilos,
+
+05:03.400 --> 05:06.000
+pero no se va a quedar cargando cinco
+segundos
+
+05:06.000 --> 05:08.000
+todas las imágenes, todos los videos,
+
+05:08.000 --> 05:10.000
+sino que a medida que vamos haciendo
+scroll
+
+05:10.000 --> 05:12.000
+va a empezar a cargar estas imágenes.
+
+05:12.000 --> 05:13.000
+Siguiente.
+
+05:13.000 --> 05:14.400
+Asegúrate de añadir al
+text
+
+05:14.400 --> 05:16.600
+a las imágenes que tengan un fin comunicativo.
+
+05:16.600 --> 05:19.000
+Hay imágenes en las que, por ejemplo,
+
+05:19.000 --> 05:22.200
+estamos poniendo un tutorial de pasos de
+cómo hacer algo
+
+05:22.200 --> 05:24.800
+o una foto de un detalle de un
+producto
+
+05:24.800 --> 05:26.800
+que es muy importante para el usuario.
+
+05:26.800 --> 05:28.800
+Cuando un usuario está navegando por el
+teclado,
+
+05:28.800 --> 05:30.400
+tenemos que garantizarle a ese
+usuario
+
+05:30.400 --> 05:33.200
+que pueda leer el mismo
+contenido
+
+05:33.200 --> 05:35.800
+de alguna u otra manera que no sea viendo
+la imagen.
+
+05:35.800 --> 05:38.800
+Entonces, para esto es recomendable el alt
+text.
+
+05:38.800 --> 05:42.600
+En este alt text podemos añadir un texto
+alternativo,
+
+05:42.600 --> 05:43.600
+como su nombre lo
+dice,
+
+05:43.600 --> 05:45.800
+con la descripción de qué está pasando en
+la imagen.
+
+05:45.800 --> 05:48.400
+Entonces, por ejemplo, en el caso de un
+tutorial,
+
+05:48.400 --> 05:51.400
+podríamos utilizar un alt text que sea
+como
+
+05:51.400 --> 05:55.800
+lávate las manos, paso uno, paso dos,
+
+05:55.800 --> 05:58.400
+puedes durar tantos minutos lávandote las
+manos,
+
+05:58.400 --> 06:01.200
+pero entonces así la información no va a
+estar oculta
+
+06:01.200 --> 06:03.200
+de los usuarios que no pueden ver la página.
+
+06:04.200 --> 06:07.600
+Eso sería todo para la parte de imágenes
+para web.
+
+06:07.600 --> 06:09.800
+Ahora hay otros elementos muy
+importantes
+
+06:09.800 --> 06:11.200
+para una página web y una aplicación,
+
+06:11.200 --> 06:13.000
+que son las animaciones y los videos,
+
+06:13.000 --> 06:16.000
+y eso lo vamos a ver en la próxima clase.
+

subir/Curso de Diseño para Developers/04-Aprender sobre Diseño de interfaz de usuario/10-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/mssroboto/diseno-para-programadores/tree/master/4-app

subir/Curso de Diseño para Developers/04-Aprender sobre Diseño de interfaz de usuario/10-Uso Eficiente de Animaciones y Videos en Páginas Web.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e07f791e84b5ab178761cd0f228057b5786c6bffe03800335418a9cf5082d91c
+size 73225364

subir/Curso de Diseño para Developers/04-Aprender sobre Diseño de interfaz de usuario/10-Uso Eficiente de Animaciones y Videos en Páginas Web.vtt

@@ -0,0 +1,278 @@
+WEBVTT
+
+00:00.000 --> 00:08.240
+Ahora te voy a enseñar unos tips para que
+puedas usar animaciones y vídeos en tu página web.
+
+00:09.520 --> 00:15.600
+Al igual que en las imágenes, existen
+diferentes formatos para seleccionar o animar contenido en
+
+00:15.600 --> 00:21.280
+nuestra página web. Uno de ellos es el CSS
+animado. El CSS animado está indicado para
+
+00:21.280 --> 00:26.040
+animaciones sencillas y transiciones.
+El CSS animado no es un formato de vídeo como tal,
+
+00:26.040 --> 00:31.680
+es una animación que nosotros podemos
+crear utilizando propiedades de CSS como el transition,
+
+00:31.680 --> 00:38.640
+translate, cambios de colores, de
+posiciones y animando elementos de HTML. Esto es muy útil
+
+00:38.640 --> 00:43.320
+para animaciones cortas, para animaciones
+decorativas, por ejemplo, cuando hacemos
+
+00:43.320 --> 00:49.560
+clic en un botón, para animaciones de íconos,
+etc. Hacer animaciones de alta complejidad en CSS
+
+00:49.560 --> 00:55.360
+demanda mucho tiempo, entonces yo
+recomiendo usarlo para animaciones sencillas. Otro de los
+
+00:55.360 --> 01:01.120
+formatos posibles es el SVG animado.
+Este tampoco es un formato de vídeo, este es un formato
+
+01:01.120 --> 01:06.560
+vectorial para hacer ilustraciones que
+podemos animar igual con propiedades de CSS o con algunas
+
+01:06.560 --> 01:11.520
+propiedades de SVG, al igual que las
+animaciones de CSS está recomendado para animaciones de baja
+
+01:11.520 --> 01:17.720
+complejidad. Lo interesante del SVG
+animado es que podemos añadirle etiquetas y opciones que
+
+01:17.720 --> 01:25.000
+nos permitan animarlos usando JavaScript
+con Canvas. La siguiente opción que les voy a explicar
+
+01:25.000 --> 01:29.920
+es JavaScript y Canvas, como lo veíamos
+anteriormente, integrado con WebGL. Este
+
+01:29.920 --> 01:35.200
+está indicado para animaciones un poquito
+más complejas, como animaciones de datos o gráficas
+
+01:35.200 --> 01:41.760
+3D. Por ejemplo, cuando entramos a mirar
+una estadística, vemos estas animaciones de diagramas
+
+01:41.760 --> 01:50.240
+de pie charts o de barras que se animan y
+entonces salen datos como el 6% de personas, no sé qué.
+
+01:50.240 --> 01:56.840
+Entonces eso por lo general está hecho con
+WebGL. Hay unas librerías como D3 en JavaScript que son
+
+01:56.840 --> 02:03.440
+muy útiles para animar este tipo de cosas,
+también sirve para animar mapas y yo la recomiendo mucho
+
+02:03.440 --> 02:08.880
+cuando necesitamos animar datos dinámicos.
+Y por último, pues ya tenemos los vídeos. Los vídeos
+
+02:08.880 --> 02:15.840
+sí están indicados para filmaciones,
+animaciones, por lo general en páginas web que no están
+
+02:15.840 --> 02:23.120
+dedicadas a subir vídeos como Platzi.
+Yo recomiendo utilizar vídeos muy cortos, muy concisos, para que
+
+02:23.120 --> 02:29.320
+no nos aumente mucho el peso de carga de
+nuestra página. Si tenemos un vídeo de fondo gigante que
+
+02:29.320 --> 02:35.640
+dura 30 minutos, pues nuestra página nunca
+va a terminar de cargar. Entonces lo importante de
+
+02:35.640 --> 02:40.120
+los vídeos es siempre usarlos para cosas
+muy complejas, muy sencillas y siempre preguntarnos
+
+02:40.120 --> 02:46.400
+bueno, ¿realmente necesito este vídeo o
+esto podría ser una imagen? Sí, como no dejarnos llevar por la
+
+02:46.400 --> 02:50.880
+idea de decorar mucho la página, sino
+pensar mucho en performance, porque una página que demora mucho
+
+02:50.880 --> 02:57.880
+tiempo a encargar es una página que está
+perdiendo usuarios. Cómo elegir gráficos en movimiento. Al
+
+02:57.880 --> 03:02.200
+igual que las imágenes, tenemos que tener
+en cuenta ciertos criterios para poder elegir vídeos
+
+03:02.200 --> 03:06.040
+que funcionen. El primero, como les decía
+anteriormente, hay que elegir animaciones que
+
+03:06.040 --> 03:11.600
+aporten al contenido. Una página muy
+animada es una página que saca muy rápido al usuario, a menos
+
+03:11.600 --> 03:16.920
+que sean animaciones livianas, que carguen
+rápido y que estén aportando un contenido. Por ejemplo,
+
+03:16.920 --> 03:22.200
+en el caso de los tutoriales, cuando vemos
+que se anima paso 1, paso 2, paso 3, esas son animaciones
+
+03:22.200 --> 03:27.560
+útiles que podemos añadir a nuestra página,
+pero si vamos a mostrar, por ejemplo, el detalle de un
+
+03:27.560 --> 03:32.080
+producto como una hamburguesa, pues no es
+necesario mostrar la hamburguesa moviéndose, porque no está
+
+03:32.080 --> 03:37.560
+agregando ningún valor. Siguiente, procura
+que no se reproduzcan automáticamente y si lo hacen,
+
+03:37.560 --> 03:43.560
+que no tengan sonido. Esta es una
+consideración de accesibilidad y de usabilidad también, porque
+
+03:43.560 --> 03:48.240
+cuando entramos a una página y tiene
+música a todo volumen, pasa lo mismo que cuando vamos por
+
+03:48.240 --> 03:52.880
+la calle y vamos a entrar a una almacenía
+y hay un parlante a todo volumen en la puerta, pues no
+
+03:52.880 --> 03:58.200
+entramos. Entonces pasa lo mismo en las
+páginas web, el sonido que se reproduce automáticamente
+
+03:58.200 --> 04:05.960
+es demasiado invasivo y yo recomiendo no
+usarlo nunca. Entonces, pues la idea es que traten de
+
+04:05.960 --> 04:11.360
+elegir videos que si son videos animados,
+sean videos cortos que se puedan hacer con CSS o con
+
+04:11.360 --> 04:17.520
+SVG y si ya necesitamos animaciones de más
+complejidad, que el usuario pueda tener un
+
+04:17.520 --> 04:23.760
+pause, un botón de stop, un botón de
+volumen y sea el usuario el que controle cómo va a reproducir
+
+04:23.760 --> 04:31.600
+ese video. Lo siguiente, evita que tus
+animaciones tengan flashes, eso es muy importante. Hay
+
+04:31.600 --> 04:38.240
+algunas condiciones como la epilepsia,
+que cuando hay más de tres flashes seguidos pueden desatar
+
+04:38.240 --> 04:44.040
+un ataque. Entonces lo importante es
+tratar de manejar animaciones muy suaves y que no tomen
+
+04:44.040 --> 04:49.280
+por imprevisto al usuario, que al saber el
+usuario que hace clic en un botón se mueve un poquito o
+
+04:49.280 --> 04:53.960
+un carrusel se mueve hacia la derecha,
+pero no una página en la que entremos y una tengamos todos
+
+04:53.960 --> 04:59.680
+los flashes de productos, porque eso puede
+ser perjudicial para la salud. Siguiente, si tus
+
+04:59.680 --> 05:05.000
+animaciones aportan al contenido, añade
+subtítulos o transcripciones. Esto también va muy de la mano
+
+05:05.000 --> 05:11.560
+con accesibilidad y es muy parecido al text.
+Si tenemos un video, por ejemplo, sin sonido, pero
+
+05:11.560 --> 05:16.920
+que está mostrando un tutorial, vuelvo a
+ese ejemplo, en el que sale paso uno, paso dos, paso tres,
+
+05:16.920 --> 05:21.720
+tenemos que garantizarle al usuario que
+este video tiene una transcripción, ya sean unos subtítulos
+
+05:21.720 --> 05:27.160
+o el uso de ARIA labels en donde vamos a
+tener una descripción completa de qué está pasando en el
+
+05:27.160 --> 05:31.360
+video, pero de esta manera estamos
+garantizándole al usuario que no se va a perder de la información
+
+05:31.360 --> 05:35.880
+importante que hay en ese video. Evita que
+las animaciones bloqueen la lectura básica del
+
+05:35.880 --> 05:42.240
+contenido. Hay muchas páginas que tienen
+animaciones de introducción muy largas, tienen flashes,
+
+05:42.240 --> 05:47.880
+tienen videos que bloquean el acceso al
+contenido básico de la página. Esto es una muy mala práctica.
+
+05:47.880 --> 05:53.240
+La idea es que cualquier usuario,
+independientemente de si entra con una conexión lenta o en un
+
+05:53.240 --> 05:57.920
+dispositivo que no tiene tanta memoria,
+pueda leer el contenido principal de tu página. Trata de
+
+05:57.920 --> 06:02.920
+mantener las animaciones al mínimo y
+cuando las uses trata de que no ocupen el total de la pantalla
+
+06:02.920 --> 06:07.920
+o que no estén bloqueando la lectura a un
+componente básico de tu aplicación. Recuerda que las
+
+06:07.920 --> 06:13.640
+animaciones y videos afectan el
+rendimiento de tu página. Trata de mantenerla al mínimo, o sea,
+
+06:13.640 --> 06:19.040
+usa imágenes que realmente tengan un
+significado, usa videos que realmente tengan una utilidad,
+
+06:19.040 --> 06:27.000
+pero no llenes tu página de videos,
+animaciones, imágenes cuando no son necesarias. Esto sería
+
+06:27.000 --> 06:31.600
+todo para la selección de videos. Ya
+tienes las herramientas para elegir las imágenes y los videos
+
+06:31.600 --> 06:38.320
+de tu página y en la próxima clase vamos a
+poner todo junto para terminar de construir tu aplicación.
+

subir/Curso de Diseño para Developers/04-Aprender sobre Diseño de interfaz de usuario/11-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/mssroboto/diseno-para-programadores/tree/master/4-app

subir/Curso de Diseño para Developers/04-Aprender sobre Diseño de interfaz de usuario/11-Repaso y Construcción Final de Aplicación Web en React.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:82fccd76b45af1b5b27a25a66f96742170a7c0f4ca06c65174ad253d34551e28
+size 95474752

subir/Curso de Diseño para Developers/04-Aprender sobre Diseño de interfaz de usuario/11-Repaso y Construcción Final de Aplicación Web en React.vtt

@@ -0,0 +1,365 @@
+WEBVTT
+
+00:00.000 --> 00:06.440
+Ya estudiamos todos los pasos importantes
+para construir una aplicación.
+
+00:06.440 --> 00:11.040
+Ahora vamos a hacer un repaso de cada uno
+de estos pasos y al final vamos a construir y ver
+
+00:11.040 --> 00:15.640
+nuestros resultados finales. Empecemos por
+el brief. Como hablábamos en la clase de brief,
+
+00:15.640 --> 00:21.440
+el brief se conforma de diferentes pasos
+en donde incluimos los objetivos, el público objetivo de
+
+00:21.440 --> 00:26.980
+nuestra aplicación, nuestra competencia,
+nuestro canal de distribución y es importante tener un
+
+00:26.980 --> 00:31.720
+cronograma. Esta va a ser nuestra hoja de
+ruta para empezar a traducir todos estos requerimientos
+
+00:31.720 --> 00:38.600
+en un producto visual final. Lo segundo
+que hicimos, si lo recuerdas, fue un sitemap. En
+
+00:38.600 --> 00:43.040
+la clase de diagramas de flujo vimos que
+existen muchos tipos de diagramas de flujo para poder
+
+00:43.040 --> 00:47.760
+definir la estructura de nuestra aplicación.
+Acá empezamos a traducir nuestro brief y nuestros
+
+00:47.760 --> 00:54.640
+objetivos en una estructura de una página.
+Por ejemplo, acá tenemos un home en donde debemos
+
+00:54.640 --> 01:01.440
+tener un menú de alimentos, en donde
+debemos tener una sección de hacer pedidos, un contacto y otras
+
+01:01.440 --> 01:08.080
+páginas externas. Lo siguiente que hicimos
+fue un user flow en donde empezamos a mapear una de las
+
+01:08.080 --> 01:12.480
+tareas más comunes de los usuarios que es
+hacer un pedido en línea. Podemos tener cuantos user
+
+01:12.480 --> 01:17.200
+flows queramos por página, lo importante
+es que tengamos claros todos los pasos que va a realizar
+
+01:17.200 --> 01:22.920
+un usuario para completar una tarea.
+En este caso tenemos un inicio, el usuario va al menú,
+
+01:22.920 --> 01:29.120
+luego al detalle de producto, añade el
+producto y finalmente lo compra y recibe un mensaje de
+
+01:29.120 --> 01:36.080
+confirmación. Después de tener esto claro,
+empezamos a dibujar wireframes. Así se ven nuestros wireframes
+
+01:36.080 --> 01:40.880
+de alta fidelidad para dextro. También
+deberíamos tener wireframes para móviles si vamos a trabajar
+
+01:40.880 --> 01:47.640
+responsive. Así quedó nuestro plano de la
+página, esta es como una maqueta que contiene todos los
+
+01:47.640 --> 01:53.760
+componentes generales que vamos a tener al
+final y como podemos ver no manejamos acá muchos temas
+
+01:53.760 --> 01:59.400
+despaciados de tipografía de colores,
+es algo muy genérico que podemos hacer tanto en Sketch como en
+
+01:59.400 --> 02:05.120
+Photoshop como en cualquier otra herramienta.
+Y finalmente así nos quedó el diseño de nuestra
+
+02:05.120 --> 02:10.920
+página. Como podemos ver es muy similar al
+wireframe pero no es exactamente igual, vimos que
+
+02:10.920 --> 02:17.760
+hay cosas que funcionaban, que no
+funcionaban y que decidimos empezar a cambiar. Acá en esta página
+
+02:17.760 --> 02:25.360
+completa podemos ver todos los componentes,
+todos los elementos pequeños y en cuanto a estructura
+
+02:25.360 --> 02:30.800
+de contenido podemos ver acá en el
+wireframe como tenemos una página que es la totalidad de la
+
+02:30.800 --> 02:36.880
+aplicación o de la pantalla que estamos
+viendo mejor. Tenemos unos módulos que como este hero
+
+02:36.880 --> 02:41.560
+que estamos viendo acá o como este menú
+que vemos acá en la parte de abajo que a su vez incluyen
+
+02:41.560 --> 02:46.600
+otros subcomponentes que son los
+componentes básicos y son la unidad más pequeña que vamos
+
+02:46.600 --> 02:53.200
+a tener en nuestro listado de componentes
+que son como los botones, la navegación, los íconos, etcétera.
+
+02:53.200 --> 02:58.600
+Entonces vamos a mirar cómo quedó la
+estructura de nuestro proyecto. En nuestro proyecto vemos que
+
+02:58.600 --> 03:06.000
+tenemos unas páginas como el home en donde
+estamos incluyendo el hero, el quote, el menú y el
+
+03:06.000 --> 03:11.800
+reto. Estamos utilizando React pero esto
+se puede hacer con cualquier otro tipo de framework,
+
+03:11.800 --> 03:17.960
+librería o lo que ustedes quieran. Acá
+creamos un componente hero, como vemos este hero es un
+
+03:17.960 --> 03:24.480
+archivo externo, aquí arriba lo estamos
+incluyendo. Tenemos un contact box, tenemos la sección del
+
+03:24.480 --> 03:29.880
+reto, la sección del quote, entonces estos
+van a ser nuestros módulos. Ahora vamos a mirar el
+
+03:29.880 --> 03:36.360
+folder de módulos. Dentro de módulos
+tenemos el hero, si abrimos nuestro archivo vamos a ver que a
+
+03:36.360 --> 03:42.720
+su vez este incluye los componentes
+pequeños que son el cta, el icon e inclusive el nav. Esto nos
+
+03:42.720 --> 03:48.560
+va a permitir tener diferentes capas de
+contenido y de complejidad. Como podemos ver dentro de cada
+
+03:48.560 --> 03:54.120
+folder estamos guardando unos estilos de
+cada uno de los elementos y la idea es que cada componente
+
+03:54.120 --> 03:58.240
+se encargue de manejar sus estilos para
+que no tengamos mucho caos a la hora de armar la página.
+
+03:58.240 --> 04:04.640
+Recuerda que la página tiene que armarse
+como si fuera un rompecabezas. Acá en nuestro hero vemos
+
+04:04.640 --> 04:10.480
+que estamos importando el nav, el cta,
+le estamos pasando unas configuraciones y le estamos pasando
+
+04:10.480 --> 04:15.880
+unos datos que preferiblemente deberían
+venir de una base de datos, pero para términos de este
+
+04:15.880 --> 04:22.840
+ejemplo pues no fue necesario. Y
+finalmente ya podemos ver nuestro componente que sería el cta,
+
+04:22.840 --> 04:28.960
+que es algo muy sencillo. Un componente a
+su vez también puede incluir otros componentes pequeñitos,
+
+04:28.960 --> 04:34.560
+por ejemplo acá vemos como el cta está
+incluyendo un icono, esto está perfectamente bien. La idea
+
+04:34.560 --> 04:40.160
+es que los componentes funcionen en un
+ecosistema en el que no se bloqueen entre sí, sino que podamos
+
+04:40.160 --> 04:45.520
+ser capaces de incluir cualquier tipo de
+componente dentro de otro sin tener un conflicto o un error
+
+04:45.520 --> 04:53.200
+de estilos, etc. Entonces acá vemos cómo
+validamos primero si tenemos un icono y si tenemos un icono
+
+04:53.200 --> 04:58.640
+en los datos que le pasamos pues
+renderizamos el componente del icono. Esto ya nos crearía la unidad
+
+04:58.640 --> 05:06.240
+más pequeña de nuestra aplicación que es
+un botón o un componente básico. Ya con todo esto
+
+05:06.240 --> 05:15.600
+listo entonces vamos a volver a mirar
+nuestro page, vamos a ver nuestro home page que está acá.
+
+05:17.240 --> 05:23.440
+Entonces así se ve nuestro código, el home
+page, es un archivo de 26 líneas, no es un archivo de
+
+05:23.440 --> 05:30.680
+100, 200, 300 líneas y vamos a mirar cómo
+se ve nuestra página final. Así se ve.
+
+05:30.680 --> 05:37.520
+Como podemos ver todo se ve como si
+hiciera parte de una unidad, acá no nos damos cuenta
+
+05:37.520 --> 05:42.640
+de que están en archivos separados ni
+absolutamente nada. Podemos empezar a hacer scroll.
+
+05:44.520 --> 05:50.600
+Vemos que tenemos otro módulo que es el menú.
+El menú nos incluye cada una de las unidades
+
+05:50.600 --> 05:56.960
+pequeñitas que son el detalle del producto.
+Yo le añadí unas animaciones pequeñitas al botón para
+
+05:56.960 --> 06:01.080
+saber que estamos haciendo clic sobre el
+botón. Tú le puedes añadir las animaciones que tú quieras,
+
+06:01.080 --> 06:08.880
+importante que no sean animaciones muy
+saturadas. Acá tenemos el último módulo que es el del reto
+
+06:08.880 --> 06:15.480
+de redes sociales. Este tiene unas
+animaciones también en los botones y finalmente tenemos
+
+06:15.480 --> 06:21.800
+un contacto. Como podemos ver todo está
+como empaquetado pero visualmente no se ve así,
+
+06:21.800 --> 06:30.680
+vemos todo como si fuera una unidad final
+y podemos activar nuestra utilidad de grilla para
+
+06:30.680 --> 06:36.960
+poder ver que todo esté alineado y vamos a
+ver que a medida que empezamos a escalar todo se va a
+
+06:36.960 --> 06:42.720
+acomodar sin ningún esfuerzo y sin añadir
+estilos personalizados para la página. Entonces aquí vamos
+
+06:42.720 --> 06:53.240
+por ejemplo a un pixel 2. Vamos a
+desactivar acá esta grilla y vemos que tenemos los botones,
+
+06:54.960 --> 07:01.440
+tenemos acá nuestros componentes, acá
+podemos ver el progressive enhancement en acción. Entonces
+
+07:01.440 --> 07:07.200
+vemos como acá es una versión más sencilla
+de las tabs. Lo que hicimos no fue como juntar los
+
+07:07.200 --> 07:13.280
+tres elementos hasta su versión más
+pequeña sino cambiar un poquito la distribución del layout.
+
+07:13.280 --> 07:19.040
+Tenemos acá la sección del reto y
+finalmente el contacto. Si vamos a tablet es un híbrido
+
+07:19.040 --> 07:27.840
+entre mobile y desktop entonces vemos que
+acá tenemos ya 12 columnas y tenemos acá nuestros
+
+07:27.840 --> 07:36.320
+componentes, todo se sigue alineando
+perfectamente y finalmente tenemos texto. Este es el resultado
+
+07:36.320 --> 07:40.280
+final y si queremos volver de nuevo a
+nuestra página del Style Guide,
+
+07:44.960 --> 07:51.040
+estamos en nuestro Style Guide, podemos
+ver los colores, la tipografía, las columnas,
+
+07:51.040 --> 07:56.640
+nuestra estructura de headings. Entonces
+también con estos estilos definidos desde un principio
+
+07:56.640 --> 08:01.760
+solamente tenemos que remitirnos a esto
+como si fuera un manual de instrucciones y vamos y
+
+08:01.760 --> 08:08.800
+buscamos el h1, lo ponemos, luego el h2 lo
+ponemos, un botón lo ponemos también. Entonces es súper
+
+08:08.800 --> 08:18.120
+fácil. Si quieren volvemos acá de nuevo a
+nuestra página y vamos a hacer un ejercicio muy fácil en
+
+08:18.120 --> 08:24.720
+donde vamos a ir acá y vamos a quitar este
+menú. Entonces vamos a ir a nuestro hero y lo único que
+
+08:24.720 --> 08:34.800
+tenemos que hacer es quitar esto,
+guardamos y ya no tenemos botón pero no se rompió el hero. Igual
+
+08:34.800 --> 08:39.040
+podemos hacer con otros elementos como el
+ícono si vemos que ya no queremos tener un ícono,
+
+08:39.040 --> 08:45.800
+lo único que tenemos que hacer es quitarlo
+y nuestra página no se debería romper, no vemos
+
+08:45.800 --> 08:52.280
+que un elemento dependa exclusivamente del
+otro elemento. Entonces este sería el resultado final
+
+08:52.280 --> 08:59.680
+de nuestra página. Este proyecto está en
+el link de github que referenciamos al principio del curso.
+
+08:59.680 --> 09:05.480
+Te invito a que lo descargues, a que le
+cambies cosas, puedes empezar de ceros tu página también
+
+09:05.480 --> 09:12.120
+si quieres. Esto simplemente es una
+referencia. Hay muchas mejoras que se pueden hacer. Yo trate
+
+09:12.120 --> 09:17.200
+de dejar lo más sencillo posible para que
+no nos compliquemos con scripts, con animaciones,
+
+09:17.200 --> 09:24.720
+con ciclos o flujos de datos, sino
+simplemente es un diseño. Entonces te invito a que bajes
+
+09:24.720 --> 09:30.680
+del repositorio y las dudas que tengas
+escríbelas en el foro. Eso sería todo por esta clase,
+
+09:30.680 --> 09:48.680
+déjame saber tus preguntas y comentarios.
+

subir/Curso de Diseño para Developers/05-Conclusiones/01-Colaboración efectiva con equipos de diseño.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a99d1db97fe26fd1c9ec3764dc88cd6b95dc66ca0540b458cc6cf9e12e7c6c22
+size 6687382

subir/Curso de Diseño para Developers/05-Conclusiones/01-Colaboración efectiva con equipos de diseño.vtt

@@ -0,0 +1,48 @@
+WEBVTT
+
+00:00.000 --> 00:06.000
+Te felicito por haber llegado hasta este
+punto del curso.
+
+00:06.000 --> 00:09.000
+En este momento ya debes tener todas las
+herramientas necesarias
+
+00:09.000 --> 00:12.000
+para poder construir tu aplicación y para
+poder trabajar exitosamente
+
+00:12.000 --> 00:14.000
+con equipos de
+diseño.
+
+00:14.000 --> 00:17.000
+En caso de que te haya interesado algún
+tema como accesibilidad,
+
+00:17.000 --> 00:19.000
+usabilidad, arquitectura de la información,
+
+00:19.000 --> 00:22.000
+en Platzi tenemos infinidad de cursos para
+que puedas
+
+00:22.000 --> 00:25.000
+profundizar este tipo de conocimientos.
+
+00:25.000 --> 00:29.000
+Te invito a que dejes tus preguntas,
+tus comentarios en el foro del curso,
+
+00:29.000 --> 00:31.000
+también me puedes contactar por redes
+sociales,
+
+00:31.000 --> 00:34.000
+estoy en Twitter como
+MSSRoboto
+
+00:34.000 --> 00:59.000
+y espero verte más adelante en uno de los
+otros cursos.
+

subir/Curso de Diseño para Developers/05-Conclusiones/01-apuntesdisenoprograma_139d88e4-e2d8-4439-82e3-caef7a5777c1.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b18b22a76989960deb9930cb38ffbfc45a6fa63bb7207885a9cbc416d059edd2
+size 160616

subir/Curso de Diseño para Developers/05-Conclusiones/01-apuntesdisenoprograma_139d88e4-e2d8-4439-82e3-caef7a5777c1_727c675f-5f17-443a-b66e-0c219bba9484.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b18b22a76989960deb9930cb38ffbfc45a6fa63bb7207885a9cbc416d059edd2
+size 160616

subir/Curso de Diseño para Developers/06-Mentoría Expert/01-Diseño Web Responsive Integración de Equipos y Herramientas.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e30ecfc4497639f4fe549f22d7d3018320a45aa960f66d1e4136d2919eae4231
+size 504363816

subir/Curso de Diseño para Developers/06-Mentoría Expert/01-Diseño Web Responsive Integración de Equipos y Herramientas.vtt

@@ -0,0 +1,2479 @@
+WEBVTT
+
+00:00.000 --> 00:05.000
+el buscar eso, el buscar la inspiración.
+
+00:05.000 --> 00:07.000
+Gracias.
+
+00:07.000 --> 00:10.000
+Hola
+José.
+
+00:10.000 --> 00:14.000
+Bueno, personalmente a mí me sirve
+bastante escuchar música,
+
+00:14.000 --> 00:21.000
+dependiendo del tipo o el estilo del
+producto que estoy haciendo,
+
+00:21.000 --> 00:25.000
+o que estoy diseñando, o incluso cuando no
+estoy trabajando.
+
+00:25.000 --> 00:31.000
+Me sirve mucho escuchar música, hacer fotos,
+de hecho cocinar,
+
+00:31.000 --> 00:36.000
+también me sirve bastante porque es una
+actividad que me aleja de las pantallas.
+
+00:36.000 --> 00:42.000
+Entonces nosotros pasamos casi que más de
+10 horas al día en frente de una pantalla
+
+00:42.000 --> 00:46.000
+y eso a veces puede contribuir a que
+tengamos bloqueos creativos.
+
+00:46.000 --> 00:51.000
+Entonces podemos buscar una actividad que
+trate de alejarnos,
+
+00:51.000 --> 00:55.000
+ya sea del celular, del televisor, de los
+juegos de video.
+
+00:55.000 --> 01:00.000
+Eso nos despeja bastante la mente y hace
+que nos desaturemos de información,
+
+01:00.000 --> 01:06.000
+sobre todo las redes sociales a veces nos
+saturan bastante de contenidos, de noticias.
+
+01:06.000 --> 01:10.000
+En este tiempo de COVID también nos pueden
+saturar de preocupación.
+
+01:10.000 --> 01:16.000
+Entonces mi invitación es como a tratar de
+encontrar el proceso creativo fuera de las pantallas.
+
+01:16.000 --> 01:23.000
+Tienen actividades cotidianas como hablar
+con alguien, cocinar o hacer tareas manuales,
+
+01:23.000 --> 01:25.000
+sirve
+bastante.
+
+01:26.000 --> 01:31.000
+Completamente de acuerdo. De hecho desde
+la parte de creatividad a eso se le llama,
+
+01:31.000 --> 01:36.000
+es un momento en el que estás atento pero
+no estás tenso.
+
+01:36.000 --> 01:39.000
+Entonces justo como están comentando
+muchos en el chat,
+
+01:39.000 --> 01:43.000
+es cuando por ejemplo estás haciendo
+ejercicio, te estás bañando,
+
+01:43.000 --> 01:50.000
+estás haciendo la comida, estás
+concentrado en un proceso y estás atrapado un poco en esa actividad,
+
+01:50.000 --> 01:53.000
+pero no estás pensando de manera activa en
+eso.
+
+01:53.000 --> 01:56.000
+Creo que le llaman passive thinking,
+incluso voy a buscar el término
+
+01:56.000 --> 01:59.000
+porque de hecho después eso viene en otro
+de los cursos.
+
+01:59.000 --> 02:03.000
+Pero sí, aquí hay otra pregunta muy
+interesante, ahorita te digo quién la hace.
+
+02:03.000 --> 02:06.000
+Ah, pues mira, justo la hace Edwin Morales.
+
+02:06.000 --> 02:11.000
+Y dice que él se está enfocando mucho en
+la parte del desarrollo UI UX
+
+02:11.000 --> 02:16.000
+y me gustaría saber desde tu experiencia y
+con los proyectos y los equipos que te ha tocado trabajar,
+
+02:16.000 --> 02:20.000
+¿cómo es la interacción de los diseñadores
+con los programadores frontend?
+
+02:20.000 --> 02:26.000
+¿Qué retos de comunicación has tenido?
+¿Qué aprendizajes has tenido? Etcétera.
+
+02:28.000 --> 02:30.000
+Bueno,
+bastantes.
+
+02:31.000 --> 02:38.000
+Digamos que en dotetrabajo ahora hemos
+tratado de pulir bastante el flujo de trabajo,
+
+02:38.000 --> 02:43.000
+pero uno de los escenarios más comunes con
+los que yo me he encontrado en mi experiencia profesional
+
+02:43.000 --> 02:48.000
+es que se siente que son dos mundos
+completamente distintos.
+
+02:48.000 --> 02:56.000
+Entonces, muchos programadores creen que
+el diseño no es tan difícil o no es importante,
+
+02:56.000 --> 03:00.000
+que es una capa que se hace al final,
+faltan dos días para la entrega.
+
+03:00.000 --> 03:10.000
+O se suele pensar que las personas
+estudian diseño porque saben matemáticas o ese tipo de preconcepciones que tenemos.
+
+03:10.000 --> 03:17.000
+Y por el lado del diseño, entonces se
+suele pensar que las personas que programan no son creativas,
+
+03:17.000 --> 03:24.000
+que no les interesa hacer proyectos redadores,
+que son personas cuadriculadas
+
+03:24.000 --> 03:29.000
+y tienen en la cabeza el estereotipo del nerd,
+así de oficina.
+
+03:29.000 --> 03:32.000
+Sí, como esta persona súper aburrida.
+
+03:32.000 --> 03:34.000
+Y la verdad es que no es
+así.
+
+03:34.000 --> 03:39.000
+Entonces, yo creo que lo primero que hay
+que hacer ya es un tema más de soft skills
+
+03:39.000 --> 03:45.000
+y es acercar a los dos equipos porque
+siento que muchas empresas se manejan como dos islas aparte.
+
+03:45.000 --> 03:51.000
+Entonces, no hay como espacio para la
+interacción y para contribuir a hacer lluvias de ideas
+
+03:51.000 --> 03:57.000
+o empezar a concebir los proyectos desde
+un principio teniendo en cuenta los dos equipos.
+
+03:57.000 --> 04:06.000
+Entonces, creo que lo primero es como
+manejarlo desde la parte de integración de equipo.
+
+04:06.000 --> 04:09.000
+Lo segundo,
+exacto.
+
+04:09.000 --> 04:19.000
+Y lo segundo es cuando ya estamos
+planeando un proyecto o estamos pensando en hacer una aplicación o una página.
+
+04:19.000 --> 04:27.000
+Y porque es importante porque no queremos
+que al final, cuando tenemos una idea muy buena,
+
+04:27.000 --> 04:32.000
+el equipo técnico no lo podemos hacer o no
+estamos de acuerdo o puede pasar al revés.
+
+04:32.000 --> 04:42.000
+A veces tenemos diseños que son muy geniales,
+muy buenos, pero cuando los vamos a llevar a la página...
+
+04:42.000 --> 04:43.000
+¿No me
+oye?
+
+04:43.000 --> 04:45.000
+Se está empezando a cortar otra vez.
+
+04:45.000 --> 04:50.000
+Creo que te toca pedirle a todo el
+edificio que deje de estar en Netflix, hombre.
+
+04:50.000 --> 04:54.000
+Sabes, es que el internet acá ha estado
+súper lento.
+
+04:54.000 --> 04:59.000
+Hemos tenido problemas a nivel nacional
+porque todo el mundo está trabajando de manera remota.
+
+04:59.000 --> 05:00.000
+Claro.
+
+05:00.000 --> 05:01.000
+Entonces...
+
+05:01.000 --> 05:04.000
+No te preocupes, seremos
+pacientes.
+
+05:04.000 --> 05:12.000
+Venga, nos quedamos en que a veces estás
+haciendo un diseño súper, súper padre y pasa algo.
+
+05:12.000 --> 05:16.000
+Sí, bueno, creo que ya me oyen mejor.
+Estoy viendo los comentarios.
+
+05:16.000 --> 05:21.000
+Entonces sí, a veces pasa que tenemos un
+diseño que nos gusta mucho,
+
+05:21.000 --> 05:32.000
+pero resulta que estamos sobrecargando una
+página de 100 videos y 50 animaciones y no sé, 100imagenes.png.
+
+05:32.000 --> 05:40.000
+Entonces a mí me parece importante que
+como diseñadores tengamos claras las limitaciones de la web
+
+05:40.000 --> 05:42.000
+y la dinámica de la
+web.
+
+05:42.000 --> 05:43.000
+Entonces, ¿qué
+pasa?
+
+05:43.000 --> 05:47.000
+Hoy en día todos queremos que toda la
+información sea inmediata.
+
+05:47.000 --> 05:53.000
+Entonces nosotros entramos a una página y
+creemos que en menos de un segundo cargue y tener toda la información.
+
+05:53.000 --> 06:00.000
+El uso de datos móviles también es muy
+importante porque nadie quiere gastarse todos los datos móviles
+
+06:00.000 --> 06:05.000
+consultando una página, no sé, para pedir
+un domicilio.
+
+06:05.000 --> 06:10.000
+Entonces es importante saber esos goals
+antes de empezar a diseñar.
+
+06:10.000 --> 06:14.000
+Si estamos haciendo una página de
+información de primera mano,
+
+06:14.000 --> 06:20.000
+es importante crear un diseño que sea
+sencillo, que no le vaya a tomar a los usuarios mucho tiempo.
+
+06:20.000 --> 06:27.000
+Y también por el lado de programación
+tenemos que aprender a ser un poquito más flexibles con los temas de diseño
+
+06:27.000 --> 06:31.000
+porque también pasa que como programadores
+solo queremos que la cosa funcione
+
+06:31.000 --> 06:36.000
+y tener un código muy bonito y
+reutilizable y demás.
+
+06:36.000 --> 06:41.000
+Un código muy bonito y reutilizable.
+
+06:41.000 --> 06:43.000
+Ahí
+estamos.
+
+06:43.000 --> 06:49.000
+¡Samantha!
+
+06:49.000 --> 06:53.000
+¿No arqueasas tus
+datos?
+
+06:53.000 --> 06:56.000
+Creo que no voy a conectar con los datos
+de mi plan.
+
+06:56.000 --> 06:57.000
+¡Chan, chan,
+chan!
+
+06:57.000 --> 06:58.000
+Ok.
+
+06:58.000 --> 06:59.000
+Dame un
+segundo.
+
+06:59.000 --> 07:00.000
+Dale, dale,
+dale.
+
+07:00.000 --> 07:05.000
+Pero fíjense que justo lo que está
+diciendo Samantha es lo que también comenta Alejandro en el chat.
+
+07:05.000 --> 07:11.000
+O sea, al final de cuentas, por supuesto
+que es importante que los diseñadores aprendan un poco de programación
+
+07:11.000 --> 07:18.000
+y que los programadores aprendan un poco
+de diseño para evitar este tipo de request o de pedidos que son absurdos.
+
+07:18.000 --> 07:21.000
+O sea, a lo mejor desde el diseño uno diría,
+pero ¿por qué? Se ve bien.
+
+07:21.000 --> 07:23.000
+¿Por qué no lo vamos a implementar
+así?
+
+07:23.000 --> 07:28.000
+Pues porque no es posible y no es viable
+desde el punto de vista de programación.
+
+07:28.000 --> 07:32.000
+Y de pronto a lo mejor el programador está
+tratando de implementar algo
+
+07:32.000 --> 07:36.000
+o tiene ciertas herramientas que el
+diseñador podría estar aprovechando
+
+07:36.000 --> 07:40.000
+y no lo hace porque no sabe de diseño.
+
+07:40.000 --> 07:44.000
+Entonces es súper importante que de los
+dos lados tengan esto.
+
+07:44.000 --> 07:47.000
+Así como ahorita acabamos de lanzar el
+curso de diseño para programadores,
+
+07:47.000 --> 07:52.000
+también estamos planeando llevarlos por el
+camino completo.
+
+07:52.000 --> 07:58.000
+O sea, desde el brief hasta el diseño,
+que es cómo recibo del cliente una idea que él tiene
+
+07:58.000 --> 08:02.000
+y la convierto en un diseño y luego cómo
+doy el siguiente paso.
+
+08:02.000 --> 08:07.000
+O sea, cómo desde la programación puedo
+hacer la maquetación de ese diseño
+
+08:07.000 --> 08:12.000
+para que realmente ya tenga toda la parte
+interactiva de la programación.
+
+08:12.000 --> 08:14.000
+Entonces por ahí va un
+poquito.
+
+08:14.000 --> 08:18.000
+Aquí están
+comentando...
+
+08:18.000 --> 08:20.000
+Diseñadores que se sienten más creativos...
+
+08:20.000 --> 08:24.000
+Ah, pues mira, justo lo que está diciendo
+Elias es lo que estamos buscando solucionar.
+
+08:24.000 --> 08:28.000
+Cómo manejar a clientes que se sienten más
+diseñadores y creativos que uno mismo.
+
+08:28.000 --> 08:33.000
+Acuérdense que mucho del trabajo del
+diseñador, sean el tipo de diseñador que sean,
+
+08:33.000 --> 08:38.000
+así, o sea, de verdad, si son diseñadores
+editoriales o son de experiencia de usuario,
+
+08:38.000 --> 08:44.000
+el tipo de diseñador que sean, mucho de
+nuestro trabajo es ir a evangelizar a los clientes.
+
+08:44.000 --> 08:50.000
+Evitar el ponle más diseño, evitar el es
+que así no me gusta pero no sé por qué.
+
+08:50.000 --> 08:55.000
+Entonces, todo ese tipo de cosas, ahora sí
+que no deberían de ser parte de nuestro trabajo,
+
+08:55.000 --> 08:57.000
+pero todavía lo
+son.
+
+08:57.000 --> 09:02.000
+Entonces también, pues por eso como que
+hay que terminar sabiendo justificar.
+
+09:02.000 --> 09:04.000
+Y también alguien hace rato lo comentó,
+
+09:04.000 --> 09:09.000
+alguien decía que sentía que el diseño
+tenía que ver con ciertas normas
+
+09:09.000 --> 09:17.000
+y con ciertos lineamientos y que
+simplemente consideraba que él no manejaba esos lineamientos.
+
+09:17.000 --> 09:24.000
+Y por supuesto, o sea, por supuesto que el
+diseño también tiene, pues como que su lógica, ¿no?
+
+09:24.000 --> 09:27.000
+Y investigación que se ha hecho detrás,
+teorías, etc.
+
+09:27.000 --> 09:31.000
+Y eso es lo que uno tiene que saber
+manejar para poder hablar con los clientes
+
+09:31.000 --> 09:36.000
+y que no abusen de uno, ¿no? O sea, toda
+esa parte es súper importante.
+
+09:36.000 --> 09:41.000
+Aquí también dice José, es tan importante
+como ser front-end y saber un poco de back-end y viceversa.
+
+09:41.000 --> 09:43.000
+Por
+supuesto.
+
+09:43.000 --> 09:45.000
+Yo lo pienso siempre como lenguajes.
+
+09:45.000 --> 09:49.000
+Si no hablo el lenguaje de la otra persona
+que está en mi equipo,
+
+09:49.000 --> 09:52.000
+¿cómo se supone que me voy a comunicar con
+esa persona?
+
+09:52.000 --> 09:54.000
+Es
+ridículo.
+
+09:54.000 --> 09:59.000
+Y todos podemos jugar al, no, pues es que
+voy a saber traducir los términos, etc.
+
+09:59.000 --> 10:03.000
+Tal vez sí, pero no hay nada mejor que
+hablar el lenguaje de la otra persona.
+
+10:03.000 --> 10:05.000
+Eso siempre es súper
+importante.
+
+10:05.000 --> 10:09.000
+¿XD y Figma no te permiten proporcionar
+las medias de cada elemento?
+
+10:09.000 --> 10:10.000
+Sí, por supuesto que
+sí.
+
+10:10.000 --> 10:12.000
+XD no sé, la
+verdad.
+
+10:12.000 --> 10:20.000
+Pero Figma, por supuesto, ahí ya incluso
+tiene como los frames predeterminados para distintos elementos.
+
+10:20.000 --> 10:23.000
+Un curso de diseño de programador, ya lo
+estamos trabajando Diego.
+
+10:23.000 --> 10:26.000
+Lo grabamos en dos semanas, de hecho.
+
+10:26.000 --> 10:28.000
+Um, da da
+da.
+
+10:28.000 --> 10:30.000
+Samantha.
+
+10:30.000 --> 10:31.000
+Hola, ya
+volví.
+
+10:31.000 --> 10:32.000
+¡Hey! Ya me
+viste.
+
+10:32.000 --> 10:33.000
+¿Me escuchan
+mejor?
+
+10:33.000 --> 10:34.000
+Hola.
+
+10:34.000 --> 10:36.000
+Te
+escuchamos.
+
+10:36.000 --> 10:37.000
+Vale.
+
+10:37.000 --> 10:40.000
+Sí, creo que mi internet se puso dramático,
+lo siento mucho.
+
+10:40.000 --> 10:42.000
+No, no te
+preocupes.
+
+10:42.000 --> 10:45.000
+Um, ok, vamos a
+continuar.
+
+10:45.000 --> 10:48.000
+Pa pa pa,
+dice...
+
+10:48.000 --> 10:56.000
+Samantha, aquí te están agradeciendo y
+dicen que nos queda un camino largo para mejorar la comunicación entre diseñadores y programadores.
+
+10:56.000 --> 11:00.000
+Sí, y querer generar esos puentes es lo
+importante, ¿no?
+
+11:00.000 --> 11:02.000
+Sí, claro que
+sí.
+
+11:02.000 --> 11:08.000
+Y yo diría que algo muy importante es
+tener claros los objetivos de producto.
+
+11:08.000 --> 11:13.000
+Porque resulta que a veces decimos que el
+problema está en diseño o está en programación
+
+11:13.000 --> 11:17.000
+y resulta que los problemas están en las
+bases del producto que estamos creando.
+
+11:17.000 --> 11:20.000
+Entonces, a veces no tenemos objetivos claros.
+
+11:20.000 --> 11:27.000
+E incluso hablando con los clientes,
+los clientes no tienen claro qué es lo que quieren hacer.
+
+11:27.000 --> 11:37.000
+Entonces, antes de lanzarnos a diseñar o
+programar, es importante asesorarnos con personas que sepan de marketing o de contenido.
+
+11:37.000 --> 11:44.000
+Que son personas que tienen claras las
+narrativas y las dinámicas de las aplicaciones y de los productos web.
+
+11:44.000 --> 11:49.000
+Entonces, lo importante siempre son las bases.
+Es como si estuviéramos construyendo un edificio.
+
+11:49.000 --> 11:54.000
+Entonces, podemos tener el mejor equipo de
+diseño, el mejor equipo de desarrollo,
+
+11:54.000 --> 12:04.000
+pero si no tenemos claro cuáles son los
+objetivos o para qué queremos crear un producto digital, pues en algún momento va a fallar.
+
+12:04.000 --> 12:06.000
+Estoy completamente de
+acuerdo.
+
+12:06.000 --> 12:12.000
+Vamos rápidamente con unos cuantos
+disparos de preguntas más técnicas.
+
+12:12.000 --> 12:17.000
+La primera que están dejando por aquí es,
+quisiera colocar una imagen de fondo para todo el body.
+
+12:17.000 --> 12:22.000
+¿Es recomendable hacer eso o es mejor
+dividir la imagen de fondo por secciones?
+
+12:22.000 --> 12:33.000
+Yo preferiría dejarla dentro de un
+contenedor y utilizando hojas de estilo como Reset o Normalize,
+
+12:33.000 --> 12:37.000
+podemos quitarle los estilos que trae por
+default el body.
+
+12:37.000 --> 12:40.000
+¿Por qué me gusta hacerlo
+así?
+
+12:40.000 --> 12:46.000
+Porque en el momento en el que queramos
+utilizar un CMS o un manejador de contenido,
+
+12:46.000 --> 12:52.000
+es más fácil mostrar u ocultar una sección
+más que el mismo body.
+
+12:52.000 --> 13:00.000
+Ahora, otra cosa. Dependiendo qué tipo de
+imagen queremos utilizar, podemos utilizar esta solución.
+
+13:00.000 --> 13:09.000
+Porque yo honestamente prefiero para
+imágenes de fondo utilizar transiciones de CSS o gradientes
+
+13:09.000 --> 13:12.000
+o incluso imágenes pequeñitas que se repitan.
+
+13:12.000 --> 13:18.000
+Pero no recomendaría utilizar imágenes muy
+grandes porque esto va a afectar el performance de nuestra página.
+
+13:18.000 --> 13:24.000
+Ahora pensemos qué va a pasar cuando
+escalamos la página a un monitor súper grande.
+
+13:24.000 --> 13:28.000
+Esta imagen se va a estirar y en algún
+momento se va a ver pixelada.
+
+13:28.000 --> 13:36.000
+Entonces yo recomendaría tratar de
+utilizar colores planos y las imágenes dejarlas para cada una de las secciones.
+
+13:37.000 --> 13:40.000
+Ok, súper. Otra
+pregunta.
+
+13:42.000 --> 13:44.000
+Aquí había una de e-commerce. Dame un segundo.
+
+13:45.000 --> 13:50.000
+Ok, preguntan. ¿En e-commerce existe
+software que te da un mapa de calor
+
+13:50.000 --> 13:53.000
+y te dice cómo navegan tus usuarios en un
+sitio web?
+
+13:53.000 --> 13:58.000
+¿Cómo un diseñador utiliza esta
+información para aumentar la tasa de conversión?
+
+13:59.000 --> 14:00.000
+Esa está
+sencilla.
+
+14:02.000 --> 14:08.000
+Sí, bueno pues existe una metodología de
+pruebas que se llama A-B Testing.
+
+14:09.000 --> 14:12.000
+Entonces nosotros podemos utilizar
+diferentes herramientas.
+
+14:12.000 --> 14:19.000
+Creo que hay una herramienta de Google que
+se llama Optimize que nos permite probar distintos tipos de diseño.
+
+14:19.000 --> 14:25.000
+Entonces digamos que queremos tener un
+header con nuestros botones importantes color rojo
+
+14:25.000 --> 14:30.000
+y tenemos otra opción en la que el header
+es color, no sé, blanco.
+
+14:30.000 --> 14:36.000
+Entonces hay herramientas que nos permiten
+tener en vivo las dos opciones y configurar el porcentaje.
+
+14:37.000 --> 14:43.000
+Ya sea que se muestre el 50% de las veces
+un diseño y el 50% de las veces otro diseño.
+
+14:43.000 --> 14:50.000
+Y de esta manera y por medio de Analytics
+nosotros vamos a obtener respuestas de cuál es el diseño que mejor está funcionando.
+
+14:50.000 --> 14:55.000
+Entonces como diseñadores podemos utilizar
+estas herramientas para darnos cuenta
+
+14:55.000 --> 14:59.000
+de que tenemos problemas con el contraste
+de nuestra aplicación
+
+14:59.000 --> 15:03.000
+o que tal vez tenemos un título que no es
+lo suficientemente visible,
+
+15:03.000 --> 15:09.000
+que nuestro botón de comprar tal vez no
+está ubicado en la mejor posición de la página.
+
+15:09.000 --> 15:13.000
+Entonces yo recomendaría leer un poquito
+más sobre A-B Testing
+
+15:13.000 --> 15:17.000
+y utilizar todas las tasas de conversión
+que tenemos en Analytics
+
+15:17.000 --> 15:23.000
+para encontrar de pronto en qué estamos
+fallando o qué estamos haciendo bien.
+
+15:23.000 --> 15:25.000
+Sí, estoy completamente de
+acuerdo.
+
+15:25.000 --> 15:27.000
+Aquí va otro curso de
+Platzi.
+
+15:27.000 --> 15:33.000
+Obviamente tenemos clases específicas
+donde les enseñamos cómo leer mapas de calor
+
+15:33.000 --> 15:35.000
+y generar pruebas de A-B
+Testing.
+
+15:35.000 --> 15:38.000
+Es en el curso de User Research con Misael
+León.
+
+15:38.000 --> 15:43.000
+Misael estuvo, creo que todavía está en
+Wiseline y es un sujeto increíble.
+
+15:43.000 --> 15:46.000
+Les recomiendo que vayan a tomar su curso
+y que lo persigan en Twitter.
+
+15:46.000 --> 15:51.000
+Aquí hay una pregunta un poquito más como
+de historia de vida que creo que también es muy interesante.
+
+15:51.000 --> 15:54.000
+Preguntan cómo fue la
+transición.
+
+15:54.000 --> 15:59.000
+O sea, ibas por ahí siendo una diseñadora
+gráfica.
+
+15:59.000 --> 16:05.000
+¿Cómo empezó esta evolución y cuánto
+tiempo te demoraste en transformarte en una Frontend Developer?
+
+16:05.000 --> 16:10.000
+Actualmente, ¿tú te definirías a ti misma
+así o quién es Samantha?
+
+16:10.000 --> 16:13.000
+¿Dónde inició? ¿Cómo se fortaleció? ¿Quién
+es ahora?
+
+16:13.000 --> 16:16.000
+Bueno, entonces
+sí.
+
+16:16.000 --> 16:23.000
+Yo creo que en este momento mi rol en el
+ámbito laboral es más de Frontend Developer que de diseñadora.
+
+16:23.000 --> 16:29.000
+Y en cuanto a la historia, bueno, digamos
+que fue una transición casi sin darme cuenta.
+
+16:29.000 --> 16:32.000
+Yo estudié diseño
+gráfico.
+
+16:32.000 --> 16:36.000
+Yo entré a estudiar diseño gráfico en el 2007.
+
+16:36.000 --> 16:40.000
+Y en esa época el enfoque que tenía la
+carrera era un enfoque muy análogo.
+
+16:40.000 --> 16:46.000
+Entonces se enfocaba mucho en fotografía,
+en dibujo, en ilustración.
+
+16:46.000 --> 16:50.000
+Sí, era algo un poquito más
+manual.
+
+16:50.000 --> 16:54.000
+Y en ese momento, pues a mí honestamente
+no me interesaba nada de diseño web.
+
+16:54.000 --> 17:01.000
+Pero fue ya terminando la carrera que tuve
+una clase con una profesora que venía de estudiar UX en Alemania.
+
+17:01.000 --> 17:04.000
+Que nos empezó a enseñar todo este tema.
+
+17:04.000 --> 17:07.000
+Para mí era un tema completamente nuevo,
+no tenía ni idea.
+
+17:07.000 --> 17:10.000
+Pero entonces empecé a
+aprender.
+
+17:10.000 --> 17:15.000
+Y para esa clase empezamos a hacer
+prototipos y pruebas de usuarios sencillas.
+
+17:15.000 --> 17:20.000
+Y me di cuenta que podría ser más fácil
+hacerlas con HTML, con CSS.
+
+17:20.000 --> 17:25.000
+Y pues buscando en internet pues empecé a
+aprender, pero para hacer cosas muy básicas.
+
+17:25.000 --> 17:31.000
+En ese entonces también dentro de la
+universidad salió una oportunidad de trabajo.
+
+17:31.000 --> 17:35.000
+Necesitaban una monitora para hacer cursos
+virtuales.
+
+17:35.000 --> 17:43.000
+Y era un perfil híbrido en el que el rol
+decía diseño, pero las tareas de la vida cotidiana involucraban JavaScript.
+
+17:43.000 --> 17:48.000
+Y pues yo me involucré en ese trabajo sin
+saber absolutamente nada.
+
+17:48.000 --> 17:56.000
+Empecé a trabajar, a leer, a tratar de
+como ponerle lógica exacto sobrevivir.
+
+17:56.000 --> 17:58.000
+Y bueno, pues
+aprendí.
+
+17:58.000 --> 18:01.000
+Ya después de eso entonces me gradué.
+
+18:01.000 --> 18:04.000
+Conseguí otro trabajo como diseñadora.
+
+18:04.000 --> 18:12.000
+Y también pues se requerían cosas básicas
+como actualiza la tienda virtual, cambia esta imagen.
+
+18:12.000 --> 18:14.000
+Y empecé a hacer
+tutoriales.
+
+18:14.000 --> 18:20.000
+Y fue casi que sin darme cuenta que empecé
+a aprender un poquito de esto o un poquito de aquello.
+
+18:20.000 --> 18:29.000
+Y ya como cuatro o cinco años después de
+haberme graduado, tuve la oportunidad de trabajar en un proyecto de accesibilidad.
+
+18:29.000 --> 18:36.000
+Era un proyecto para una de las escuelas
+de formación técnica más grandes de acá de Colombia, se llama El CENA.
+
+18:36.000 --> 18:41.000
+Y ellos necesitaban hacer mejoras de
+accesibilidad en su página de admisiones.
+
+18:41.000 --> 18:46.000
+Entonces pues en ese entonces el equipo
+eran solo programadores y yo.
+
+18:46.000 --> 18:52.000
+Entonces inevitablemente las soluciones
+que ellos proponían todas eran con código.
+
+18:52.000 --> 18:56.000
+Y tuve que aprender para empezar a hablar
+el lenguaje de ellos, como decía Nadia.
+
+18:56.000 --> 18:57.000
+Claro.
+
+18:57.000 --> 19:03.000
+Y una amiga, que ella sí es ingeniera,
+me dijo, oye, pero tú deberías estudiar frontend.
+
+19:03.000 --> 19:05.000
+Y yo le dije, bien, pero ¿qué es
+eso?
+
+19:05.000 --> 19:07.000
+Y me dijo, no, pues creo que es lo que tú
+estás haciendo.
+
+19:07.000 --> 19:15.000
+Y ya efectivamente entré a revisar y ya en
+ese punto yo ya estaba editando JavaScript, CSS, HTML.
+
+19:15.000 --> 19:30.000
+Y pues me puse a aprender ya como para
+pulir detalles y conseguí mi primer trabajo como frontend casi que como tres años, cuatro años después de haber terminado la universidad y de haber trabajado en diseño.
+
+19:30.000 --> 19:40.000
+Empecé a trabajar como frontend junior,
+entonces pues eran tareas como de mantenimiento de proyectos, cosas muy pequeñas.
+
+19:40.000 --> 19:45.000
+Pero digamos que me sirvió para llenar
+todos los vacíos técnicos que tenía.
+
+19:45.000 --> 19:50.000
+Y ya bueno, llegando al día de hoy, porque
+es una historia muy larga.
+
+19:50.000 --> 19:54.000
+Hoy en día estoy trabajando en una empresa
+que se llama Hirsch.
+
+19:54.000 --> 20:00.000
+Y ellos lo que hacen es que tienen
+proyectos con Google.
+
+20:00.000 --> 20:03.000
+Yo tengo, yo soy como una figura de
+contractor con Google.
+
+20:03.000 --> 20:14.000
+Y nosotros diseñamos pues desde el diseño
+hasta la programación páginas como Android.com, diferentes productos que tiene Android como Enterprise.
+
+20:14.000 --> 20:20.000
+No sé, la página de Google Fit, hay un
+montón de productos de Google.
+
+20:20.000 --> 20:25.000
+Y lo interesante de este trabajo es que
+tenemos la oportunidad de trabajar desde cero.
+
+20:25.000 --> 20:34.000
+Entonces son proyectos cortos pero de alta
+complejidad que incluyen animaciones, videos, transiciones, etc.
+
+20:34.000 --> 20:41.000
+Entonces es bastante retador pero bastante
+interesante y siento que es el lugar en donde me reconcilié con el diseño.
+
+20:41.000 --> 20:47.000
+Porque siento que en alguna parte de mi
+carrera sí considere dejar del todo el diseño.
+
+20:47.000 --> 20:52.000
+Más que todo por las oportunidades
+laborales que había en ese momento acá en Colombia.
+
+20:52.000 --> 20:58.000
+Entonces pues acá ya me reconcilié con mi
+parte de diseñadora porque he podido aplicarlo.
+
+20:58.000 --> 21:04.000
+Y he encontrado que el perfil diseño más
+frontend es súper, súper valorado en la industria.
+
+21:04.000 --> 21:06.000
+Estoy de
+acuerdo.
+
+21:06.000 --> 21:13.000
+Ok. Fíjate que justo aquí Eric está, bueno,
+comentando, termina en pregunta.
+
+21:13.000 --> 21:18.000
+Dice que tiene un poco el mismo camino que tú,
+empezó en diseño gráfico, se enfocó en multimedia,
+
+21:18.000 --> 21:23.000
+empezó en frontend y que ahora está
+estudiando React y cosas así.
+
+21:23.000 --> 21:27.000
+Pero que últimamente le interesa mucho la
+parte de user experience.
+
+21:27.000 --> 21:33.000
+Empezó tanto en la escuela de Product
+Design como en la escuela de JavaScript, suerte con eso.
+
+21:33.000 --> 21:36.000
+Y dice que le parece un poco abrumador UX.
+
+21:36.000 --> 21:43.000
+Y por supuesto, implica temas de psicología,
+de sociología, de comportamiento, de mercadotecnia.
+
+21:43.000 --> 21:45.000
+Sí, UX es algo
+abrumador.
+
+21:45.000 --> 21:52.000
+Está preguntando si tenemos algún consejo
+para poder seguir en el camino del UX sin morir en el intento.
+
+21:52.000 --> 21:56.000
+¿Tú qué le recomendarías,
+Sam?
+
+21:56.000 --> 22:01.000
+Bueno, yo creo que yo te daría un consejo
+no solamente para el camino del UX,
+
+22:01.000 --> 22:06.000
+sino también para toda el área digital,
+toda el área web.
+
+22:06.000 --> 22:10.000
+Y es tratar de enfrentar un solo paso a la
+vez.
+
+22:10.000 --> 22:16.000
+Entonces pasa tanto en UX como en
+programación que todos los días sale una tendencia nueva.
+
+22:16.000 --> 22:23.000
+Entonces, no sé, estamos aprendiendo React
+y al otro día sale, no sé, digamos que estamos aprendiendo Node
+
+22:23.000 --> 22:30.000
+y al otro día sale Dino o salen nuevas
+tecnologías y no sabemos por dónde empezar.
+
+22:30.000 --> 22:35.000
+Nos sentimos frustrados, sentimos que ya
+no estamos al día con lo que es trending.
+
+22:35.000 --> 22:37.000
+Y en UX pasa lo
+mismo.
+
+22:37.000 --> 22:46.000
+Entonces, resulta que cuando el UX se
+empezó a concebir, eso no fue algo de 2010 ni de 2015.
+
+22:46.000 --> 22:52.000
+Incluso desde los 80s y 90s había personas
+que estaban estudiando todo este tema del UX Research.
+
+22:52.000 --> 22:58.000
+Entonces, yo lo que recomendaría es
+empezar por esos libros o por ese material clásico al respecto
+
+22:58.000 --> 23:02.000
+para poder tener unas bases fuertes en los
+conceptos iniciales.
+
+23:02.000 --> 23:10.000
+Entonces, hay un libro que se llama The
+User Experience Design.
+
+23:10.000 --> 23:14.000
+Déjame yo busco. ¿De Donald Norman creo
+que es? No estoy segura.
+
+23:14.000 --> 23:20.000
+Sí, es como la Biblia. Es como el valor de
+matemáticas para UX.
+
+23:20.000 --> 23:28.000
+Exacto. Y ese libro es un libro clásico.
+No es algo que se hayan inventado hace poco.
+
+23:28.000 --> 23:34.000
+Entonces, mi recomendación es siempre
+trata de buscar recursos que ya tengan cierta antigüedad
+
+23:34.000 --> 23:37.000
+para no dejarte llevar por las tendencias.
+
+23:37.000 --> 23:41.000
+Porque pasa mucho que hoy en día queremos
+todos tener un blog,
+
+23:41.000 --> 23:44.000
+todos queremos ser tendencia, no sé,
+en redes sociales y demás.
+
+23:44.000 --> 23:51.000
+Y entonces, todos los días sale algo nuevo
+en cuanto a las empresas que marcan la tendencia.
+
+23:51.000 --> 23:57.000
+Siempre están probando cosas, pero no
+siempre son cosas que van a tener resultados exitosos.
+
+23:57.000 --> 24:02.000
+Pero sí abruman a las personas que están
+empezando y que hasta ahora están dando sus primeros pasos.
+
+24:02.000 --> 24:05.000
+Entonces, mi recomendación es ir siempre a
+lo clásico,
+
+24:05.000 --> 24:11.000
+tratar de buscar cursos que sinteticen los
+conceptos necesarios
+
+24:11.000 --> 24:16.000
+y luego dar el siguiente paso antes de
+llenarnos de información y saturarnos
+
+24:16.000 --> 24:20.000
+y sentirnos frustrados, que es lo que pasa
+con el mundo digital.
+
+24:21.000 --> 24:23.000
+Estoy completamente de
+acuerdo.
+
+24:25.000 --> 24:29.000
+¿Me ayudas a escribirles título y autor,
+por favor, en el chat?
+
+24:29.000 --> 24:32.000
+En lo que vamos leyendo
+otra.
+
+24:32.000 --> 24:34.000
+Acá también te están preguntando, Samantha,
+
+24:34.000 --> 24:40.000
+si tú consideras que es buena idea
+comenzar por diseñar la interfaz de toda la solución
+
+24:40.000 --> 24:43.000
+antes de comenzar a hacer el código.
+
+24:48.000 --> 24:51.000
+Sí, a mí me parece que es importante.
+
+24:51.000 --> 24:55.000
+De pronto no hacer el diseño hasta el
+último detalle,
+
+24:55.000 --> 25:01.000
+pero me parece importante tener claros los
+flujos, los user flows,
+
+25:01.000 --> 25:08.000
+o así sea, un diagrama en donde podamos
+ver todos los elementos o los componentes de nuestra aplicación.
+
+25:08.000 --> 25:12.000
+Porque generalmente lo que pasa y lo que
+me pasaba a mí cuando aprendí a programar
+
+25:12.000 --> 25:15.000
+es que yo lo primero que hacía antes de
+pensar la solución
+
+25:15.000 --> 25:18.000
+era abrir el editor de código y empezar a
+escribir código.
+
+25:18.000 --> 25:22.000
+Entonces luego me daba cuenta que cuando
+iba a medio camino de la solución
+
+25:22.000 --> 25:26.000
+había un escenario que no había
+considerado y tenía que echar para atrás
+
+25:26.000 --> 25:28.000
+gran parte del trabajo que había hecho.
+
+25:28.000 --> 25:33.000
+Entonces yo considero que sentarse con un
+lápiz y un papel a hacer diagramas
+
+25:33.000 --> 25:37.000
+y a pensar en la solución antes de empezar
+a hacer el código
+
+25:37.000 --> 25:39.000
+siempre es muy
+importante.
+
+25:39.000 --> 25:42.000
+Digamos que si nosotros tenemos claros los
+wireframes,
+
+25:42.000 --> 25:46.000
+podemos empezar a programar desde ahí y
+luego podemos empezar a añadir capas
+
+25:46.000 --> 25:49.000
+de complejidad y de
+diseño.
+
+25:49.000 --> 25:54.000
+Pero sí es necesario tener claro cuál es
+como el mapa y la ruta a seguir.
+
+25:54.000 --> 25:59.000
+Y esto no es solamente para diseño, sino
+para programar cuando tenemos que hacer una función.
+
+25:59.000 --> 26:04.000
+Siempre hay que sentarnos antes a
+organizar qué es lo que tenemos pensado hacer.
+
+26:04.000 --> 26:09.000
+Porque si no vamos a perder mucho tiempo
+escribiendo líneas de código
+
+26:09.000 --> 26:13.000
+que finalmente no nos van a servir o no
+van a ser escalables
+
+26:13.000 --> 26:16.000
+o no van a ser reutilizables,
+etc.
+
+26:16.000 --> 26:18.000
+Completamente de
+acuerdo.
+
+26:18.000 --> 26:21.000
+Vamos con otra pregunta abierta al público.
+
+26:21.000 --> 26:24.000
+Nicolás tiene desde hace rato su manita
+levantada.
+
+26:24.000 --> 26:28.000
+Entonces, Nicolás, adelante. Pregúntanos
+tu pregunta.
+
+26:28.000 --> 26:33.000
+¿Qué tal que Nicolás ya se
+fue?
+
+26:35.000 --> 26:38.000
+Vamos a darle unos segundos
+más.
+
+26:44.000 --> 26:46.000
+No, creo que Nicolás ya no
+está.
+
+26:46.000 --> 26:50.000
+Bueno, ya está habilitado tu micrófono,
+Nicolás, por si regresas.
+
+26:50.000 --> 26:57.000
+Que si podemos repetir el libro y el autor,
+por favor.
+
+26:57.000 --> 27:02.000
+El autor es Donald A. Norman y el libro se
+llama así como User Experience.
+
+27:02.000 --> 27:06.000
+Punto. Tiene una palabra ahí adicional,
+¿no?
+
+27:08.000 --> 27:12.000
+Sí, es que no recuerdo si es como de
+fundamental.
+
+27:12.000 --> 27:18.000
+Ajá, busquen mejor Donald Norman User
+Experience y ahí va a salir.
+
+27:18.000 --> 27:24.000
+No es un libro reciente, como dice Samantha,
+pero pues es el libro.
+
+27:24.000 --> 27:28.000
+Por acá te están preguntando... Ah, mira,
+Gabriel Quevedo.
+
+27:28.000 --> 27:30.000
+Cuéntanos,
+Gabriel.
+
+27:32.000 --> 27:34.000
+¿Se escucha?
+¿Aló?
+
+27:34.000 --> 27:35.000
+Sí,
+hola.
+
+27:35.000 --> 27:38.000
+Ah, hola. Sí, una
+consulta.
+
+27:38.000 --> 27:45.000
+Para poder hacer interfaces, yo conozco
+que está Adobe XD,
+
+27:45.000 --> 27:50.000
+que se puede hacer un poco interfaces un
+poco dinámicas de transiciones y cosas.
+
+27:50.000 --> 27:55.000
+¿Hay alguna aplicación parecida o que me
+puedas recomendar para poder
+
+27:55.000 --> 28:00.000
+tener un poco un acercamiento a la parte
+de diseño interactiva?
+
+28:00.000 --> 28:03.000
+Que no sea... O sea, supongo que Adobe XD
+es bueno.
+
+28:03.000 --> 28:05.000
+Lo usó un poco y me
+parece...
+
+28:05.000 --> 28:06.000
+¿Sketch?
+
+28:06.000 --> 28:09.000
+Sí, claro, es que sé que está Sketch un poco.
+
+28:09.000 --> 28:13.000
+No me metí a mucho Sketch, pero como hay
+alguna otra herramienta
+
+28:13.000 --> 28:17.000
+que yo pudiera como complementar para
+poder tener ese acercamiento.
+
+28:17.000 --> 28:20.000
+Eso,
+gracias.
+
+28:20.000 --> 28:24.000
+Sí, yo también recomendaría bastante Figma
+y Sketch.
+
+28:24.000 --> 28:29.000
+Lo chévere de Sketch es que tiene ciertos
+patrones de componentes
+
+28:29.000 --> 28:33.000
+que podemos arrastrar y poner dentro de
+nuestra interfaz.
+
+28:33.000 --> 28:36.000
+Entonces no tenemos que dedicarle mucho
+tiempo, por ejemplo,
+
+28:36.000 --> 28:41.000
+a crear un drop down o un formulario o un
+botón.
+
+28:41.000 --> 28:43.000
+Entonces es muy chévere para hacer prototipos,
+
+28:43.000 --> 28:49.000
+para organizar la información y nos
+permite trabajar de una manera muy rápida.
+
+28:49.000 --> 28:52.000
+Y creo que se puede integrar con Figma
+también a la hora que queramos
+
+28:52.000 --> 28:57.000
+trabajar de manera colaborativa con otras
+personas o compartir esos prototipos
+
+28:57.000 --> 29:02.000
+con un cliente o con un programador o lo
+que sea.
+
+29:02.000 --> 29:04.000
+Sí, estoy completamente de
+acuerdo.
+
+29:04.000 --> 29:08.000
+Y además Figma ahorita está, de verdad,
+está avanzando a pasos agigantados.
+
+29:08.000 --> 29:12.000
+Obviamente todavía tiene cositas que le
+falta mejorar o integrar,
+
+29:12.000 --> 29:17.000
+pero desde el simple hecho de estar
+pensando ya en open source y comunidad,
+
+29:17.000 --> 29:22.000
+creo que nos va a ayudar a eficientar
+muchísimo los procesos.
+
+29:22.000 --> 29:27.000
+El otro día hubo hate, comenté en el
+Platzi Live que no trataran de inventar
+
+29:27.000 --> 29:32.000
+la rueda otra vez y que mejor buscaran
+innovar en donde se podía,
+
+29:32.000 --> 29:34.000
+en los momentos
+correctos.
+
+29:34.000 --> 29:36.000
+Y tiene un poco que ver con
+esto.
+
+29:36.000 --> 29:42.000
+Si ya sabemos que haciendo scroll a la
+derecha o a la izquierda
+
+29:42.000 --> 29:46.000
+estamos esperando ir a otro frame, no
+quieran cambiar eso y decir,
+
+29:46.000 --> 29:49.000
+ah, no, en mi interfaz la navegación va a
+ser en diagonal.
+
+29:49.000 --> 29:55.000
+O sea, sí es innovador, pero la gente ya
+está acostumbrada a ciertos patrones.
+
+29:55.000 --> 30:02.000
+Entonces, otra vez, teniendo esta opción
+en Figma de poder ver
+
+30:02.000 --> 30:07.000
+qué están haciendo otras personas, es más
+fácil unirse a,
+
+30:07.000 --> 30:10.000
+no lo vean como tendencias, sino como
+patrones de uso,
+
+30:10.000 --> 30:12.000
+de cómo se está
+usando.
+
+30:12.000 --> 30:14.000
+Edwin dice que ahí viene el curso de Figma.
+
+30:14.000 --> 30:18.000
+Sí, llega el 20 de julio a todas sus
+suscripciones.
+
+30:18.000 --> 30:23.000
+Por acá también nos están preguntando,
+ya veía un par de veces en el chat
+
+30:23.000 --> 30:25.000
+que hablan de
+bootstrap.
+
+30:25.000 --> 30:27.000
+La última vez es
+Alejandro.
+
+30:27.000 --> 30:30.000
+Alejandro dice, ¿qué opinas, Samantha,
+de utilizar librerías responsive
+
+30:30.000 --> 30:34.000
+como Bootstrap o Materialize Foundation
+para asistir?
+
+30:36.000 --> 30:39.000
+Bueno, a mí me parece que esto viene un
+poco a la conversación
+
+30:39.000 --> 30:41.000
+con lo de no reinventar la
+rueda.
+
+30:41.000 --> 30:44.000
+Me parece que son librerías muy útiles,
+
+30:44.000 --> 30:49.000
+pero también tenemos que tener cuidado de
+saberlas usar en el proyecto
+
+30:49.000 --> 30:54.000
+en el que podemos explotar sus beneficios.
+
+30:54.000 --> 30:57.000
+Entonces, digamos que si tenemos un
+proyecto pequeño
+
+30:57.000 --> 31:00.000
+en el que el diseño es más bien
+estándar
+
+31:00.000 --> 31:03.000
+y no tenemos un nivel alto de complejidad,
+
+31:03.000 --> 31:08.000
+o es un proyecto que no necesitamos que
+viva durante los próximos 10 años,
+
+31:08.000 --> 31:11.000
+me parece válido utilizar estas
+librerías
+
+31:11.000 --> 31:13.000
+porque nos van a ahorrar
+tiempo
+
+31:13.000 --> 31:17.000
+y ya tienen un montón de interacciones
+hechas y de funcionalidades.
+
+31:17.000 --> 31:20.000
+Entonces, en esos casos me parece que es
+válido.
+
+31:20.000 --> 31:24.000
+Sin embargo, si estamos pensando en un
+proyecto que requiere ya
+
+31:24.000 --> 31:29.000
+una mayor escala, que sabemos que va a
+estar en vivo durante más tiempo,
+
+31:29.000 --> 31:34.000
+que requiere mantenimiento, yo
+recomendaría crear componentes propios
+
+31:34.000 --> 31:38.000
+y es porque a veces pasa que estas
+librerías son tendencia o furor por un tiempo,
+
+31:38.000 --> 31:42.000
+pero luego la persona que la subió a GitHub,
+no sé,
+
+31:42.000 --> 31:47.000
+ya se cansó de ser programador y entonces
+quedó abandonada la librería
+
+31:47.000 --> 31:51.000
+y empiezan a traer actualizaciones, por
+ejemplo, en el caso de nosotros,
+
+31:51.000 --> 31:57.000
+de Node, actualizaciones de NPM, bueno,
+de las herramientas que estamos utilizando
+
+31:57.000 --> 32:00.000
+y estas librerías pierden compatibilidad.
+
+32:00.000 --> 32:04.000
+Entonces, a mí me parece que son muy útiles,
+pero hay que usarlas con cuidado
+
+32:04.000 --> 32:07.000
+y también otro punto que tenemos que tener
+en cuenta es
+
+32:07.000 --> 32:12.000
+que debemos utilizarlas cuando no
+necesitemos personalizarlas tanto,
+
+32:12.000 --> 32:16.000
+porque a veces pasa que incluimos una
+librería que ya trae sus componentes,
+
+32:16.000 --> 32:21.000
+nuestro diseño es como un diseño
+completamente opuesto a esa librería
+
+32:21.000 --> 32:25.000
+y resulta que terminamos haciendo cosas
+horribles en código
+
+32:25.000 --> 32:29.000
+para lograr sobreescribir esos diseños en
+estilos estándar.
+
+32:29.000 --> 32:34.000
+Entonces, es como que ya, no sé, un botón
+trae su estilo y su funcionalidad,
+
+32:34.000 --> 32:38.000
+pero necesito que la animación cuando le
+hago clic sea distinta
+
+32:38.000 --> 32:43.000
+y el color sea distinto, entonces tengo
+que escribirle un importante en el CSS
+
+32:43.000 --> 32:47.000
+para empezar a hacer cosas que no van de
+la mano con los coding estándar,
+
+32:47.000 --> 32:49.000
+sí, con el clean
+code.
+
+32:49.000 --> 32:53.000
+Entonces, pues es importante saber cuándo
+utilizarlas,
+
+32:53.000 --> 32:57.000
+pero pues sí, yo creería que está bien,
+simplemente es analizar
+
+32:57.000 --> 33:00.000
+cuáles son los requerimientos de nuestro
+proyecto
+
+33:00.000 --> 33:05.000
+a la hora de decir qué librería vamos a
+usar o si vamos a usar una librería.
+
+33:05.000 --> 33:07.000
+Totalmente de
+acuerdo.
+
+33:07.000 --> 33:12.000
+Una pregunta rápida aquí, me gustaría
+platicar un poquito al respecto.
+
+33:12.000 --> 33:19.000
+Hola, y Daniel preguntan si es lo mismo un
+frontend developer y un frontend designer.
+
+33:19.000 --> 33:24.000
+¿Has escuchado el término de frontend
+designer? ¿Qué diferencia hay?
+
+33:25.000 --> 33:29.000
+Sí, no sé, yo también me pregunto lo mismo.
+
+33:29.000 --> 33:33.000
+Siento que hay mucha confusión con el rol,
+así como hay mucha confusión
+
+33:33.000 --> 33:36.000
+con el término UI y el término
+UX.
+
+33:36.000 --> 33:40.000
+Muchas veces vemos estas ofertas laborales
+que dice como
+
+33:40.000 --> 33:43.000
+se necesita, no sé, full stack developer,
+
+33:43.000 --> 33:47.000
+y luego en la descripción del cargo debe
+saber diseñar y hacer pruebas de usabilidad,
+
+33:47.000 --> 33:50.000
+y es como prestarles un
+servicio.
+
+33:50.000 --> 33:51.000
+Sí.
+
+33:51.000 --> 33:57.000
+Entonces, yo siento que para mí un
+frontend designer y frontend developer son lo mismo,
+
+33:57.000 --> 34:00.000
+porque si uno mira la descripción del
+cargo de frontend designer
+
+34:00.000 --> 34:07.000
+es como programar utilizando JavaScript y
+hacer markup utilizando HTML y CSS.
+
+34:07.000 --> 34:11.000
+Entonces, siento que es como más una
+confusión del término,
+
+34:11.000 --> 34:15.000
+porque si vamos a hablar ya de diseño de
+interfaces web,
+
+34:15.000 --> 34:19.000
+tenemos por un lado el diseñador UX y por
+otro lado el diseñador UI.
+
+34:21.000 --> 34:25.000
+Entonces, siento que de pronto puede ser
+una confusión de roles.
+
+34:27.000 --> 34:31.000
+Creo que aquí me gustaría contarles un
+poquito de lo que hemos vivido desde Platzi.
+
+34:31.000 --> 34:37.000
+La verdad es que el diseño es algo que
+está evolucionando mucho y muy rápido en los últimos años
+
+34:37.000 --> 34:41.000
+en cuanto a que se está replanteando y
+revalorizando,
+
+34:41.000 --> 34:45.000
+bueno, se le está, no puedo decir la palabra,
+dando mayor valor,
+
+34:45.000 --> 34:50.000
+se le está dando más valor al trabajo que
+hacen los diseñadores, y eso está bien.
+
+34:50.000 --> 34:55.000
+Eso viene desde el fundador de Aireo,
+el señor Kelly,
+
+34:55.000 --> 34:58.000
+que de hecho él es el que acuñó el término
+de Design Thinking,
+
+34:58.000 --> 35:02.000
+y él fue el que empezó a decir, por ejemplo,
+llegó con Apple y dijo,
+
+35:02.000 --> 35:06.000
+su idea está increíble, pero la manera de
+utilizarla no está funcionando,
+
+35:06.000 --> 35:08.000
+y eso lo podemos arreglar desde diseño.
+
+35:08.000 --> 35:12.000
+Entonces, desde ahí como que empezó a
+meter más las manos en la parte de negocio,
+
+35:12.000 --> 35:16.000
+en la parte de cómo se va a ver al final
+el producto.
+
+35:16.000 --> 35:19.000
+Se empezó a entender que el diseñador ya
+no es nada más esta persona
+
+35:19.000 --> 35:21.000
+que hace que la cosa se vea
+bonita.
+
+35:22.000 --> 35:26.000
+El problema de esto, o sea, imagínense que
+esto les estoy platicando que es principios de los 80,
+
+35:26.000 --> 35:30.000
+puede parecer que fue hace mucho tiempo,
+pero fue hace apenas 40 años,
+
+35:30.000 --> 35:33.000
+ya no debería de ser tanto tiempo, pero
+así es.
+
+35:34.000 --> 35:39.000
+Entonces, lo que está ocurriendo es que
+casi cada empresa pone el nombre
+
+35:39.000 --> 35:43.000
+que se le ocurre y que cree que es como el
+más adecuado para explicar
+
+35:43.000 --> 35:46.000
+la vacante que está tratando de cubrir.
+
+35:46.000 --> 35:51.000
+Todavía no hay esta estandarización tan
+marcada de qué es cada cosa.
+
+35:51.000 --> 35:55.000
+Y la llevamos de Gani, o sea, ya está muy
+claro que es un diseñador
+
+35:55.000 --> 35:59.000
+UX nada más, o que es un diseñador UI.
+
+35:59.000 --> 36:03.000
+El problema es que tú entras a LinkedIn y
+todas las vacantes dicen diseñador UX, UI.
+
+36:04.000 --> 36:07.000
+Incluso para escoger el nombre de la
+escuela de Product Design fue un problema,
+
+36:07.000 --> 36:12.000
+porque había gente que decía, pongámosle
+diseño de producto.
+
+36:12.000 --> 36:14.000
+No, porque el diseño de producto solo es
+diseño de producto.
+
+36:14.000 --> 36:19.000
+Nosotros les queremos enseñar diseño de
+sistemas, diseño de estrategias,
+
+36:19.000 --> 36:21.000
+diseño de
+interfaces.
+
+36:21.000 --> 36:26.000
+Todas esas cosas no es nada más lo que uno
+entiende en castellano por producto.
+
+36:26.000 --> 36:30.000
+Y al final de cuentas, Product Design es
+un término acuñado por Facebook.
+
+36:30.000 --> 36:33.000
+Y ellos son los que dijeron, esto se va a
+llamar así,
+
+36:33.000 --> 36:35.000
+¿y qué pasa? Que la industria le está
+llamando así.
+
+36:35.000 --> 36:38.000
+Pasa lo mismo con todas estas cosas.
+
+36:38.000 --> 36:43.000
+Y ustedes van a ver un montón de hate de, no,
+pues es que nada más son diseñadores y ya.
+
+36:43.000 --> 36:45.000
+Se están poniendo nombres fancies para
+cobrar más.
+
+36:45.000 --> 36:50.000
+Al contrario, pónganse a pensar, si uno ve
+una vacante de front-end developer,
+
+36:50.000 --> 36:55.000
+seguramente es muy fácil ir a revisar en
+el mercado,
+
+36:55.000 --> 36:57.000
+entre en la, ¿cómo se llama esta? Clear Glass.
+
+36:57.000 --> 37:00.000
+¿Alguien se acuerda? Una de
+Glass.
+
+37:00.000 --> 37:02.000
+Bueno, hay páginas que no son LinkedIn,
+
+37:02.000 --> 37:06.000
+donde es muy fácil ver en cuánto está más
+o menos en el mercado esa posición.
+
+37:06.000 --> 37:08.000
+Front-end, Glassdoor,
+gracias.
+
+37:08.000 --> 37:10.000
+Front-end developer, por supuesto que está
+ahí.
+
+37:10.000 --> 37:13.000
+Pero front-end designer seguramente no.
+
+37:13.000 --> 37:17.000
+Entonces, si yo le pido a alguien, ah,
+si eres front-end designer,
+
+37:17.000 --> 37:22.000
+te puedo cobrar, te puedo pagar como algo
+que a lo mejor todavía no está tan bien establecido,
+
+37:22.000 --> 37:26.000
+cuando en realidad te tendría que estar
+pagando como un front-end developer.
+
+37:26.000 --> 37:31.000
+Entonces, también es, otra vez, así como
+les decía que es importante que empecemos a educar al cliente,
+
+37:31.000 --> 37:34.000
+también es súper importante empezar a
+educar al empleador.
+
+37:34.000 --> 37:38.000
+Empezar a decir, llamémosle a las cosas
+por su nombre, pongámonos de acuerdo en un nombre.
+
+37:38.000 --> 37:42.000
+Entonces, creo que este tipo de preguntas
+reflejan mucho eso.
+
+37:42.000 --> 37:47.000
+¿No? Eh, ta, ta, ta, ta, ta, ta, ta, ta.
+
+37:47.000 --> 37:49.000
+Ok, vamos a empezar a
+cerrar.
+
+37:49.000 --> 37:54.000
+Preguntan, ¿qué tan importante es aprender
+JavaScript para ser front-end?
+
+37:55.000 --> 37:58.000
+Eh, bueno, yo diría que muy importante.
+
+37:58.000 --> 37:59.000
+Sí.
+
+37:59.000 --> 38:04.000
+Hoy en día tenemos que ver cuáles son los
+principales dispositivos
+
+38:04.000 --> 38:07.000
+desde los cuales las personas están
+consumiendo información.
+
+38:07.000 --> 38:15.000
+Y pues, no es, o sea, es indudable que los
+usuarios están utilizando Chrome, Safari, Firefox.
+
+38:15.000 --> 38:21.000
+Entonces, necesitamos aprender un lenguaje
+de programación que sea interpretado por el navegador.
+
+38:21.000 --> 38:27.000
+En este caso, yo diría que el lenguaje de
+programación más popular para hacer páginas web es JavaScript.
+
+38:27.000 --> 38:30.000
+Entonces, me parece que es muy importante.
+
+38:30.000 --> 38:33.000
+Hay muchos defensores y atractores de
+JavaScript,
+
+38:33.000 --> 38:38.000
+pero siento que es un lenguaje de
+programación que se ha mantenido bastante en el tiempo.
+
+38:38.000 --> 38:43.000
+Y nos permite trabajar ya sea en cosas de
+menor complejidad,
+
+38:43.000 --> 38:48.000
+hasta crear animaciones, crear videojuegos.
+
+38:48.000 --> 38:50.000
+Hay un montón de cosas que podemos hacer.
+
+38:50.000 --> 38:53.000
+Entonces, siento que es una herramienta
+muy flexible.
+
+38:53.000 --> 38:57.000
+Y yo diría que sí, es totalmente
+fundamental saber JavaScript para,
+
+38:57.000 --> 39:02.000
+pues por lo menos si uno se quiere
+posicionar en el mercado como un front-end developer.
+
+39:02.000 --> 39:04.000
+Es súper
+importante.
+
+39:04.000 --> 39:05.000
+Totalmente de
+acuerdo.
+
+39:05.000 --> 39:09.000
+Quiero terminar con una que ya vi por ahí
+un par de veces.
+
+39:09.000 --> 39:15.000
+Y me gustaría saber, porque dentro de la
+estructura de cursos que estamos planteando,
+
+39:15.000 --> 39:18.000
+nosotros ya definimos cuál es nuestra
+apuesta como Platzi.
+
+39:18.000 --> 39:23.000
+La pregunta es, ¿empezar mobile first o
+empezar desde web?
+
+39:23.000 --> 39:28.000
+¿Qué opinas? ¿Crees que la navegación en
+web va hacia abajo?
+
+39:28.000 --> 39:30.000
+¿Crees que ya estamos navegando más a
+través de mobile?
+
+39:30.000 --> 39:33.000
+¿Y a partir de dónde deberíamos empezar a
+diseñar?
+
+39:35.000 --> 39:41.000
+No, a mí me parece que es muy importante
+trabajar tanto en mobile como en desktop.
+
+39:41.000 --> 39:45.000
+Personalmente yo prefiero siempre empezar
+a trabajar desde mobile.
+
+39:45.000 --> 39:51.000
+Porque resulta que en mobile la mayoría de
+personas está consultando desde sus datos.
+
+39:51.000 --> 39:55.000
+Puede que haya lugares en donde todas las
+personas tengan plan de datos ilimitados.
+
+39:55.000 --> 39:59.000
+Hay otros lugares en donde el acceso a
+datos es un poquito más complicado.
+
+39:59.000 --> 40:04.000
+Entonces tenemos que pensar siempre de lo
+más sencillo hasta lo más complejo.
+
+40:04.000 --> 40:07.000
+En este caso siento que lo más sencillo es
+mobile.
+
+40:07.000 --> 40:12.000
+Entonces podemos empezar con una versión
+light de nuestro diseño o de nuestro desarrollo.
+
+40:12.000 --> 40:14.000
+Y empezar a añadirle capas de complejidad.
+
+40:14.000 --> 40:23.000
+Y ya tener una experiencia un poquito más
+enriquecida en nuestra versión desktop.
+
+40:23.000 --> 40:27.000
+La otra pregunta, yo no creo que la
+versión desktop vaya a morir.
+
+40:27.000 --> 40:32.000
+Es cuestión de entender cuáles son los
+patrones de consumo de nuestros usuarios.
+
+40:32.000 --> 40:40.000
+Entonces por ejemplo, hay páginas que
+están enfocadas en juegos o enfocadas a la prensa.
+
+40:40.000 --> 40:44.000
+Entonces es importante pensar quiénes son
+nuestros usuarios finales.
+
+40:44.000 --> 40:49.000
+Y de esa manera vamos a saber si hay más
+tendencia a consultar desde el celular.
+
+40:49.000 --> 40:52.000
+O más tendencia a consultar desde desktop.
+
+40:52.000 --> 40:58.000
+Entonces recuerdo mucho un producto en el
+que nosotros trabajamos de Google que es Android Auto.
+
+40:58.000 --> 41:03.000
+Y ese producto tenía un gran problema y es
+que la página era muy pesada.
+
+41:03.000 --> 41:06.000
+Y la mayoría de los usuarios la
+consultaban desde el teléfono.
+
+41:06.000 --> 41:13.000
+Porque Android Auto es como una aplicación
+que te sirve para integrar mapas con música.
+
+41:13.000 --> 41:16.000
+Y las funcionalidades que puedes utilizar
+en tu carro.
+
+41:16.000 --> 41:19.000
+Entonces siendo una aplicación que tú
+siempre vas a usar en tu carro.
+
+41:19.000 --> 41:25.000
+La mayoría de personas buscaba
+instrucciones de cómo funcionaba o de cómo podía configurarlo desde el carro.
+
+41:25.000 --> 41:29.000
+Entonces esa página se pensó para una
+experiencia desktop.
+
+41:29.000 --> 41:35.000
+Y era un fail total para las personas que
+estaban tratando de consultarla desde el móvil.
+
+41:35.000 --> 41:39.000
+Entonces yo diría que todos los
+dispositivos son igual de importantes.
+
+41:39.000 --> 41:43.000
+La cuestión es saber cuál es más
+importante para nuestro producto.
+
+41:43.000 --> 41:45.000
+Totalmente de
+acuerdo.
+
+41:45.000 --> 41:47.000
+Samantha, vamos a
+cerrar.
+
+41:47.000 --> 41:51.000
+Me gustaría que les platiques sobre el
+reto del curso.
+
+41:51.000 --> 41:54.000
+Y también me gustaría que intentemos
+iniciar el video.
+
+41:54.000 --> 41:57.000
+Creo que ya llevamos rato sin que haya
+problemas de audio.
+
+41:57.000 --> 42:00.000
+Entonces vamos a hacer un
+intento.
+
+42:00.000 --> 42:03.000
+Si fallamos, pues fallamos y
+ya.
+
+42:03.000 --> 42:06.000
+¿Dónde estás?
+Espérame.
+
+42:06.000 --> 42:09.000
+Es que quedaste oculta debajo de todo.
+
+42:09.000 --> 42:11.000
+Ya, ya estamos
+aquí.
+
+42:11.000 --> 42:17.000
+Cuéntanos un poquito del reto del curso y
+el reto de esta sesión.
+
+42:17.000 --> 42:22.000
+Vale. Entonces el reto del curso y la
+estructura de todo el curso
+
+42:22.000 --> 42:27.000
+está pensada en crear un producto desde el
+brief hasta la parte final
+
+42:27.000 --> 42:30.000
+que consiste en un style guide y un
+landing page.
+
+42:30.000 --> 42:34.000
+Digámosle landing page o una página principal.
+
+42:34.000 --> 42:37.000
+El ejemplo que yo vi en este curso es una
+página de un restaurante.
+
+42:37.000 --> 42:41.000
+Pero la idea es que en este curso damos
+las herramientas para que ustedes
+
+42:41.000 --> 42:45.000
+sepan cómo construir un brief, que es como
+la página de objetivos
+
+42:45.000 --> 42:48.000
+de su
+producto.
+
+42:48.000 --> 42:53.000
+Luego pueden crear todos los flujos y los
+wire flows y los wire frames.
+
+42:53.000 --> 42:57.000
+Y finalmente ya van a tener una página en
+la que tienen su style guide
+
+42:57.000 --> 43:03.000
+con todos sus componentes y su página
+principal en donde los están utilizando.
+
+43:03.000 --> 43:07.000
+Entonces ese es el reto del curso, ese es
+el proyecto del curso.
+
+43:07.000 --> 43:10.000
+Entonces los invito a que lo
+hagan.
+
+43:10.000 --> 43:13.000
+Vamos a tener
+premios.
+
+43:13.000 --> 43:17.000
+Entonces me gustaría que lo hicieran.
+
+43:17.000 --> 43:21.000
+Y el premio para la persona que lo termine
+y que lo envíe
+
+43:21.000 --> 43:25.000
+es una mentoría ya para revisarlo
+específicamente.
+
+43:25.000 --> 43:30.000
+Podemos encontrar qué aspectos hay por
+mejorar, qué oportunidades hay,
+
+43:30.000 --> 43:34.000
+qué cosas quedaron bien. Y podemos
+revisarlo ya en un contexto
+
+43:34.000 --> 43:38.000
+de un proyecto para añadir al portafolio.
+
+43:38.000 --> 43:42.000
+Entonces vale la pena que lo hagan. Yo
+estoy atenta a sus preguntas.
+
+43:42.000 --> 43:46.000
+Ya sea en el curso o sea por mi Twitter,
+
+43:46.000 --> 43:50.000
+ustedes me pueden contactar y pues yo les
+puedo ayudar por ahí.
+
+43:50.000 --> 43:56.000
+Súper. Si no tienen el Twitter de Samantha,
+
+43:56.000 --> 44:00.000
+en este momento lo va a poner en el chat
+para que lo puedan ver todos.
+
+44:00.000 --> 44:04.000
+Y les cuento que con esto tenemos en este
+momento dos retos andando
+
+44:04.000 --> 44:08.000
+de este estilo. Nos queda el reto de
+Samantha que como siempre vamos a dar
+
+44:08.000 --> 44:12.000
+una semana y un fin extra por cualquier cosa.
+
+44:12.000 --> 44:20.000
+Eso significa que si hoy es 25, yo creo
+que este reto cerrará el lunes 6 de julio.
+
+44:20.000 --> 44:24.000
+Y recuerden que este domingo cierra el
+reto de hacer un prototipo
+
+44:24.000 --> 44:28.000
+de e-commerce de plantas domésticas con
+Santiago Camargo.
+
+44:28.000 --> 44:33.000
+Tanto esa entrada como la del nuevo reto
+las pueden encontrar en el blog.
+
+44:33.000 --> 44:37.000
+Empiezan como reto dos puntos. Esta de
+Samantha saldrá publicada
+
+44:37.000 --> 44:41.000
+el día de mañana temprano con las
+especificaciones de cómo participar.
+
+44:41.000 --> 44:45.000
+¿Y dónde está el reto? Todavía no está.
+Apenas está ocurriendo en vivo.
+
+44:45.000 --> 44:49.000
+Lo escribiré mañana temprano y lo
+publicaré en el blog.
+
+44:49.000 --> 44:52.000
+¿Dónde dejar sus preguntas? Hay un montón
+de preguntas que quedaron
+
+44:52.000 --> 44:56.000
+sin respuestas. Pueden dejarlas como
+respuesta al blog de mañana,
+
+44:56.000 --> 45:00.000
+pueden dejarlas en las clases de curso de
+diseño para programadores
+
+45:00.000 --> 45:05.000
+o de plano si es una pregunta personal.
+Ahí está el Twitter de Samantha
+
+45:05.000 --> 45:08.000
+para que podamos platicar con
+ella.
+
+45:08.000 --> 45:13.000
+Javier está saludando. Hola Javier. ¿Qué
+sucede? No sabemos.
+
+45:13.000 --> 45:17.000
+Esperemos que todo bien. Les iba a
+comentar otra cosa. Creo que nada más.
+
+45:17.000 --> 45:25.000
+Recuerden que el premio de esto será que
+quienes terminan podrán participar
+
+45:25.000 --> 45:28.000
+en una mentoría del proyecto para
+integrarlo como portafolio.
+
+45:28.000 --> 45:32.000
+¿Por qué es importante esto y por qué
+estamos tratando de incitar
+
+45:32.000 --> 45:36.000
+a que participen en más retos? Nosotros
+hacemos todo lo que podemos
+
+45:36.000 --> 45:39.000
+a través de los cursos y de este tipo de
+espacios para que ustedes
+
+45:39.000 --> 45:43.000
+se preparen. Pero para dar ese último
+pasito y que realmente se puedan
+
+45:43.000 --> 45:47.000
+colocar ya dentro del campo profesional,
+sobre todo si están en diseño,
+
+45:47.000 --> 45:52.000
+sí o sí tienen que tener un portafolio bueno,
+profesional, que se distingue
+
+45:52.000 --> 45:58.000
+del resto. Ahora sí que mis objetivos
+personales como parte de Platzi
+
+45:58.000 --> 46:01.000
+es ayudarlos a ustedes a que realmente
+tengan ese portafolio. De nada sirve
+
+46:01.000 --> 46:05.000
+que sepan un montón de cosas si no las
+estamos aplicando en ningún lado.
+
+46:05.000 --> 46:08.000
+Entonces tomen estos pretextos, aprovechen
+que sus profesores
+
+46:08.000 --> 46:12.000
+se están vinculando con ustedes y vamos a
+armar esos portafolios.
+
+46:12.000 --> 46:16.000
+Sam, podemos verte, es increíble. Qué
+bueno que estuviste con nosotros.
+
+46:16.000 --> 46:20.000
+Muchísimas gracias. Hubo muchísimas
+preguntas y eso está increíble.
+
+46:20.000 --> 46:24.000
+Me siento un poco mal porque van a quedar
+ahí varias, pero ojalá que te podamos
+
+46:24.000 --> 46:27.000
+tener más adelante otra vez con nosotros.
+
+46:30.000 --> 46:36.000
+Claro que sí. Igual, como les decía,
+me pueden contactar, yo les respondo.
+
+46:36.000 --> 46:40.000
+No se preocupen, cualquier pregunta es
+bienvenida. Yo con mucho gusto
+
+46:40.000 --> 46:45.000
+les ayudo. Vale, que tengan bonita noche
+todos. Chao, chao.
+
+46:45.000 --> 47:10.000
+Chao, que descansen.
+Bye.
+

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/01-Fundamentos de JavaScript para Principiantes.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:119b19befa5c8b1b501622d84a72d156f373d4fab3eccb9f756e759b5d4631e1
+size 67279826

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/01-Fundamentos de JavaScript para Principiantes.vtt

@@ -0,0 +1,269 @@
+WEBVTT
+
+00:00.000 --> 00:04.440
+Muchas cosas que no entiendo, pero las
+estoy viendo y estoy
+
+00:04.440 --> 00:05.980
+ligerado en
+explicarlas.
+
+00:05.980 --> 00:06.900
+Eso es
+importante.
+
+00:06.900 --> 00:08.100
+Está volando como
+difícil.
+
+00:08.100 --> 00:08.740
+Ajá,
+sí.
+
+00:08.740 --> 00:09.380
+Hola,
+Diego.
+
+00:09.380 --> 00:09.900
+Hola,
+Tev.
+
+00:09.900 --> 00:10.540
+¿Cómo
+van?
+
+00:10.540 --> 00:11.340
+¿Qué están
+haciendo?
+
+00:11.340 --> 00:14.220
+Hola, estamos aquí alineándonos porque
+vamos a grabar el curso
+
+00:14.220 --> 00:16.580
+de JavaScript en unos
+momentitos.
+
+00:16.580 --> 00:18.620
+¿Y qué es
+JavaScript?
+
+00:18.620 --> 00:21.660
+JavaScript es un lenguaje de programación
+orientado a web que
+
+00:21.660 --> 00:25.300
+te ayuda, por ejemplo, para crear productos,
+páginas web.
+
+00:25.300 --> 00:27.060
+¿Y para qué te ha servido
+entonces?
+
+00:27.060 --> 00:29.900
+Me ha servido para tener las bases de
+programación,
+
+00:29.900 --> 00:32.660
+las bases de lógica, y de ahí poder entrar
+en el mundo del
+
+00:32.660 --> 00:33.660
+desarrollo.
+
+00:33.660 --> 00:34.160
+Guau.
+
+00:34.160 --> 00:35.900
+¿Y cómo conocieron los dos
+JavaScript?
+
+00:35.900 --> 00:37.940
+Uy, eso fue en la
+universidad.
+
+00:37.940 --> 00:40.700
+Yo estaba terminando mi carrera y entré a
+un bootcamp de
+
+00:40.700 --> 00:44.140
+programación y ahí fue como donde descubrí
+JavaScript.
+
+00:44.140 --> 00:45.540
+¿Y tú,
+Diego?
+
+00:45.540 --> 00:47.340
+Yo, ¿cómo descubrí
+JavaScript?
+
+00:47.340 --> 00:49.140
+Lo descubrí porque estaba emprendiendo,
+
+00:49.140 --> 00:51.580
+estaba armando una plataforma, no sabía
+nada de desarrollo en
+
+00:51.580 --> 00:54.260
+ese momento y es el lenguaje que tuve que
+aprender.
+
+00:54.260 --> 00:56.020
+Es el primer lenguaje que he aprendido.
+
+00:56.020 --> 00:58.780
+Es el primer lenguaje que estuve
+aprendiendo para poder construir
+
+00:58.780 --> 00:59.820
+un
+e-commerce.
+
+00:59.820 --> 01:02.460
+Y de ahí en adelante, pues ya todo fue
+como una historia
+
+01:02.460 --> 01:03.060
+nueva.
+
+01:03.060 --> 01:05.900
+De hecho, ya es tiempo de que vayamos a
+los estudios,
+
+01:05.900 --> 01:06.900
+así que
+vamos.
+
+01:06.900 --> 01:07.400
+Vamos.
+
+01:20.620 --> 01:22.900
+Muchachos, ¿y qué puedo hacer con
+JavaScript?
+
+01:22.900 --> 01:25.060
+Con JavaScript puedes hacer muchas cosas,
+
+01:25.060 --> 01:26.780
+pero una de ellas sería, por ejemplo,
+
+01:26.780 --> 01:29.780
+construir aplicaciones nativas como
+Android y iOS.
+
+01:29.780 --> 01:31.980
+Y la otra sería incluso llegar al espacio.
+
+01:31.980 --> 01:35.020
+JavaScript fue la tecnología que utilizó
+SpaceX para poder llevar
+
+01:35.020 --> 01:38.220
+a la gente a la estación espacial
+internacional.
+
+01:38.220 --> 01:40.500
+¿Y tú, Dev, qué construirías con
+JavaScript?
+
+01:40.500 --> 01:42.260
+Haría muchísimas
+cosas.
+
+01:42.260 --> 01:44.460
+La primera sería mi portafolio, por supuesto,
+
+01:44.460 --> 01:46.580
+para mostrar mis
+proyectos.
+
+01:46.580 --> 01:50.020
+Lo otro sería un e-commerce para poder
+mostrar mis productos.
+
+01:50.020 --> 01:52.540
+También una aplicación en donde pueda
+tener animaciones,
+
+01:52.540 --> 01:54.060
+formularios y un montón de
+cosas.
+
+01:54.060 --> 01:55.460
+Ven y te
+muestro.
+
+01:55.460 --> 01:58.620
+Aquí tenemos, por ejemplo, un ejercicio
+práctico de tipos de
+
+01:58.620 --> 02:01.860
+datos en donde estamos creando un perfil
+de redes sociales.
+
+02:01.860 --> 02:04.820
+También un ejercicio en donde hacemos la
+creación de chicas
+
+02:04.820 --> 02:08.340
+superpoderosas, un juego de cartas para
+repartir a
+
+02:08.340 --> 02:11.140
+diferentes jugadores y algoritmos como este,
+
+02:11.140 --> 02:14.140
+en donde podemos también saber cuál es el
+ganador de un
+
+02:14.140 --> 02:15.140
+torneo.
+
+02:15.140 --> 02:16.700
+Dev, y si apenas estoy
+empezando,
+
+02:16.700 --> 02:18.500
+¿qué necesito para aprender
+JavaScript?
+
+02:18.500 --> 02:20.420
+Guau, es una gran
+pregunta.
+
+02:20.420 --> 02:24.700
+Yo diría que primero trazarte un objetivo
+y después tratar de
+
+02:24.700 --> 02:28.020
+hacer todo lo posible para alcanzar ese
+objetivo con
+
+02:28.020 --> 02:31.660
+curiosidad, por supuesto, disciplina,
+con constancia.
+
+02:31.660 --> 02:34.740
+Y bueno, para mí eso sería suficiente para
+poder empezar
+
+02:34.740 --> 02:36.180
+a aprender
+JavaScript.
+
+02:36.180 --> 02:40.460
+Y ahora acompáñame porque voy a empezar a
+grabar la primera
+
+02:40.460 --> 02:41.740
+clase del
+curso.
+
+02:41.740 --> 02:46.500
+Voy a sentarme por acá y resulta que vamos
+a comenzar.
+
+02:46.500 --> 02:50.460
+Así que bienvenides a nuestra primera clase.
+

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/02-Instalación y Configuración de JavaScript en Visual Studio Code.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8f4dc658020d41109b8ff4d4276f4f51d165ffba555f423c2f7bf452030ebc1a
+size 33129039

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/02-Instalación y Configuración de JavaScript en Visual Studio Code.vtt

@@ -0,0 +1,263 @@
+WEBVTT
+
+00:00.000 --> 00:04.500
+Para empezar a escribir código JavaScript
+necesitamos un editor de código.
+
+00:04.500 --> 00:08.500
+De preferencia vamos a estar utilizando
+Visual Studio Code.
+
+00:08.500 --> 00:11.000
+Y para poderlo instalar en nuestra máquina,
+
+00:11.000 --> 00:16.000
+lo que hacemos es colocar en Google sus
+iniciales VSC.
+
+00:16.000 --> 00:22.000
+Y aquí ya tenemos Visual Studio Code y nos
+sale justamente la parte de descarga.
+
+00:22.000 --> 00:24.000
+Entonces vamos a darle clic
+ahí.
+
+00:24.000 --> 00:27.500
+Y luego vamos a escoger el sistema
+operativo en el que estemos trabajando.
+
+00:27.500 --> 00:29.500
+En este caso sería
+Mac.
+
+00:29.500 --> 00:36.000
+Aquí ya tenemos nuestro.zip y él también
+nos abrió esta aplicación de Visual Studio Code.
+
+00:36.000 --> 00:39.500
+Le vamos a dar doble clic aquí a la
+aplicación.
+
+00:39.500 --> 00:42.500
+Él nos va a decir que si la queremos abrir.
+
+00:42.500 --> 00:44.500
+Y le vamos a decir que
+sí.
+
+00:44.500 --> 00:47.000
+Y aquí ya tenemos Visual Studio Code.
+
+00:47.000 --> 00:52.000
+En esta página de Node.js nos indican cómo
+debemos descargarlo.
+
+00:52.000 --> 00:55.000
+Y nos dice que en esencia, si nosotros
+tenemos un Mac,
+
+00:55.000 --> 00:59.000
+deberíamos colocar estos comandos en
+nuestra terminal.
+
+00:59.000 --> 01:04.000
+Lo que vamos a hacer es abrir nuestra
+terminal y colocar estos comandos.
+
+01:04.000 --> 01:10.000
+Vamos a darle command espacio y vamos a
+colocar terminal.
+
+01:10.000 --> 01:12.000
+Aquí se nos abre nuestra
+terminal.
+
+01:12.000 --> 01:14.000
+Voy a darle
+zoom.
+
+01:17.000 --> 01:20.000
+Y allí vamos a colocar nuestros comandos.
+
+01:20.000 --> 01:25.500
+Para ello, venimos por acá, copiamos este,
+command c,
+
+01:25.500 --> 01:30.500
+nuevamente en nuestra terminal vamos a
+colocar este comando,
+
+01:30.500 --> 01:32.500
+le damos
+enter.
+
+01:32.500 --> 01:36.500
+Y una vez ya se haya terminado de instalar
+esto,
+
+01:36.500 --> 01:40.500
+vamos a colocar nvm install
+20.
+
+01:40.500 --> 01:44.500
+Vamos a colocarle command c, terminal.
+
+01:44.500 --> 01:46.500
+Aquí colocamos este
+comando.
+
+01:46.500 --> 01:52.500
+Empieza a desinstalarse la versión 20 para
+el versionamiento de Node.js.
+
+01:52.500 --> 01:56.500
+Y luego él nos dice que debemos colocar
+node-b.
+
+01:56.500 --> 02:00.500
+Entonces le decimos node-b y aquí ya nos
+sale que tenemos
+
+02:00.500 --> 02:02.500
+la versión 20 de
+Node.js.
+
+02:02.500 --> 02:06.500
+Y ya con esto tenemos para poder empezar a
+escribir
+
+02:06.500 --> 02:08.500
+nuestro código
+JavaScript.
+
+02:08.500 --> 02:14.500
+Le damos aquí donde dice file o archivo,
+abrir folder.
+
+02:14.500 --> 02:19.500
+Y aquí ya nos sale en donde nosotros
+queremos abrir nuestro archivo.
+
+02:19.500 --> 02:22.500
+Entonces vamos a abrir esta carpeta que
+dice Hola Mundo,
+
+02:22.500 --> 02:25.500
+que fue la que creamos, le decimos open.
+
+02:25.500 --> 02:27.500
+Aquí le vamos a decir que
+sí.
+
+02:27.500 --> 02:31.500
+Y una vez ya tengamos acá nuestra carpeta,
+
+02:31.500 --> 02:34.500
+nos van a salir ciertos
+símbolos.
+
+02:34.500 --> 02:38.500
+Estos símbolos o íconos nos van a indicar
+qué es lo que queremos hacer.
+
+02:38.500 --> 02:43.500
+En este caso vamos a tomar este primero,
+que es para crear un archivo.
+
+02:43.500 --> 02:47.500
+Le vamos a dar click y podemos escribir
+Hola Mundo también.
+
+02:47.500 --> 02:51.500
+Y aquí lo importante es que tenga la
+extensión de JavaScript
+
+02:51.500 --> 02:54.500
+para indicarle a él que vamos a empezar a
+trabajar
+
+02:54.500 --> 02:56.500
+con este lenguaje de
+programación.
+
+02:56.500 --> 03:01.500
+Aquí le vamos a decir enter y seguido de
+esto
+
+03:01.500 --> 03:05.500
+vamos a empezar a escribir nuestro primer
+Hola Mundo.
+
+03:05.500 --> 03:12.500
+Colocamos console.log, indicándole que
+vamos a imprimir algo.
+
+03:12.500 --> 03:14.500
+Y ese algo va a ser
+quién.
+
+03:14.500 --> 03:18.500
+Por ahora solamente nos interesa saber que
+vamos a escribir unas comillas
+
+03:18.500 --> 03:21.500
+y que dentro de esas comillas va a ir un
+mensaje.
+
+03:21.500 --> 03:26.500
+Vamos a escribir aquí Hola Mundo feliz y
+una carita feliz.
+
+03:26.500 --> 03:28.500
+Guardamos.
+
+03:28.500 --> 03:32.500
+Ahora vamos a abrir nuestra terminal,
+vamos a decir command-J.
+
+03:32.500 --> 03:35.500
+Aquí ya nos salió nuestra
+terminal.
+
+03:35.500 --> 03:38.500
+Vamos a guardar esto que dice ports.
+
+03:38.500 --> 03:41.500
+Y aquí ya nos queda justamente esta
+terminal para nosotros.
+
+03:41.500 --> 03:44.500
+Este Hola Mundo es el nombre de mi carpeta.
+
+03:44.500 --> 03:47.500
+Y aquí voy a colocar
+node.
+
+03:47.500 --> 03:52.500
+Seguido de node vamos a colocar el nombre
+de ese archivo que creamos,
+
+03:52.500 --> 03:55.500
+que es quién.
+HolaMundo.js.
+
+03:55.500 --> 03:59.500
+Entonces recordemos, la idea es que
+estemos dentro de la carpeta
+
+03:59.500 --> 04:03.500
+y una vez estemos dentro de la carpeta
+abrimos el archivo.
+
+04:03.500 --> 04:07.500
+Vamos a darle enter y aquí ya nos sale
+Hola Mundo feliz,
+
+04:07.500 --> 04:10.500
+que es nuestro primer Hola Mundo con
+JavaScript.
+
+04:10.500 --> 04:11.500
+Gracias.
+

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/02-Lecturas recomendadas.txt

@@ -0,0 +1,2 @@
+https://code.visualstudio.com/download
+https://nodejs.org/en/download/package-manager

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/03-Instalación y configuración de Visual Studio Code y Nodejs en Windows.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:abe99efdd5484e3ee89af79548605ff84a330c47c0ac4ef473163c2526d2fd4e
+size 38470654

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/03-Instalación y configuración de Visual Studio Code y Nodejs en Windows.vtt

@@ -0,0 +1,379 @@
+WEBVTT
+
+00:00.000 --> 00:03.900
+Una vez estemos aquí, vamos a escoger
+nuestro sistema operativo,
+
+00:03.900 --> 00:06.600
+que en este caso es Windows, le vamos a
+dar clic.
+
+00:07.600 --> 00:11.200
+Y una vez estemos ahí, él empieza ese
+proceso de descarga.
+
+00:11.500 --> 00:14.100
+Cuando esté listo, nos sale este mensaje,
+
+00:14.100 --> 00:15.600
+le vamos a dar
+clic,
+
+00:16.500 --> 00:18.300
+y nos sale esta
+ventana.
+
+00:18.500 --> 00:22.100
+Lo que vamos a hacer es decirle que
+aceptamos el acuerdo,
+
+00:22.100 --> 00:23.500
+le vamos a dar
+siguiente.
+
+00:24.100 --> 00:26.900
+Aquí ya nos dice en dónde es que queremos
+nosotros
+
+00:26.900 --> 00:30.600
+colocar Visual Studio Code, aquí lo vamos
+a dejar.
+
+00:30.900 --> 00:32.600
+Le vamos a decir
+siguiente.
+
+00:32.800 --> 00:37.000
+Aquí nos dice que seleccionar también la
+carpeta del menú de inicio.
+
+00:37.600 --> 00:40.100
+Y vamos a revisar estas
+opciones.
+
+00:40.100 --> 00:42.100
+Hasta el momento las podemos dejar así.
+
+00:42.100 --> 00:44.400
+Si queremos crear un acceso directo en el
+escritorio,
+
+00:44.400 --> 00:45.700
+también lo podemos
+hacer.
+
+00:45.800 --> 00:47.500
+Y le vamos a dar
+siguiente.
+
+00:48.300 --> 00:52.300
+También acá finalizamos con este mensaje y
+le decimos instalar.
+
+00:52.300 --> 00:56.300
+Aquí ya terminó la instalación y le vamos
+a dar finalizar.
+
+00:58.000 --> 01:01.800
+Una vez finalice, él nos abre Visual
+Studio Code.
+
+01:02.100 --> 01:06.900
+Ahora lo que debemos hacer es crear una
+carpeta y un archivo
+
+01:06.900 --> 01:09.300
+para poder escribir nuestro código JavaScript.
+
+01:09.500 --> 01:13.700
+Para eso podemos ir, por ejemplo, a
+escritorio y crear una carpeta.
+
+01:14.000 --> 01:17.100
+Para ello le damos clic derecho, nuevo,
+
+01:17.100 --> 01:19.100
+y en nuevo le decimos
+carpeta.
+
+01:19.100 --> 01:22.600
+Una vez estemos ahí le podemos decir hola,
+mundo,
+
+01:22.600 --> 01:25.300
+como el nombre de nuestra carpeta, y listo.
+
+01:25.700 --> 01:29.300
+Ahora lo que vamos a hacer es que dentro
+de Visual Studio Code
+
+01:29.300 --> 01:32.100
+vamos a crear el archivo JavaScript.
+
+01:32.500 --> 01:36.600
+Para ello lo que vamos a hacer es decirle
+file o archivo.
+
+01:36.900 --> 01:40.500
+Le vamos a decir que vamos a abrir un folder,
+
+01:40.500 --> 01:42.900
+que es ese folder que ya
+creamos.
+
+01:43.500 --> 01:46.100
+Y aquí vamos a decirle
+archivo.
+
+01:46.100 --> 01:50.100
+Aquí vamos a decirle archivo, que es el
+archivo que ya creamos.
+
+01:50.500 --> 01:54.400
+Y aquí vamos a escritorio, hola, mundo,
+
+01:54.400 --> 01:56.700
+y le vamos a decir seleccionar carpeta.
+
+01:57.500 --> 02:00.700
+Aquí nos dice que hay un mensaje sobre
+autores,
+
+02:00.700 --> 02:06.100
+le vamos a decir que sí, y ya estamos acá
+en nuestra carpeta.
+
+02:06.700 --> 02:10.300
+Ahora, para nosotros poder correr nuestro
+código JavaScript
+
+02:10.300 --> 02:12.300
+necesitamos
+Node.js.
+
+02:12.300 --> 02:15.900
+Download Node.js o descargar Node.js,
+
+02:15.900 --> 02:19.300
+y aquí nos sale justamente la
+documentación oficial.
+
+02:19.700 --> 02:22.500
+Vamos a decirle que nos instale el pre-build,
+
+02:22.500 --> 02:24.100
+vamos a darle clic
+acá,
+
+02:24.100 --> 02:28.100
+y nos dice que hay un botón donde dice
+descargar.
+
+02:28.100 --> 02:29.700
+Vamos a darle clic
+ahí.
+
+02:33.300 --> 02:35.500
+Una vez él termine de
+instalar,
+
+02:35.500 --> 02:37.500
+nos va a salir este
+mensaje,
+
+02:37.500 --> 02:41.100
+y de todas formas lo vamos a poder ver
+aquí en descargas.
+
+02:41.100 --> 02:42.500
+Vamos a darle
+clic,
+
+02:44.300 --> 02:48.700
+y nos sale esta ventana dándonos la
+bienvenida a Node.js.
+
+02:48.700 --> 02:50.500
+Vamos a darle
+siguiente.
+
+02:51.500 --> 02:54.700
+Luego lo que vamos a hacer es aceptar los
+términos,
+
+02:54.700 --> 02:56.100
+le decimos
+siguiente,
+
+02:57.300 --> 03:00.100
+y acá ya nos dice en dónde es que va a quedar,
+
+03:00.100 --> 03:02.500
+y le vamos a dar nuevamente siguiente.
+
+03:02.500 --> 03:04.900
+Aquí también le vamos a dar siguiente,
+
+03:04.900 --> 03:10.700
+siguiente, y ya finalmente le vamos a dar
+en instalar.
+
+03:14.700 --> 03:17.700
+Una vez él termine el proceso de instalación,
+
+03:17.700 --> 03:21.700
+nos muestra esta pantalla y le vamos a dar
+en finalizar.
+
+03:23.700 --> 03:28.500
+Ahora vamos a revisar que en efecto ya
+tengamos Node.js
+
+03:28.500 --> 03:30.100
+en nuestro
+computador.
+
+03:30.100 --> 03:32.300
+Vamos a ir a la parte de
+inicio
+
+03:32.300 --> 03:35.300
+y vamos a buscar símbolo del sistema,
+
+03:35.300 --> 03:37.100
+y le vamos a dar
+clic.
+
+03:37.100 --> 03:39.500
+Esta es nuestra
+terminal,
+
+03:39.500 --> 03:44.300
+y lo que vamos a hacer es decirle node
+espacio guión b,
+
+03:44.300 --> 03:46.300
+y vamos a darle
+enter.
+
+03:46.300 --> 03:49.300
+Aquí ya vemos que sí tenemos
+Node.js
+
+03:49.300 --> 03:52.700
+porque él nos va a indicar justamente la
+versión
+
+03:52.700 --> 03:55.100
+que ya tenemos en nuestro computador.
+
+03:55.900 --> 03:57.100
+Ahora sí estamos
+listos
+
+03:57.100 --> 03:59.900
+para escribir nuestro hola mundo con
+JavaScript.
+
+03:59.900 --> 04:03.100
+Lo que vamos a hacer es escribir un console.
+log
+
+04:03.100 --> 04:05.900
+indicándole que vamos a empezar a escribir
+un mensaje
+
+04:05.900 --> 04:08.100
+para que lo imprima en la
+terminal,
+
+04:08.100 --> 04:10.500
+y allí vamos a colocar unas comillas,
+
+04:10.500 --> 04:12.100
+pueden ser simples o
+dobles,
+
+04:12.100 --> 04:14.100
+y vamos a escribir nuestro
+mensaje,
+
+04:14.100 --> 04:16.900
+que en este caso sería hola
+mundo.
+
+04:16.900 --> 04:20.100
+Voy a colocarle hola mundo feliz con una
+carita.
+
+04:20.100 --> 04:24.700
+Vamos a guardar, vamos a decirle file o
+archivo,
+
+04:24.700 --> 04:26.900
+y luego vamos a
+guardar.
+
+04:26.900 --> 04:29.500
+Ya se nos quitó un puntito que salía
+acá
+
+04:29.500 --> 04:31.300
+indicándonos que ya está
+listo
+
+04:31.300 --> 04:34.100
+para poder verse este mensaje en la terminal.
+
+04:34.900 --> 04:36.300
+Para abrir la
+terminal,
+
+04:36.300 --> 04:38.300
+lo que hacemos es venir
+aquí
+
+04:38.300 --> 04:40.700
+a la parte de arriba de Visual Studio Code,
+
+04:40.700 --> 04:44.500
+le decimos terminal, y allí nueva terminal.
+
+04:45.100 --> 04:47.900
+Aquí ya se nos abre esta
+terminal,
+
+04:47.900 --> 04:50.500
+y lo que vamos a hacer es decirle node,
+
+04:50.500 --> 04:53.300
+que fue justamente lo que acabamos de
+instalar,
+
+04:53.300 --> 04:56.100
+y allí vamos a colocarle el
+archivo
+
+04:56.100 --> 04:59.300
+que nosotros mencionamos o llamamos hola
+mundo
+
+04:59.300 --> 05:00.700
+punto
+JS.
+
+05:00.700 --> 05:02.300
+Vamos a darle
+enter,
+
+05:02.300 --> 05:04.900
+y aquí ya nos imprime nuestro mensaje.
+
+05:04.900 --> 05:06.900
+Voy a correr esto un
+poquito,
+
+05:06.900 --> 05:29.900
+y ya tenemos acá nuestro primer hola mundo
+con JavaScript.
+

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/03-Lecturas recomendadas.txt

@@ -0,0 +1,2 @@
+https://nodejs.org/en/download/package-manager
+https://code.visualstudio.com/download

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/04-Lecturas recomendadas.txt

@@ -0,0 +1,2 @@
+https://github.com/platzi/basico-js
+https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_types

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/04-Variables y Buenas Prácticas en JavaScript.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f60c582bc20a282ced8460678fdbd4b4d1754bb9536de6e45321cc036c9b872e
+size 85347686

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/04-Variables y Buenas Prácticas en JavaScript.vtt

@@ -0,0 +1,779 @@
+WEBVTT
+
+00:00.000 --> 00:03.260
+Hola, en esta clase vamos a hablar sobre
+variables,
+
+00:03.260 --> 00:05.960
+un concepto muy importante en programación.
+
+00:05.960 --> 00:09.240
+Resulta que vamos a imaginarnos este tema
+de variables
+
+00:09.240 --> 00:10.600
+como si fueran
+cajas.
+
+00:10.600 --> 00:14.400
+Las cajas normalmente nos permiten
+almacenar cosas
+
+00:14.400 --> 00:16.400
+o también sacar cosas de
+ellas.
+
+00:16.400 --> 00:18.640
+Y algo característico que tienen las
+cajas
+
+00:18.640 --> 00:21.000
+es que pueden tener nombres o etiquetas,
+
+00:21.000 --> 00:23.560
+y así podemos saber de quién es la caja,
+
+00:23.560 --> 00:25.360
+o qué tiene la caja
+adentro,
+
+00:25.360 --> 00:28.760
+en fin, nos va a servir muchísimo ese
+nombre o esa etiqueta.
+
+00:28.760 --> 00:30.760
+Y asimismo, es en
+programación.
+
+00:30.760 --> 00:34.360
+Imagínate, por ejemplo, que así sería en
+JavaScript.
+
+00:34.360 --> 00:37.760
+Vamos a colocar primero la palabra clave, let,
+
+00:37.760 --> 00:39.560
+ahí le estamos indicando al
+programa
+
+00:39.560 --> 00:42.160
+que vamos a empezar a escribir una
+variable
+
+00:42.160 --> 00:44.560
+o que vamos a empezar a crear una caja,
+
+00:44.560 --> 00:47.160
+seguido de el nombre o la
+etiqueta.
+
+00:47.160 --> 00:50.760
+En este caso sería, por ejemplo, caja de Andy.
+
+00:50.760 --> 00:52.160
+¿Esto qué nos quiere
+decir?
+
+00:52.160 --> 00:54.560
+Que ya estamos creando nuestra
+caja
+
+00:54.560 --> 00:56.560
+en donde vamos a almacenar
+cosas,
+
+00:56.560 --> 00:58.160
+que en este caso vamos a
+decirle
+
+00:58.160 --> 01:01.360
+que es una caja que le pertenece a alguien.
+
+01:01.360 --> 01:03.760
+Este nombre puede ser el que tú quieras,
+
+01:03.760 --> 01:04.960
+yo le coloqué
+este,
+
+01:04.960 --> 01:07.760
+pero fácilmente le puedes colocar el que
+tú desees.
+
+01:07.760 --> 01:11.960
+Lo importante acá es que uno tenga un
+nombre descriptivo,
+
+01:11.960 --> 01:15.760
+es decir, que al leerlo nosotros ya
+sepamos de qué se trata.
+
+01:15.760 --> 01:19.360
+Y otra cosa muy importante es evitar las
+ambigüedades,
+
+01:19.360 --> 01:23.160
+es decir, evitar colocarle cosas como C, D, A,
+
+01:23.160 --> 01:25.360
+ahí no sabemos de qué se
+trata.
+
+01:25.360 --> 01:27.560
+Entonces, la idea es que tratemos de que
+eso sea
+
+01:27.560 --> 01:31.960
+súper descriptivo y que al leerlo ya
+sepamos de qué se trata.
+
+01:31.960 --> 01:35.560
+Seguido de esto, la idea es poder
+almacenar cosas
+
+01:35.560 --> 01:37.360
+en esa caja que acabamos de
+crear.
+
+01:37.360 --> 01:38.360
+¿Cómo lo
+hacemos?
+
+01:38.360 --> 01:41.960
+Lo hacemos con un igual y a ese igual le
+vamos a dar
+
+01:41.960 --> 01:45.160
+esas cosas que queremos almacenar dentro
+de esa caja.
+
+01:45.160 --> 01:47.960
+En este caso vamos a decirle que queremos
+almacenar
+
+01:47.960 --> 01:50.360
+un juguete que se llama
+Woody,
+
+01:50.360 --> 01:52.560
+y ahí le vamos a escribir justamente,
+
+01:52.560 --> 01:54.760
+entre comillas, pueden ser simples o dobles,
+
+01:54.760 --> 01:56.160
+porque es un
+texto.
+
+01:56.160 --> 01:59.160
+Entonces, así básicamente quedaría nuestra
+caja
+
+01:59.160 --> 02:02.760
+que tiene un nombre y que adicional tiene
+algo por dentro,
+
+02:02.760 --> 02:05.560
+ya estamos almacenando algo en esas variables.
+
+02:05.560 --> 02:08.160
+Esto en programación justamente se
+llama
+
+02:08.160 --> 02:09.560
+tanto la
+declaración,
+
+02:09.560 --> 02:11.760
+que es la parte de la creación de la caja,
+
+02:11.760 --> 02:14.360
+y la asignación, que es justamente
+eso
+
+02:14.360 --> 02:16.560
+que estamos almacenando en esa caja.
+
+02:16.560 --> 02:18.160
+Eso se ve muy bonito
+ahí,
+
+02:18.160 --> 02:20.960
+pero vamos a verlo justamente en el código,
+
+02:20.960 --> 02:22.960
+así que vamos a nuestro editor de código.
+
+02:22.960 --> 02:27.160
+Vamos a comenzar colocando nuestra palabra
+clave, let,
+
+02:27.160 --> 02:29.560
+seguido del nombre de la
+variable,
+
+02:29.560 --> 02:32.560
+que en este caso sería caja de Andy.
+
+02:32.560 --> 02:35.960
+Allí lo que vamos a hacer es asignarle a
+esa variable
+
+02:35.960 --> 02:36.960
+un
+valor.
+
+02:36.960 --> 02:38.160
+¿Cómo lo vamos a
+hacer?
+
+02:38.160 --> 02:40.160
+Con comillas simples en este
+caso,
+
+02:40.160 --> 02:42.360
+y vamos a escribir un
+texto.
+
+02:42.360 --> 02:45.360
+En este caso es el nombre de uno de los
+juguetes de Andy.
+
+02:45.360 --> 02:48.360
+Para poder visualizar el contenido de esa
+caja,
+
+02:48.360 --> 02:50.560
+o ya hablando en
+programación,
+
+02:50.560 --> 02:53.160
+es el contenido que tiene esta variable,
+
+02:53.160 --> 02:55.360
+vamos a utilizar
+console.log,
+
+02:55.360 --> 02:58.160
+y aquí lo que decimos es caja de Andy,
+
+02:58.160 --> 02:59.960
+es decir, el nombre de la
+variable,
+
+02:59.960 --> 03:04.360
+guardamos, y en la terminal lo que hacemos
+es decir note,
+
+03:04.360 --> 03:06.560
+y vamos a correr ese
+archivo.
+
+03:06.560 --> 03:09.960
+Aquí ya nos sale justamente lo que
+contiene esa variable,
+
+03:09.960 --> 03:11.160
+y todo súper
+bien,
+
+03:11.160 --> 03:13.960
+ahí nuestro código está funcionando perfecto.
+
+03:13.960 --> 03:16.560
+Ahora, con este tema del nombramiento,
+
+03:16.560 --> 03:18.560
+esto es demasiado clave e importante.
+
+03:18.560 --> 03:19.560
+¿Por
+qué?
+
+03:19.560 --> 03:22.160
+Porque en programación nosotros
+trabajamos
+
+03:22.160 --> 03:23.960
+para nuestro yo del
+futuro,
+
+03:23.960 --> 03:26.960
+es decir, que nosotros en un futuro,
+por ejemplo,
+
+03:26.960 --> 03:29.560
+volvamos a ver este código y nos
+acordemos
+
+03:29.560 --> 03:32.760
+de qué es lo que estábamos tratando de
+hacer en ese momento,
+
+03:32.760 --> 03:35.360
+o incluso trabajar para otras personas,
+
+03:35.360 --> 03:36.760
+que otras personas
+entiendan
+
+03:36.760 --> 03:40.160
+qué es lo que nosotros quisimos decir o
+desarrollar en ese código.
+
+03:40.160 --> 03:41.960
+Entonces, para
+ello,
+
+03:41.960 --> 03:45.760
+vamos a colocar, por ejemplo, por acá,
+un comentario.
+
+03:45.760 --> 03:48.760
+Vamos a escribir cosas que no serían
+permitidas
+
+03:48.760 --> 03:50.560
+y cosas que sí serían
+permitidas
+
+03:50.560 --> 03:53.760
+a la hora de escribir nombramientos de las
+variables.
+
+03:53.760 --> 03:55.760
+Eso siempre teniendo en
+cuenta
+
+03:55.760 --> 03:58.360
+las buenas prácticas en programación.
+
+03:58.360 --> 04:00.360
+Entonces, vamos a escribir
+acá,
+
+04:00.360 --> 04:02.760
+lo no, voy a escribirlo en mayúscula,
+
+04:02.760 --> 04:04.760
+lo no
+permitido.
+
+04:04.760 --> 04:05.760
+Excelente.
+
+04:05.760 --> 04:07.960
+¿Qué cosas no serían
+permitidas?
+
+04:07.960 --> 04:10.960
+Como, por ejemplo, si yo escribo
+C,
+
+04:10.960 --> 04:14.160
+y luego acá le decimos
+Woody.
+
+04:14.160 --> 04:15.160
+Funciona.
+
+04:15.160 --> 04:18.560
+Si tú colocas un console.log de C, va a
+funcionar.
+
+04:18.560 --> 04:22.760
+Pero en un futuro no vamos a saber que esa
+C era caja.
+
+04:22.760 --> 04:26.560
+Entonces, vamos a tratar de evitar ese
+tipo de cosas.
+
+04:26.560 --> 04:28.160
+Otra cosa que no sería lo
+ideal
+
+04:28.160 --> 04:32.160
+sería colocar, por ejemplo, C de Andy.
+
+04:32.160 --> 04:35.360
+Que para nosotros puede ser caja de Andy,
+
+04:35.360 --> 04:38.760
+pero más adelante tampoco vamos a saber de
+qué se trataba.
+
+04:38.760 --> 04:41.160
+Otra cosa que no sería lo
+ideal
+
+04:41.160 --> 04:44.560
+sería, por ejemplo, colocar PC Andy.
+
+04:44.560 --> 04:45.560
+¿Por
+qué?
+
+04:45.560 --> 04:49.160
+Porque acá para nosotros puede ser, por
+ejemplo,
+
+04:49.160 --> 04:51.160
+la primera caja de
+Andy.
+
+04:51.160 --> 04:54.560
+Pero para otra persona, PC puede ser
+computador.
+
+04:54.560 --> 04:57.560
+Entonces, ahí ya empezamos con ese tema de
+las ambigüedades.
+
+04:57.560 --> 05:02.160
+Entonces, lo más indicado es que sea lo
+más descriptivo posible.
+
+05:02.160 --> 05:05.160
+Si realmente ves que el nombre puede ser
+muy largo,
+
+05:05.160 --> 05:08.160
+realmente es mejor ponerlo largo, descriptivo,
+
+05:08.160 --> 05:09.960
+y que lo podamos
+entender.
+
+05:09.960 --> 05:13.560
+Entonces, si en algún momento dices,
+por ejemplo,
+
+05:13.560 --> 05:17.960
+primer trasteo de
+Andy,
+
+05:17.960 --> 05:20.160
+esto es súper
+largo,
+
+05:20.160 --> 05:23.360
+o lo podemos entender como una variable larga,
+
+05:23.360 --> 05:26.160
+pero realmente es mucho mejor que tengamos
+ahí
+
+05:26.160 --> 05:29.160
+ese texto descriptivo y
+entendible.
+
+05:29.160 --> 05:33.160
+Ahora, cosas que nosotros sí podríamos hacer.
+
+05:33.160 --> 05:35.160
+Entonces, vamos a colocarle esto por acá.
+
+05:35.160 --> 05:37.160
+Vamos a escribir otro
+comentario
+
+05:37.160 --> 05:39.160
+y vamos a decirle lo
+permitido.
+
+05:39.160 --> 05:40.360
+Esa sería
+una.
+
+05:40.360 --> 05:42.760
+Otra, con el tema de las abreviaciones.
+
+05:42.760 --> 05:46.160
+Si, por ejemplo, nosotros tenemos una URL
+saliéndonos
+
+05:46.160 --> 05:47.960
+un poquito de este ejemplo de
+Andy,
+
+05:47.960 --> 05:53.960
+y decimos, por ejemplo, no sé, URL del
+usuario.
+
+05:53.960 --> 05:57.360
+Acá, nosotros, o aquí puede ir cualquier cosa.
+
+05:57.360 --> 06:01.760
+Le puedes colocar como http://google.com.
+
+06:01.760 --> 06:06.760
+Aquí, mira que URL, pues, ya es una
+abreviación que conocemos
+
+06:06.760 --> 06:08.760
+y que todos, en
+particular,
+
+06:08.760 --> 06:11.960
+entenderíamos inmediatamente a qué hacemos
+alusión.
+
+06:11.960 --> 06:15.160
+Otra cosa que también podríamos hacer es,
+por ejemplo,
+
+06:15.160 --> 06:19.160
+decir ID del
+usuario.
+
+06:19.160 --> 06:22.160
+Esto también sería
+conocido
+
+06:22.160 --> 06:25.960
+y ya digamos que todos en programación o
+en general
+
+06:25.960 --> 06:28.960
+entendemos que un ID es un identificador.
+
+06:28.960 --> 06:31.960
+Entonces, este tipo de
+abreviaciones
+
+06:31.960 --> 06:34.160
+sí son permitidas precisamente porque,
+
+06:34.160 --> 06:36.160
+a nivel general, sí se
+conocen
+
+06:36.160 --> 06:38.560
+y no tendrían ningún
+complique.
+
+06:38.560 --> 06:40.560
+Otras cosas a tener en
+cuenta
+
+06:40.560 --> 06:42.560
+es que si utilizamos varias variables,
+
+06:42.560 --> 06:44.160
+como en este
+caso,
+
+06:44.160 --> 06:48.160
+lo ideal es que esté una debajo de la otra
+y en orden.
+
+06:48.160 --> 06:50.560
+Es decir, que si nosotros vamos a escribir
+variables
+
+06:50.560 --> 06:52.560
+en nuestro código
+JavaScript,
+
+06:52.560 --> 06:54.560
+lo ideal es que las
+variables
+
+06:54.560 --> 06:57.560
+siempre vayan al inicio de todo nuestro
+código.
+
+06:57.560 --> 07:01.560
+Adicional, también utilizamos punto y coma
+en JavaScript
+
+07:01.560 --> 07:04.560
+y yo realmente no lo
+utilizo.
+
+07:04.560 --> 07:07.560
+Te voy a dejar también aquí en la cajita
+de recursos
+
+07:07.560 --> 07:10.560
+algunas consideraciones que debes tener en
+cuenta
+
+07:10.560 --> 07:13.560
+a la hora de escribir puntos y comas o
+evitarlos.
+
+07:13.560 --> 07:15.560
+Sin embargo, en mi caso no lo
+utilizo
+
+07:15.560 --> 07:18.560
+precisamente porque JavaScript ya lo hace
+por nosotros.
+
+07:18.560 --> 07:21.560
+Entonces, voy a dejarlo por
+ahí.
+
+07:21.560 --> 07:24.560
+Y ahora es importante que nosotros
+tengamos en cuenta
+
+07:24.560 --> 07:26.560
+que en lo no
+permitido,
+
+07:26.560 --> 07:28.560
+nosotros no debemos hacer lo siguiente.
+
+07:28.560 --> 07:31.560
+Por ejemplo, ya tenemos la variable C,
+
+07:31.560 --> 07:34.560
+luego le colocamos, por ejemplo,
+CDA
+
+07:34.560 --> 07:38.560
+y luego por allá abajo escribimos con
+espacios
+
+07:38.560 --> 07:42.560
+otra variable, por ejemplo, PC, Andy.
+
+07:42.560 --> 07:46.560
+Esto no sería ideal, realmente sería un
+poquito desordenado.
+
+07:46.560 --> 07:49.560
+Entonces, lo mejor siempre es que tratemos
+de trabajarlas
+
+07:49.560 --> 07:51.560
+en orden y una debajo de la
+otra.
+
+07:51.560 --> 07:55.560
+Ya escribimos nuestras primeras variables
+con JavaScript
+
+07:55.560 --> 07:58.560
+utilizando justamente nuestra palabra clave,
+let.
+
+07:58.560 --> 08:01.560
+Sin embargo, actualmente en
+JavaScript
+
+08:01.560 --> 08:03.560
+no solamente escribimos variables con let,
+
+08:03.560 --> 08:05.560
+sino que también lo hacemos con const.
+
+08:05.560 --> 08:07.560
+¿Cuál es la diferencia entre las
+dos?
+
+08:07.560 --> 08:11.560
+Let lo utilizamos normalmente para variables,
+
+08:11.560 --> 08:12.560
+como su nombre lo
+indica,
+
+08:12.560 --> 08:15.560
+algo que va a cambiar también con el tiempo.
+
+08:15.560 --> 08:17.560
+Por ejemplo, esto, un
+contador.
+
+08:17.560 --> 08:21.560
+Podemos inicializar una variable, es decir,
+su valor,
+
+08:21.560 --> 08:24.560
+el primer valorcito que le vamos a poner
+es cero.
+
+08:24.560 --> 08:27.560
+Y después, la idea es que a medida que
+escribamos
+
+08:27.560 --> 08:30.560
+nuestro programa, este contador empiece a
+cambiar,
+
+08:30.560 --> 08:33.560
+que posteriormente sea uno, dos, tres,
+o bueno,
+
+08:33.560 --> 08:35.560
+dependiendo de cómo sea nuestro programa.
+
+08:35.560 --> 08:38.560
+Pero básicamente, let, como es una variable,
+
+08:38.560 --> 08:41.560
+puede estar cambiando constantemente en el
+tiempo.
+
+08:41.560 --> 08:45.560
+Sin embargo, const lo utilizamos para
+variables
+
+08:45.560 --> 08:48.560
+que son constantes o fijas, es decir,
+
+08:48.560 --> 08:51.560
+que no se van a mover, su valor siempre va
+a ser el mismo
+
+08:51.560 --> 08:52.560
+durante todo el
+programa.
+
+08:52.560 --> 08:57.560
+Como por ejemplo, pi, que ya sabemos que
+su valor es 3.14,
+
+08:57.560 --> 09:00.560
+bueno, tiene un poquito más, pero lo
+podemos dejar
+
+09:00.560 --> 09:02.560
+por el momento así, solamente un número,
+
+09:02.560 --> 09:05.560
+y así ya se nos quedaría nuestra constante,
+
+09:05.560 --> 09:08.560
+que también nosotros podemos decirle a
+const variable,
+
+09:08.560 --> 09:10.560
+a pesar de que ya sepamos que es una
+constante.
+
+09:10.560 --> 09:12.560
+Podemos trabajar tanto let como const,
+
+09:12.560 --> 09:14.560
+como si fueran
+variables.
+
+09:14.560 --> 09:16.560
+Cuéntame, por favor, en los comentarios,
+
+09:16.560 --> 09:18.560
+¿cómo te quedaron tus
+variables?
+
+09:18.560 --> 09:21.560
+¿Qué otras cosas le lograste añadir a
+ellas?
+
+09:21.560 --> 09:27.560
+Mejor dicho, cuéntanos en los comentarios.
+

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/04-clase-variables_bfbd19c3-215e-4b54-816d-34c50f2600d4.js

@@ -0,0 +1,12 @@
+let cajaDeAndy = 'Woody'
+console.log(cajaDeAndy)
+
+// Lo NO permitido
+let c = 'Woody'
+let cda = 'Woody'
+let pcAndy = 'Woody'
+
+// Lo permitido
+let primerTrasteoDeAndy = 'Woody'
+let urlDelUsuario = 'https://www.google.com'
+let idDelUsuario = '123456789'

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/05-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/05-Tipos de Datos en JavaScript Primitivos y Complejos.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0c9e0eb44a0416e4b2667ac526a9c8f808174ede3620123db1114bf2c991bd55
+size 46693218

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/05-Tipos de Datos en JavaScript Primitivos y Complejos.vtt

@@ -0,0 +1,629 @@
+WEBVTT
+
+00:00.000 --> 00:04.680
+En JavaScript tenemos 10 tipos de datos y
+ellos se agrupan en
+
+00:04.680 --> 00:07.560
+dos, los primitivos y los complejos.
+
+00:07.560 --> 00:11.720
+Entre ellos tenemos, para los primitivos,
+string, number,
+
+00:11.720 --> 00:15.840
+boolean, null, indefinido, symbol y begin.
+
+00:15.840 --> 00:19.720
+Y entre los complejos tenemos los objetos,
+los arrays y
+
+00:19.720 --> 00:20.920
+también las
+funciones.
+
+00:20.920 --> 00:23.760
+Vamos al código para revisar cómo
+escribimos cada uno de
+
+00:23.760 --> 00:24.600
+ellos.
+
+00:24.600 --> 00:28.000
+Vamos a comenzar escribiendo los tipos de
+datos que son
+
+00:28.000 --> 00:29.360
+primitivos.
+
+00:29.360 --> 00:33.640
+Y con ellos, por supuesto, vamos a
+comenzar con los strings.
+
+00:33.640 --> 00:37.080
+Estos son, en esencia, cadenas de caracteres.
+
+00:37.080 --> 00:40.880
+Los escribimos normalmente, colocándole
+ese nombre de
+
+00:40.880 --> 00:44.680
+variable que queremos y seguido vamos a
+colocar o comillas
+
+00:44.680 --> 00:46.680
+simples o comillas
+dobles.
+
+00:46.680 --> 00:50.280
+A mí me encantan las comillas simples y
+podemos colocar,
+
+00:50.280 --> 00:51.320
+por ejemplo,
+tere.
+
+00:51.320 --> 00:54.600
+Aquí puedes colocar punto y coma o también
+puedes ignorar el
+
+00:54.600 --> 00:56.560
+punto y coma porque ya JavaScript lo hace
+por
+
+00:56.560 --> 00:57.760
+nosotros.
+
+00:57.760 --> 01:00.600
+Por otro lado, tenemos los tipos de datos
+que son
+
+01:00.600 --> 01:03.840
+numéricos o number, que en esencia también
+nos va a
+
+01:03.840 --> 01:05.760
+indicar un
+número.
+
+01:05.760 --> 01:08.480
+Y ello también lo vamos a escribir con un
+nombre de
+
+01:08.480 --> 01:10.200
+variable, en este caso, por ejemplo,
+
+01:10.200 --> 01:15.240
+para indicar la edad de tere y le podemos
+colocar 25.
+
+01:15.240 --> 01:17.720
+Otro tipo de datos serían los booleanos.
+
+01:17.720 --> 01:19.760
+Vamos a colocar acá
+boolean.
+
+01:19.760 --> 01:22.640
+Nuevamente vamos a escribir un nombre de
+variable.
+
+01:22.640 --> 01:27.120
+Por ejemplo, vamos a decir si es mayor de
+edad o no es mayor de
+
+01:27.120 --> 01:29.960
+edad, que para esto nos sirven los
+booleanos para indicar si
+
+01:29.960 --> 01:32.160
+eso es verdadero o si es
+falso.
+
+01:32.160 --> 01:36.320
+Y aquí le colocamos es mayor de edad.
+
+01:36.320 --> 01:40.680
+Le estamos como preguntando y él nos va a
+decir si es verdad o
+
+01:40.680 --> 01:41.080
+si
+no.
+
+01:41.080 --> 01:44.080
+Entonces, si es verdad, le colocamos true
+o si no,
+
+01:44.080 --> 01:45.880
+le podemos colocar
+false.
+
+01:45.880 --> 01:49.120
+Entonces, en este caso, claro, ella es
+mayor de edad.
+
+01:49.120 --> 01:53.520
+Seguido, vamos a colocar el tipo de dato nulo.
+
+01:53.520 --> 01:56.040
+Estos tipos de datos nulos nos indican,
+
+01:56.040 --> 01:58.120
+así como su nombre le indica, un vacío,
+
+01:58.120 --> 02:00.920
+como si no existiera absolutamente nada.
+
+02:00.920 --> 02:04.400
+Pero también nos ayuda muchísimo
+justamente para saber si hay
+
+02:04.400 --> 02:05.600
+algo o si
+no.
+
+02:05.600 --> 02:09.880
+Entonces, podríamos decir, no hay valor,
+
+02:09.880 --> 02:11.440
+como si fuera una
+pregunta.
+
+02:11.440 --> 02:14.880
+Y acá le vamos a decir, en efecto, está vacío.
+
+02:14.880 --> 02:19.560
+Entonces, este nul nos va a indicar o nos
+va a asegurar que
+
+02:19.560 --> 02:20.920
+no hay nada
+allí.
+
+02:20.920 --> 02:24.120
+Por otro lado, también hay otro muy
+similar que se llama
+
+02:24.120 --> 02:25.000
+undefined.
+
+02:25.000 --> 02:28.120
+Entonces,
+undefined.
+
+02:28.120 --> 02:30.040
+Y vamos a colocar un
+nombre.
+
+02:30.040 --> 02:32.120
+Aquí se me borró este
+nul.
+
+02:32.120 --> 02:34.040
+Y colocamos nuevamente un
+nombre.
+
+02:34.040 --> 02:36.640
+Puede ser no
+definido.
+
+02:36.640 --> 02:38.880
+Y acá le decimos
+undefined.
+
+02:38.880 --> 02:43.000
+Entonces, este tipo de dato también nos
+sirve para indicar
+
+02:43.000 --> 02:45.680
+que, en efecto, tampoco hay
+nada.
+
+02:45.680 --> 02:49.640
+Este valor normalmente no lo colocamos
+nosotros como
+
+02:49.640 --> 02:50.980
+programadores.
+
+02:50.980 --> 02:53.720
+Esto, en esencia, no lo da JavaScript.
+
+02:53.720 --> 02:58.120
+Es decir, si no hay nada o no hay un valor
+definido,
+
+02:58.120 --> 03:01.240
+como su nombre lo indica, JavaScript nos
+va a decir,
+
+03:01.240 --> 03:04.240
+en esencia, no está definido o no hay nada.
+
+03:04.240 --> 03:06.640
+Este nul, nosotros como programadores,
+
+03:06.640 --> 03:10.600
+sí lo utilizamos para indicar que no hay
+algo como tal.
+
+03:10.600 --> 03:13.840
+Entonces, acá, lo único que hay que tener
+en cuenta es que
+
+03:13.840 --> 03:16.600
+esto normalmente no lo da JavaScript para
+indicarnos
+
+03:16.600 --> 03:17.360
+algo.
+
+03:17.360 --> 03:21.080
+Y nosotros, como programadores, podemos
+utilizar este para
+
+03:21.080 --> 03:23.080
+indicar que, en efecto, hay algo vacío.
+
+03:23.080 --> 03:26.440
+Aunque JavaScript también nos puede
+arrojar esto en algún
+
+03:26.440 --> 03:30.080
+momento de la existencia en nuestro código.
+
+03:30.080 --> 03:34.040
+Ahora, vamos a seguir con otros dos que no
+son tan utilizados,
+
+03:34.040 --> 03:37.280
+pero que también es importante tenerlos en
+cuenta por si los
+
+03:37.280 --> 03:39.240
+necesitamos en algún
+momento.
+
+03:39.240 --> 03:40.320
+Ellos son
+quiénes?
+
+03:40.320 --> 03:43.880
+El símbolo que nos va a indicar un valor
+único.
+
+03:43.880 --> 03:46.320
+Entonces, si queremos que algo sea único,
+
+03:46.320 --> 03:49.660
+como un ID de un usuario, podemos utilizar,
+por ejemplo,
+
+03:49.660 --> 03:50.760
+este
+símbolo.
+
+03:50.760 --> 03:51.840
+¿Cómo lo
+colocamos?
+
+03:51.840 --> 03:56.480
+De nuevo, escribimos nuestra variable
+símbolo único.
+
+03:56.480 --> 04:00.120
+Y allí le vamos a colocar su
+correspondiente valor.
+
+04:00.120 --> 04:02.480
+¿Cómo vamos a escribir un
+símbolo?
+
+04:02.480 --> 04:07.040
+Le decimos símbol y le colocamos entre
+paréntesis el
+
+04:07.040 --> 04:11.240
+valor que nosotros queremos colocar o
+asignar como valor
+
+04:11.240 --> 04:12.200
+único.
+
+04:12.200 --> 04:14.080
+Y también lo colocamos entre comillas,
+
+04:14.080 --> 04:16.320
+puede ser comillas simples en este caso.
+
+04:16.320 --> 04:18.320
+Y le decimos, por ejemplo,
+único.
+
+04:18.320 --> 04:20.760
+Entonces, lo único que hay que tener en
+cuenta es que lo
+
+04:20.760 --> 04:25.120
+tenemos que añadir a esa forma de
+escritura para que ya le
+
+04:25.120 --> 04:28.360
+entienda que es un valor completamente único.
+
+04:28.360 --> 04:31.440
+Y el último sería datos muy grandes.
+
+04:31.440 --> 04:34.040
+En cuanto a números, ¿qué pasaría si
+queremos tener el
+
+04:34.040 --> 04:36.040
+número pi, pero
+gigantesco?
+
+04:36.040 --> 04:39.960
+Entonces, él nos va a permitir almacenar
+este tipo de valores.
+
+04:39.960 --> 04:40.960
+Vamos a
+escribirlo.
+
+04:40.960 --> 04:43.080
+Sería big
+int.
+
+04:43.080 --> 04:47.560
+Y aquí, en este big int, colocamos de
+nuevo un nombre de
+
+04:47.560 --> 04:50.840
+variable, puede ser número
+grande.
+
+04:50.840 --> 04:53.880
+Y allí le podemos colocar
+2n.
+
+04:53.880 --> 04:56.600
+Este sería uno de los números más grandes
+que tenemos en
+
+04:56.600 --> 04:57.640
+JavaScript.
+
+04:57.640 --> 05:01.680
+Así ya quedarían nuestros tipos de datos
+que son primitivos.
+
+05:01.680 --> 05:06.600
+Por otro lado, tenemos los tipos de datos
+que son complejos.
+
+05:06.600 --> 05:10.680
+Voy a cerrar aquí nuestra terminal y vamos
+a colocar
+
+05:10.680 --> 05:14.280
+unos comentarios para ya empezar con los
+complejos.
+
+05:14.280 --> 05:19.680
+Y estos complejos son, en esencia, objeto,
+object.
+
+05:19.680 --> 05:21.280
+¿Y cómo lo vamos a
+escribir?
+
+05:21.280 --> 05:23.520
+Vamos a escribir un nombre de variable,
+
+05:23.520 --> 05:25.480
+que en este caso puede ser
+carro.
+
+05:25.480 --> 05:29.000
+Y ese carro yo quiero que tenga varias
+características.
+
+05:29.000 --> 05:34.520
+Por ejemplo, que tenga una marca, el modelo,
+el color.
+
+05:34.520 --> 05:37.640
+Y cada vez que nosotros queremos añadirle
+como varias
+
+05:37.640 --> 05:40.480
+características a algo en particular,
+
+05:40.480 --> 05:42.840
+así es que escribimos nosotros como ese
+objeto.
+
+05:42.840 --> 05:45.320
+Entonces, vamos a abrir
+llaves.
+
+05:45.320 --> 05:49.680
+Vamos a decirle en este caso que ese carro
+tiene una marca,
+
+05:49.680 --> 05:51.680
+Tesla, por
+ejemplo.
+
+05:51.680 --> 05:52.640
+Tesla.
+
+05:52.640 --> 05:55.440
+Y que también tiene, por ejemplo, un modelo,
+
+05:55.440 --> 05:59.320
+modelo, que es Model
+S.
+
+05:59.320 --> 06:02.440
+Entonces, aquí ya estamos haciendo un objeto,
+
+06:02.440 --> 06:05.000
+porque en esencia vamos a escribir carro,
+
+06:05.000 --> 06:08.080
+que es el que nosotros queremos, y le
+estamos definiendo unas
+
+06:08.080 --> 06:10.080
+características
+propias.
+
+06:10.080 --> 06:13.080
+¿Como cuál? ¿Como la marca o como el
+modelo?
+
+06:13.080 --> 06:16.440
+Por otro lado, tenemos lo que son los arrays,
+
+06:16.440 --> 06:20.440
+que también en otros lenguajes les puedes
+conocer como listas.
+
+06:20.440 --> 06:21.720
+¿Cómo las
+escribimos?
+
+06:21.720 --> 06:24.600
+Le decimos let
+frutas.
+
+06:24.600 --> 06:28.040
+En este caso, vamos a escribir como un
+conjunto de esas
+
+06:28.040 --> 06:28.600
+frutas.
+
+06:28.600 --> 06:32.320
+Entonces, cada vez que queremos escribir
+un conjunto de algo,
+
+06:32.320 --> 06:36.360
+un grupo de algo, justamente utilizamos
+los arrays.
+
+06:36.360 --> 06:39.760
+Estos los escribimos con estos corchetes.
+
+06:39.760 --> 06:43.920
+Y por dentro vamos a empezar a escribir
+como manzana,
+
+06:43.920 --> 06:45.040
+banano, lo que
+sea.
+
+06:45.040 --> 06:47.880
+Entonces, acá podemos poner, por ejemplo,
+manzana.
+
+06:47.880 --> 06:50.560
+Luego, podemos poner
+banano.
+
+06:50.560 --> 06:53.600
+Podemos colocar
+uvas.
+
+06:53.600 --> 06:57.800
+Y ya aquí tendríamos nuestro grupo de frutas.
+
+06:57.800 --> 06:58.680
+¿Dentro de
+qué?
+
+06:58.680 --> 07:00.600
+Dentro de un
+array.
+
+07:00.600 --> 07:04.080
+Las funciones, vamos a escribir aquí
+nuestro título,
+
+07:04.080 --> 07:06.160
+las vamos a escribir de la siguiente manera.
+
+07:06.160 --> 07:09.360
+Primero, hay una palabra clave que es
+function.
+
+07:09.360 --> 07:12.320
+Entonces, la empezamos a escribir de esa
+manera.
+
+07:12.320 --> 07:14.480
+Y luego le debemos colocar un nombre,
+
+07:14.480 --> 07:16.520
+como por ejemplo,
+saludar.
+
+07:16.520 --> 07:19.800
+Y adicional, tiene dos cosas muy importantes.
+
+07:19.800 --> 07:24.680
+La primera es algo como que está esperando
+un contenido,
+
+07:24.680 --> 07:26.640
+como bueno, ¿a quién quiero
+saludar?
+
+07:26.640 --> 07:28.400
+Por ejemplo, entonces, yo le puedo decir,
+
+07:28.400 --> 07:30.480
+ah, yo quiero saludar a
+Pepito.
+
+07:30.480 --> 07:33.960
+Entonces, acá voy a colocar toda esta
+información que quiero
+
+07:33.960 --> 07:37.480
+que llegue a esa función y que la voy a
+necesitar para el
+
+07:37.480 --> 07:38.960
+contenido de esa
+función.
+
+07:38.960 --> 07:43.720
+Y por otro lado, vamos a colocar unas
+llaves y ahí va el cuerpo
+
+07:43.720 --> 07:45.400
+de toda nuestra
+función.
+
+07:45.400 --> 07:48.480
+Esto tiene muchas formas de escribirse.
+
+07:48.480 --> 07:51.240
+También nosotros utilizamos otro tipo de
+funciones,
+
+07:51.240 --> 07:53.680
+pero en esencia, lo más importante acá es
+que
+
+07:53.680 --> 07:57.080
+conozcamos que las funciones también hacen
+parte de los
+
+07:57.080 --> 08:09.640
+tipos de datos que son complejos en
+JavaScript.
+

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/06-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/06-Manipulación de Strings en JavaScript Escritura Concatenación y Substrings.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4b5ccfc15a93e36a12f59bc01f267cedbd864102a9c1da1493a966a13e9b14eb
+size 47713978

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/06-Manipulación de Strings en JavaScript Escritura Concatenación y Substrings.vtt

@@ -0,0 +1,363 @@
+WEBVTT
+
+00:00.000 --> 00:05.800
+Los strings son un tipo de dato primitivo
+que nos permiten escribir una cadena de caracteres.
+
+00:05.800 --> 00:10.640
+Así que vamos a ver cómo escribirlos,
+cómo concatenarlos y también cómo manipularlos.
+
+00:10.640 --> 00:14.680
+Para escribir un string, lo que hacemos es
+crear nuestro nombre de variable,
+
+00:14.680 --> 00:16.680
+yo le voy a colocar
+string1,
+
+00:16.680 --> 00:20.400
+y lo más importante acá es colocarle comillas.
+
+00:20.400 --> 00:24.800
+Estas comillas pueden ser simples, dobles
+o invertidas.
+
+00:24.800 --> 00:32.200
+Entonces, si yo quiero trabajar con
+comillas sencillas, voy a escribirlo de esta manera y ya quedaría mi string.
+
+00:32.200 --> 00:37.000
+Si quiero hacer eso mismo, lo puedo hacer
+con comillas dobles.
+
+00:37.000 --> 00:42.000
+Entonces, por ejemplo, sería JavaScript es
+genial.
+
+00:42.000 --> 00:49.200
+Y podemos también utilizar las comillas
+invertidas, que en este caso sería string3,
+
+00:49.200 --> 00:56.000
+y aquí le decimos, bueno, tengo la comilla
+invertida y dentro le puedo colocar cualquier cosa.
+
+00:56.000 --> 01:02.800
+Lo interesante de estas comillas
+invertidas es que podemos concatenar lo que son strings.
+
+01:02.800 --> 01:07.200
+¿Qué significa concatenar? Pues que
+podemos sumar strings.
+
+01:07.200 --> 01:08.200
+Vamos a
+verlo.
+
+01:08.200 --> 01:15.200
+Yo coloco acá el signo pesos, las llaves,
+y le puedo decir que quiero utilizar este string número 1
+
+01:15.200 --> 01:18.600
+y que adicional quiero completar ese mensaje.
+
+01:18.600 --> 01:25.000
+¿Cómo lo completo? Ahí dentro le digo,
+hola mundo, feliz, por ejemplo, y una carita feliz.
+
+01:25.000 --> 01:29.400
+Entonces, para esto nos van a servir estas
+comillas que son invertidas.
+
+01:29.400 --> 01:33.800
+Estas que son simples y dobles en sí no
+tienen diferencia,
+
+01:33.800 --> 01:37.800
+pero lo ideal es que si estás trabajando
+en un proyecto real,
+
+01:37.800 --> 01:40.600
+tengas consistencia a lo largo de tu código.
+
+01:40.600 --> 01:45.200
+Entonces, si tu código todo tiene comillas
+sencillas, trátalo de utilizar así siempre.
+
+01:45.200 --> 01:47.400
+Si son dobles, así
+siempre.
+
+01:47.400 --> 01:52.400
+Solamente para que se vea más bonito,
+más elegante y haya consistencia en todo el código.
+
+01:52.400 --> 01:55.800
+Ahora, vamos a ver esto, cómo sería
+nuestra terminal.
+
+01:55.800 --> 01:58.200
+Voy a colocar unos
+console.log.
+
+01:58.200 --> 02:04.800
+Entonces, console.log, que esto nos va a
+permitir, por supuesto, imprimir esto que hicimos en la terminal.
+
+02:04.800 --> 02:09.600
+Yo voy a copiarme por acá estos strings y
+voy a guardar.
+
+02:09.600 --> 02:16.400
+Con node le digo node strings, enter,
+y veo que sale hola mundo,
+
+02:16.400 --> 02:22.000
+JavaScript es genial, y adicional tenemos
+nuestro primer string, que es hola mundo,
+
+02:22.000 --> 02:26.000
+con la concatenación de otro string que
+sería feliz.
+
+02:26.000 --> 02:29.600
+Por otro lado, también hay otra forma de
+concatenar.
+
+02:29.600 --> 02:34.200
+¿Cómo sería? Le decimos let string 4,
+
+02:34.200 --> 02:41.600
+y también lo que le decimos es string 1 más,
+por ejemplo, string 2.
+
+02:41.600 --> 02:45.600
+Entonces, vamos a guardar, corremos otra
+vez nuestro código,
+
+02:45.600 --> 02:50.000
+y aquí ya nos sale que tenemos hola mundo,
+feliz, más,
+
+02:50.000 --> 02:55.200
+ah, no, bueno, nos falta el console.
+log, entonces vamos a guardar, correr nuevamente,
+
+02:55.200 --> 03:00.800
+y ahí sí, hola mundo, y ya tenemos la
+concatenación, es decir, la suma de otro string,
+
+03:00.800 --> 03:03.600
+que en este caso es JavaScript, es genial.
+
+03:03.600 --> 03:08.400
+Sin embargo, la frase nos queda aquí junta,
+este mundo y JavaScript,
+
+03:08.400 --> 03:14.200
+y lo que podemos hacer en este tipo de
+casos es darle o proporcionarle ese espacio que queremos.
+
+03:14.200 --> 03:18.200
+¿Cómo lo hacemos? Le podemos colocar
+comillas dobles, comillas sencillas,
+
+03:18.200 --> 03:23.800
+con un espacio en medio, y luego le
+colocamos el signo más otra vez.
+
+03:23.800 --> 03:28.200
+Entonces, nuevamente, corremos nuestro código,
+y aquí ya vemos que,
+
+03:28.200 --> 03:32.400
+en efecto, nos dejó ese espaciocito entre
+los dos strings.
+
+03:32.400 --> 03:39.400
+Ahora, si yo te digo cuántos caracteres
+tiene este string, ¿cuál sería tu respuesta?
+
+03:39.400 --> 03:42.800
+Bueno, seguramente como seres humanos
+empezaríamos a contar.
+
+03:42.800 --> 03:47.000
+H sería uno, O sería dos, y así sucesivamente.
+
+03:47.000 --> 03:51.800
+Pero si ya tenemos un programa y estamos
+trabajando, por supuesto, con JavaScript,
+
+03:51.800 --> 03:56.800
+ya tenemos una gran cantidad de
+funcionalidades que nos provee JavaScript
+
+03:56.800 --> 03:58.800
+para hacer esto muchísimo más fácil.
+
+03:58.800 --> 04:04.000
+Entonces, voy a colocar por acá otro
+string con otra frase, voy a decirle frase,
+
+04:04.000 --> 04:08.400
+igual a, y voy a colocar mis comillas
+sencillas.
+
+04:08.400 --> 04:16.600
+Voy a hacer cualquier frase, voy a colocar
+en este caso, JavaScript es extremadamente genial.
+
+04:16.600 --> 04:19.600
+Aquí coloqué un par de mayúsculas también,
+
+04:19.600 --> 04:22.400
+porque te voy a enseñar un par de cositas
+más adelante.
+
+04:22.400 --> 04:27.000
+Entonces, si yo quiero saber la longitud
+de esta frase, lo que hago es decir,
+
+04:27.000 --> 04:33.800
+console.log, allí voy a colocar la frase,
+y a éste le voy a colocar un punto,
+
+04:33.800 --> 04:39.000
+y le digo, length. Vamos a guardar, vamos
+a correr el código,
+
+04:39.000 --> 04:42.200
+pero antes de todo voy a comentar esto que
+hicimos acá
+
+04:42.200 --> 04:46.800
+para que no nos confundamos con este
+último ejercicio que estamos haciendo.
+
+04:46.800 --> 04:50.800
+Corremos el código, y aquí ya tenemos 35.
+
+04:50.800 --> 04:54.400
+Entonces, lo que hizo JavaScript fue
+empezar a contar carácter por carácter,
+
+04:54.400 --> 04:58.400
+incluyendo los espacios, y nos arrojó este
+valor numérico.
+
+04:58.400 --> 05:03.400
+Ahora, si yo ya no quiero que esta frase
+tenga un par de mayúsculas,
+
+05:03.400 --> 05:08.800
+sino que todos sean minúsculas, lo que
+hago es colocar otro console.log,
+
+05:08.800 --> 05:12.400
+ya no vamos a colocar el length, sino que
+colocamos punto,
+
+05:12.400 --> 05:20.000
+to lowercase, que esto nos va a indicar
+que queremos esta frase con todas las minúsculas.
+
+05:20.000 --> 05:23.800
+Y por el otro lado, si las quisiéramos
+todas en mayúsculas,
+
+05:23.800 --> 05:26.400
+le colocamos to
+uppercase.
+
+05:26.400 --> 05:30.600
+Y aquí le colocamos estos paréntesis.
+
+05:30.600 --> 05:33.400
+En este caso es no localizing,
+¿no?
+
+05:33.400 --> 05:36.600
+Ahí no lo autocompletó de una vez, en
+Visual Studio Code.
+
+05:36.600 --> 05:40.600
+Vamos a guardar, corremos nuevamente el
+código, y aquí ya nos sale.
+
+05:40.600 --> 05:44.400
+JavaScript es extremadamente genial con
+todas en minúscula,
+
+05:44.400 --> 05:46.900
+y aquí todas en
+mayúscula.
+
+05:46.900 --> 05:54.300
+Y por otro lado, si yo tengo esta frase y
+solamente quisiera tomar la palabra
+
+05:54.300 --> 05:58.200
+JavaScript, también lo pudiéramos hacer,
+¿cómo?
+
+05:58.200 --> 06:07.600
+Con otro console.log, y vamos a decirle
+que la frase solamente tenga algo que se llama
+
+06:07.600 --> 06:12.000
+substring, es decir, una parte de ese string.
+
+06:12.000 --> 06:16.500
+Colocamos substring, y él va a recibir dos
+parámetros.
+
+06:16.500 --> 06:21.440
+El primero es el índex de donde queremos
+que empiece a tomar la frase,
+
+06:21.440 --> 06:24.560
+que en este caso sería
+0.
+
+06:24.560 --> 06:26.680
+Entonces le colocamos acá
+0.
+
+06:26.680 --> 06:31.920
+Y luego va a ser el índex seguido de donde
+queremos que termine.
+
+06:31.920 --> 06:44.720
+Por ejemplo, este sería el 0, A sería 1, B 2,
+A 3, S 4, 5, 6, 7, 8, 9.
+
+06:44.720 --> 06:50.640
+Entonces, si queremos que termine acá,
+le vamos a decir 9 más 1,
+
+06:50.640 --> 06:53.080
+que en este caso sería
+10.
+
+06:53.080 --> 06:53.560
+¿Para
+qué?
+
+06:53.560 --> 06:56.560
+Para que él nos tome esta palabra solamente.
+
+06:56.560 --> 06:59.880
+Entonces, el primero es el índex de donde
+empieza,
+
+06:59.880 --> 07:03.520
+y el último es el último índex más 1.
+
+07:03.520 --> 07:06.120
+Entonces, guardamos y vamos a revisar.
+
+07:06.120 --> 07:28.680
+Y aquí ya nos sale la palabra JavaScript.
+

subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/07-Lecturas recomendadas.txt

@@ -0,0 +1 @@
+https://github.com/platzi/basico-js