Frogx.Three » diseño web...

4 Aplicaciones para crear animaciones CSS3

Jorge — Thu, 09 Feb 2012 13:00:24 +0000

Ultimamente hemos esta hablando mucho de HTML5 y CSS3 y es que son las tendencias actuales del diseño web, una consecuencia de estas tendencias es dejar de utilizar Flash y empezar a utilizar mejores alternativas para animaciones. Por supuesto la mejor alternativa a esto es CSS3, con las nuevas características de CSS3 podemos crear diseños web con animaciones y que estas sean compatibles con todos los navegadores tanto de escritorio como en dispositivos móviles como Android, iPhone e iPad, debemos recordar que la mayoría de estos equipos no ofrecen soporte para Flash.

El problema esta en que no todos los diseñadores web tienen habilidades con la programación y les puede resultar muy difícil aprender a programar animaciones utilizando CSS3, para aliviar esta necesidad muchas empresas han creado aplicaciones para crear animaciones CSS3, es por ello que quisiera compartirles 4 programas para crear animaciones CSS3.

Adobe Edge

Actualmente en fase Beta, lo pueden descargar de manera gratuita, la licencia gratuita vencera en el momento que Adobe decida lanzar una versión estable del programa, el programa te permite crear animaciones y utilizar todas las características que CSS3 ofrece, Adobe Edge tiene versiones para Windows y Mac.

Descargar

Sencha Animator

Sencha Animator es una aplicación crear diseños web con animaciones CSS3 y también aplicaciones Touch para utilizar en iPad o iPhone, Sencha ofrece versiones para Windows, Mac y Linux, pueden descargar una version de prueba de 15 dias.

Descargar Demo 15 dias | Licencia $199 usd

Purple para Mac

Ota aplicación que te permite basicamente lo mismo, en este caso Purple solo es para Mac y te permite exportar los gráficos separados por Layers a Photoshop para que los puedas optimizar y o modificar, permite exportar el código resultante y también crear scripts Javasscript para mayor dinamismo de las animaciones HTML5 con Ease.

Descargar de Mac Store $299 pesos ($19.99 USD)

Hype para Mac

Hype te ofrece un ambiente de trabajo similar a Adobe Flash, con escenas y lineas de tiempo, te permite utilizar Javascript y exportar código HTML y CSS3, también te permite guardar tus trabajos directamente a Dropbox.

Descargar version de Prueba | Descargar de Mac Store $600 pesos ($49.99 USD)

10 Impresionantes diseños web de portafolios

Jorge — Tue, 07 Feb 2012 16:00:27 +0000

Eres diseñador gráfico o fotografo, bueno seguro tendrás un portafolio de diseños y fotografías, y esperamos que lo tengas en Internet ya que es una excelente herramienta de captación de clientes, pero, el diseño de tu portafolio demuestra tus habilidades como diseñador? Si no lo sabes o no te convence el diseño web de tu portafolio, bueno pues puedes sacar algunas ideas e inspiración de esta pequeña recopilación de diseños web de portafolios en Internet, simplemente son geniales.

Collected

Pixel Brands

Moresoda

Hello Studios

Aylis

Filament

Harry Ford

Elevate

Bertrand Bruandet

Chad Tafolla

Haz pruebas de compatibilidad CSS3 a tu navegador

Jorge — Tue, 07 Feb 2012 13:00:52 +0000

Junto a HTML5 viene CSS3 buscando renovar el diseño web actual, con muchas caracteristicas bastante interesantes, pero como siempre hay un problema, se trata del soporte CSS3 de los navegadores web, muchas veces puedes realizar un diseño web impresionante y puedes pensar no me demore mucho, pero cuando empiezas a probar con otros navegadores te das cuenta que aun te falta mucho porque quizas algunas caracteristicas de CSS3 que utilizaste son compatibles con Google Chrome pero no con Internet Explorer.

Si este ha sido tu problema puedes seguir el enlace a continuación y hacer una prueba de compatibilidad CSS3 a tu navegador web y así enterarte que características soporta tu navegador y cuales no y después comparar.

Enlace: The CSS3 Test

Como se ve tu pagina web, según la resolución de pantalla

Jorge — Mon, 06 Feb 2012 16:00:23 +0000

Algo que buscadores como Google tomán es lo primero que ven los usuarios al entrar a una pagina web, según la resolución de pantalla es el rango de información que una persona logra ver a primera vista cuando entra a una pagina, es decir verticalmente no vas a ver la misma cantidad de información en una pantalla widescreen que en una pantalla estándar 4:3, eso Google lo toma en cuenta.

