UNIVERSIDAD CATÓLICA ANDRÉS BELLO Facultad de Humanidades y Educación Escuela de Comunicación Social Pensum Semestral PROGRAMA DE DISEÑO Y DESARROLLO DE PÁGINAS WEB Nombre de la Asignatura: Diseño y Desarrollo de Páginas Web Semestre:8vo, 9no, 10mo Nro horas: 32horas Materia de evaluación continúa INTRODUCCIÓN ARTS Instituto busca que sus estudiantes desarrollen sitios web basados en estándares, logrando proyectos en donde logre diseñar de forma visual o directamente sobre el código y desarrolle páginas con sistemas de gestión de contenido. Con el uso de esta herramienta se podrá plantear propuestas basadas en las potentes herramientas de CSS y se le permitirá mantener un lenguaje común funcional en los diversos navegadores existentes. OBJETIVO GENERAL •
Elaborar páginas web y dotarlas de personalidad grafica, haciendo uso de “Hojas de Estilo de Cascada” o Cascading Style Sheets: CSS
OBJETIVOS ESPECÍFICOS • • • •
Desarrollar un sitio y dotarlo de navegabilidad Incorporar elementos de diseño desarrollados en otras aplicaciones, videos de extensión .mov y .flv y componentes de flash: video y documentos .swf Dotar de personalidad grafica a los tags de html Desarrollar un flujo de trabajo con una solución comunicativa, sitio web, haciendo uso de la aplicación Dreamweaver y de su capacidad para integrar distintas piezas comunicativas: imágenes, animaciones, música, videos y texto en una pieza multimedia para ser publicada online
CONTENIDO PROGRAMÁTICO UNIDAD I: INTRODUCCIÓN 1. Filosofías para acometer proyectos web a. Filosofìa del diseño b. Filosofía del usuario c. Filosofía de la integración.
Aprobado por el Consejo de la Facultad de Humanidades y Educación en su reunión del 22 de enero del 2001
2. Tendencias de la web moderna a. El consumo web. b. Publicidad en la web. c. Contenido. i. Contenido generado por el usuario y redes sociales. ii. Juegos interactividad. iii. Ejemplos de campañas exitosas. 3. Introducción a los sites dinámicos a. ¿Qué son servidores de aplicación? b. ¿Qué son las bases de datos? c. ¿Cómo funcionan los sites dinámicos? d. Ejemplos de sites dinámicos •
Bibliografía: Dreamweaver CS5 Essential Training, Autor: James Williamson, Lynda. Com http://www.lynda.com/home/DisplayCourse.aspx?lpk2=58712 • Lowery, Joseph W. - Dreamweaver CS4 bible • ADOBE DREAMWEAVER CS3 Autor, David Karlin Dedicación en tiempo: 10%
UNIDAD II: GENERALIDADES 4. Entorno de trabajo. a. Tipos de archivo que maneja dreamweaver. b. Diferencia entre páginas y sitios. c. Definir un sitio. d. La carpeta raíz, la carpeta de assets. e. Paneles más utilizados f. Las preferencias. •
Bibliografía: Dreamweaver CS5 Essential Training, Autor: James Williamson, Lynda. Com http://www.lynda.com/home/DisplayCourse.aspx?lpk2=58712 • Lowery, Joseph W. - Dreamweaver CS4 bible • ADOBE DREAMWEAVER CS3 Autor, David Karlin
UNIDAD III: ESTRUCTURA 5. Crear una tabla a. El código de la tabla. b. Las celdas y las filas. c. El panel de propiedades con la tabla. d. El tag inspector con la tabla. 6. Añadir una imagen. a. La accesibilidad entendida a través de la imagen.
Aprobado por el Consejo de la Facultad de Humanidades y Educación en su reunión del 22 de enero del 2001
b. El panel de insert, el panel de files, el panel de Assets para insertar una imagen. c. El image placeholder. d. Cambiar el src de una imagen. 7. Añadir texto a. La estructura de un texto. El párrafo, los headings, el título. 8. La plantilla. a. Regiones editables b. Regiones repetibles c. Regiones opcionales. d. Crear otros htmls, convenciones sobre nombres de archivo. e. Aplicar una plantilla a otros htmls. f. Desadjuntar una plantilla. 9. Navegación a. La navegación interna. b. La navegación a vínculos externos (links y direcciones de mail) c. Convenciones de uso entre blank, parent y self). d. Navegación por anclaje. e. Navegación por mapa de imágenes. f. Introducción a los params. 10. El código HTML. a. Filosofìa de las etiquetas. b. La etiqueta de head y la etiqueta de body. c. Atributos, parámetros y valores. d. Añadir estilos a una etiqueta desde html. e. La etiqueta de DIV y su importancia. f. Envolver un texto con un div y agregar una barra de scroll. g. La etiqueta de marquee y la personalización de sus opciones como ejemplo para explicare el funcionamiento de Dreamweaver con las etiquetas html. h. Los comentarios. 11. Comportamientos (Javascript) a. Imágenes de rollover. a. El swap image. b. Efectos de Javascript incluidos dentro de Dreamweaver.
12. Incorporar javascript externos a. Como maneja dreamweaver los archivos de javascript. b. Javascript embebido vs javascript vinculado. Aprobado por el Consejo de la Facultad de Humanidades y Educación en su reunión del 22 de enero del 2001
c. Personalización de un comportamiento de javascript. d. Ejemplos de javascripts preprogramados. 13. Posicionamiento a. ¿qué es posicionamiento? b. Factores que influyen en el posicionamiento c. Meta Tags •
Bibliografía: Dreamweaver CS5 Essential Training, Autor: James Williamson, Lynda. Com http://www.lynda.com/home/DisplayCourse.aspx?lpk2=58712 • Lowery, Joseph W. - Dreamweaver CS4 bible • ADOBE DREAMWEAVER CS3 Autor, David Karlin Dedicación en tiempo: 30%
UNIDAD IV: APARIENCIA 14. ¿Qué son los estilos de cascada? a. Selectores b. Reglas. c. Los tags, las clases y los ID’s. 15. Panel de page properties. a. Apariencia general del sitio. b. Pestaña de HTML vs pestaña de CSS 16. Panel de estilos. a. Aplicar estilos a tags. b. Modificar los estilos de tags. c. Categorías de estilo en la ventana de diálogo de Dreamweaver. d. Aplicar estilo de clase. 17. Los ID’s a. Importancia de los ID’s. b. Tags dentro de ID’s. c. Especificidad. 18. Las Pseudo-clases. 19. Estilos embebidos Vs Estilos vinculados. a. Mover reglas de estilo. b. Adjuntar hoja de estilos a otros documentos. 20. Hojas de estilo para distintos medios.
Aprobado por el Consejo de la Facultad de Humanidades y Educación en su reunión del 22 de enero del 2001
a. Diferenciar las hojas de estilo. b. Ejemplos de trabajar con una hoja de estilo para impresión y otra para pantalla. 21. El modelo de la caja. a. Positioning. b. Float y clearing. c. Crear un sitio con DIVS. d. Los anchos porcentuales. e. Usar float. f. Float para ajustar texto. g. Tips de uso de float y clearing. 22. Spry. a. b. c. d. e. f. g. h.
¿Qué es un spry? El menú desplegable. Trabajar con la hoja de estilo de un elemento spry. El panel de acordeón. Los paneles de content, el height y el overflow. Modificar el comportamiento de un spry a través de su archivo J.S. El panel de TAB. El panel colapsable
23. Reglas de CSS3. a. El borde redondeado. b. El sombreado del borde. c. La imagen transparente. •
Bibliografía: Dreamweaver CS5 Essential Training, Autor: James Williamson, Lynda. Com http://www.lynda.com/home/DisplayCourse.aspx?lpk2=58712 • Lowery, Joseph W. - Dreamweaver CS4 bible • ADOBE DREAMWEAVER CS3 Autor, David Karlin Dedicación en tiempo: 30%
UNIDAD V: TRABAJAR CON UN SERVIDOR 24. Registro de dominio y hospedaje. 25. Servidores gratis. 26. Conexión de Dreamweaver con un servidor, pestaña de información remota.
Aprobado por el Consejo de la Facultad de Humanidades y Educación en su reunión del 22 de enero del 2001
27. Servidor de prueba y para qué sirve. a. Páginas PHP, explicación de los servidores que tienen instalado el servidor de aplicación y la base de datos MySql b. Las dos pestañas (remoto y local) subir un archivo con put, traer un archivo con get. 28. El panel de administración de un sitio web. a. Las cuentas de correo. b. Administrador de archivos c. MySQL. d. PHPMyadmin. e. Fantastico autoinstaller y herramientas de la web 2.0. •
Bibliografía: Dreamweaver CS5 Essential Training, Autor: James Williamson, Lynda. Com http://www.lynda.com/home/DisplayCourse.aspx?lpk2=58712 • Lowery, Joseph W. - Dreamweaver CS4 bible • ADOBE DREAMWEAVER CS3 Autor, David Karlin Dedicación en tiempo: (10%)
UNIDAD VI: WEB 2.0, gestores de contenido, redes sociales, aplicaciones de Flash. 29. Las redes sociales. a. Uso de Twitter e importancia. b. Uso de Facebook e importancia. c. Uso de de LinkedIn e importancia. d. Ejemplos de uso y ventajas. e. Incorporación de widgets de redes sociales a un proyecto web. 30. Los gestores de contenido y su uso. a. Joomla, Typolight, Drupal b. Ejemplos de uso. c. Para que sirven pa-RA-QUE-NO-sirven. d. Gestores de contenido especializados. Ejemplo: Moodle y Blackboard para educación. 31. Herramientas de flash para contenido generado por el usuario. a. Dipity. b. U-Mapper. c. Prezi. d. Issuu. e. Incorporación de widgets a un proyecto web de dreamweaver. •
Bibliografía: Dreamweaver CS5 Essential Training, Autor: James Williamson, Lynda. Com http://www.lynda.com/home/DisplayCourse.aspx?lpk2=58712
Aprobado por el Consejo de la Facultad de Humanidades y Educación en su reunión del 22 de enero del 2001
•
• Lowery, Joseph W. - Dreamweaver CS4 bible ADOBE DREAMWEAVER CS3 Autor, David Karlin Dedicación en tiempo: (15%)
Aprobado por el Consejo de la Facultad de Humanidades y Educación en su reunión del 22 de enero del 2001