Diseño Multimedia II (AJAX CSS) P4.8.

068

Departamento al que pertenece Director

Diseño Gráfico Pablo Junquera

Fecha de aprobación en el
Carga horaria
Consejo de Facultad y N° de Acta

68 16/03/2018 Acta Nro. 50

Código(s)
Carrera(s) en la que se dicta
Carrera(s)

Licenciatura en Diseño de la Imagen Visual Plan 6115

Código(s) Correlativa(s) Código(s)

Código(s) Correlativa(s) Precedente(s)
Subsiguiente(s) Carrera(s)

P4.8.104 Trabajo Final de Diseño de la Imagen

P4.8.065 Diseño Multimedia (WEB 2.0) Plan 6115
Visual

Firmas
Aprobación del Director de Departamento emisor Aprobación Decano(s)

1
I – Fundamentación

Dentro del ámbito interactivo, el desarrollo de sitios web, es una de las principales ramas de
producción. Por consecuencia los profesionales deben tener conocimientos sólidos de su
funcionamiento, desarrollo y optimización. Además de entender todo el ecosistema que los rodea
como buscadores y diferentes plataformas como redes sociales y recursos que están a su alcance.

En esta materia los alumnos adquirirán conocimientos y habilidades técnicas sobre el desarrollo de
sitios web y se analizarán diferentes tecnologías como HTML, XML, CSS, AJAX, etc. Se les
enseñara desde el punto de partida de un proyecto cuales son las etapas para un correcto
desarrollo, y cada una de las instancias que intervienen en el proceso. También cual es la manera
correcta de construir un sitio optimizado (SEO) para buscadores y cuales son las herramientas de
promoción (SEM) en Internet.

Al alumno se le brindaran diferentes herramientas para que pueda distinguir y seleccionar los
medios, soportes, lenguajes y plataformas correctas. Además de aprender conceptos básicos de
programación, de hojas de estilo y de cómo diseñar adecuadamente para una correcta
maquetación siguiendo normas de usabilidad y accesibilidad de la W3C.

II – Objetivos

Se espera que los alumnos logren:

- Comprender los fundamentos y las etapas de un proyecto de desarrollo web.

- Sean capaces de producir su propio sitio web utilizando diferentes lenguajes HTML, XML y CSS
para su maquetación.

- Entiendan y conozcan tecnologías como AJAX y JavaScript para desarrollo de sitios dinámicos y
puedan adaptar y utilizar códigos empaquetados de uso libre.

- Puedan optimizar correctamente un sitio para su correcto posicionamiento (SEO) y comprendan

las herramientas de promoción (SEM).

- Entiendan el concepto de base de datos y puedan crear, modificar y realizar consultas simples.

2
III- Unidades temáticas

Unidad 1: Seguridad e Higiene en el uso de los laboratorios

Instalaciones - Alarma de evacuación. Protocolo de evacuación. Reconocimiento de las
instalaciones y sus elementos de seguridad. Teléfonos de emergencia. Uso apropiado de las
instalaciones. Medidas básicas para la prevención de accidentes. Demarcación, orden y limpieza
en las zonas de trabajo. Símbolos, íconos y señalética específica de seguridad. Prohibiciones.
Vestimenta - Indumento básico apropiado para el ingreso a las instalaciones en general. Indumento
específico y de protección requerido según el laboratorio, la práctica y la herramienta. Delantal,
overall, guantes, calzado, cofias, etc. Protecciones - Protección de la piel, ocular, auditiva y
respiratoria. Uso apropiado de los elementos de protección. Riesgos - Choque eléctrico,
atrapamiento (mecánico/lesiones/cortes/punzonamiento, etc) y quemaduras.

Unidad 2: Proyecto web

Diferentes etapas y procesos de un proyecto web. Documentos de alcance. Wireframes. Timeplan

de trabajo. Desarrollo de una identidad visual basada en la web. Aplicación y utilización de un
manual de marca y un Key Visual. Bocetos de diseño. Diseño de sitios web con diferentes
estructuras. Niveles de lectura. Desarrollo de contenido para publicaciones on-line.

Unidad 3: Desarrollo

Repaso de lenguajes HTML y de CSS. Diseño de sitios web para su correcta maquetación en CSS
y aplicación de plantillas de estilo. Conceptos de multiplataforma (Tablets, Mobile y Cross
Browser). Concepto HTML5 y JQuery. Explicación del entorno de trabajo web (S.O./Apache/PHP)
Conceptos de leguajes cliente/servidor (php,javascript,ajax). PHP: Metodología de transferencia de
datos entre páginas (POST y GET).Selección y usos. Creación de un formulario de consulta y
contacto en PHP. Concepto de XML y la utilidad para el diseñador de sitios web. Bases de datos al
servicio de los sitios web. Concepto de base de datos. Consultas simples al servicio de un sitio
web.

