Programación Web Unidad 2.

Desarrollo de sitios web

Programa educativo: Semestre:

Telemática Quinto

Asignatura Bloque:

Programación Web Bloque 1

Ciclo escolar: Nombre del docente:

2020-2 Ernesto Vázquez Torres

UNIDAD 2 DESARROLLO DE SITIOS WEB

Competencia de la unidad:
Desarrolla un sitio Web estructurado para su utilización con
bases de datos mediante la aplicación de lenguajes de
programación Web

Aprendizaje(s)/Logros:
• Analizar las necesidades de un caso específico para proponer el diseño de un sitio Web.
• Seleccionar el lenguaje de programación que sea acorde al tipo de sitio Web
seleccionado.
• Utilizar herramientas generadoras de código para crear las páginas que integrarán un
sitio Web.
• Integrar bases de datos al sitio Web para su funcionamiento dinámico.

Pág. 2
Programación Web Unidad 2. Desarrollo de sitios web

Actividad:
Actividad 1. Mapa de navegación
Tema(s): Escala a considerar y fechas de entrega
Planificación.
Arquitectura de la información. 0-100% 27 de julio al 23 de agosto 2020
Navegación.
0-80% 24 al 30 de agosto 2020

0- 70% 31 de agosto al 12 de septiembre

2020

Estrategia de enseñanza-aprendizaje:
Análisis, síntesis y organización de información.

Criterios de evaluación:
• Estructura: 50%
• Organización: 50%

Indicaciones de la actividad:
1. Es importante la elaboración de tu mapa de navegación, éste es una representación
esquemática de la estructura que tendrá tu sitio, en él deberás indicar cuáles son los
principales temas de información y describirás gráficamente la interrelación que existe
entre ellos.

2. Con base en la información obtenida a lo largo de la presente Unidad y en las lecturas del
Libro “No me Hagas Pensar” y el Articulo “La Navegación y los Esquemas de Organización
de la Información”, elabora un mapa de navegación de la propuesta del sitio Web que fue
elaborada en la evidencia de aprendizaje de la Unidad 1.

3. Integra todo en un documento Word, guárdalo con la siguiente nomenclatura:

KPGW_U2_A1_XXYZ, envíalo para su revisión en la herramienta tarea.

El documento debe contar con los siguientes elementos:

a. Carátula.
b. Índice. (Tabla de contenido)
c. Mapa de navegación.
d. Conclusión

4. Espera la retroalimentación de tu docente, si es necesario, realiza las adecuaciones

necesarias.

Pág. 3
Programación Web Unidad 2. Desarrollo de sitios web

5. Consulta los criterios de evaluación antes de hacer tu envío.

Producto por entregar: Mapa de navegación

El archivo que adjuntarás en la plataforma será exclusivamente de Word, si adjuntan otro

formato, será invalidado y se tomará como su primer intento.

Material de apoyo y/o recursos didácticos:

https://www.youtube.com/watch?v=b1JYSqkFwKA&t=12s
https://www.lawebera.es/diseno-web/menu-navegacion.php
https://disenowebakus.net/estructura-de-navegacion-en-un-sitio-web.php
https://www.jhonurbano.com/2013/06/tipos-mapa-de-navegacion-multimedia.html
https://blog.ida.cl/diseno/como-agrupar-contenidos-sueltos-en-mapas-de-navegacion/

Instrumento de evaluación

Pág. 4
Programación Web Unidad 2. Desarrollo de sitios web

Actividad:
Actividad 2. Intercambio de etiquetas
Tema(s): Escala a considerar y fechas de entrega
HTML 0-100% 27 de julio al 23 de agosto 2020
Etiquetas 0-80% 24 al 30 de agosto 2020
Estructuras 0- 70% 31 de agosto al 12 de septiembre
2020
Estrategia de enseñanza-aprendizaje:

Análisis, clasificación y organización de información.

