Mayumi Blogger Template

Pueden darle un vistazo en el siguiente enlace.

Link: Designing MacBook & iMac Using CSS3

En ejemplo de cómo se vería la animación para el RSS del blog RFSDigital sería la siguiente.

En la siguiente imagen vemos la lista de los juguetes que han sido más representativos en cada uno de los últimos años.

La lista de los juguetes es la siguiente:

1963: Easy Bake Over
1964: G.I.JOE
1965: Operation
1966: Twister
1967: Battleship
1968: Hot Wheels
1969: Chemestry Set
1970: Lite-Bright
1971: Space Hoppers
1972: Uno
1973: Walkie Talkie Sets
1974: Tonka Toys Trucks
1975: Pet rock
1976: Connect 4
1977: Figuras de Stars Wars
1978: Simon
1979: Atari
1980: Cubo de Rubik
1981: Tren de Lego
1982: Bicicletas BMX
1983: Cabbage Patch Kids
1984: Transformers
1985: Nintendo
1986: Laser Tag
1987: Jenga
1988: Starting Lineup
1989: Game Boy
1990: Tortugas Ninja
1991: Super Nintendo
1992: Barbie Dream House
1993: Talkboy
1994: Power Rangers
1995: Beanie Baby
1996: Tickle Me Elmo
1997: Tamagotchi
1998: Furby
1999: Pokemon
2000: Razor Scooter
2001: Pogo Stick
2002: Furreal Cat
2003: Robosapiens
2004: Nintendo DS
2005: xBox 360
2006: Playstation 3
2007: iPod touch
2008: Nintendo Wii
2009: Zhu Zhu Pets
2010: iPad
2011: LeapPad
2012: Wii U

Link: 50 years 50 toys

Fuente: Murió Nelson Mandela: la vida de un hombre que luchó por la libertad

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google+.

Link: LifeSizeMessi.com


¿Qué les pareció la animación? ¿Han visto algo similar?

A través de Teehan+Lax Labs podemos ver esta interesante aplicación que permite ver una imagen proyectada de Google Street View que es convertida a código ASCII.

Este proyecto se realizó con el uso de WebGL, específicamente de las texturas de CORS para WebGL, 
TextFX, three.js y el Google Street View Panorama.

Aquí pueden ver un video del proceso de conversión de video a ASCII.a través de una especie de "brocha digital":

De los buscadores de Gifs animados que conozco, Giphy.com tal vez sea el más atractivo ya que posee un diseño practico como vistoso; veremos en un solo golpe de vista un buscador inmenso en la parte superior y un mosaico de Gifs animados a modo de ejemplos en toda la parte inferior. La simplicidad en el diseño web hecho arte. 

También en la parte superior derecha, en el botón "Browse", podemos entrar en su sección de búsqueda más detallada "Categorías populares" divididos en 12 categorías como: tv, películas, celebridades, música, anime, etc. Todos estos gifs se pueden compartir por Twitter, tumblr, Facebook o insertarlos en nuestros blogs. 


Esta atractiva web es creación de la empresa Betaworks, adquirida nada menos que por Digg. Entre los trabajos que están realizando los chicos de Betaworks está la de un lector de feeds, la que será lanzada próximamente. 

Siguiendo con el buscador Giphy, otra cosa curiosa es que en el mosaico de Gifs, en la página principal, no hay necesidad de abrir individualmente los gifs para verlos, basta con poner el puntero del mouse encima para que se carguen o ver el Gif animado en acción y si los abrimos, veremos que todos los Gifs son grandes. Página web recomendada.

En el siguiente post les mostraremos una gran infografía que nos muestra a distintos filósofos a lo largo de la historia y las conexiones entre sus diferentes pensamientos.

Pueden ver el mapa y hacerle zoom para ver la gran cantidad de autores, pensadores, filósofos tomados en cuenta:


 

Qué les pareció ¿Conocen alguna infografía similar?

La interesante propuesta de esta herramienta web: Coub.com, es la de crear o generar videos que duren un máximo de 10 segundos y poder compartirlos con amigos copiando y pegando el código en nuestro blog [embeber o incrustar] y/o vía facebook para que lo disfruten nuestros contactos (también podremos comparitr el video enviando la url del video solamente). También por medio de facebook podremos logearnos sin necesidad de agregar más datos adicionales. 


Hasta ahora cuando queríamos compartir imágenes animadas curiosas solo lo podíamos hacer vía archivos gifs. Ahora gracias a esta curiosa aplicación no solo podremos compartir las misma imágenes, de corta duración, sino también agregarle sonidos, música, etc. 



Los archivos de video a modificar, podemos subirlos desde nuestra PC (un máximo de 200 MB) o también desde servicios de videos streaming como Youtube o Vimeo. La web, nos permite seleccionar la parte o sección del video que queremos mostrar (solo 10 segundos de toda la longitud del video). 

Video demostrativo:


Este servicio web es muy interesante y entretenido. Recomendado.


Enlace: Coub.com

Curiosa infografía interactiva que nos muestra la historia completa de todas o casi todas las redes sociales. Esta infografía es una creación de Avalaunch Media, expertos en marketing de contenido, SEO, etc. 

Esta infografía interactiva es muy simpática como intuitiva en la cual una mascota de nombre Eddy nos muestra la historia completa del social media. Solo escogemos las épocas divididas entre los siglos 1800, 1900 y 2000 al lado derecho y los años o décadas al lado izquierdo, estos nos mostrarán los años de las creaciones de los inventos más representativos como el telégrafo por ejemplo, a las empresas tecnológicas y de servicios en los últimos años. 


En un lapso corto de tiempo veremos uno de los inventos que marca el inicio de las redes sociales, nos referimos al correo, mucho antes del siglo XVIII claro está; hasta la llegada de Vine para nuestro iPhone en el presente, entre otros muchos servicios a los que ya estamos acostumbrados hoy en día. 


Enlace: Social Media: Su historia completa en una infografía interactiva 

En el siguiente post les hablaré de una aplicación que permite hacer animaciones a partir de texto y  que les va a gustar a las chicas, sobre todo por tratarse de animaciones de pequeños cachorros para enviar mensajes.

También si quieres enviar un mensaje a tu chica puedes hacerlo con este sencillo detalle, no tiene pierde :p

Solo escriben el texto y la aplicación genera el texto automáticamente. 

Link: Puppytext

¿Qué les pareció? ¿Conoce alguna aplicación similar?

Esta curiosa aplicación web Virtualdrumming.com, viene a engrosar nuestro antiguo post y uno de los más visitados: "Instrumentos musicales virtuales en internet: Una lista completa". Y como los demás instrumentos virtuales de ese post. Virtual Drums, también es una divertida aplicación que nos hará conocer mejor como funciona y se toca un instrumento musical, en esta ocasión la batería (online) utilizando sólo nuestro teclado.


Esta web tiene 19 tipos de baterías, todas distintas, las cuales podremos escoger fácilmente, están clasificados en: Rock Drum Sets o Baterías para tocar rock [seis en total]; Metal Drum Sets o Baterías para tocar Metal [tres]; Jazz Drum Sets o Baterías para tocar Jazz [cuatro]; Fusion Drum Sets [dos] y Original Drum Sets [cuatro]. 
Con respecto a cada una de las teclas ya asignadas para cada uno de los instrumentos que componen la batería, estas se pueden reconfigurar como en los videojuegos con el botón "Reset All" y si quieres volver a la configuración por defecto de la batería, presionamos el botón "Default". La página web es muy intuitiva, muy fácil de usar.


Todas estas baterías son muy entretenidas pero la que me causo más gracia fue la última opción en: Original Drum Sets [cuatro], la Live Drums, como su nombre lo indica tocas tu batería online en vivo o con público, uno particularmente muy gritón. ^^


Enlace: virtualdrumming.com

Es fascinante ver las nuevas páginas web que uno se encuentra en Internet con sorprendentes contenidos multimedia generado con el nuevo estándar HTML5 o sea sin necesidad de plugins adicionales para nuestros navegadores como el Adobe Flash.

A continuación les dejo cinco webs divertidas en HTML5, solo necesitaremos de un navegador compatible como: Chrome, Firefox, Safari, Opera o Internet Explorer.

1.- Brandon Generator 


