Portal web con recursos didácticos digitales para el aprendizaje de HTML y CSS

Web portal with HTML and CSS digital learning resources

Portal da Web com recursos didáticos digitais para aprender HTML e CSS

Carlos R. Jaimez-González
Universidad Autónoma Metropolitana, Unidad Cuajimalpa, México
cjaimez@correo.cua.uam.mx

Resumen
En este artículo se presenta un portal web con una serie de recursos didácticos digitales con el objetivo de apoyar el aprendizaje del lenguaje de marcado de hipertexto (HTML) y las hojas de estilo en cascada (CSS), para la creación de sitios web estáticos. El contenido del portal web es de utilidad no solo para estudiantes de cursos de web estático de licenciatura, sino también para personas en busca de material introductorio que cubra los principios del funcionamiento de las aplicaciones web estáticas, utilizando HTML y CSS.
Se discute la organización del portal web con las secciones que contiene; se describen los objetivos de aprendizaje de cada sección; se muestran los recursos didácticos digitales que se elaboraron junto con ejemplos concretos de cada tipo; se presenta una evaluación práctica aplicada a alumnos, con la intención de mostrar lo que los alumnos son capaces de realizar apoyados por el contenido del portal web. Los resultados de la evaluación práctica demostraron un buen desempeño de los alumnos, ya que el 75% de ellos logró completar más del 80% del sitio web solicitado en la evaluación.
Con el objetivo de evaluar el portal web, se creó un instrumento de evaluación que se aplicó a alumnos de la materia de programación de web estático de la Universidad Autónoma Metropolitana, Unidad Cuajimalpa, el cual se diseñó para valorar los siguientes aspectos del portal web: diseño de interfaz, utilidad y características didácticas. Más del 90% de los alumnos que respondieron el instrumento de evaluación consideraron que los recursos didácticos apoyaron en la comprensión, aprendizaje y reforzamiento de los temas que se cubren en la materia de web estático, con lo cual se cumplió el objetivo del portal web desarrollado.

Palabras Clave: Aprendizaje de HTML, Aprendizaje de CSS, Portal Web, Recursos Didácticos Digitales, Web Estático.

Abstract
This article focuses on a web portal with a variety of online resources for learning hypertext markup language (HTML) and cascading style sheets (CSS). This content is not only useful for undergraduate students of static web design, but also for individuals looking for an introduction to basic web development using HTML and CSS.
The article discusses the web portal’s layout and site sections, as well as the teaching objectives of each section. Concrete examples are included of each type of online resource that was developed. An applied practical evaluation is also included to demonstrate what students are capable of doing with the help of this online content. According to the results of the practical evaluation, students showed strong skill development; 75% of the students were able to build more than 80% of the web site requested in the evaluation.
To evaluate the web portal, an assessment tool was created to rate the following aspects: interface design, usefulness, and educational characteristics. Students of static web development at the Universidad Autónoma Metropolitana, Unidad Cuajimalpa, took part in the evaluation. More than 90% of the students who responded to the evaluation reported that the web portal’s educational resources had enhanced their comprehension and learning, and had reinforced the themes covered in their studies of static web development, thereby verifying that the web portal had fulfilled its objective.

Keywords: Learning HTML, CSS, Web Portal, Online Learning Resources, Static Web Development.

Resumo
Este artigo apresenta um portal web com uma série de recursos de ensino digital com o objetivo de apoiar a aprendizagem da linguagem de marcação de hipertexto (HTML) e folhas de estilo em cascata (CSS), para a criação de sites estáticos. O conteúdo do portal da internet é útil não só para estudantes de graduação de cursos de web estáticos, mas também para pessoas que procuram material introdutório que abranja os princípios do funcionamento de aplicativos web estáticos, usando HTML e CSS.
A organização do portal da web com as seções contidas é discutida; os objetivos de aprendizagem de cada seção são descritos; os recursos didáticos digitais que foram desenvolvidos em conjunto com exemplos concretos de cada tipo são mostrados; é apresentada uma avaliação prática aplicada aos alunos, com a intenção de mostrar o que os alunos podem fazer suportados pelo conteúdo do portal. Os resultados da avaliação prática mostraram um bom desempenho dos alunos, já que 75% deles conseguiram completar mais de 80% do site solicitado na avaliação.
Com o objetivo de avaliar o portal da web, foi criada uma ferramenta de avaliação que foi aplicada aos estudantes do tema da programação estática da Universidade Autônoma Metropolitana da Unidade Cuajimalpa, que foi projetado para avaliar os seguintes aspectos do portal: design de interface, utilidade e características didáticas. Mais de 90% dos alunos que responderam ao instrumento de avaliação consideraram que os recursos didáticos apoiaram a compreensão, aprendizado e reforço dos tópicos abordados no tema da web estática, que atendeu o objetivo do portal web desenvolvido .
Palavras-chave: Aprendizagem HTML, CSS Learning, Portal da Web, Recursos Didáticos Digitais, Web estática.

