MPW013

Diseo Web
Asignatura: Diseo Web
Carcter: Obligatorio
Idioma: Castellano
Modalidad: Presencial
Crditos: 4 ECTS
Semestre: 1
Grupo: MPW16
Profesores/Equipo Docente: Dra. Mar Ramos Rodrguez
D. Adrin Herrero Montoya

1. REQUISITOS PREVIOS
Licenciatura o grado.

2. BREVE DESCRIPCIN DE CONTENIDOS

Obtener los fundamentos para la publicacin y construccin desde cero de sitios web en base a
criterios personalizados a travs del empleo de gestores de contenido. Profundizacin en los procesos
y herramientas para planificacin, diseo e implementacin de contenidos web multimedia que
consoliden la experiencia de usuario.

3. COMPETENCIAS Y RESULTADOS DEL APRENDIZAJE

Competencias generales
Obtener una visin global de los procesos de construccin web: diseo, arquitectura de la informacin,
usabilidad y experiencia de usuario.
Utilizar el ingenio y desarrollar la creatividad especialmente en los procesos comunicativos que
requieran un alto grado de competitividad y profesionalidad para su resolucin.
Manejar de manera avanzada de las herramientas digitales, de indispensable dominio en el periodismo
web. Adoptar una actitud abierta frente a los constantes cambios y avances tecnolgicos.
Competencias especficas
Conocer y comprender los conceptos avanzados sobre el diseo y la arquitectura web, as como las
tcnicas informticas para la representacin y transmisin de hechos y datos.
Poner en prctica los lenguajes de maquetacin web para el desarrollo de sitios web y emplear los
fundamentos de los lenguajes de programacin orientados a objetos.
Disear y editar contenidos digitales considerando los principios de programacin, la convivencia 2.0 y
la diversidad de soportes con un manejo avanzado de los diferentes gestores de contenido.
Emplear los fundamentos estticos y tcnicos de edicin fotogrfica para un uso profesional
combinando un carcter terico-prctico.
Resultados de aprendizaje:
Utilizacin correcta de cmaras y dispositivos mviles. Montaje de contenidos audiovisuales.
Conocimiento del diseo de portales y sitios web y sobre programacin y codificacin en el entorno
digital.

4. ACTIVIDADES FORMATIVAS Y METODOLOGA

Clases de teora y prctica: 30 h. Todas las competencias de la materia.

2016-2017 / Diseo Web [2] 11/10/2016

 Trabajo personal del alumno: 50 h. Todas las competencias de la materia.

Evaluacin: 10 h. Todas las competencias de la materia.

Tutoras: 10 h. Se realizarn tutoras individuales y conjuntas donde se supervisarn los trabajos

que se estn llevando a cabo en la asignatura y se pondrn en claro algunos contenidos y
competencias que necesiten ser esclarecidos. Todas las competencias de la materia.

5. SISTEMA DE EVALUACIN
Convocatoria Ordinaria:
Asistencia y participacin: 10%.
Actividades acadmicas dirigidas: 40%.
Prueba final: 50%

Restricciones y explicacin de la ponderacin: Para poder hacer media con las ponderaciones
anteriores ser necesario obtener al menos una calificacin de 5 en la prueba final. El alumno podr
presentar de nuevo los trabajos, una vez han sido evaluados por el profesor y siempre antes del examen
de la convocatoria ordinaria, si desea mejorar la calificacin obtenida. El alumno que injustificadamente
deje de asistir a ms de un 25% de las clases presenciales podr verse privado del derecho a
examinarse en la convocatoria ordinaria.
Las actividades acadmicas dirigidas, que supondrn un 40% de la evaluacin final, consistirn en:
- Actividad dirigida 1: En parejas, realizar un cartn de promocin para redes sociales de
temtica asignada por el profesor.

- Actividad dirigida 2: En parejas, replicar un pster de cine utilizando Adobe Photoshop

empleando los conocimientos obtenidos. El pster ser asignado por el profesor.

- Actividad dirigida 3: Formar un equipo de 4 5 alumnos para abordar el site que se desarrollar
a lo largo de la asignatura. El profesor asignar una temtica a cada grupo y este presentar
una propuesta de desarrollo. Esta propuesta deber designar un nombre para el site, diseo de
interfaz y arquitectura justificada, y una planificacin inicial de contenidos. Se adjuntar un
boceto que ilustre y justifique la propuesta. El profesor se reunir con el grupo para contribuir
y consolidar la propuesta. Avanzar con el desarrollo de diseo del site. Elaborar un mock-up con
Photoshop de las principales secciones del sitio que represente de una manera ms detallada
la arquitectura y la lnea grfica escogida a seguir en escritorio y dispositivos. Presentacin de
logotipo, administracin de color, estructura y organizacin de contenido, tipografas
escogidas, navegacin, iconografa, etc. El profesor se reunir con el grupo para contribuir y
consolidar la propuesta. Implementacin del diseo propuesto anteriormente en el sitio
Wordpress y configuracin.

- Actividad dirigida 4: Elaboracin de 2 montajes de tema libre en Adobe Photoshop, integracin

de varios mdulos de contenido y elaboracin de una infografa de datos para el site.

La prueba final consistir en dos partes:

- El perfeccionamiento y finalizacin de la implementacin del diseo del site trabajado en las
actividades dirigidas. Se abordarn aquellos errores y mejoras de ampliacin que ha planteado
el profesor durante las clases. Se adjuntar una memoria que resuma el proyecto.
- Un test de 20 preguntas que evale los conocimientos obtenidos durante la asignatura.

Convocatoria Extraordinaria:
La calificacin final de la convocatoria se obtiene como suma ponderada entre la nota de la prueba
final extraordinaria y las calificaciones obtenidas por las actividades dirigidas en convocatoria
ordinaria, siempre que la nota del examen extraordinario sea igual o superior a 5. Asimismo, ser

2016-2017 / Diseo Web [3] 11/10/2016

potestad del profesor solicitar y evaluar de nuevo las actividades dirigidas si stas no han sido
entregadas en fecha, no han sido aprobadas o se desea mejorar la nota obtenida en convocatoria
ordinaria.

Advertencias sobre plagios

La Facultad de Ciencias de la Comunicacin no tolerar en ningn caso el plagio o copia. Se considerar
plagio la reproduccin de prrafos a partir de textos de auditora distinta a la del estudiante (Internet,
libros, artculos, trabajos de compaeros...), cuando no se cite la fuente original de la que provienen. En
caso de detectarse este tipo de prcticas la sancin consistir en el suspenso de la asignatura en la
convocatoria correspondiente.

6. BIBLIOGRAFA

Bibliografa bsica

- Clemente, P. (2013). Diseo web adaptativo, Madrid: Anaya Multimedia.

- Delgado, J. (2012). Manual imprescindible de Photoshop CS6, Madrid: Anaya
Multimedia.
- Gauchat, J. (2013). El gran libro de HTML5, CSS3 y Javascript, Barcelona: Marcombo.
- MacDonald, M. (2014). Creacin y Diseo web, Madrid: Anaya Multimedia.
- Niebla, P. (2014). Gua visual de creacin y diseo web, Madrid: Anaya Multimedia.

Bibliografa complementaria

- Aubry, C. (2015). Wordpress. Diseo y personalizacin de temas, Barcelona: Eni.

- Banga, C. y Weinhold, J. (2014). Essential Mobile Interaction Design: Perfecting Interface
Design in Mobile Apps (Usability), Reading: Addison-Wesley.
- Garret, J.J. (2011). The Elements of User Experience: User-Centered Design for the Web
and Beyond, Reading: Addison-Wesley.
- Hartson, R. y Pyla, P. (2012). The UX Book: Process and Guidelines for Ensuring a Quality
User Experience, San Francisco: Morgan Kaufmann.
- Levin, M. (2014). Designing Multi-Device Experiences: An Ecosystem Approach to User
Experiences across Devices, Newton: O'Reilly Media.
- Nielsen, J. (2006). Usabilidad. Prioridad en el diseo Web (Diseo Y Creatividad), Madrid:
Anaya Multimedia.
- Van Lancker, L. (2014). jQuery. El Framework JavaScript De La Web 2.0, Barcelona: Eni.
- Varios autores (2013). Typography Best Practices, Freiburg: Smashing Media GmbH.
- Williams, B., Damstra, D. y Stern, H. (2015). Wordpress 4.1. Diseo y desarrollo, Madrid:
Anaya Multimedia.

Webgrafa

- Varios (2016, 20 de febrero). Tendencias de diseo web para 2016, Idearium 3.0.
Disponible en: http://www.idearium30.com/tendencias-de-diseno-web-para-2016-i197
A lo largo del curso se recomendar webgrafa actualizada y relacionada con contenidos
concretos.

7. BREVE CURRICULUM
Mar Ramos Rodrguez es Doctora en Bellas Artes y licenciada en Ciencias de la Imagen por la
Universidad Complutense de Madrid. Profesora en la Universidad Nebrija en programas de grado
y posgrado en las reas de Periodismo, Publicidad y Comunicacin Audiovisual desde 1997.
Actualmente coordinadora acadmica del mster en Direccin y realizacin de series de ficcin.
Sus reas de investigacin son la educacin artstica en Educacin Superior y la comunicacin en

2016-2017 / Diseo Web [4] 11/10/2016

reas de ficcin y entretenimiento. Su prctica profesional se ha desarrollado en el mundo de la
fotografa, la produccin audiovisual y el diseo grfico, web y editorial. Destaca su experiencia
laboral en el mundo de la publicidad de cine, en estudios de diseo y en la productora y
distribuidora cinematogrfica CineCompany, as como en las empresas de comunicacin editorial
Grupo Zeta y Vocento.

Adrin Herrero Montoya es graduado en Comunicacin Audiovisual por la Universidad Rey Juan Carlos
de Madrid. En 2013 se incorpor al equipo de Diseo Grfico y Desarrollo Web de Atresmedia Digital
(Antena 3, Onda Cero, la Sexta, Europa FM y Meloda FM) y forma parte activa del desarrollo y
renovacin de los portales web del grupo en el mbito grfico y tcnico. Paralelamente, trabaja desde
hace aos como diseador web y grfico por cuenta propia.

8. LOCALIZACIN DEL PROFESOR

Campus de Madrid-Princesa.

C/ Santa Cruz de Marcenado, 27, 28015 Madrid

Tutoras: previa solicitud a travs del correo electrnico. Preferentemente despus de las clases.

mramos@nebrija.es

aherrero@nebrija.es

2016-2017 / Diseo Web [5] 11/10/2016

9. CONTENIDO DETALLADO DE LA ASIGNATURA

TTULO: Mster en Periodismo Digital

CURSO ACADMICO: 2016-2017
ASIGNATURA: Diseo Web
SEMESTRE: 1 CRDITOS ECTS: 4

Presenciales
Sesiones de Teora, Estudio individual y Horas/Semana Estudio
Sesin

Horas
Prctica y Evaluacin trabajos prcticos terico/prctico y trabajo.
continua del alumno Mx. 7 horas
semanales como media

Introduccin al diseo Prctica 1: Ver

web: varios tipos de
Softwares para el
1) Fundamentos, diseo web en
conceptos bsicos, internet para
1 1,5
maquetacin web. entender la teora y
tener participacin
2) Softwares para de opinin.
maquetar. Ventajas y
desventajas.

3) Tipos de sitios web, Prctica 2: Ver

partes visuales de una varios tipos de sites
web, tendencias, tipos y entornos web en
de contenidos, internet para
diferencias y diseo entender la teora.
web adaptativo.
2 1,5
4) Contenidos
Multimedia.

5) Color, composicin,
tipografas de diseo,
imagen y vdeo: usos y
formatos.

Adobe Prctica 3:
Photoshop: Ejercicios de
Photoshop para
3 1) Introduccin bsica tener una toma de 1,5
contacto con el
2) Entorno: interfaz y software.
herramientas.

3) Pinceles, texto, Prctica 4: Edicin

selecciones y formas. de fotografas de
4 1,5
actualidad.
4) Sistema de capas.

2016-2017 / Diseo Web [6] 11/10/2016

 5) Iluminacin,
recortes, encuadres y
correccin enfocada a
periodistas.

Prctica 5:
Crear una cabecera
o logo
personalizado para
redes sociales,
6) Elaboracin de edicin de imgenes
grficos, cartones de de prensa.
promocin y perfiles
5 1,5
para redes sociales.
Actividad dirigida 1:
En parejas, realizar
un cartn de
promocin para
redes sociales de
temtica asignada
por el profesor.

Actividad dirigida 2:
En parejas, replicar
6) Edicin avanzada de un pster de cine
fotografa: borrador, utilizando Adobe
texturas, mscaras, Photoshop
6 1.5
fusin, ojos rojos, empleando los
correccin de conocimientos
imperfecciones. obtenidos. El pster
ser asignado por el
profesor.

Actividad dirigida 3:
Formar un equipo de
4 5 alumnos para
abordar el site que
se desarrollar a lo
Gestores de largo de la
contenidos: asignatura. El
Introduccin, ventajas y profesor asignar
diferencias. una temtica a cada
7 1,5
grupo y este
WordPress I: presentar una
propuesta de
Introduccin. desarrollo. Esta
propuesta deber
designar un nombre
para el site, diseo
de interfaz y
arquitectura
justificada, y una

2016-2017 / Diseo Web [7] 11/10/2016

 planificacin inicial
de contenidos. Se
adjuntar un boceto
que ilustre y
justifique la
propuesta. El
profesor se reunir
con el grupo para
contribuir y
consolidar la
propuesta.

1) Anlisis de hostings, Prctica 6: Registrar

eleccin y registro para una cuenta de
8 establecer el entorno hosting y 1,5
de desarrollo de familiarizarse con
trabajo. sus caractersticas.

Prctica 7:
Descarga,
instalacin y puesta
en marcha de
2) Instalacin.
Wordpress en un
3) Iniciacin a FTP y
hosting subiendo
9 PHPMyadmin. 1,5
los ficheros a travs
Comprobaciones de
de FTP. Conectar el
funcionamiento.
sitio con una base
de datos MYSQL
previamente
configurada.

Prctica 8: Primer
4) Panel administrador post, establecer
10 y Herramientas configuraciones 1,5
5) Ajustes bsicas de
Wordpress.

WordPress II: Prctica 9: Insertar

vdeos y fotografas,
1) Insercin de configuracin del
contenido Multimedia. men de la pgina
11 2) Jerarquizacin de conforme a un 1,5
contenido. criterio establecido.
3) Entradas.
4) Pginas.

5) Introduccin al Prctica 10:

sistema de plugins. Instalacin de
12 5) Sistema de plugins. 1,5
participacin y
comentarios.

2016-2017 / Diseo Web [8] 11/10/2016

 WordPress III: Actividad dirigida 3
(continuacin):
Avanzar con el
1) Apariencia desarrollo de diseo
2) Templates del site. Elaborar un
mock-up con
Photoshop de las
principales
secciones del sitio
que represente de
una manera ms
detallada la
arquitectura y la
lnea grfica
escogida a seguir en
escritorio y
13 1,5
dispositivos.
Presentacin de
logotipo,
administracin de
color, estructura y
organizacin de
contenido,
tipografas
escogidas,
navegacin,
iconografa, etc. El
profesor se reunir
con el grupo para
contribuir y
consolidar la
propuesta.

3) Editar temas. Prctica 11:

(Empleo de cdigo Visionado de
14
HTML y CSS y jQuery) ejemplos de
plantillas de
5) Mantenimiento: WordPress y sites
antivirus, recuperacin dnde podemos
frente a un ataque y obtener material.
actualizaciones.
Prctica 12: edicin
15 de los ficheros PHP 4,5
y CSS de la plantilla.

Actividad dirigida 3
(continuacin):
Implementacin del
diseo propuesto
16 anteriormente en el
sitio Wordpress y
configuracin.

17 Promocin: Prctica 13: 1,5

Visionado de

2016-2017 / Diseo Web [9] 11/10/2016

 1) Diseo de diferentes tipos y
Newsletters. Enfoque ejemplos de
de HTML y Newsletters y
herramientas para Banners en internet.
newsletters.
2) Diseo de campaas
de publicidad.

Desarrollo de un sitio
web: Prctica 14:
Elaborar un
1) Planificacin documento de
18 1,5
2) Estructura propuesta web
3) Preparacin de enfocado a la
contenidos. entrega a un cliente.
4) Prototipo.

Actividad dirigida 4:
Elaboracin de 2
Herramientas digitales montajes de tema
para periodistas libre en Adobe
Photoshop,
19 1) Mapas, estadsticas, integracin de 1,5
datos, mdulos para varios mdulos de
embeber, etc. contenido y
elaboracin de una
infografa de datos
para el site.

Anlisis previo a la
entrega del trabajo
final. Definicin de
objetivos, correcciones
20 y propuestas. 1,5

Preguntas y
conclusiones del
curso.

Evaluacin Final
3
Ordinaria
Evaluacin Final
Evaluacin 3
Extraordinaria
Actividades de
4
Evaluacin
Tutoras (para todo el grupo, presenciales y/o
10
online)
50 50
Total
100

2016-2017 / Diseo Web [10] 11/10/2016