Logros:
• El propósito de esta actividad es que realices un intercambio de etiquetas del lenguaje
HTML en su versión 4 y 5, con la finalidad de poder hacer un recopilatorio que te sirva
para el desarrollo de tu sitio Web.

Criterios de evaluación:

• Participación: 20%
• Tabla de etiquetas: 50%
• Ortografía: 10%
• Bibliografía: 10%
• Conclusión: 10%

Descripción de la actividad/ indicaciones de la actividad:

1. Participa en el Foro de Intercambio de Etiquetas, con 5 etiquetas. (NO DEBEN
REPETIRSE CON LAS DE SUS COMPAÑEROS)
2. Las etiquetas no deben duplicarse, por lo tanto, revisa las fechas de participación.
3. La siguiente tabla es la que utilizarás para agregarla al foro, en ella debes ingresar la
información solicitada de las etiquetas, debes agregarla como imagen, NO SE
ADMITIRÁN ARCHIVOS ADJUNTOS EN EL FORO.

Pág. 5
Programación Web Unidad 2. Desarrollo de sitios web

Etiqueta de inicio Etiqueta de cierre Atributos Descripción

1. Href Convierte texto

<a>
</a> 2. Name normal en
3. target hipertexto

Nota: la etiqueta de ejemplo no podrá ser utilizada

4. Comenta por lo menos las participaciones de dos compañeros y responde a los

cuestionamientos que realicen tu docente en línea o compañeros.
5. Atiende las observaciones de tu docente en línea y respeta las fechas de participación.

Producto por entregar: Tabla de etiquetas en formato de imagen

Tabla de etiquetas en formato de imagen, no se admiten archivos adjuntos.

Instrumento de evaluación

Pág. 6
Programación Web Unidad 2. Desarrollo de sitios web

Actividad:
Actividad 3. Sitio Web estático
Tema(s): Escala a considerar y fechas de entrega
HTML 0-100% 27 de julio al 23 de agosto 2020
Etapas de desarrollo de un sitio 0-80% 24 al 30 de agosto 2020
web 0- 70% 31 de agosto al 12 de septiembre
2020
Estrategia de enseñanza-aprendizaje:

Elaboración de sitio web estático y su respectiva documentación

Logros:
• Construirás tu sitio Web de manera estática, es decir sin interactividad con bases de
datos o lenguajes de servidor, para esto pondrás en práctica los conocimientos
adquiridos a lo largo de estas 2 Unidades y retomarás tu evidencia de aprendizaje
de la Unidad 1 en conjunto con el mapa de navegación elaborado en la Unidad 2.

Criterios de evaluación:

• Estructura: 20%
• Contenido: 80%

Descripción de la actividad/ indicaciones de la actividad:

1. Toma como guía el tema Fases del desarrollo Web de la presente Unidad y en conjunto
con tu evidencia de la Unidad 1 da inicio a tu proyecto siguiendo las 7 fases
mencionadas.
2. Elabora la documentación y con ayuda de tu Mapa de navegación, y tus etiquetas
intercambiadas inicia la elaboración de tu sitio Web. Esta será la primera propuesta.
3. Tu Sitio Web, deberá de contemplar una estructura similar a la de imagen, haciendo
coincidir el mapa de navegación con su contenido:

Pág. 7
Programación Web Unidad 2. Desarrollo de sitios web

4. Elabora las pruebas de navegación y documéntalas.

5. Revisa tu Sitio Web para mejorar su calidad.
6. Una vez terminado, guárdalo en un directorio que nombrarás KPGW_U2_A3_XXYZ (El
directorio deberá contener a su vez 2 directorios, el primero con el sitio Web y el
segundo con la documentación).

La documentación debe contar con los siguientes elementos:

a. Carátula.
b. Índice. (Tabla de contenido)
c. Objetivo del sitio.
d. Mapa de navegación
e. Documentación.
f. Conclusión.
g. Referencias.

7. Sube tu archivo a la sección Tareas para recibir retroalimentación, consulta los criterios
de evaluación, antes de adjuntar tu actividad.

Pág. 8
Programación Web Unidad 2. Desarrollo de sitios web

