Fecha y hora: domingo 31 de mayo de 2009, antes de las 12:00 de la medianoche, debe enviarse el trabajo asignado a infoucab@gmail.com , con copia a nunez@gmail.comy a sus propios correos, de forma que le quede copia de lo enviado. No se aceptarán trabajos enviados después de esta hora.
Forma de entrega:
- Remitente: usted o el otro miembro del equipo. - ASUNTO o SUBJECT: P7: Páginas web con Dreamweaver - En la primera línea del email y en las páginas web mismas: nombres y apellidos de los miembros del equipo.
Tema libre que tenga muchas referencias externas, por ejemplo, universidades en Latinoamérica; medios de comunicación venezolanos; grandes películas de la historia, etc. El texto y las imágenes pueden ser enteramente copiados de periódicos o revistas en línea, con mínima pero necesaria redacción de su parte.
Producción de dos páginas
Página principal (index)
1. Destacado de la noticia principal con título, sumario y foto.
2. Al menos tres (3) titulares y sumarios sobre otros aspectos de la noticia (enlazados a URL externas).
NOTA: El espacio adicional de la página puede ser llenado con banners, promociones, etc.
Segunda página
3. Desarrollo de la noticia destacada en la página principal.
Ambas
4. Título de página (title).
5. Tabla principal de 800 pixels de ancho.
6. Cabezal con logo gráfico (hágalo en Photoshop).
7. Al menos dos columnas en el cuerpo de las páginas. En las celdas la alineación vertical debe ser "Superior" (Top).
8. Al menos tres (3) imágenes por página.
9. Vínculos: a) Entre páginas del mismo sitio; b) Externo en un navegador nuevo; c) Dentro de la misma página (marcadores); d) Desde una imagen de sustitución.
10. Menú hecho con Botones Flash. El menú debe tener al menos cuatro (4) opciones y se sugiere que sea a vínculos externos.
11. Otro menú, desplegable.
12. Un mapa de imágenes.
Cómo entregarlo
13. Coloque el sitio completo en un directorio.
14. Comprima el directorio en un archivo .ZIP o .RAR.
15. Envíe el archivo ZIP o RAR como anexo al correo.
Los laboratorios de la UCAB programas de compresión ZIP. La mayoría de las computadoras con Windows tienen ZIP o RAR. Si no, investigue cómo conseguirlo.
Por favor, no envíe los archivos si no están dentro de un directorio. Sólo se aceptarán archivos compridos ZIP o RAR.
Dónde conseguir Dreamweaver
Versión de prueba en sitios como el de Adobe, Download.com, etc.
Si no lo consigue, trabaje en los laboratorios de la UCAB.
La forma más usada de publicación en línea: la web.
Clase del 18 de mayo de 2009. Como forma de publicación de contenidos, las páginas web han sido uno de los más exitosos tipos de documentos de todos los tiempos. En menos de dos décadas, se calculan más de 800 mil millones de páginas activas en la World Wide Web, sin contar documentos en otros formatos (PDF, txt) también publicados en la gran red.
Conceptos de la web: algunos términos de uso frecuente, para unificar nuestro glosario.
Macromedia Dreamweaver es un editor HTML y un administrador de sitios web. Por los momentos, lo usaremos en la primera función.
ÁREA DE TRABAJO
Área de diseño de página vs área de administración del sitio.
DEFINICIÓN DEL SITIO
Nuevo sitio Parámetros para la creación del sitio en el disco duro local.
LA PÁGINA WEB
Características Head y body. / Código fuente / Etiquetas.
PROPIEDADES DE LA PÁGINA
Título, imagen de fondo, color del texto por defecto, color de los links Modificar > Propiedades de página.
TABLAS
Crear tabla. Insert > Table. Aparece un cuadro de diálogo que pide:
Rows (filas): cuántas.
Columns (columnas): cuántas.
Ancho: Puede colocarse como número de pixels o porcentaje (de la columna dentro de la cual está la tabla).
Border: 0= sin borde; 1= un punto de ancho de línea, etc.
Cell padding (margen borde-texo): 0= sin espacio; 1= un punto de ancho, etc.
Cell space (ancho entre borde interno y externo): 0= sin espacio; 1= un punto de ancho, etc.
Datos de interés sobre tablas
- Las Propiedades de Tabla son una cosa y las Propiedades de Celda, otra. Las primeras afectan a la tabla más externa; las segundas sólo afectan a la(s) celda(s) marcada(s).
- Si son contradictorias pueden traer problemas. En la mayoría de los casos, prevalecen las Propiedades de Celda.
- Se puede colorear los bordes de una tabla y su fondo pero no de las celdas individuales.
- El texto o la imagen aparecen por defecto en el centro de la tabla. Si quiere que se alinea en el Tope debe marcar (Alineación) Vert: Top.
- Si quiere que la tabla sea bordeada por el texto, debe alinearla a la derecha o a la izquierda,
- Las tablas y celdas se pueden fundir o dividir.
INSERCIÓN
Textos Coloque el cursor en el comienzo de línea y escriba.
Imágenes Insertar > imagen.
VINCULOS
Vínculos intra-página Debe marcarse primero el destino del vínculo. Luego Insert > Named Anchor. Escribir el nombre. Entonces ir a la fuente desde donde saldrá el vínculo. Marcar, en la ventana de Propiedades > Link, anotar: nombre_de_archivo.htm#nombre del Named Anchor.
Vínculos inter-páginas En la ventana de Link coloque el nombre exacto del archivo al que quiere conectarse. La forma más sencilla es activar el icono de la carpeta amarilla y buscar el archivo directamente. Este comando funciona no sólo para conectar páginas HTML sino para abrir archivos de cualquier tipo. Por ejemplo, uno de PowerPoint, si la PC tiene el programa podrá abrirlo, si no, solicitará que se baje (download) al disco duro.
Vínculos externos En la ventana de Link coloque el URL exacto al que quiere llegar. Luego en el menú desplegable Target indique "Blank" para abrir un navegador nuevo.
Inset > Form objects > Jump menu. Aparece un cuadro de diálogo al que se le indica el nombre de la opción, qué link activa y en qué orden se coloca. Puede elegirse una opción que se haga visible siempre en el menú cerrado.
MAPA DE IMÁGENES
Se marca la imagen, en la ventana de Propiedades, Map > se elige la forma y se marca sobre la imagen. Luego se le asigna el vínculo. Tome la imagen siguiente, insértela en su página y asígnele links a cada elemento de la lista.
RECURSOS FLASH
Botones. Insert > Interactive images > Flash buttons. Al elegir el modelo, introduce el texto (nomenclatura) que debe desplegar y el link que debe activar. Ejemplo.
Textos.Insert > Interactive images > Flash text. Cuadro de diálogo para indicar el contenido mismo del texto, tipo de letra, color original, color de sustitución (rollover) y el link que activa. Ejemplo. VENTANAS EMERGENTES
Son vínculos a ventanas de tamaño reducido, sobre las cuales ejercemos el control de definir las barras y funcionalidades que tienen, así como en qué circunstancias aparecen.
Se crea previamente una página adicional contenida por la ventana emergente. En la página original, se escribe la frase en la que se quiere el vínculo. Luego se crea un Comportamiento > Para Explorer 6.0 > Abrir ventana de navegador > Se configura la página de la ventana emergente, el ancho y alto de la ventana. Luego decimos bajo qué acción aparece la ventana. Elija "OnClick".
------------------------------------------------ Otras características
IMÁGENES DE SUSTITUCIÓN
Necesita dos imágenes de las mismas dimensiones, con los cambios que usted quiera resaltar. Insert > Interactive images > Rollover images: aparece un cuadro de diálogo: Originas image (imagen que se verá al abrir la página); Rollover image (imagen que aparece cuando se coloca el cursor sobre la imagen); URL (dirección a la que va el link, si lo tiene).
Use esta dos:
RECURSOS JAVA SCRIPT
Son pequeños códigos autónomos que se agregan a la página HTML y realizan funciones complementarias, sobre todo relativas al navegador. Debe copiar esta página en su disco duro y abrirla con DreamWeaver. Sólo así podrá ver los iconos que puede copiar, pegar en su página y configurar.
El profesor colocará algunos ejemplos en el disco público.
La web es la interfaz gráfica y multimedia de internet. Es la aplicación en línea más importante. Desde un “navegador-cliente” se hacen solicitudes a un servidor. El navegador despliega los recursos, a veces con ayuda de “extensiones” o “aplicaciones” en el lado del cliente (client-side), como Java, Flash o Acrobat.
HIPERTEXTO. Conexión potencial o real con otra área de una página, otra página o recurso en la WWW.
URL. Uniform Resourse Locator. Dirección única de un recursos en Internet. Por ejemplo: http://informaticaucab.blogspot.com
NOMBRE DE DOMINIO. COM, ORG, EDU, NET.
SITIO WEB. Conjunto de archivos en un espacio virtual, local o remoto; dentro o fuera de línea, sobre el protocolo HTTP.
PÁGINA WEB. Despliegue en el navegador basado en el lenguaje HTML y sus derivados (XML, Java) y extensiones (Flash, PDF).
HTML. HyperText Mark-up Languaje. Lenguaje de etiquetas con el que se construyen las páginas web.
DERIVADOS O LENGUAJES "MARKUP" DE HTML. Lenguajes que se “añaden” HTML: XML, CGI, PERL.
JAVA. Plataforma de desarrollo muy compatible con HTML, usado intensamente en la web actual.
XML. Lenguaje de marcación que separa el contenido del continente.
SITIOS WEB ESTÁTICOS Y DINÁMICOS. Las primeras son páginas HTML convencionales, que se comunican entre sí a través de hipervínculos. Las segundas se basan en un sistema más complejo de base de datos, plantillas y manejadores de base de datos. Ejemplo: Blogger.
Puede bajar la versión digital de la "Guía de Comunicación digital" (UCAB, 2005), en el sitio de la Unesco. Haga clic aquí.
Inscríbase en nuestro grupo de
El profesor
Fernando Núñez Noda. Profesor e investigador universitario (UCAB, Caracas) y empresario de Internet. Dedicado a la comunicación digital. Columnista de revistas y periódicos, así como autor de un libro sobre comunicación digital. Es también miembro del Consejo Consultivo de El-Nacional.com. Resto del perfil.
