Materia: Páginas Web

Docente: Ing. Kevin Omar Arroyo Montaño

Módulo: I/2023

PCV
 1. DATOS REFERENCIALES
➢ MATERIA: PÁGINAS WEB
➢ CÓDIGO: PWE
➢ PRE REQUISITOS: PE1
➢ CRÉDITOS: 4

2. JUSTIFICACIÓN DE LA MATERIA1
La materia de Páginas Web radica en el hecho de que la web es una de las herramientas más
importantes y ampliamente utilizadas en la actualidad para la comunicación, el comercio y la
educación. La creación de páginas web se ha convertido en una habilidad esencial en muchos
campos y profesiones, desde el diseño gráfico y la programación hasta el marketing y la gestión
empresarial.

Además, el acceso a la web se ha vuelto cada vez más fácil y asequible en todo el mundo, lo que
significa que más personas que nunca tienen la capacidad de crear y publicar contenido en línea.
La comprensión de cómo funcionan las páginas web y cómo se pueden diseñar y desarrollar es
fundamental para aprovechar al máximo esta herramienta poderosa.

En la materia de Páginas Web, los estudiantes aprenderán a crear sitios web atractivos y funcionales
utilizando lenguajes de programación como HTML, CSS y JavaScript. También aprenderán sobre
las mejores prácticas de diseño web, incluyendo la accesibilidad y la optimización para motores de
búsqueda. Estas habilidades son cada vez más valiosas en el mercado laboral actual y pueden ser
utilizadas en una amplia gama de contextos, desde el diseño de sitios web personales hasta el
desarrollo de sitios web comerciales y corporativos complejos.

En resumen, la materia de Páginas Web es importante porque permite a los estudiantes desarrollar
habilidades esenciales para la comunicación y el comercio en línea, y puede prepararlos para una
amplia gama de oportunidades de carrera en el mercado actual.

1
La justificación de la materia, se define como la descripción del por qué de la materia y para qué les será de
utilidad a los estudiantes con el desarrollo de la misma.
 3. OBJETIVOS DE LA MATERIA

•
Comprender los fundamentos de la creación y el diseño de páginas web utilizando
lenguajes de programación como HTML, CSS y JavaScript.
• Desarrollar habilidades prácticas en la creación y edición de páginas web atractivas y
funcionales.
• Aprender las mejores prácticas de diseño web, incluyendo la accesibilidad y la
optimización para motores de búsqueda.
• Aprender a trabajar con herramientas y tecnologías relevantes para el diseño y desarrollo
de páginas web, como editores de código, frameworks y gestores de contenido.
• Desarrollar habilidades para resolver problemas y tomar decisiones efectivas al crear y
mantener páginas web.
• Desarrollar habilidades para trabajar en equipo y colaborar en proyectos de diseño y
desarrollo de páginas web.
4. FORMULACIÓN DE LA COMPETENCIA DE APRENDIZAJE

Al completar la materia de Páginas Web, los estudiantes estarán capacitados para diseñar,
desarrollar y mantener páginas web atractivas y funcionales, utilizando lenguajes de programación
como HTML, CSS y JavaScript, y aplicando las mejores prácticas de diseño web y accesibilidad.
Los estudiantes también estarán capacitados para trabajar en equipo y colaborar en proyectos de
diseño y desarrollo de páginas web, y para resolver problemas y tomar decisiones efectivas en el
proceso.

5. PLANTEAMIENTO DEL RETO GENÉRICO 2

El reto genérico de la materia será diseñar y desarrollar un sitio web para una organización sin fines
de lucro que se dedique a una causa social o ambiental. Los estudiantes trabajarán en equipos para
crear un sitio web que presente la misión y los objetivos de la organización, así como información
sobre las actividades y los proyectos en los que se encuentra trabajando.

El sitio web debe ser atractivo y fácil de usar, con un diseño que refleje la identidad visual de la
organización y que sea optimizado para dispositivos móviles. Además, se deben incluir
funcionalidades para la donación en línea, con opciones de pago seguro y enlaces a las redes
sociales de la organización para aumentar su visibilidad.

2
El Reto Genérico, se plantea respondiendo a la competencia a lograr, explorando los contenidos de la materia
aplicando a realidades concretas.
 El objetivo del reto es que los estudiantes apliquen los conocimientos y habilidades adquiridos en
la materia para diseñar y desarrollar un sitio web completo para una organización sin fines de lucro,
y que desarrollen habilidades para trabajar en equipo y resolver problemas de manera efectiva en
el proceso. También se espera que los estudiantes se sensibilicen sobre el impacto social y
ambiental de las organizaciones sin fines de lucro y su papel en la construcción de un mundo más
justo y sostenible.

6. UNIDADES DE APRENDIZAJE Y CONTENIDOS TEMÁTICOS:

UNIDADES DE
TEMAS SUBTEMAS
APRENDIZAJE

Unidad 1 • Introducción a los sistemas de control

SISTEMA DE CONTROL DE de versiones
VERSIONES • Ventajas y desventajas del control de
versiones
• Git y Github: conceptos básicos y
herramientas
• Creación de repositorios, clonación,
ramas y fusiones
• Resolución de conflictos en ramas y
fusiones

Unidad 2 LENGUAJE HTML • Introducción a HTML

• Estructura básica de un documento
HTML
• Etiquetas HTML para el contenido
(títulos, párrafos, listas, imágenes)
• Etiquetas HTML para la estructura
(encabezados, secciones, divs)

Unidad 3
HOJAS DE ESTILO • Introducción a CSS
• Sintaxis básica de CSS
• Selección de elementos y clases en
CSS
• Propiedades CSS para el diseño
visual (color, fuente, tamaño,
margen, padding)
Unidad 4 DISEÑO WEB RESPONSIVO • Introducción al diseño web
responsivo
• Media queries en CSS
• Diseño responsivo con frameworks
como Bootstrap
• Pruebas de diseño responsivo

Unidad 5 LENGUAJES Y • Introducción a JavaScript

HERRAMIENTAS SCRIPT • Sintaxis básica de JavaScript
• Variables, tipos de datos y
operadores en JavaScript
• Funciones en JavaScript

Unidad 6 PHP BASICO • Introducción a PHP

• Sintaxis básica de PHP
• Variables, tipos de datos y
operadores en PHP
• Estructuras de control de flujo en
PHP

Unidad 7 HERRAMIENTAS LOWCODE • Introducción a las herramientas

PARA EL DISEÑO DE Lowcode
PÁGINAS WEB • Ventajas y desventajas de las
herramientas Lowcode para el diseño
de páginas web
• Ejemplos de herramientas Lowcode
para el diseño de páginas web
(Mobirise, Wix, Webflow)
• Diseño de páginas web con Mobirise
(instalación, configuración, uso de
bloques y plantillas)

Unidad 8 ACCESO A BASES DE • Introducción a mysqli

DATOS CON MYSQLI • Conexión a bases de datos con
mysqli
• Consultas básicas con mysqli
• Manejo de errores y excepciones en
mysqli
 7. ACTIVIDADES DE APRENDIZAJE

SEMANA TEMAS A ACTIVIDADES TEMAS

DESARROLLAR FORMATIVAS PARA PARA EL
LA SEMANA FORO

1 Tema 1: Git y GitHub - Lectura de materiales y tutoriales sobre Git y - Experiencias y

GitHub- Instalación y configuración de Git y dificultades en la
GitHub- Creación de una cuenta en GitHub y instalación y
configuración de un repositorio- Realización de configuración de
un primer commit y push Git y GitHub-
Compartir el
enlace del
repositorio creado

2 Tema 2: HTML básico - Lectura de materiales y tutoriales sobre - Compartir el

HTML- Creación de un documento HTML código del
básico- Uso de etiquetas HTML para el documento
contenido y la estructura de la página- HTML creado-
Validación del documento HTML con Discusión sobre
herramientas como W3C Validator las buenas
prácticas en la
estructuración de
documentos
HTML

3 Tema 3: CSS básico - Lectura de materiales y tutoriales sobre CSS- - Compartir el

Aplicación de estilos CSS básicos a un código del
documento HTML- Experimentación con documento
selección de elementos y clases en CSS- HTML y CSS
Validación del estilo CSS con herramientas creado- Discusión
como W3C Validator sobre la
separación de
responsabilidades
entre HTML y
CSS

4 Tema 4: Diseño web - Lectura de materiales y tutoriales sobre diseño - Compartir el

responsivo web responsivo- Uso de media queries en CSS código del
para adaptar el diseño a diferentes dispositivos- documento
Experimentación con frameworks de diseño web HTML y CSS
responsivo como Bootstrap- Pruebas de diseño creado- Discusión
responsivo con herramientas como sobre las mejores
BrowserStack prácticas en el
diseño web
responsivo
5 Tema 5: JavaScript - Lectura de materiales y tutoriales sobre - Compartir el
básico JavaScript- Experimentación con variables, tipos código del
de datos y operadores en JavaScript- Creación documento
de funciones básicas en JavaScript- Integración HTML, CSS y
de JavaScript en un documento HTML JavaScript
creado- Discusión
sobre las
aplicaciones
prácticas de
JavaScript en el
diseño web

