Actividad Individual No.

2
Creando un Sitio Web con HTML5 y CSS3

Elmer Jurado Soto

Código 76320287

Director
Mauricio Perdomo Vargas
Diseño de sitios web.
Grupo 301122_44

Universidad Nacional Abierta y a Distancia “UNAD”

Escuela de Ciencias Básicas, Tecnología e Ingeniería
Ingeniería de Sistemas
Popayán, 15 de abril de 2016
 Contenido

1. Introducción

2. Objetivos.

3. Link

4. Conclusiones

5. Bibliografía
 1. Introducción.

En esta etapa intermedia se inicia el proceso de creación de una página web,

aprovechando lo estudiado en HMTL 5 y CSS; de esta manera se da aplicación a las

diferentes secciones que se utilizando en la nueva versión de html 5, como son la

cabecera, secciones, aside, y footer; dejando a un lado antiguo tipo de divisiones en

versiones anteriores.

Por otra parte se requiere hacer uso de CSS, a través de un archivo en el cual se pueda

organizar todo el contenido en cuanto a su forma, colores, etc. Que mejoren la calidad de la

información.

Todo esto se aplica en el tema provisto por el Tutor; una fundación animalista llamada

“patitas de corazón”, y se utilizan además las herramientas instaladas en la primera parte

del curso como son XAMPP y un editor especializado Sublime (también se hizo uso en

algunos casos el editor BRACKETS que tiene características similares y otras bondades).
 2. Objetivos.

Organizar el sitio web en una carpeta raíz, para el caso en particular dentro del

servidor XAMPP, (c:/xampp/htdocs/patitas), donde se incluirían los archivos de cada hoja

y carpetas necesarias; como img (imágenes), css (para archivos de estilo), para luego

visualizarlo en Localhost, y verificar su funcionamiento.

Crear las paginas básicas y necesarias para mostrar el contenido de la fundación,

como son: index.hmtl, Acerca de, contáctenos, galería de fotos, donaciones, apadrinar.

En la página principal y algunas otras se mantiene se presenta visualizar el esquema

sugerido por HTML 5, en el cual se observan diferenciadamente el encabezado, nav

(menú), sección principal (section), e información adicional en Aside.

Subir el contenido completo a un gestor de contenido o servidor.

 3. Links del trabajo, “PATITAS DE CORAZÓN”

https://github.com/elmerjs/site.git
http://elmerjs.github.io/
 4. Conclusiones.

 Se logra comprender la filosofía de la nueva versión de HTML 5, donde la

información es más organizada y amigable para el usuario.

 El uso de hoja de estilos, mejora la presentación y también la organización de las

páginas construidas, reutilizando el código según las necesidades, además es

importante anotar que se pueden hacer diferentes hojas de estilo para mantener en

orden los diferentes requerimientos en este caso se separaron los estilos para

necesidades específicas de cada tema.

 Se aprovechó las nuevas utilidades de HMTL 5 y CSS para hacer un sitio

“response” con la posibilidad de ser visto en diferentes tipos de dispositivos (PC,

portátil, Tablet, móvil).

 5. Bibliografía

Diseños de Sitios Web Universidad UNAD Colombia, (2014-10-11). Videotutorial

no. 3 und1 - HTML5: head y librerías de apoyo; parte 1. Recuperado de

https://www.youtube.com/watch?v=EbGwzYjYN2M; Parte 2:

https://www.youtube.com/watch?v=0hnyHtvtcCM

Diseños de Sitios Web Universidad UNAD Colombia, (2014-10-12). Videotutorial

no. 4 und1 - html5: header, nav, ul, li con css. Recuperado de

https://www.youtube.com/watch?v=3raTq4ebDdQ

Diseños de Sitios Web Universidad UNAD Colombia, (2014-10-17). videotutorial

no. 5 und1 - html5: section, aside, footer con css. Recuperado de

https://www.youtube.com/watch?v=-i4OHNoW8ms