En la Chrome Dev Summit 2014, se abordaron muchos temas y APIs nuevas, pero no todo se trata de lo nuevo y brillante.
Si eres un desarrollador web nuevo o incluso un desarrollador experimentado que está a punto de comenzar a explorar nuevas APIs, es probable que sigas estos tres pasos: aprender, compilar e iterar.
Matt Gaunt explica los esfuerzos continuos del equipo de la Plataforma para Desarrolladores de Chrome para abordar estos problemas.
Más información
Fundamentos de la Web es un conjunto de documentación basada en casos de uso que abarca una variedad de temas. El objetivo principal es llevar a los desarrolladores de poco o ningún conocimiento a implementar las prácticas recomendadas lo más rápido posible.
Uno de los objetivos principales de Web Fundamentals es garantizar que, si es la primera vez que abordas un tema, la orientación reduzca la “parálisis por elección” tanto como sea posible. Addy Osmani lo explica perfectamente en Pastry Box.
Si detectas algún problema con el sitio o su contenido, o si quieres que Fundamentos de la Web cubra un tema en particular, envíanos tus comentarios en GitHub para informarnos al respecto.
Compilación
Para ayudarte a iniciar un nuevo proyecto web, creamos el kit de inicio web. Tiene todo lo que necesitas:
- Un proceso de compilación sólido
- Plantilla de código HTML
- Guía de estilo
El proceso de compilación
Para quienes son nuevos en los procesos de compilación, la forma más fácil de pensar en un proceso de compilación es verlo como un programa que toma un conjunto de archivos, realiza ciertas tareas en ellos y genera versiones nuevas en una ubicación diferente. Las tareas optimizan los archivos para mejorar los tiempos de carga, verificar posibles errores o controlar tareas que se pueden automatizar.
En el kit de partida web, tenemos los siguientes procesos:
Reducemos y concatenamos CSS y JavaScript para que el navegador pueda recuperar el archivo rápidamente. El código JavaScript también se ejecuta a través de JSHint para verificar las prácticas recomendadas de JavaScript y los errores de codificación comunes. Las imágenes se reducen con imagemin y puedes obtener reducciones enormes en el tamaño de los archivos con esto. También tenemos un proceso para crear los CSS de los libros de estilo.
Plantilla para HTML multidispositivo
El primer conjunto de código HTML que escribes para una página nueva es bastante estándar y es probable que tengas alguna forma de obtener rápidamente un archivo HTML estándar que funcione bien en varios dispositivos y tamaños de pantalla.
En el kit de partida web, queríamos agregar compatibilidad con cualquier función que desdibujara la línea entre la plataforma y tu sitio, por lo que agregamos compatibilidad con la opción Agregar a la pantalla principal y las pantallas de presentación para Android, Windows Phone, iOS y Opera Coast.
Guía de estilo
El último elemento del kit de partida web es su guía de estilo.
Esto le brinda a cualquier proyecto nuevo un excelente conjunto de estilos y componentes predeterminados que fomentan el desarrollo basado en estilos. Puedes alterar los estilos existentes de los elementos y agregar los tuyos.
En la próxima versión de WSK, que se lanzará a principios del próximo año, estamos trabajando arduamente para simplificar la forma en que se ajusta el libro de estilo y cambiar a un aspecto y una sensación de diseño de material. Mattmostró unamaqueta temprana de cómo podría verse en Chrome Dev Summit. Puedes ver un ejemplo a continuación.
Iteración
Una vez que comiences a poner en práctica tus nuevos conocimientos, querrás usar DevTools para depurar, mejorar y mantener tu trabajo.
Hay algunas funciones nuevas importantes que llegan a DevTools, y Matt las analiza.
Modo de dispositivo
El Modo de dispositivo es una nueva sección de DevTools que te permite ver rápidamente cómo funciona tu sitio en diferentes dispositivos móviles mientras ves las consultas de medios en tu CSS.
Una de las funciones más interesantes del modo de dispositivo es la capacidad de reducir las velocidades de red, lo que te permite simular la experiencia de un usuario en una conexión GPRS, EDGE, 3G, DSL o Wi-Fi.
Generador de perfiles de pintura
Si alguna vez abriste la pestaña de cronograma y presionaste el botón de grabación, es probable que hayas visto algunos eventos de pintura en la cascada. Por lo general, esto sería una caja negra sin forma de saber por qué lo hizo el navegador o qué estaba haciendo.
El generador de perfiles de pintura no te brinda más información sobre lo que hace exactamente el navegador durante esa pintura.
Seguimiento de invalidación
DevTools ahora indica el motivo por el que se produjo una pintura o un diseño siempre que puede. Esto es útil para cualquier persona que esté aprendiendo sobre el cronograma y los comportamientos del navegador, y te permite optimizar tu código para evitar problemas de rendimiento.
Vista de gráfico tipo llama
Esta es una forma muy diferente de ver la información disponible en el esquema de tiempo. Esto facilita ver cómo se superponen las tareas y qué comportamiento del navegador se produjo como resultado de otras tareas.
Visor de fotogramas
En la vista de gráfico de llama, puedes seleccionar un fotograma específico y, dentro de este, podrás explorar qué elementos de la página se promocionaron a una capa compuesta y por qué.
Aprenda. Crea. Iteración
Estos son algunos de los esfuerzos del equipo de Chrome para ayudar a los desarrolladores a ponerse al día con el desarrollo web, así que asegúrate de consultar Conceptos básicos de la Web, el kit de partida de la Web y las nuevas funciones de Herramientas para desarrolladores de Chrome.