Fecha Recepción: Diciembre 2016     Fecha Aceptación: Julio 2017

Introducción

La popularidad de sitios web para negocios de diferentes tamaños se ha incrementado en los últimos años, ya que a través de ellos es posible anunciar y vender sus productos y servicios, por lo que se ha convertido en una necesidad contar con profesionistas que sean capaces de diseñarlos e implementarlos.

En la actualidad también ha crecido el número de licenciaturas que han incorporado en sus programas de estudio cursos para aprender los fundamentos de la creación de sitios web. En particular, en la Universidad Autónoma Metropolitana, Unidad Cuajimalpa (UAM-C), existen licenciaturas que tienen Unidades de Enseñanza-Aprendizaje (UEA) en las cuales los alumnos aprenden a crear sitios web, tales como las que pertenecen a la División de Ciencias de la Comunicación y Diseño (DCCD): la Licenciatura en Ciencias de la Comunicación (UAM-C, 2017a), la Licenciatura en Diseño (UAM-C, 2017b) y la Licenciatura en Tecnologías y Sistemas de Información (UAM-C, 2017c). En estas licenciaturas los alumnos tienen cursos como Taller de Programación y Diseño de Web Estático, Programación de Web Estático y Dinámico, Laboratorio de Comunicación y Diseño en Sistemas Digitales: Hipermedios, entre otros.
Debido a la importancia de crear sitios web, en este artículo se presenta un portal web que se ha generado con una serie de recursos didácticos digitales para apoyar el aprendizaje del lenguaje de marcado de hipertexto (Hypertext Markup Language, HTML por sus siglas en inglés) y las hojas de estilo en cascada (Cascading Style Sheets, CSS por sus siglas en inglés), para la creación de sitios web estáticos. El contenido del portal web es de utilidad no solo para estudiantes de cursos de web estático, sino también para personas en busca de material introductorio acerca del funcionamiento de aplicaciones web estáticas, utilizando HTML y CSS.
Inicialmente el portal web se creó con el objetivo de apoyar el aprendizaje de los contenidos de la UEA de Programación de Web Estático (UAM-C, 2017d) de la Licenciatura en Tecnologías y Sistemas de Información (LTSI) de la DCCD; sin embargo, también se ha utilizado para apoyar a la UEA de Taller de Programación y Diseño de Web Estático (UAM-C, 2017e) de la Licenciatura en Diseño de la DCCD, así como a la UEA de Tecnologías Web (UAM-C, 2017f) de la Maestría en Diseño, Información y Comunicación (MADIC) de la DCCD; todos estos programas de estudio forman parte de la oferta educativa de la UAM-C.
El resto de este artículo está organizado de la siguiente manera. La siguiente sección expone la organización del portal web. Posteriormente, se tiene una sección para describir los objetivos de los contenidos del portal web. En una siguiente sección se presentan ejemplos de los recursos didácticos digitales que se encuentran en el portal web. Una sección posterior muestra una de las evaluaciones prácticas que se aplican a los alumnos y los resultados obtenidos. Un instrumento de evaluación para medir aspectos de diseño de interfaz, utilidad y características didácticas del portal web se presenta en la penúltima sección, así como los resultados de la evaluación.  Finalmente, en la última sección se proporcionan conclusiones.

