ESCUELA SUPERIOR DE ARQUITECTURA Y TECNOLOGÍA

Transcripción

1 ESCUELA SUPERIOR DE ARQUITECTURA Y TECNOLOGÍA PLANIFICACIÓN DE LA DOCENCIA UNIVERSITARIA GUÍA DOCENTE FUNDAMENTOS DEL DISEÑO WEB

2 1. DATOS DE IDENTIFICACIÓN DE LA ASIGNATURA. Título: Facultad: Departamento/Instituto: Materia: Denominación de la asignatura: Grado en Diseño Multimedia y Gráfico ESAyT Diseño Multimedia y Gráfico Módulo de Diseño Fundamentos del Diseño Web Código: Curso: Semestre: Segundo Segundo Tipo de asignatura (básica, obligatoria u optativa): Obligatoria Créditos ECTS: 6 Modalidad/es de enseñanza: Lengua vehicular: Equipo docente: Profesor/a: Grupos: Despacho: Presencial Español D. David Carvajal Garrido D. David Carvajal Garrido DMG21, DMG22 Sala de profesores 1ª Planta Teléfono: Ext. david.carvajal@esne.es Página web: Curso

3 2. REQUISITOS PREVIOS. Esenciales: Las propias del título. Aconsejables: Conocimientos básicos sobre Ofimática y manejo de programas. Conocimientos de Diseño Gráfico y tratamiento de imágenes. 3. SENTIDO Y APORTACIONES DE LA ASIGNATURA AL PLAN DE ESTUDIOS. Campo de conocimiento al pertenece la asignatura. Esta asignatura pertenece a la materia de Módulo de Diseño. Relación de interdisciplinariedad con otras asignaturas del curriculum. Fundamentos del Diseño Web abarca una toma de contacto con el diseño y la programación web, presentando los fundamentos básicos para el desarrollo de sitios web en Internet. Esta asignatura proporcionará al alumno los conocimientos necesarios para desarrollar sitios web en lenguaje HTML manejando entornos de desarrollo integrado de alto nivel y utilizando herramientas de diseño gráfico y retoque digital. Se ayudará al alumno para que aplique su visión creativa de diseñador gráfico, adquirida en otras asignaturas, aplicándola directamente en entornos online y sistemas web. Para ello, se impartirán nociones de diseño y maquetación web así como el estándar CSS para aplicar estilos y formatos a los sitios web. Por último, se hará una introducción a la programación del lado del cliente en lenguaje JavaScript, añadiendo efectos visuales dinámicos y aplicando tratamientos a eventos. Adicionalmente, también se presentarán reglas de posicionamiento web (SEO). Aportaciones al plan de estudios e interés profesional de la asignatura. El diseño y desarrollo de sitios web representa la evolución del antiguo diseño gráfico convencional, estático y nada interactivo hacia el paso siguiente en la Curso

4 transmisión de ideas. Internet y La Web (www) actualmente suponen la mayor base de conocimiento a nivel mundial en la que se ofrece, expresa, comunica, muestra y comparte toda la información disponible y publicada del planeta a tiempo real sea del tipo que sea. Aprender los fundamentos básicos de diseño y programación de sitios web resulta fundamental ante la creciente demanda del mercado que se aleja cada vez más de la publicidad gráfica hacia un universo altamente interconectado (web 2.0). En relación con todo ello, un profesional del diseño gráfico y multimedia debe tener la capacidad de afrontar un proyecto software completo encaminado a sitios web estáticos, es decir, aquellos que no variarán sus contenidos en el tiempo. Esto implica saber interpretar las necesidades y requisitos del cliente final, así como tener la capacidad de elaborar una propuesta preliminar de diseño, codificar la implementación resultante y presentar un trabajo final completo susceptible de ser publicado en la red, con la documentación asociada. Curso

