Aspectos básicos del desarrollo web móvil

En la Chrome Dev Summit 2014 se abordaron muchos temas y novedades sobre API nuevas, pero no todo se trata de lo nuevo y lo 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 y, luego, iterar.

Matt Gaunt cubre los esfuerzos continuos por abordar estos problemas del equipo de la Plataforma para desarrolladores de Chrome.

Aprende

WebFundamentals en HTML5Rocks

Fundamentos de la Web es un conjunto de documentación basada en casos de uso que abarca varios temas. El objetivo principal es que los desarrolladores tengan conocimientos mínimos o nulos y, luego, implementen las prácticas recomendadas lo más rápido posible.

Uno de los objetivos principales de Web Fundamentals es garantizar que, si eres nuevo en un tema, la orientación reduce la "parálisis de las opciones" tanto como sea posible. Addy Osmani cubre esto a la perfección en pastelería.

Si detectas algún problema en el sitio o su contenido, o si quieres que Web Fundamentals abarque un tema específico, envíanos comentarios en GitHub.

Compila

Web Starter Kit en dispositivos de rango

Para ayudarte a iniciar un nuevo proyecto web, creamos Web Starter Kit. Tiene todo lo que necesitas:

  • Un proceso de compilación sólido
  • HTML estándar
  • Guía de estilo

Proceso de compilación

Para quienes no tienes experiencia en 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 y 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 Web Starter Kit tenemos los siguientes procesos:

Diagrama del proceso de compilación de Web Starter Kits

Minificamos y concatenamos CSS y JavaScript para que el navegador pueda recuperar el archivo rápidamente. Además, el código JavaScript se ejecuta a través de JSHint para verificar las prácticas recomendadas y los errores de programación comunes de JavaScript. Las imágenes se reducen con imagemin y esto puede obtener reducciones enormes en el tamaño del archivo. También tenemos un proceso para crear las guías de estilo CSS.

Plantilla para HTML multidispositivo

El primer conjunto de HTML que escribes para una página nueva es un estándar bastante precipitado, y lo más probable es que tengas alguna manera de obtener rápidamente un archivo HTML de archivo que funcione bien en varios dispositivos y tamaños de pantalla.

En Web Starter Kit, quisimos agregar compatibilidad con cualquier función que difumine las líneas entre la plataforma y tu sitio, por lo que agregamos compatibilidad con la función para agregar a la pantalla principal y las pantallas de presentación para Android, Windows Phone, iOS y Opera Coast.

Ejemplo de Web Starter Kit para agregar a la pantalla principal

Guía de estilo

Guía de estilo del kit de inicio web en la Chromebook Pixel.

La última pieza de Web Starter Kit es su Guía de estilo.

Esto le brinda a cualquier proyecto nuevo un gran conjunto de estilos y componentes predeterminados que fomentan el desarrollo basado en el estilo. Puedes modificar los diseños existentes de los elementos y agregar uno propio.

En la próxima versión de WSK, que se lanzará a principios del próximo año, estamos trabajando arduamente para simplificar la guía de estilo y cambiar a un aspecto de Material Design. Mattmostró unasimulación temprana de cómo podría ser en la Cumbre de desarrolladores de Chrome. Puedes ver un ejemplo a continuación.

Simulación de la guía de estilo de Material Design del Kit de inicio web.

Iteración

Una vez que comiences a poner en práctica tus nuevos conocimientos, te recomendamos que uses las Herramientas para desarrolladores para depurar, mejorar y mantener tu trabajo.

Hay algunas funciones nuevas muy importantes que llegan a Herramientas para desarrolladores, y Matt las revisa.

Modo de dispositivo

Device Mode es una nueva sección de Herramientas para desarrolladores que te permite ver rápidamente cómo funciona tu sitio en diferentes dispositivos móviles mientras visualizas las consultas de medios en tu CSS.

Captura de pantalla de la función Modo de dispositivo en las Herramientas para desarrolladores de Chrome.

Una de las excelentes funciones del Modo de dispositivo es la capacidad de limitar la velocidad de la red, lo que te permite simular la experiencia de un usuario con una conexión GPRS, EDGE, 3G, DSL o Wi-Fi.

Captura de pantalla de la limitación de la red en las Herramientas para desarrolladores de Chrome.

Generador de perfiles de pintura

Si alguna vez abriste la pestaña del cronograma y presionaste el botón de grabación, es probable que hayas visto algunos eventos de pintura en la cascada. Normalmente, se trataba de una caja negra sin forma de que supieras por qué el navegador había funcionado ni qué estaba haciendo.

El generador de perfiles de pintura no te brinda más información sobre lo que hace exactamente el navegador durante el proceso de pintura.

Captura de pantalla del generador de perfiles de pintura en las Herramientas para desarrolladores de Chrome.

Seguimiento de invalidación

Las Herramientas para desarrolladores ahora proporcionan un motivo por el que se produce una pintura o un diseño siempre que pudo. Esto es útil para cualquier persona que esté al tanto del cronograma y los comportamientos del navegador, y te permite optimizar el código para evitar problemas de rendimiento.

Captura de pantalla del seguimiento de invalidación en Herramientas para desarrolladores de Chrome.

Vista de gráfico tipo llama

Esta es una manera muy diferente de ver la información disponible en el cronograma. Esto permite ver mucho más fácilmente cómo se superponen las tareas y qué comportamiento del navegador se produjo como resultado de otras tareas.

Captura de pantalla de Flame Chart View en las Herramientas para desarrolladores de Chrome.

Visor de marcos

En la vista de gráfico tipo llama, puedes seleccionar un marco específico y, dentro de él, explorar qué elementos de la página se trasladaron a una capa compuesta y por qué se promovieron.

Captura de pantalla del Visor de marcos en las Herramientas para desarrolladores de Chrome

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 Fundamentos de la Web, Web Starter Kit y las nuevas funciones de las Herramientas para desarrolladores de Chrome.