es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Crear maquetas de dispositivos en el navegador con DeviceMock

Puede encontrar montones de maquetas de dispositivos gratuitas en línea, que van desde PSD a archivos Sketch. Pero, ¿y si pudieras construir rápidamente maquetas de dispositivos sobre la marcha en tu navegador?

Bueno, gracias a la gente de rm-labo, ¡puedes! Su complemento jQuery gratuito, DeviceMock.js, le permite ajustar un dispositivo vectorial alrededor de cualquier elemento de página, usando JavaScript y SVG simples.

Entonces, ¿cómo funciona esto exactamente?

Bueno, primero necesitas una copia de jQuery y una versión del complemento DeviceMock de GitHub . Esto viene con un archivo JS, un archivo CSS y algunos archivos SVG para crear los dispositivos reales.

Puede orientar cualquier tipo de elemento en la página, desde una imagen simple a un div completo, o incluso un elemento incrustado como un iframe. Esto significa que incluso podría construir un mini-navegador genial en su sitio con un iframe en otra página.

Este complemento es compatible con cinco tipos de dispositivos diferentes :

  1. navegador web
  2. Teléfono inteligente
  3. Tableta
  4. Escritorio
  5. Ordenador portátil

Todas estas maquetas usan estilos de diseño planos ya que están construidas con SVG. Y, todos se parecen bastante a los dispositivos de Apple, por ejemplo, el teléfono inteligente es un clon del iPhone y el monitor de escritorio se ve llamativamente como un iMac.

Todos estos vectores son fáciles de agregar y funcionan en todos los navegadores con soporte SVG .

Incluso puede cambiar las propiedades, como el tamaño de la maqueta, el tema (blanco / negro) y la orientación (paisaje vertical).

Si usa la maqueta del navegador, incluso puede especificar una URL ficticia en la barra de direcciones. Esta es una forma divertida de agregar aún más personalización.

De acuerdo, esta biblioteca no será útil para todos, pero resuelve un problema de nicho que muchos desarrolladores de UI / UX enfrentan al crear prototipos.

Para obtener más información, visite la página de GitHub o visite el sitio en vivo para obtener una demostración activa.

Guarde, organice y comparta contenido web fácilmente con Dragdis

Guarde, organice y comparta contenido web fácilmente con Dragdis

El marcado ha existido por un tiempo, pero no ha cambiado mucho. La interfaz familiar de marcadores probablemente necesite un lavado de cara. Si bien puede haber sido perfecto en la infancia de Internet, los marcadores se han convertido en una parte más prominente de nuestro comportamiento en línea que las interfaces antiguas simplemente no pueden cortar más. N

(Consejos de tecnología y diseño)

Calcule los ROI de la campaña de correo electrónico con esta herramienta gratuita

Calcule los ROI de la campaña de correo electrónico con esta herramienta gratuita

Durante años, el correo electrónico ha sido la mejor manera de aumentar el retorno de la inversión y conectarse directamente con sus usuarios (o clientes). Se necesita tiempo y esfuerzo para aprender marketing por correo electrónico, pero los beneficios son enormes.Campaign Monitor estima que las campañas de correo electrónico promedio devuelven la friolera de $ 38 por cada $ 1 gastado en marketing. Esta

(Consejos de tecnología y diseño)