Resulta una tarea tediosa tener que actualizar la caché del navegador cada vez que realicemos cambios en los atributos y variables de nuestras hojas de estilo. Ahora, el tiempo que dedicamos a componer y comprobar las modificaciones realizadas en nuestros archivos CSS puede verse reducido a milésimas de segundo, gracias a herramientas como CSS Refresh o So Fresh.
Cómo optimizar imágenes para mejorar la velocidad de carga web
En la era de la inmediatez, el valor del tiempo está en alza y Google, sabedor de ello, considera la velocidad de carga web como un factor decisivo a la hora de ofrecer una buena experiencia al usuario. En parte, el éxito de nuestro proyecto web dependerá de cuan optimizadas estén sus imágenes.
20 diseños web inspirados en estilos retro
Arrancamos la semana presentando una nueva sección que alimentará nuestros posts de usabilidad y diseño web. Su dinámica es sencilla, al fin de cada mes aportaremos un listado de páginas web destacadas por su temática; retro, minimalista, corporativa, single page, responsive design...tras visionar e investigar los rincones más inspiradores de la Web, filtraremos y seleccionaremos nuestro Top 20 particular.
Para esta primera selección, nos hemos decantado por el diseño web de estilo retro o vintage, una tendencia acomodada desde hace algunos años que parece haberse convertido en una moda perenne.
LESS es más. Herramienta para crear hojas de estilo dinámicas
Hoy presentamos LESS, una potente herramienta de pre-procesado capaz de mejorar la productividad en la edición y estructuración de nuestros layouts. Se trata de una extensión que permite crear hojas de estilo con un comportamiento dinámico a través de variables, mixins, reglas anidadas, operaciones aritméticas, entre otras muchas.
La curva de aprendizaje de LESS resulta más avanzada que la de CSS, pero como en todo, la práctica simplifica su manejo. Son múltiples las ventajas que conlleva; optimización en la productividad, mejor accesibilidad a la documentación, mejor uso de variables y media-queries, perfil multiplataforma Open Source…
Solucionando las páginas Error 404
Para aquellos navegantes web habituales, resulta común que en algún momento de sus cybervidas se hayan visto a la deriva frente a una caótica página Error 404.
Los usuarios odian este tipo de problemas, porque suponen un obstáculo que encalla su proceso de navegación debido a que el navegador es incapaz de encontrar la página solicitada, ya sea porque no existe en el servidor o porque el enlace está roto.
Web Platform, hacia la estandarización Web
La unión hace la fuerza, y si esta viene de la mano de los principales líderes tecnológicos del momento, su potencia hace retumbar los cimientos del mundillo Web.
Adobe, Apple, Facebook, Google, HP, Microsoft, Mozilla, Nokia, Opera (junto a la propia World Wide Web Consortium – W3C -), a priori rivales en busca de la hegemonía tecnológica, se unen para crear la alianza Web Platform Docs, un proyecto que busca convertirse en el gran referente para principiantes y expertos en desarrollo web.
Adobe lanza Edge Web Fonts, plataforma gratuita de tipografías web
Hace unos días explicábamos el modo de insertar fuentes no estándar en cualquier página web a través de diferentes plataformas o mediantes la regla CSS @font-face. Recientemente, el equipo de Adobe lanzó una innovadora propuesta para convertirse en la alternativa perfecta para aquellos amantes de las tipografías que deseen integrar fuentes visualmente agradables en sus proyectos web. Hablamos de Edge Web Fonts, y estas son sus principales características:
Los iconos web como valor añadido para la usabilidad
Todo cuanto vemos a nuestro alrededor contiene un valor icónico intrínseco, una representación mental capaz de ser identificada en diferentes contextos. Los iconos son sustitutos visuales de un concepto, idea o acción, siendo perfectas metáforas que ilustran el mundo real.
En el panorama Web, los iconos son utilizados para potenciar el atractivo y entendimiento de los contenidos de la página, convirtiéndose en una guía visual para el lector.
Mejora la experiencia de usuario con los menús de navegación fija
La proliferación de los dispositivos móviles (ya no son previsiones sino un hecho) han resucitado la navegación vertical, creando un modus operandi bien definido donde los usuarios scrollean hasta el infinito por sus smartphones o tablets, extrapolando esa costumbre, casi inconscientemente, cuando acceden a través de sus portátiles u ordenadores de sobremesa.
Ante este panorama, nos encontramos con un elemento que poco a poco se está ganando un hueco en el podio de tendencias dentro del mundo del desarrollo web. Hablamos del menú de navegación fija (en su terminología anglosajona «sticky navigation»), que viene a traducirse como el menú de toda la vida pero con un efecto imantador que persigue el scroll realizado por el usuario mientras navega por la página.
CSS Sprites, pequeño gran truco para mejorar la velocidad de carga
Remontémonos a 1985 y visualicemos a Super Mario iniciando su carrera para conseguir la seta. Esa animación en 2D del personaje estaba realizada en “sprites”, una técnica que sirvió de inspiración para que los diseñadores y desarrolladores Web de principios del siglo XXI buscasen alternativas en los efectos onmouseover y onmouseout. A día de hoy, supone un requisito casi indispensable capaz de mejorar el rendimiento de las páginas web.