Unidad 4: Optimización

Concepto Web 3.0, inteligencia artificial / web semántica. Motores de búsqueda: fundamentos y
funcionamiento. Posicionamiento: fundamentos, conceptos y utilidad para el diseñador web.

3
Funcionamiento técnico de los buscadores (crawlers y spiders).SEO, SEM, Analytics. Normas de
accesibilidad W3C y conceptos de usabilidad. Su uso en la optimización para motores de
búsqueda, normas de trabajo.

IV- Estrategias de enseñanza

Clases expositivas (abiertas a preguntas y consultas durante su desarrollo). Explicación del

marco teórico y práctico de la materia en función de las diferentes unidades temáticas.

Debates conducidos en clase. A partir de consignas específicas se busca guiar un debate para
que los estudiantes construyan sus propias definiciones sobre los temas propuestos.

Esquicios. Desarrollo de clases instrumentales donde estudiantes y docentes desarrollan de forma

conjunta una determinada práctica, técnica o programa.

Trabajos prácticos individuales. Desarrollo de ejercitaciones en clase y domicilio con corrección

y seguimiento de los docentes (tanto de los procesos de diseño como de los productos obtenidos).

Exposiciones grupales de trabajos. Corrección, comentarios y opiniones de docentes y

estudiantes sobre el total de la producción de trabajos realizados del taller.

V- Medios y recursos

Los contenidos de la materia se estructuran a partir de unidades didácticas. Para cumplimentar la

enseñanza de estas unidades se dispone de:

Recursos de Infraestructura

Aulas–Laboratorios informáticos: acondicionada para la realización de trabajos prácticos en

clase, para la realización de exposiciones grupales e individuales de trabajos y para el dictado de
clases expositivas, clases prácticas y debates conducidos.

UADE LABS: Laboratorio Mac / Pc equipado con el software apropiado para el desarrollo de los
contenidos.

Biblioteca: para el acceso a material teórico y práctico básico o complementario.

Recursos Administrativos

Web campus: plataforma digital online que permite el acceso a información, apuntes, notas y
comunicaciones entre todos los integrantes del curso.

4
Recursos Materiales Pedagógicos

Programa de la materia: establece los requerimientos y alcances del curso así como también el
cronograma de actividades.

Material de diapositivas digitales como apoyo para las clases expositivas de carácter teórico y
práctico.

Apunte guía explicitando las condiciones de cursada, los objetivos pedagógicos, el criterio de
evaluación, los requisitos indispensables para la recepción de cada trabajo práctico, los ejercicios y
sus requerimientos específicos y el cronograma.

VI – Evaluación

Condiciones de aprobación de la asignatura

La asignatura requiere la aprobación de dos instancias: la cursada y la evaluación final.

La calificación de los contenidos teóricos y prácticos desarrollados en la cursada, y en el examen final

se realizará en base a una escala numérica de 0 (cero) a 10 (diez). (Resolución Normativa Nº 14/09).

La calificación de reprobado (0 puntos) se impondrá a aquellos alumnos que trasgredan la

honestidad académica, mediante la copia, el plagio u otra acción desleal. Tal calificación podrá
aplicarse en cualquier instancia de evaluación de los aprendizajes prevista en la asignatura. Dicha
calificación implicará automáticamente la pérdida de la condición de cursada y, consecuentemente
la necesidad de recursar la asignatura, consignándose como condición final en el acta
correspondiente la de: “Recursa con nota cero” (cero). Sin perjuicio de lo anteriormente establecido
podrá disponerse la aplicación de sanciones disciplinarias (apercibimiento, suspensión o
expulsión), de acuerdo a la gravedad de la trasgresión y a la reiteración de hechos similares,
conforme al régimen tipificado en la normativa vigente (Resolución Normativa Nº 14/09, Art. N° 22).

Condiciones de aprobación de la cursada

Para aprobar la cursada son requisitos obligatorios:

- Cumplir con las condiciones administrativas necesarias para ser incluido en los listados del curso.
Todo alumno que no aparezca en los listados de la asignatura no podrá ser evaluado ni
permanecer en el curso.

- Cumplir con el 75% de asistencia a la cursada. El docente tiene la obligación de verificar la

asistencia al menos una vez por cada clase, pudiendo tomar lista nuevamente si lo considera
necesario. Si el alumno no se encuentra presente en cualquiera de las veces que el docente

5
 verifica la asistencia, será considerado “Ausente”. No se tendrán en cuenta medias faltas o
llegadas tarde.

