Introducción al Diseño Web

¿Qué es la usabilidad?

Es la capacidad de alcanzar los objetivos con una mínimo esfuerzo y resultados máximos.

Para lograr una buena usabilidad, se deben dar estos puntos:

• Jerarquía visual: Importancia, relación, tema de los contenidos (colocación, tipografía, colores).

• Dar el control al usuario: Menú de situación y navegación por pestañas (opciones de volver atrás o deshacer una acción, visualización de pasos)

• Facilitar la interacción: Es positivo que el usuario pueda "clicar", "desplegar", "abrir", "mover"...  y a su vez, sea rápido y fácil.

• Aprovechar las convenciones, llamando a las cosas por su nombre: El contenido  y las funciones, deben estar y actuar como se espera.

• Simplificar: Tiene que ser sencillo, para que los usuarios se sientan cómodos, evitando aquello que pueda distraerles innecesariamente.

• Legibilidad: El color del texto debe contrastar con el del fondo, y el tamaño de fuente suficientemente grande.

La página web tiene que tener un acceso universal, para poder ser visitada por multitud de usuarios, independientemente del tipo de software, idioma, cultura, localización geográfica, y capacidades de los usuarios, llamado accesibilidad web.

Educativos.

http://www.aulablog.com/blog/

Comerciales.

https://www.versace.com/eu/en/home/

Comercio electrónico. 

https://www.apple.com/es/

Informativos.

https://www.20minutos.es/

Para esta entrada, he escogido tres tipos de páginas para ver si cumplen o no, los criterios de usabilidad:

Corporativos.

http://www.caffeuno.co.uk/

A primera vista, cumple los criterios de la jerarquía visual está ordenado por secciones. La accesibilidad es buena, con un "clic" accedes al destino de esos botones. Aparece el contenido justo y necesario para controlar los apartados.

Personales.

http://dualipa.com/home/

La página web principal, consta de muchos enlaces y botones, pero no son excesivos, puesto que son de fácil acceso debido al orden y contraste entre texto y fondo. Consta también, de la opción de traducir el idioma original, a tu idioma nativo, para así comprender el contenido.

Blogs.

http://www.katelovesme.net/

En este blog, aparentemente,se ve un jerarquía clara diferenciada por variación de tamaños en títulos y subtítulos, dispone de poco enlaces a los que el acceso de fácil, no es necesario clicar más de una vez para acceder a ellos rápidamente.

Mayormente abundan las fotografías y los textos no son excesivamente largos.

Espero que os guste esta entrada, un saludo.

Realidad Aumentada

¿Qué es la realidad aumentada?

Realidad Aumentada

La realidad aumentada (RA) es un término que se usa para definir la visión de un entorno físico del mundo real, a través de un dispositivo tecnológico, es decir, los elementos físicos se combinan con los virtuales, consiguiendo de esta manera crear una "realidad aumentada" en tiempo real. Consiste en un conjunto de dispositivos que añaden información virtual a la información física ya existente, es decir, añadir una parte sintética virtual a la real.


Estos son unos ejemplos en los que puede aplicar:

Industria

Publicidad

Educación

¿Cuáles son las diferencias entre RA y RV?

La realidad aumentada es diferente de la realidad virtual (RV) porque sobre la realidad material del mundo físico monta una realidad visual generada por la tecnología, en la que el usuario percibe una mezcla de las dos realidades; en cambio, en la realidad virtual el usuario se aísla de la realidad material del mundo físico para sumergirse en un escenario o entorno totalmente virtual.

A continuación, pongo el link de un pequeño vídeo explicativo sobre la RV, por si queréis saber en dónde se aplican, o más información sobre ella.

Debajo de la imagen, dejo el link del vídeo  en la que se muestra la RV por si tenéis curiosidad...

Realidad Virtual

Espero que os guste, un saludo.

PDF Interactivo

En esta entrada os voy a mostrar, las maravillas que pueden realizarse con un PDF.
Es capaz de hacer que un archivo "fijo" pueda tener movimiento e interactividad.

Creé un documento en el programa Adobe InDesign convirtiéndole después en archivo PDF, y con las opciones de InDesign, conseguí convertirlo en un archivo interactivo.

Esta entrada es breve, pero espero que sea de vuestro agrado, un saludo.

Visitas de Empresas Roland y Ricoh

La empresa Roland visitó nuestro centro, y nos informó sobre el funcionamiento de una de sus muchas maquinas, trajeron una de ellas para mostrarnos el proceso antes, durante y después de la impresión; la máquina estaba especializada en vinilo y corte.





