Editar páginas web
20
Edición de Páginas Edición de Páginas Web Web TECNOLOGÍA DE LA INFORMACIÓN TECNOLOGÍA DE LA INFORMACIÓN IES MARQUÉS DE LOZOYA IES MARQUÉS DE LOZOYA CURSO 2007/08 CURSO 2007/08
-
Upload
marta461994 -
Category
Documents
-
view
106 -
download
0
Transcript of Editar páginas web
Edición de Páginas Edición de Páginas Web Web
TECNOLOGÍA DE LA INFORMACIÓNTECNOLOGÍA DE LA INFORMACIÓN
IES MARQUÉS DE LOZOYAIES MARQUÉS DE LOZOYA
CURSO 2007/08CURSO 2007/08
Conceptos básicosConceptos básicos
InternetInternet
HHipertextoipertexto
NNavegadoresavegadores
EEditoresditores
SServidores ervidores
Protocolos:Protocolos:
TCP, IP, HTTPTCP, IP, HTTP
Lenguajes: Lenguajes: HTMLHTML
Direcciones: Direcciones:
URLURL
InternetInternet
Lenguaje común a un Lenguaje común a un conjunto de conjunto de ordenadoresordenadores, dirigido por unos , dirigido por unos protocolosprotocolosy que ofrece una serie de y que ofrece una serie de servicios.. Conjunto de ordenadores: Red de redesConjunto de ordenadores: Red de redes Protocolos (Idiomas): 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 WWWServicios: Correo y WWW
Los servicios están alojados en los Los servicios están alojados en los SERVIDORESSERVIDORES
Word Wide WebWord Wide Web
Es un servicio por el que unos Es un servicio por el que unos ordenadores ofrecen documentos para ordenadores ofrecen documentos para ser vistos por otros ordenadores.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 Navegadores: visualizadores de documentos. Internet Explorer, Nestcape documentos. Internet Explorer, Nestcape Navigator, ..Navigator, ..
¿Cómo ¿Cómo funcionafunciona la WWW? la WWW?
Mediante Mediante PROTOCOLOSPROTOCOLOS:: Direccionamiento: URLDireccionamiento: URL
Traducción: IP Traducción: IP
Transferencia: HTTPTransferencia: HTTP
Visualización: HTMLVisualización: HTML
ResumenResumen
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.
Necesidades para crear una Necesidades para crear una webweb
SoftwareSoftware
Edición y DiseñoEdición y Diseño
AlojamientoAlojamiento
ActualizaciónActualización
SoftwareSoftware
De edición y diseño de la páginaDe edición y diseño de la página Bloc de notas, FrontPage XP y otrodBloc de notas, FrontPage XP y otrod
De tratamiento de imágenes y elementos De tratamiento de imágenes y elementos multimedia (gif, sonido, video, flash, multimedia (gif, sonido, video, flash, banner, etc.)banner, etc.) Irfanview y otrosIrfanview y otros
Para ‘subir’ la página y alojarla en el Para ‘subir’ la página y alojarla en el ServidorServidor Programa de FTP: NICOPrograma de FTP: NICO
Para actualizar la páginaPara actualizar la página Programa de FTP: NICOPrograma de FTP: NICO
Edición de páginas webEdición de páginas web
Editar en lenguaje HTMLEditar en lenguaje HTML(Hyper Text Markup (Hyper Text Markup Language)Language)
Tipos de editores HTMLTipos de editores HTML Texto: Bloc de NotasTexto: Bloc de Notas Gráfico Gráfico (WYSIWYG)(WYSIWYG): FrontPage Express, : FrontPage Express,
FrontPage 2000, DreamweaverFrontPage 2000, Dreamweaver
Estructura de un documento Estructura de un documento HTMLHTML
<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)
FrontPage XPFrontPage XP Muy parecido al Procesador de Textos Muy parecido al Procesador de Textos
Word (no se necesita aprender Word (no se necesita aprender HTML):HTML):
Formato de caracteres y párrafosFormato de caracteres y párrafos Insertar marquesinas, imágenes, sonido y vídeoInsertar marquesinas, imágenes, sonido y vídeo TablasTablas EnlacesEnlaces MarcadoresMarcadores Formularios, Marcos, etc.Formularios, Marcos, etc.
Ser muy cuidadosos con la Ser muy cuidadosos con la organización de archivos y carpetasorganización de archivos y carpetas
Consideraciones para crear una Consideraciones para crear una página o un sitio webpágina o un sitio web
Elección del tema y de los contenidosElección del tema y de los contenidos Diseño sobre papel, organizando los Diseño sobre papel, organizando los
contenidoscontenidos Recopilar texto y elementos multimedia: Recopilar texto y elementos multimedia:
imágenes, sonidos, ...imágenes, sonidos, ... Guardar los elementos en carpetas con un Guardar los elementos en carpetas con un
máximo de OCHO caracteres y en máximo de OCHO caracteres y en minúsculasminúsculas
Cuidar los enlaces diseñando un buen Cuidar los enlaces diseñando un buen sistema de navegaciónsistema de navegación
DISEÑO: familias de caracteres, colores, DISEÑO: familias de caracteres, colores, MOVIMIENTOMOVIMIENTO, sonido, peso de las , sonido, peso de las imágenes, ..imágenes, ..
Publicación de páginas webPublicación de páginas web
Las páginas se alojan en Las páginas se alojan en ServidoresServidores Dominios: gratuitos o de pagoDominios: gratuitos o de pago
Programa de transferencia de Programa de transferencia de archivos: subir y actualizar la archivos: subir y actualizar la páginapágina Software de FTPSoftware de FTP
Formatos MultimediaFormatos Multimedia
Archivos de imágenesArchivos de imágenes .GIF y .JPG.GIF y .JPG
Archivos de sonidoArchivos 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ágenesFormato de imágenes
GIF o .gifGIF o .gif Dibujos con hasta 256 coloresDibujos con hasta 256 colores Permite movimiento y un color Permite movimiento y un color
transparentetransparente JPEG o .jpgJPEG o .jpg
Hasta 16 millones de coloresHasta 16 millones de colores Fotografías normalesFotografías normales Formato por defecto de cámaras Formato por defecto de cámaras
digitales.digitales.
Tamaño de la imagenTamaño de la imagen
Pixel: punto de luzPixel: punto de luz Resolución del monitor:Resolución del monitor:
PC’s 72 ppp; MAC 96 pppPC’s 72 ppp; MAC 96 ppp Tamaño de la imagenTamaño de la imagen
En el monitor: nº pixels horizontales POR nº En el monitor: nº pixels horizontales POR nº pixels verticalespixels verticales
Impresora: nº de pixels Horizontales POR nº Impresora: nº de pixels Horizontales POR nº pix. vert. + densidad de puntospix. vert. + densidad de puntos
Tamaño de archivos: nº de pixeles y Tamaño de archivos: nº de pixeles y profundidad de colorprofundidad de color
Colores primarios (I)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)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
Color RGBColor 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:Colores en la web:La La RuedaRueda del Color o Cromática del Color o Cromática
Nos orienta respecto al equilibrio o armonía de color de dos maneras:
Rangos de color Contraste
