Advertisement
  1. Web Design
  2. Google Web Starter Kit

Empieza a desarrollar con Google Web Starter Kit

by
Read Time:5 minsLanguages:

Spanish (Español) translation by Ricardo Vega (you can also view the original English article)

Web Starter Kit es una nueva iniciativa de Google; parte de la misión de agilizar el flujo de trabajo del desarrollo web, y al mismo tiempo, promover las mejores prácticas que sugieren en Fundamentos Web de Google.

El Web Starter Kit ha estado disponible desde hace pocos días al momento de escribir este artículo. Fue lanzado como repositorio público en Github. Ha llamado la atención de la comunidad de desarrollo web y rápidamente se ha ubicado en el primer lugar de tendencias en los repositorios de Github.

A pesar de que existe una gran cantidad de librerías y frameworks, vale la pena explorar el Web Starter Kit. En este artículo, voy a enseñarte varias de sus características principales y también el como utilizarlo para tu próximo proyecto. Sin más que añadir, ¡comencemos!

Acerca de Web Starter Kit

Como su nombre lo indica, Web Starter Kit es un conjunto de herramientas de desarrollo web diseñado como punto de partida para nuevos proyectos. Google, en su repositorio de Github, lo describe como:

Un punto de inicio para el desarrollo web en múltiples dispositivos

Tras hacer una inspección, probablemente notarás que el Web Starter Kit se inspira en herramientas como HTML5 Boilerplate y Yeoman (de hecho, combina lo mejor de ese par de herramientas populares). Web Starter Kit viene cargado con plantillas que sirven como punto de partida las cuales están optimizadas tanto en velocidad como en funcionalidad para múltiples dispositivos.

Trabajamos de forma activa para conseguir la mejor puntuación y velocidad de fotogramas posible en PageSpeed Insights.

Además de eso, también incluye una serie de herramientas para facilitar el desarrollo como: una herramienta de pruebas sincronizada, recarga activa del navegador, revisión de errores de JavaScript, compilador de Sass, miniaturización de CSS, y un optimizador de imágenes. Así como en Yeoman, estas herramientas ya vienen pre-configuradas por lo que podemos comenzar a desarrollar sin perder más tiempo.

Requisitos Previos

Puedes descargar los archivos desde el repositorio de Google. Sin embargo, para aprovechar el Web Starter Kit al máximo en tu nuevo proyecto, es aconsejable tener instaladas las siguientes herramientas en tu sistema:

Git: como mencioné anteriormente, el proyecto Web Starter Kit está alojado en Github. Encontrarás que es más ágil obtener el repositorio mediante el comando git clone en lugar de descargar el archivo Zip. Si utilizas la app de Github, presiona el botón Clone in Desktop en la página del repositorio:

¿No te queda claro para qué sirve git? Echa un vistazo a Git para Diseñadores en Tuts+ Code.

Node.js: muchas de las herramientas que encontrarás en el Web Starter Kit, como JSLinter, están construidas sobre Node.js. Deberán ser instaladas a través de Node Package Manager (NPM). Puedes consultar Instalación de Node y NPM, para mayor información.

Ruby y Sass: Web Starter Kit utiliza gulp-ruby-sass para compilar Sass en CSS, lo cual requiere tanto Ruby como Sass para funcionar. Si eres usuario de OS X o Linux, probablemente ya tengas Ruby instalado. Usuarios de Windows; utilicen RubyInstaller para instalar Ruby. Una vez que Ruby esté instalado, escribe gem install sass desde la línea de comandos para instalar Sass.

Para mayor información sobre la instalación de Ruby y Sass, consulta Mastering Sass: Lesson 1.

Gulp: Utilizar Gulp para manejar muchas de las tareas necesarias durante el desarrollo es de gran ayuda. Con Node.js en tu sistema, instálalo con el siguiente comando:

Por último, asegúrate de que los comandos git y npm están accesibles. Escribe el comando de abajo para asegurarte de que tanto git como npm están funcionando.

Estos comandos deberían mostrar las versiones de git y npm como se ilustra a continuación.

Instalando Web Starter Kit

Bien, para iniciar, navega hacia el directorio en el cual deseas tener tu proyecto (ya sea utilizando comandos, o escribe "cd" en la ventana de la terminal y luego arrastra la carpeta elegida hacia ella antes de presionar "entrar") enseguida, utiliza el siguiente comando para clonar el Web Starter Kit:

Posteriormente, cambia al directorio "web-starter-kit" en el cual se han descargado los archivos del Web Starter Kit.

En el directorio, web-starter-kit/, encontrarás:

  • app/; esta es la carpeta en donde residen todos los archivos fuente sin miniaturizar.
  • package.json; listado de las dependencias.
  • gulpfile.js; contiene la configuración de tareas que ejecutará Gulp.

Dependencias de Web Starter Kit

Web Starter Kit depende de cierto número de paquetes de Node, que incluyen plugins de Gulp, para los distintos procesos de construcción. Por tanto, el próximo paso que tendrás que llevar a cabo es la instalación de los paquetes de Node que se encuentran especificados dentro del archivo "package.json". Realiza esto mediante el comando:

Una buena cantidad de paquetes de Node serán instalados en una carpeta llamada node_modules.

Un Comentario sobre Gulp

A grandes rasgos, Gulp es parecido a Grunt. Ambos son "ejecutores de tareas" que automatizan ciertos procesos durante el desarrollo con la misión de manejar el trabajo tedioso por ti. Normalmente, tendríamos que especificar y configurar las tareas que Gulp va a realizar mediante el archivo gulpfile.js, pero, el Web Starter Kit ya ha hecho esto por nosotros por lo que podemos ejecutar las tareas de Gulp sin necesidad de tocar nada.

Mientras estás en la etapa de desarrollo, escribe el siguiente comando.

Este comando habilitará BrowserSync que se encuentra incorporado y configurado en el archivo gulpfile.js. BrowserSync es una útil herramienta que nos permite probar nuestro sitio web simultáneamente a través de múltiples navegadores. Con BrowserSync, las interacciones de usuario como el desplazamiento, cliqueo y llenado de formularios se verá reflejado en tiempo real a través de todos los dispositivos conectados. Esto nos permite capturar las posibles discrepancias que pudieran ocurrir en cada dispositivo conectado mientras la interacción está ocurriendo. BrowserSync trae consigo un servidor HTTP. Al ejecutar este comando te será proporcionada la dirección de localhost desde la cual podrás acceder al sitio web.

Además, BrowserSync supervisará los cambios realizados en los archivos especificados, incluyendo HTML, hojas de estilo, y las imágenes. Cuando modifiquemos alguno de esos archivos, BrowserSync ejecutará de forma inmediata la tarea especificada en el archivo gulpfile.js

En el momento en el que estés listo para publicar tu sitio web, simplemente ejecuta gulp. Este comando llevará a cabo todas las tareas de Gulp, compilará el proyecto en un paquete distribuible en una carpeta nueva llamada dist/ la cual está lista para ser entregada a tu cliente.

Puedes encontrar una lista detallada de las tareas que puedes realizar con Gulp en Resumen de herramientas de Web Starter Kit.

Guía Básica de Estilos

Web Starter Kit proporciona una Guía de Estilo que provee una serie de estilos básicos para elementos comunes y componentes como la tipografía, botones, enlaces, indicadores de ubicación (breadcrumbs), tablas, íconos, y cuadrícula. Si revisas el archivo fuente también encontrarás los selectores utilizados para producir los estilos.

Puedes encontrar la Guía de Estilo en el directorio app/styleguide la cual está interconectada con las hojas de estilo, así que podemos ver la evolución de la Guía de Estilo en cada ocasión en que la hoja de estilo es actualizada. ¡Brillante!

Basic styling of Featured Icons in Web Starter Kit Style Guide

Nota: Asegúrate de revisar nuestra serie Todo sobre Guías de Estilo.

Conclusión

¡Bien hecho! Hemos descargado y configurado el Web Starter Kit junto con sus dependencias, así que ahora puedes trabajar en tu proyecto.

Tomando en cuenta todo, el Web Starter Kit es un proyecto bastante sólido — a pesar de haber sido lanzado en fase beta. La plantilla y las herramientas están bien configuradas; funcionan tan solo "sacarlas de la caja". Y además, viendo que este proyecto está respaldado por Google y grandes desarrolladores, Web Starter Kit podría rápidamente volverse tan popular como Bootstrap o Foundation. Estoy realmente interesado en ver como evoluciona este proyecto en el futuro.

Referencias Adicionales

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.