Webinar sobre Diseño Web y Usabilidad en INTERLAT.TV | INTERLAT TV - Tu canal de Televisión de Negocios es Internet
Metodologías de Diseño centradas en el usuario. En este webinar con ESTEFANÍA TRISOTTI de Chile compartimos un recorrido introductorio a través de diferentes metodologías de diseño centrado en el usuario, las cuales tanto clientes como personas relacionadas al desarrollo de un producto digital debieran conocer.
Guía de Responsive Web Design: todo lo que necesita saber sobre Responsive Web Design
Imagen tomada de Sortega.com Marcelo Rincón un cliente y gran conocedor del tema de usabilidad me mostró una nueva tecnología para desarrollar sitios Web que me dejó impactado. Me refiero a la tecnología llamada Responsive Web Design, que algunos llaman en español Diseño Web Adaptable. 1. El Responsive Web Design permite crear sitios Web que se adaptan al ancho del dispositivo en que se esté navegando, lo que permite tener un único diseño para PC, mobile y tabletas. Un aspecto muy interesante de esta nueva tecnología es que no solamente cambia el diseño cuando cambia el ancho del dispositivo, sino que también se ajusta el tamaño de las imágenes. He grabado un video para ilustrar lo que acabo de decir: 2. Reducción de costos. 3. En un artículo llamado: Responsive Web Design: 50 Examples and Best Practices muestra excelentes ejemplos de la aplicación de esta tecnología. Boston Globe Food Sense Deren keskin 4. Para reflexionar: Les dejo con una pregunta para conocer su opinión:
Understanding the Elements of Responsive Web Design
Responsive web design is undoubtedly a hot topic in web design right now. To some degree, the popularity of the concept of responsive web design is well deserved because site users are increasingly diversifying their methods of accessing a website. iPad, iPhone, Android mobile devices, desktops, netbooks — we’re in a time where our web designs must function in a multitude number of ways. Let us explore the meaning and principles behind responsive web design. Key Features of a Responsive Web Design In order for a web design to be considered "responsive," it needs to have three key features. Web designer/developer Ethan Marcotte — the author who conceptualized responsive web design — describes these features as: The site must be built with a flexible grid foundation.Images that are incorporated into the design must be flexible themselves.Different views must be enabled in different contexts via media queries. CSS-Tricks changes its web layout depending on the size of the browser’s viewport.
Imágenes responsivas con Picturefill – Code Médula – Blog de código
Published / Publicado : | By: Agustín Amenabar L. Preámbulo Saltarse esta lata Teoría de lo que vamos a usar Asumiendo que todo el concepto Responsive Web Design, o diseño web responsivo está entendido, un aspecto práctico bien importante es el manejo de imágenes. Si, pero no todas las pantallas son iguales, no tienen el mismo tamaño, resolución, ni tienen la misma orientación; en muy poco casos es necesario cargar la imagen de súper resolución HD para pantallas retina de 2800 pixeles de ancho. — OK, pero igual eso se hace en CSS, cambias el fondo según el ancho u otro media query y listo! Si, pero no todas las imágenes son presenctacionales, o sea, muchas pertenecen al contenido y deben estar en el HTML y no en la hoja de estilos. En este caso elegimos Picturefill, dado que es de las pocas soluciones relativamente semánticas que contempla el caso de uso de dirección de arte en las imágenes responsivas. Mise en place, utensilios de trabajo Todo esto está en el repositorio del demo . Callampas
Generador de Sprite CSS | Project Fondue
Instant Sprite - Generate CSS Sprites Instantly
Sprites CSS
Qué son los sprites CSS y cómo ayudan a optimizar la descarga de una página web. Vemos un ejemplo sencillo de sprite CSS. En el presente artículo trataremos: La optimización de documentos HTML mediante el uso de sprites La obtención de sprites La inclusión de sprites mediante CSS La obtención de sprites –imágenes en general- codificados en Base64 La técnica de inclusión de sprites embebidos ¿Qué es un sprite? Sprite utilizado para diversas aplicaciones y logos de Google Ilustración de un sprite de una animación con CSS –por ejemplo- Por qué se optimiza el código HTML Uno de los problemas de retardo más importantes en la carga de documentos desde Internet es el tráfico HTTP y las propias capacidades de los navegadores para gestionarlo. Generación de sprites Usualmente dispondremos de las imágenes por separado y desearemos generar el sprite correspondiente. Algunos de los lugares de Internet que nos proporcionan esas facilidades son: Ejemplo de uso de sprites con CSS Listado 2: <! Listado 3: <!
What The Heck Is Responsive Web Design?
Responsive websites respond to their environment Adaptive (Multiple Fixed Width Layouts) or Responsive (Multiple Fluid Grid Layouts) Recommended Approach Go All In On Responsive Make pages that look great at any size. “Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Small + Medium + Large One site for every screen. Everyone. The Boston Globe Largest responsive web design project to date bostonglobe.com Grey Goose Responsive site for Grey Goose with parallax scrolling animation www.greygoose.com Barack Obama The Obama campaign continues to be at the leading edge of web technology. barackobama.com Time & Money Older Browsers Performance Content Website vs. “Stop Thinking in Pages. Frameworks (save time) or Roll Your Own (more control) Best Practices Content Check Start Small (Mobile First) Exit Photoshop, Enter Browser Make It Modular Always Be Optimizing *Best practices still emerging!
Google Web Fundamentals ayuda a construir mejores sitios web
Google, siempre tratando de innovar en la tecnología, está ampliando su gran oferta de herramientas disponibles incursionando en temas educativos orientados a desarrolladores. Ya nos habia mostrado el Google Web Designer y ahora nos presenta Google Web Fundamentals. Google Web Fundamentals es un recurso integral para el desarrollo web en múltiples dispositivos, o como ellos suelen llamarlo, un manual con las mejores prácticas. Dicho de esta forma, no es más que una guía con buenas prácticas en la creación de interfaces web, cuyo objetivo es ayudarte a producir un producto de excelente calidad que sea adaptable (también conocido en inglés como Responsive Design). Un sitio web adaptable es aquel que se ajusta a las resoluciones de pantallas más comunes en el entorno del usuario sin que el contenido deje de ser legible o pierda forma. Imágenes, Audio y Vídeo: ofrece lecciones para manejar contenido multimedia de una forma simple y uniforme a través de los distintos dispositivos.