5 4. RESULTADOS DE APRENDIZAJE EN RELACIÓN CON LAS COMPETENCIAS QUE DESARROLLA LA ASIGNATURA. COMPETENCIAS GENÉRICAS CG1. El alumno aprenderá a usar una gama de técnicas y generación de ideas creativamente. CG2. Originar ideas complejas y elaborar los objetivos de comunicación gráfica. CG3. Expresar gráficamente las ideas usando técnicas, bocetos y bosquejos de forma efectiva. CG4. Analizar los contextos culturales y las ideas gráficas comunicadas. CG5. Adaptar ideas complejas para satisfacer una variedad de aplicaciones de diseño. CG6. Trabajar con un equipo humano de forma efectiva en la generación y desarrollo de ideas. Y planificar y diseñar presentaciones y comunicaciones de ideas de forma efectiva. CG1.1. Conocer los lenguajes de programación y herramientas más comunes necesarias para diseñar y desarrollar sitios web profesionales. CG2.1. Conocer formas de plasmar ideas abstractas como creatividad, comunicación gráfica y marketing a través del diseño web. RESULTADOS DE APRENDIZAJE RELACIONADOS CON LAS COMPETENCIAS GENÉRICAS CG1. Conocer la sintaxis de los elementos más comúnmente utilizados del lenguaje de marcas de hipertexto HTML. Desarrollar código HTML eficiente y de calidad que cumpla con los estándares del W3C (World Wide Web Consortium). Manejar herramientas de alto nivel y entornos de desarrollo integrado (IDEs) específicas del diseño y desarrollo web. CG2. Aplicar dotes creativas, diseño gráfico y maquetación de contenidos visuales que generen un efecto estético agradable y un entorno web amigable al usuario. Ofrecer una solución de diseño web interactiva e impactante ante cualquier necesidad planteada, ya sea comercial, divulgativa, informativa o de ocio. Combinar adecuadamente contenidos visuales tales como colores, imágenes, textos y otros recursos multimedia. CG3. Aplicar una metodología de trabajo directa, estricta y eficiente aprendiendo a separar el diseño preliminar de la implementación del código fuente. Comprender las ideas y expresarlas gráficamente usando técnicas y bocetos de forma efectiva, orientándolos al sitio web como producto final. Planificar de forma efectiva las fases de trabajo de un proyecto web, organizar y dividir tareas en el tiempo y repartirlas dentro de un grupo de trabajo. Curso

6 CG3.1. Conocer los pasos a seguir para la elaboración de un sitio web completo como proyecto software (ciclo de vida), tanto trabajando en grupo como individualmente. Publicar un producto final (previa fase de pruebas y validación del mismo), mediante exposición y presentación oral, enfocadas a la satisfacción del cliente. COMPETENCIAS ESPECÍFICAS CE1. Conocer la estructura y los lenguajes utilizados en los programas que se ejecutan en el navegador y en el servidor de páginas Web. CE2. Tendrá conocimientos de programación en HTML, para construir programas que se ejecuten tanto en servidores de páginas Web como en el propio navegador. CE3. El alumno deberá interpretar independiente e imaginativamente los briefs de diseño para hallar las intenciones de los objetivos comunicativos gráficos y complejos e interpretar estos briefs para cumplir tareas de comunicación gráfica compleja de forma efectiva e imaginativa. Deberá adaptar las ideas para cubrir una amplia variedad de aplicaciones. CE4. Actuar de forma efectiva como miembro de un equipo creativo. Aclarar y cumplir el alcance y objetivos de tareas complejas. Generar y desarrollar una amplia variedad de ideas. Seleccionar formatos de presentación apropiados par alas ideas y el público objetivos y preparar las ideas para una presentación imaginativa en un Standard profesional. RESULTADOS DE APRENDIZAJE RELACIONADOS CON LAS COMPETENCIAS ESPECÍFICAS CE1.Manejar IDEs (entornos de desarrollo integrado) y herramientas software de diseño y desarrollo web. CE2. Conocer la arquitectura cliente-servidor y el protocolo HTTP de transferencia de datos como base de toda la red Internet y los entornos online. Diferenciar los conceptos de remoto frente a local, cliente frente a servidor y petición frente a respuesta. CE3. Identificar la estructura y las partes principales de un documento HTML. Conocer la sintaxis básica del lenguaje HTML y sus etiquetas de hipertexto. CE4. Desarrollar código fuente que cumpla los estándares del W3C. Desarrollar código fuente limpio y de fácil mantenimiento, que cumpla reglas de estilo básicas. CE5. Dar formato de encabezado y/o párrafo a un texto en HTML. CE6. Insertar imágenes en HTML. Reescalar imágenes en HTML. CE7. Crear vínculos HTML internos y anclas. Crear vínculos HTML externos. Curso