Si una persona al entrar a tu pagina lo primero que ve es publicidad y tiene que bajar el scroll para poder empezar a leer tu contenido, ten por seguro que Google te penalizara, pero como saber que es lo que tus visitantes miran primero, bueno existe una utilidad en Google Labs que te permite darte una idea, se llama Browser Size y es muy sencilla de utilizar, unicamente entra al sitio y escribe la dirección de tu pagina.

Automaticamente se cargara tu pagina y por encima una imagen translucida en la que puedes ver las dimensiones de pantalla y el porcentaje de los usuarios que las utilizan, es muy útil y es una de las herramientas que hemos tomado en cuenta en el diseño de este blog, espero sea de utilidad para ustedes.

Enlace: Browser Size

Plantillas WordPress Gratis: Small Magazine

Jorge — Fri, 03 Feb 2012 15:17:24 +0000

Excelente plantilla WordPress gratis para descargar sin problemas de licencias, esta la sumamos a los antiguos posts con plantillas WordPress que hemos publicado, esta lleva el nombre de Small Magazine y tiene un estilo minimalista y facilmente configurable, entre sus características tenemos:

Lista para WP 3.3.1+
Panel de opciones de la plantilla
Slider para contenido destacado
Layout de dos columnas
Lista para Widgets
Posiciones para publicidad predefinidas
Widget de “Subscripción RSS” personalizable
Menus desplegables multi nivel

Descargar en: WP Themes Now | Más plantillas

Excelentes Wallpapers para diseñadores Web

Jorge — Thu, 02 Feb 2012 16:00:31 +0000

Excelentes wallpapers para diseñadores web, se trata de una serie de Cheat Sheets convertidas en Wallpapers para tener más cerca las referencias necesarias que a diario necesitamos los diseñadores web, entre ellos hay Wallpapers sobre colores, WordPress, diseños de tipografías y al menos para mi la mejor es la que muestra las partes que componen una tipografía, son geniales, espero sean de su agrado.

Descargar (2 versiones colores claros y oscuros)

Descargar

Visto en: Design Beep

Tabla interactiva de compatibilidad HTML5

Jorge — Wed, 01 Feb 2012 20:20:51 +0000

Tabla interactiva de compatibilidad HTML5 para conocer en que navegador podemos implementar cada una de las características de HTML5 en diseño web, la tabla te recomienda que puedes utilizar y que navegadores y dispositivos tienen soporte para dicha función, en cada función se te muestra información y el tipo de función si se trata de CSS3, un API integrada en HTML5 o simplemente nuevo código HTML.

Enlace: HTML5 Please

45 Diseños web utilizando efectos parallax

Jorge — Wed, 01 Feb 2012 15:00:04 +0000

Que les parece esta increíble recopilación de 45 diseños web utilizando efectos parallax, los efectos parallax son uno de los efectos mas atractivos que podemos lograr utilizando JavaScript, una de las librerías que nos facilitan esto es jQuery, y es que los diseños con efecto Parallax aplicados de forma creativa pueden tener increíbles resultados en diseño web.

Un script de MooTools muy bueno para lograr este efecto es mParallax y por el otro lado para jQuery tenemos jParallax, se rompieron la cabeza con el nombre.

LivingWord

Siebennull

Moods of Norway

Head 2 Hearth Us

Tennessee Trails & Byways

Enlace: Design Resource Box

45 Shapes Photoshop para diseño web

Jorge — Wed, 01 Feb 2012 14:30:17 +0000

Les comparto un excelente paquete de Shapes Photoshop para diseño web que pueden descargar gratis, son un total de 45 Shapes Photoshop en un archivo CSH para utilizar en Photoshop, le pueden cambiar los colores para integrarlos perfectamente en sus diseños de paginas web.

Descargar en: Shapes 4 Free

Nuevos cambios en el diseño de YouTube

Jorge — Fri, 27 Jan 2012 14:00:39 +0000

En Diciembre YouTube presentaba un nuevo diseño, prácticamente un mes después han hecho algunos cambios, nada radical pero la verdad da gusto, ya que estos cambios son porque han estado pendientes del Feedback o retroalimentación que los usuarios le dimos a la gente detrás de YouTube, como resultado están los siguientes cambios.

Editor de Video

El mayor cambio fue en el editor de video es cual basicamente fue rediseñado pensando en la usabilidad para el usuario final, ahora el editor de video de YouTube tiene un diseño muy similar a los programas de edición como Adobe Premiere o iMovie.

Cambio en los canales

Se le cambio un poco a los canales con el nuevo boton situado en la parte superior derecha de la pagina, el cual permitira reproducir con un solo click todos los videos del canal o sección.

Administrador de Videos

El administrador de videos de YouTube también fue retocado en el se agrego un historial de búsquedas y se volvieron a poner las estadísticas de las funciones de “Me gusta” y “No me gusta”, algo sencillo pero muy útil.