Gracias a PurtyPixels podemos contar con este reproductor de audio con muy pocos controles pero que contiene lo justo y necesario para variar el volumen, pausar y avanzar de forma continua. No se puede saltar a un punto específico del archivo de audio, pero si desean mostrarlos en su web, quizás les resulte interesante y puedan aplicar otras plantillas al diseño manteniendo la programación.

Descargar Super Pruty jQuery Player | Ver Demo | PurtyPixels

Es una herramienta que puede parecer simple, pero que ofrece una gran cantidad de ventajas para futuros proyectos, verán incluídos el archivo .psd de diseño, que pueden editar como gusten para combinarlo con el entorno de un sitio, y los archivos de programación tanto de estilo (.css) y jQuery (.js).

Una vez que analicen el contenido y el funcionamiento de este reproductor, estoy segura que podrán elaborar nuevas opciones a partir de sus propios diseños, o algunos de los que hemos publicado aquí.

En este caso, quiero mostrarles el resultado de la implementación de un banner animado realizado con CSS3. Se trata de un experimento que pueden utilizar y analizar modificando elementos para generar nuevas opciones. Verán dos opciones de banners: uno vertical y otro horizontal, con el mismo motivo aplicado de en sentido acotado.

Descargar Animated Web Banners with CSS | Ver Demo | Tympanus

Entiendo que la animación es muy básica, pero conociendo las herramientas, se pueden generar posibilidades infinitas, es cuestión de aprender a utilizarlas y seguir creando sobre proyectos propios.

Pero como todo cambio se critica y las opiniones usualmente son personales y según el lado en el que se coloque cada uno, voy a pasarlo por alto, ya que considero que uno no siempre diseña para web y puede resultar de suma utilidad conocer con qué herramientas puede contarse para elaborar presentaciones desde nuestro propio ordenador, o porqué no, en una instalación electrónica.

Descargar Thumnail Proximity Effect | Ver Demo | Tympanus

En este caso, la gente de Tympanus, nos brinda tres opciones de visualización de una galería de imágenes animada según las acciones del mouse. Esto es muy simple de hacerse con jQuerry y no creo que haya demasiados problemas con la implementación en exploradores no del todo antiguos.

Tengan en cuenta siempre, antes de aplicar estas herramientas en los diseños, que probablemente pierdan efectos cuando se trasladen a exploradores antiguos. La idea detrás de estos efectos es ofrecer información sobre los botones, sin importar cuáles sean. En la demo verán que se utilizan iconos sociales, pero la realidad es que pueden ser reemplazados por otras opciones sin problemas.

Descargar Animated Tooltips With CSS3 | Ver Demo | Tympanus

Verán todos los códigos competentes en el sitio, y pueden descargar el código para analizar y utilizar sin problemas. Pueden cambiar las imágenes y los textos que aparecen y elegir la forma en la que lo hacen, hay 4 opciones planteadas, pero si se animan pueden generar muchas más y quizás encontrar algunas más adecuadas a lo que están necesitando.

Con CSS3 podemos colocar las imágenes que deseemos mostrar de fondo y al mismo tiempo, como muestra este ejemplo hacer aparecer textos sobre ellas de forma suave a través de jQuery.

Tengan en cuenta que esto solo funciona en exploradores que soportan animaciones CSS3, por lo que si quieren implementarlo en un sitio web para terceros, deben conocer estas cuestiones y así evitar problemas. Aún a pesar de estas características que ojalá se solucionen alguna vez, creo que el resultado es muy efectivo para desplegar presentaciones en loop y que ocupen un gran espacio, a través de pantallas grandes en paredes o proyectores, puede ser una buena forma de presentar una marca y armar una pequeña instalación.

Descargar Fullscreen Background Image Slideshow | Ver Demos | Tympanus

Para aplicarlo, se coloca en el HTML una lista desordenada para el visor y una división span para cada imagen:

<ul class="cb-slideshow">
    <li>
       <span>Image 01</span>
    <div>
       <h3>re·lax·a·tion</h3>
    </div>
    </li>
<li><!--...--></li>
<li><!--...--></li>
</ul>

Mientras tanto, en el CSS le damos estilo a la lista desordenada del visor y colocamos una textura sobre las imágenes a través de un :after pseudo-element.

.cb-slideshow,
.cb-slideshow:after {
             position: fixed;
             width: 100%;
             height: 100%;
             top: 0px;
             left: 0px;
             z-index: 0;
               }

.cb-slideshow:after {
             content: '';
             background: transparent url(../images/pattern.png) repeat top left;
               }

Para asegurarnos que la imagen cubra toda la pantalla sin importar el tamaño, debemos otorgar a la lista de span la propiedad background-size en cover.

.cb-slideshow li span
               {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  color: transparent;
                  background-size: cover;
                  background-position: 50% 50%;
                  background-repeat: none;
                  opacity: 0;
                  z-index: 0;
                  animation: imageAnimation 36s linear infinite 0s;
               }

El resto, pueden verlo y descargarlo desde Tympanus con todos los detalles necesarios para hacerlo funcionar con sus propias imágenes.

Hoy navegando por 365psd fui a dar con este calendario, en formato Photoshop, y que visualmente supera ampliamente a las implementaciones que vienen por defecto en las bibliotecas más populares.

El calendario se ve de la siguiente forma:

Si bien el calendario viene en formato PSD utilizarlo en nuestros proyectos no es para nada complicado. Simplemente vamos a tener que dividir por un lado el encabezado, luego el fondo de las celdas y finalmente el elemento seleccionado. Luego lo definimos en la hoja de estilo de nuestro proyecto y ya tendremos nuestro calendario con un diseño estupendo.

Este calendario se encuentra liberado para su uso libre, y la descarga no tiene costo alguno, ni requiere registro, una verdadera ganga para no desaprovechar

Web: Calendar PSD

Había empresas como 2advanced que llevaban adelante proyectos realmente geniales, pero con el boom del CSS mutaron hacia el desarrollo de juegos, abandonando casi por completo los sitios, aunque aún continúan realizando creaciones espectaculares, sobre todo animaciones de productos, aún elaboradas en Flash. Recuerdo hace algunos años ya, cuando recién nos iniciábamos en esto, el lanzamiento de un nuevo sitio de 2Advanced, era seguir la cuenta regresiva para ver con qué nueva fantasía nos sorprendían como quien espera un estreno de película.

Quienes extrañen esta época, y deseen agregar animaciones en una botonera, hoy en día pueden optar por hacerlo con CSS3, es por eso que esta herramienta me ha resultado muy atractiva para poblar de movimiento espacios que antes solo desplegaban un cambio de estado en los botones.

Descargar Animated Buttons with CSS3 | Ver Demos | Tympanus

Esta colección de animaciones realizada por Tympanus, posee gran atractivo visual y resulta bastante fácil de aplicar con paciencia y algunos conocimientos de CSS. El resultado es un movimiento que hasta ahora no había visto en botoneras elaboradas con esta forma y la posibilidad de llamar la atención del usuario hacia un punto en particular, en especial con los call to action.

Hay siete opciones de animación, cada una muy diferente a la otra y con elementos destacables, ya verán ustedes cual es la que les es más propicia para el proyecto en el que se encuentran trabajando, pero cierto es que ninguna tiene desperdicio.

Desarrollado por simurai, Zen Player es una excelente opción para evitar incluir cualquier archivo de Flash como reproductor de audio en nuestro sitio.

Ver Demo de Zen Player | Descargar Zen Player

El diseño es super minimalista y puede resultar excelente para casi todo tipo de sitios ya que no está recargado ni tiene controles excedentes, es útil para reproducir un solo sonido por lo que resulta ideal para podcasts y es muy fácil de instalar.

Agradezco a Wwwhatsnew por el hallazgo.

Obviamente deberán tener en cuenta las compatibilidades entre exploradores a la hora de usarlas, pero estoy segura que es un recurso que no solo les ahorrará trabajo sino que disparará opciones creativas para aplicar los textos de formas diferentes y originales.

Descargar Awesome Pure CSS3 Frame Boxes | WordPressThemeShock

Por ahora, según comentan en WordPressThemeShock, por ahora solo están disponibles para visualizarse en Chrome y Safari, entiendo que es poco, pero prometen sacar a la luz versiones cross browser muy pronto. 16 opciones de cajas diferentes, con efectos exteriores y un diseño muy bueno, seguramente podrán utilizarlas como plataforma para crear nuevas cosas.

Servicios como los que brindan empresas como Amazon llegaron para quedarse, y son de obligado estudio a la hora de seleccionar un proveedor de alojamiento. Por ejemplo contratar Amazon tiene sus grandes ventajas que paso a detallar brevemente.

Amazon S3. Es la opción para almacenamiento online, en este servicio por ejemplo podemos alojar todas las imágenes de nuestro sitio por un costo realmente bajo si lo vemos desde la perspectiva de la disponibilidad. Hace aproximadamente un año y medio que lo utilizo y a la fecha no registro una sola caída, y eso es muy impresionante.

Con Amazon S3 vamos a pagar por GB almacenado, por transferencia y finalmente por solicitudes a los archivos guardados. Mediante una simple configuración podemos hacer que todos los archivos estáticos de nuestro sitio sean servidor por este servicio sin recargar para nada nuestro servidor, recordemos que gran parte del consumo de recursos es proveniente de los mismos.

Amazon EC2. Los servidores virtuales y con posibilidad de escalar prácticamente de forma infinita. Amazon los llama AMI a las instancias creadas, cada instancia varia en su tamaño, capacidades y potencia, así y como es obvio, en precio.

Obviamente el tema de Amazon da para largo, tienen mucho más servicios, y con configuraciones que varían de uno al otro, no obstante el tema principal de esta entrada no es hablar de Amazon, sino de ¿Necesitamos alojarnos en la nube?

Y es una pregunta simple, pero con variedad de respuestas. Antes de la nube existían muchas ofertas de empresas, uno quería un alojamiento y las ofertas eran muchas pero la realidad era que los rangos de los servicios eran pocos (hosting compartido, VPS, dedicado) y uno una vez seleccionado el rango apropiado se limita a seleccionar una empresa con el respaldo suficiente y buen servicio para que nuestro sitio no este caído por cada tres accesos.

¿Entonces que hacemos? Vamos a la empresa de alojamiento web de toda la vida o probamos ir directamente a la nube?

La nube es tentadora, buen precio, escalabilidad automática, pero hay algo que todavía se mantiene como punto negativo y es la complejidad de instalación y el mantenimiento, que si bien no es imposible cuesta bastante más trabajo que en un alojamiento provisto por una empresa de hosting convencional.

Si aplicamos la base de rangos de siempre de los servicios web en mi humilde opinion aconsejaría:

• Si tu sitio encaja en la configuración de un hosting compartido. Empresa de Hosting convencional.
• Si tu sitio encaja en la configuración de un VPS administrado o semi-administrado. Empresa de hosting convencional.

Si tu sitio requiere un servidor dedicado. Probablemente tengas que mirar las opciones en la nube.

En conclusión si tu proyecto puede comenzar funcionando en un servidor pequeño, no tiene sentido la complejidad de la nube, no inicialmente. Un punto favorable es que se puede lograr una solución mixta. Por ejemplo, y como comente al principio, puedes utilizar un hosting convencional, un VPS por decir algo, y combinarlo con S3 para servir contenido estático, y así progresivamente, no es necesario mudarse por completo a la nube.

¿Que opinas? ¿Tienes experiencia alojando servicios en la nube?