Entradas

CSS

Imagen
Es un lenguaje de programación interna de HTML que configura su forma de lectura, orden o escritura. Describe como se va a mostrar un documento en pantalla por escrito o voz. Cuando tengamos un archivo de HTML y queramos editar sus detalles internos, crearemos un CSS en un programa como Dreamweaver de esta manera: Al elegirlo , se nos creará una ventana con el <charset> (que es el tipo de archivo que que nos permite enlazar) y body (cuerpo de página).  Nos incluirá una etiqueta de CSS que nos define que archivo estamos utilizando. A partir del body, pondremos todo lo que queremos cambiar, en este caso, el fondo (background) con un color específico de la pantonera y editar el color de las cabezas de texto, también, de colores distintos. Para introducir estos datos en el HTML, crearemos la etiqueta <link> que nos permite enlazarlo con otro tipo de archivo, introducimos la forma de edición y estilo que queramos "stylesheet" y por último, el archivo que...

HTML

Imagen
El HTML (lenguaje de marcado de hipertexto) se utiliza para dividir un documento, especificar su contenido y su estructura, definir el significado de cada parte , utilizando los elementos de diferentes componentes de una página. Suele tener varios componentes tanto como archivos como texto, le explicaremos a continuación a partir de la imagen del proceso de una página: Aquí tenemos una captura de la aplicación que usamos, Dreamweaver CC , es un editor HTML del paquete de Adobe, a simple vista se ve poco y así de primeras apenas se entiende, pero con ayuda explicamos las partes. Lo primero y fundamental crear un título y un cuerpo (en este caso nos lo hace automáticamente el <title> y <body> ) el cual el títulos nos aportará el título del archivo o en este caso, de la página. El cuerpo es todo lo que va a contener y especificar nuestros etiquetas, pestañas o códigos, es la parte más importante porque a partir de ahí, se crea todo. Esto ya son etiquetas...

Cinemagraph

Imagen
Un Cinemagraph nos permite modificar varios elementos de un vídeo para que no se muevan, de esta forma parecerá que solo se mueve una parte de la imágen y la otra se quedará estática. La manera de hacerla se compone de 3 fases: 1- Tiene que crearse una capa con la imágen estática del vídeo y situarla encima del vídeo para que haga efecto. Con la imágen puesta en primer plano, procedemos a usar una máscara de capa como en la segunda imagen y tapar (con el negro) lo que queremos que se quede en movimiento. Lo blanco será lo que se quede estático, de esta forma, se verá el movimiento del vídeo. Después de crear el vídeo en buen estado, procederemos a guardar el vídeo con la opción "Interpretar Vídeo" e lo convertiremos en formato .mp4 En estas dos prácticas, en uno se mueve la noria, y en otro solo los coches. Aquí por ejemplo, se detalla como en uno

Transición de vídeo en Photoshop

Imagen
La transición de video consiste en hacer un vídeo con sus efectos dentro de Photoshop. Tal vez Photoshop no sea la mejor opción para hacer este tipo de vídeos, pero tiene funciones que ayudan a hacerlo. A continuación vemos las formas de edición de los tramos del vídeo, es decir, editar las imágenes para que hagas transiciones de rotación, para que sean transversales... También disponemos con la función de aumentar el zoom, disminuirlo, pero estos son los llamados efectos de movimiento, que consiste en editar el movimiento e desplazamiento de la imágen. Editándolo y poniendo efectos tanto de movimiento como de transición, nos quedaría algo así, un conjunto de imágenes con varios efectos que todos ellos se componen para hacer un vídeo. En este caso hemos utilizado para esta práctica imágenes y audio de la serie "Bola de Dragón".

Línea del tiempo con Photoshop

Imagen
La línea del tiempo de un vídeo o un gif, es aquel tramo y sus características que recorren por el periodo de tiempo del vídeo o imagen animada. En Photoshop también la forma de hacerlo eligiendo línea de tiempo en la zona de ventanas, puedes elegir la forma de verlo tanto como de reproducirlo, de esta forma la más cómoda para nosotros. Nosotros elegiremos la forma de vídeo, asi podremos ponerlo en formato web y que lo podamos reproducir correctamente, de baja calidad pero que no de muchos problemas al usuario para reproducirlo. Tiene 3 opciones, Posición, Opacidad y Estilo . Estas 3 opciones son para poner detalles extras, crear a partir de una imagen, un video o gif. En el vídeo siguiente pondremos como la bailarina, cambia de posición, tamaño e estilo en el mismo tramo.

Banner HTML5

Imagen
El banner HTML5 es aquel banner producido con un código insertado para ponerlo directamente en el código fuente base de la página web. Para esto, utilizaremos Bannersnack. Esta página es para crear tanto banners estáticos como dinámicos, sobre todo que facilite al usuario hacerlo, o con plantillas hechas para los novatos, nos permiten insertar imágenes , vídeos, texto... en el banner. Aquí tenemos las capas creadas con su estilo, color, párrafo y orden , para que cada uno esté correctamente puesto.  Tiene opciones de coste, pero las más usadas son gratis y con gran amplitud de opciones. Esta vez pondremos un banner interactivo, de tamaño medio que nos llevará a la web de Preimpresión la cual estamos y otro el cual nos llevará al banner de un compañero nuestro.

Black Mirror

Imagen
Hemos tenido que crear unos cuantos gifs de la famosa serie de Black Mirror, una serie producida por Netflix la cual cuenta unos posibles futuros en la vida si fuesemos por tal dirección, serie de 10. Todos estos gifs están hechos y editados por Adobe Photoshop, en cada gif explicaré un mini resumen de lo que significa: En este caso, nos lleva al capítulo de Bandersnatch, el primer capítulo interactivo de una serie de Netflix e innovadora, cuenta la historia de un programador que está formando su propio juego viviendo con su padre, conseguirá lograr un récord? TU DECIDES. En este caso, nos lleva al mundo del amor por Internet, que pasaría si nos ponemos un tiempo de relación... mejor dicho, que un programa nos lo ponga y debemos cumplirlo. Os parece de locos? Tiene un 99% de efectividad. Os imaginais vivir en un mundo recreativo, un mundo de realidad aumentada pero en directo? Tiene sus partes buenas y malas, sobre todo, cuanto te piden una cosa y no la cumpl...