Editar páginas web
- 1. Edición de Páginas Web TECNOLOGÍA DE LA INFORMACIÓN IES MARQUÉS DE LOZOYA CURSO 2007/08
- 2. Conceptos básicos Internet H ipertexto N avegadores E ditores S ervidores Protocolos: TCP, IP, HTTP Lenguajes: HTML Direcciones: URL
- 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, ..
- 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. Necesidades para crear una web Software Edición y Diseño Alojamiento Actualización
- 8. Software De edición y diseño de la página Bloc de notas, FrontPage XP y otrod 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. Edición de páginas web Editar en lenguaje HTML (Hyper Text Markup Language) Tipos de editores HTML Texto: Bloc de Notas Gráfico (WYSIWYG) : FrontPage Express, FrontPage 2000, Dreamweaver
- 10. Estructura de un documento HTML <HTML> (Etiqueta que indica que lo que viene a continuación es un documento HTML) <HEAD> ( Etiqueta de apertura de la cabecera). Aquí va la información sobre el título de la página, el autor, palabras clave, etc. que no se presentarán en la ventana del navegador, salvo el título que aparecerá en la barra de título de la parte superior </HEAD> (Etiqueta de cierre de la cabecera) <BODY> ( Etiqueta de apertura del cuerpo) Aquí va el contenido de la página que será lo que se presente en pantalla . </BODY> (Etiqueta de cierre del cuerpo) </HTML> (Etiqueta de cierre del documento)
- 11. 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
- 12. 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 los elementos en carpetas con un máximo de OCHO caracteres y en minúsculas Cuidar los enlaces diseñando un buen sistema de navegación DISEÑO: familias de caracteres, colores, MOVIMIENTO , sonido, peso de las imágenes, ..
- 13. Publicación de páginas web Las páginas se alojan en Servidores Dominios: gratuitos o de pago Programa de transferencia de archivos: subir y actualizar la página Software de FTP
- 14. Formatos Multimedia Archivos de imágenes .GIF y .JPG Archivos de sonido .WAV, .MID y .RA Archivos de vídeo: .MPG, .AVI y .QT
- 15. 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.
- 16. 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
- 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 Am arillo, 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) A ditivo s: los colores pasan directamente a nuestros ojos, sin ser reflejadas previamente por ni n gún cuerpo . U n a 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 usa do 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