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

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

Internet Lenguaje común a un conjunto de ordenadores, dirigido por unos protocolos y que ofrece una serie de. 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) TCP (control de transmisión) e IP (direccionamiento) Intercambio de información: FTP, HTTP, … Intercambio de información: FTP, HTTP, …  Servicios: Correo y WWW Los servicios están alojados en los SERVIDORES

Word Wide Web Es un servicio por el que unos ordenadores ofrecen documentos para ser vistos por otros ordenadores. 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,... Navegadores: visualizadores de documentos. Internet Explorer, Nestcape Navigator, Mozilla,...

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

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.

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

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

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

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

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

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: Los objetos de un sitio web están identificados por un nombre que, en general: No deben tener más de OCHO caracteres No deben tener más de OCHO caracteres Sin espacios en blanco, mayúsculas, acentos o eñes Sin espacios en blanco, mayúsculas, acentos o eñes Nombres como presenta_archivos, también se admiten Nombres como presenta_archivos, también se admiten

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

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

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

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

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.

Colores primarios (II) Aditivos: los colores pasan directamente a nuestros ojos, sin ser reflejadas previamente por ningún cuerpo. el monitor de un ordenador 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

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

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 colorContraste