7 CE1.1. Ser capaz de manejar herramientas software de diseño web e IDEs de alto nivel. CE2.1. Saber los conceptos básicos fundamentales teóricos de la red Internet y el World Wide Web. CE3.1. Saber identificar la estructura de un documento HTML, sus partes principales y la sintaxis básica del lenguaje HTML. CE4.1. Ser capaz de desarrollar código fuente limpio, eficiente y válido según los estándares. CE5. Ser capaz de dar formato a texto y estructurarlo dentro de un documento HTML. CE6. Ser capaz de insertar y reescalar imágenes. CE7. Ser capaz de crear vínculos (hiperenlaces) entre elementos de un documento HTML y una URI (dirección final: documento HTML, fichero, etc.) de destino. CE8. Ser capaz de crear listas de ítems y construir menús con ellas. CE9. Ser capaz de crear tablas y maquetar un sitio web con ellas. CE10. Ser capaz de crear y enviar formularios con campos de entrada de datos identificados. CE11. Saber separar el continente del contenido de un sitio web, es decir, por un lado el estilo y el diseño y por otro los elementos del documento HTML. CE12. Saber la sintaxis básica del lenguaje de las hojas de estilo en cascada (CSS) y ser capaz de incluirlas en un documento HTML. CE13. Ser capaz de dar formato y aplicar estilos de cualquier tipo a un elemento de un documento HTML. CE14. Saber qué es y ser capaz de CE8. Crear listas de ítems en HTML. Combinar la creación de listas de ítems con la de vínculos en HTML para construir menús y listas de enlaces. CE9. Crear tablas de varias filas y celdas en HTML, combinándolas entre sí para maquetar y estructurar un sitio web. CE10. Crear y enviar formularios en HTML con campos de entrada de datos etiquetados con un identificador único. CE11. Separar el estilo y diseño de un sitio web de los elementos HTML. CE12. Conocer la sintaxis básica del lenguaje de las hojas de estilo en cascada. Incluir CSS en un documento HTML. CE13. Dar cualquier formato a los elementos HTML aplicando reglas de estilo CSS. CE14. Aplicar el modelo de cajas mediante el uso de capas en un documento HTML. CE15. Aplicar el tratamiento de una función JavaScript a un evento HTML. CE16. Conocer la sintaxis básica del lenguaje de programación JavaScript. Incluir librerías JS e invocar sus funciones en un documento HTML. Validar formularios del lado del cliente. Incluir y personalizar efectos visuales. CE17. Conocer las reglas básicas del SEO. Aplicar las reglas básicas del SEO. CE18. Interpretar ideas plasmadas en un brief. Transformar los requisitos especificados en un borrador de aproximación a la solución como boceto de sitio web. Curso

8 aplicar el modelo de cajas en sitios web maquetados con capas. CE15. Saber cómo funcionan en HTML los eventos y tratamientos asociados mediante scripts. CE16. Saber la sintaxis básica del lenguaje JavaScript y ser capaz de incluir librerías e invocar funciones JS en un documento HTML. CE17. Saber las reglas básicas de posicionamiento web y optimización de motores de búsqueda y ser capaz de aplicarlas en un sitio web. CE18. Saber cómo interpretar ideas plasmadas en un brief inicial y transformarlas en bocetos de diseño para un sitio web que cumpla los requisitos especificados. CE19. Ser capaz de realizar una propuesta documentada de diseño creativo y artes gráficas definitivas para un sitio web. CE20. Ser capaz de elaborar una documentación posterior al trabajo realizado a modo de memoria de un proyecto web profesional completo. CE21. Ser capaz de exponer con una presentación pública oral un proyecto web profesional completo. CE19. Realizar una propuesta documentada de diseño y artes gráficas definitivas para un sitio web. CE20. Elaborar una documentación posterior al trabajo realizado a modo de memoria de un proyecto web profesional completo. CE21. Exponer con una presentación pública oral un proyecto web profesional completo. Curso

9 5. CONTENIDOS / TEMARIO / UNIDADES DIDÁCTICAS TEMA 1: INTRODUCCIÓN A LA WEB / HTML 1. QUÉ ES WWW? 1. Conceptos básicos: Internet, World Wide Web, linking, web Arquitectura Cliente-Servidor (Local-Remoto) y protocolo HTTP. 3. Navegadores, multiplataforma, estándares y validación (W3C). 2. CÓMO SE HACE? 1. Lenguaje de programación: HTML. 2. Herramientas y entornos de desarrollo. 3. Ciclo de vida del sitio web. 3. PRIMEROS ELEMENTOS DEL LENGUAJE HTML 1. Estructura básica de un documento y etiquetas (tags) HTML. 2. Escritura y formato de texto básicos. Párrafos y encabezados. 3. Inserción y manipulación de imágenes. Reescalado. Rutas y ficheros. 4. Enlazado de páginas (links) y secciones (anclas). Navegación. 4. ENTORNO DE TRABAJO 1. Configuración y controles básicos del IDE (Adobe Dreamweaver). 2. Inserción y edición de elementos web mediante entorno visual. 3. Convenios de reglas de estilo (style-coding) y nomenclatura (naming). TEMA 2: FUNDAMENTOS DE HTML 1. LISTAS 1. Listas ordenadas y desordenadas. Anidación de listas. 2. Creación de menús con listas anidadas y enlaces. 2. TABLAS 1. Construcción y propiedades generales de tablas, filas y celdas. 2. Tablas anidadas. Combinación de celdas. Maquetación básica. 3. FORMULARIOS 1. Concepto de formulario. Envío de datos. Estructura de la información. 2. Campos de entrada de datos (input). Identificación y personalización. Curso

