miércoles, 5 de junio de 2019

CSS cisne.

Hola a todos otra vez.
Hoy tambien os enseñare un HTML con CSS y os dire las etiquetas que he usado en el.
Espero que os sean de ayuda.

Como siempre, primero creamos el CSS y el HTML, deben estar guardados en la misma carpeta al igual que las imagenes que pongamos.
Empecemos a explicar las etiquetas.

Os pondre otra vez las que ya vimos en la entrada anterior para recordarlas
url("") sirve para introducir una url a la que ira asociado.
Font-family se refiere a que tipo de letra usaremos.
Font-size sirve para el tamaño de la letra.
Text-decoration es para ponerle alguna decoración al texto
Line-height es utilizado para marcar el espacio que habrá entre lineas.
Background sirve para editar el fondo, en este caso hemos metido una imagen, en la que ponemos no-repeat para que solo se ponga una vez de fondo.
Background-size es para editar el tamaño y color del fondo ya editado.
Padding es el espacio entre el contenido del elemento y su borde
Margin se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.

A continuacion explicare las nuevas.
Border-radius sirve para especificar la redondez de las esquinas.
Float posiciona una caja moviéndola todo lo que puede a la izquierda.
Text-transform especifica un cambio de mayusculas y minúsculas del texto en un elemento.
:hover sirve para que el usuario interactúe con un elemento señalador sin activarlo necesariamente.

Os dejo como quedo el HTML y la pagina.


Espero que os haya sido de ayuda.
Un saludo.

CSS co Link

Hola a todos, vengo a contaros más sobre el CSS.
Esta vez os dire algunas etiquetas más que os podran servir a la hora de hacer vuestros CSS.

Primero como siempre creamos el CSS y el HTML.
Os explicare las etiquetas del CSS

Aunque ya la conozcamos de html, url("") sirve para introducir una url a la que ira asociado.
Font-family se refiere a que tipo de letra usaremos.
Font-size sirve para el tamaño de la letra.
Text-decoration es para ponerle alguna decoración al texto
Line-height es utilizado para marcar el espacio que habrá entre lineas.
Background sirve para editar el fondo, en este caso hemos metido una imagen, en la que ponemos no-repeat para que solo se ponga una vez de fondo.
Background-size es para editar el tamaño y color del fondo ya editado.
Padding es el espacio entre el contenido del elemento y su borde
Margin se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.

Recordad vincular el CSS con el HTML. Os dejo un ejemplo de como quedo el HTML y la pagina.


Espero que os haya sido de ayuda.
Un saludo

viernes, 31 de mayo de 2019

Nuevo CSS

Hola a todos, hoy vamos a hablar un poco del CSS.
Os voy a explicar algunas etiquetas nuevas que hemos visto y como usar CSS
Lo primero es escribir el HTML y en un documento aparte (ambos en Dreamweaver) de CSS. En el CSS debemos escribir los cambios estéticos que queremos poner al documentos, como el color del fondo y las letras, que es lo que veremos en esta entrada.

Yo en mi CSS he cambiado el color del fondo y el titulo 1 de color.

Body se refiere a que lo que vamos a cambiar es el cuerpo del documento, o sea, el fondo, de ahi que luego ponga Background y después de eso el color.
H1 es en referencia al titulo 1, al igual ponemos color y ahí el color deseado.
Algo facil.

Una vez escrito el HTML y el CSS, debemos enlazarlos, para ello hay que escribir <link rel="Stylesheet" href="el nombre de tu css">


Eso hará que se nos enlace el HTML con la hoja CSS.
Recordad que con HTML tenemos que tener todas las cosas que vamos a usar en la misma carpeta que el archivo HTML, y el CSS no es una excepción.
Después de eso guardáis y ya tenéis vuestro HTML con CSS

Espero que os haya sido de ayuda.
Un saludo.

lunes, 20 de mayo de 2019

HTML5

Hola a todos.
Hoy hablaremos del HTML5
Se trata de un lenguaje web de etiquetas que permite construir los documentos webs (páginas web) de forma que los navegadores puedan entender el contenido y mostrárselo al usuario. En internet es el estándar en el que la inmensa mayoría de páginas están realizadas.

Para esto yo he usado Adobe Dreamweaver, un programa que sirve para escribir el codigo HTML5.

Para poder utilizarlo debemos saber las etiquetas base que os pondre aqui

