Diseño de Páginas WebDiseño de Páginas Web

Unidad 7Unidad 7

5 puntos imprescindibles5 puntos imprescindibles

11. Conocer los grupos de trabajo que sobre la . Conocer los grupos de trabajo que sobre la red tratan la accesibilidad y el intercambio de red tratan la accesibilidad y el intercambio de información, así como los Tipos de formato.información, así como los Tipos de formato.22. Conocer Qué son las páginas Web y cual su . Conocer Qué son las páginas Web y cual su estructura.estructura.3. Conocer qué es un sitio Web y los programas 3. Conocer qué es un sitio Web y los programas que se emplean para elaborar su páginas.que se emplean para elaborar su páginas.4. Aprender las técnicas para manejar un sitio 4. Aprender las técnicas para manejar un sitio Web.Web.5. Conocer los elementos multimedia e 5. Conocer los elementos multimedia e interactivos que puede contener una página interactivos que puede contener una página Web.Web.

El formato de la InformaciónEl formato de la Información

¿Cómo es posible que ordenadores con ¿Cómo es posible que ordenadores con distintas arquitecturas físicas (hardware) y distintas arquitecturas físicas (hardware) y sistemas operativos diferentes (software) sistemas operativos diferentes (software) puedan intercambiar: textos, imágenes, y puedan intercambiar: textos, imágenes, y cualquier otro tipo de información?cualquier otro tipo de información?

–FácilFácilNos ponemos de acuerdo en respetar ciertas reglas, y Nos ponemos de acuerdo en respetar ciertas reglas, y

adoptamos un adoptamos un formato comúnformato común..

–HTML, CSS, XML, etc.HTML, CSS, XML, etc.

AccesibilidadAccesibilidad

Determinados grupos y asociaciones son Determinados grupos y asociaciones son los encargados de elaborar las normas los encargados de elaborar las normas para el intercambio de información. Entre para el intercambio de información. Entre ellos se encuentran: ellos se encuentran: W3CW3C (Consorcio para la world (Consorcio para la world

wide web)wide web) y y WAIWAI (Web Accessibility Initiative)(Web Accessibility Initiative)..– Ambos establecen las normas para que, tanto Ambos establecen las normas para que, tanto

los programas que escriben, como los que los programas que escriben, como los que leen, puedan abrir y manipular la información, leen, puedan abrir y manipular la información, al usar un formato estándar.al usar un formato estándar.

Accesibilidad e intercambio de Accesibilidad e intercambio de informacióninformación

W3C (Consorcio para W3C (Consorcio para la World Wide Web)la World Wide Web)– Crean protocolos y Crean protocolos y

estándares para el estándares para el acceso universal a la acceso universal a la redred

WAI (Web WAI (Web Accessibility Initiative) Accessibility Initiative) elimina barreras para elimina barreras para el acceso a la redel acceso a la red

Quien cumpla estas normas puede agregar su logo

FormatosFormatosCerradosCerrados. Conocidos y manipulables sólo por . Conocidos y manipulables sólo por las empresas que los elaboran: las empresas que los elaboran: “.doc”“.doc”

PublicadosPublicados. Pueden ser utilizados por otras . Pueden ser utilizados por otras empresas: empresas: “.rtf”“.rtf”

AbiertoAbierto. De organizaciones sin ánimo de lucro. . De organizaciones sin ánimo de lucro. Cualquiera los conoce y puede utilizar: Cualquiera los conoce y puede utilizar: “.ODF”“.ODF” (Open Document Format = formato de documento abierto)(Open Document Format = formato de documento abierto)

EstándarEstándar. . Son los que están muy difundidos (publicados o abiertos): Son los que están muy difundidos (publicados o abiertos):

“.txt”, “.odf”, “.pdf”, “.html”, “.xml”, “.gif”, “.jpeg”,“.txt”, “.odf”, “.pdf”, “.html”, “.xml”, “.gif”, “.jpeg”, etc.etc.

