Elia's Digital Prexpress: 2019

miércoles, 5 de junio de 2019

Cisne CSS

-Escribir código HTML

-Escribir código CSS:

Etiquetas:

(Todas estas aparecen en mi anterior apartado)

Font-family: Especificar el estilo tipografico que usaremos.

Font-size: Modifica el tamaño de letra.

Line-height: Espacio que habrá lineas.

Background: Permite modificar el fondo y  en este caso hemos puesto una imagen la cual  usando la etiqueta no-repeat hacemos que aparezca una sola vez.

Background-size:  Redimensiona las imágenes de fondo.

Padding: Espacio entre el contenido del elemento y su borde.

Margin: Establecer de forma abreviada el valor de una o más propiedades individuales. 

Text-decoration: Establece el formato de texto subrayado (underline) y suprayado (overline), tachado (line-Through) o parpadeo (blink)

(A pesar de lo anterior dicho, ahora aparecen unas nuevas)

Border-radius:especifica la redondez de las esquinas.
Float: posiciona una caja todo lo que puede a la izquierda de la página.
Text-transform: especifica un cambio de mayúsculas y minúsculas del texto en un elemento concreto.
:hover:sirve para que el usuario interactue con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor.

Resultado:

CSS + Link

CSS CON LINK

En este apartado, la cosa comienza a complicarse un poco

En primer lugar, escribiremos el código HTML (creando un tabla usando links difenentes):

Código CSS:

Etiquetas:

Font-family: Especificar el estilo tipografico que usaremos.

Font-size: Modifica el tamaño de letra.

Line-height: Espacio que habrá lineas.

Background: Permite modificar el fondo y  en este caso hemos puesto una imagen la cual  usando la etiqueta no-repeat hacemos que aparezca una sola vez.

Background-size:  Redimensiona las imágenes de fondo.

Padding: Espacio entre el contenido del elemento y su borde.

Margin: Establecer de forma abreviada el valor de una o más propiedades individuales. 

Text-decoration: Establece el formato de texto subrayado (underline) y suprayado (overline), tachado (line-Through) o parpadeo (blink).

RESULTADO:

CSS

Es un lenguaje que describe el estilo de un documento HTML.

Éste describe cómo se deben mostrar los elementos HTML.

Para aplicarla a un documento HTML tenemos que:

-Abrir un archivo a parte del HTML con extensión ".css" y lo incorporamos con "<link>":

En el archivo CSS utilizaremos las etiquetas para diseñar nuestro documento:

Para hacer una modificación, vamos a "archivo CSS" para acceder a ello y cambiarlo desde allí.

RESULTADO:

Linea de tiempo en Photoshop

Línea de tiempo en Photoshop

En photoshop podemos crear videos mediante la linea de tiempo.

En el menú principal podemos modificar el tiempo que queremos que dure el video, si desplegamos el menú de Capa, nos aparecen 3 opciones.

Posición: nos deja elegir donde iran las imágenes.
Opacidad: podremos modificar la opacidad de nuestra imágen o elemento.
Estilo: podemos modificar el color, textura, estilo, poner degradados....

Podemos usarlas todas juntas o por separado dependiendo de lo que queramos hacer.

Ejemplos:

Banner Black Mirror

Banner Black Mirror

Hemos creado unos banners de la serie Black Mirror.

He aquí el resultado:

HTML 5

HTML5

Es una forma de programación manual en la que los navegadores puedan entender el contenido y mostrarlo a los usuarios, creados con etiquetas, enlaces...

Hemos realizado un documento web usando Adobe Dreamweaver.

FORMA DE UTILIZARLO

Debemos escribir entre las etiquetas <body></body>

Tenemos varias etiquetas para usar, desde poner enlaces internos/externos, imágenes, videos, audios....

También tenemos etiquetas para la modificación del texto, ponerlo en negritas o cursivas.

La parte de arriba nos muestra como va quedando el texto y la de abajo es donde tenemos que escribir las etiquetas junto al texto.

Una vez hecho lo guardamos y podremos abrirlo desde cualquier navegador.

Banners HTML5 Maker

¿Qué es?

Es un lenguaje informático que se usa para estructurar y crear contenido web.

¿Cómo crear banners?

Nos hacemos una cuenta y elegimos el tamaño del banner.
Podemos usar nuestras imágenes o las que viene en el banco de imágenes de la aplicación, además podemos elegir el formato del texto y cuantos fotogramas poner.
Cuando terminemos de crearlo lo publicamos y en empotrar copiamos el código HTML5 y lo pegamos en el blog.

jueves, 30 de mayo de 2019

Cinemagraph

¿Qué es?

Son imágenes animadas creadas al congelar una parte de un video. Son imágenes estáticas en las que se sustituye una parte por una animación.

Su objetivo es sorprender al usuario y transmitir sensaciones.

¿Cómo hacerlo?

Elegimos un video.
Hacemos una copia del video y lo rasterizamos para que se vuelva estático.
Ponemos una máscara de capa y rellenamos todo aquello que no queremos que se mueva, de esta forma lo congelamos.

Rápido y sencillo.

Creación de Banners con Photoshop

Creación de Banners con Photoshop