<h1></h1>: define un texto como título o cabecera.
<p></p>: define un bloque de texto para que sea párrafo.
<br></br>: inserta un salto de linea.
<hr></hr>: inserta el salto de linea con una linea visible.
<strong></strong>: te deja poner el texto en negrita.
<em></em>:permite poner el texto en cursiva.

Incluso con ciertas etiquetas se pueden insertar tanto imagenes como video

<a href=""> </a>: permite insertar enlaces externos, pondremos la url de la pagina entre las "". Siempre habrá que ponerlo entre las comillas
<img src=""/>:  te deja insertar imágenes, pondremos el nombre exacto de la imagen entre las "", es importante que la imagen esté guardada en una carpeta en la cual no la vayamos a mover para que el programa la encuentre.

Yo por ejemplo he hecho esto


Espero que esta entrada os haya sido de ayuda.
Un saludo.

martes, 7 de mayo de 2019

Cinemagraph

Hola a todos, vengo a contaros como crear un cinemagraph.
Primero debes abrir el video en photoshop, una vez alli copias la capa de video, la rasterizas y la sacas de la carpeta.


Despues de eso creas una mascara de capa en la capa que has rasterizado.

Despues simplemente ocultas en la mascara la parte que quieres que se mueva y ya estaría.

Facil, sencillo y para toda la familia.
Espero que os haya sido de ayuda, os dejo dos ejemplos aquí abajo.
Un saludo.

lunes, 29 de abril de 2019

Transición de video.

Hola a todos.
Hoy vengo a hablaros de la transición de video, incluso a añadirle una pista de audio, todo en Photoshop.
Primero deberemos crear un nuevo documento, abrir la linea de tiempo de video.

Luego poco a poco iremos montando las imágenes una tras otra, ponerlas en la misma linea de tiempo nos hara todo más comodo que tenerlo en escalera.

Colocamos las imágenes y le adjuntamos transiciones y movimiento.


Después de eso solo nos quedara añadir la pista de audio de manera muy sencilla.

Lo acoplamos como queramos y lo guardamos dandole a interpretar video para guardarlo, le ponemos la calidad que queramos y ya tendríamos el video montado.

Eso ha sido todo por hoy, os dejare aquí un par de videos que he montado en clase para que lo veáis.
Espero que os haya sido de ayuda.
Un saludo.




miércoles, 24 de abril de 2019

Linea del tiempo con Photoshop

Hola a todos.
Hoy vengo a hablaros de como hacer una linea de tiempo de video con Photoshop.
Primero debemos crear el documento, colocar las imágenes que vamos a usar, abrir la herramienta de linea de tiempo y asegurarnos de que ponga linea de tiempo de video.


Después de eso nos saldrá la linea de tiempo del video.


Allí debemos ir a la opción de posición y crear un frame clave tras otro mientras movemos la figura que queramos usar.


Eso hará que photshop vaya creando frames hasta el punto donde has movido la imagen en el siguiente frame clave.



Con eso tendremos montado todo.
Para guardarlo deberemos darle a interpretar video.

Se nos abrirá una ventana de opciones y ahí ya lo ponemos a nuestro gusto para luego darle a interpretar.

Y eso seria todo.
Espero que os haya gustado y aquí dejo un par que he hecho yo en clase.
Un saludo.




miércoles, 10 de abril de 2019

HTML

Hola a todos.
Hoy vengo a contaros como hacer un banner en HTML5 maker.
El HTML5 es un lenguaje informatico

Primero debes meterte en la pagina y darle a crear uno nuevo.
Elegimos el tamaño o cogemos una de las plantillas, en mi caso lo empece de nuevo y poco a poco fui creandolo.


Podemos elegir como pasar de una a otra con las animaciones.
Agregar imagenes.

Podemos agregar texto y alli tambien poner un codigo url.



Y por ultimo para guardarlo debemos darle a Upload, lo guardamos y para copiar el HTML5 debemos darle a Empotrar.

Os dejo aquí el Banner que he hecho que lleva a la pagina de una compañera de clase. Espero que os guste.
Un saludo.

Banner Black mirror

Hola a todos, os vengo a enseñar unos banners que hemos montado en clase con la técnica de la entrada anterior, de temática de la serie Black Mirror.

El primero es uno titulado Computer.


El segundo es una cuenta atrás.


El tercero es una llamada de teléfono.



El siguiente se titula October



El quinto es Password


Y el ultimo es Program.


Espero que os haya gustado. 
Un saludo

miércoles, 27 de marzo de 2019

Creación de Gif con Photoshop

Hola a todos.
Hoy os voy a explicar como crear un Gif en photoshop.

