Nuevo diseñador interactivo HTML5

Con todas las palabras de moda que rodean a las tecnologías de Internet hoy en día, es realmente difícil para cualquiera que no sea un entusiasta de la tecnología entender por qué "Cloud", "HTML5" o "JQuery" son tan importantes. Entonces, ¿por qué deberías estar entusiasmado con el NUEVO Diseñador Interactivo basado en HTML5? Permítanme reducirlo a lo básico, es más rápido que flash, puede estar en más plataformas y es más fácil de manipular. Estas son las tres necesidades más importantes de todas las tecnologías de Internet y con el diseñador HTML5 ahora podemos conseguirlo. Atrás quedaron los días en los que teníamos que depender de una tecnología de terceros para manipular imágenes y texto de forma dinámica. Ahora, con las tan necesarias mejoras de los fundamentos básicos de los lenguajes de Internet, podemos seguir avanzando, mantenernos a la vanguardia de la innovación y aprovechar las últimas y mejores mejoras de los navegadores o lenguajes.

¿Qué hay de los detalles? ¿Qué tiene de diferente este NUEVO Diseñador Interactivo HTML5? Bueno, déjame guiarte a través de algunas de las mejores partes de nuestro nuevo diseñador...

Tres plantillas de diseño interactivo

Manipulación sencilla de elementos

Fácil manipulación de elementos con el diseñador interactivo html5

Con la nueva interfaz html5, ajustar los elementos de texto e imagen es facilísimo.

Con la nueva interfaz html5 es super sencillo arrastrar una esquina y redimensionar un área de texto o imagen. ¿Necesitas mover una capa a cualquier lugar de la página? Sólo tienes que hacer clic y arrastrar como lo harías con cualquier programa de escritorio y tenemos indicaciones del cursor útiles para que el usuario sepa qué acción está disponible cuando se ciernen sobre el elemento.

¡Ahora rotar es aún más fácil! La manija verde le permitirá rotar su elemento a cualquier grado. Usted será difícil encontrar cualquier diseñador interactivo en línea que permite este extremo en la manipulación de rotación.


El navegador de capas

navegador interactivo de capas de diseño

Multitud de opciones para editar las capas como quieras.

El navegador de capas es la lista de todos los elementos que forman parte de la plantilla de esa página en particular. Cada elemento, ya sea texto o imagen, tiene su propio conjunto de opciones para su manipulación.

Como puede ver aquí se trata de un elemento de texto y sus opciones de edición. Puede editar todo lo que compone ese elemento de texto, desde su nombre de fuente hasta posibilidades más avanzadas como Interlineado y Seguimiento.

Muchas fuentes estándar están disponibles por defecto, pero el Diseñador Interactivo no le limita sólo a ellas. El creador de la plantilla puede cargar cualquier fuente que necesite utilizar en la plantilla.

Y lo mejor de todo, ¡cuando editas el texto se actualiza en la plantilla INSTANTANEAMENTE!


Zoom, ¡acércate!

html5 diseñador zoom imagen

Necesitas hacer una edición muy detallada, ¡simplemente ZOOM!

Una sencilla y rápida opción desplegable de la barra de control situada en la parte superior de la plantilla permite ampliarla. Esto permite al usuario acercarse y editar los elementos de la plantilla con gran precisión.

Desde 100% hasta "Ajustar al ancho" tenemos casi todas las opciones que necesitará para acercar la plantilla y hacer ese folleto o tarjeta de visita exactamente como lo desea.


Transiciones de página

¿Qué tal un poco de caramelo para los ojos? Cambia de página y mira cómo se deslizan.

Un simple clic en uno de los indicadores de página hace que la página que el usuario está viendo se deslice hacia un lado mientras que la página que solicitó se desliza hacia la vista. No sólo es una transición suave y bonita, sino que además es muy chula.

Y con los indicadores de página, el usuario ni siquiera necesita hacer clic en la página para ver su aspecto. Basta con pasar el ratón por encima del indicador de página y obtendrá una bonita vista previa de la página que está a punto de solicitar. Esto es ideal para plantillas de varias páginas en las que es esencial encontrar rápidamente la página correcta.


Opciones de texto

Como se ha mostrado anteriormente disponemos de multitud de opciones de texto para permitir una personalización completa de las áreas de texto. He aquí una lista de todas las opciones que nuestros usuarios pueden aprovechar con la nueva interfaz interactiva html5.

  • Nombre de la fuente - Toneladas de fuentes para elegir, o subir el suyo propio.
  • Tamaño de fuente - de 0 a 999 estamos preparados para cualquier cosa, y el diseñador de la plantilla puede limitar estos números.
  • Interlineado - Controla el espacio de la línea vertical
  • Seguimiento - Controla el espaciado horizontal de las letras
  • Alineación - De "arriba a la izquierda" a "abajo a la derecha", sabemos cómo alinear.
  • Color de fuente - Elija su color favorito
  • Estilos de fuente: negrita, cursiva y subrayado, por supuesto.
  • Disposición - Puede apilar las capas de fuentes como desee.
  • Edición de texto - ¡Teclea y se actualiza al INSTANTE!

Selector de texto, ¡aún más opciones para manipular texto!

Selector de texto interactivo

¡Sólo necesita una selección específica de opciones de texto TEXT PICKER!

Como creador/impresor de plantillas, ¿necesita limitar las opciones de texto para sus usuarios? Tenemos lo que necesita, se llama "Selector de texto".

El usuario simplemente hace clic en el elemento de texto y se abren las opciones de la capa, pero en lugar de un área de texto para introducir el texto, aparece un menú desplegable con varias opciones. Aquí puede haber cualquier número de opciones.

Sólo tienes que hacer clic en el texto que quieras y el elemento de la plantilla se actualiza al instante. ¡Es genial! Ah, y ¿he mencionado que soportamos CUALQUIER tipo de letra? Sí que es correcto que está viendo un conjunto de fuentes asiáticas en la imagen aquí. No sólo eso, sino que el Diseñador Interactivo HTML5 está totalmente localizado, por lo que no sólo puedes tener todas las fuentes del mundo, sino que todos los controles para editar la plantilla estarán en el idioma establecido por el navegador. ¡Alons-y!


Opciones de imagen

Cuando un usuario sube una imagen, puede manipularla de muchas maneras diferentes. Puede arrastrarla por la plantilla hasta cualquier posición. Rotarla en cualquier grado. Cambiar el tamaño de la imagen de la forma que crean conveniente. También pueden organizar las imágenes en cualquier orden de apilamiento o poner las imágenes detrás del fondo si así lo desean. Manipulación de imágenes simplificada.

opciones de imagen diseñador interactivo


Selector de imágenes

increíble selector de imágenes para el diseñador html5

El selector de imágenes emergente hace que la selección de imágenes específicas sea sencilla y rápida.

Sí, también tenemos un selector de imágenes. Como diseñador de plantillas, ¿necesitas limitar a tus usuarios a unas pocas imágenes seleccionadas? ¿O quieres que las opciones sean simples y fáciles para esa tarjeta de visita de la empresa que necesita tener el mismo aspecto para cada empleado?

Disponemos de un "Selector de imágenes" para resolver estas necesidades. El usuario sólo tiene que hacer clic en la imagen que forma parte de la plantilla y aparecerá una lista de posibles imágenes para facilitar la elección. Seleccione su imagen y verla aparecer en la plantilla a continuación, empezar a editar como lo haría con cualquier otra imagen. ¡Sencillo y asombroso!


Añadir imágenes

Los usuarios del Diseñador interactivo html5 pueden añadir imágenes con sólo pulsar un botón. En cuestión de segundos estarán navegando por sus discos duros o cuentas de Facebook en busca de esa imagen perfecta para añadir a la plantilla. Entonces es sólo una cuestión de recortar la imagen al tamaño y luego tienen una nueva imagen que es parte de la plantilla y listo para ser manipulado al igual que cualquier elemento de imagen.

