CSS 2 - CSS con link, CSS Cisne y CSS Stephen Hawking

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre CSS. Esta vez hemos creado unos archivos CSS un poco más complejos.

Así han quedado las páginas:

Así han quedado los archivos CSS:

Etiquetas que he usado en los CSS:

• "background": controla el color de fondo de la página en general. Sus parámetros pueden se pueden definir en RGB o Hexadecimal.
• "background-size": especifica el tamaño de las imágenes de fondo.
• "margin": esta etiqueta controla los márgenes.Los Márgenes de bloque son el espacio comprendido entre el bloque y el borde de la ventana activa del navegador. 
• "font-size": define el tamaño de los caracteres. Además del tamaño definido por el usuario, expresado en cualquiera de las unidades de medida conocidas, puede tener alguno de los siguientes valores absolutos: xx-large; x-large; large; medium; small; x-small; xx-small.
• "line-height": sirve para establecer la distancia entre líneas consecutivas de un mismo párrafo. Se expresa en Pixels o px.
• "border-radius": define qué tan redondeadas serán las esquinas. La redondez de cada esquina está definida usando uno o dos valores para el radio que define su forma dependiendo si es un círculo o una elipse.
• "color": este controla el color de un elemento en concreto por ejemplo un texto. Es definido en RGB o Hexadecimal.
• "font-family": indica el nombre (o nombres) del tipo de letra que se va a emplear.
• "padding": define el espaciado interno del bloque. El espaciado interno del bloque es la distancia entre el borde del bloque y su contenido.
• "border": controla el cuadro imaginario que rodea el bloque.
• "text-decoration": con este parámetro, que no influye en el tamaño, puedes acompañar al texto de una delgada línea decorativa que puede estar en tres posiciones distintas, como underline (el típico subrayado debajo de la línea), through (en el centro de la línea -tachado-) o overline (encima del texto). Para que no aparezca se utiliza none (por defecto).
• "text-transform": provee de cuatro posibilidades: capitalize que convierte en mayúscula la primera letra de cada palabra del texto, como puedes ver en el ejemplo, donde el texto original no es así. uppercase para convertir todas las letras a mayúsculas y lowercase para lo contrario, es decir, convertir todas las letras a minúsculas. El valor por defecto es none, que como ya habrás supuesto, deja el texto tal como está escrito.
• "height": define la altura de un elemento en concreto.
• "font-weight": specifica el peso o grosor de la fuente. Pueden emplearse literales como lighter, normal (por defecto) o bold.

Nueva etiqueta CSS

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre unas nuevas etiquetas CSS. Esta será la ultima ya que ha acabado este año. Gracias y un saludo.

¿De qué etiquetas nuevas de CSS hablo?

Os mostrare tres etiquetas nuevas para mi que afectan el text al que se aplican. Afectan su composición y visualización en general. Estas son:

1. word-spacing: 5px; Establece la separación entre las palabras de la línea del texto.
   
2. text-decoration: underline; Con este parámetro, que no influye en el tamaño, puedes acompañar al texto de una delgada línea decorativa que puede estar en tres posiciones distintas, como underline (el típico subrayado debajo de la línea), through (en el centro de la línea -tachado-) o overline (encima del texto). Para que no aparezca se utiliza none (por defecto). El valor none se puede utilizar para eliminar el efecto de subrayado que ponen otros elementos, como ocurre en los links.
   
   
   
   
   
   
   
3. text-transform: capitalize; Curioso efecto que provee de cuatro posibilidades: capitalize que convierte en mayúscula la primera letra de cada palabra del texto, como puedes ver en el ejemplo, donde el texto original no es así. uppercase para convertir todas las letras a mayúsculas y lowercase para lo contrario, es decir, convertir todas las letras a minúsculas. El valor por defecto es none, que como ya habrás supuesto, deja el texto tal como está escrito.
   
   
   
   
   
   
   

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:

1. "font-size": esta tiene como función cambiar el tamaño del texto especificado. Se mide en Pixels o px.
2. "text-align": sirve para alinear el texto a una posición específica del documento por ejemplo, "center" para el centro.
3. "align-content": así como el anterior este funciona de la misma manera pero afecta contenido como imágenes.
4. "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.
5. "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:

1. Primero he creado un documento HTML5 nuevo y he preparado su contenido.
   
   
   
   
2. Después he creado el archivo CSS y lo he preparado con las etiquetas que quería usar. Las que vimos arriba.
   
3. 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.
4. 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:

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:

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: