Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=94977b91-081e-49e0-80db-ad3408fae07a

Creación de maquetas de dispositivos en HTML5 de manera muy sencilla

Pixelsign

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:

iPhone5

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:
campusMVP campusMVP es la mejor forma de aprender a programar online y en español. En nuestros cursos solamente encontrarás contenidos propios de alta calidad (teoría+vídeos+prácticas) creados y tutelados por los principales expertos del sector. Nosotros vamos mucho más allá de una simple colección de vídeos colgados en Internet porque nuestro principal objetivo es que tú aprendas. Ver todos los posts de campusMVP
Archivado en: Desarrollo Web | Herramientas

¿Te vas a perder los mejores trucos de programación?

Únete a miles de desarrolladores que ya reciben cada mes nuestro boletí­n por email. No te pierdas los mejores trucos, noticias y frikadas.

Enviamos poco, pero bueno. Palabra de desarrollador.

Suscríbete aquí­

Sí­guenos también en:

Telegram LinkedIn YouTube
La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.