Edición de Páginas Edición de Páginas WebWeb

CFIE DE SEGOVIACFIE DE SEGOVIA

Enero-Febrero 2006Enero-Febrero 2006

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 protocolosprotocolos y y que ofrece una serie de 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 SERVIDORESLos servicios están alojados en los SERVIDORES

Word Wide WebWord Wide Web Es un servicio por el que unos ordenadores Es un servicio por el que unos ordenadores

ofrecen documentos para ser vistos por otros ofrecen documentos para ser vistos por otros ordenadores.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. Navegadores: visualizadores de documentos.

Internet Explorer, Nestcape Navigator, Internet Explorer, Nestcape Navigator, Mozilla, ...Mozilla, ...

¿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

ResumenResumenUn 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 Para crear y publicar una página web necesitamos:web necesitamos:

Programas informáticosProgramas informáticos

Ideas para editar y diseñarIdeas para editar y diseñar

Un sitio para su alojamientoUn sitio para su alojamiento

y debemos realizar una y debemos realizar una ACTUALIZACIÓN PERIÓDICAACTUALIZACIÓN PERIÓDICA

SoftwareSoftware De edición y diseño de la páginaDe edición y diseño de la página

FrontPage XPFrontPage XP De tratamiento de imágenes y elementos De tratamiento de imágenes y elementos

multimedia (gif, sonido, video, flash, banner, multimedia (gif, sonido, video, flash, banner, etc.)etc.) Irfanview y otrosIrfanview y otros

Para ‘subir’ la página y alojarla en el ServidorPara ‘subir’ la página y alojarla en el Servidor Programa de FTP: NICOPrograma de FTP: NICO

Para actualizar la páginaPara actualizar la página Programa de FTP: NICOPrograma de FTP: NICO

Publicación de páginas webPublicación de páginas web

Las páginas se alojan en ServidoresLas páginas se alojan en Servidores Dominios/Host: gratuitos o de pagoDominios/Host: gratuitos o de pago Nombre de usuario y contraseñaNombre de usuario y contraseña

Programa de transferencia de Programa de transferencia de archivos: subir y actualizar la páginaarchivos: subir y actualizar la página Software de FTP. Por ejemplo: Software de FTP. Por ejemplo: NICONICO

FrontPage XPFrontPage XP Muy parecido al Procesador de Textos Muy parecido al Procesador de Textos

Word (no se necesita aprender HTML):Word (no se necesita aprender 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 organización de Ser muy cuidadosos con la organización de archivos y carpetasarchivos 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 contenidosDiseño sobre papel, organizando los contenidos Recopilar texto y elementos multimedia: imágenes, Recopilar texto y elementos multimedia: imágenes,

sonidos, ...sonidos, ... Guardar TODOS los OBJETOS en UNA Guardar TODOS los OBJETOS en UNA

CARPETACARPETA Cuidar los enlaces diseñando un buen sistema de Cuidar los enlaces diseñando un buen sistema de

navegaciónnavegació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

httphttp://://www.htmlweb.netwww.htmlweb.net//disenodiseno//diseno.htmldiseno.html

Objetos de un sitio webObjetos de un sitio webUn SITIO WEB contiene carpetas, páginas Un SITIO WEB contiene carpetas, páginas

HTML, imágenes, gif, banner, archivos HTML, imágenes, gif, banner, archivos de :sonido, vídeo, texto, Power Point, etc.de :sonido, vídeo, texto, Power Point, etc.

Los objetos de un sitio web están identificados Los objetos de un sitio web están identificados por un nombre que, en general:por un nombre que, en general: No deben tener más de OCHO caracteresNo deben tener más de OCHO caracteres Sin espacios en blanco, mayúsculas, acentos o eñesSin espacios en blanco, mayúsculas, acentos o eñes Nombres como presenta_archivos, también se Nombres como presenta_archivos, también se

admitenadmiten

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 transparentePermite movimiento y un color transparente

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 digitales.Formato por defecto de cámaras 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º pixels En el monitor: nº pixels horizontales POR nº pixels verticalesverticales

Impresora: nº de pixels Horizontales POR nº pix. Impresora: nº de pixels Horizontales POR nº pix. vert. + densidad de puntosvert. + densidad de puntos

Tamaño de archivos: nº de pixeles y Tamaño de archivos: nº de pixeles y profundidad de colorprofundidad de color

Percepción del colorPercepción del colorEl color que percibimos se forman por la El color que percibimos se forman por la

combinación de los denominados combinación de los denominados colores primarioscolores primarios

Luz reflejada: colores sustractivosLuz reflejada: colores sustractivosLuz directa: colores aditivosLuz directa: colores aditivos

En el diseño de páginas web: En el diseño de páginas web: Colores en la webColores en la web

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 ordenadorel 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