En clase creamos diseños originales para distintas superficies, desde mandos de consolas... hasta muebles como el armario o la mesa de nuestra clase. Aprovechando el paso de Roland, conseguimos imprimir nuestros diseños, e incluso nos regalaron un diseño en vinilo que ellos mismos prepararon para nosotros.





⇑ En esta imagen aparece la carta de color de la empresa Roland, impresa también en vinilo con su maquinaria.

También nos visitó la empresa Ricoh, que nos explicó el funcionamiento de otra máquina industrial que, esta vez sí se encontraba en una de nuestras aulas.


Trajeron camisetas con imágenes impresas de diferente formas, para comparar la calidad y durabilidad de cada una y así hacernos ver, que no sólo se imprime en papel, sino que también es posible hacerlo en textil.


En esta máquina,  nos enseñaron como quedaba el diseño final en una carpeta que alumnos del IES Puerta Bonita habían diseñado.


Además nos mostraron un aparato,  que era capaz de averiguar el tipo y gramaje que contenía un papel, su porcentaje de acierto, es de un 98%.

Efecto Flip Page

Un efecto "flip page" o de "página invertida" es un efecto de GUI de software que muestra visualmente una representación de un periódico, libro o folleto como páginas de papel virtual que se pueden girar manualmente.

Este efecto se introdujo originalmente como un efecto de libro de volteo en las aplicaciones de Macromedia Flash a fines de la década de 1990, pero ha estado evolucionando rápidamente desde entonces. 

Los efectos de la página Flip se pueden usar tanto en línea como fuera de línea y, por lo general, se crean automáticamente a partir de archivos de texto como los documentos de Microsoft Word o el formato Adobe PDF.

Este "flip page" está realizado a través de "flippingbook" (https://flippingbook.com)

CHRISTIAN SERRANO.indd


El siguiente "flip page" está realizado mediante "flipsnack" (https://www.flipsnack.com):



Hasta la siguiente entrada, un saludo.

Tipos de Imágenes

Interactivas

Imagen con motivo de IES Puerta Bonita: 

Motivo libre: 

A continuación, voy a mostrar tres ejemplos de fotografías panorámicas realizadas en el programa "Photomerge" a través de Photoshop.

Panorámicas

Panorámica

Panorámica Cilíndrica

Panorámica Perspectiva

Esta imagen en 360º la he realizado mediante el programa online "Dermandar".

He utilizado fotografías utilizando la opción ráfaga.

Productos Gráficos Interactivos y Código QR

¿Qué es un producto multimedia interactivo?

Era un modo de presentación que podía contener imágenes, texto y en ocasiones, sonido; sin embargo, hoy en día las formas de uso que se pueden aplicar a la multimedia interactiva se han multiplicado. 
Cuan más alto sea el grado de interacción del usuario con el producto que tiene a su disposición, la percepción hacia él será mucho más positiva.

Puede ser una página web con texto y enlaces a otras páginas web, o un documento más complejo que use vídeo, sonido, animación y vínculos con controles interactivos (botones o enlaces).


Una de las muchas formas en las que podemos utilizar un producto multimedia interactivo, es a través de los códigos QR.

¿Qué es un Código QR?

Son códigos de barras bidimensionales que almacenan información. Los dispositivos capaces de capturar imágenes (smartphone o una tablet) descifran el código y nos trasladan directamente a un enlace o archivo. Tan fácil como hacer una foto al código QR y dar el salto al contenido que se oculta tras él.

Al escanear un código QR utilizando el teléfono inteligente, se obtiene un acceso inmediato a su contenido. El lector de código QR a continuación, puede realizar una acción, como abrir el navegador web para una URL específica. Otras acciones pueden ser provocados, como el almacenamiento de una tarjeta de visita en la lista de contactos de su teléfono inteligente o conectarse a una red inalámbrica.

Este código QR contiene más información sobre ellos:

¿Para qué sirve?

Pueden sustituir a los actuales códigos de barras, almacenando información sobre productos, inventario, etc. Sin embargo, los smartphones han facilitado que sus usos se orienten más hacia el consumidor y menos hacia el vendedor.

Lo más habitual es que el código QR contenga un enlace web que sirve para enriquecer la información del texto o publicidad en el que está incrustado.

En ocasiones el código redirige hacia un archivo listo para ser descargado (un .pdf, un vídeo...)

Aquí os dejo otro código QR que os lleva a un vídeo explicativo sobre estos códigos:

Espero que os parezca interesante, un saludo.