- Al finalizar la cursada el alumno recibirá una única nota numérica como evaluación del proceso
de aprendizaje. Esa nota constará en las actas correspondientes y determinará la condición de la
cursada como “Promociona”, “A Final” o “Recursa”. El Director de Departamento determinará
cómo se conforma dicha nota numérica de aprobación de la cursada, estableciendo la cantidad
de instancias de evaluación que considere necesaria, realizando al menos una evaluación
presencial e individual. La aprobación de la cursada debe realizarse con nota igual o superior a 4
(cuatro).

- Será evaluada, como parte del proceso de aprendizaje, la producción que el alumno realice tanto en
clase como en su domicilio. El alumno tendrá la obligación de presentar y corregir el material
producido clase a clase cada vez que lo solicite el docente.

- Para la aprobación de la cursada es indispensable la presentación del total de los ejercicios y

prácticos en tiempo y en forma. La presentación de los ejercicios y prácticos deberá estar
completa y responder al formato indicado por el docente. La presentación de los ejercicios y
prácticos deberá realizarse como máximo dentro de los 35 minutos posteriores al inicio de cada
turno, caso contrario serán considerados como desaprobados.

- Sólo existe una oportunidad de recuperación. La modalidad y características de la misma serán

establecidas previamente por el Director de Departamento en consulta con el equipo docente y se
implementará durante el período de cursado de la materia.

- En aquellas asignaturas que poseen Trabajos Prácticos Obligatorios (TPO) estos deberán ser
entregados en tiempo y en forma como requisito obligatorio de aprobación. En caso de no cumplir
con esta instancia el alumno recursará la materia.

Las correcciones de la materia serán en todos los casos grupales, pudiendo realizarse esta tarea
centrados en la producción de un alumno o en la de varios de ellos. No se realizarán correcciones
por fuera del horario de la cursada. El docente determinará la modalidad de corrección clase a
clase según las condiciones de la misma, la producción de los alumnos y la evolución del curso.

El docente determinará la forma de devolución de trabajos y de notas, pudiendo ser ésta de forma
grupal o individual según las características del ejercicio y del curso.

Materia con trabajo final

En el caso de materias con trabajo final, los alumnos que obtengan una calificación mínima de 7
(siete) puntos en cada una de las entregas parciales (al menos 1 entrega parcial), obtendrán la

6
aprobación de la asignatura mediante la presentación y aprobación del trabajo final. Este sistema
de promoción no permite rendir examen recuperatorio alguno.

Los alumnos que, habiendo aprobado las entregas parciales con un mínimo de 4 (cuatro) puntos y
que no logren la calificación necesaria para la presentación del trabajo final o desaprueben esta
instancia de evaluación, podrán rendir examen final de la asignatura en los 11 (once) turnos de
exámenes finales consecutivos posteriores a la aprobación de la cursada,

Condiciones de aprobación de la evaluación final

Para aprobar la asignatura es requisito obligatorio:

- Cumplir con el régimen de correlativas establecido por la Universidad.

- Aprobar el examen final de carácter obligatorio, presencial e individual con una nota mínima de 4
(cuatro) puntos dentro de los 11 (once) turnos que la Universidad establezca a tal efecto.

El examen final es de carácter integrador e incluye: todos los contenidos y objetivos que se
explicitan en el presente Programa Analítico, debiéndose presentar toda la producción práctica y
desarrollo teórico realizados a lo largo de la cursada.

VII- Bibliografía

• Básica:

- Pardo Niebla, Miguel. Guía visual de creación y diseño web. Edición Madrid: Anaya
Multimedia, c2011. Código de Biblioteca: 004:655.26 PAR GUI 2011.

- Valdés-Miranda Cros, Cluadia. Manual imprescindible de Dreamweaver CS4. Madrid:

Anaya Multimedia, 2009. ISBN: 9788441525894. Código biblioteca: 004:655.26 VAL DRE
2009. Capítulos: 1,7, 8, 11,12, 13 y 14.

- Ledford, Jerri L. SEO: optimización del posicionamiento en buscadores. Madrid: Anaya

Multimedia, 2009. ISBN: 9788441524705. Código biblioteca: 004.738.52 LED SEO 2009.
Capítulos: 1,2,3,4,5,6,16,17 y 18.

• Bibliografía complementaria:

- Maciá Domene, Fernando. Técnicas avanzadas de posicionamiento en buscadores:

arquitectura de la información y optimización on page. Madrid: Anaya Multimedia, 2011.
ISBN: 9788441529632. Código biblioteca: 004.738.52 MAC TEC 2011.

7
 - Normas de accesibilidad W3C: http://www.w3.org/

- Ledford, Jerri L. SEO : optimización del posicionamiento en buscadores. Madrid: Anaya

