jueves, 24 de mayo de 2018

ADOBE ACROBAT DANONE

En este apartado explicaré como se hacen las transiciones en Adobe Acrobat.
Se hace con estos pasos:
Acrobat Pro DC--Preferencias... Y sale esta pantalla:

En este caso, ya está dentro de la opción "pantalla completa" porque la usé recientemente, pero sino está, os metéis en esa opción y ya.
Ahora vamos al apartado inferior:


Y donde pone "transición predeterminada: sin transición", abrimos el desplegable y salen varias opciones. Elegimos la opción "transición" y le damos a aceptar. Para comprobar que se han hecho correctamente las transiciones, ponemos el archivo en pantalla completa (comando + L), y vamos pasando de diapositiva en diapositiva, y como se puede observar, están hechas las transiciones.

ADOBE ACROBAT UNICEF

Hoy trabajamos un poco con Adobe Acrobat para hacer una práctica sobre hipervínculos y marcadores.
Un hipervínculo es un vínculo asociado a un elemento de un documento con hipertexto, que apunta a un elemento de otro texto u otro elemento multimedia.
Un marcador sirve para llevar al lector a una página específica cuando pulsa encima de él.
Estas son las dos herramientas, la de la izquierda es el marcador, y la de la derecha con forma de cadena es el vínculo.
Lo primero de todo es sacar estas herramientas en el documento, en caso de que no las tengas para trabajar. Para ello, tenemos que ir a:
Ver--Mostrar/ocultar--Elementos de la barra de herramientas--Personalizar herramientas rápidas.
Ahora te saldrá un panel y le darás a editar PDF, y ahí tendrás estas dos herramientas junto a otras cuantas.

Para usar el marcador, lo que haremos será pinchar en él y por defecto nos saldrá uno para crear, pues este que sale le borramos en la papelera que tenemos en la esquina superior izquierda.



Una vez hecho esto, lo que haremos será seleccionar la palabra/texto donde queremos que vaya el marcador, y una vez seleccionado, creamos un nuevo marcador, y éste se aplicará inmediatamente a la palabra.
Ya hecho este paso, tenemos el marcador, que pinchando con el ratón sobre él, nos llevará a la palabra /texto que habríamos seleccionado.

Para establecer un hipervínculo, pincharemos en la herramienta que he enseñado antes con forma de cadena, y nos saldrán varias opciones. Le damos a la primera de todas (añadir o editar vínculo de documento web). Seleccionaremos con el ratón la zona donde queremos que se establezca el hipervínculo (se hace como si creasemos una caja de texto).
Después de crearlo aparecerá esta ventana:

Vincular acción significa donde queréis ir cuando pinchéis en el vínculo, en este caso por ejemplo quiero que vaya a la página web de Unicef, porque de eso trataba la práctica entre otras cosas, entonces para ello pones la opción "abrir una página web", y le das a siguiente. 
Ahora aparecerá este recuadro:
Aquí introducimos el enlace de la página a la que queremos que navegue.
Cuando cliquemos en aceptar, se establecerá el vínculo y luego cada vez que le pulses, irá a la página web.
También hemos usado la otra opción que es la de vista de página. Esta opción te permitirá ir a otra página del mismo documento donde tengas el vínculo, al crearlo, saldrá esto:
Significa que tenéis que ir a la página donde queréis que nos lleve al clicar sobre el vínculo, y cuando estéis en esta página le daremos a la opción "establecer vínculo", y ya está, así de sencillo.

miércoles, 16 de mayo de 2018

FORMULARIO

Hoy, hemos empezado a hacer formularios. El primero, al final de la explicación subiré una captura de él, ha sido el más simple. La profesora nos ha subido un documento PDF vacío, y el otro hecho (documento final), y nosotros desde el vacío hemos tenido que hacer el documento final.
Se trabaja siempre desde Adobe PDF, para ello después de abrir un documento, vamos al apartado "ver---> herramientas---> preparar formulario--->abrir", y aquí saldrán unas herramientas en la parte superior del documento, y empezaremos a trabajarlo. Estas son las herramientas:



Después de haber sacado éstas, lo que haremos será empezar a realizar el trabajo, creando capas de texto, botones, menús desplegables e incluso imágenes, etc... (todo esto se encuentra en las herramientas que sacamos anteriormente).
Para hacer el documento que yo hice, simplemente necesité los botones, las cajas de texto, y un par de menús desplegables, las cuáles son estas herramientas:


Para las cajas de texto, no he tocado nada en el apartado formato (el cuál se saca pulsando dos veces en la caja de texto), excepto en la de código postal, y en la de número de teléfono, que hay que ir a formato, después en seleccionar categoría de formato, hay que poner la opción especial, y ahí ponemos la que corresponda, en este caso, la de número de teléfono y código postal.

Y ya está, lo demás son cajas normales y botones, en los que no he tocado nada. Este es el resultado final:

1º hoja.                                                                        2º hoja.         


viernes, 4 de mayo de 2018

CINEMAGRAPH