Organización del portal web
El portal web que se presenta en este artículo contiene recursos didácticos digitales de apoyo a diversos temas que cubren en su totalidad el contenido sintético de la UEA de Programación de Web Estático (UAM-C, 2017d), en la cual se establece como objetivo general que al final del curso el alumno sea capaz de conocer y utilizar los principios básicos del funcionamiento de las aplicaciones web estáticas, y las tecnologías disponibles para su desarrollo.

La información contenida en el portal web es de gran importancia, ya que los conocimientos que se adquieran ayudarán al alumno a conocer el funcionamiento, así como a desarrollar sus propios sitios web estáticos, con HTML y CSS. Este material de apoyo les permitirá a los alumnos adquirir los conocimientos y habilidades necesarias para, posteriormente incursionar en el desarrollo de aplicaciones web dinámicas.

El portal web se encuentra en el URL <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>, y está organizado en trece apartados o secciones: once de ellas corresponden a las once semanas de clases en las que se divide un trimestre en la UAM; una sección corresponde a la bibliografía de consulta y apoyo; y la última sección es un glosario de términos. En cada una de las secciones correspondientes a las semanas del trimestre se detallan los temas a ser cubiertos, y se encuentran los recursos digitales que se han elaborado para ser utilizados como apoyo durante las clases, los cuales incluyen: 1) presentaciones Power Point, 2) ejemplos prácticos para realizar en clase, 3) tareas, 4) laboratorios, y 5) soluciones a los ejemplos prácticos.

Las presentaciones Power Point proporcionan una base para el tema correspondiente. Los ejemplos prácticos ilustran los temas a estudiar, los cuales pueden ser realizados paso a paso por el profesor durante las clases en un curso presencial, aunque también pueden ser tomados como prácticas para los alumnos. Las tareas y laboratorios de cada semana son actividades integradoras que deben ser realizadas por los estudiantes, ya que contribuyen a la aplicación de los contenidos y habilidades desarrolladas, y permiten el logro de los objetivos establecidos en cada sección.
Para apoyar el proceso de enseñanza-aprendizaje, en este portal web se incluyen las soluciones a los ejemplos prácticos, para que una vez que hayan sido realizados por el profesor durante una clase o por los alumnos, se tenga la posibilidad de contrastar sus soluciones con las soluciones propuestas.
La Figura 1 muestra una captura de pantalla de la página de inicio del portal web, en la cual puede observarse un panel del lado izquierdo con un menú que contiene once secciones, las cuales corresponden a las once semanas que componen un trimestre en la UAM.

Figura 1. Página de inicio del portal web.

Fuente: Portal web <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>.

Cada una de las secciones del menú contiene una descripción de los temas que se cubren durante la semana, los objetivos que deben cumplirse, así como los recursos didácticos digitales que se elaboraron para esa sección. En la Figura 2 se muestra una captura de pantalla de la página de la semana 2, donde se muestra la descripción de la semana: "En esta semana se presentan los conceptos de URL y sus partes, así como hipertexto junto con sus elementos. Se proporciona una introducción a HTML y las partes en las que se divide un documento. También se revisan varias etiquetas HTML, para encabezados, párrafos, formatos de texto, imágenes, tablas sencillas, hipervínculos, entre otras."; sus objetivos: "1) Conocer qué es una URL e identificar sus partes, 2) Conocer qué es el hipertexto e identificar sus elementos, 3) Identificar las partes de un documento HTML, 4) Utilizar las etiquetas adecuadas para crear páginas web estáticas que contengan encabezados, párrafos con diferentes formatos de texto, imágenes, tablas, e hipervínculos"; y algunos recursos digitales.

Figura 2. Página de la semana 2 del portal web.

Fuente: Portal web <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>.

Objetivos de cada sección
Los objetivos que se establecieron en cada semana del trimestre apoyan el cumplimiento del objetivo general del curso de web estático, ya que van cubriendo gradualmente el contenido sintético que está definido para el curso. En la Tabla 1 se muestra la relación de las once semanas del trimestre y los objetivos de aprendizaje que se plantearon para cada una de ellas.

Tabla 1. Objetivos de aprendizaje de cada sección.

Fuente: Elaboración propia con información tomada del portal web <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>.

