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:

  1. Lo primero es ponerle un título al documento. Esto lo haremos escribiendo el titulo dentro de la etiqueta <title>.
  2. Después todo el texto y contenido que vayamos a incluir lo escribimos dentro de la etiqueta <body>.
  3. Los títulos los vamos a escribir dentro de la etiqueta <h1>,<h2>,<h3>...etc.,
  4. 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.
  5. 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".
  6. Tambien podremos agregar vídeos, esto con el elemento <video> y el parámetro "src".
  7. 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. 
  8. Otra cosa que podemos hacer es agregar audio mediante el elemento <audio> y el parámetro "src".
  9. 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:

  1. Así como en el post anterior, el primer paso es tener las imágenes que usaremos listas dentro de Photoshop.
  2. Después abriremos la ventana de "línea de tiempo" y le daremos a crear "línea de tiempo de video".
  3. Nos saldrán todas nuestras imágenes entro de la línea de tiempo. Procedemos a ordenar las imágenes a nuestro gusto.
  4. 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.

  5. 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:

  1. Primero prepararemos el archivo de Photoshop a las dimensiones que deseemos y le agregaremos los elementos que usaremos.
  2. 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.
  3. 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.
  4. 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.
  5. 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:

  1. Primero necesitaremos los elementos del banner que vamos a animar, estos los montaremos en Photoshop para tenerlos en capas.
  2. Después abrimos la línea de tiempo desde Ventana > Línea de tiempo y le damos a crear animación de cuadros.
  3. 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.
  4. 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:

  1. Lo inicial es tener el video que vamos a tratar listo para su edición.
  2. 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.
  3. Después de tener el fondo preparado, vamos a enmascarar la capa de video con nuestra zona de interés dentro del video.
  4. Finalmente vamos a "Interpretar el video" para exportarlo a nuestro formato deseado.


martes, 16 de abril de 2019

HTML5 Maker

Hola a todos hoy, de nuevo os traigo una práctica nueva de Ensamblado de Publicaciones Electrónicas sobre HTML5 Maker y Bannersnack.

¿Qué es HTML5 Maker?

HTML5 Maker es una herramienta en línea que nos permite crear banners dinámicos en el lenguaje informático html5 a partir de plantillas que nos presenta la página Web o desde cero.

¿Como se hace un banner en HTML5 Maker?

Se nos presentan muchas opciones para poder personalizar nuestro banner y a partir de estas haremos nuestro banner dinámico.
  1. Primero debemos registrarnos en la página y confirmar nuestro correo electrónico.
  2. Despues elegiremos el tamaño del banner que  queremos crear y accedemos a la ventana de edición.
  3. En la ventana de edición podremos personalizar y ajustar el banner como deseemos, podemos agregar texto, imágenes, animaciones, hipervínculos...etc.


  4. Al terminar de editar el banner hacemos click en "SAVE AND CLOSE" en la esquina superior derecha y tendremos nuestro banner dinámico listo para ser publicado.
Aquí dejare un banner dinámico del blog de una compañera de clase:

Banners Black Mirror

Hola a todos, hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre los Banners Black Mirror. Esta es una práctica que consistía recrear .gifs mostrados por la profesora a partir de imágenes iniciales.

Proceso que he seguido para realizar esta práctica:

  1. Lo primero fue insertar la imagen inicial en Photoshop.
  2. Luego realice los retoques necesarios en la imagen inicial y he creado las capas necesarias para el .gif.
  3. Al tener todo listo en el Photoshop he montado las capas y imágenes para realizar el .gif con cuadros.
  4. Finalmente he exportado los .gifs.