SÍLABO

Diseño web (100000C14P)

2022 - Ciclo 2 Agosto

1. DATOS GENERALES

1.1. Carrera: Diseño Digital Publicitario

Ingeniería de Diseño Gráfico

1.2. Créditos: 3

1.3. Enseñanza de curso: Presencial (adaptado a la educación no presencial)

1.4. Horas semanales: 4

2. FUNDAMENTACIÓN
La creación de un Proyecto Web implica varias etapas, herramientas y técnicas que el profesional debe conocer,
para planificar y desarrollar un proyecto web exitoso. Este curso brindará las habilidades para implementar
sitios web administrables que puedan ser visualizados desde cualquier dispositivo manteniendo la navegabilidad
y experiencia de usuario. Esto es importante hoy en día donde la accesibilidad de contenido es multiformato. En
ese sentido este curso potencia las habilidades en la construcción de soluciones utilizando tecnologías digitales
necesarias para comunicar al público objetivo de manera efectiva. Este curso cobra importancia ya que apoya
una transformación digital de las empresas en la actualidad.

3. SUMILLA

Este curso es de naturaleza teórico-práctica. El estudiante aprende a implementar un sitio web responsive
utilizando el frameworks CSS para acelerar el proceso de desarrollo. Asimismo, el estudiante implementa
sistemas de gestión de contenido usando WordPress teniendo en cuenta la usabilidad y experiencia del usuario.

4. LOGRO GENERAL DE APRENDIZAJE

Al finalizar el curso, el estudiante construye un sitio web adaptable a diversos dispositivos haciendo uso de los
Frameworks CSS y de Wordpress como administrador de contenidos.

5. UNIDADES Y LOGROS ESPECÍFICOS DE APRENDIZAJE

Unidad de aprendizaje 1: Semana 1,2,3,4 y 5

Implementación de Webs Responsive.

Logro específico de aprendizaje:

Al finalizar la unidad, el estudiante desarrolla un proyecto web adaptable a diversos dispositivos mediante el uso del
lenguaje de programación HTML5.

Temario:
Planificación y Diseño de un Sitio Web (Usabilidad y Diseño centrado en el usuario) Diagramación con
elementos HTML5 (Semántica, etiquetas y selectores)
Técnicas de Diagramación: Inline-block VS FlexBox
Compatibilidad con Navegadores
Media Queries
Avance de proyecto final 1: Desarrollo de un proyecto Web con etiquetas HTML5 compatibles con navegadores
y además responsive.

Unidad de aprendizaje 2: Semana 6,7,8 y 9

Frameworks CSS.

Logro específico de aprendizaje:

Al finalizar la unidad, el estudiante desarrolla un proyecto web adaptable a diversos dispositivos mediante el uso del
lenguaje de programación framework CSS3.
 Temario:
Definición e inserción de propiedades CSS3 Propiedades de las etiquetas en CSS3 Frameworks CSS - Bootstrap
Interactividad: JavaScript y jQuery Sintaxis y sentencias JavaScript y Ejercicios con código javascript
Arquitectura de un Sitio Web
Avance de proyecto final 2: Creación de un sitio Web con Bootstrap

Unidad de aprendizaje 3: Semana 10,11,12 y 13

Implementación de un CMS con WordPress.

Logro específico de aprendizaje:

Al finalizar la unidad, el estudiante implementa una web administrable empleando WordPress como CMS.

Temario:
Instalación y configuración básica de WordPress.
Elementos de WordPress: Categorías, Entradas, Páginas, Comentarios, Imágenes
Implementando funcionalidad Avanzada con Plugins
Avance de proyecto final 3: Creación de un sitio Web con WordPress

Unidad de aprendizaje 4: Semana 14,15,16,17 y 18

Publicación y Consideraciones de Seguridad.

Logro específico de aprendizaje:

Al finalizar la unidad, el estudiante implementa un sistema de gestión de contenidos teniendo en cuenta las
consideraciones de seguridad requeridas.

