jueves, 10 de mayo de 2018

CINEMAGRAPH


¡Hola a todos!

Hoy os explicare como se hace un Cinemagraph en photoshop y os explicaré sus pasos.

¿Qué es un Cinemagraph?

Un Cinemagraph es una fotografía con un elemento móvil, grande o pequeño en proporción, con el resto de la imagen está paralizada, tal como una foto. La dificultad de este elemento es que no puede lograrse por sí solo, no hay ninguna función específica en el equipo fotográfico para lograr un Cinemagraph, sino que es necesario aplicar el uso de un programa de edición.

Mi cinegraph:




Como crearlo:
Una vez que tenemos nuestro video lo llevamos a photoshop y abrimos ventana linea del tiempo.








Una vez que tenemos nuestra linea del tiempo duplicamos la capa y la rasterizamos.

Cuando tenemos nuestra segunda capa, la sacamos de la carpeta y hacemos con ella una máscara de capa.






Ahora con el pincel y en la máscara de capa, lo que vamos a hacer es con el pincel en negro vamos a ocultar la parte que queramos para que que se vea solo esa parte en movimiento y lo demás no tendrá movimiento.









Por último vamos a guardarlo en psd y también vamos a guardar el video.


























HTML 5 Y GIFMAKER


¡Hola a todos!

Hoy os voy a enseñar como hacer un Banner con esta aplicación, Gif Maker, y ademas os hablare un poco sobre HTML 5.

HTML 5:

El “Hypertext Markup Language”, más conocido como HTML, es un lenguaje de programación.

Este estándar sirve de referencia para la elaboración de páginas web en sus diferentes versiones, definiendo una estructura básica y un código para la definición de contenido de una página web, como texto, imágenes, etc.


¿CUÁLES SON SUS VENTAJAS?
HTML 5 ofrece a los programadores de sitios web nuevas oportunidades. Así, navegadores web tan populares como Internet Explorer, Mozilla Firefox o Google Chrome ya son compatibles con HTML 5. 

Además, este estándar también funciona correctamente con smartphones y tablets.
De este modo, también es posible mejorar la velocidad y visualización de las páginas webs en dispositivos móviles.


Gifmaker.me. gifmaker.me
Crea banners compatible con todas las redes. Es rápido y bastante sencillo de usar, simplemente eliges las imagenes y el mismo te las coloca, tienes una barra para ir ajustando la velocidad a la que quieras.






















viernes, 27 de abril de 2018

EJEMPLOS DE BANNERS

¡Hola a todos! 
Aquí os dejo unos cuantos Banners dinámicos que hemos realizado en clase con photoshop. También estarán los mismos Banners pero en estáticos.

Banner dinámicos:

Pop-under:




Large rectangle:



Banner estaticos:



BANNER DINAMICO


¡Hola a todos! 
hoy os voy a explicar paso a paso como se hace un Banner Dinámico en Photoshop, en este caso es de una bailarina y vamos a hacer que de vueltas. Para comenzar os voy a explicar que es un Banner dinámico.

Banners Dinámicos:

Los formatos dinámicos, proporcionan opciones avanzadas como sonido, video o animaciones especiales. Estos formatos son más visuales, además de soportar un mayor peso.

Pasos para hacer un Banner Dinámico en photoshop:

-Primero vamos a dar en ventana y a Línea del tiempo.



-Después vamos a ir duplicando las capas y modificando a la bailarina, poniéndola de distintas formas para darle el efecto de que está dando vueltas. una vez hecho todo eso, le daremos a la linea del tiempo. 















-Una vez el la linea del tiempo, vamos duplicando los cuadros seleccionados, dandole a visualizar una por una las capas que tenemos, hasta tenerlas ordenadas en la linea del tiempocomo queramos que sea la animación.


-El paso final es guardarlo, para ello le daremos a exportar y a Guardar para Web.



RESULTADO DE LA BAILARINA

BANNERS ESTÁTICOS Y DINÁMICOS

Hola a todos,
hoy os voy a hablar sobre los banners y tenemos varios tipos de banners, estáticos y dinámicos.

¿ Que es un Banner?

Una pieza publicitaria dentro de una página web. Su objetivo es atraer tráfico hacia el sitio web del anunciante que paga por su inclusión.

Su contenido puede incluir imágenes, textos, animaciones, vídeos, audio, formularios...