Brandon Generator, o Las aventuras de Brandon, es un concepto muy interesante que es parte webcómic, parte cortometraje de animación, es un excelente experimento en HTML5. El contenido fue escrito por Edgar Wright (director de Hot Fuzz y Shaun Of The Dead ), ilustrado por Tommy Lee Edwards de LucasFilm, y narrado por Julian Barratt de The Mighty Boosh. Hay cuatro episodios de Brandon Generator en total, con los argumentos de episodios pasados generados por el público que interactuó con el contenido cuando fue subido a la web en el 2012. Microsoft estaba detrás de Brandon Generator, de ahí la aparición del logo de Internet Explorer en el sitio. Sin embargo, gracias al HTML5, el contenido está disponible para verlo en todos los navegadores modernos.


2.- The Rational Keyboard 


The Rational Keyboard o el Teclado Racional, es una aplicación Web HTML5 de Fritz Obermeyer. Se compone de un generador de melodías que el usuario es capaz de cambiar. Las notas cambian constantemente con el fin de mantener la melodía que suena de manera agradable. Hasta que se producen problemas técnicos de sonido, en ese momento se aconseja poner en pausa el teclado para poder restablecerla. Hay cuatro diferentes formatos del instrumento, aunque al cambiarlos sólo se modifica el aspecto, más no el sonido. Es una página muy curiosa y bien trabajada.


3.- The Two Minute Test 


The Two Minute Test o La prueba de dos minutos, es una web que hace varias preguntas para poner a prueba tu conocimiento general y/o nivel de inteligencia. El objetivo final es ver si tienes las habilidades básicas que se requieren para convertirse en un maestro. Las preguntas son presentadas en un formato visual agradable, con números flotantes, o las representaciones de los planetas del Sistema Solar, etc. Se comienza con 100 puntos de 100, y esta puntuación va cayendo a medida que cometes errores. Y a menos que seas @severito u otro científico popular, es un hecho que cometerás crasos errores. ^^ Sólo hay seis tareas para completar en esta curiosa web, y es una prueba de solo dos minutos. Suerte.

4.- Catifier 


Catifier, es una divertida herramienta para probar a arrastrar y pegar gatitos en un fondo que podremos cambiarlo solo escribiendo la dirección donde este alojada nuestra imagen. Esta web no es la gran cosa pero divierte y más si ponemos de fondo fotos conocidas o de conocidos al cual podemos adornarlo de gatitos, de muchos gatitos. ^^

5.- Shiny Demos 


Shiny Demos o Demos brillantes, nos ofrece un verdadero paquete de páginas webs en HTML5. Hay docenas de demostraciones que nos muestran el poder del HTML5, ninguna de las cuales nos llevará más de unos cuantos minutos para probarlos. Las aplicaciones utilizan diferentes elementos de HTML5, todos divididos en secciones para que podamos verlos fácilmente. Además de los juegos y pantallas interactivas de audio y vídeo, hay explicaciones de los diversos elementos que componen el HTML5. Esto podría ofrecer a los desarrolladores Web una nueva forma para entender mejor sus conceptos básicos.

En el siguiente post les mostraremos una animación basada en el tratamiento de elementos html input estilizados con CSS3 sin hacer uso de imágenes adicionales o JavaScript.

Cabe mencionar que son visibles en Chrome o Safari, si usan Firefox no se verá correctamente ya que, como el autor indica, está hecho para navegadores que soporten Webkit.

Pueden darle un vistazo en el siguiente enlace.

Link: CSS3 appearance none

En el siguiente post les mostraremos iconos del sistema operativo de Apple, iOS, hecho enteramente en CSS3. Me llamaron la atención por el gran parecido con los íconos de las aplicaciones de Apple.

Cabe mencionar que son visibles en Chrome, si usan Firefox no se verá correctamente ya que, como el autor indica, está hecho para navegadores que soporten Webkit.

Pueden darle un vistazo en el siguiente enlace.

Link: iOS Icons in pure CSS

En el siguiente post les mostraremos una simulación de la interfaz de Photoshop hecha enteramente en CSS3.

La simulación está compuesta por la interfaz que sale al iniciar el programa, la interfaz principal del programa y una ventana emergente.

Es un desarrollo en CSS3 visualmente atractivo que vale la pena ver.

Link: Adobe Photoshop Simulator

¿Qué les parece la animación? ¿Conocen alguna animación en CSS3 similar?

Link: Build WIth Chrome