Temario:
WordPress: Administración de usuarios y Consideraciones de Seguridad. Integración con Plugins con otros CMS
(Sistema de gestión de contenidos). Publicación.
Plugin YOAST SEO
Checklist de todos los ítems con los que debe contar su proyecto web.
Avance del proyecto final
ENTREGA DE PROYECTO FINAL: Desarrollo de un Sitio Web con WordPress. (Justificación y Mapa de sitio)

6. METODOLOGÍA
El docente involucra al estudiante en el proceso de enseñanza/aprendizaje que permite alcanzar los objetivos
fijados y garantizar el alcance de las competencias y las capacidades planteadas. Los principios pedagógicos de
base serán el aprendizaje colaborativo que se lleva a cabo a través de exposiciones abiertas al debate, diálogo y
puesta en común de conocimientos y opiniones, así como una dinámica grupal sobre proyectos de desarrollo
web; además el aprendizaje para la era digital para el desarrollo del curso y también el aprendizaje autónomo
ya que se facilitará al estudiante material para el seguimiento de la asignatura en su parte teórica.

El curso se desarrolla a través de la plataforma Canvas, que se usa como principal medio para el desarrollo de
las sesiones sincrónicas que son complementadas con recursos y materiales que se publican a lo largo del curso
para fomentar el desarrollo de aprendizajes significativos. Para fomentar la aplicación de los contenidos, se
desarrollarán ejercicios prácticos a lo largo del curso a través de diferentes herramientas propuestas por el
docente. Por otro lado, el estudiante contará con un espacio de foro de consultas para resolver las dudas
académicas a lo largo del curso. Finalmente, las actividades de evaluación se desarrollarán de acuerdo a lo
señalado en el sílabo a través de la plataforma Canvas.

7. SISTEMA DE EVALUACIÓN
El cálculo del promedio final se hará de la siguiente manera:

(20%)APF1 + (20%)APF2 + (20%)APF3 + (40%)PROY

Donde:

Tipo Descripción Semana Observación

APF1 AVANCE DE PROYECTO FINAL 1 5 Trabajo grupal

APF2 AVANCE DE PROYECTO FINAL 2 9 Trabajo grupal

APF3 AVANCE DE PROYECTO FINAL 3 13 Trabajo grupal

PROY PROYECTO FINAL 18 Trabajo grupal

Indicaciones sobre Fórmulas de Evaluación:

1. La nota mínima aprobatoria final es de 12.

2. En este curso, no aplica examen rezagado.
3. En este curso, ninguna nota se reemplaza.
4. NO hay postergaciones para la entrega de los avances.
 5. NO hay entrega rezagada del proyecto final.

8. FUENTES DE INFORMACIÓN
Bibliografía Base:
Nixon. (2019). APRENDER PHP, MYSQL Y JAVASCRIPT 5ED. ALFAOMEGA.
Bibliografía Complementaria:
Libby, A., Gupta, G., y Talesra, A. Responsive Web Design with HTML5 and CSS3.
Tutorial de Bootstrap.
Jonathan Fielding. Web Design with HTML5.
Williams, A. (2018). WordPress for Beginners 2018: Subtitle What’s this? A Visual Step-by-Step Guide
to Mastering Wordpress". Apress.
Celaya Luna, Ainoa - Autor. Creación de páginas web: HTML 5. Editorial ICB.
https://elibro.net/es/lc/utpbiblio/titulos/56045
Romero Gómez, Antonio. Computación dinámica II: Excel 2013, HTML, Dreamweaver. Grupo Editorial
Éxodo.
Ramón M. Mujal - Autor. Cálculo de líneas y redes eléctricas. Universitat Politècnica de Catalunya.
https://elibro.net/es/lc/utpbiblio/titulos/52192
Orós Cabello, Juan Carlos. Diseño de páginas Web con XHTML, JavaScript y CSS. RA-MA Editorial.
Recio García, Juan Antonio. HTML5, CSS3 y JQuery: curso práctico. RA-MA Editorial.

9. COMPETENCIAS

Carrera Competencias específicas

Diseño Digital Publicitario Web e Interactivo

