Diseño de Páginas Web Unidad 7

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

El formato de la Información ¿Cómo es posible que ordenadores con distintas arquitecturas físicas (hardware) y sistemas operativos diferentes (software) puedan intercambiar: textos, imágenes, y cualquier otro tipo de información? –Fácil Nos ponemos de acuerdo en respetar ciertas reglas, y adoptamos un formato común. –HTML, CSS, XML, etc.

Accesibilidad Determinados grupos y asociaciones son los encargados de elaborar las normas para el intercambio de información. Entre ellos se encuentran: W3C (Consorcio para la world wide web) y WAI (Web Accessibility Initiative). –Ambos establecen las normas para que, tanto los programas que escriben, como los que leen, puedan abrir y manipular la información, al usar un formato estándar.

Accesibilidad e intercambio de información W3C (Consorcio para la World Wide Web) –Crean protocolos y estándares para el acceso universal a la red WAI (Web Accessibility Initiative) elimina barreras para el acceso a la red Quien cumpla estas normas puede agregar su logo

Formatos Cerrados. Conocidos y manipulables sólo por las empresas que los elaboran: “.doc” Publicados. Pueden ser utilizados por otras empresas: “.rtf” Abierto. De organizaciones sin ánimo de lucro. Cualquiera los conoce y puede utilizar: “.ODF” (Open Document Format = formato de documento abierto) Estándar. Son los que están muy difundidos (publicados o abiertos): “.txt”, “.odf”, “.pdf”, “.html”, “.xml”, “.gif”, “.jpeg”, etc.

Páginas Web Documentos con formato “.html” (Hiper Text Markup Language = lenguaje de marcado de hipertexto) que contienen: texto, sonido, animaciones, etc. (multimedia). –Los comandos (órdenes) de este lenguaje se denominan Etiquetas o tags

Etiquetas HTML Encerradas entre los símbolos “ ” Las de finalización, incluyen “/” Comienza a poner el texto en negrilla Comienza a poner el texto en negrilla deja de poner el texto en negrilla deja de poner el texto en negrilla Comienzo de código página Web Comienzo de código página Web 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 cierre Carga la imagen de un nido Carga la imagen de un nido Salto de línea Salto de línea Crea una línea horizontal Crea una línea horizontal Se pueden escribir indistintamente en mayúsculas o minúsculas

Estructura básica HTML Comienza el código HTML Comienza el código HTML Cabecera. Datos de configuración e información Cabecera. Datos de configuración e información Texto a mostrar en la barra de título del navegador Texto a mostrar en la barra de título del navegador</title> … Otras informaciones para el navegador </head> Información para el cuerpo de la página Información para el cuerpo de la página…</body></html> AquíAquí puedes encontrar una magnífica guía HTML

Sitio Web Conjunto de archivos y carpetas que contienen la información de mis páginas Web (todos relacionados). –Local (situados en mi ordenador) –Remoto (situados en un servidor de Internet) Visible para el mundo entero las 24 horas los 365 días.

Editores de Páginas Web Conociendo el código HTML, se puede crear una página Web con un editor de texto plano; por ejemplo, Gedit, Bloc de notas. La extensión del archivo debe ser “.html” o “.htm” Si no lo conocemos, necesitaremos un “editor de páginas Web” comerciales o libres, como: Dreamweaver, Composer, etc.

Posibilidades de los editores Web Agregar texto con formato Modificar el formato de la página Manejar varias páginas Web simultáneas Insertar tablas, imágenes, hiperenlaces asociados a texto o imágenes, etc. Crear marcos (frames) Incorporar hojas de estilo (CSS) Comprobar las páginas previsualizándolas AquíAquí y aquí puedes encontrar una guía y referencias sobre CSSaquí

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

Vía FTP Vía FTP File Transfer Protocol (FTP). Consiste en un servicio que presta Internet a través del cual se pueden transferir archivos de cualquier tipo entre ordenadores remotos. Los datos necesarios para establecer la comunicación con el servidor FTP a través de un software cliente; por ejemplo, FileZilla, son: –Dirección del servidor de FTP (el Host). –Nombre del usuario. –Contraseña. –URL del alojamiento. (para poder visualizarla)

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

Elementos multimedia e interactivos La potencia y el atractivo de una página Web depende de los elementos que aloje. –Multimedia: Vídeos (Streaming = Se reproducen mientras se van descargando) Sonidos (Streaming) Gráficos –Interactivos: Flash Applest de Java Barras de navegación

Enlaces Jardín Botánico. Proyecto realizado por alumnado de 3º de ESO del I.E.S. Las Salinas. Pincha aquí. aquí Guía HTML. De Antonio Berciano. Aquí. Aquí Páginas alumnos. I.E.S. Vadinia en Cistierna (León). Aquí. Aquí Curso de CSS. Aquí. Aquí Incorporación de menús. Aquí. Aquí Alojamiento Web gratuito. Aquí. Aquí Transferencia de archivos FTP * (windows). Aquí. Aquí Otro FTP * (Windows). Aquí. Aquí Y otro FTP (Guadalinex). Aquí. Aquí * Libre de virus. Escaneado con Panda Activescan 2.0 On line