ESCUELA SUPERIOR DE

ARQUITECTURA Y TECNOLOGÍA

PLANIFICACIÓN DE LA DOCENCIA UNIVERSITARIA

GUÍA DOCENTE

FUNDAMENTOS DEL

DISEÑO WEB

Curso 2011-2012

1

1. DATOS DE IDENTIFICACIÓN DE LA ASIGNATURA.

Título: Grado en Diseño Multimedia y Gráfico

Facultad: ESAyT

Departamento/Instituto: Diseño Multimedia y Gráfico

Materia: Módulo de Diseño

Denominación de la asignatura: Fundamentos del Diseño Web

Código: 39019

Curso: Segundo

Semestre: Segundo

Tipo de asignatura (básica, obligatoria u

optativa): Obligatoria

Créditos ECTS: 6

Modalidad/es de enseñanza: Presencial

Lengua vehicular: Español

Equipo docente: D. David Carvajal Garrido

Profesor/a: D. David Carvajal Garrido

Grupos: DMG21, DMG22

Despacho: Sala de profesores – 1ª Planta

Teléfono: 915552528

Ext.

E-mail: david.carvajal@esne.es

Página web: www.esne.es

Curso 2011-2012

2

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 2011-2012

3

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 2011-2012

4

4. RESULTADOS DE APRENDIZAJE EN RELACIÓN CON LAS COMPETENCIAS QUE DESARROLLA LA ASIGNATURA.

COMPETENCIAS GENÉRICAS RESULTADOS DE APRENDIZAJE

RELACIONADOS CON LAS 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.

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 2011-2012

5

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 RESULTADOS DE APRENDIZAJE

RELACIONADOS CON LAS 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.

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 2011-2012

6

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 2011-2012

7

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 2011-2012

8

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 2.0. 2. 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 2011-2012

9

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 2011-2012

10

6. CRONOGRAMA

UNIDADES DIDÁCTICAS / TEMAS PERÍODO

TEMPORAL

Tema 1.1. ¿Qué es WWW?

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 2011-2012

11

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 - Lección

magistral

CG1, CG2, CG3, CE2, CE3, CE11,

CE12, CE14, CE15, CE16, CE17, CE18

38 0 38

Clase expositiva (presentación práctica final)

- Aprendizaje orientado a proyectos

- Aprendizaje cooperativo

CE21 2 2 4

Clases prácticas (trabajos prácticos)

- Aprendizaje orientado a proyectos

CE1, CE4, CE5, CE6, CE7, CE8,

CE9, CE10, CE12, CE13, CE14, CE16,

CE18

38 12 50

Estudio y trabajo en

grupo (práctica final)

- Aprendizaje orientado a proyectos

- Aprendizaje cooperativo

CE4, CE5, CE6, CE7, CE8, CE9,

CE10, CE12, CE13, CE14, CE16, CE18, CE19, CE20

0 16 16

Estudio y trabajo

autónomo (prácticas)

- Aprendizaje orientado a proyectos

CE4, CE5, CE6, CE7, CE8, CE9,

CE10, CE12, CE13, CE14, CE16, CE18, CE19, CE20

0 28 28

Estudio autónomo (examen)

- Aprendizaje orientado a proyectos

CG1, CG2, CG3 0 2 2

Tutorías (planteamiento y

resolución de dudas de la parte

teórica)

- Aprendizaje orientado a proyectos

CG1, CG2, CG3 2 0 2

Tutorías (planteamiento y

resolución de dudas de la parte

práctica)

- Aprendizaje orientado a proyectos

CG1, CG2, CG3 8 0 8

Examen 2 0 2

Curso 2011-2012

12

8. SISTEMA DE EVALUACIÓN

ACTIVIDAD DE EVALUACIÓN

CRITERIOS DE EVALUACIÓN

VALORACIÓN RESPECTO A LA

CALIFICACIÓN FINAL (%)

Examen

- Prueba objetiva: Test de 10 preguntas y 4 alternativas por pregunta (cada acierto suma 1 punto, cada error resta 0,5 puntos)

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 2011-2012

13

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 2011-2012

14

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: http://www.librosweb.es/xhtml/index.html

Javier Eguíluz Pérez. (2009). Introducción a CSS. Recuperado el 30 de enero de 2012, de: http://www.librosweb.es/css/index.html

10.- 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.