Miniatura
0

Curso Responsive para el equipo web de IKEA

Durante el último mes hemos dado un curso de “Reponsive Web” al departamento web de IKEA Mallorca a través de la escuela EDIB.

El curso de 30h, del cual ya hicimos un post hace unas semanas, estaba orientado en un principio a abordar de forma general todos los aspectos relacionados con el “Web Responsive”. Pero una vez comenzado en curso decidimos orientarlo un poco hacia las necesidades específicas del site, más concretamente trabajamos sobre una página de producto, para poder definir y solventar problemas concretos con los que se pudieran encontrar.

Intentamos abordar todos los temas relacionados con el “Reponsive Web”, como el alumnado eran profesionales del desarrollo web pudimos dar por vistos muchos temas y abarcar una buena cantidad campos.

El temario

El curso ha sido bastante intenso, si enumeramos los temas que se han tratado la lista se hace larga, intentaré ser breve.

Premisas

  • Mantenerse actualizado. De la importancia de mantenerse actualizado cuando se desarrolla con nuevas tecnologías (HTML5, CSS3).
  • “Progressive enhancement” (Fallbacks y Polyfills). Emplear “lo nuevo” con un ojo puesto en “lo viejo”.
  • “Mobile First” como mejor opción para mejorar el WPO (Web Performance Optimization).

Valorar un proyecto

  • Estudio de usabilidad y funcionalidades de un proyecto antes de afrontarlo.
  • Delimitar los requerimientos del site mediante el análisis de los usuarios.
  • Jerarquía de la información en cada página. Web semántica.

Html5

  • Mejora del SEO técnico aplicando la lógica a la hora de etiquetar el contenido.
  • Nuevas funcionalidades tanto en estructuras como en formularios.
  • Dota a la página de accesibilidad. Dimos un vistazo a “aria” y a la parte más accesible de html5.

Css3

  • Box-sizing, como pieza fundamental al construir plantillas responsive.
  • Prefijos de cada navegador, su uso y herramientas para proporcionar retrocompatibilidad.
  • Reemplazo de texto por imágenes.
  • Posicionamiento de elementos. Elementos con posicionamiento relativo, absoluto y como se relacionan con float. Control de la posición de un elemento mediante media queries.
  • Pseudoelementos
    • Buenas prácticas con pseudoelemtos.
    • Aplicación a elementos de maquetación. Clearfix con pseudoelementos
    • Añadir elementos ornamentales mediante pseudoelementos.

Maquetación responsive

  • “Mobile First” la mejor alternativa para mejorar el WPO
  • Html5 elementos estructurales <header> <main>
  • Uso de Css para controlar la apariencia y comportamientos. Estructuras en columnas y animaciones.
  • Uso de % y em como medida adaptable de columnas y módulos.
  • Tipografía control de texto y uso de em y rem
  • Uso de media queries para el control de la visualización en diferentes dispositivos.
    • Uso de condicionales en media queries para reiniciar valores.
    • Visualización del contenido en columnas. Modificar el número de columnas dependiendo del tamaño de la ventana con medaiqueries.
  • Control de resultados en navegadores antiguos siempre que utilicemos “Mobile First”, uso de javascript para replicar comportamientos de navegadores modernos en navegadores antíguos.
  • Creación de menús responsive.

Imágenes en responsive

  • Uso, optimización, y modificación (mediante css) de svg como alternativa a iconos e infografías.
  • Control de carga de imágenes de gran tamaño y galerías de imágenes mediante Ajax.
  • Incidencias con el uso de Sprites en Responsive.
  • Ejemplos de reemplazo de texto por imagen.

WPO (Web Performance Optimization)

  • Uso de svg inline, uri y css3 para sustituir imágenes usadas en la “interface”
  • Uso de svg integrado en el html (menos peticiones), conversión a base-64.
  • Compresión de archivos css y js. Compresión del lado del servidor y desde el desarrollo en local.

Pensando en la usabilidad en dispositivos móviles

  • Html5 forms para lanzar utilidades del sistema en los móviles <input type="search">.
  • Uso de <a href="tel:">, en dispositivos móviles (Skype en sobremesa)
  • jQuery en prototipos para mostrar y ocultar información y desarrollo de esas funcionalidades en JavaScript.

Herramientas

  • Markdown. Como escribir html semántico usando una sintaxis muy sencilla.
  • Emmet. Escribir html de forma rápida y eficaz.
  • Sass y Scss
    • Variables (colores).
    • Mixins (clear fix, media queries, botones).
    • Código heredado (Nested code).
    • Compresión de archivos en sass.
    • Fragmentar el código en archivos pequeños reusables.
  • Modernizr. Genera estilos dependiendo de las características del dispositivo. Ejemplo de uso para navegadores que no soportan imágenes en formato svg
  • Bourbon vs “tus mixins”, ventajas e incovenientes de usar frameworks.
  • jQuery y JavaScript.

Estructura de proyectos grandes

  • Atomic patterns, estructuras para proyectos complejos.
  • Fragmentar el código para gestionar menos información.

Al finalizar un proyecto

  • Análisis de la web una vez finalizado el desarrollo, herramientas online para validar código.
  • Test en navegadores antiguos , BrownserStack vs servidores o máquinas virtuales.
  • Test en dispositivos reales.
  • Control de los tiempos de carga, herramientas para controlar y mejorar los tiempos de carga.

La intención de Embat es volver a impartir cursos relacionados todo lo que es el desarrollo web, si estás interesado estate atento a este blog.

Imagen de Flickr

Deja un comentario

Una web debe ser...

Una web
debe ser

Usable

Un usuario aprende cada día. Navega y utiliza servicios web acostumbrándose a tener algunos elementos en determinado lugar y a utilizarlos de cierta manera. Una aplicación es usable si antes de hacer una determinada acción se puede predecir lo que sucederá.

Universal

El punto de mayor incidencia en la universalidad es que la aplicación sea multidispositivo. Poder visualizar desde cualquier dispositivo, lugar, y momento. Y además, disfrutar de una experiencia de usuario plena.

Encontrable

Hablamos de un conjunto de normas, pautas o guías por las que el usuario llega a la aplicación. Debe encontrar la aplicación, pero puede llegar mediante buscadores (SEO), también con recomendaciones, lecturas en medios, desde redes sociales (SMO), y otros métodos (SEM, etc)

Veloz

Como dijo David Cheriton: "Si es rápido y feo, lo utilizarán y te maldecirán, y si es lento, no lo utilizarán". Si una web es rápida repercute en menos gasto mensual, más satisfacción del usuario, y mayor posibilidad de conversión por parte del mismo.

Útil

Un sitio web tiene que ser útil en vistas al usuario para el que está concebido. Hay que entender la necesidad del usuario y poder ofrecer lo que busca. Contenidos, traducciones, herramientas, comparativas, utilidades, etcétera...

Cerrar