NOTA: Recuerda que el número de páginas que tendrá tu sitio será las que colocaste
en el mapa de navegación.

Producto por entregar: Carpeta de archivos

Debes adjuntar 1 carpeta con 2 subcarpetas:
1.- Sitio.
2.- Documentación.

No se aceptarán sitios elaborados en gestores de contenido.

Material de apoyo:
Instalar Visual studio code. https://www.youtube.com/watch?v=PYxHRYSt-Uo&t=3s
Instalar xampp https://www.youtube.com/watch?v=7ZJE88amB6M&t=107s
Mapa de navegación https://www.youtube.com/watch?v=b1JYSqkFwKA
Diseño de página de inicio encabezado
https://www.youtube.com/watch?v=dlUnTlEpp1E&t=1282s
Diseño de página de inicio body https://www.youtube.com/watch?v=Qv9RLovhHzI
Diseño de página de inicio footer https://www.youtube.com/watch?v=sz6jHEYwwrA
https://www.w3schools.com/html/
https://www.w3schools.com/bootstrap4/default.asp
https://getbootstrap.com/
https://www.w3schools.com/css/default.asp

Instrumento de evaluación

Pág. 9
Programación Web Unidad 2. Desarrollo de sitios web

Actividad:
Actividad 4. Conexión a base de datos
Tema(s): Escala a considerar y fechas de entrega
HTML 0-100% 27 de julio al 23 de agosto 2020
Mysql 0-80% 24 al 30 de agosto 2020
Base de datos 0- 70% 31 de agosto al 12 de septiembre
2020
Estrategia de enseñanza-aprendizaje:

Análisis, clasificación y organización de información.

Logros:
• Realizar la conexión del sitio web con una base de datos mysql.

Criterios de evaluación:

• Tabla con registros: 10%

• Funciones con base de datos: 60%
• Código comentado: 20%
• Presentación del sitio web: 10%

Descripción de la actividad/ indicaciones de la actividad:

Para dar inicio a esta actividad, es necesario que obtengas algún lugar en donde alojar tus
páginas y Scripts, así como la base de datos que emplearás, existe un gran número de sitios de
hosting “hospedaje” gratuitos, en la Unidad 1 se mencionaron algunos. Considera que tu servidor
de alojamiento debe de soportar el lenguaje de programación PHP y la base de datos MySQL.

1. Elabora tu base de datos que emplearas para el ejemplo. (No se aceptarán ejemplos
que sean iguales a los del material de apoyo)
2. Tu base de datos debe contener por lo menos una tabla y 10 registros.
3. Programa tu archivo de conexión a la base de datos y comenta el código explicando
cada función que utilizaste.
4. Agrega a tu proyecto secciones en donde se realicen las funciones básicas de la
interactividad con las páginas web y una base de datos, las páginas deberán de cumplir
con las siguientes características.
a. Inserción de registros, la página deberá tener por nombre inserta.php, esta
tendrá como función el insertar registros en la tabla de la base de datos con
ayuda de un formulario.
b. Borrado de registros, la página deberá tener por nombre borrado.php y
realizará la tarea de borrado de registros.
c. Consulta de registros, la página deberá tener por nombre consulta.php y
realizará su consulta haciendo uso del condicional do while en conjunto con el

Pág. 10
Programación Web Unidad 2. Desarrollo de sitios web

lenguaje SQL. (Esta página debe de mostrar en su consulta los 10 registros o

más que contenga tu base de datos.)
5. Cada una de las páginas programadas deberá de tener el código comentado haciendo
explicación de las funciones utilizadas.
6. Sube tus páginas al sitio de alojamiento y comprueba su navegación.
7. Mejora la navegación y la programación en caso de ser necesario.
8. En un documento de texto coloca los códigos y las explicaciones que elaboraste en el
sitio estático, además la dirección url (dirección electrónica) de tu sitio para que tu
Docente en línea pueda observar el comportamiento de tus páginas desde Internet.
9. Ordena tus páginas dentro de un directorio.
10. Guarda este directorio con la nomenclatura KPGW_U2_A4_XXYZ. y sube tu archivo a
la sección Tareas para recibir retroalimentación.

La documentación debe contar con los siguientes elementos:

a. Carátula.
b. Índice. (Tabla de contenido)
c. Objetivo del sitio.
d. Mapa de navegación (Actualizado)
e. Documentación.
f. Conclusión.
g. Referencias.

11. Atiende los comentarios de tu docente en línea y realiza los cambios que sean
necesarios.

Producto por entregar:

1. Página web con conexión a base de datos.

2. Documentación en Word

La página será revisada exclusivamente en internet, debe estar funcionando

correctamente.
La documentación debe ser entregada en un archivo de Word.

Material de apoyo:
Conexión a base de datos https://www.youtube.com/watch?v=G2-6cn7xnwg&t=11s
Visualizar registros https://www.youtube.com/watch?v=EJrhrFU2PHM&t=33s

Pág. 11
Programación Web Unidad 2. Desarrollo de sitios web

Instrumento de evaluación

Pág. 12
Programación Web Unidad 2. Desarrollo de sitios web

Actividad:
Evidencia de aprendizaje. Sitio Web Dinámico
Tema(s): Escala a considerar y fechas de entrega
HTML 0-100% 27 de julio al 23 de agosto 2020
Mysql 0-80% 24 al 30 de agosto 2020
Base de datos 0- 70% 31 de agosto al 12 de septiembre
Estructura. 2020
Estrategia de enseñanza-aprendizaje:

Análisis, clasificación y organización de información.

Logros:
• Realizar la conexión del sitio web con una base de datos Mysql.

Criterios de evaluación:

• Video: 5%
• Audio: 5%
• Efectos: 5%
• Navegación: 5%
• Vínculos: 5%
• Correo: 5%
• Funciones: 60%
• Documentación: 10%

Descripción de la actividad/ indicaciones de la actividad:

1. Utilizarás el sitio Web que elaboraste de manera estática e identificarás las secciones
en las que se puedan hacer mejoras mediante el uso de interactividad.
Tu página debe contar con:
o Vídeo.
o Audio.
o Efectos.
o Opción para enviar correo electrónico.
2. Debes hacer uso de una base de datos con Mysql y lenguaje de programación. El
proyecto debe cumplir con las siguientes funciones:
a. Insertar registros. (10 registros mínimo)
b. Borrar registros.
c. Consultar registros insertados. (10 registros mínimo)

3. Tu proyecto debe tener integrado los siguientes elementos funcionando correctamente

en la página publicada en internet:
a. 2 secciones diferentes para insertar información.
b. 2 secciones diferentes para consultar información.

Pág. 13
Programación Web Unidad 2. Desarrollo de sitios web

c. 2 secciones diferentes para borrar información.

4. Debes complementar la documentación con las modificaciones realizadas.
La documentación debe contar con los siguientes elementos:
a. Carátula.
b. Índice. (Tabla de contenido)
c. Objetivo del sitio.
d. Mapa de navegación. (Actualizado)
e. Documentación.
f. Conclusión.
g. Referencias.

5. Guarda este directorio con la nomenclatura KPGW_U2_EA_XXYZ. y sube tu archivo a

la sección Tareas para recibir retroalimentación.
6. Atiende los comentarios de retroalimentación y realiza los cambios que sean
necesarios.

Producto por entregar:

1. Página web con conexión a base de datos.

2. Documentación en Word

Material de apoyo:
05_ Manual de instalación de MySQL (2003)
06_Guía de referencia de la Sintaxis de MySQL 07_Funciones y operadores de MySQL, de
la biblia de MySQL de Gilfillan (2003).
Páginas de apoyo:
http://librosweb.es/libros/
http://php.net/manual/es/ref.pdo-mysql.php

Pág. 14
Programación Web Unidad 2. Desarrollo de sitios web

Instrumento de evaluación

Pág. 15