6 Tema 6: PHP básico - Lectura de materiales y tutoriales sobre PHP- - Compartir el

Experimentación con variables, tipos de datos y código de la
estructuras de control de flujo en PHP- Creación página web básica
de una página web básica con PHP- Validación creada con PHP-
del código PHP con herramientas como PHP Discusión sobre
Code Sniffer las aplicaciones
prácticas de PHP
en el desarrollo
web

7 Tema 7: Herramientas - Lectura de materiales y tutoriales sobre la - Compartir los

Low-Code para el herramienta Mobirise- Uso de Mobirise para el diseños creados
diseño de páginas web diseño de páginas web- Personalización y en Mobirise-
edición de plantillas en Mobirise Discusión sobre
las ventajas y
desventajas del
uso de
herramientas
Low-Code para el
diseño de páginas
web

8 Tema 8: MySQLi - Lectura de materiales y tutoriales sobre - Compartir el

MySQLi- Creación de una base de datos y tablas código de las
con MySQL- Uso de la extensión MySQLi de consultas y
PHP para interactuar con la base de datos- operaciones
Creación de consultas básicas con MySQLi realizadas en
MySQL-
Discusión sobre
las mejores
prácticas en la
gestión de bases
de datos
 8. ESTRATEGIAS METODOLÓGICAS DE ENSEÑANZA Y APRENDIZAJE 3:
• Clases magistrales: para introducir los conceptos teóricos y fundamentales de cada tema.
• Estudio de casos: para la aplicación de los conceptos teóricos en situaciones reales y para el
desarrollo del pensamiento crítico y la resolución de problemas.
• Trabajo en equipo: para fomentar la colaboración y el intercambio de conocimientos y habilidades
entre los estudiantes.
• Prácticas de laboratorio: para aplicar los conceptos teóricos y desarrollar habilidades prácticas en
el uso de las herramientas de programación.
9. MATERIALES EDUCATIVOS4 :
• Presentaciones multimedia.
• Materiales didácticos digitales.
• Libros y artículos relacionados con los temas del curso.
• Ejemplos de código fuente.

10. PARÁMETROS DE EVALUACIÓN DE APRENDIZAJES

Los parámetros de evaluación de aprendizajes que se aplicará en el presente módulo son:

- Examen Primer Parcial 25 pts.

- Examen final 25 pts.

- Trabajos prácticos 10 pts.

- Asistencia 20 pts.

- Demostración de competencias 20 pts.

_____________

TOTAL 100 pts.

3
Las estrategias metodológicas de enseñanza y aprendizaje, se refieren a los modos ordenados en que el docente
llevará al proceso enseñanza y aprendizaje. Estas estrategias pueden ser: estudio de casos, lluvia de ideas, mapas
conceptuales, mesas redondas, aprendizajes basados en problemas, etc.

4
Los materiales educativos, sirven de apoyo en el desarrollo del proceso enseñanza-aprendizaje. El docente debe
tener claro qué va a enseñar y cómo aprenderán los participantes del modo más pertinente. Los materiales
educativos pueden ser: materiales auditivos, materiales de imagen fija, materiales gráficos, materiales impresos,
etc.
 11. BIBLIOGRAFÍA5

• Duckett, J. (2014). HTML y CSS: Diseño y creación de páginas web. Anaya Multimedia.
• Welling, L., & Thomson, L. (2017). PHP y MySQL: Tecnología para el desarrollo de aplicaciones
web. Anaya Multimedia.
• Balcells, J. (2019). Diseño de páginas web con WordPress: Técnicas y herramientas para crear
temas profesionales. Anaya Multimedia.
• Schmitt, C. (2019). Responsive web design con HTML5 y CSS3. Anaya Multimedia.
• Freeman, E., & Robson, E. (2016). Use a cabeça! Programação em HTML5. Alta Books.
• Horton, W. (2012). Diseño de sitios web. Anaya Multimedia.
• Ullman, L. (2014). PHP avanzado: Programación orientada a objetos, conexión con bases de datos
y seguridad. Anaya Multimedia.
• Kehoe, B. (2019). Modern CSS: Master the key concepts of CSS for modern web development.
Packt Publishing.
• Chacon, S., & Straub, B. (2014). Pro Git. Apress.
• Meyer, E. (2014). CSS3: La guía definitiva. Anaya Multimedia.
• Fowell, J. (2015). Responsive web design con Bootstrap. Anaya Multimedia.

5
Registrar la bibliografía de acuerdo al estilo APA