10 TEMA 3: ESTILOS CSS, MODELO DE CAJAS Y CAPAS 1. HOJAS DE ESTILOS EN CASCADA 1. Creación e inclusión de CSS. Separación continente-contenido. 2. Sintaxis básica. Creación de estilos específicos para id, tags y clases. 3. Formatos y lenguaje CSS. Atributos, propiedades y valores comunes. 2. MODELO DE CAJAS Y MAQUETACIÓN CON CAPAS 1. Estructura web y arquitectura de contenidos. 2. Administración del espacio, contenido y posicionamiento. TEMA 4: EVENTOS Y JAVASCRIPT 1. EVENTOS 1. Creación de elementos interactivos mediante eventos (onclick). 2. Inclusión de scripts. Código embebido. Generación de alerts. 2. JAVASCRIPT 1. Fundamentos de Programación: Sintaxis, variables, funciones. 2. Validar formularios. Funciones avanzadas. Introducción a DOM. 3. Envío y recogida de datos por GET. Preproceso de parámetros. 4. Introducción a la animación avanzada por JS: Efectos y librerías. TEMA 5: POSICIONAMIENTO WEB 1. OPTIMIZACIÓN DE MOTORES DE BÚSQUEDA (SEO, SEM) 1. Conceptos: tags, meta, keywords, cross-domain, sitemap, pagerank. 2. Funcionamiento y comportamiento de los spiders de búsqueda. Curso

11 6. CRONOGRAMA Tema 1.1. Qué es WWW? UNIDADES DIDÁCTICAS / TEMAS PERÍODO TEMPORAL Febrero. Tema 1.2. Cómo se hace? Febrero. Tema 1.3. Primeros elementos del lenguaje HTML. Febrero-Marzo. Tema 1.4. Entorno de trabajo. Febrero-Marzo. Tema 2.1. Listas. Marzo. Tema 2.2. Tablas. Marzo. Tema 2.3. Formularios. Marzo-Abril. Tema 3.1. Hojas de estilos en cascada. Abril. Tema 3.2. Modelo de cajas y maquetación con capas. Abril-Mayo. Tema 4.1. Eventos. Mayo. Tema 4.2. Javascript. Mayo. Tema 5.1. Optimización de motores de búsqueda (SEO, SEM). Junio. Curso

12 7. MODALIDADES ORGANIZATIVAS Y MÉTODOS DE ENSEÑANZA MODALIDAD ORGANIZATIVA MÉTODO DE ENSEÑANZA COMPETENCIAS RELACIONADAS HORAS PRESENCIALES HORAS DE TRABAJO AUTÓNOMO TOTAL DE HORAS Clase teórica Clase expositiva (presentación práctica final) Clases prácticas (trabajos prácticos) Estudio y trabajo en grupo (práctica final) Estudio y trabajo autónomo (prácticas) Estudio autónomo (examen) Tutorías (planteamiento y resolución de dudas de la parte teórica) Tutorías (planteamiento y resolución de dudas de la parte práctica) - Lección magistral orientado a proyectos cooperativo orientado a proyectos orientado a proyectos cooperativo orientado a proyectos orientado a proyectos orientado a proyectos orientado a proyectos CG1, CG2, CG3, CE2, CE3, CE11, CE12, CE14, CE15, CE16, CE17, CE CE CE1, CE4, CE5, CE6, CE7, CE8, CE9, CE10, CE12, CE13, CE14, CE16, CE18 CE4, CE5, CE6, CE7, CE8, CE9, CE10, CE12, CE13, CE14, CE16, CE18, CE19, CE20 CE4, CE5, CE6, CE7, CE8, CE9, CE10, CE12, CE13, CE14, CE16, CE18, CE19, CE CG1, CG2, CG CG1, CG2, CG CG1, CG2, CG Examen Curso

