Cambiando el título de la página

Clase 20 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Algo que aporta mucho a la usabilidad del usuario es el poder mostrar en el Title el mensaje correcto de acuerdo a la vista en la que estemos, para eso nos vamos a apoyar de algunos cambios desde el backend además de una nueva librería llamada title, para asegurar que el title cambia de acuerdo a la ruta que elijamos.

Archivos: https://github.com/platzi/curso-definitivo-javascript/blob/master/platzigram16.rar?raw=true

Julian Correa Romero

student•

Este curso de Definitivo JavaScript debería llamarse Curso definitivo de uso de librerías. Comenzó bien npm, nodeJS, gulp, babel esa parte puedo entenderla, pero se empezaron a usar demasiadas librerías innecesarias como YO-YO, empty, title, entre otras. Porque usar empty cuando puedes usar appenChild un innerHTML nativo mas rapido que cualquier plugin fácil de entender y que sobrescribe lo que esta adentro. Ademas si ya estas usando una librería para manipular el DOM como JQUERY y que te permite convertir strings a HTML para que YO-YO agregándole aun mas peso a nuestro proyecto. No me parece que este curso promueve las buenas prácticas de desarrollo. Además veo reflejados los problemas que encuentro en los desarrolladores que entrevisto para que ingresen a la compañía donde trabajo, muchos conocimientos en frameworks y librerias, bajos conocimientos en los fundamentos del lenguaje. Las librerias son utiles y agilizan los proyectos pero hay un balance que se pierde. En lo que llevamos del curso no se han visto patrones de diseño, porque usarlos que en un curso con la palabra definitivo debería entrar a profundidad en este tipo de conceptos.

mgl Brv

student•

Concuerdo contigo. Hasta el momento no se ha enseñado JavaScript, si no, como integrar un montón de librerías y, en ese sentido, el curso estaría bien logrado.

Creo que es un nombre muy marketero.

Miguel Angel Landa Lopez

student•

Afirma, no se quien les diseña los temas de los cursos, creo que los instructores son muy buenos pero hace falta organizar mejor los temas para que uno pueda ir y buscar algo de JavaScript en el curso de Javascript y no un monton de librerias que son excelentes sin embargo deberia de estar con otro nombre: Javascript Librerias con NPM etc...

Gonzalo Martos Donat

student•

No hacen falta las librerías 'empty-element' ni 'title'. Tengamos en cuenta que hemos importado JQuery en nuestro index.pug, por lo que tenemos a nuestra disposición las funciones de esta potente librería en todos los archivos JS con los que estamos trabajando. De esta manera, tanto para vaciar el elemento 'main' como para cambiar el title, bastaría con hacer lo siguiente:

//Ejemplo de template.js de Signin

var page = require('page');

var template = require('./template');

page('/signin', function (context, next) {

   $('title').html('Platzigram - Signin');

   var main = $('#main-container');

   main.empty().append(template);

});

De esta forma, nos ahorramos las librerías y sus respectivos imports y también nos podemos olvidar de modificar modificar el server.js para modificar el title. Sí será necesario añadir el elemento title en index.pug.

Juan Martin Cataldo

student•

IMPRESIONANTE APORTE!

Victor Garcia Civera

student•

Siip muy buen aporte @gonzalomartos para poder ahorrarnos el instalar otra librería.

Victor Gamez

student•

IMPORTANTE!!!
Recomiendo EXTREMADAMENTE esto:

npm uninstall title

y luego, en los index de /signin, /signup

//const   title = require('title')

page('/signup', (ctx,next) => {
 // title('Platzigram - Signup')
  document.title= 'Platzigram - Signup'
  let main = document.getElementById('main-container')
  empty(main).appendChild(template)
})

Es SUMAMENTE importante Comentar las variables y NUNCA BORRARLAS
Asi sabras que es lo que nunca has de usar!

Saludos,

