16 sitios dinámicos sin flash

17 agosto, 2012

Consejos, Diseño, Internet, Principal

Un sitio web pseudo-Flash es uno que se ve, siente y actúa como un sitio web Flash, pero en realidad es construida sobre HTML5 y CSS3.

Por lo general, también un poco de JavaScript para llevar las cosas a la vida y completar la interfaz.

El resultado es a menudo más allá de lo que hemos llegado a esperar de HTML y CSS, por lo que podemos asumir es el sitio web basado en Flash.

Estoy muy interesado en los sitios web HTML5, y hablamos sobre el tema con frecuencia. Flash, evidentemente, ha perdido parte de su ventaja (aunque no es pasado), y el foco se ha desplazado a las tecnologías básicas de la web (HTML, CSS, JavaScript).

Hay dos razones para esto. La primera es la técnica. Más fácil y mejor usabilidad, integración con CMS y soporte de dispositivos moviles han animado a la gente para impulsar las herramientas estandarizadas al máximo.

En segundo lugar, mucha más gente sabe cómo desarrollar con estos idiomas básicos, y una gran comunidad está dispuesta a renunciar a los beneficios de Flash por estas herramientas familiares.

Con tantas razones estamos en medio de un cambio masivo en el desarrollo web. Con la aparición de AJAX, hemos sido testigos de cómo un documento dinámico, podría alterar nuestras experiencias con animaciones, transiciones y la interacción. Esto hace navegar por Internet totalmente diferente.

Palabras de advertencia

Como sucede con cualquier tendencia, debemos acercarnos a este con precaución. Ante todo… auto-control. El hecho de que podemos hacer cosas radicales con el desplazamiento de páginas, animaciones y transiciones, no significa que debamos implementar todo el abanico de librerías.

La mejor apuesta es a considerar cuidadosamente la audiencia, el producto y quizás lo más importante, la experiencia del usuario. Con esto en mente, estratégicamente se pueden aplicar estos métodos para mejorar un sitio web.

Ejemplos de este estilo

1. Emilie Crssrd

Si bien muchas cosas sobre Emilie Crssrd se ven como Flash, me centraré en uno. El indicador de carga de aquí se ve. El mecanismo que mantiene las imágenes y contenido, asegurando que los usuarios vean el contenido correctamente.

2. Stefan Kanchev

Muchas cosas sobre Stefan Kanchev también se hacen eco a los enfoques basados en Flash, y el fade-in y fade-out de los iconos hacen una interacción hermosa. La señal visual ayuda a los usuarios a centrarse en uno de los elementos a la vez y añade un poco de brillo a esta página minimalista. Un maravilloso ejemplo del aprovechamiento de algo simple con buenos resultados.

3. Cooper

Cooper sigue un método popular para una sola página web. A medida que seleccionan los elementos de la navegación el contenido se desliza a la vista principal. Con las suaves transiciones, el sitio se siente como Flash, así como las funciones de página web, sin embargo, el objetivo esta en ser visible en los dispositivos móviles.

4. Flipboard

Flipboard es absolutamente simple tiene un rotador de contenido bastante estándar. Lo que hace que este sitio se sienta como Flash. La página se adapta dinámicamente a su navegador (con algunas limitaciones), un efecto estándar en el mundo Móvil.

5. 20 things…

Página interactiva a modo Revista, es un efecto popular en los sitios web Flash tanto es así que existe software que se ha creado sólo para aprovechar esta funcionalidad. Por su parte, 20 Things muestra lo que antes era posible sólo con Flash. Este sitio web es un trabajo serio y un brillante ejemplo de un sitio web basado en estándares.

6. NL Engenharia

NL Engenharia es un sitio típico para una firma de arquitectura. Eso no es necesariamente algo malo, sino que encaja en el nicho. Parece que fue trasplantado, literalmente, de Flash a HTML5: navegación deslizante, imágenes de pantalla completa, cambio de tamaño dinámico, todas las características de Flash. Funciona, sin embargo. El resultado es hermoso y representa a la firma muy bien.

7. Ryan C. Jones

Ryan C. Jones tiene una cartera de hermosas fotografías. El punto de interés (las fotografías) se le da prominencia abrumadora. Es un ejemplo brillante de no dejar que la tecnología se interponga en el camino. Independientemente de las herramientas utilizadas para su construcción, el resultado es una forma simple y efectiva de mostrar el trabajo de portafolio.

8. Studio Gang

A primera vista, la interfaz y animación de Studio Gang, puede confundirse fácilmente con Flash. Pero mientras que la interfaz es única y memorable, no puedo evitar preguntarme si es apropiada. Sin embargo, demuestra lo que se puede hacer con HTML y CSS.

9. DIST

DIST ha aprovechado HTML5 de una manera que es poco mas que increíble. Con sus animaciones, la carga del contenido y la interfaz líquida, este sitio web combina la creatividad de los mejores diseños en Flash con una solución muy usable basada en HTML . A pesar del enfoque poco común, es fácil de usar y se comunica la singularidad de la agencia creativa.

10. Messages from Japan

Messages from japan no es necesariamente la intención de personificar «Flash». Sin embargo, la animación y el toque especial de la interfaz suave y fácil de usar. Y los elementos interactivos son prominentes. Es un excelente ejemplo de cómo este tipo de estética puede mejorar un sitio web estándar.

11. Atlason

Como desarrollador, usted no puede ver Atlason sin un sentimiento de temor. No me puedo imaginar el trabajo que fue a hacer esto. Particularmente me encanta que el diseño ocupa toda la pantalla y hace un gran uso de los recursos disponibles. También me encanta que no sigue las convenciones y sin embargo sigue siendo tan fácil de usar.

12. Bit Byte Bit

Bit Byte Bit agregando dinámicamente el contenido de múltiples fuentes, incluyendo el blog del sitio, Twitter y cuenta Forrst. Esta página web demuestra que no tiene por qué sentirse estática en absoluto.

13. TFG

TFG adopta un enfoque similar al Bit Byte Bit, pero más orientado a la imagen, lo cual tiene sentido dada la naturaleza de su trabajo. Me encanta que de inmediato se puede empezar a filtrar el contenido que es relevante.

14. EEHarbor

Mientras que muchos de los sitios web que aquí se presentan, utilizan transiciones para cambiar el contenido sin actualizar la página, la forma en que EEHarbor cambia de locación es casi imperceptible. La velocidad del servidor es una de las razones de su éxito.

15. Manchester DS

Manchester DS cuenta con una interfaz super-limpia y simple. Una sola página web en vertical, con una cabecera fija. Mientras que el efecto no es particularmente inusual, el enfoque simple y la ausencia de animaciones y transiciones locas hacen un contraste interesante con muchos de los sitios web expuestos aquí.

16. Renato Zero

Renato Zero cargar una página web se convierte en un hermoso evento. Cada sección se carga con una animación ingeniosa a medida que se desplaza hacia abajo. Las animaciones son rápidas, no te sientes como si estuvieras esperando. El efecto sin duda se ve aun mejor que Flash.