Ingeniería de Diseño Gráfico Proyectos de la Industria Gráfica

Gráfica, Web y Multimedia

10. CRONOGRAMA DE ACTIVIDADES

Actividades y
Unidad de aprendizaje Semana Sesión Tema
evaluaciones

Planificación y Diseño de un Sitio Web

Los estudiantes
(Usabilidad y Diseño centrado en el
desarrollan junto al
usuario) Diagramación con elementos
profesor, un sitio
1 1 HTML5 (Semántica, etiquetas y
web grupal con las
selectores)
nuevas etiquetas
HTML5.

Técnicas de Diagramación: Inline-block

Los Estudiantes
VS FlexBox
aplican un modelo
de caja flexbox
2 2 para una
diagramación más
ágil para un sitio
web.

Compatibilidad con Navegadores

Los estudiantes
verifican nuevas
etiquetas y
diversas
Unidad 1 propiedades CSS en
Implementación de Webs navegadores más
Responsive 3 3
comunes y en
versiones antiguas
y la
implementación de
ajustes para
compatibilidad

Media Queries
Los estudiantes
 adecuan un
proyecto web para
4 4 diversas
resoluciones de
pantalla haciendo
la comparativa con
proyectos web.

Avance de proyecto final 1: Desarrollo de

AVANCE DE
un proyecto Web con etiquetas HTML5
5 5 PROYECTO FINAL 1
compatibles con navegadores y además
responsive.

Definición e inserción de propiedades

El estudiante
CSS3 Propiedades de las etiquetas en
realiza una
CSS3 Frameworks CSS - Bootstrap
Instalación y
configuración de
Bootstrap para un
6 6
nuevo proyecto
web, así como la
implementación
sobre este
Framework.

Interactividad: JavaScript y jQuery

Los estudiantes
Sintaxis y sentencias JavaScript y
aplican
Ejercicios con código javascript
Unidad 2 7 7 interactividad con
Frameworks CSS javascript mediante
jQuery y Bootstrap.

Arquitectura de un Sitio Web

Los estudiantes
proponen una
arquitectura de
8 8 sitio web mediante
una exposición
grupal.

Avance de proyecto final 2: Creación de

AVANCE DE
9 9 un sitio Web con Bootstrap
PROYECTO FINAL 2

Instalación y configuración básica de

Los estudiantes
WordPress.
practican el
proceso de
10 10 Instalación y
configuración de
WordPress desde
cero.

Elementos de WordPress: Categorías,

Los estudiantes
Entradas, Páginas, Comentarios,
crean contenidos
Imágenes
para WordPress
Unidad 3 utilizando:
Implementación de un 11 11
Categorías,
CMS con WordPress Entradas, Páginas,
Comentarios,
Imágenes.

Implementando funcionalidad Avanzada

Los estudiantes
con Plugins
12 12 revisan diferentes
Plugins.

Avance de proyecto final 3: Creación de

AVANCE DE
 13 13 un sitio Web con WordPress PROYECTO FINAL 3

WordPress: Administración de usuarios y

Los estudiantes
Consideraciones de Seguridad.
realizan una
Integración con Plugins con otros CMS
Exposición de
(Sistema de gestión de contenidos).
aspectos de
Publicación.
seguridad en un
sitio web, y la
publicación.
14 14
Asimismo,
desarrollan la
creación de
usuarios de
acuerdo al
escenario de una
empresa.

Plugin YOAST SEO

Los estudiantes
instalan plugins
Unidad 4 15 15 para el
Publicación y posicionamiento en
Consideraciones de buscadores.
Seguridad

Checklist de todos los ítems con los que

Los estudiantes
debe contar su proyecto web.
realizan una
16 16 presentación de
avance de su
proyecto web.

Avance del proyecto final

El docente da una
retroalimentación
17 17 acerca de los
avances del trabajo
final.

ENTREGA DE PROYECTO FINAL:

PROYECTO FINAL
18 18 Desarrollo de un Sitio Web con
WordPress. (Justificación y Mapa de sitio)