Con Umbraco se pueden construir desde sitios pequeños (páginas personales, blogs) hasta crear sitios avanzados, portales, proyectos para grandes empresas. De hecho, grandes compañías ya han apostado por este gestor, algunas de renombre como Toyota, Sandisk, Microsoft, Peugeot, Vogue …, veamos que nos puede ofrecer este CMS.

Un poco de historia

Aunque muchos lo hayamos conocido hace poco, Umbraco no es nuevo; fue desarrollado por Niels Hartvig en el año 2000 y fue liberado como software open source en 2004, por lo que Umbraco se convierte en un CMS gratuito con un gran potencial. Está contruído sobre Microsoft .NET Framework, sí, Microsoft y OpenSource en el mismo saco, aunque suene raro .

De Umbraco se puede destacar la sencillez y fácilidad de manejo, permite usar los controles de usuario .NET que hayas desarrollado con Visual Studio sin necesidad de realizar cambios de código, o bien utilizar controles personalizados comerciales. Soporta la mayoría de los lenguajes de la red y, por supuesto, todo lo referido a Ajax; aunque está escrito en C#, permite utilizar cualquier lenguaje compatible con .NET como VB.NET, IronPython, IronRuby, e incluso lenguajes “funky” como LOLCODE.

Maquetación de plantillas en Umbraco

Los maquetadores estamos de suerte, ya que incluye un compacto motor de plantillas, que permite editar y rediseñar plantillas existentes o bien, crear nuestro propio HTML y CSS sin restricciones, con un código limpio y accesible.

En la web oficial, nos ofrecen un una plantilla base, como punto de partida a nuestro diseño, utilizando el framework css 960 e incluyendo algunos propiedades de css3.

También dispone de una comunidad donde plantear nuestras dudas de maquetación

Después de trabajar con Umbraco, podemos afirmar que es unos de los gestores más flexibles a la hora de maquetar.

Enlaces de interés

• Web oficial
• Comunidad oficial
• Umbraco españa
• Umbraco colombia

Si asumimos que una misma página web se puede mostrar de diferentes maneras, se hace evidente un problema: ¿de qué modo podemos mostrar la información de una manera atractiva al margen de los condicionamientos técnicos y los ajustes de preferencias de usuario?

Existen dos estrategias para afrontar este reto: la degradación elegante (graceful degradation) y la mejora progresiva (progressive enhancement).

Estas dos filosofías de desarrollo coinciden en varios puntos:

• Un sitio web debe funcionar correctamente ante la multiplicidad de navegadores y dispositivos.
• Hay que separar en varias capas el contenido, la presentación y la funcionalidad de los proyectos.
• Lo más importante es el marcado semántico y la extensión de los estándares web.

En el fondo tienen un enfoque radicalmente distinto. La clave está en el afecto que tienen estos puntos en el flujo de trabajo.

Degradación elegante

La degradación elegante es un concepto importado de la ingeniería desarrollado por el psicólogo David Courtenay Marr. La traslación al diseño web viene a significar que un sitio debe funcionar y visualizarse de forma básicamente parecida independientemente del navegador o dispositivo utilizado. Paliando en la medida de lo posible el empobrecimiento de un diseño que se producirá por las limitaciones técnicas de los navegadores más anticuados.

En la práctica esta técnica se reduce a utilizar sólo aquellas características que sean soportadas correctamente por navegadores obsoletos o muy limitados técnicamente como Internet Explorer 6 o 7. Esto relega a otras tecnologías más avanzadas, como CSS3 a un indefinido futuro en el que serán ampliamente soportadas por la mayoría de los navegadores y dando lugar a anacronismos como que sigan utilizándose navegadores de más de diez años de antigüedad. Al fin y al cabo ¿para que los usuarios se van a actualizar de navegador, si las páginas no van a ofrecer una mejora visual de un navegador a otro?

Asegurar que nuestras webs se vean igual en navegadores de dos, tres y hasta cuatro generaciones de antigüedad, no resuelve el problema de cómo implementar nuevos estándares y tecnologías sin que la experiencia de usuario se vea mermada.

