Edición de Páginas Web

1. Edición de Páginas Web CFIE DE SEGOVIA Enero-Febrero 2006

2. Internet Hipertexto Navegadores Editores Servidores Protocolos: TCP, IP, HTTP Lenguajes: HTML Direcciones: URL Conceptos básicos

3. Internet Lenguaje común a un conjunto de ordenadores, dirigido por unos protocolos y que ofrece una serie de servicios. • Conjunto de ordenadores: Red de redes • Protocolos (Idiomas): • TCP (control de transmisión) e IP (direccionamiento) • Intercambio de información: FTP, HTTP, … • Servicios: Correo y WWW Los servicios están alojados en los SERVIDORES

4. Word Wide Web • Es un servicio por el que unos ordenadores ofrecen documentos para ser vistos por otros ordenadores. • Documentos creados en HIPERTEXTO y contiene referencia a otros documentos y a elementos multimedia • Hipertexto: conjunto de información estructurada en enlaces para facilitar su acceso y orden de lectura. • Navegadores: visualizadores de documentos. Internet Explorer, Nestcape Navigator, Mozilla, ...

5. ¿Cómo funciona la WWW? Mediante PROTOCOLOS: • Direccionamiento: URL • Traducción: IP • Transferencia: HTTP • Visualización: HTML

6. Resumen • Un documento escrito en HTML, referenciado por una URL y transferido vía HTTP forma parte de la Web. • La Web es un servicio que ofrece un ordenador conectado a Internet. • Internet es un lenguaje común mediante el cual distintos tipos de redes de ordenadores pueden comunicarse.

7. Para crear y publicar una página web necesitamos: • Programas informáticos • Ideas para editar y diseñar • Un sitio para su alojamiento y debemos realizar una ACTUALIZACIÓN PERIÓDICA

8. Software • De edición y diseño de la página • FrontPage XP • De tratamiento de imágenes y elementos multimedia (gif, sonido, video, flash, banner, etc.) • Irfanview y otros • Para ‘subir’ la página y alojarla en el Servidor • Programa de FTP: NICO • Para actualizar la página • Programa de FTP: NICO

9. Publicación de páginas web • Las páginas se alojan en Servidores • Dominios/Host: gratuitos o de pago • Nombre de usuario y contraseña • Programa de transferencia de archivos: subir y actualizar la página • Software de FTP. Por ejemplo: NICO

10. FrontPage XP • Muy parecido al Procesador de Textos Word (no se necesita aprender HTML): • Formato de caracteres y párrafos • Insertar marquesinas, imágenes, sonido y vídeo • Tablas • Enlaces • Marcadores • Formularios, Marcos, etc. • Ser muy cuidadosos con la organización de archivos y carpetas

11. Consideraciones para crear una página o un sitio web • Elección del tema y de los contenidos • Diseño sobre papel, organizando los contenidos • Recopilar texto y elementos multimedia: imágenes, sonidos, ... • Guardar TODOS los OBJETOS en UNA CARPETA • Cuidar los enlaces diseñando un buen sistema de navegación • Tratamiento de imágenes: ‘peso de una fotografía’ • DISEÑO: tipos de letra, colores, movimiento, etc http://www.htmlweb.net/diseno/diseno.html

12. Objetos de un sitio web Un SITIO WEB contiene carpetas, páginas HTML, imágenes, gif, banner, archivos de :sonido, vídeo, texto, Power Point, etc. • Los objetos de un sitio web están identificados por un nombre que, en general: • No deben tener más de OCHO caracteres • Sin espacios en blanco, mayúsculas, acentos o eñes • Nombres como presenta_archivos, también se admiten

13. Formatos Multimedia • Archivos de imágenes • .GIF y .JPG • Archivos de sonido • .WAV, .MID y .RA • Archivos de vídeo: • .MPG, .AVI y .QT

14. Formato de imágenes • GIF o .gif • Dibujos con hasta 256 colores • Permite movimiento y un color transparente • JPEG o .jpg • Hasta 16 millones de colores • Fotografías normales • Formato por defecto de cámaras digitales.

15. Tamaño de la imagen • Pixel: punto de luz • Resolución del monitor: • PC’s 72 ppp; MAC 96 ppp • Tamaño de la imagen • En el monitor: nº pixels horizontales POR nº pixels verticales • Impresora: nº de pixels Horizontales POR nº pix. vert. + densidad de puntos • Tamaño de archivos: nº de pixeles y profundidad de color

16. El color que percibimos se forman por la combinación de los denominados colores primarios Luz reflejada: colores sustractivos Luz directa: colores aditivos En el diseño de páginas web: Colores en la web Percepción del color

17. Colores primarios (I) • Sustractivos: los colores son percibidos por el ojo humano al reflejarse la luz sobre un objeto. • Artes gráficas e impresoras • Amarillo, magenta y cyan. • Si mezclamos los 3 colores sustractivos primarios nos darán un sucio marrón que tiende a negro; por esto se les llama sustractivos, porque tienden a sustraer el color blanco de la luz.

18. Colores primarios (II) • Aditivos: los colores pasan directamente a nuestros ojos, sin ser reflejadas previamente por ningún cuerpo. • Una bombilla, una pantalla de televisión o el monitor de un ordenador. • Rojo, Verde y Azul. • La suma de los 3 da el blanco, y la ausencia de los 3 el negro. Sistema usado en el diseño web, y por eso el sistema de representación del color que usaremos será el RGB (Red, Green, Blue), que va a definir la cantidad relativa de cada uno de los colores primarios presente un color determinado

19. Color RGB Al mezclarse dos a dos, crean los colores secundarios. Al mezclarse luz verde con azul se obtiene el cián, con la luz roja y azul se logra el magenta y usando luz roja y verde observaremos un llamativo amarillo. Si la mezcla es en diferentes proporciones de estos colores básicos se van originando los diferentes tonos de la gama del espectro hasta 16,7 millones de colores

20. Colores en la web:La Rueda del Color o Cromática Nos orienta respecto al equilibrio o armonía de color de dos maneras: Rangos de color Contraste