Adicionalmente, el portal web proporciona una sección con bibliografía de consulta y apoyo, en la cual se encuentran textos complementarios para diseño web (Barfield, 2004; Beaird, 2007; González et al., 2001; King, 2003; Krug, 2006), usabilidad en sitios web (Nielsen, 1999; Nielsen y Loranger, 2006; Nielsen y Tahir, 2001), HTML y CSS (Lynch y Horton, 2004; Musciano y Kennedy, 2002; Rodríguez de la Fuente, 2003; Sánchez et al., 2001). En la siguiente sección se describen los recursos didácticos digitales que se generaron para el portal web.

Recursos didácticos digitales
Los tipos de recursos didácticos digitales contenidos en el portal web de apoyo al aprendizaje de HTML y CSS se muestran en la Tabla 2, junto con la simbología utilizada para cada tipo de recurso y una descripción breve. En esta sección se presenta un ejemplo de cada uno de ellos.

Tabla 2. Tipos de recursos didácticos digitales contenidos en el portal web.

Fuente: Elaboración propia con información e imágenes tomadas del portal web <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>.

Presentaciones Power Point. En la Figura 3 se muestra un conjunto de seis diapositivas de la presentación de listas y anclas en HTML, la cual se encuentra en la sección de la semana 3 del portal web. El objetivo de este tipo de recursos digitales es proporcionar explicaciones y ejemplos del tema correspondiente. En particular, en las dispositivas mostradas en la Figura 3 se describen las listas no ordenadas, las etiquetas que se utilizan para crearlas, los tipos de viñetas y se proporcionan ejemplos que ilustran su uso. Las presentaciones Power Point se encuentran en cada una de las secciones del portal web, para cada tema que se aborda.

Figura 3. Diapositivas de la presentación Power Point de listas HTML.

Fuente: Elaboración propia con diapositivas tomadas del portal web <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>.

Tareas. En la Figura 4 se ilustra un recurso que representa a una tarea sobre el tema de formularios, la cual se encuentra en la sección de la semana 8 del portal web. El objetivo de este tipo de recursos digitales es proporcionar actividades integradoras para ser realizadas por los estudiantes fuera del aula, ya que contribuyen a la aplicación de los contenidos y habilidades desarrolladas, y permiten el logro de los objetivos establecidos en cada sección. En particular, en la tarea mostrada en la Figura 4 se solicita incorporar una tabla al formulario creado en clase.

Figura 4. Tarea de formularios y tablas HTML.

Fuente: Portal web <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>.

Laboratorios. En la Figura 5 se presenta un recurso que representa a un laboratorio sobre el tema de tablas y estilos, el cual se encuentra en la sección de la semana 4 del portal web. El objetivo de este tipo de recursos digitales es proporcionar actividades integradoras para ser realizadas por los estudiantes dentro del aula, ya que contribuyen a la aplicación de los contenidos y habilidades desarrolladas, y permiten el logro de los objetivos establecidos en cada sección. En particular, en el laboratorio mostrado en la Figura 5 se solicita al estudiante realizar una tabla que contenga un plan de estudios, cuya presentación debe ser realizada mediante CSS.

Figura 5. Laboratorio de tablas con estilos.

Fuente: Portal web <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>.

Ejemplos prácticos. En las Figuras 6  y 7 se muestran dos fragmentos de un recurso que representa a un ejemplo práctico sobre el tema de mapas de imágenes, el cual se encuentra en la sección de la semana 9 del portal web. El objetivo de este tipo de recursos digitales es ilustrar los temas a estudiar mediante ejemplos concretos, los cuales pueden ser realizados paso a paso por el profesor durante las clases en un curso presencial, o por los estudiantes como práctica adicional. En particular, en el ejemplo práctico mostrado en la Figura 6 se presenta una captura de pantalla del resultado al que se llegará al completar el ejemplo, en el cual se observa una imagen del sistema solar con un mapa que delimita las áreas del Sol, Mercurio y Venus. En la Figura 7 se muestra el documento HTML que debe escribirse para obtener el resultado esperado en este ejemplo práctico, en el cual se observa la creación de un mapa de imágenes con las tres áreas para delimitar el Sol, Mercurio y Venus. Los ejemplos prácticos se encuentran en cada una de las secciones del portal web, para cada tema que se aborda.

Fuente: Portal web <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>.

Figura 7. Documento HTML para el ejemplo práctico de mapas de imágenes.

Fuente: Portal web <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>.  

En cada ejemplo práctico que se encuentra en el portal web se tiene una captura de pantalla del resultado esperado, así como el documento HTML que permite llegar a ese resultado. El objetivo es que el profesor pueda hacer paso a paso cada ejemplo práctico en sesiones presenciales, a partir del contenido proporcionado.
Soluciones. En la Figura 8 se ilustra la solución a un ejemplo práctico sobre el tema de frames, el cual se encuentra en la sección de la semana 7 del portal web. El objetivo de este tipo de recursos digitales es mostrar una posible solución a un ejemplo práctico o laboratorio. Estos recursos son mostrados directamente en el navegador web. En particular, en la solución mostrada en la Figura 8 se presenta una captura de pantalla del navegador web con un frameset (conjunto de marcos) que contiene tres frames (marcos); en donde cada uno de ellos permite desplegar una página web (banner en la parte superior, el menú del lado izquierdo y el contenido del lado derecho). Las soluciones se encuentran en cada una de las secciones del portal web, para cada ejemplo práctico o laboratorio que se presenta.

Fuente: Portal web <http://ccd.cua.uam.mx/~cjaimez/WebEstatico/>.  

Evaluación Práctica y Resultados
Dado que la duración de un curso en la UAM es de once semanas, es posible realizar dos evaluaciones prácticas: una a la mitad del trimestre, la cual considere el material cubierto en las primeras cinco semanas; y una al final del trimestre, la cual tome en cuenta todo el material cubierto en el curso. En esta sección se presenta un ejemplo de evaluación práctica llevada a cabo a mitad del trimestre en una sesión de tres horas, con la intención de mostrar lo que los alumnos son capaces de realizar en cinco semanas de curso, apoyados por el contenido del portal web.
La evaluación práctica de mitad del trimestre consiste en desarrollar un sitio web con tres páginas web y un archivo CSS: 1) principal.html, la cual tendrá dos listas de cursos de dos licenciaturas (20%); 2) licenciatura1.html, para desplegar los cursos de la Licenciatura en Diseño (30%); 3) licenciatura2.html, para desplegar los cursos de la Licenciatura en Tecnologías y Sistemas de Información (30%); y 4) estilos.css, para incluir estilos para el sitio web (20%).

La página principal (principal.html) se muestra en la Figura 9, la cual contiene un encabezado con el nombre de la División, y dos listas de cursos para dos licenciaturas: Diseño y Tecnologías y Sistemas de Información. El texto Licenciatura en Diseño es un link que deberá llevar a la página licenciatura1.html; mientras que el texto Licenciatura en Tecnologías y Sistemas de Información es otro link que deberá llevar a la página licenciatura2.html.

Figura 9. Página web principal.html de la evaluación práctica.

Fuente: Elaboración propia.

La página web que se observa en la Figura 10 (licenciatura1.html) debe ser mostrada cuando el usuario da click sobre el link Licenciatura en Diseño de la página anterior (principal.html), la cual se observa en la Figura 9.
La página web que se observa en la Figura 11 (licenciatura2.html) debe ser mostrada cuando el usuario da click sobre el link Licenciatura en Tecnologías y Sistemas de Información de la página principal (principal.html), la cual se observa en la Figura 9.

Figura 10. Página web licenciatura1.html de la evaluación práctica.

Fuente: Elaboración propia.

La evaluación práctica fue realizada por un total de 20 alumnos de la UEA Programación de Web Estático, a mitad del trimestre. Los resultados de las evaluaciones se encuentran en la Tabla 3, donde la primera columna muestra la calificación obtenida y la segunda columna el número y porcentaje de alumnos que obtuvieron esa calificación. La calificación está calculada de acuerdo a una rúbrica que indica el porcentaje del sitio web que fue terminado por el alumno.

Figura 11. Página web licenciatura2.html de la evaluación práctica.

Fuente: Elaboración propia.

El 50% de los alumnos fue capaz de terminar el 90% o más del sitio web de la evaluación práctica; el 25% completó entre el 80% y el 89% del sitio web; el 15% terminó entre el 70% y el 79% del sitio web; el 5% de los alumnos obtuvo un porcentaje de terminación de entre el 60% y 69; y finalmente, solamente un alumno (5%) completó menos del 60% del sitio web.

Tabla 3. Resultados de la evaluación práctica realizada a mitad del trimestre.

Fuente: Elaboración propia con información de las evaluaciones prácticas realizadas.

Instrumento de evaluación
El portal web con recursos didácticos digitales presentado en este artículo se encuentra en la categoría de contenido digital de acuerdo a (Red.es, 2005), ya que esta categoría agrupa a los materiales educativos que ofrecen contenidos diversos, actividades o evaluaciones relativos a cualquier área del conocimiento, ya sea de carácter curricular o no curricular; también agrupa a los materiales que van enfocados a la formación docente, materiales de referencia y de consulta, entre otros. Una característica de esta categoría es que los materiales pueden accederse a través de Internet mediante un navegador web y estar dirigidos a alumnos y/o profesores.
Dado que con este portal web se busca apoyar el aprendizaje de HTML y CSS para la creación de sitios web estáticos, nuestros destinatarios o población objetivo son los alumnos de licenciaturas o posgrados que cursen materias con este contenido. En particular, la población muestra que participó en la evaluación que se reporta en esta sección estuvo compuesta por 20 alumnos (3 mujeres y 17 hombres) que cursaron la UEA de Programación de Web Estático de la LTSI de la UAM-C, y quienes a lo largo del curso hicieron uso del portal web.
Con el fin de evaluar el portal web, se creó un instrumento de evaluación, el cual se diseñó para valorar los siguientes aspectos: diseño de interfaz, utilidad y características didácticas. La escala de evaluación utilizada es la siguiente: a) Muy adecuado; b) Adecuado; c) Poco adecuado; y d) Nada adecuado. La Tabla 4 muestra el instrumento de evaluación.

Tabla 4. Instrumento de evaluación para el portal web.

Fuente: Elaboración propia.

Resultados
En la Tabla 5 se presentan los resultados completos de la evaluación del portal web descrito en este artículo; para cada opción se proporciona el porcentaje obtenido y entre paréntesis el número de alumnos que eligieron esa opción.

Tabla 5. Resultados de la evaluación del portal web.

Fuente: Elaboración propia con información de los resultados del instrumento de evaluación aplicado a los alumnos de la UEA de Programación de Web Estático.

Conclusiones
En este artículo se presentó un portal web con una serie de recursos didácticos digitales para apoyar el aprendizaje de HTML y CSS, para la creación de sitios web estáticos. Se explicó la organización del portal web y los objetivos de aprendizaje de cada sección, se mostraron ejemplos concretos de cada uno de los tipos de recursos didácticos. También se presentó una evaluación práctica y los resultados que obtuvieron los alumnos, en los cuales se observó un buen desempeño, ya que el 75% de ellos logró completar más del 80% del sitio web solicitado en la evaluación.
La utilización del portal web fue valorada con alumnos que cursaron la UEA de Programación de Web Estático de la LTSI, mediante un instrumento de evaluación que midió aspectos de diseño de interfaz, utilidad y características didácticas. Los resultados obtenidos en la evaluación reflejaron una buena opinión de los alumnos, ya que en general los entrevistados contestaron que el portal web y sus recursos didácticos son adecuados y muy adecuados, de acuerdo a las preguntas que se realizaron. Más del 90% de los alumnos entrevistados consideraron que los recursos didácticos apoyaron en la comprensión, aprendizaje y reforzamiento de los temas que se cubren en la materia de Web Estático, lo cual era el objetivo del portal web desarrollado.
El trabajo conjunto del docente con alumnos es muy importante en el desarrollo y la evaluación de materiales didácticos, ya que los principales usuarios de este tipo de trabajos son los alumnos. Cabe señalar que se pondrá especial atención en aquellos aspectos de la evaluación en donde se recibieron opiniones no satisfactorias, con el objetivo de mejorar los recursos didácticos. Como trabajo futuro se planea incorporar más recursos didácticos digitales en cada una de las secciones del portal web, con la intención de tener un número mayor de materiales de apoyo para los alumnos.

Bibliografía
Barfield, L. (2004). Designing for New Media. Essex, England: Pearson Addison Wesley.
Beaird J. (2007). The Principles of Beautiful Web Design. Australia: Site Point.
González, R., Cordero, J. M., Valle, J. M. (2001). Diseño de páginas web: iniciación y referencia. Madrid, España: McGraw-Hill.
King, A. (2003). Optimización de Sitios Web. Madrid, España: Anaya Multimedia.
Krug, S. (2006). No me Hagas Pensar. Madrid, España: Pearson Prentice Hall.
Lynch, P., Horton, S. (2004). Manual de Estilo Web. Barcelona, España: Editorial Gustavo Gilli.
Musciano, C., Kennedy, B. (2002). HTML y XHTML, The Definitive Guide, Creating effective web pages. Sebastopol, CA: O'Reilly Media.
Nielsen, J. (1999). Designing Web Usability: The Practice of Simplicity. Thousand Oaks, CA: New Riders Publishing.
Nielsen, J., Loranger, H. (2006). Prioritizing Web Usability. Berkeley, CA: New Riders Press.
Nielsen, J., Tahir, M. (2001). Homepage Usability, 50 Websites Deconstructed. Thousand Oaks, CA: New Riders Publishing.
Red.es (2005). Evaluación de Material Educativo Digital. Taller de Formación Metodológica. Madrid. Recuperado de http://www.edubcn.cat/rcs_gene/2_ficha_evaluacion_material.
Rodríguez de la Fuente, S. (2003). Programación de aplicaciones web. México: Ediciones Paraninfo.
Sánchez, G., Santos, G., Molina, M. (2001). HTML 4, Iniciación y Referencia. Madrid, España: McGraw-Hill.
Universidad Autónoma Metropolitana, Unidad Cuajimalpa (UAM-C) (2017a). Plan de Estudios de la Licenciatura en Ciencias de la Comunicación. México: UAM Cuajimalpa. Recuperado de http://hermes.cua.uam.mx/archivos/PlandeEstudioComunicacion.pdf.
Universidad Autónoma Metropolitana, Unidad Cuajimalpa (UAM-C) (2017b). Plan de Estudios de la Licenciatura en Diseño. México: UAM Cuajimalpa. Recuperado de http://dccd.cua.uam.mx/archivos/files/diseno/plan_de_estudios_update.pdf.
Universidad Autónoma Metropolitana, Unidad Cuajimalpa (UAM-C) (2017c). Plan de Estudios de la Licenciatura en Tecnologías y Sistemas de Información. México: UAM Cuajimalpa. Recuperado de http://hermes.cua.uam.mx/archivos/PlandeEstudioTSI.pdf.
Universidad Autónoma Metropolitana, Unidad Cuajimalpa (UAM-C) (2017d). Programa de la Unidad de Enseñanza-Aprendizaje Programación de Web Estático, de la Licenciatura en Tecnologías y Sistemas de Información. México: UAM Cuajimalpa. Recuperado de http://dccd.cua.uam.mx/archivos/PDFprogramas/tecnologias/450204.pdf.
Universidad Autónoma Metropolitana, Unidad Cuajimalpa (UAM-C) (2017e). Programa de la Unidad de Enseñanza-Aprendizaje Taller de Programación y Diseño de Web Estático, de la Licenciatura en Diseño. México: UAM Cuajimalpa. Recuperado de http://dccd.cua.uam.mx/archivos/PDFprogramas/diseno/450277.pdf.
Universidad Autónoma Metropolitana, Unidad Cuajimalpa (UAM-C) (2017f). Programa de la Unidad de Enseñanza-Aprendizaje Tecnologías Web, de la Maestría en Diseño, Información y Comunicación. México: UAM Cuajimalpa. Recuperado de http://dccd.cua.uam.mx/archivos/Programa_MADIC.pdf.