13 8. SISTEMA DE EVALUACIÓN ACTIVIDAD DE EVALUACIÓN Examen CRITERIOS DE EVALUACIÓN - Prueba objetiva: Test de 10 preguntas y 4 alternativas por pregunta (cada acierto suma 1 punto, cada error resta 0,5 puntos) VALORACIÓN RESPECTO A LA CALIFICACIÓN FINAL (%) 20% Trabajos Prácticos - Funcionalidad: Solución precisa y eficiente para los requisitos planteados (4 TP x 5%) - Código limpio: Aplicación correcta de reglas de estilo, comentarios y tabulaciones (4 TP x 5%) 40% Práctica Final / Exposición Oral - Funcionalidad: Solución precisa y eficiente para los requisitos planteados (10%) - Código limpio: Aplicación correcta de reglas de estilo, comentarios y tabulaciones (10%) - Documentación: Elaboración de informe bien detallado y presentado en formato digital, explicando fases del trabajo realizado y justificación de las decisiones tomadas (10%) - Exposición pública: Presentación oral del trabajo realizado y la documentación (10%) 40% Trabajo Práctico Opcional - Funcionalidad: Solución precisa y eficiente para los requisitos planteados (5%) - Código limpio: Aplicación correcta de reglas de estilo, comentarios y tabulaciones (5%) +10% Actitud - Especial interés y participación en las clases - Conocimiento continuo de los contenidos de la asignatura debatidos en clase y planteamiento activo de dudas relacionadas con los mismos +5% Curso

14 Consideraciones generales acerca de la evaluación: Para superar la asignatura es necesario aprobar todas las partes por separado (obtener un 50% de su puntuación máxima posible), pudiendo recuperar exclusivamente una vez dentro del mismo curso académico la parte teórica y/o la práctica en convocatoria extraordinaria. Es decir, la parte teórica requiere obtener 1 sobre 2 puntos. La parte práctica se compone de 4 Trabajos Prácticos (TTPP) y una Práctica Final (PF) y se requiere entregar 2 TTPP y la PF. Los TTPP comienzan en clase realizándose de forma individual y bajo la supervisión del profesor, teniendo tiempo suficiente para realizarlos completamente. No obstante se permite terminarlos en casa y entregarlos hasta una semana más tarde, repercutiendo en una reducción de la nota máxima posible. La PF debe realizarse en casa por parejas, permitiendo una clase práctica para supervisión y seguimiento tutorizado del profesor. Finalmente, se expondrá públicamente. Una detección de copia demostrable (al menos 60% de coincidencia) en el código fuente de alguna de las prácticas entregadas supondrá la anulación total de dicha práctica. La asistencia presencial es obligatoria al 80% de las clases El alumno dispondrá de dos formas opcionales de subir nota: 1.Entregando el TP opcional propuesto del Tema 4 (+1 pto) 2.Mostrando buena actitud en las clases (+0,5 ptos) Curso

15 9. BIBLIOGRAFÍA / WEBGRAFÍA Bibliografía básica Oros Cabello, J.C. (2010). Diseño de páginas web con XHTML, Javascript y CSS. 3ª edición. Navegar en Internet. Madrid: Ra-Ma Editorial. Oros Cabello, J.C. (2011). Guía práctica de XHTML, Javascript y CSS. Madrid: Ra-Ma Editorial. López Quijado, J. (2008). Domine XHTML 1.0 y CSS 2. Madrid: Ra-Ma Editorial. López Quijado, J. (2010). Domine JavaScript. 3ª ed. Madrid: Ra-Ma Editorial. Oros Cabello, J.C. (2010). Adobe Dreamweaver CS4 Profesional. Curso Práctico. Válido para Windows y Mac Os X. Incluye CD-ROM. Madrid: Ra-Ma Editorial. Webgrafía básica Javier Eguíluz Pérez. (2009). Introducción a XHTML. Recuperado el 30 de enero de 2012, de: Javier Eguíluz Pérez. (2009). Introducción a CSS. Recuperado el 30 de enero de 2012, de: OBSERVACIONES La evaluación es continua y la asistencia obligatoria. Para poder acogerse al sistema de evaluación continua es precisa la asistencia de al menos un 80% (Se realizan controles de asistencia diariamente). En caso de no superar el porcentaje mínimo de asistencia requerido para la evaluación las calificaciones referentes tanto a trabajos, presentación de proyectos y/o examen no serán evaluados. Curso