Construyendo la primer página de Platzigram

Clase 5 de 46 • Curso Definitivo de JavaScript 2016

Fernando Torres

student•

Una sugerencia: el logo Platzi en la parte superior izquierda no permite ver bien la url. No importa mucho, pero a mi me molesta un poco.

Cristian Sparacino

student•

Totalmente de acuerdo ~

Luis Osvaldo Ledo Torrez

student•

al principio del curso te dan los enlaces

Fredy Bustos

student•

soy el unico que preferiría usar sus propios estilos y no frameworks como Materialize?

Carlos Pérez

student•

Pero a veces para sacar mas rapido el proyecto no queda de otra que aplicarlo.

Enrique Benitez

student•

Si prefiero hacerlos yo mismo igual :p

Daniel Hernández

student•

en el video el profe declara una clase de un boton asi:

<a href="" class="btn btn-fb hiden-on-small-only">Iniciar sesión con Facebook</a>

y es asi,

<a href="" class="btn btn-fb hide-on-small-only">Iniciar sesión con Facebook</a>

Usuario anónimo

user•

buena esa, si sigues hallando más errores sintáticos no olvides indicarlo.
Capaz los nuevos "commits" del proyecto lo corrijan.

Y una nota: al

código

lo que es del

código

Juan Castro

teacher•

el © se puede hacer con © :D

student•

También se puede en windows con ALT + 184 ;)

Roberto Ruiz

student•

Soy yo, o el profesor va EXAGERADAMENTE RAPIDO? Además, da por sentado de que sabemos varias cosas de js aunque dijo en un principio que no importaba si supieras o no algo. MUY mal esto. Extraño a Freddy…

Esteban Jossue Galdamez Perez

student•

lo puedes pausar si gustas

Santiago

student•

Antes de este hay otros tutoriales de javascript básico.

Raúl Segura Nabarret

student•

Les comparto un link de otras opciones de frameworks CSS para implementar material design en nuestro sitio, vale la pena probar más de un framework no solo casarnos con uno.

Pablo Blanco

student•

Muchas gracias por los frameworks de CSS, te pasaste!

Julian Obando

student•

De casualidad alguien tiene la linea de script para el dropdown, no me funciona y en la consola no me sale ningun error...

Gracias !!

Néstor Raúl Guzmán Díaz

student•

Yo ando igual ya probé varios scripts de Jquery y nada igual probé los dropdown que están en la pagina de materialize pero aun nada que me funciona.

Harold Tenorio

student•

Tengo el mismo problemas:( pudieron solucionarlo? :(

Luis Antonio Schmiel Paredes

student•

materializecss ya cambio un poco…
en este video se usa el Dropdown y para que funcione debes incluir tu archivo de js la inicialización:

 document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems, options);
  });

(solo copia y pega la inicialización… esta en las instrucciones de materialize)

John Orellana

student•

muchas gracias me funciono el dropdown

César Antonio Oyarzo Muñoz

student•

es bastante directo el profe.. no explica mucho.. per se entiende.. claro que hay que aprenderse la librería Materiallize..

Jhon Alexander Castillo Forero

student•

Dentro de la pagina de materializecss esta tambien el JQuery

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Luigi Pizarro Caceda

student•

Hace rato que quería hacer algunas pruebas con Materialize, pero no había podido, aprovecharé este curso para chequearlo. Generalmente uso Bootstrap o Foundation.

Hasta donde vamos, no sería muy complejo armar esto sin usar Materialize, seguramente a medida que avancen las clases las cosas se irán complejizando más y Materialize será de mucha más ayuda. Estos frameworks son ideales para hacer prototipos rápidos como el de ahora (30 minutos), seguramente a mano nos habríamos demorado mucho más pero habríamos tenido mayor libertad.

Arturo Muñoz

student•

que bien Materializecss!!

Sebastian Castillo

student•

Excelente Materializecss, me gustó. Hacer ese login sin Materialize, puede no ser tan complejo, un par de horas, y sale. Pero llevar el proyecto completo con css puro, de seguro termina con mi cerebro roto

Nicky Cabrera Cortés

student•

a mi me gusta stylus con (es rápido y flexible) NIB y rupture habríamos hecho lo mismo pero con menos html ... pero para el caso da lo mismo ya que esto es javascript

(podrían hacer un curso de stylus con jeet ;) muchos lo amaran)

David Zonana

student•

Soy yo o son demasiados divs? Esto ya es divitis jaja!!

Fredy Bustos

student•

por eso no me gustan mucho los frameworks

Oliver Amezquita Morales

student•

eso si

Julian Betancourt

student•

Francisco Cancino

student•

hola, se que es un poco tarde, bueno la verdad demasiado, la diferencia es que las entidades van a ser reconocidas en sistemas operativos muy muy muy viejos mientras que el simple sibolo no

Francisco Jose

student•

Esta bien la clase pero podrías haber metido al inico una foto de la página. Además vendría bien decir que necesitas una base de html y css no digas que aquí se aprende todo porque no es así has ido muy rápido para la gente sin experiencia por no decir que en Materialize, debería de haber explicado bastante mejor el concepto de grill con muchos ejemplos y que se entienda bien ya que es algo bastante importante. La clase esta bien pero no digas que no necesitas saber nada porque si que se necesita.

William Reaño Reyes

student•

un curso de desarrollo de aplicaciones de escritorio con javascript usando electrom seria genial

KEVIN BRAYAN LUNA FIGUEROA

student•

En lo personal me gusta Bootstrap pero es bueno aprender un nuevo framework como Materialize

Carlos Enrique Gonzalez Peña

student•

Concuerdo contigo

Juan Manuel

student•

Como creo el atajo para subl, desde la terminal

Luigi Pizarro Caceda

student•

Construyendo la primer página de Platzigram

Bienvenidos

¿Qué necesito para tomar el curso?

Materiales

Descarga el código del proyecto

Conceptos Básicos

Bienvenidos al curso de definitivo de JavaScript

¿Por qué JavaScript?

Construyendo nuestro proyecto

Construyendo la primer página de Platzigram

Introducción a Node.js y Npm

Inicializando nuestro proyecto con Npm

¿Qué son los gestores de paquetes?

Package bundling con gulp y sass

Agregando vistas con Pug

Sirviendo archivos estáticos con Express

Organizando nuestros assets y agregando un favicon

Fix para agregar JavaScript en el cliente

Agregando JavaScript en el cliente

Agregando navegación con Page.js

Automatizando el build

Agregando interfaces de usuario con Yo-yo

Modularizando nuestro proyecto

Agregando la página de /signin

Cambiando el título de la página

Agregando un timeline para los usuarios

Agregando las imágenes de los usuarios al timeline

Agregando la funcionalidad de like

Agregando la fecha de publicación

Utilizando FormatJS para internacionalizar las fechas

Utilizando FormatJS para internacionalizar los textos

Cambiando el idioma y almacenándolo en localStorage

Obteniendo una respuesta del servidor con Superagent

Obteniendo una respuesta del servidor con Axios

Obteniendo una respuesta del servidor con Fetch API

Obteniendo una respuesta del servidor con async/await

Agregando un botón para subir una nueva foto

Subiendo la foto a nuestro servidor web

Conclusiones

Cierre del curso

Es hora de construir el backend de Platzigram

Desafio 1: Hacer la página de un usuario

Desafio 2: Agregar un spinner mientras carga las imágenes del timeline

Desafio 3: Agregar un modal para mostrar una imagen en el perfil del usuario

Sesiones en Vivo

Stream 1: Resolviendo el primer desafío

Stream 2: Resolviendo el segundo desafío

Stream 3: Resolviendo el tercer reto

Stream 4: Resolviendo el cuarto reto

Stream Extra: Acceder a la webcam usando JavaScript

Complementos del curso

Unit testing en JavaScript con Mocha

Entendiendo los tiempos de ejecución en JavaScript

Usando babel en el lado del servidor (en Node.js)