Páginas WebPáginas Web

Documentos con formato “.html” Documentos con formato “.html” (Hiper Text (Hiper Text

Markup Language = lenguaje de marcado de hipertexto)Markup Language = lenguaje de marcado de hipertexto) que que contienen: texto, sonido, animaciones, etc. contienen: texto, sonido, animaciones, etc. (multimedia).(multimedia).

– Los comandos Los comandos (órdenes)(órdenes) de este lenguaje se de este lenguaje se denominan denominan EtiquetasEtiquetas o o tagstags

Etiquetas HTMLEtiquetas HTMLEncerradas entre los símbolos Encerradas entre los símbolos “<““<“ y y “>”“>”

Las de finalización, incluyen Las de finalización, incluyen “/”“/”

<b><b> Comienza a poner el texto en negrilla Comienza a poner el texto en negrilla

</b></b> deja de poner el texto en negrilla deja de poner el texto en negrilla

<HTML><HTML> Comienzo de código página Web Comienzo de código página Web

</HTML></HTML> termina el código de página Web termina el código de página Web

… … Existe multitud de códigos, algunos de ellos no tienen cierreExiste multitud de códigos, algunos de ellos no tienen cierre

<IMG SRC="nido.gif"><IMG SRC="nido.gif"> Carga la imagen de un nido Carga la imagen de un nido

<br><br> Salto de línea Salto de línea

<hr><hr> Crea una línea horizontal Crea una línea horizontal Se pueden escribir indistintamente en mayúsculas o minúsculas

Estructura básica HTMLEstructura básica HTML<html> <html> Comienza el código HTMLComienza el código HTML

<head><head> Cabecera. Datos de configuración e informaciónCabecera. Datos de configuración e información

<title> <title> Texto a mostrar en la barra de título del Texto a mostrar en la barra de título del navegadornavegador

</title></title>

… … Otras informaciones para el navegadorOtras informaciones para el navegador

</head></head>

<body> <body> Información para el cuerpo de la páginaInformación para el cuerpo de la página

……

</body></body>

</html></html> Aquí puedes encontrar una magnífica guía HTML

Sitio Web Sitio Web

Conjunto de archivos y carpetas que Conjunto de archivos y carpetas que contienen la información de mis páginas contienen la información de mis páginas Web (todos relacionados).Web (todos relacionados).

– LocalLocal (situados en mi ordenador) (situados en mi ordenador)– RemotoRemoto (situados en un servidor de Internet) (situados en un servidor de Internet)

Visible para el mundo entero las 24 horas los Visible para el mundo entero las 24 horas los 365 días.365 días.

Editores de Páginas WebEditores de Páginas Web

Conociendo el código HTML, se puede crear Conociendo el código HTML, se puede crear una página Web con un editor de texto una página Web con un editor de texto plano; por ejemplo, plano; por ejemplo, GeditGedit, , Bloc de notasBloc de notas. La . La extensión del archivo debe ser extensión del archivo debe ser “.html”“.html” o o “.htm”“.htm”

Si no lo conocemos, necesitaremos un Si no lo conocemos, necesitaremos un “editor de páginas Web” comerciales o “editor de páginas Web” comerciales o libres, como: libres, como: DreamweaverDreamweaver, , ComposerComposer, etc., etc.

Posibilidades de los editores WebPosibilidades de los editores Web

Agregar texto con formatoAgregar texto con formatoModificar el formato de la páginaModificar el formato de la páginaManejar varias páginas Web simultáneasManejar varias páginas Web simultáneasInsertar tablas, imágenes, hiperenlaces Insertar tablas, imágenes, hiperenlaces asociados a texto o imágenes, etc.asociados a texto o imágenes, etc.Crear marcos (frames)Crear marcos (frames)Incorporar hojas de estilo (CSS) Incorporar hojas de estilo (CSS) Comprobar las páginas previsualizándolasComprobar las páginas previsualizándolas

