PlaceIt – Genera instantáneas realistas con tus fotos en iPhone, iPad y pantallas Apple

 

PlaceIt es un servicio web que genera imágenes realistas de dispositivos móviles (iPhone, Ipad) y pantallas (Apple) mostrando la foto que subas.

foto de un iPad mostrando la página de Birii

Birii en la pantalla de un iPad

Cuando queremos mostrar el avance de un diseño web que estamos realizando, mostrarlo dentro de un entorno realista facilita imaginarse cómo va a visualizarse el resultado final.

PlaceIt permite generar capturas realistas con tus fotos

PlaceIt – Servicio web gratis

Seguir leyendo

Shapeshift Plugin jQuery organiza elementos en cuadrícula con drag & drop

 

Shapeshift es un plugin jQuery que permite organizar dinámicamente elementos que están dentro de una cuadrícula.  Lo que hace especial a este plugin es que también permite arrastrar y soltar los elementos para reordenarlos. Se puede reubicar cualquier elemento de la cuadrícula en otro sitio simplemente arrastrándolo y soltándolo sobre la posición deseada.

plugin jquery shapeshift

Plugin jQuery Shapeshift

Otra característica de Shapeshift es que si se cambia el tamaño de la cuadrícula, su contenido se reorganiza automáticamente para adaptarse a las nuevas dimensiones. También pueden utilizarse directivas CSS3 a los objetos para que se ajusten automáticamente al nuevo tamaño.

Las características más destacadas de este plugin son las siguientes:

Sistema de cuadrícula: Los elementos flotan de izquierda a derecha y de arriba hacia abajo.
Seguir leyendo

Listado de países en formatos HTML, JSON, PHP, SQL, CSV, YAML

 

Es habitual que los programadores se encuentren con la necesidad de mostrar un desplegable de países para que un usuario pueda indicar dónde nació, etc. Para este tipo de tareas es para lo que sirve este listado de países en diferentes idiomas y disponible en múltiples formatos como HTML, JSON, PHP, SQL, CSV, YAML, texto y volcados para cualquier base de datos estándar SQL (como MySQL).

Listado de países del mundo

Banderas del mundo

La versión HTML utiliza sprites (pequeños gráficos) con las banderas de todo el mundo.

Photobox – plugin jQuery para galerías de imágenes con CSS3

Photobox es un plugin jQuery para crear galerías de imágenes que utilizan transiciones y animaciones hechas con CSS3.

Photobox - Plugin jQuery para galerías de imágenes

Los puntos fuertes de este plugin son los siguientes:

* El script y el CSS ocupan 7Kbytes cada uno (el script minimizado, sin comprimir con gzip)

* Para obtener las mejores prestaciones posibles, aprovecha la aceleración hardware para que las transiciones y animaciones CSS3 sean lo más suave posibles.

* Bonito interfaz de usuario y fácil de utilizar.

* Precarga CSS3 hecha a medida. La única imagen que necesitas es el archivo “arrow.png” (y pronto ni siquiera eso).

* Funciona también en IE9 (Internet Explorer 9) y posteriores, aunque obviamente, no tan bien como con otros navegadores “normales”.

*En todos los eventos de miniaturas (thumbnails) se aplica la técnica de event-delegation (esto es significativo para desarrolladores expertos). Esto significa que la gestión de eventos se aplica automáticamente incluso a nuevos elementos que sean añadidos de forma dinámica a la galería de imágenes.

 

Con Photobox el autor del plugin buscaba tres cosas: que fuera bonito y atractivo, que no “pesara” mucho y funcionar sin necesidad de otros componentes y, por último, que tuviera un buen rendimiento a la hora de mover los gráficos. Parece que lo ha conseguido, pero también es cierto que es necesario contar con un procesador (o tarjeta gráfica) medianamente potentes para que los movimientos se vean con soltura.

Lo que permite hacer el plugin de Photobox es, básicamente, lo siguiente:

* Hacer zoom (acercarse y alejarse) sobre las imágenes con la rueda del ratón y navegar utilizando el movimiento del ratón para moverse por las fotos.

* Las miniaturas que aparecen en la parte inferior de la pantalla pueden seleccionarse con el movimiento del ratón.

* Se muestra el texto de los atributos “alt” o “title” en la parte inferior.

* Se muestra el índice de la foto en que nos encontramos, lo que nos permite saber cuántas nos quedan por ver (Ejemplo: 25/80)

Seguir leyendo