Práctica 10: Construcción básica de un Sitio Web (index.html)
Forma de trabajo:
- Esta práctica se realizará de manera individual.
Desarrollo:
PARTE 1: Componentes Principales- De acuerdo a su proyecto personal seleccionado en el sitio de Facebook, hacer el código de la página principal (index.html).
- Esta práctica será con código HTML, CSS, JS, bibliotecas o librerías necesarias para que funcione.
- Deberá llevar las siguientes secciones:
- Logo, Slogan, Enlaces, Foto, Ofertas, Descripción, Redes Sociales, Copyright, Acerca de, Mapa, etc.
- Subir el código (con todo lo necesario) a GitHb Classroom.
- Definir las diferentes áreas o segmentos de la página principal.
- Definir los puntos de quiebre para construir el index.html del proyecto individual del alumno.
- Para el ejemplo que está a continuación se eligieron los siguientes puntos:
- 1200 pixeles
- 980 pixeles
A continuación se propone la estructura de las diferentes secciones de la página principal de tamaño Desktop (es sólo una guía, no tiene que ser necesariamente así):
Aquí se muestra el mismo código pero ejecutado en una pantalla del tamaño de una tableta:
Aquí se muestra nuevamente el mismo código pero ejecutado en una pantalla del tamaño de un celular:
Aquí se encuentra el código de una página con código responsivo, el cual puede servir de guía para hacer esta práctica.
Una vez terminada las secciones y los puntos de quiebre construir toda la página principal
Aquí se muestra como ejemplo la página de xumarhu.net a tamaño escritorio:
Aquí se muestra como ejemplo la página de xumarhu.net a tamaño tableta:
Aquí se muestra como ejemplo la página de xumarhu.net a tamaño celular:
PARTE 3: Validación
- La página debe pasar la validación de HTML 5, el validador que se utilizará está en:
- La página debe pasar la validación de CSS, el validador que se utilizará está en:
- Para esta práctica NO se permitirá usar Boostrap, ni ninguna herramienta o biblioteca parecida para hacer el CSS Grid Layout ni tampoco el RWD.
- La página no deberá leer ningún tipo de archivo o biblioteca de Internet (incluyendo fotos, videos, logos, tipos de letras, etc.), todo debe ser local.
Material de apoyo para realizar la práctica:
- Verificar la compatibilidad del navegador con respecto al estándar HTML5 http://html5test.com
- Sitio en línea para hacer un Favicon https://www.favicon.cc/
- Editor de imágenes "GIMP" https://www.gimp.org
- CSS Grid Layout (presentación en PDF y PowerPoint).
- CSS Grid Layout (W3Schools) https://www.w3schools.com/css/css_grid.asp
- CSS Grid Layout (Mozilla Developers) https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout
- Pinta cajas que se ajustan a diferentes tipos de pantallas (codigo HTML+CSS, cajas_responsivas.htm).
- Validador de HTML5 de la W3C https://validator.w3.org/
- Validador de CSS de la W3C https://jigsaw.w3.org/css-validator/
Reporte del alumno (resultados):
- El Profesor revisará que se encuentre el archivo "index.html" en GitHub Classroom y lo ejecutará en el navegador para ver su funcionamiento y diseño.
- Se deben incluir todas los archivos de imágenes, logotipos, etc., que ocupe la página para su correcto funcionamiento.
