Agregando un timeline para los usuarios

Clase 21 de 46 • Curso Definitivo de JavaScript 2016

Diego Burlando

student•

Saludos, para quienes no consiguen el CDN de fontawesome : link(rel=‘stylesheet’, href=‘’)

Eder Torres

student•

cómo es que conseguiste este link, en la página de fontawesome sale otro !!!?

Ramon Molina

student•

encontre el mismo ahi 😮

Enrique Benitez

student•

También deberíamos de minificar el css y el js con minify-css o uglify.

Miguel Cobas

student•

Es una buena practica ya que estoy ayuda al tiempo de carga

Reinaldo Mendoza

student•

Gracias por el dato

Roberto Daniel Rojas Montecinos

student•

es más rápido ejecutar "gulp styles" si solamente se está editando los estilos

Erick Neftalí Sarmiento Cortes

student•

Veo y veo los vídeos y siento que esta muy avanzado, me pierdo por lo rápido que explica.

José de Jesús Uscanga Molina

student•

puedes repetir los videos.

Oliver Amezquita Morales

student•

estas chavo, regresate al de css

Ahmed

student•

Con estos cursos aprendí muchas cosas!! Una de ellas es que el editor de texto favorito de Sacha es Sublime Text. :-p

Jorge Mario Carrillo Lopez

student•