-Un cinemagraph es una imagen animada que resulta de la combinación de fotografía y vídeo. Se trata de imágenes fundamentalmente estáticas en las que se sustituye una porción de éstas por una pequeña animación que, normalmente, muestra pequeños movimientos en bucle infinito.
Nosotros hemos estado aprendiendo con Photoshop a hacer un cinemagraph.
Para crear uno de éstos, hay que hacer los siguientes pasos:

1.- Lo que he hecho primero, ha sido escoger un vídeo, de formato mp4, y descargármelo. Después lo he abierto en un archivo nuevo de Photoshop. En cuanto lo descargas se te abrirá en el menú capas, una capa (el vídeo) y estará dentro de un grupo de capas. Después hay que hacer una copia de la capa, la cúal hay que arrastrar fuera del grupo de capas, sólo la copia, la capa original se queda dentro del grupo.

2.- El segundo paso ha sido sacar la herramienta de línea del tiempo en Photoshop (ventana, línea del tiempo).

Aparecerá esto en la pantalla principal de Photoshop, y lo que haremos será arrastrar la barra azul que está encima de la barra de abajo, y la pondremos al mismo nivel, quedará así:


3.- Después, por tercero, iremos al menú "capa", le daremos al apartado rasterizar-capa, y la barra azul de arriba se pondrá en color morado:

4.- Por último, se hará una máscara de capa en la capa que hemos sacado fuera del grupo, y pintaremos sobre la máscara de color negro, la zona que queremos que se mueva.
Así es como me han quedado mis capas, después le daríamos al play en la zona de la línea del tiempo, para ver el resultado final. 
Yo guardé en formato psd, mp4, y éste ha sido mi resultado.

Vídeo principal.                                                         Vídeo editado.




viernes, 27 de abril de 2018

BANNER EN LA WEB

-Aparte de realizar banners con Photoshop, también podemos hacerlos con páginas web, como por ejemplo html5maker, bannersnack, etc.
Éstas no están en español, pero son fáciles de usar, así que no supondrán muchos problemas cuando las usemos.
Voy a realizar un giff con tres de las páginas web que hay para hacerlos, y aquí pondré los resultados finales.
1.-La primera página que he usado, y la que me ha resultado más fácil ha sido gifmaker, lo que hice fue descargar dos imágenes cualquiera, y arrastrarlas a la aplicación, en el apartado "upload images". Después ordenas las imágenes en el sentido que quieres que se reproduzca el gif, y las guardas.


2.-La segunda página web que he usado ha sido html5maker. Esta me ha parecido un poco mas compleja que la primera, porque no es tan intuitiva como gifmaker, y me ha dado algún problema a la hora de guardar mi gif.


3.-La tercera y última página web ha sido bannersnack. Es del estilo de la anterior, igual de compleja. La más fácil en general ha sido gifmaker.

jueves, 26 de abril de 2018

BANNER EN PHOTOSHOP (TRIODOS BANK)

Al igual que en la entrada anterior, hemos editado una imagen con Photoshop en clase para después dinamizarla con la herramienta (línea del tiempo), y así conseguir hacer un banner dinámico.

Esta es la imagen editada, es decir el banner estático.
Y éste es el resultado final, ya dinamizado.

miércoles, 25 de abril de 2018

BANNER EN PHOTOSHOP (CIGARRO)

Hoy lo que hemos hecho ha sido seguir con las explicaciones de los banners, y hacer alguna práctica más para perfeccionar. Para ello, hemos cogido una imagen, y la hemos editado en Photoshop con textos, para hacerla lo más parecida posible a su imagen final.



Éste es el resultado de mi imagen editada en Photoshop. Después de haberla editado, y haber conseguido el resultado que quería, la hice banner dinámico, con la opción de la línea del tiempo en Photoshop, como ya expliqué en otra entrada del blog.





Este es el resultado final, así ha quedado el banner dinámico.





viernes, 20 de abril de 2018

GIF REALIZADO CON PHOTOSHOP


Hemos aprendido a hacer gif con Photoshop. Este es uno de mis ejemplos.
Para hacerlo, primero cogí una práctica que hicimos en el primer trimestre, y después, he seleccionado en photoshop el apartado "línea del tiempo", y ahí he ido haciendo una especie de fotogramas, cada uno de ellos con una capa
diferente. Para guardar, me fui a exportar para la web, y este ha sido el resultado ---->




Este de la bailarina es otro ejemplo, realizado también por mí en Photoshop, en el que básicamente he ido cambiando el color de ella y del fondo de detrás, desde las capas.
Y luego he seguido el mismo procedimiento que en el anterior con los fotogramas.

Este es el apartado en Photoshop, donde están los fotogramas. En el primer fotograma (todo color rojo), sólo hay que dejar esa capa visualizada, después para hacer el segundo fotograma, se dejará visualizada la capa anterior, y la siguiente capa que queremos que aparezca en el Gif. Así se hace hasta haber visualizado todas las capas que queríamos. Luego también debajo de cada fotograma se puede cambiar la velocidad a la que queremos que vaya. Para finalizar se guardará como he explicado anteriormente.