Aquí y aquí puedes encontrar una guía y referencias sobre CSS

Administrar un sitio WebAdministrar un sitio Web

Publicar. Consiste en alojar en el Publicar. Consiste en alojar en el ordenador SERVIDOR y mantener, los ordenador SERVIDOR y mantener, los archivos y carpetas correspondientes a las archivos y carpetas correspondientes a las páginas Web que contienen la información páginas Web que contienen la información de la temática que se desea compartir con de la temática que se desea compartir con todo el mundo.todo el mundo.

– Vía WebVía Web– Vía FTPVía FTP

Vía FTPVía FTP

File Transfer ProtocolFile Transfer Protocol ( (FTPFTP). Consiste ). Consiste en un servicio que presta Internet a través en un servicio que presta Internet a través del cual se pueden transferir archivos del cual se pueden transferir archivos de de cualquier tipocualquier tipo entre ordenadores remotos. entre ordenadores remotos.Los datos necesarios para establecer la comunicación con el Los datos necesarios para establecer la comunicación con el

servidor FTP a través de un software cliente; por ejemplo, servidor FTP a través de un software cliente; por ejemplo, FileZilla, son:FileZilla, son:

– Dirección del servidor de FTP (el Host).Dirección del servidor de FTP (el Host).– Nombre del usuario.Nombre del usuario.– Contraseña.Contraseña.– URL del alojamiento. URL del alojamiento. (para poder visualizarla)(para poder visualizarla)

Vía HTTPVía HTTP

Hypertext Transfer ProtocolHypertext Transfer Protocol ( (HTTPHTTP). Es el ). Es el protocolo empleado para la transferencias de protocolo empleado para la transferencias de archivos de páginas Web; Es decir, el archivos de páginas Web; Es decir, el mantenimiento se realiza desde una de las mantenimiento se realiza desde una de las páginas Web (WWW) del servidor que aloja mi páginas Web (WWW) del servidor que aloja mi sitio. Necesitaremos suministrarle los datos:sitio. Necesitaremos suministrarle los datos:– Nombre de usuario.Nombre de usuario.– Contraseña.Contraseña.– URLURL para poder visualizarlapara poder visualizarla

Elementos multimedia e Elementos multimedia e interactivosinteractivos

La potencia y el atractivo de una página Web La potencia y el atractivo de una página Web depende de los elementos que aloje.depende de los elementos que aloje.– Multimedia: Multimedia:

Vídeos Vídeos (Streaming = Se reproducen mientras se van descargando)(Streaming = Se reproducen mientras se van descargando)

Sonidos Sonidos (Streaming)(Streaming)

GráficosGráficos

– Interactivos: Interactivos: FlashFlash

Applest de JavaApplest de Java

Barras de navegaciónBarras de navegación

EnlacesEnlacesJardín Botánico. Jardín Botánico. Proyecto realizado por alumnado de 3º de ESO Proyecto realizado por alumnado de 3º de ESO

del I.E.S. Las Salinasdel I.E.S. Las Salinas. . Pincha Pincha aquíaquí..

Guía HTML. Guía HTML. De Antonio Berciano. De Antonio Berciano. AquíAquí..

Páginas alumnos. Páginas alumnos. I.E.S. Vadinia en Cistierna (León). I.E.S. Vadinia en Cistierna (León). AquíAquí..

Curso de CSS. Curso de CSS. AquíAquí..

Incorporación de menús. Incorporación de menús. AquíAquí..

Alojamiento Web gratuito. Alojamiento Web gratuito. AquíAquí..

Transferencia de archivos FTP *Transferencia de archivos FTP *(windows)(windows). . AquíAquí..

Otro FTP *Otro FTP *(Windows)(Windows). . AquíAquí..

Y otro FTP Y otro FTP (Guadalinex)(Guadalinex).. AquíAquí..

* Libre de virus. Escaneado con Panda Activescan 2.0 On line