Entradas

CSS con Link

-
Imagen
El CSS con link es aquel que interviene con varios links, tantos de imágenes, como de páginas web. En esta práctica hemos creado un HTML y un CSS con edición de varios elementos, hemos modificado tanto la letra interna (siendo de otra página web) , imágenes incorporadas y color/formato de los enlaces El HTML creado se ve así: Únicamente en el HTML hemos vinculado con el CSS y hemos metido enlaces de Linkdin, como se vé en la imágen de arriba, en el CSS (abajo) hemos modificado varios códigos. Vinculado con HTML hemos importado un tipo de fuente de Googleapis y la hemos incorporado. Hemos configurado sus parámetros, el cuerpo (body) hemos puesto una imágen lateral la que tenemos en la carpeta (author_page.jpg) La lista de enlaces la hemos puesto centrada, y el título (h1 y h2) lo hemos centrado también.  Por último hemos puesto color al texto y una línea para que nos señale el URL.
Publicar un comentario
Leer más

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...
Publicar un comentario
Leer más

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...
Publicar un comentario
Leer más

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
Publicar un comentario
Leer más

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".
Publicar un comentario
Leer más

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.
Publicar un comentario
Leer más

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.
Publicar un comentario
Leer más