Secretaría de Extensión Universitaria

Denominación: Diseño y Desarrollo Web

Nivel: Inicial

Docente: Mariano Bertholet

Asistencia requerida : 75%

Carga horaria: 36 horas totales

Cantidad de alumnos: El cupo máximo del curso obedece a las computadoras

disponibles siendo el ideal que cada alumno pueda trabajar de manera

individual.

Requisitos de Inscripción: Para realizar el curso el alumno deberá poseer

previamente un manejo fluido de operación de PC, conocimientos de internet y

correo electrónico.

Fundamentación:

En la actualidad, el diseño de sitios web no es solamente utilizar imágenes y

animaciones de alto impacto en la web, se requiere de personas capacitadas

no sólo en el ámbito estético sino también, y fundamentalmente, en el

desarrollo y armado consciente de cada página que compone un sitio web.

Este es un curso integral que le brinda al alumno las herramientas y

conocimientos necesarios para poder generar sitios estéticamente atractivos,

respetando los estándares de usabilidad y accesibilidad.

El curso apunta a transmitir las nociones básicas del Diseño Web. El principal

propósito es avanzar hacia el conocimiento de diversas tecnologías de manera

que el alumno al finalizar, este en condiciones de desarrollar o modificar un

sitio Web. A su vez se procurara familiarizar a los estudiantes con la utilización

de diferentes lenguajes.

Objetivos :

El objetivo del curso es que el alumno aprenda a crear páginas Web desde el

inicio hasta su publicación en Internet.

Afrontar la estrategia para el diseño y análisis de sitios o aplicaciones web,

teniendo en cuenta las herramientas y tecnologías necesarias para su

implementación.

• Conocer el lenguaje HTML, para crear las páginas Web (HTML 4.1).

• Conocer el lenguaje CSS (hojas de estilo en cascada) para dar formato y

presentación a las páginas (CCS2.1)

• Aprender a utilizar diferentes tecnologías que permiten dotar de efectos

visuales e interactividad a las páginas Web.

• Conocer aspectos prácticos importantes: sitios de alojamiento, reglas de

usabilidad y accesibilidad en el diseño de páginas Web.

El entorno integrado de desarrollo (IDE) a utilizar es BlueGriffon, uno de los

mejores editores web multiplataforma, libre y de código abierto.

Contenidos:

• Introducción al diseño Web

o Etapas

o Fundamentos

o Accesibilidad

o Historia

o Editores

• Añadir texto e imágenes

o Tipografías e imágenes en la Web

o Añadir texto

o Previsualizar páginas en un navegador

o Crear hipervínculos

o Crear listas con viñetas

o Insertar imágenes

o Enlazar imágenes

o Utilizar marcadores de posición de imágenes

• Aplicar estilos a las páginas con CSS

o Que son las hojas de estilos en cascada

o Crear y comprender las hojas de estilo

� En línea, internas y externas

o Comprender porque se denominan en cascada

o Tipos de Estilo

• Crear diseños de páginas con CSS

o El modelo de cajas de CSS

� Nociones básicas sobre márgenes, relleno y bordes

� El elemento <div>

� El selector ID

o Posicionamiento absoluto y relativo

o Diseñar una estructura de página con Div

o Configurar márgenes y bordes

� Anular los márgenes predeterminados

� Añadir bordes a elementos

o Ventajas e inconvenientes de los diseños CSS colocados de

forma absoluta

• Diseño de páginas avanzado

o La propiedad Float

o Crear columnas con HTML y CSS

o Crear una barra de navegación basada en una lista

o Cambiar el diseño y el tamaño de las columnas

o Crear la apariencia de columnas con una altura igual

o Crear diseños más sofisticados

• Trabajar con tablas

o Utilizar tablas en el diseño Web

o Crear una tabla

o Modificar el tamaño de una tabla

o Modificar la estructura de una tabla

o Aplicar formato y estilo a una tabla con HTML

o Aplicar formato y estilo a una tabla con CSS

o Estilos CSS avanzados para las tablas

o Crear estilos de filas alternativos con CSS

• Añadir contenido flash, de video y de sonido

o Conseguir un contenido Web interesante

o Insertar una película flash

o Video QuickTime y Windows Media

o Insertar Sonido

• Construir formularios Web

o Como funcionan los formularios

o Construir un formulario de Contactos

o Añadir elementos al formulario

� Campos de Texto

� Casilla de verificación

� Botones de opción

� Grupos de opciones

� Listas y menús

� Área de texto

� Campo para cargar un archivo

� Botones Enviar y Restablecer

o Aplicar estilos a los formularios con CSS

o Procesamiento y validación de formularios

o Verificar el contenido de una campo

• Introducción a AJAX

o Que es AJAX

o La librería jQUERY

� Qué es jQuery

� Pasos para utilizar jQuery en tu página web

� Traer un contenido con Ajax al pulsar un enlace

� Por qué un mensaje de carga al hacer Ajax

� Preparando el código HTML

� Llamada a Ajax con jQuery y el mensaje de carga

� Utilización de plugins jQuery (Menús, fichas, etc)

• Trabajar con marcos

o Como funcionan los marcos

o Ventajas y desventajas de trabajar con ellos

o Crear conjuntos de marcos

o Configurar las propiedades de los marcos

o Especificar el contenido de un marco

� Asignar destinos a los marcos

� Vínculos con paginas Web externas

� Utilizar _TOP para sustituir un conjunto de marcos

� Añadir contenido <noframes>

• Herramientas útiles de los exploradores para el dis eño Web

o Firebug

• Publicar un sitio Web

o Optimizar las páginas para su publicación

o Añadir títulos a los documentos <title>

o Añadir palabras clave y descripciones <meta>

o Describir imágenes con texto alternativo

o Lista de aspectos que hay que comprobar en un sitio Web

� Dominio

� Hosting

� FTP

Propuesta Didáctica:

La modalidad del dictado de clase será teórico-práctica a cargo del docente y

un componente de práctica en el cual el alumno deberá crear y colocar en línea

un sitio Web aplicando todos los recursos y conocimientos aprendidos en clase.

Criterios de Evaluación:

Al finalizar el curso el alumno deberá presentar, a modo de Trabajo Práctico, el

sitio Web realizado, donde deberá aplicar las herramientas desarrolladas a lo

largo del curso.

Bibliografía:

- VVAA. (2011). Bluegriffon User Manual. EEUU, Floss Manuals. (49 pag.)

- Osborn, J. (2009). Capitulo 3: Añadir texto e imágenes en Diseño y Desarrollo

Web con Dreamweaver CS5. España, Anaya. (400 pag.)

- Osborn, J. (2009) Capitulo 4: Aplicar estilos a las páginas con CSS en Diseño

y Desarrollo Web con Dreamweaver CS5. España, Anaya. (400 pag.)

- Osborn, J. (2009) Capitulo 5: Crear diseños de páginas con CSS en Diseño y

Desarrollo Web con Dreamweaver CS5. España, Anaya. (400 pag.)

- Osborn, J. (2009) Capitulo 6: Diseño de páginas avanzado en Diseño y

Desarrollo Web con Dreamweaver CS5. España, Anaya. (400 pag.)

- Osborn, J. (2009) Capitulo 7: Trabajar con tablas en Diseño y Desarrollo Web

con Dreamweaver CS5. España, Anaya. (400 pag.)

- Osborn, J. (2009). Capitulo 9: Añadir contenido Flash, de video y de sonido

Diseño y Desarrollo Web con Dreamweaver CS5. España, Anaya. (400 pag.)

- Osborn, J. (2009) Capitulo 12: Construir formularios Web en Diseño y

Desarrollo Web con Dreamweaver CS5. España, Anaya. (400 pag.)

- Osborn, J. (2009) Capítulo 15; Utilizar herramientas heredadas: marcos y

tablas en Diseño y Desarrollo Web con Dreamweaver CS5. España, Anaya.

(400 pag.)

Referencias Web:

- VVAA (2012): Diseño Web. (http://es.wikipedia.org/wiki/Diseño_Web),

19/10/2012

- W3C (2012): HTML. (http://es.wikipedia.org/wiki/Html), 19/10/2012

- W3C (2012): CSS. (http://es.wikipedia.org/wiki/CSS), 19/10/2012

- W3C (2012): XML. (http://es.wikipedia.org/wiki/Xml), 19/10/2012

- VVAA (2012): AJAX. (http://es.wikipedia.org/wiki/Ajax), 19/10/2012

- VVAA (2012): Javascript. (http://es.wikipedia.org/wiki/Javascript), 19/10/2012

- Alvarez M. (2012): Manual de jQuery. (http://www.desarrolloweb.com/

manuales/manual-jquery.html),26/10/2012