¿Por qué usar Web Starter Kit?

25
¿Por qué usar Web Starter Kit? +JulioCesarSilvaGuzman @juliosguz

Transcript of ¿Por qué usar Web Starter Kit?

Page 2: ¿Por qué usar Web Starter Kit?

Estamos

en un época EXCELENTE

para el DESARROLLO

WEB

Page 3: ¿Por qué usar Web Starter Kit?

LO NUEVO y no tan nuevopara FRONTEND

Page 4: ¿Por qué usar Web Starter Kit?

Pero y esto ... ¿QUÉ ES?

Foto por Gratisography

Hola soy Julio el nuevo ...

Page 5: ¿Por qué usar Web Starter Kit?

Html + Css + Javascript

¿SUGERENCIA?

Page 6: ¿Por qué usar Web Starter Kit?

APRENDER

REPETIR

CREAR

COMPARTIRFoto por Morgan Sessions

Page 7: ¿Por qué usar Web Starter Kit?

Usar sin preguntarse el ¿Por qué? Esta bien NUNCA

Publicaciones

antiguas

Información incorrecta

Page 8: ¿Por qué usar Web Starter Kit?

ME HICISTE PERDER EL TIEMPO!!!

Foto por Gratisography

Page 9: ¿Por qué usar Web Starter Kit?

¿Donde encuentro

información sobre Desarrollo Web, Responsive Design y

Herramientas Útiles para iniciar?

Page 10: ¿Por qué usar Web Starter Kit?

WEB FUNDAMENTALS➔ Casos de Uso➔ Las mejores prácticas➔ Practicas fundamentales

https://developers.google.com/web/fundamentals/

Page 11: ¿Por qué usar Web Starter Kit?

DiseñosMultidispositivos

Herramientas Look and Feel

Optimizando el rendimiento

Monetización Integración y acceso a

dispositivos

Principios para diseñar

Formularios y modos de entrada

Imágenes, audio y video

Descubre y distribuye

Hay mucho por ESTUDIAR

Page 12: ¿Por qué usar Web Starter Kit?

WEB STARTER KIT

https://developers.google.com/web/starter-kit/

➔ Herramienta para Desarrollo Multidispositivo

Page 13: ¿Por qué usar Web Starter Kit?

CARACTERÍSTICAS

Uso de componentes como guía de estilos

Sincronización entre dispositivos

Recarga automática del

navegador

Soporte conSASS

Reportes con PageSpeed

ServidorHTTP

Optimización del rendimiento

Plantilla adaptable

multidispositivo

Page 14: ¿Por qué usar Web Starter Kit?

Como

FUNCIONA(Algunas funciones)

Imagemin

MinificadoConcatenación

CompiladoMinificado

Concatenación

normalize.scss global.css all.min.css

global.jsglobal.min.js

background.jpg (200KB) background.jpg (60KB)

Page 15: ¿Por qué usar Web Starter Kit?

LIVE RELOADHerramientas

Page 16: ¿Por qué usar Web Starter Kit?

BROWSERSYNC

Herramientas

Page 17: ¿Por qué usar Web Starter Kit?

SERVIDORHTTP+ARCHIVOSFINALESUso

Page 18: ¿Por qué usar Web Starter Kit?

SERVIDORHTTP+ARCHIVOSFINALESUso

Page 19: ¿Por qué usar Web Starter Kit?

REQUERIMIENTOS

Y algo mas:

Page 20: ¿Por qué usar Web Starter Kit?
Page 21: ¿Por qué usar Web Starter Kit?

EXPERIMENTENPRUEBEN

Empezando conWeb Starter Kit

Asistan a nuestros proximos eventos (Meetups, Codelabs) :

Page 22: ¿Por qué usar Web Starter Kit?

Estoes el

INICIO

y…..

Page 23: ¿Por qué usar Web Starter Kit?

Van a SUFRIR

Page 24: ¿Por qué usar Web Starter Kit?

Estamos

en un época EXCELENTE

para el DESARROLLO

WEB

PERORECUERDEN!!!

Page 25: ¿Por qué usar Web Starter Kit?

GRACIAS :)