ANDRES GERARDO LOPEZ CASTIBLANCO

student•

Gracias amigo!

Miguel Angel Espeso Alvarez

student•

Gracias compañero, me estaba volviendo loco con el Signin y el Signup…

Carlos López Brú

student•

Para ser mas practicos y no entrar tanto en el lado del servidor.

Dejemos un titulo por defecto en nuestra plantilla si deseamos por ejemplo "Platzigram".
Luego en el metodo title, usemos: title('%o - Signup'), donde %o es el nombre de original.

Espero que les sirva chicos.

Kevin Lozoya Giner

student•

Buena esa, lo veo más sencillo y así me ahorro el objeto del server

Jose R. Torrens Acosta

student•

Caemos en el mismo error de uso de librerías innecesarias para hacer cosas simples. Hay gente (no es mi caso) que está novata en JS y al ver este uso irracional de librerías creen que es la única forma de hacerlo y no es así.

Finalmente pueden o NO, usar la librería y fomentar su uso, pero por lo menos deben indicar cual es la forma de hacerlo paso a paso.

JAIME URQUIZU

student•

TOTALMENTE EN DESACUERDO con todos los que se quejan del uso de ‘paquetes’ que no bibliotecas (libraries) de JS… Estamos yendo poco a poco a una modularización del código estándar de buenas prácticas. Con lo que tenemos se puede ir creando un MVC puesto que lo estamos modularizando perfectamente. Y todos aquellos que dicen que con innerHTML y jquery dicen que ya está… ingenuos… Si a la larga utilizas cualquier cambio en las plantillas con Angular, React o VUE o similares… te llevarás la sorpresa de tener que repetir este curso… QUE NO SE ESTÁN VIENDO libraries, que SE ESTÁ VIENDO cómo modularizar, estandarizar y mejorar el código para hacerlo más reactivo, rápido, eficiente y usable. Todos aquellos que piensen que grandes webapps actuales utilizan Jquery para hacer reaccionar elementos en FRONTEND… quizá deberían sentarse a recapacitar si quieren ser coders en serio… o a lo mejor es que les gusta el espaguetti-code… vaya usted a saber…

JAIME URQUIZU

student•

Por cierto, antes de leer comentarios tan tontos como los de abajo, que critican sin saber, es necesario al 1000% si estás picando código en JS saber las diferencias y/o similitudes entre:

Módulo
Paquete
Librería
Framework
Entorno de desarrollo o Runtime
DOM
Reactividad de elementos

Porque de lo contrario se dicen tontadas como los comentarios que se ven por ahí de trolls anticurso…
Será que si se usan paquetes y no Jquery para hacer que los elementos reaccionen tendrá un propósito (y si no, estudien REACT, VUE, ANGULAR, etc…) JQuery soluciona cambios sencillos en el DOM pero no reacciones entre elementos y/o variables en vistas…

Y digo yo que los ‘coders’ de Instagram sabrán las diferencias de los conceptos de arriba, ¿no? Porque… si es tan fácil con JQuery y ya… ¿por qué han escrito tanto código? Qué retontos… Mañana los llamo y les envío por ‘instagram’ unas fotos del código recomendado por aquí abajo… Pobres tontos de instagram… si con 4-5 líneas ya estaba arreglado!!!

Y en cuanto a comentarios que se leen de que si ‘llevo tanos años haciendo JS y menuda decepción’ o ‘estamos contratando a gente y estos conocimientos , bla, bla…’ no os los creáis. Si queréis estar a la última en JS este curso (y toda la carrera que proporciona Platzi en JS, menos el curso de MONGODB, que lo están renovando, ya sé…) está genial. Es justo lo que se está demandando en JS años 2016 - 2017.

Este curso está genial…, no, lo siguiente. 😃

Rubén Rangel

student•

Por si alguien se le presenta el mismo error, al escribir en el archivo index.pug en la etiqueta title debe ir todo pegado, yo lo coloque title = title y no funciono, luego coloque title=title y funciono perfecto.

Roberto Miguel Spota

student•

a mi me funciono asi:
title= title

Alejandro Roa

student•

En caso de desarrollar una API que contenga un modelo de negocio, se crearía moduleController.js dentro de cada folder perteneciente a cada modulo?

Marco Farías

student•

Parece que el title que hay hoy en día en NPM no es el mismo o es idea mía?. Finalmente tuve que buscarlo en GitHub y copiar el index.js en un nuevo módulo que cree en la carpeta node_modules y quedó funcionando como debería.

Reinaldo Mendoza

student•

Es normal que haya cambiado

Diego Castillo

student•

su Internet vuela

Erick Neftalí Sarmiento Cortes

student•

Wooow cambie los títulos pero sigo con errores tendré que parar para revisar todo.

Juan Castro

teacher•

Ya lo solucionaste?

Raúl Segura Nabarret

student•

¿Habiendo instalado title sigue siendo necesario que en el archivo server.js aún tengamos definido el objeto json con el title?

Giancarlo Vera Burgos

student•

No, ya no es necesario. Instalé el modulo title y agregué los require en cada index.js sin modificar para nada el server.js y me anduvo igual.

Eder Torres

student•

Por qué cuando Sacha puso el comando npm i --save title si instaló la librería de title, cuando en la página dice que es component install component/title ???

JAIME URQUIZU

student•

Porque usa ‘component’ como gestor de paquetes. Hay muchos: NPM, BOWER, COMPONENT, COMPOSER… así que no te preocupes. Arreglado???

ADNbyte

student•

Para hacer una cosa simple usa una librería. Asi reduces demasiado el rendimiento de la aplicación.

JAIME URQUIZU

student•

Se están usando paquetes, no librerías… eso lo primero NPM es un gestor de paquetes. Y esos paquetes está demostrado que son eficientes, así que si se hace así, será por algo.

Rafael Villarreal

student•

Buenas aun cuando puse el titulo en cada una de las rutas en el server.js el titulo solo se me queda en el establecido en el home aunque vaya al signup o al signin
que me recomiendand haga?

Oscar Barajas Tavares

Team Platzi•

Y en que momento volvemos a usar pug.js?

Ricardo Azpeitia P.

student•

Cuando quieras volver usar a templates de pug.js

Fabián Antonio Salgado Sepúlveda

student•

Como se utilizar la librería “TITLE” en este video, se puede reemplazar por la siguiente línea de código:

document.getElementsByTagName('title')[0].innerHTML='[título de acuerdo al contexto]';

en vez de instalar, requerir en cada página y utilizar dentro de Page.

Es solo una opinión.

Miguel Márquez Serrano

student•

"curso definitivo de librerías JS"
señores, un mal título ha originado mucho descontento.

Ramon Molina

student•

todo esto asi tal cual se puede montar en un servidor que alquilamos? que cambios deberíamos de hacer ? perdonen la ignorancia

Diego Forero

Team Platzi•

Primero debes tener en cuenta que la mayoría de hosting compartidos no tienen soporte para node y no te dan acceso a la shell, de resto es solo compilar para producción, por ejemplo minificando archivos de js.

Ramon Molina

student•

tengo un servicio de hosting en hostgator y quisiera probarlo en el ya que lo tengo alquilado desde ya muchas gracias 😄

jhon Penagos

student•

Todo esto se hace en un servidor real paramontar y q funcione

un sitio web ???

Juan Pablo Sotelo Gayol

student•

Se esta trabajando de manera local, para crear el site en un servidor y que tus usuarios puedan utilizar tu app ocupas hacer el deploy en algún sitio como heroku o bien montar tu propio servidor

JAIME URQUIZU

student•

lidermanjhon, esto no es nada… se hace mucho más. Estamos viendo mucho, pero queda mucho más.