Para ello debéis elegir de que hacerlo, en mi caso de una bailarina y el banner de la entrada anterior.

Primero creamos el archivo en photoshop o arrastramos el que ya tenemos para abrirlo.
Una vez esto nos vamos a arriba del todo a ventana y seleccionamos linea de tiempo

Nos saldra algo asi.

Le daremos a crear cuadro de animación e iremos poco a poco creando más copias de cuadro de animación y modificándola.
Tendremos que ir seleccionando y deseleccionando las capas que queramos que salgan en esos cuadros en el orden que queramos.


Ahora solo nos quedara comprobar que esta bien y guardarlo.
Para ello debemos ir a archivo, exportar y guardar en web (heredado)

Una vez hecho eso nos aseguraremos que lo estemos guardando en Gif y le damos a guardar.

Y ya esta. Ya tendríamos nuestro Gif creado con facilidad. 
Os dejare aquí un par de ejemplos para que los veáis.
¡Un saludo!



lunes, 25 de marzo de 2019

Creación de Banner con Gif Maker

Hola  todos.
Hoy vengo a hablaros de como crear un banner con un pagina llamada Gif Maker. En mi caso ha sido sobre mi centro de estudios.

Para ello necesitaremos elegir las imagenes para crear el gif que sera nuestro banner, luego en photohop las editamos a nuestro gusto y del tamaño del Banner que deseemos

En mi caso ha sido 300x600pp

Despues de editar todas las imagenes guardamos un nativo y uno en jpg o png, en mi caso png. Buscamos la pagina web y subimos ahi los archivos.

Despues ajustaremos las opciones a nuestro gusto y crearemos el GIF para luego descargarlo.

Y asi tendriamos nuestro banner dinamico en formato GIF. 
Os dejo aqui mi ejemplo. 
Un saludo.

jueves, 21 de marzo de 2019

Tipos de Banners

Hola a todos.
Hoy vengo a hablaros de los Banners.
Se tratan de espacios publicitarios en paginas web

Os hablare de los estáticos y los dinámicos.
Estático: Se trata de un banner sin movimiento que solo consta de una imagen, guardada en png o jpg.
Dinámico: Es uno más complejo que consta con varias imagenes, haciendo asi un banner con movimiento. Se guarda en gif, flash y html5

Ahora os pondré unos ejemplos de cada uno.

Estatico

Tipo:Full Banner
Dimensiones:980x50pp
Formato:jpg
Modo de color:RGB
Peso:50.586 bytes
Sitio:El Pais

Tipo:Half Page ad
Dimensiones:300x600pp
Formato:png
Modo de color:RGB
Peso:195.821 bytes
Sitio:El Mundo

Tipo:Medium Rectangle
Dimensiones:300x250pp
Formato:Png
Modo de color:RGB
Peso:36.930 bytes
Sitio:El Mundo

Tipo:Half-Page ad
Dimensiones:300x600p
Formato:png
Modo de color:RGB
Peso:76.113 bytes
Sitio:El Mundo

Tipo:Half-page ad
Dimensiones:300x600pp
Formato:png
Modo de color:RGB
Peso:56kb
Sitio:20 Minutos

Tipo:Vertical banner
Dimensiones:120x600pp
Formato:jpg
Modo de color:RGB
Peso:23kb
Sitio:20 Minutos

Dinamico

Tipo:Half-Page ad
Dimensiones:300x600pp
Formato:gif
Modo de color:RGB
Fotogramas:3
Peso:143KB
Sitio:El Pais

Tipo:Square pop-up
Dimensiones:300x300pp
Formato:gif
Modo de color:RGB
Fotogramas:2
Peso:43kb
Sitio:El Mundo

Tipo:Rectangle
Dimensiones:300x100pp
Formato:gif
Modo de color:RGB
Fotogramas:3
Peso:7.448 bytes
Sitio:El Mundo

Tipo:Square pop-up
Dimensiones:480x480pp
Formato:gif
Modo de color:RGB
Fotogramas:105
Peso:43kb
Sitio:El Mundo Today

Tipo:Half-page ad
Dimensiones:300x600pp
Formato:Gif
Modo de color:RGB
Fotogramas:3
Peso:90kb
Sitio:El Mundo Today

Tipo:Half-page ad
Dimensiones:300x600pp
Formato:Gif
Modo de color:RGB
Fotogramas:3
Peso:115kb
Sitio:El Mundo Today




Espero que todos estos ejemplos de Banners os hayan servido.
Un saludo