Y este es otro banner, que hicimos con la imagen de nuestro instituto, seleccionando letra por letra para luego dinamizarlo.







jueves, 5 de abril de 2018

BANNERS

-Un banner consiste en incluir una pieza publicitaria dentro de una página web. Su objetivo fundamental es atraer tráfico hacia el sitio web del anunciante que paga por su inclusión. En un principio, cualquier sitio web puede incluir la publicación de banners y otros formatos publicitarios, aunque normalmente son sitios con contenidos de mayor interés, suelen ser visitados por muchas personas los que atraen las mayores inversiones de los anunciantes.

6 BANNERS ESTÁTICOS:



Tipo de banner.- Full banner.
Dimensiones y resolución.- 320x20 px. 72 ppp.
Formato y peso del archivo.- Jpg, y el peso 18,8 Kb.
Modo de color.- RGB.




Tipo de banner.- Pop-under.                                                          
Dimensiones y resolución.- 300x100 px. 72 ppp.
Formato y peso del archivo.- Jpg, y de peso 87,9 Kb.
Modo de color.- RGB.



Tipo de banner.- Large Rectangle.
Dimensiones y resolución.- 300x250 px. 72 ppp.
Formato y peso del archivo.- Jpg, y el peso de 219,7 Kb.
Modo de color.- Color RGB.



Tipo de banner.- Leaderboard.
Dimensiones y resolución.- 320x29 px. 72 ppp.
Formato y peso del archivo.- Jpg, y el peso 27,2 Kb.
Modo de color.- RGB.



Tipo de banner.- Pop-under.
Dimensiones y resolución.- 300x100 px. 72 ppp.
Formato y peso del archivo.- Jpg, y pesa 87,9 Kb.
Modo de color.- RGB.


Tipo de banner.- Pop-under.
Dimensiones y resolución.- 300x100 px. 72 ppp.
Formato y peso del archivo.- Jpg, y el peso es de 87,9 Kb.
Modo de color.- RGB.

6 BANNERS DINÁMICOS:



Tipo de banner.- Skyscraper.
Dimensiones y resolución.- 120x600 px. 72 ppp.
Formato y peso del archivo.- Gif. 210,9 Kb.
Modo de color.- RGB.
Número de fotogramas.- 3.














Tipo de banner.- Square pop-up.
Dimensiones y resolución.- 300x300 px. 72 ppp.
Formato y peso del archivo.- Gif. 263,7 Kb.
Modo de color.- RGB.
Número de fotogramas.- 3.




Tipo de banner.- Pop-under.                                           Tipo de banner.- Pop-under.
Dimensiones y resolución.- 300x100 px. 72 ppp           Dimensiones y resolución.- 300x100 px. 72 pp
Formato y peso del archivo.- Gif. 87,9 Kb.                    Formato y peso.- Gif. 87,9 Kb.
Modo de color.- RGB.                                                     Modo de color.- RGB.
Número de fotogramas.- 11.                                           Número de fotogramas.- 2.



Tipo de banner.- Pop-under.
Dimensiones y resolución.- 300x100 px. 72 ppp.
Formato y peso del archivo.- Gif. 87,9 Kb.
Modo de color.- RGB.
Número de fotogramas.- 5.


Tipo de banner.- Vertical rectangle.
Dimensiones y resolución.- 194x406 px. 72 ppp.
Formato y peso del archivo.- Gif. 230,8 Kb.
Modo de color.- RGB.
Número de fotogramas.- 59.

miércoles, 21 de marzo de 2018

ACCESIBILIDAD WEB

¿QUÉ ES LA ACCESIBILIDAD?

La accesibilidad web significa que personas con algún tipo de discapacidad van a poder hacer uso de la web. La accesibilidad web también beneficia a otras personas, incluyendo ahí a personas de edad avanzada que han visto mermada su habilidad por consecuencia de la edad.

¿QUÉ ES EL W3C?

La world wide web consortium 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.
El objetivo del W3C es hacer que los beneficios estén disponibles para todo el mundo, independientemente del hardware, software, infraestructura de red, idioma, cultura, localización geográfica, o habilidad física o mental.
ANÁLISIS DE ACCESIBILIDAD WEB.

Vamos a hacer un análisis de accesibilidad a un par de páginas web. La primera será la página web del instituto IES Puerta Bonita, y en el segundo caso analizaremos la página oficial de la tienda Nike.

Página web IES Puerta Bonita: Esta página por ejemplo facilita el acceso a personas con algún tipo de problema o discapacidad, debido a que se puede cambiar el color del fondo, o el formato del texto.



Página oficial de Nike: Esta página web, por ejemplo no facilita la accesibilidad a las personas con algún tipo de discapacidad, ya que no tiene lo mismo que enseñaba la página del puerta bonita, no da opción a modificar automáticamente el color o formato de texto-fondo.





ADOBE ACROBAT DANONE

En este apartado explicaré como se hacen las transiciones en Adobe Acrobat. Se hace con estos pasos: Acrobat Pro DC--Preferencias... Y sal...