UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD VICERRECTORIA ACADEMICA Y DE INVESTIGACIÓN ESCUELA DE CIENCIAS BÁSICAS, TECNOLOGÍA E INGENIERÍA

Transcripción

1 1. INFORMACIÓN GENERAL DEL CURSO ESCUELA O UNIDAD: Ciencias Básicas, Tecnología e Ingeniería SIGLA:ECBTI NIVEL: Profesional CAMPO DE FORMACIÓN: Formación Electiva Disciplinar FED CURSO: Diseño de Sitios Web CODIGO: TIPO DE CURSO: Metodológico N DE CREDITOS: Tres (3) N DE SEMANAS: 8 CONOCIMIENTOS PREVIOS: Herramientas Informáticas DIRECTOR DEL CURSO: MAURICIO PERDOMO VARGAS FECHA DE ELABORACIÓN: 15/03/ Versión 01 (Actualización 01 Mayo 2015) DESCRIPCIÓN DEL CURSO: El curso Diseño de Sitios Web, es un curso académico dirigido a los estudiantes del programa de Ingeniería de Sistemas y en general para los estudiantes de los programas tecnológicos y profesionales de la Universidad Nacional Abierta y a Distancia UNAD de Colombia, que estén interesados en el diseño web y la administración básica de sitios web. Este curso se estructura bajo los principios académicos y pedagógicos del sistema de educación Abierta y a Distancia que promueve la Universidad a través de su Proyecto Académico Pedagógico enfocado en los ambientes virtuales de aprendizaje AVA como estrategia dinamizadora de un proceso de formación continuo y articulado. Este pertenece al campo de formación profesional como un curso electivo del programa de ingeniería de sistemas, pero dado su impacto en diferentes roles profesionales el mismo aplica como electivo para diferentes programas de la universidad. EL curso se estructura en tres (3) Unidades didácticas denominadas: Unidad 1. Diseño web y Lenguajes, Unidad 2. Sistemas Manejadores de Contenidos CMS y la Unidad 3. Administración del Sitio Web. Cada una de estas unidades poseen tres capítulos con temáticas acordes y actualizadas frente a estas mismas, las tres unidades abordan aspectos de desarrollo, implementación y administración de proyectos de diseño web, para el curso se define a su vez el uso de las Tics como agente mediador en el curso entre Docentes y Estudiantes; para esto la Universidad Cuenta con un campus virtual el cual posee elementos de aprendizaje interactivo como OVAS, Tutoriales y Vídeos, que se complementan con la aplicación de actividades académicas en línea y la utilización de canales síncronos y asíncronos de comunicación para el desarrollo del proceso académico que propone el curso.

2 2. INTENCIONALIDADES FORMATIVAS Propósitos: Que el estudiante se fundamente teóricamente sobre las generalidades básicas del Diseño Web. Que el estudiante pueda utilizar de forma correcta los lenguajes HTML5 y CSS3 para aplicarlos en la solución de problemas de construcción de Sitios Web. Que el estudiante implemente servicios y sitios web a través de los sistemas gestores de contenidos CMS y LMS libres más usados en la actualidad. Competencias generales del curso: El estudiante podrá desarrollar Sitios Web que satisfagan las necesidades del usuario. El estudiante podrá administrar y dar mantenimiento a un Sitio Web (WebMaster) El estudiante podrá evaluar Sitios Web y dar recomendaciones concretas para su actualización. El estudiante podrá operar lenguajes de Diseño web como HTML5 y CSS3 El estudiante podrá operar y administrar plataformas de CMS. El estudiante reconocerá y utilizara diferentes metodologías de Diseño Web.

3 3. CONTENIDOS DEL CURSO Esquema del contenido del curso: DISEÑO DE SITIOS WEB COD UNIDAD 1 Diseño web y Lenguajes UNIDAD 2 Sist. Manejadores Contenidos CMS Unidad 3. Administración del Sido Web Introducción al Diseño Web HTML5 CSS3 JOOMLA DRUPAL SEO y herramientas Google CPanel Seguridad de Sidos web WORDPRESS