La técnica de la degradación elegante conlleva un tiempo extra de optimización para cada navegador (Cross-browser). Como es de suponer, es necesario albergar un sólido conocimiento de cada navegador y tener todo un catálogo de soluciones para contrarrestar las posibles limitaciones que nos vallamos encontrando. Las enormes dificultades para poder comprobar nuestras páginas en los cada vez más numerosos y variados dispositivos y navegadores están provocando que algunos maquetadores adopten la solución más radical posible, proponer al usuario que simplemente se descargue la última versión del navegador.

Como desarrolladores web no tenemos derecho a decidir por los usuarios que navegador deben utilizar, sobretodo porque muchos de ellos quizá no tengan ni el control, ni las capacidades, ni el software necesario para soportar estas últimas versiones. Lo que sí que podemos hacer es adoptar otras filosofías de desarrollo.

Mejora progresiva

El concepto de mejora progresiva fue acuñado por Steven Champeon, en su conferencia Inclusive Web Design for the Future en 2003.

Esta filosofía implica que los sitios web dispondrán de las características más avanzadas a medida que el navegador que las ejecuta sea más avanzado. Esto permite aprovechar todas las posibilidades CSS sin perjudicar a los navegadores obsoletos o limitados. De este modo se premia al usuario por la utilización de un navegador más moderno, y los usuarios desactualizados no tendrán quebranto alguno al acceder al contenido de una web.

Si suponemos que los navegadores más anticuados tienden a desaparecer a medida que los usuarios los van actualizando, es lógico ir introduciendo tecnologías más modernas para que nuestros desarrollos estén mejor preparados para soportar los estándares del futuro. ¿Tanto daño hace que unos usuarios vean los bordes redondeados y otros los vean cuadrados?

Para encarar la mejora progresiva de un proyecto propongo que la maquetación web se realice siguiendo los siguientes puntos:

• La maquetación debe permitir el correcto acceso a la información de una página, independientemente del tipo de navegador o dispositivo utilizado por el usuario.
• Utiliza aquellas características que aunque sólo los navegadores modernos puedan visualizar, los navegadores antiguos puedan ofrecer una alternativa viable (esta es una manera conservadora de afrontar este paradigma).

Algunos ejemplos de mejora progresiva pueden ser:

• La utilización de una API de tipografías (como Google) para aquellos navegadores que pueden soportarlas.
• Propiedades CSS3 como text-shadow, border-radius o Gradient para los navegadores habilitados.
• Animaciones y fotografías en formato SVG.
• Fotografías en formato PNG con transparencia.

De este modo, los desarrolladores nos dotaremos de una base para la experimentación y la innovación respetando los estándares y el diseño universal sin excluir a ningún usuario. Eso es lo que a mi modo de ver, hace a la mejora progresiva un paradigma más acertado y ajustado al cambiante mundo del desarrollo web. Es por eso que en Yahoo lo adoptaron rápidamente y lo han utilizado para crear su estrategia de soporte de navegador gradual.

Mas información:

• Progressive enhancements or graceful degradation. Which are you?
• On CSS3: “Graceful Degradation” or “Progressive Enhancement”
• Understanding Progressive Enhancement
• On CSS3: ‘Graceful Degradation’ or ‘Progressive Enhancement’

La aplicación se llama Balsami Mockups. Con esta herramienta podemos enseñarle a un diseñador como queremos que sea la estructura de nuestra Web, ya el diseñador se encargará de todo lo demás. Podemos también compartir nuestros bocetos con otros que usen la misma aplicación, y así poder modificarlo dependiendo de nuestras expectativas en el diseño.

Os dejo un video demostrativo de la aplicación, así en unos minutos os podéis hacer una idea de como funciona y lo rápido y sencillo que resulta:

No sólo esta orientado al diseño Web, también a aplicaciones de escritorio, aplicaciones para Iphone, etc. La aplicación no es gratuita, pero podéis descargaros la versión de prueba que funciona al 100%. Con esta herramienta nos evitaremos gastar tinta y papel. Es muy práctico en este aspecto, ya que podemos mostrarlo al Diseñador o viceversa y compartir ideas. Finalmente os dejo el enlace de descarga de la aplicación Balsami Mockups:

Descargar Versión de prueba de Balsami Mockups

Fuente: Maestros del Web

En este artículo veremos los avances de esta tecnología en varios puntos escabrosos y un pequeño estudio sobre su uso en las webs españolas más importantes:

Puntos problemáticos y avances de flash para el desarrollo web:

• Accesibilidad: Con la introducción de la paleta de accesibilidad en la versión MX 2004, se mejoró notablemente la accesibilidad en los archivos flash. Ahora es posible que algunos lectores de pantallas puedan detectar ciertos elementos de una película swf, pero aún así la tecnología flash todavía no es completamente accesible para personas con discapacidad.
• Posicionamiento: También se han hecho avances en este sentido. Ahora los buscadores son capaces de procesar los archivos swf y leer las cadenas de texto que contienen. El problema radica en que si todo el sitio está desarrollado en un único flash, el peso de nuestras keywords se diluye, ya que los robots no reconocen que el flash se divide en diferentes secciones. Existen varias soluciones parciales a este problema, pero ninguna es mejor en cuanto a posicionamiento como disponer de un web realizada únicamente en HTML.
• Actualización: Una de las mayores criticas de Jakob Nielsen a las páginas desarrolladas en Flash, era que resultaba difícil mantenerlas actualizadas. Es necesario editar directamente el archivo fuente para realizar los cambios. Volcar contenido en XML, o la integración de Flash con fuentes de datos dinámicos usando Flash Remoting y Web Services también ha solucionado parcialmente este problema.
• Carga de contenidos: A pesar de varias optimizaciones que podremos someter a nuestras bibliotecas y archivos flash, estos se cargarán más lentamente que los contenidos creados en HTML. Además, hay que tener en cuenta que la velocidad de fotogramas asignada a una película, casi nunca se cumple. Esto dependerá de factores como la cantidad de código a ejecutar, la complejidad de éste, la potencia del ordenador, los recursos del sistema operativo, etc.
• Estadísticas. Utilizando Flash Remoting podremos realizar estadísticas de visitas. El problema viene si desarrollamos toda la web en un único archivo. De esta manera sólo podremos saber cuántas personas visitaron la portada de la web, no sus secciones.

¿Actualmente como se utiliza Flash mayoritariamente?

Por otro lado, leo en wezstudio un informe del año pasado sobre la utilización de flash en las 20 páginas españolas más importantes. Estos son los resultados más relevantes que arroja dicho estudio:

• Aproximadamente el 50% de los sitios analizados contienen algún elemento Flash
• Ninguna web esta totalmente desarrollada en Flash mientras que un 45% son completamente HTML.
• En las página analizadas solo se utiliza Flash como herramienta de publicidad o bien para mostrar vídeos.
• Solo el 10% de la superficie total de la home utiliza elementos Flash
• Sin embargo flash ocupa entorno al 60-80% del total de la publicidad

Conclusiones del informe

Analizando estos datos podemos decir que actualmente Flash es una tecnología ampliamente extendida y utilizada como complemento del HTML. Parece ser que su utilización para el desarrollo íntegro de una web está decayendo.

Según este estudio, flash es utilizado principalmente para mostrar vídeos y publicidad. Si bien su utilización es muy común para el montaje de galerías y pases de diapositivas, podemos adivinar que el desarrollo y la utilización de frameworks para JavasScript, está haciendo que también decaiga su utilización para estas tareas.

Entonces, si como indica este estudio flash se utiliza mayoritariamente para mostrar video, ¿Qué pasará con la tecnología Flash cuando tarde o temprano se normalice el uso de HTML 5 y su etiqueta video?

Imaginemos que tenemos que encagarnos de crear un diseño de un sitio web para móviles. Es probable que, a menos que estemos diseñando para un solo dispositivo, rápidamente nos vamos a encontrar con un problema común que experimentan todos los diseñadores que trabajan con dispositivos móviles, averiguar cuales son realmente las proporciones de pantalla de un dispositivo móvil.

