ATENCIÓN: este contenido tiene más de 2 años de antigüedad y, debido a su temática, podría contener información desactualizada o inexacta en la actualidad.
Cuando creamos una aplicación o un diseño Web es muy habitual querer enseñárselo a nuestros clientes (aunque sean internos) en diversos dispositivos y relaciones de aspecto. En otras ocasiones, poder simular el funcionamiento directamente dentro de una página web es algo muy interesante también.
En estas ocasiones es cuando nos las ingeniamos para tratar de que parezca que están dentro de ciertos dispositivos: un iPhone, un tablet, un Mac de sobremesa, un portátil... Para lo cual muchas veces lo único que hacemos es tratar de encajarlos dentro de un gráfico y poco más.
Angelos Arnis y Tomi Hiltunen, unos diseñadores finlandeses, han creado un pequeño framework que es realmente interesante. Se llama Pixelsign y se trata de una utilidad que nos permite crear un envoltorio para nuestro código HTML que simula casi cualquier de dispositivo.
Para ello solo hay que copiar el framework a nuestro proyecto, añadir una referencia a una hoja de estilos en la página y con un código tan simple como este:
<div class="device-mockup" data-device="iphone5" data-orientation="portrait"
data-color="black">
<div class="device">
<div class="screen">
<!-- LOS CONTENIDOS DE TU APP AQUÍ -->
</div>
<div class="button">
<!-- Puedes enlazar eventos a este botón de inicio -->
</div>
</div>
</div>
obtenemos esto:
Y dentro estará el código que le hayamos introducido, simulando encontrarse dentro de un iPhone 5.
Fíjate en lo sencillo que es generarlo, ya que solo basta con decorar los elementos con un par de clases CSS y listo. Con ello podemos simular varios tipos de teléfono, tabletas y ordenadores, y además es posible elegir colores y orientaciones de la misma manera.
El proyecto es Open Source y por supuesto totalmente gratuito. Puedes encontrar más información y acceder al código desde la página de Pixelsign en GitHub.
Fecha de publicación: