Página web personal de Andres Antonio Tantachuco Diaz

1. Uso de colores para texto y fondo, incluyendo al menos colores degradados en alguna de sus cajas.

En el archivo de estilos establecí que el negro se el del <body> y establecí que el color del texto del contenido principal sea blanco. A su vez, a las palabras de enlaces importantes les asigne el color amarillo.

Sobre el color de fondo, el título de la página (<header>) y cada uno de los artículos explicativos presentan un color de fondo.

Y con respecto al uso de degradado, en el pie de página (<footer>) aplico un degradado lineal mientras que en el fondo de la página (background) aplico uno radial. Para obtener este tipo de degradado uso una herramienta CSS online, espero les sirva.

2. Inclusión de tipografías externas de Google Fonts, Adobe Edge Web Fonts o un servicio similar on line.

A través de la etiqueta <link> incluí 3 tipos de fuentes de Google Fonts, para la cabecera <h1>, para las cabeceras <h3> y para el texto de párrafos (<p>).

En la misma página de Google Fonts podrá encotrar la explicación (en inglés) de cómo agregar varios tipos de fuentes y sus variantes mediante un único enlace. Les dejo el enlace para que sepan cómo usar fuentes externas de Google Fonts.

3. Distintos encabezados.

Para confirmar el uso de distintos encabezados se debe revisar el código fuente de la página web, y podrá constatar el uso de la etiqueta <h1> para el título de la página y de la etiqueta <h3> para los encabezados de cada articulo explicativo.

4. Uso de caracteres especiales

En este caso se puede apreciar el uso de comillas ("") para resaltar alguna línea y el uso de los símbolos mayor y menor que (< >) cada vez que menciono el uso de alguna etiqueta, tal como lo hice en los apartados anteriores y como lo seguire haciendo los siguientes.

5. Incluir, imágenes de tipo bitmap y vectorial.

La inclusión de imágenes se pude observar en la columna de la derecha donde se encuentra todo el contenido multimedia de la página. Nótese la diferencia de calidad entre una imagen vectorial y otra de mapa de bits cuando se hace zoom a la imagen.

6. Incluir algún vídeo.

El video está ubicado en la misma columna que el de las imágenes y fue incluido dentro de un div para hacer que éste sea responsive, veáse con detalle los selectores .video-container.

7. Incluir bordes redondeados en alguna de sus cajas.

Tanto el <header> para el título de la página como el <div> llamado "contenido" (véase el código fuente) presentan bordes redondeados en todas sus esquinas.

8. La página debe comenzar con el siguiente encabezamiento: "Página personal de <nombre y apellido del alumno > "

El título del contenido de la página muestra claramente que se ha cumplido con este punto.

Dejando lo mejor para el final, la siguiente página (en inglés) les permitirá hacer consultas, saber el uso de etiquetas HTML, sus atributos, saber cuales son los valores de una propiedad CSS, así como probar el funcionamiento de las mismas en: w3schools

Contenido Multimedia

Imágenes

1. Imagen vectorial

tiger
recorte_tiger

2. Imagen de mapa bits

aguila
recorte_aguila

Video