El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Comienza tu web con Google Web Starter Kit

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
06:25
  Añadir a marcadores

Transcripción

Actualmente, comenzar a construir un proyecto web es una tarea muy sencilla. No tenemos que batallar mucho en el camino pues ya existen muchas plantillas y paquetes que nos ahorran la configuración inicial. Una gran ventaja de este tipo de paquetes es que, además de que ya traen integradas todas las herramientas necesarias para comenzar a desarrollar, estas siguen generalmente buenas prácticas y guías de estilo estandarizadas, por lo que no tendremos que preocuparnos mucho por cuestiones de desempeño y performance. Una alternativa interesante y que ha venido madurando en el camino, es la de Google con su Web Starter Kit. Que está muy enfocada al performance del sitio final considerando el uso y aplicación de buenas prácticas que ellos mismos reúnen en su sección de "fundamentos web" o web fundamentals, y que vale mucho la pena revisar, y considerar. Dentro de las características importantes a destacar es que este paquete viene con plantillas responsivas, soporte de SAS, método para optimizar el performance, soporte de ES6 y que es la nueva especificación de JavaScript y, además, ofrece algunas herramientas integradas como un servidor web integrado para poder trabajar localmente, opciones de live reload para actualizar la página en la que estamos trabajando apenas guardemos el archivo. También me permite hacer sincronización a través de múltiples dispositivos para ver los cambios en ellos sin tener que ir a cada uno a actualizar y además, tiene una evaluación genial con PageSpeed para validar el comportamiento y velocidad de nuestro sitio. Empezar no es nada difícil ni complicado. Veamos cómo podemos usar este paquete y comenzar con un sitio web desde cero. Tenemos dos maneras de comenzar a utilizar Web Starter Kit. La primera es descargándolo directamente de su sitio web y la segunda, haciendo un clon de su repositorio. El repositorio podremos encontrarlo directamente en: github.com/google/web-starter-kit. Vamos a hacer un clon de este proyecto. Pulsamos en el botón Clone or download copiamos la ruta, y en nuestra línea de comandos vamos a escribir: git clone y pegamos la ruta que vamos a utilizar. Una vez que descarga todo este proyecto, tendremos que seguir algún par de comandos muy sencillos. Pero antes de comenzar a trabajar, vamos a entrar directamente a nuestro proyecto y aquí, primero validemos que tenemos node instalado. Para poder validarlo, escribamos: node -v. Si eso se ha instalado, entonces vamos a verificar ahora que gulp está instalado. Repetimos el mismo proceso pero con gulp. Aquí listo, ya tenemos algunas de las versiones y me indica que está instalado gulp y me indica que está instalado node. Ahora, si te llega a marcar algunos de los otros detalles no te preocupes, la idea es que tengamos instalado el CLI. Simplemente vamos a ejecutar el comando después npm install. Al hacer esto, va a leer el contenido que existe en el archivo package.jason y va a empezar a instalar todo lo que tengamos que utilizar para que este proyecto pueda funcionar de manera adecuada. Una vez que ya tenemos esto, vamos a abrir nuestro proyecto en nuestro editor de código. Al igual que muchos paquetes que dependen de Internet en muchas cuestiones, descargar este tipo de paqueterías suele ser un poco lento. Así que no desesperes, un poco de paciencia y pronto terminará esa descarga. Solamente lo tendrás que hacer una sola vez, así que no te preocupes. Una vez que ya terminó de hacer la instalación simplemente ejecutemos el comando gulp serve. Esto me va a servir para levantar un servidor web de manera local donde yo voy a probar mi código. Como vemos, esto incluye una librería llamada Browser Think con la cual puedo acceder a través de esta dirección IP en cualquier dispositivo móvil que se encuentre dentro de mi red local y estar viendo exactamente el mismo contenido que yo vaya a utilizar. Ahora, simplemente, vamos a copiar esta ruta o puedes pulsar la tecla Ctrl o comando y dar clic sobre el link. Esto te va a llevar a tu navegador a que puedas abrir tu proyecto. Vamos en este caso a copiar toda la URL y vamos a dar Enter. Listo, ya tenemos una plantilla de un proyecto corriendo con Web Starter Kit. Si te das cuenta también, Web Starter Kit incluye material design para poder mostrar los layouts de la página web. A partir de aquí, esto simplemente es código que nosotros podemos modificar a nuestro gusto. Ahora, simplemente, si regresamos a nuestra línea de comandos podemos matar en este caso el servidor y vamos a abrir nuestro código escribiendo code., este es un comando que yo tengo pre-configurado para poder abrir Visual Studio Code. Así ahora, levantamos nuevamente el servidor y vamos a hacer un par de cambios sencillos. En este caso, vamos a abrir la carpeta app, pero antes de continuar, necesitas observar algo. Hay una carpeta que se llama disc, ¿qué sucede? Una vez que tu terminas de hacer todos los cambios que desees en tu página web, lo que tendrás que hacer es un paquete de distribución. Quiere decir que una vez que ya terminaste de hacer todos los cambios, de agregar, conectarte a datos y tu aplicación está lista para poder salir a Internet, simplemente, lo que tendrás que ejecutar en este momento, será ejecutar el comando gulp. Al hacer esto, automáticamente, se comienza a construir el proyecto y se comienza a optimizar, y todo lo que se construye y optimiza en esa sección, automáticamente pasa a la carpeta dist, que esto ya tiene la versión que tú vas publicar en tu sitio web. Es decir, tomarás lo que hay dentro de esta carpeta para que puedas hacer el deploy final de tu proyecto. Ahora, si tú lo que deseas es ya probar tu aplicación y ver cómo funciona, simplemente, vamos a escribir el comando: gulp pagespeed, y al hacerlo va a comenzar a aplicar las pruebas de PageSpeed de Google y nos va a indicar una serie de métricas o resultados sobre cómo funciona nuestro sitio y cuánto tiempo tarda en cargar, etc. Como ves, trabajar con Google Web Starter Kit es una cosa muy sencilla, muy simple y, lo mejor de todo, es algo muy vistoso que nos va a permitir extender y crear muchas aplicaciones web.