Puede ser estático (JPEG o PNG), o animado (con animaciones, GIF, java, flash).



Banners estáticos:








Tipo de banner: Medium Rectangle
Dimensiones y resolución: 300 px x 250 px 72ppp
Formato y peso del archivo: PNG 85 KB
Modo de color: RGB







Tipo de banner:
Medium Rectangle
Dimensiones y resolución: 300 px x 250 px 72ppp
Formato y peso del archivo: PNG 15 KB
Modo de color: RGB

Tipo de banner: Leaderboard
Dimensiones y resolución: 728 px x 90 px 72ppp
Formato y peso del archivo: PNG 12 KB
Modo de color: RGB








Tipo de banner: Medium Rectangle
Dimensiones y resolución: 300 px x 250 px 72 ppp
Formato y peso del archivo: PNG 106 KB
Modo de color: RGB

Tipo de banner: Leaderboard
Dimensiones y resolución: 960 px x 100 px 72 ppp
Formato y peso del archivo: JPEG 64 KB
Modo de color: RGB


Tipo de banner: Pop-Under
Dimensiones y resolución: 995 px x 200 px 72 ppp
Formato y peso del archivo: JPEG 164 KB
Modo de color: RGB


Banner dinamicos:





 Tipo de banner: Rectangle
Dimensiones y resolución: 225 px x 127 px 72
Formato y peso del archivo: GIF 28 KB
Modo de color: RGB


Tipo de banner:
 3:1 rectangle
Dimensiones y resolución: 300 px x 100 px 72 ppp
Formato y peso del archivo: GIF 28 KB
Modo de color: RGB








Tipo de banner: Half -page ad
Dimensiones y resolución: 300 px x 600 px 72 ppp
Formato y peso del archivo: GIF 34 KB
Modo de color: RGB



Tipo de banner:
 3:1 rectangle
Dimensiones y resolución: 300 px x 100 px 72 ppp
Formato y peso del archivo: GIF 19 KB
Modo de color: RGB










Tipo de banner: Medium Rectangle
Dimensiones y resolución:  300 px x 250 px 72 
Formato y peso del archivo: GIF 62 KB
Modo de color: RGB











Tipo de banner:
 Leaderboard
Dimensiones y resolución: 980 px x 70 px 72 ppp
Formato y peso del archivo: GIF 42 KB
Modo de color: RGB


jueves, 22 de marzo de 2018

ACCESIBILIDAD WEB

 ¡HOLA A TODOS!
Hoy os voy a hablar sobre la accesibilidad web, y después haremos un análisis de unas paginas web.

¿Qué es la accesibilidad web?
La accesibilidad web tiene como objetivo lograr que las páginas web sean utilizables por el máximo
número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web.

La necesidad de que la Web sea universal y accesible por cualquier persona está presente desde el principio de la Web, ya que era un requisito contemplado en su diseño por su creador Tim Berners-Lee.

Para lograr la accesibilidad, se han desarrollado diferentes pautas o guías que explican cómo se tienen que crear las páginas web para que sean accesibles.

QUE ES W3C

La World Wide Web Consortium (W3C) es una organización independiente y neutral cuya principal actividad es desarrollar protocolos y directrices que aseguren el crecimiento de la Web a largo plazo. 

FUNCION W3C

Las tareas que acomete para lograr los objetivos marcados son: la identificación de requerimientos en todas las plataformas de acceso a la Red; el diseño de tecnologías que proporcionen losmecanismos necesarios para conseguir la interoperatividad en el acceso a la Web; y la estandarización de criterios tanto en el soporte lógico (software) como físico (hardware) utilizadopara acceder a Internet.

El W3C trata de alcanzar su objetivo principalmente a través de la creación de Estándares Web y Pautas.

El W3C hace referencia a este objetivo como "interoperabilidad Web".

Al publicar estándares abiertos (no propietarios) para lenguajes Web y protocolos, el W3C trata de evitar la fragmentación del mercado y, por lo tanto, la fragmentación de la Web.


PAUTAS

principio 1: Perceptible

La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos.

Pauta 1.1: Proporcionar alternativas textuales para todo contenido no textual.

Pauta 1.2: Medio tempo-dependiente. Implementar alternativas textuales para contenidos de audio y video. Incluir subtítulos.

Pauta 1.3:Crear contenido que pueda presentarse de diferentes formas.

Pauta 1.4: Facilitar a los usuarios ver y oír el contenido.

Principio 2: Operable

Los componentes de la interfaz de usuario y la navegación deben ser operables

Pauta 2.1: Proporcionar acceso a toda la funcionalidad mediante el teclado.

Pauta 2.2: Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.


Pauta 2.3: No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.

Pauta 2.4: Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.

Principio 3: Comprensible

La información y el manejo de la interfaz de usuario deben ser comprensibles.

Pauta 3.1: Hacer que los contenidos textuales resulten legibles y comprensibles.


Pauta 3.2: Hacer que las páginas web aparezcan y operen de manera predecible.


Pauta 3.3:Ayudar a los usuarios a evitar y corregir los errores.

Principio 4: Robusto

El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo ayudas técnicas.

Pauta 4.1: Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas.


ANALISIS DE WEB:

1. La primera web para hacer el analisis es la pagina web de la once.





Su metodología persigue alcanzar los objetivos de calidad, basándonos en las recomendaciones y directrices del W3C/WAI (referente en este ámbito)















Se trata de un diseño adaptativo con una ligera distribución y presentación diferente, dependiendo de la resolución utilizada para ofrecer una mejor experiencia a todas las personas.

La estructura se resume en: 


En la parte superior se encuentra la cabecera, que contiene el Logotipo e información de contexto del usuario. 

Seguidamente, se encuentra el menú principal en horizontal, con acceso a los diferentes productos, información asociada e información de carácter más general. Es importante destacar que su contenido  podrá variar dependiendo de la resolución. Cada elemento podrá desplegar otras sub opciones.

Posteriormente el rastro de migas ("Estás en"), que también podrá cambiar su presentación dependiendo de la resolución.

A continuación, se encuentra  el área de contenido, que por lo general ocupará el ancho de la pantalla y presentará la información del elemento seleccionado.

Y por último, se encuentra el pie de página, con información general sobre el portal.



2. La segunda web  para hacer el análisis es la pagina web del Puerta Bonita.








Opciones de accesibilidad y ayuda al usuario

1 Ajustar preferencias
2 Utilizar métodos abreviados y atajos de teclado
3 Otras opciones de accesibilidad implementadas en esta web
4 Invitación a comunicarnos problemas de accesibilidad y/o posibles soluciónes
5 Otras opciones en fase de estudio o implementación
6 Más información

1. La accesibilidad del sitio www.iespuertabonita.com

1 Estructura de los contenidos
2 Presentación de los contenidos
3 Descripción de los contenidos
4 Otra documentación en preparación

jueves, 22 de febrero de 2018

Realidad Aumentada

 ¡HOLA A TODOS!
Hoy os voy a hablar sobre la realidad aumentada, y sobre las diferencias entre la realidad aumentada y virtual, además de aplicaciones de la realidad aumentada.

REALIDAD AUMENTADA.

Técnica mediante la cual los usuarios pueden percibir la realidad superponiendo a los objetos reales modelos virtuales enriquecidos, permitiendo simular en un ambiente real la existencia de elementos virtuales.


Cada vez más empresas usan esta tecnología, que superpone contenido generado digitalmente, como video, gráficos o sonido, a imágenes reales captadas en teléfonos inteligentes, tabletas o gafas de alta tecnología.
La realidad aumentada permite interactuar con el mundo real de forma directa. permite disfrutar de las ventajas del mundo virtual sin perder la conexión con el mundo real.

ELEMENTOS DE LA REALIDAD AUMENTADA.


Pantalla: Muy importante para poder visualizar la información.




Cámara: Será la que capte la realidad y proporcione la información a la aplicación. Necesaria para activar cualquier sistema de RA.




Marcador: Será el elemento que ponga en funcionamiento la aplicación de Realidad Aumentada. Puede ser una imagen hecha con la cámara o un punto geográfico.




 Información virtual: Es lo que recibe el usuario una vez que se activa el marcador ya sea mediante la cámara o el GPS.




Software: Es el mecanismo o programa informático que interpreta la aplicación y la muestra en el dispositivo móvil.



FUNCIONAMIENTO DE LA REALIDAD AUMENTADA.



  • A continuación os dejaré un video explicativo sobre la realidad aumentada:




DIFERENCIA ENTRE REALIDAD AUMENTADA Y REALIDAD VIRTUAL.