Por ejemplo:

• El iPhone es de 320 píxeles de ancho por 480 píxeles de alto.
• Muchos dispositivos de Nokia N-Series son 240 píxeles de ancho por 320 píxeles de alto.
• Los dispositivos más nuevos a menudo apoyan un modo apaisado donde la anchura y la altura se invierte de forma espontánea.
• Los dispositivos de Nokia más populares disponen de pantallas que van de 176 por 208 píxeles hasta 352 por 416 píxeles.
• Las resoluciones de pantalla Blackberry variar desde 160 x 160 píxeles hasta a 324 x 352 píxeles.

Este artículo se destina a ayudar a desarrollar el diseño de estrategias eficaces para orientarlo a una amplia gama de dispositivos móviles y tamaños de pantalla. Con este fin, comenzamos con un esquema de dos cuestiones clave que se encontrará en el diseño para las pequeñas pantallas: la diversidad en la pantalla y el tamaño del píxel.

Esperar y gestión de la diversidad

En este punto, probablemente te estarás preguntando “… ¿es realmente necesario para el diseño de todos estos tamaños diferentes de pantalla?”, o “… es lo que realmente necesitamos para crear un diseño para cada dispositivo?”. Dependiendo de los requerimientos de negocio del proyecto, puede ser totalmente factible diseñar sólo para un tamaño de pantalla o dispositivo. Sin embargo, si los requisitos determinan que debe ser utilizado por la mayoría de los dispositivos, vamos a tener que encontrar la manera de hacer frente a esta diversidad.

Las cosas pueden no ser tan malas como parecen. Al diseñar para la web móvil, podemos suponer que las páginas se desplazan hacia arriba y hacia abajo como lo hacen los navegadores. Esto, de alguna forma elimina la necesidad de preocuparse por la altura de la pantalla, lo que nos permite centrar nuestros esfuerzos principalmente en tratar con la diversidad en anchos de pantalla del dispositivo. Afortunadamente DeviceAtlas Explorer nos proporciona un medio rápido para comprobar que el ancho de la pantalla en “se rompe” a través de los miles de dispositivos móviles conocidos.

Los gráficos anteriores indican, que la gran mayoría de los dispositivos comparten sólo tres anchos de pantalla, 128, 240 y 176 píxeles con muchos de los valores restantes, 120, 130, 160, 208 y 220 píxeles, no demasiado divergentes de estos tres valores centrales. Esto nos deja con unos cuantos dispositivos, tanto en los extremos altos y bajos, con una anchura de 96, 101, 320 y 320 + píxeles. Mientras que los dispositivos con un ancho de pantalla de menos de 128 píxeles pueden parecer un pequeño porcentaje de la totalidad, cuando se combina (96, 120, 101 y 84 píxeles) que suman hasta 469 dispositivos!. Más de la mitad del número de dispositivos de 240 píxeles o alrededor del 10% de todos los dispositivos conocidos.

Tambien debemos señalar que en este momento, menos del 5% de los dispositivos tienen resoluciones superiores a 320 píxeles de ancho. Esperamos que esto cambie en los próximos años, ahora estamos viendo las resoluciones de pantalla más pequeña (128, 176, etc), y dando paso a las más grandes (240 +), como se ilustra en el gráfico siguiente:

Teniendo en cuenta que el tamaño de pantalla es importante, también hay un parámetro adicional a considerar: la dimensión física de la pantalla.

El problema de los Píxeles

Durante años, los diseñadores han realizado principalmente plantillas Web para monitores comunes. El tamaño de pantalla medio es de 1024 x 768 pixels, y aunque el tamaño físico de las pantallas varían, las dimensiones totales normalmente son como resultado una densidad de píxeles de alrededor de 85 ppp (píxeles por pulgada). Últimamente, sin embargo, el panorama ha empezado a mostrar el cambio, sobre todo con los nuevos dispositivos portátiles:

• Netbooks, como el Asus Eee PC 900 tienen un rango de 9 pulgadas en diagonal con una resolución en torno a 1024 x 600 píxeles dándoles la densidad de píxeles de alrededor de 133 ppp.
• El iPhone de Apple tiene una resolución de pantalla de 320 x 480 píxeles que al combinarse con sus 3.6″ de diagonal de pantalla los resultados nos llevan a, una densidad de píxeles de 160 ppp.
• El E60 de Nokia tiene una resolución de pantalla de 416 x 352 píxeles y un minúsculo 2,2″ de diagonal de pantalla dándole una densidad de píxeles de más de 240 ppp!

Cuando se combina con la necesidad de apoyar muchos dispositivos, esta gran variación en la densidad de píxeles introduce un nuevo problema, el impacto del tamaño de píxels en el diseño.

La siguiente ilustración simula la misma imagen de 100 x 100 píxeles en dispositivos con la densidad de píxeles de 72, 144 y 240 píxeles por pulgada. Observemos cómo el tipo y los detalles finos se pierden como se representa en las imágenes más pequeñas.

Esto significa que debemos de dar solución a una amplia gama de píxeles. Sin embargo, es importante tener en cuenta que no todos los píxeles son creados iguales, y cuando sea posible:

• Determinar la gama completa de densidades de píxeles, necesitará ser soportada.
• Revisa tus diseños para estos dispositivos, para garantizar su visualización en todos ellos.
• Diseñar y definir los elementos de la maquetación en unidades relativas, como el em y en porcentajes.

Con un desarrollo y estrategia teniendo en cuenta los tamaños de pantalla, conseguiremos construir sitios Web escalables para una amplia gama de dispositivos móviles.

A continuación definiremos las diferentes estrategias para conseguir una Web para múltiples pantallas. No solo para dispositivos móviles sino también para pantallas de escritorio:

Estrategias de diseño de sitios Web para móviles

Estrategia 1: Definición de grupos de dispositivos

Como hemos comentado antes, puede haber miles de modelos de dispositivos, la diversidad no es tan mala como parece a simple vista. De hecho, es completamente posible agrupar muchos dispositivos con un ancho de pantalla similar y acabar con cinco grupos con diferentes anchos de pantalla:

• tiny: 84px, 96px, 101px, 128px, 130px, 132px
• pequeña: 160px, 176px
• medio: 208px, 220px, 240px
• grande: 320px, 360px, 480px +
• escritorio: 800px +

Estas agrupaciones son, por supuesto, totalmente arbitrarias y los requisitos de un proyecto pueden dictar un conjunto totalmente diferente. Por ejemplo, 320 píxeles para el iPhone y, poco más de 240 píxeles para navegadores móviles más recientes y 128 píxeles para dispositivos más antiguos. Al final, la definición de las agrupaciones de dispositivos realmente se reduce a los objetivos y la necesidad del proyecto. Con este fin, es una buena idea visitar DeviceAtlas de forma regular con el fin de ver las estadísticas y volver a evaluar la relevancia de sus agrupaciones.

Tambien debemos tener en cuentas las capacidades de cada dispositivo no todos soportan CSS avanzado, manipulación del DOM y JavaScript. Antes de hacer las agrupaciones comentadas anteriormente, debemos asegurarnos que los dispositivos móviles son compatibles con las tecnologías que ofrecerá el proyecto Web.

Estrategia 2: Crear un diseño de referencia por defecto

Después de haber definido los grupos de dispositivos, ahora debemos seleccionar el dispositivo de referencia. Este es el dispositivo que se usara como base durante el proceso de diseño y en última instancia, dará lugar a la creación de un diseño de referencia. Dependiendo de las necesidades de negocio que desee, se diseñará una versión de referencia para un ancho medio de pantalal de (240px). Esto mantiene el diseño suficientemente simple para adaptarse a pantallas más pequeñas, permitiendo al mismo tiempo la libertad de crear un diseño que se adaptará a los dispositivos con pantallas más grandes. También alguna vez crearemos 2 diseños de referencia, pero solo cuando sea necesario. Todo esto nos permite lo siguiente:

• Progresivamente mejorar el diseño de los dispositivos más avanzados (por ejemplo: para aprovechar el GPS o el apoyo a CSS3).
• Adaptarse a los multiples dispositivos de contacto (móviles, PDA, etc).
• Ajustar el diseño para compensar las actuales limitaciones graves en los dispositivos más restringidos.

Estrategia 3: Definir las normas para el contenido y la adaptación de diseño

Una vez que hayamos completado un diseño de referencia, también debemos proporcionar una dirección específica para la adaptación de este diseño a otros tamaños de pantalla. Similares a los contenidos de un documento de diseño visual. Estas normas y directrices deben ayudar al equipo de maquetación Web a adaptar el diseño sacando partido al código XHTML y CSS. Por ejemplo:

• El logotipo del sitio debe estar adaptado para cada agrupación de dispositivos para garantizar la visualización de dicha imagen.
• Las cabeceras deberían estirarse al 100% del ancho de la pantalla utilizando una imagen de fondo repetitiva siempre que sea posible.
• Las imágenes de contenido no deben ser mayor de 200 píxeles de ancho para el grupo por defecto, (o el 80% de la anchura de la pantalla del dispositivo).
• Las imágenes de contenido debe ser automáticamente optimizadas para escalar, independientemente del ancho de pantalla.
• Siempre que sea posible, las listas de iconos o gráficos decorativos deben de ser eliminados, y así conseguir el mayor espacio disponible para el contenido.
• Una hoja de estilo dinámica se utilizará con el fin de establecer los valores para cada dispositivo.

Aunque no es una recomendación formal, resume las estrategias comunes para adaptar y mejorar el diseño, manteniendo los tamaños de archivos al mínimo. Siempre debemos tomar decisiones de diseño pensando en la mayoría de usuarios, y en lo objetivos del proyecto.

Estrategia 4: Opta por los estándares web y un diseño flexible

Con las normas del diseño de referencia y la adaptación en su lugar, la estrategia final se basa en la flexibilidad de marcado a través de la reutilización de un código genérico, basados en estándares XHTML y CSS. En la práctica significa, la creación de un código XHTML y CSS genérico, que podemos usar mayormente en cualquiera de los futuros proyectos para dispositivos móviles, esto nos aportará beneficio, tiempo y productividad en los siguientes proyectos. Dado el gran número de dispositivos móviles, este beneficio no puede ser subestimado, ya que garantiza que su contenido será accesible a un gran número de usuarios, sin complicar el trabajo a los desarrolladores. A continuación, se presenta una serie de indicaciones para aumentar progresivamente el diseño de las agrupaciones dispositivo diferentes, a través del uso de navegador y/o el dispositivo específico. CSS, gráficos y marcado HTML.

A medida que vamos leyendo aprendemos que realmente para conseguir un diseño accesible para cualquier dispositivo móvil es, crear diseños líquidos partiendo de un diseño de referencia y maximizar el uso de CSS y XHTML. Todo esto incluye tomar como referencia las siguientes inidicaciones:

• No especificar un ancho de documento específico, permitiendo así que el diseño pueda expandirse y contraerse, y así pueda llenar la pantalla del navegador del dispositivo.
• Aprovechar los elementos de bloque que también se expanden y se contraen de forma nativa.
• Usar la hoja de estilos para dsitribuir los elementos de contenido de forma accesible para el usuario.
• Especificar el tamaño de los elementos de diseño utilizando los porcentajes de modo que, naturalmente se expandan y se contraigan adaptandose al ancho de página.

Poniendo todo junto

Para minimizar al máximo el tiempo de carga de la página, debemos simplificar y agrupar el código a una sola línea. Tambien tenemos que cumplir con los estándares XHTML y CSS. Por ejemplo el marcado y diseño de la web de la BBC para móviles es bastante simple y con un contenido básico:

Como podemos comprobar es un diseño totalmente fluido y escalable, que ocupa todo el ancho de la pantalla, independientemente del dispositivo que se use. El resto de los estilos y contenidos son especialmente adaptados en la siguiente imagen, que satisfacen el producto o familia de dispositivos más usados actualmente:

• El logotipo cambia de tamaño o es sustituido para adaptarse a la anchura de la pantalla del dispositivo.
• La cabecera y otros elementos utilizan una textura como fondo y un color, en dispositivos más antiguos dicha textura no se muestra, perso si se muestra el color de fondo.
• La BBC, parerce que a optado por adaptar el contenido a diferentes grupos de dispositivos, como podemos comprobar en la imagen las diferencias que hay entre el iPhone y el resto de dispositivos. También podemos ver que en el iPhone se muestran más contenidos y gráficos aprovechando al máximo su gran pantalla.
• Las imágenes son escalables y se adaptan a cualquiera de los dispotivios.
• En los dispositivos más grandes, los iconos asociados a cada elemento de la lista se pueden ver. Mientras que en los dispositivos más pequeños se elimina para garantizar una longitud de línea cómoda, para la visualización correcta del contenido.

El sitio Web de la BBC, es un ejemplo ideal, ya que muestra de forma simple que se puede combinar un marcado y estilos para llevar a acabo la visualización correcta de un amplio grupo de dispotitivos móviles. Su diseño, adaptación, redacción y funcionalidad esta totalmente orientado a los múltiples dispositivos que usan los usuarios. Con una rápida carga del sitio, una buena optimización y equilibrio etre diseño y accesibilidad.

User Agent Switcher

Por último quiero incluir un práctico complemento para firefox, su nombre es User Agent Switcher, nos permite visualizar una Web en diferentes dispositivos. La extensión User Agent Switcher añade un menú y un botón de la barra de herramientas para cambiar el agente de usuario del navegador. Está diseñado para Firefox, Flock, Songbird y Thunderbird, y se ejecutarán en cualquier plataforma que soporte estos navegadores, incluyendo Windows, Mac OS X y Linux. Creo que es la herramienta más apropiada para testear nuestra maquetas en cualquier dispositivo. Tambien os añado un fichero xml para integrarlo en la herramienta, con el que nos añadira los agentes de usuario de los distintos dispositivos móviles más populares y usados actualmente:

Descargar pack de agentes de usuario

Concluyendo, espero que todo lo que hemos comentado os sirva de gran ayuda para vuestros proyectos para dispositivos móviles, ya que son el futuro de la Web.

De Google a yahoo, de msn a Apple, así es como lucían algunos de los sitios más grandes de hoy en día los primeros días de su existencia.

1. yahoo.com – Publicada en 1994

   

2. msn.com – Publicada en 1995

   

3. amazon.com – Publicada en 1995

   

4. nytimes.com – Publicada en 1995

   

5. google.com – Publicada en 1996

   

6. apple.com – Publicada en 1987 (pantalla de 1996)

   

7. blogger.com – Publicada en 1999

   

8. wikipedia.org – Publicada en 2001

   

ColoRotate es un nuevo e interesante sitio Web que recoge un enfoque novedoso para el selector de colores del diseño tradicional. En lugar de los círculos 2D o deslizadores, ColoRotate cuenta con un cono 3D. En el centro del cono está el espectro de colores. En la intersección, se encuentra el tinte que se encuentra en el eje z. Puedes manipular cada uno por separado para ayudar a llegar a su color. También puedes combinar dos colores juntos.

Una vez que haya elegido unos colores de la paleta, puede usar controles adicionales para modificar toda la paleta a la vez. Además, el sitio tiene mucha información sobre el color y la teoría del color.

Si estás buscando una nueva herramienta que te ayudará a generar paletas de colores, ColoRotate vale la pena.

Introducción

Con la versión tres del CSS, muchas características emocionantes serán ejecutadas. CSS3 lleva a mayor flexibilidad y hace mucho más fácil reconstruir efectos previamente complejos. Muchas reglas para ahorrarnos tiempo se están aplicando para CSS3 como: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, multi-column layout, etc… Aunque solamente los navegadores más modernos soportan actualmente estos efectos.

En este artículo hecharemos una ojeada a algunas características interesantes de CSS3 que puedes poner en práctica en tus maquetas Web.