Incluso permitimos a los diseñadores de plantillas limitar esta funcionalidad. Si quieres que tu plantilla se limite a unas posibilidades concretas, puedes desactivar la adición de imágenes.


Añadir texto

Añadir texto es igual de fácil... no, ¡es incluso más fácil que añadir imágenes! El usuario sólo tiene que hacer clic en el botón "Añadir texto" y ¡BAM! su edición de una nueva área de texto. Así de rápido.

Sí, incluso permitimos que el diseñador de plantillas limite esta funcionalidad. Si no desea texto adicional más allá de lo que forma parte de la plantilla maestra, simplemente desactive esa opción.


Deshacer / Rehacer, ¡un salvavidas!

No sé tú, pero yo creo que mi vida sería mucho peor sin la invención de "deshacer". En la vida real no tenemos el botón de deshacer, pero en el ciberespacio vamos más allá de la realidad y nos adentramos en infinitas posibilidades. ¿Acabas de hacer un cambio que te ha quedado realmente mal? Un clic y vuelves a estar como antes. O pulsa ese botón un montón de veces y verás cómo la plantilla cambia ante tus ojos retrocediendo en el tiempo a un lugar que te gustaba aún más.

Y no te preocupes si pulsas el botón de deshacer demasiadas veces, ¡para eso tenemos "rehacer"! Sí, así de sencillo.


Cultivo

Como programador, esta ha sido una de las cosas más difíciles que he tenido que hacer nunca. Nos ha llevado un montón de horas de trabajo conseguir que esto sea perfecto. Es tan sencillo como elegir un área de imagen que forme parte de una plantilla, explorar el disco duro, seleccionar una imagen e introducirla en este maravilloso espacio que es el recorte.

A la izquierda tenemos un cuadro de selección muy fácil de mover y redimensionar, y a la derecha puedes ver tu selección al instante. No hay duda de cómo va a quedar tu imagen después de pulsar el botón "Añadir imagen". Aquí puedes ver todo lo que necesitas. Incluso si la calidad de la imagen que se está cargando no se va a imprimir bien, el diseñador interactivo html5 permitirá al usuario saber en texto simple y código de colores que su imagen es genial o no tan buena.

Gracias a la gran cantidad de información que proporciona y a la facilidad de uso, el recorte con el diseñador interactivo es una de nuestras herramientas más potentes.

recortar con el diseñador interactivo

Necesita una forma sencilla de utilizar sólo una parte de una imagen, podemos hacerlo.


Integración en Facebook

botón de facebook para diseñadores

Haz clic en el botón para acceder a facebook y elegir una imagen

Como usted sabe el diseñador interactivo HTML5 se puede utilizar en plataformas móviles. Pero algunas plataformas no tienen la capacidad de elegir imágenes de su disco duro. Esta es una de las razones por las que decidimos integrar Facebook en el diseñador interactivo. Una vez que un usuario hace clic en una imagen se le lleva a una pantalla para elegir su disco duro o para conectarse a su cuenta de Facebook y elegir una imagen.

A partir de ahí se muestra una sencilla interfaz que permite al usuario navegar por sus álbumes de Facebook y elegir la imagen perfecta de su cuenta de Facebook.

facebook image selection ui for interactive designer

Es muy fácil navegar por tus álbumes y fotos de Facebook.


El futuro

No me asusta en absoluto decirte que acabamos de lanzar el nuevo Diseñador Interactivo HTML5. Es totalmente nuevo, recién sacado de la caja y ¡funciona de maravilla! Así que imagínate si seguimos mejorándolo porque eso es exactamente lo que vamos a hacer. Escuchamos constantemente a todos nuestros usuarios y tenemos en cuenta todos sus comentarios. Si el Diseñador Interactivo HTML5 es tan bueno nada más salir de la versión beta, su futuro será realmente brillante.

Lucía Blanco