Adentro del template, a parte de requerir por ejemplo:
var yo = require("yo-yo);
module.exports = yo // Escribes tu código html ;
¿Se puede también requerir pug para escribir con pug ese html? o ¿En JS para crear elementos html debes escribirlos en HTML?

Usuario anónimo

user•

muy buena pregunta! ¿alguien sabe la respuesta?

Jaider Garcia

student•

Hola!, Claro que se puede, yo hago todo el layout con Pug y extiendo en mis vistas .pug de ese layout principal hecho en .pug, sin tanto complique y funciona de la misma manera spa. Ejemplo.
Layout.pug:

doctype html
html(lang="en")
include ../partials/head
body
include ../partials/navigation (Estos son archivos parciales para completar la vista. Este es el menu)
include ../partials/flash (mensajes dinamicos)
block content (Contenido....esto es lo que realmente se cambia en las vistas)
include ../partials/footer (Es el mismo para todas las vistas)
block scripts

home.pug
extends ../layouts/layout

block head
title #{application} · Welcome!

block styles
link(rel='stylesheet', href='/lib/animate.css/animate.css')

block content
Lo que sea

block scripts
...

Oliver Amezquita Morales

student•

deberia de tambien automatizar sass con gulp

Ema -

student•

Eso es lo que esta haciendo! si cuando al principio nosotros editamos el .sass y lo pazamos a .css en la carpeta public automatizado por Gulp

Evert Escalante

student•

exacto @emanuelmathiascanova

Miguel Márquez Serrano

student•

Creo que en gran medida este curso es tan engorroso porque son pasos y pasos y realmente no queda claro porque se dan, por ejemplo, y no digo que nadie sepa responder!, pero seguramente la inmensa mayoría no sabe para que se crea este layout/index.js y se le pasa la función layout a template.js…

Este curso te quita las ganas de pasar al siguiente, habrá un embudo bien gordo y seguramente sea el curso con mayor número de abandonos.

Kath Sánchez

teacher•

¡Hola! Muchas gracias por darnos tu feedback honesto.
Tenemos un curso de Fundamentos de JavaScript que es el curso introductorio para este, ya que éste es más avanzado.
https://platzi.com/clases/fundamentos-javascript/
Pero me gustaría saber qué otros temas crees que debemos tocar y profundizar.

Fernando Ontiveros

student•

Ese chiste salvaje e inesperado que el col no es de Colombia sino de columna 😂

Reinaldo Mendoza

student•

Se nota que el profe sabe mucho pero no era un curso de JS?

Evert Escalante

student•

esta pregunta es fuera de contexto, pero alguien sabe cual es el comando de sublime para cuando selecciono varias lineas de codigo y quiero tabular todas a la vez, suceda al presionar la tecla tab?

Diego Forero

Team Platzi•

Si, con la tecla tab te tabula todo el bloque seleccionado a la derecha.

Reinaldo Mendoza

student•

jeje, la respuesta estaba dentro de la pregunta

Ramses Almanza

student•

Buenas noches, una duda después de que hice el paso donde creas el layout al cargar mi pagina no me carga el content y solo me pone el footer, ya revise mi código y esta bien, un saludo.

Roberto Miguel Spota

student•

baja los archivos y sigue con ellos, guardando el que no corre para ver si después podemos ver que paso

Daniel Pino

student•

Era necesario incluir Font awesome?, materialize ya trae iconitos

Miguel Cobas

student•

Solo tienes que usar el método para llamar los iconos de materialize y sin problemas

Martín Varela

student•

No es necesario, pero esta bueno saber como importar fuentes ademas de las del framework

Juan Diego Silva Garcia

student•

para la última versión del CDN de font-awesome despliegan la lista lista y ahí está el link para el archivo .pug

Oliver Amezquita Morales

student•

en el minuto 23 se queda el video parado solo se escucha el sonido

Oliver Amezquita Morales

student•

en el server B, si se ve bien

Erick Neftalí Sarmiento Cortes

student•

Depende de tu conexión porque a mi a veces me pasa y a veces no. Saludos

Rodman M. Swanston C.

student•

Les recomiendo cambiar el css por el siguiente
Esto le permitirá colocar el footer siempre de bajo y resuelve el problema del margin en la parte superior

body {
    background-color: #fafafa;
    color: $secondary-color;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

#main-container {
    //margin: 30px auto;
    flex: 1 0 auto;
}

Kennedy ${{7*7}} Sanchez ${7*7}

student•

Hola Platzi Team.

Los cursos son muy interesantes, pero veo un problema especifico en la mayoria de los cursos. Si tan solo pudieran llevar una secuencia de lo que estan explicando y no ir hacia adelante y luego hacia atras con las explicaciones.

Es decir un momento colocan un codigo, luego 3 capitulos mas adelante lo eliminan y lo colocan en otro lugar, luego vuelven y lo dividen y lo colocan en otra parte. Para el que esta aprendiendo un nuevo lenguaje esto se hace muy dificil, porque lo que creian en un momento que era valido, 3 videos despues se dan cuenta que no era asi y trae mucha confusion.

Entiendo que hacer clases en vivo no es nada sencillo, pero se deberian tener pautas trazadas antes de lanzar un video en vivo y no improvisar.

Aclaro no es solo en este curso, ya he visto varios con la misma tematica.

Saludos.

Esteban José Pagano

student•

en el github no aparece el template de la homepage como se muestra en el video

Tomás Carrión

student•

Para los que no les funcione el icono de facebook, fa-facebook-official
se replazo en la nueva version de font awesome por : fab fa-facebook

Miguel Angel Espeso Alvarez

student•

Hola, yo puse “fa fa-facebook-official” y si que funciona…
Lo hice con esta librería que vi en los comentarios :

link(rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')

¿ Hay alguna otra libreria a la que pueda acceder a los iconos…??
Para poder poner yo los que quiera, aquí solo me guie de los que puso Sacha, y quería elegir yo…
Gracias por el aporte.

Tomás Carrión

student•

Usando la libreria que esta en el sitio de font awesome podes usar todos los iconos de ese libreria

Armando Alamilla Cuellar

student•

tengo un problema con el header Creo que la distribución no es correcta y me aparece la barra de scroll de eje X.

var yo = require('yo-yo');

var template = yo`<nav class="header">
	<div class="nav-wrapper">
		<div class="container">
			<div class="row">
				<div class="col s12 m6 offset-m1">
					<a href="/" class="brand-logo platzigram">A&A|gram</a>
				</div>
				<div class="col s2 m6 push-m10">
					<a href="#" class="btn btn-large btn-flat dropdown-button" data-activates="drop-user">
						<i class="fa fa-user" aria-hidden="true"></i>
					</a>
					<ul id="drop-user" class="dropdown-content">
						<li><a href="#">Salir</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</nav>`;
module.exports = template;

ese es mi código. Ayuda por favor : (

Diego Forero

Team Platzi•

Las columas siempre deben sumar 12, en tu caso en s suman 14 y en m suman 23, revisa y ajusta eso, es la mejor forma de aprende.

José Granado

student•

En la columna del usuario.

<div class="col s2 m2 push-m3">
                                
                                <a href="" class=" btn btn-large btn-flat dropdown-button" data-activates="drop-user">
                                    <i class="fa fa-user" aria-hidden="true"></i>
                                </a>
                                
                            </div>```

body {
    background-color: #fafafa;
    color: $secondary-color;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

#main-container {
    //margin: 30px auto;
    flex: 1 0 auto;
}

var yo = require('yo-yo');

var template = yo`<nav class="header">
	<div class="nav-wrapper">
		<div class="container">
			<div class="row">
				<div class="col s12 m6 offset-m1">
					<a href="/" class="brand-logo platzigram">A&A|gram</a>
				</div>
				<div class="col s2 m6 push-m10">
					<a href="#" class="btn btn-large btn-flat dropdown-button" data-activates="drop-user">
						<i class="fa fa-user" aria-hidden="true"></i>
					</a>
					<ul id="drop-user" class="dropdown-content">
						<li><a href="#">Salir</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</nav>`;
module.exports = template;

<div class="col s2 m2 push-m3">
                                
                                <a href="" class=" btn btn-large btn-flat dropdown-button" data-activates="drop-user">
                                    <i class="fa fa-user" aria-hidden="true"></i>
                                </a>
                                
                            </div>```

Agregando un timeline para los usuarios

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)