Multimedia, 2009. ISBN: 9788441524705. Código biblioteca: 004.738.52 LED SEO 2009.

- Valdés-Miranda Cros, Cluadia. Manual imprescindible de Dreamweaver CS4. Madrid:

Anaya Multimedia, 2009. ISBN: 9788441525894. Código biblioteca: 004:655.26 VAL DRE
2009. Capítulos: 1,7,8, 11,12, 13 y 14.

- VIII – Cronograma tipo modalidad presencial

Clase Unidad didáctica/Temas

• Bienvenida. Presentación del curso, cronograma, trabajos

prácticos, dinámica de clase y evaluaciones.
• LANZAMIENTO TP1: Planificación + diseño sitio web
Teórica : Diferentes etapas y procesos de un proyecto web /
1 Equipo de trabajo utilizando SCRUM
8/8 • Práctica :
1) Roles en el desarrollo de un sitio web.
2) Repaso HTML y CSS / Web console.
• Tarea : Armado de grupos y presentación: selección ONG y
temática para sitio web, recopilación e investigación.

• Teórica : Documento de alcance. Presupuesto. Planificación.

Mapa del sitio.
• Práctica :
2 1) Presentación de proyectos por grupo y corrección.
15/8 2) Armado de mapa de sitio por grupo: organización de
contenido para secciones.
• Tarea : mapa del sitio, documento de alcance, wireframes
versión desktop / Videotutorial + quiz online.

• Teórica : Introducción a diseño responsive (adaptación

wireframes)
• Práctica :
1) Planteo de wireframes (responsive) en papel a partir de
3
un sitio existente.
22/8
2) Corrección de tarea de cada grupo
• Tarea : investigación y selección de referentes
visuales, moodboard, propuesta de pautas gráficas para el
sitio, contenido (boceto).

• Teórica : Identidad visual de un proyecto web. Constantes y

4 variables.
29/8 • Práctica :
1) Corrección de referencias visuales y propuestas de

8
 diseño.
2) Componentes web. Definición de clases CSS.
• Tarea : Cerrar diseño de home y maquetar componentes.

• Práctica :
1) Maquetación: grillas y columnas.
2) Pre-entrega TP1. Corrección
5
Teórica :
5/9
1) Guía: Del diseño a la maquetación
2) LANZAMIENTO TP2
• Tarea : Maquetación de home y elementos comunes.

ENTREGA TP1: Corrección, nivelación, devolución y reflexión

grupal.
6
• Práctica : corrección maquetado inicial, resolución de dudas
12/9
• Tarea : Avanzar con maquetación de layout y elementos
comunes del sitio. Asignar temas dos grupos.

• Teórica : Introducción a formularios y validación. Introducción a PHP: sintaxis

básica, variables y métodos.
• Práctica :
7 1) Formulario y validación HTML
19/9 2) Revisión y consultas sobre proyectos.
3) Prueba de sintaxis y armado de partials.
• Tarea : Armado de formulario. Videotutorial PHP + quiz. Abstracción de secciones
comunes en partials.

• Práctica :
8 1) Revisión de tarea maquetada.
26/9 2) Ejercicio intergrupal sobre situaciones comunes en el
ausente proceso de maquetación. Grupos expertos .
• Tarea : Avanzar con la maquetación incluyendo lo incorporado en clase.

• Práctica :
9
1) Presentación del avance del proyecto al suplente de la catedra.
3/10
2) Revisión del avance según las correcciones del suplente de la cátedra.
ausente
• Tarea : Avanzar con la maquetación incluyendo lo incorporado en clase.

Teórica : Estrategias SEO + SEM. Herramientas técnicas -

Analytics
10
• Práctica : Propuesta de estrategias y definición de keywords.
10/10
• Tarea : Definir estrategia SEO + SEM. Incluir estrategia SEO en
TP (metas, alt, optimización, etc)

PARCIAL TEÓRICO.
• Teórica : Servidores y FTP.
11 • Práctica : conexión con servidores UADE, transferencia de
17/10 archivos.
• Tarea : pruebas online: comenzar a subir archivos al servidor.
Videotutorial AJAX + quiz online.

Teórica : Envío de formularios con PHP (via mail). Introducción

12 a AJAX
24/10 • Práctica : Envío de formulario de manera asíncrona.
• Tarea: implementar envío en proyecto grupal (servidor online)

13 PRE-ENTREGA TP2. Corrección general y por grupo. Revisión

9
31/10 de pautas de entrega.

14
7/11 ENTREGA TP2. Presentación de proyectos. Corrección general.

15
Devolución de notas / Pautas examen final
14/11

16
Repaso general
21/11

17
Recuperatorio
28/11

18
EXAMEN FINAL REGULAR

10