Página personal de Erick Ríos.

Bienvenidos a la página correspondiente al módulo 2 del curso de HTML5 que ofrece miriadax. Aquí ilustraré de manera sencilla los conceptos vistos, como el uso de fuentes externas, colores de texto y fondo, imágenes y video, etc.

Colores

En esta sección ilustraré el uso
de CSS para cambiar el color de
texto y fondo de los elementos.

Podemos cambiar el color
de fondo de la caja usando
el siguiente código:
#colorbox{
background.color: lightgray;
}
colorbox es el id asignado
al div.
De la misma manera podemos cambiar
el color del texto, palabras o incluso letras
En CSS usamos:
.blueText{
color: blue;
}
Incluso podemos definir un fondo degradado
para dar mejor vista a nuestras páginas.
La forma de hacerlo sería:
#backdeg{
background: linear-gradient(lightblue, white);
}

Fuentes

En HTML5 podemos enlazar fuentes que no estan instaladas ni en el servidor ni en el ordenador cliente. Esto se hace haciendo referencia a la url del font en la cabecera del archivo, por ejemplo, este código utiliza el font del siguiente sitio:
<link href='https://fonts.googleapis.com/css?family=Lobster+Two:400,700' rel='stylesheet' type='text/css'>

O bien, este otro tipo de letra lo encontramos en:
<link href='https://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>

Ambas fuentes fueron obtenidas del servicio de google, pero existen más web fonts disponibles para su uso, como edge web fonts de adobe, por ejemplo la siguiente:

Ésta fuenta ha sido enlazada del sitio de adobe utilizando el siguiente codigo en nuesta sección <head>:
<script src="//use.edgefonts.net/berkshire-swash.js"></script>

Para usar los fonts se hace de manera normal definiendo un estilo en CSS:
.berkshireFont{
font-family: berkshire-swash, cursive;
}

Multimedia

Imagenes

HTML5 incluye etiquetas para manejo de multimedia de manera mas sencilla y poderosa, de manera que podemos incluir imagenes responsivas a las resoluciones del dispositivo que las esta mostrando, de igual forma los videos, donde respondan al tipo de decodificador que puede usar el navegador del cliente.

La imagen mostrada a continuación, cambia cuando la resolucion mostrada de la pagina se mueve, esto permite personalizar las imagenes para que sean mostradas de acuerdo a las capacidades de pantalla del cliente. Ajuste el ancho del navegador para visualizarlo: HTML5
Otra opción cuando no se traten de imagenes complejas, como logos, sería usar imagenes vectoriales, que pueden dibujarse en el navegador del tamaño que deseemos, como ejemplo las tres imagenes siguientes son del mismo archivo (SVG):

Videos

Para videos, igualmente necesitamos validar las condiciones del cliente, los codecs de video que soporta el navegador, o bien podemos enlazar directamente un video de servicios como youtube: