Este documento describe un curso de diseño y desarrollo web inicial que se llevará a cabo durante 36 horas. El curso enseñará HTML, CSS y otras tecnologías web para que los estudiantes aprendan a crear y modificar sitios web. Los estudiantes aprenderán a agregar texto, imágenes y vínculos a las páginas, aplicar estilos con CSS, crear diseños, agregar contenido interactivo y publicar un sitio web al final del curso.

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

2. 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
o
Fundamentos
o
Accesibilidad
o
Historia
o
•
Etapas
Editores
Añadir texto e imágenes
o
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
•
Tipografías e imágenes en la Web
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

3. o
Crear y comprender las hojas de estilo
En línea, internas y externas
o
o
•
Comprender porque se denominan en cascada
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
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
•
La propiedad Float
Crear diseños más sofisticados
Trabajar con tablas
o
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
•
Utilizar tablas en el diseño Web
Crear estilos de filas alternativos con CSS
Añadir contenido flash, de video y de sonido
o
Conseguir un contenido Web interesante

4. o
o
Video QuickTime y Windows Media
o
•
Insertar una película flash
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
o
Procesamiento y validación de formularios
o
•
Aplicar estilos a los formularios con CSS
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

5. 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 diseñ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.)

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