Web Starter Kit

Descargar Web Starter Kit (beta)

¿Qué es Web Starter Kit?

Web Starter Kit es una plantilla estable para el desarrollo web. Herramientas para crear una gran experiencia en varios dispositivos y orientadas al rendimiento. Te ayuda a mantenerte productivo mientras sigues las mejores prácticas descriptas en Aspectos básicos de la web de Google. Un sólido punto de partida para profesionales y novatos en la industria

Funciones

Función Resumen
Plantilla adaptable Una plantilla adaptable optimizada para web multipantalla. Con la tecnología de Material Design Lite. Puedes usar esta plantilla o comenzar desde cero por medio de basic.html.
Soporte de Sass Compila Sass en CSS fácilmente, y obtén soporte para variables, mixins y más. (Ejecuta gulp serve o gulp para producción)
Optimización de rendimiento Reduce y concatena JavaScript, CSS, HTML e imágenes para ayudar a mantener la eficiencia de tus páginas. (Ejecuta gulp para crear una versión optimizada de tu proyecto en /dist)
Code Linting El linting de código JavaScript se realiza por medio de ESLint - una herramienta "linter" enchufable para identificar e informar patrones en JavaScript. Web Starter Kit usa ESLint con eslint-config-google, que intenta seguir la guía de estilo de JavaScript de Google.
ES2015 vía Babel 6.0 Soporte de opcional ES2015 por medio de Babel. Para que ES2015 puede quitar la línea "only": "gulpfile.babel.js", del archivo .babelrc. El código fuente de ES2015 se transpilará automáticamente a ES5 para un soporte mayor de navegadores.
Servidor HTTP integrado Un servidor integrado para obtener una vista previa de tu sitio a nivel local mientras desarrollas e iteras
Recarga de navegador en vivo Vuelve a cargar el navegador en tiempo real cada vez que se hace una modificación, sin necesidad de utilizar una extensión. (Ejecuta gulp serve y modifica tus archivos)
Sincronización entre dispositivos Sincroniza los clics, los desplazamientos, los formularios y la recarga en vivo en múltiples dispositivos a medida que modificas tu proyecto. Con la tecnología de BrowserSync. (Ejecuta gulp serve y abre la IP suministrada en otros dispositivos de tu red)
Soporte sin conexión Gracias a nuestro trabajo en Service Worker almacenamiento previo en caché, los sitios que implementan dist en un dominio HTTPS tendrán soporte sin conexión. Este soporte se hace posible gracias a sw-precache.
PageSpeed Insights Métricas de rendimiento web que muestran qué tan bien se desempeña tu sitio en la versión móvil y la versión de escritorio (Ejecuta gulp pagespeed)

Guía de inicio rápido

Descarga el kit o clona el repositorio y compila sobre lo que se incluye en el directorioapp.

Existen dos puntos de inicio HTML entre los que puedes elegir:

  • index.html: el punto de inicio predeterminado, que contiene el diseño de Material Design.
  • basic.html: no incluye diseño, pero sí incluye nuestras mejores prácticas móviles mínimas.

Asegúrate de consultar los documentos de instalación para verificar que tu entorno esté preparado para ejecutar WSK. Una vez que hayas verificado que tu sistema puede ejecutar WSK, comprueba los comandos disponibles para comenzar.

Rendimiento web

Web Starter Kit se esfuerza para ofrecer un punto de inicio de alto rendimiento e innovador. Nuestra prueba media para páginas web puntajes para la plantilla predeterminada incluye un Índice de velocidad de ~1100 (1000 es lo ideal) y un Índice de velocidad de visitas repetidas de ~550 gracias al almacenamiento previo en caché de Service Worker.

Compatibilidad con navegadores

En la actualidad, oficialmente apuntamos a admitir las últimas dos versiones de los siguientes navegadores:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 9+

Si embargo, Web Starter Kit puede usarse en navegadores anteriores, pero nos concentraremos en asegurar que nuestros diseños funcionen de manera óptima en los navegadores mencionados.

Solución de problemas

Si tienes problemas durante la instalación o ejecución de herramientas, consulta nuestra guía de Solución de problemas y luego abre un problema. Nos complacerá ayudarte a resolverlo.

Una opción solo de plantilla

Si prefieres no usar ninguna de nuestras herramientas, borra estos archivos de tu proyecto: package.json, gulpfile.babel.js, .jshintrc y .travis.yml. Ahora puedes usar la plantilla de manera segura con un sistema de compilación alternativo o sin ningún sistema de compilación, si así lo prefieres.

Documentos y recetas

Inspiración

Web Starter Kit está inspirado en Mobile HTML5 Boilerplate y en generator-gulp-webapp de Yeoman, y durante su desarrollo se consideraron aportes de colaboradores de ambos proyectos. Nuestras Preguntas frecuentes tienen como objetivo responder preguntas frecuentes sobre el proyecto.

Más información

Para obtener más información, consulta el código, o para participar, consulta nuestro informe Git en https://github.com/google/web-starter-kit