Creamos varias capas, capa una con una imagen del banner. Debemos ir moviendo la imagen en cada capa para crear movimiento.
En Ventana>Linea de tiempo abrimos un menú con el cual creamos el banner. Damos a Crear animación de cuadros y vamos creando un cuadro por capa.
En el menú que nos aparece abajo podemos decidir si queremos que el banner se mueva una sola vez o infinitamente, tenemos los controles de play, pausa, pasar de un cuadro a otro....
Cuando terminemos, vamos a Archivo>Exportar>Guardar para web (heredado). Lo guardamos con formato gifs.

Banner con GIF Maker

¿Qué es?

Es una aplicación la cual nos deja crear gifs a partir de varias imágenes, podemos decidir el tamaño y el número de imágenes que queramos usar.

Pasos a seguir:

Creamos nuestras imágenes.
Las subimos a la aplicación.
Ponemos las iágenes en orden, hacemos clic y arrastramos a la posición que queramos.
En el panel Control modificamos el tamaño y la velocidad.
Una vez echo, podemos descargarlo, modificarlo, crear uno nuevo...

Y así quedaría:

Tipos de Banners

¡Muy buenas! Hoy voy a explicar qué es un Banner y qué tipos de Banners existen.

Un Banner es un apartado de publicidad que se encuentra en cualquier página web, tienen como objetivo atraer tráfico hacia el sitio web del anunciante.

Existen dos tipos de Banner: Estático y Dinámico.

Ejemplos:

ENLACE:https://www.corazondemelon.es/s2/home

ENLACE:https://www.reale.es/es

Animación Stop Motion

Stop Motion

¡Muy buenas! Hoy hablaré de una técnica de animación que se llama Stop Motion.

Un stop motion se trata de una animación hecha a partir de fotografías de un mismo objeto estático, dando una ilusión de movimiento de éste.

Nuestro grupo constaba de 5 personas: Irene, Dania, Natalia, Julián y su servidor, quienes hicimos varios frames de personajes nuestros y con ayuda de la aplicación Stop Motion Studio. La verdad es que lo pasamos bien en el proceso.

Lo primero para hacer un Stop Motion (o una animación en general) necesitamos hacer un Storyboard, que es una secuencia de dibujos que expresan una idea de lo que va a ser la animación y las cosas que ocurrirán en ésta.

Después con la ayuda de la aplicación Stopmotion Studio iremos haciendo fotografías mientras movemos lentamente nuestros dibujos para así crear la sensación de movimiento.

Y después de 180-200 frames este es el resultado:

https://www.youtube.com/watch?v=j4_TNe9XEbk

miércoles, 6 de febrero de 2019

Revistas interactivas con efecto Flip Page

¡Buenas! Hoy traigo un trabajo que he hecho con anterioridad sobre una marca en particular que utilizo y frecuento habitualmente.

Esta vez, pasado a un programa Online llamado Flip Snack.

https://www.flipsnack.com/EliAlgaba/crossmedia.html

Revistas interactivas con el efecto Flip Page

¡Buenas! Hoy traigo un trabajo que he hecho con anterioridad sobre una marca en particular que utilizo y frecuento habitualmente.

Esta vez, pasado a un programa Online llamado Flip Page.

https://cloud.3dissue.net/13954/13961/14023/11907/Crossmedia-20190206111436.pdf

Realidad Aumentada

La Realidad Aumentada (o RA) es una tecnología que permite superponer elementos virtuales sobre nuestra visión de la realidad.

Algunos ejemplos podrían ser:

-https://www.layar.com/

-https://www.aurasma.com/

-http://www.quivervision.com/

lunes, 4 de febrero de 2019

Códigos QR

¡Buenas! Hoy explicaré de lo que se trata un código QR, sus funciones y su origen.

¡Empecemos!

_____________________________________________

Un código QR (o Quick Response Barcode) se define brevemente como un código escaneable que conduce a una página web, ya que acumula información dentro de sí que se compone de una matriz de puntos blancos y negros.

He aquí unos cuantos ejemplos

domingo, 3 de febrero de 2019

Tipos de productos multimedia/interactivos en función de la estructura de navegación

¿Qué es un Mapa Web?

Se trata de una lista de las páginas de un sitio web accesibles por parte de los buscadores/usuarios.

Ejemplos de páginas web legibles:

-MondoMedia.

https://mondomedia.com/channel/HappyTreeFriends

Se trata de una página de series de animación para público juvenil.

Éste tiene una sencilla lectura y un directo acceso a las distintas series disponibles, así como su Merchandising oficial y redes sociales de los administradores, creadores y animadores de los Shows.

-Cartoon Network.
https://www.cartoonnetwork.es/show/steven-universe

Se muestran los mismos casos que en la página web anterior, aunque, al ser infantil, su utilización es incluso más sencilla de utilizar, con un montón de clips y juegos de series animadas conocidas de esta empresa de animación.

Ejemplos de páginas web no legibles:

-CDM

http://www.cmd-tip.com/specialty_and_custom.html

Si tuviese que mostrar un ejemplo de página web aburrida, de difícil legibilidad sin duda elegiría este. Tan sólo la información que posee no se ve relevante ya que no se destaca ningún detalle de éste en su mayoría.