4 Nombre de la unidad Contenidos de aprendizaje Referencias Bibliográficas Requeridas Unidad 1. DISEÑO WEB Y LENGUAJES (Incluye: Libros textos, web links, revistas científicas) 1. Introducción al Diseño Web Cristalab.com. (15 de septiembre de 2004). Diseño web, fundamentos básicos. 1. HTML5 Recuperado de: 2. CSS3 web- fundamentos- basicos- c63l/ Apuntesalmargen.com. (14 de febrero de 2013). Fundamentos del diseño web actual. Recuperado de: Videos2Brain. (18 de marzo de 2014). Qué es el Responsive Design. Recuperado de: free- lessons htm Martínez, Josafat. (13 de enero de 2013). Metodologías Para el Desarrollo de Aplicaciones Web. Presentación Diapositivas. Recuperado de: para- el- desarrollo- de- aplicacones- web W3C Web Oficial. (5 de mayo de 2011). Estándar HTML5. Recuperado de: html / W3C Web Oficial. (5 de mayo de 2011). Estándar CSS3. Recuperado de: Solano, Gaitan. Victor, Manuel. (3 de diciembre de 2013). Elaboración del sitio web ways - we are your solution para la difusión de html5 y diseño web adaptativo. Universidad Nacional Abierta y a Distancia UNAD Recuperado de: Boulton, Mark. (1 de marzo de 2010). A Practical Guide to Designing for the Web. Recuperado de:

5 Referencias bibliográficas complementarias Cibergrafía: Cristalab. (12 de Mayo de 2014) Tutoriales HTML5, CSS3 y JavaScript. Recuperado de: html- css- y- javascript/ Nombre de la unidad Unidad 2. SISTEMAS MANEJADORES CONTENIDOS CMS Contenidos de aprendizaje Referencias Bibliográficas Requeridas (Incluye: Libros textos, web links, revistas científicas) 1. JOOMLA Artfandesign. (9 de enero de 2012).Top 5 CMS porqué son tan útiles. Recuperado de: 2. WORDPRESS 3. DRUPAL Wikipedia. (12 de junio de 2014). Sistema de gestión de contenidos. Recuperado de: joomlaspanish.org (02 demayo de 2005). Portal Hispano de Joomla. Recuperado de: Webempresa. (31 de diciembre de 2013). Curso de construcción de un sitio web desde cero con Joomla 3. Recuperado de: 3 Arias, Pablo. (23 de junio de 2013). Libro para aprender Joomla 3 en español. Recuperado de: (30 de noviembre de 2012). Curso Joomla Youtube. Recuperado de: Wordpress hispano. (10 de abril de 2011). Portal Hispano de Wordpress. Recuperado de:

6 Openwebcms. (5 de junio de 2013). Manuales de uso de Wordpress. Recuperado de: Drupal Español. (11 de abril de 2005). Portal Hispano de Drupal. Recuperado de: Cañizares, Maria. (7 de julio de 2012). Manual Drupal 7 en Español. Recuperado de: Arroyo, David. (10 de junio de 2013). Manual de Programación en Drupal 7. Recuperado de: Drupal Hispano. (9 de octubre de 2011). Documentación y Recursos Gratuitos de Drupal en español. Recuperado de: Lawebdelprogramador.com. (4 de abril de 2011). Recopilación de Cursos y Manuales Online Sobre Drupal. Recuperado de: InfoPirineo. (5 de junio de 2013). Manual de Edición de Contenidos (CMS - Drupal Versión 7). recuperado de: Referencias bibliográficas complementarias Cibergrafía: Wikipedia.com. (13 de Julio de 2014). Joomla. Recuperado de:

7 Nosolocodigo.com. (15 de Febrero de 2008). Tutorial Creando Plugins con Joomla 1.5. Recuperado de: Solojoomla.com. (5 de Junio de 2014). Información y Contenidos sobre CMS Joomla. Recuperado de: Nombre de la unidad Unidad 3. CMS, SISTEMAS MANEJADORES DE CONTENIDOS Contenidos de aprendizaje Referencias Bibliográficas Requeridas (Incluye: Libros textos, web links, revistas científicas 1 SEO y Herramientas Google Google. (20 de abril de 2011). 20 cosas que he aprendido sobre Internet y los navegadores. 2 CPANEL Recuperado de: 3 Seguridad de Sitios Web SEO Mono Araña. (2 de septiembre de 2010). Herramienta de Análisis de Websites Disponible en: Comunidad de SEO. (7 de marzo de 2013). Optimización para los motores de búsqueda. Disponible en: Google. (2 de abril de 2005). Herramientas para Webmasters de Google. Disponible en: Pell, J, Carlos. (3 de junio de 2012). Guía SEO Penguin y Panda Update. Recuperado de:

8 GoogleEspana. (9 de septiembre de 2008). Herramientas para Webmasters, Tutorial en Video (1). Recuperado de: Amaya, T, Carlos. (2 de diciembre de 2012). Contenidos Curso Seguridad en Aplicaciones Web. Recuperado de: Marqués, L, Manuel. (1 de enero de 2010). Manual del usuario panel de control cpanel. Recuperado de: CPanel. (2 de abril de 2010). Web Oficial y Comunidad Hispana (Foros, Podcast, Noticias, Videos y otros materiales de CPanel). Recuperado de: EbookBrowse. (2 de abril de 2011). CPanel 11 User Manual pdf free ebook. Recuperado de: Torralba, Francisco. (12 de agosto de 2012). Video tutorial de la utilización y configuración del cpanel para administrar el hosting (Youtube). Recuperado de: Sered.net. (12 de enero de 2014). Tutorial CPanel (Youtube). Recuperado de: Referencias bibliográficas complementarias Gómez, L, Miguel. (30 de noviembre de 2010). Libro SEO, Posicionamiento en Buscadores. Recuperado de: Illyes, Garry. (8 de julio de 2011). Seguridad en Sitios Web Para WebMasters. Google. Recuperado de:

9 Cibergrafía: Cpanel. (4 de junio de 2014). Comunidad Cpanel (contenidos, materiales y manuales). Recuperado de:

10 4. ACTIVIDADES DE APRENDIZAJE Unidad Contenido de Competencia Indicadores de desempeño Estrategia de N de Semanas Propósito Evaluación 1 Criterios de evaluación Ponde ración Verificación de conductas de entradas del estudiante para el normal desarrollo del curso El estudiante conoce y maneja de forma adecuada programas editores de texto básicos y suites ofimáticas. El estudiante conoce y maneja de forma adecuada navegadores web de diferente tipo y en diferentes O.S. El estudiante identifica elementos básicos de la informática Maneja de forma adecuada el bloc de notas y editores de texto, para la creación de archivos de diferente extensión. Identifica y maneja de forma adecuada elementos y herramientas de los navegadores web más usados de la actualidad. Conoce y maneja de forma adecuada, creación de directorios, tamaños de archivo, rutas, servicios y otros elementos básicos de la informática que tienen relación con él y la programación web AUTOEVALUACIÓN Lecciones prácticas de autodiagnóstico Se diseñan tres lecciones que con base a preguntas prácticas, permiten indagar a los estudiantes sobre las conductas de entrada que estos tienen para el desarrollo del curso. En caso que los estudiantes no aprueben una de las lecciones se le invita a profundizar en el tema evaluado a través de materiales internos y externos del curso donde se pueden reforzar aquellas competencias básicas que exige el curso para su desarrollo. 1 Indagar las competencias básicas que tienen cada estudiante y que se constituyen en conductas de entrada necesarias para el normal desarrollo del curso, Aplica para las tres lecciones 1. El estudiante responde de forma acertada menos del 60% de las preguntas de la lección. Bajo 2. El estudiante responde de forma acertada entre el 60% y el 70% de las preguntas de la lección. Medio 3. El estudiante responde de forma acertada más del 70% de las preguntas de la lección. Alto 0% - Actividad de autoevaluación sin calificación

11 Unidad UNIDAD 1. DISEÑO WEB Y LENGUAJE S Contenido de Introducción al Diseño Web - HTML5 - CSS3 Competencia El estudiante reconoce los Principios y fundamentos de un entorno de trabajo para un proyecto de Diseño Web. Indicadores de desempeño Estrategia de EVALUACIÓN Actividad No. 1 Identifica los Principios y fundamentos de un entorno de trabajo para un proyecto de Diseño Web, a través del montaje de un entorno en un computador personal. Actividad No. 1 Configurando el Entorno de trabajo. El estudiante deberá gestionar un entorno de trabajo para la construcción de páginas web a través de la configuración de las siguientes herramientas de software, las cuales deberán ser instaladas en un computador personal o un computador de la sala de sistemas del centro donde el estudiante se encuentre matriculado. Aplicaciones a instalar: Editor de texto para programación. Servidor web local. Cliente FTP. (Ponderación 5%) N de Semanas 1 Propósito Que el estudiante se apropie de conceptos y teoría relacionada con Principios y fundamentos de un entorno de trabajo para un proyecto de Diseño Web Que el estudiante de forma práctica configure en un computador personal un entorno de trabajo para un proyecto de Diseño Web Evaluación 1 Criterios de evaluación El estudiante debe entregar un documento PDF donde evidencie que ha realizado de manera satisfactoria el proceso de instalación y configuración de las siguientes aplicaciones: 1. Editor de texto SublimeText2, en este editor se debe activar el Package Control, y el Plugin de Zend Coding Emmet. 2. Servidor Web: puede instalar: Apache, Xampp o WampServer 3. Cliente de FTP, se recomienda Filezilla u otro cliente FTP Open Source. Ponde ración 15 % 75 Pts Coevaluación Actividad Obligatoria. (Ponderación 0%) Además de estos elementos el documento debe contar con Portada, Introducción, Objetivos, Conclusiones y Bibliografía.

12 Unidad Contenido de Competencia Indicadores de desempeño Estrategia de N de Sema nas Evaluación 1 Propósito Criterios de evaluación Ponder ación UNIDAD 1. DISEÑO WEB Y LENGUAJE S Introducción al Diseño Web - HTML5 - CSS3 El estudiante configura de forma correcta el directorio raíz de un sitio web creado en HTML5 y CSS3. El estudiante utiliza de forma correcta librerías y Scripts de normalización de estilos para proyectos de diseño web. El estudiante Crea de forma correcta un sitio web utilizando los Lenguajes HTML5 y CSS3. EVALUACIÓN Activiad No. 2 Identifica y aplica las principales etiquetas de HTML5 y los atributos de CSS3 para construir de forma correcta una pagina web. Crea de forma correcta el directorio raíz para el sitio web con todas sus subcarpetas. Descarga y vincula al directorio raíz todas las librerías y Scripts de normalización de estilos para proyectos de diseño web. Actividad No. 2 Creando un Sitio Web con HTML5 y CSS. El estudiante creara un sitio web con mínimo 5 páginas que permita presentar información básica y de contacto de la Fundación Adoptamor, la cual se dedica al rescate de perros y gatos abandonados, además esta fundación gestiona su adopción a través de diferentes medios, entre ellos la Internet y las Redes Sociales. Para tener más información sobre la fundación pueden visitar su perfil en Facebook: com/pages/fu ndacion- Adoptarmor/ (Ponderación 30%) Coevaluación Actividad Obligatoria. (Ponderación 0%) 3 Que el estudiante utilice de forma correcta las etiquetas del lenguaje HTML5 para la creación de un sitio web Que el estudiante utilice de forma correcta el lenguaje CSS3 para la definición de estilos en las paginas de un sitio web. Que el estudiante configure de forma correcta el directorio raíz del sitio web con todos sus elementos. Para la presente actividad el estudiante entregara un sitio web que cumpla con las siguientes características. Se debe crear una carpeta o directorio raíz para el sitio web con subcarpetas de acuerdo a los archivos que se utilizaran en el sitio. El sitio web debe contener mínimo 5 páginas web creadas con HTML5. Se deben configurar librerías y scripts de normalización en el sitio de acuerdo al material publicado en el curso. Se debe crear una hoja externa de estilos CSS para el sitio web creado. El sitio web debe contener toda la información y secciones que el estudiante crea conveniente para presentar de mejor forma la información básica y de contacto de la Fundación Adoptamor. Dentro de los contenidos del sitio, es obligatorio presentar una galería de Perros y Gatos para adopción por separado. Las páginas web del sitio deben contener como elementos estructurales las etiquetas de HTML5: Header, Banner, Contenidos, Aside y Footer. No se permiten sitios web creados con Wix, Jimdoo u otro asistente de ceración de sitios en la Internet. El estudiante entregara en el entorno de seguimiento y evaluación un archivo en formato zip, el cual contendrá la carpeta Raíz del sitio web creado por el estudiante, con todos los archivos que pertenecen al sitio web para su revisión y calificación. 30 % 15 0 Pts

13 Unidad Contenido de Competencia Indicadores de desempeño Estrategia de N de Sem anas Propósito Evaluación 1 Criterios de evaluación Ponde ración UNIDAD 2 Sistemas Manejadores de Contenidos. Joomla Wordpress Drupal El estudiante configura de forma correcta un sitio web en la internet a través de la implementación de un CMS (sistema manejador de contenidos) El estudiante interpreta y aplica configuraciones básicas de seguridad para un sitio web. EVALUACIÓN Actividad No. 3 Identifica conceptos básicos relacionados con el manejo de sistemas manejadores de contenidos CMS. reconoce y aplica los conceptos básicos para la implementación de sitios web por medio de sistemas manejadores de contenidos CMS. Reconoce y configura de forma correcta el panel de administración de un sistema manejador de contenidos CMS. Utiliza de forma correcta servidores remotos para la implementación de un CMS Actividad No. 3 Instalación configuración de un sitio web de Turismo de Colombia con un CMS (sistema Manejador de Contenidos) en la Internet. El estudiante Instalara un CMS (Sistema manejador de contenidos) en la Internet a través de un servicio de hosting Gratuito de la Internet, Para alojar allí el sitio web de Turismo Colombiano. (Ponderación 30%) Coevaluación Actividad Obligatoria. (Ponderación 0%) 4 Que el estudiante se apropie de conceptos básicos relacionados con el manejo de sistemas manejadores de contenidos CMS. Que el estudiante reconozca y aplique los conceptos básicos para la implementación de sitios web por medio de sistemas manejadores de contenidos CMS. Que el estudiante reconozca y utilice de forma correcta el panel de administración de un sistema manejador de contenidos CMS. Que el estudiante utilice de forma correcta servidores remotos para la implementación de sitios web por medio del uso de sistemas manejadores de contenidos CMS. Para la presente tarea el estudiante desarrollara las siguientes actividades específicas. El estudiante instalara un CMS (sistema manejador de contenidos) en un servicio de hosting gratuito de la Internet. El estudiante configurara a través del CMS instalado un sitio web de Turismo Colombiano. El sitio web de Turismo debe contar con contenidos en diferentes formatos relacionados con sitios turísticos de nuestro país, se deben referenciar mínimo 30 sitios turísticos colombianos en el Sitio Web incluyendo en su presentación, texto, imágenes y vídeo. El grupo deberá entregar así no participen todo los estudiantes, los 30 sitios turísticos colombianos publicados dentro del sitio web. El sitio debe contar con servicio de Chat y un módulo de calificación de contenidos y reseñas de visitantes para los sitios turísticos colombianos publicados por los estudiantes. El grupo diseñara un banner y un logo para el sitio, este debe ser de autoría propia del grupo. El grupo debe definir una paleta de colores sobria para el sitio, pero acorde con los colores de la bandera de Colombia, Por último el grupo entregara a través del entorno de evaluación y seguimiento un documento PDF que contendrá el link o enlace del sitio web creado con el CMS. Además del link del dominio, el documento debe contar con Portada, Introducción, Objetivos, Conclusiones y Bibliografía. 30 % 150 Pts

14 Unidad Unidad 1. Diseño web y Lenguajes, Unidad 2. Sistemas Manejadores de Contenidos CMS y la Unidad 3. Administraci ón del Sitio Web Contenido de Aprendizaj e Todas las Unidades Didácticas del curso. Competencia El estudiante sustenta de forma oral las que a criterio del grupo son las 10 pautas más importantes para realizar de forma correcta proyectos de diseño web. El estudiante realiza presentaciones con diapositivas de forma correcta. El estudiante demuestra experticia, claridad y conocimiento acertado en la presentación, desarrollo y sustentación de proyectos de diseño web. Indicadores de desempeño Estrategia de N de Sem anas EVALUACIÓN FINAL DEL CURSO EXAMEN NACIONAL Identifica dentro de un El estudiante Que caso real de uso las estrategitas de SEO para la optimización de visibilidad de sitios web con el uso de herramientas de Google. Reconoce de forma clara y correcta pautas importantes para realizar de forma correcta proyectos de diseño web. Identifica fortalezas en elementos propios del diseño web para potenciar proyectos de este tipo. publicara un vídeo de su autoría en YouTube donde sustentara los que para el son los 6 (Seis) aspectos más importantes que garantizan el éxito en un proyecto de diseño web Estos aspectos estarán enmarcados en tres elementos propios del diseño web, los cuales son: Planeación Desarrollo Implementación (Ponderación 25%) Coevaluación Actividad Obligatoria. 1 Propósito el estudiante identifique de forma clara y correcta pautas importantes para realizar de forma correcta proyectos de diseño web. Que el estudiante identifique y aplique a un contexto real fortalezas en elementos propios del diseño web para potenciar proyectos de este tipo. Que el estudiante cuente con herramientas de decisión precisas para apoyar la implementaci Evaluación 1 Criterios de evaluación Para el examen nacional del curso, el Estudiante desarrollará las siguientes actividades específicas. El Estudiante Publicara en el portal de vídeos YouTube un vídeo de su autoría donde exponga sin leer y con sus propias palabras cuales son los 6 (Seis) elementos propios de los aspectos de Planeación, Desarrollo e implementación que él considera más importantes dentro del Diseño web. 1. El vídeo debe contar con los siguientes elementos: Presentación del estudiante desde la WebCam de equipo indicando: Nombre, No. de Grupo, Programa Académico y Centro donde se encuentra matriculado. Seguido a la presentación desarrollo de la sustentación, para esto se puede apoyar máximo de 7 (siete) diapositivas donde la primera será de portada y las 6 restantes serán para exponer los 6 elementos definidos por el estudiante, Cada diapositiva puede contener imágenes y solo podrá tener 50 caracteres de texto máximo. Si el estudiante lo desea podrá tener vista previa de su WebCam desde una de las esquinas de la pantalla. Después del desarrollo de la sustentación el Ponde ración 25 % 125 Pts

15 ón de servicios y sitios web a través lenguajes HMTL5, CSS3 y herramientas como los CMS. estudiante presentara desde su Web Cam 4 (cuatro) conclusiones finales sobre el desarrollo del curso, sus contenidos y actividades. Para crear el vídeo el estudiante se puede apoyar del complemento para Google Chrome llamado screencastify el cual se puede descargar desde la página de complementos del navegador o desde el link: Por último el Estudiante entregara a través del entorno de evaluación y seguimiento un documento PDF que contendrá el link del vídeo creado por este mismo. Además del link del vídeo, el documento debe contar con Portada, Introducción, Objetivos, Conclusiones y Bibliografía.

16 5. ESTRUCTURA DE EVALUACION DEL CURSO Tipo de evaluación Ponderación Puntaje Máximo Autoevaluación Formativa - Actividad Individual- 0% Desarrollo de Ejercicios Prácticos del Curso 0% Coevaluación Formativa Actividad No. 1 Individual 15% 75 Actividad No. 2 Individual 30% 150 Actividad No. 3 Individual 30% 150 Examen Final del Curso Actividad Grupal 25% 125 Total 100% 500 puntos