La Realidad Virtual es un escenario virtual en 3D en donde lo único real eres tu.
También se necesita usar gafas de RV para conseguir la presencia en el mundo virtual. Con las gafas nos sentimos dentro de use mundo, al poder mirar en cualquier dirección.

Lo que hace la Realidad Aumentada es agregar elementos virtuales a una realidad existente, en lugar de crear esa realidad desde cero.
Otra diferencia de la RA es que no necesita gafas, al no generar inmersión ni efectos 3D. Por eso es fácil de crear, y es más accesible para todo tipo de usuarios.
  • Aquí os dejo un video que explica la Realidad Virtual y la Realidad Aumentada.



USOS Y APLICACIONES  DE LA REALIDAD AUMENTADA.
  • Realidad aumentada en educación:
Con la realidad aumentada podemos salir del aula y aprender de lo que vemos, se trata de un concepto diferente de aprendizaje basado en el descubrimiento. Del mismo modo es una herramienta muy útil dentro en la clase, ayuda a reforzar y asentar los conocimientos, mediante la visualización de modelos 3D.


  • Realidad Aumentada en turismo:
Turismo. La Realidad Aumentada permite mejorar la experiencia de los visitantes de una ciudad o punto de interés a través de la integración de contenido visual o sonoro proporcione información sobre la localización en la que se encuentran. También permite llevar a cabo la reconstrucción digital de elementos históricos deteriorados como edificios o estatuas.

  • Realidad Aumentada en la industria:
El desarrollo de la de Realidad Aumentada en el ámbito industrial ayudan a mejorar la productividad de los ciclos de trabajo. Este mismo sistema también se puede implementar en las reparaciones de vehículos o maquinaria industrial, ya que la app puede mostrarnos toda clase de avisos sobre las piezas deterioradas. Otro de las aplicaciones de la Realidad Aumentada es la visualización previa de diseños industriales o de construcciones.

jueves, 8 de febrero de 2018

ComunicArte 2018

¡Hola a todos! 

Esta semana tuvimos una serie de charlas en las que nos presentaban una serie de maquinas de Roland y Ricoh y las distintas maquinas que utilizaban para llegar a una serie de objetivos como imprimir camisetas, utilizando vinilos y demás productos. También tuvimos una serie de charlas en las que nos explicaban las distintas formas de los papeles.






RICOH:
Ricoh es una compañía fundada en 1936 que proporciona servicios documentales, de consultoría, software y hardware a empresas de todo el mundo.

Ricoh nos enseñó todas sus maquinas de papel , de textil y otra de vinilo. En la de vinilo nos enseñaron como se utilizaba y nos imprimieron digitalmente unas máscaras.

Nos mostraron sus maquinas impresoras:

 
 



 ROLAND :

La Corporación Roland DGA es la dependencia de comercialización, distribución y ventas estadounidense de Roland DG Corporation de Hamamatsu, Japón, un líder mundial en las industrias de avisos, artes gráficas, artes plásticas, gráficos para vehículos, UV, fotografía, grabado y modelado en 3D. Roland DG fue fundada en 1981, cotiza en la Bolsa de Valores de Tokio y es la primera empresa proveedora mundial de impresoras de inyección de tinta en formato ancho para el mercado de gráficos durables. Roland Dg también está afiliada con Roland Corporation, la cual es famosa en el mundo de la música por el desarrollo de la tecnología MIDI y la producción de sofisticados equipos musicales digitales, lo cual incluye sintetizadores, equipos de grabación y otras tecnologías relacionadas.
En la maquina de roland imprimimos los diseños que habíamos preparado durante días, la maquina utilizada fue:





jueves, 1 de febrero de 2018

EFECTO FLIP PAGE

¡HOLA A TODOS!

Hoy os voy a hablar sobre el Flip Page.

Flip page se refiere al efecto que permite pasar paginas de un documento digital como si de un documento físico se tratara, es decir simular el efecto natural de pasar pagina y que es la forma habitual e intuitiva de buscar en un documento físico.
Los catálogos Flip Pages aprovechan las funcionalidades que un documento tradicional electrónico ofrece, como la búsqueda a lo largo del documento, saltar a cierta pagina, enlaces a websites externos, integración y multimedia de video y audio.
Las paginas que he utilizado han sido:
-flippingbook
imagen interactiva copia