Preimpresiones Digitales En Primera Persona: mayo 2019

viernes, 31 de mayo de 2019

CSS

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre CSS.

¿Qué es el CSS?

CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe como se va a mostrar un documento en pantalla, por impresora, por voz (cuando la información es pronunciada a través de un dispositivo de lectura) o en dispositivos táctiles basados en Braille. El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo.

Etiquetas que he usado en CSS:

"font-size": esta tiene como función cambiar el tamaño del texto especificado. Se mide en Pixels o px.
"text-align": sirve para alinear el texto a una posición específica del documento por ejemplo, "center" para el centro.
"align-content": así como el anterior este funciona de la misma manera pero afecta contenido como imágenes.
"backgroung-color": la utilidad de este consiste en cambiar el color de fondo del área especificada. Los colores pueden ser definidos en parámetros como RGB o Hex.
"font-family": se utiliza para definir la fuente que usaremos en la etiqueta de texto especificada. Necesitamos Google Fonts para esto.

El proceso que seguido para crear y aplicar CSS:

Primero he creado un documento HTML5 nuevo y he preparado su contenido.
Después he creado el archivo CSS y lo he preparado con las etiquetas que quería usar. Las que vimos arriba.
Luego al finalizar he guardado el archivo CSS y lo he metido en la carpeta del documento HTML para poder especificar su ubicación rápidamente.
Finalmente dentro del documento HTML he especificado la ubicación del CSS mediante la etiqueta <link> y he guardado el documento HTML.

Así ha quedado la página:

lunes, 20 de mayo de 2019

HTML

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre HTML.

¿Qué es HTML?

HTML es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto. Se utiliza para dividir un documento, especificar sus contenidos y su estructura, y definir el significado de cada parte(es lo que incluye todo el texto, etc., que se ve en las páginas web). Utiliza elementos para identificar los diferentes componentes de una página.

Aquí os muestro una imagen de Adobe Dreamweaver y unas líneas de un documento HTML. Adobe Dreamweaver es el programa utilizado para crear documentos .html .

Proceso para crear un documento HTML básico:

Lo primero es ponerle un título al documento. Esto lo haremos escribiendo el titulo dentro de la etiqueta <title>.
Después todo el texto y contenido que vayamos a incluir lo escribimos dentro de la etiqueta <body>.
Los títulos los vamos a escribir dentro de la etiqueta <h1>,<h2>,<h3>...etc.,
Los párrafos los incluiremos dentro de la etiqueta <p>. Para separar líneas usaremos la etiqueta <hr/> o <br/>, ambos crean líneas separadoras la única diferencia es que <hr/> crea una línea visible y <br/> crea una línea separadora invisible.
Podremos agregar imágenes con el elemento <img> y el parámetro "src", desde nuestros archivos o desde un enlace, a esto segundo se le llama "Hotlinking".
Tambien podremos agregar vídeos, esto con el elemento <video> y el parámetro "src".
Aparte podremos crear marcos con el elemento <iframe> y el parámetro "src" , que nos permitirán visualizar otras páginas en nuestra página.
Otra cosa que podemos hacer es agregar audio mediante el elemento <audio> y el parámetro "src".
Por último, podremos hacer tablas desordenadas, ordenadas y tablas mediante las etiquetas <ul> y <ol> respectivamente. Dentro de estas etiquetas con <li> distinguiremos cada elemento de la lista. Para las tablas usaremos <table> para definir el inicio de la tabla y </table> el final e la tabla. Si queremos ponerle borde a la tabla usamos el parámetro border="1". para indicar el comienzo de una fila escribimos <tr> y <td> para el comienzo de una celda.

Ejemplo de una página simple de html:

miércoles, 8 de mayo de 2019

Transiciones de video en Photoshop

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre las transiciones de video en Adobe Photoshop.

¿Qué son las transiciones de video?

La transición es un efecto especial que se usa para indicar la aparición de una imagen durante una presentación o un video.

Ejemplos de videos con transiciones:

Proceso para crear transiciones dentro de Photoshop:

Así como en el post anterior, el primer paso es tener las imágenes que usaremos listas dentro de Photoshop.
Después abriremos la ventana de "línea de tiempo" y le daremos a crear "línea de tiempo de video".
Nos saldrán todas nuestras imágenes entro de la línea de tiempo. Procedemos a ordenar las imágenes a nuestro gusto.
Luego de tener nuestras imágenes ordenadas en la línea de tiempo agregaremos las transiciones y movimientos que queramos. Estas dos opciones se pueden encontrar en el lateral izquierdo de la línea de tiempo y en el lateral derecho de cada panel de las imágenes en la línea de tiempo respectivamente. Para aplicar las transiciones tendremos que arrastrar el que queramos al panel de la imagen a la que queramos aplicarlo.
Finalmente cuando tengamos nuestro video con transiciones listo para exportar, haremos click en "Interpretar video" y habremos terminado.

Linea de tiempo con Photoshop

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre la línea de tiempo en Adobe Photoshop.

¿Qué es la línea de tiempo de Photoshop?

Photoshop posee una herramienta que nos permitirá editar archivos animados como Gifs y archivos de video de una gran variedad de formatos como por ejemplo el MP4. La línea de tiempo es una ventana en la que podremos insertar algunos efectos para el archivo, además de eso podremos insertar audio o podremos mover un objeto gracias a la opción de la línea de tiempo de poder editar los fotogramas a nuestro gusto.

Ejemplos:

Como hacer una animación con la línea de tiempo de Photoshop:

Primero prepararemos el archivo de Photoshop a las dimensiones que deseemos y le agregaremos los elementos que usaremos.
Al tener los elementos listos procedemos a abrir la ventana de la línea de tiempo. Esto se hace en Ventana > Línea de tiempo.
Después, se nos presentan dos opciones, "Crear linea de tiempo de video" y "Crear animación de cuadros", vamos a elegir la primera opción.
Luego tendremos que editar el video a nuestro criterio, tendremos opciones como "Posición", "Opacidad" y "Estilo". Estas opciones permiten cierto nivel de edición en el video.
Finalmente le daremos a "Interpretar video" y tendremos nuestro video listo.

Banners dinámicos

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre los banners dinámicos.

¿Qué es un banner dinámico?

Ya hemos hablado en este blog sobre banners, existen banners estáticos y banners dinámicos. En este caso los banners dinámicos son banners animados que se presentan atraves de movimientos o animaciones.

Proceso para la creación de un banner dinámico en Photoshop:

Primero necesitaremos los elementos del banner que vamos a animar, estos los montaremos en Photoshop para tenerlos en capas.
Después abrimos la línea de tiempo desde Ventana > Línea de tiempo y le damos a crear animación de cuadros.
En la ventana de línea de tiempo procederemos a crear los cuadros, es decir, los fotogramas de nuestro banner dinámico en el orden deseado.
Finalmente para exportar nuestro banner iremos a Archivo > Exportar > Guardar para Web (heredado) y tendremos nuestro banner listo.

Ejemplos:

Cinemagraph

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones electrónicas sobre los Cinemagraph.

¿Qué es un Cinemagraph?

Las cinemagraphs nacen de la combinación de la fotografía con el vídeo. Su nombre proviene precisamente de su definición: cinema-(photo)graph, acuñado por los fotógrafos estadounidenses Kevin Burg y Jamie Beck, quienes empezaron a utilizar esta técnica en el 2011 para dar vida a sus fotografías de moda.

Cinemagraphs que hicimos en clase:

Proceso para la creación de un Cinemagraph:

Lo inicial es tener el video que vamos a tratar listo para su edición.
Como segundo paso vamos a duplicar la capa del video dentro de Adobe Photoshop y esta segunda capa "copia" la vamos a rasterizar para que pase a ser un fondo fijo dentro del archivo de video.
Después de tener el fondo preparado, vamos a enmascarar la capa de video con nuestra zona de interés dentro del video.
Finalmente vamos a "Interpretar el video" para exportarlo a nuestro formato deseado.