Para que cualquiera pueda disponer de estos recursos a través de la Web, se han definido:

Transcripción

1 Guía de publicación en web 1.- Introducción La WWW o Web es un sistema de publicación horizontal y universal que permite compartir información entre personas a través de una red de computadoras conectadas a la Internet. El uso correcto de un lenguaje estandarizado como el XHTML para la publicación de documentos en la web, la separación del contenido de la presentación mediante las Hojas de Estilo en Cascada y las Pautas de Accesibilidad del Contenido en la Web, hacen que la información que se publica sea más fácil de localizar y leer por otros usuarios de modo que los contenidos que se desean compartir resulten más útiles para todos Qué es la WWW La World Wide Web (WWW), que se traduce al español como 'Red Mundial Amplia', es una aplicación de la Internet que desde su origen se ha desarrollado como una estructura cooperativa; es decir, todos los que la usan colaboran para que funcione adecuadamente. La WWW se construye a través de enlaces entre los recursos de información de los propios usuarios. Para que cualquiera pueda disponer de estos recursos a través de la Web, se han definido: 1. Los Identificadores Universales de Recursos, Universal Resource Indentificators (URI's), que permiten localizar por nombre los distintos tipos de recursos de la Web (por ejemplo, para una página web, mailto: correo@ejemplo.org para una dirección de correo electrónico). 2. Los Protocolos, para acceder a recursos con nombre en la Web (por ejemplo, el Protocolo de Transferencia de HiperTexto [HTTP]). 3. El lenguaje de Hipertexto, para publicar información fácilmente y crear vínculos entre los recursos (por ejemplo, XHTML). Hay otros conceptos de la Web con los que también es necesario familiarizarse. 1. Servidor es en general toda computadora en la que corre alguna aplicación de la Internet. En este caso es el software que sirve la aplicación web sobre alguna computadora conectada a la Internet. Por ejemplo el servidor web Apache. 2. Cliente es el software que permite acceder a un determinado tipo de recursos. Por ejemplo el navegador web para acceder a los documentos con formato de hipertexto a través del protocolo HTTP. 3. Autor es el sujeto o aplicación que crea los contenidos. Por ejemplo una persona cualquiera que publica algo en la web. 4. Usuario es el que lee los contenidos publicados por el autor. Por ejemplo, Usted que lee esta guía. Quizá el concepto más importante es que el carácter de la WWW es hipertextual, no audiovisual; es decir, está diseñada para presentar y vincular información mediante HiperTexto y

2 no mediante aplicaciones multimedia. Es importante tener esto en consideración cuando se diseña un sitio web ya que el contenido de un sitio o un documento será mejor apreciado si está concebido en un esquema de presentación hipertextual en lugar de un esquema de presentación audiovisual Qué es HTML HTML es acrónimo de HyperText Markup Language, Lenguaje de Etiquetado HiperTextual. Este es el lenguaje o código con que se escriben la mayoría de los documentos publicados en la Internet. El HTML es un aplicación del Leguaje de Etiquetación Estándar Generalizado, Standard Generalized Markup Language (SGML) para lenguajes basados en etiquetas, como el HTML, definido para crear documentos de hipertexto. El HiperTexto es lo que nos permite navegar entre el tejido de información de la WWW. El principio es muy sencillo, una vez definidos los URI's se puede dar un nombre a cualquier recurso de la WWW con el cual es posible localizarlo; con los URI's y una etiqueta del lenguaje HTML, los recursos relacionados entre sí pueden vincularse fácilmente; esta característica es la más importante del hipertexto, pues permite que la lectura de un documento deje de ser lineal al ofrecer la posibilidad de formar una estructura de red o tejido de información que enriquece el contenido de los documentos Qué son las etiquetas El HTML es un lenguaje compuesto por un conjunto predeterminado de elementos con los que se componen etiquetas para dar formato de hipertexto a documentos publicados en la Web. Las etiquetas se componen con los caracteres menor que (<) y mayor que (>) que contienen el nombre y los atributos de un elemento HTML. Se recomienda escribirlas siempre con letras minúsculas. <elemento> Así se forma una etiqueta. <elemento>contenido de la etiqueta</elemento> Cuando las etiquetas tienen contenido se deben cerrar con una diagonal que preceda el nombre del elemento. <elemento atributo1="valor1" atributo2="valor2">contenido de la etiqueta</elemento> Los elementos también pueden tener uno o varios atributos que los modifican Anidar las etiquetas El formato de un documento de hipertexto se consigue mediante la anidación del contenido, en texto plano o sin formato, dentro de etiquetas HTML que a su vez están anidadas dentro de otras etiquetas según la gramática del HTML. La regla es sencilla: las etiquetas se cierran en el mismo orden en que fueron abiertas, como si fueran reflejadas por un espejo. Ejemplo: Manera correcta de anidar las etiquetas <elemento1>

3 <elemento2> Contenido... </elemento2> </elemento1> Ejemplo: Manera incorrecta de anidar las etiquetas <elemento1> <elemento2> Contenido... </elemento1> </elemento2> Ejemplo de un documento HTML En adelante se recomienda escribir los ejemplos en HTML en el editor de texto y chequear cómo se transforma el código en el navegador. Para realizar los ejercicios no es necesario conectarse a la Internet. 1. En su computadora cree una carpeta o directorio que se llame mi_web o nómbrelo como guste. Para nombrar los archivos sólo use los caracteres {a-z, A-Z, 0-9, -, _}; se recomienda no dejar espacios en blanco en los nombres de los archivos o de los directorios que se publicarán en la web; en su lugar use guiones o letras mayúsculas cuando el nombre se forme con varias palabras, por ejemplo, mi_pagina_web.html, mipaginaweb.html o como se le ocurra, pero no use espacios; tampoco use vocales acentuadas ni la letra Eñe (Ñ) para nombrar estos archivos. 2. Con el editor de texto cree un documento nuevo que se llame mi_pagina.html y escriba en él lo siguiente, puede sólo 'copiar y pegar', pero lo que se recomienda es que lo escriba: 3. <html> <head> 6. <title> 7. Mi página web 8. </title> 9. </head> <!-- inicia cuerpo de la pagina --> 12. <body> 13. <h1>mi documento HTML</h1> 14. <p>este es el resumen del documento.<br> 15. Lo que sigue es la lista de contenidos: 16. </p> 17.

4 18. <ul> 19. <li>primer contenido</li> 20. <li>segundo contenido</li> 21. </ul> <h3>primer contenido</h3> <p>esto es un párrafo y esto una referencia a otro 26. <a href=" 27. </p> <h3>segundo contenido</h3> <p>esto es otro párrafo y esto un enlace a mi dirección 32. de <a href="mailto:mi_direcion_de_correo">correo</a>. 33. </p> </body> 36. <!-- termina cuerpo de la pagina --> 37. </html> En un código HTML es posible dejar tantos espacios en blanco o hacer tantos saltos de línea como se desee y el navegador los presentará como un sólo espacio; esto permite sangrar cada línea del código del documento para facilitar tanto su lectura como su escritura ya que así se distingue con claridad donde comienza y donde termina cada etiqueta. El sangrado en el código no es estrictamente necesario, se puede escribir todo en una sola línea y no se altera la presentación del documento, sin embargo se recomienda el sangrado del código por ser una buena práctica de programación. Puede escribir el ejemplo directamente en un editor de texto o bien con ayuda de un generador de HTML 1. Al terminar guarde el archivo en el directorio creado anteriormente. 38. Con en navegador abra el archivo mi_pagina.html, tendrá una apariencia similar a esta:

5 Las aplicaciones o programas que permiten navegar entre páginas web analizan los archivos con extensión.html e interpretan cada documento de modo que sólo muestran al usuario el contenido, es decir, sin las etiquetas con que fue estructurado. Es posible ver el código fuente de casi cualquier página web con la opción Ver código fuente en el menú del navegador. 39. Explicación del ejemplo anterior: 1. <html> Esta etiqueta comienza el documento html y lo siguiente es el contenido del documento, el encabezado y el cuerpo. 2. <head> Así comienza el encabezado. 3. <title>mi página web</title> Uno de los contenidos del encabezado es el título de la página que aparece en la barra superior de la ventana del navegador. En el idioma español existen caracteres especiales como las vocales acentuadas o la letra Eñe (Ñ) [ver apéndice], así, para que en HTML aparezca una á escribimos á. 4. </head> Cierre de la etiqueta encabezado. 5. <!-- inicia cuerpo de la pagina --> Esto es un comentario, sirve para hacer anotaciones dentro del código, sin que éstas sean visibles en la página para el usuario. Todo lo que se encuentra entre los caracteres <!-- --> será ignorado por el navegador. 6. <body> Abre la etiqueta para comenzar el cuerpo de página. 7. <h1> define el encabezado principal del documento. 8. <p> define un párrafo del documento. 9. <br> define un salto de línea. 10. <ul> define una lista no ordenada. 11. <li> define un elemento de lista. 12. <h3> define un encabezado menor. 13. </body> Termina el cuerpo del documento, cierra la etiqueta. 14. </html> Por último se cierra la etiqueta y termina el documento HTML. La mejor transformación del documento en un navegador depende de abrir y cerrar las etiquetas de manera correcta. El HTML ha sido redefinido por el Word Wide Web Consortium (W3C), Consorcio de la Red Mundial Amplia, para estandarizar 2 los elementos de este lenguaje, la especificación HTML más reciente es HTML 4.1. En el año 2000 la W3C reformuló HTML 4.0 en XHTML 1.0 como una aplicación XML 1.0, fue el primer paso para definir XHTML 1.1 basado en módulos del Lenguaje de Etiquetado

6 Extensible, extensible Markup Languge (XML). En los objetivos de esta guía no está explicar lo referente al lenguaje XML, por ahora basta con saber que XHTML es una familia de XML que permite crear documentos de hipertexto más accesibles y mejor definidos técnicamente. 2.- XHTML Estructura del documento XHTML es acrónimo de extensible HiperText Markup Language, Lenguaje de Etiquetado HiperTexual Extensible. Se trata de una reformulación de la versión HTML 4.0 que facilita la composición de documentos de hipertexto y ayuda a que el documento conserve sus características independientemente del navegador o el sistema operativo con que es leído. Este capitulo describe la composición de un documento XHTML. De la especificación XHTML 1.1 se han tomado sólo los módulos, elementos y atributos necesarios para editar un documento XHTML sencillo Diferencias básicas entre XHTML y HTML Para quien tenga alguna noción de HTML se presenta la siguiente lista de características básicas que distinguen un documento XHTML de uno HTML. La gramática de un documento XHTML debe ser correcta, tal como se define en la especificación, a diferencia de un documento HTML que permite usos incorrectos tolerados por los navegadores. Por ejemplo <p>párrafo</p> es correcto, <p>párrafo es incorrecto. El nombre de los elementos XHTML y sus atributos deben escribirse con minúsculas, a diferencia de los elementos HTML que se escribían con mayúsculas. Por ejemplo <head> es correcto, <HEAD> es incorrecto. Los valores de los atributos XHTML se escriben entre comillas, a diferencia del HTML que permite escribirlos con o sin comillas. Por ejemplo id="nombre" es correcto, id=nombre es incorrecto. Se considera que las etiquetas XHTML que no tienen contenido abren y cierran en sí mismas, además debe dejarse un espacio en blanco antes de cerrarlas. Por ejemplo <br /> es correcto, <br> es incorrecto. Para identificar el nombre de elementos en XHTML ya sólo se usa el atributo id, incluso donde antes se usaba el atributo name. En un documento XHTML los caracteres especiales deben escribirse como entidad SGML. Por ejemplo español es correcto, español es incorrecto Módulo de Estructura Los elementos de este módulo conforman la estructura básica del documento, además incluyen información que describe el contenido del documento; el lenguaje en que está escrito, el título, palabras clave que utilizan los motores de búsqueda para ubicar un documento, etcétera. Notación: En los ejemplos, la estructura básica de cada elemento se escribe en negritas sólo para ayudar a identificarla. <?xml version="1.0" encoding="iso "?>

7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" " <html xmlns=" xml:lang="es"> <head> <title>título_de_la_página</title> <meta http-equiv="content-type" content="text/html;charset=iso " /> <meta name="keywords" xml:lang="es" content="palabras, clave, separadas, con, comas" /> </head> <body> [Contenido de la página] </body> </html> Enseguida se explica la composición del ejemplo anterior: Especificar el tipo de documento Las primeras líneas son la especificación para documentos formados con XHTML 1.1. Aquí se declara que es un documento XML 1.0 y define que el tipo de documento es XHTML 1.1. <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" " HTML: documento de hipertexto La etiqueta <html> indica el comienzo del contenido del documento. En esta línea además se especifica que se usa xhtml y que el idioma del contenido es el español. <html xmlns=" xml:lang="es">

8 HEAD: encabezado La etiqueta <head> contiene los datos que conforman el encabezado del documento. Aquí se incluye, el título de la página, datos que facilitarán que la página sea localizada por los motores de búsqueda. <head> <title>título_de_la_página</title> <meta http-equiv="content-type" content="text/html;charset=iso " /> <meta name="keywords" xml:lang="es" content="palablaras, clave, separadas, con, comas" /> </head> Descripción del encabezado del ejemplo. 1. <head> Inicia encabezado. 2. <title> inicia título de la página (es lo que aparece en la barra superior del navegador) y lo cierra la etiqueta </title>. 3. <meta http-equiv="content-type" content="text/html;charset=iso " /> declara que el tipo de contenido es texto/html y que el conjunto de carácteres que se emplearán es iso Nótese que a diferencia de title, la etiqueta meta no tiene contenido sólo atributos por lo que hay que cerrarla en símisma. 4. <meta name="keywords" xml:lang="es" content="palablaras, clave, separadas, con, comas" />, declara las palabras clave que los motores de búsqueda 4 utilizan para localizar documentos. 5. </head> cierra el encabezado del documento BODY: contenido de la página El elemento BODY es el que contiene toda la información que se visualiza en el cuerpo de la ventana del navegador. Aquí se estructura la información del documento con los elementos de los módulos de texto, hipertexto, lista, imagen, etcétera. <body> [Contenido de la página] </body> La etiqueta </html> cierra el documento html. Esta es la estructura elemental de un documento XHTML. Los elementos que se describen enseguida estarán siempre contenidos en el elemento BODY.

9 2.3.- Módulo Texto Este módulo contiene los elementos con los que se maqueta el texto del documento P: párrafos La etiqueta <p> comienza un párrafo y </p> lo termina. Ejemplo: <p>primer párrafo</p> <p>segundo párrafo</p> Resultado en el navegador: Primer párrafo Segundo párrafo BR: salto de línea Se usa para cortar una línea. Ejemplo: <p>primera línea<br /> Segunda línea </p> Resultado en el navegador: Primera línea Segunda línea Encabezados: destacar titulares Las etiquetas <h1> <h2> <h3> <h4> <h5> <h6> se emplean para destacar un encabezado, <h1> es el mayor y <h6> el menor. Para destacar algo importante, por ejemplo el título del documento se usa <h1> y cuando algo es menos importante, por ejemplo un subtítulo, se usa <h2>. Es obligatorio cerrar la etiqueta cuando se termina de escribir el texto que se va a destacar, como se observa en el siguiente ejemplo. Ejemplo: <h1>encabezado principal</h1> <h2>subtítulo</h2> <p>primer parrafo</p> <p>segundo parrafo</p> <h3>subtema</h3> <p>primera línea<br />

10 Segunda línea </p> Resultado en el navegador: Encabezado principal Subtítulo Primer párrafo Segundo párrafo Subtema Primera línea Segunda línea DIV: Bloques de texto El elemento DIV permite formar bloques de texto; sin atributos no altera en nada la presentación del texto contenido entre sus etiquetas, pero si se definen sus atributos se puede hacer casi cualquier cosa, en cuanto a presentación se refiere. En el capitulo Hojas de Estilo en Cascada se extiende la referencia al tema de la presentación gráfica. Ejemplo para alinear el texto en el centro de la página definido por el atributo style: <div style="text-align: center">bloque de texto</div> Resultado en el navegador: Bloque de texto Módulo de Hipertexto: enlaces a otros recursos El elemento A compone este módulo que nos permite vincular o enlazar un documento con otros recursos en la Internet o a fragmentos de información del mismo documento A: enlace a página web y correo electrónico Ejemplo: Ejemplo de hipervínculo a la página web de <a href=" GNU/Linux</a> y a una dirección de <a href="mailto: correo@ejemplo.org">correo</a>. Resultado en el navegador: Ejemplo de hipervínculo a la página web de Debian GNU/Linux y a una dirección de correo URI's absolutos y relativos

11 Un recurso en la web se puede enlazar por medio de su URI absoluto o su URI relativo. URI absoluto consiste en dar el nombre completo (absoluto) del recurso, por ejemplo, es el URI absoluto del documento mi_pagina.html donde: indica que usa el HiperText Transfer Protocol, Protocolo de Transferencia de HiperTexto para que la computadora lea el documento. indica el nombre del servidor que hospeda el documento. mi_web indica el nombre del directorio en el servidor que contiene el documento. mi_pagina.html es el nombre del documento de hipertexto. Con un URI absoluto se puede enlazar un documento cualquiera desde otro documento cualquiera sin importar su localización en la web. <a href=" to</a> URI relativo consiste en nombrar los documentos a partir de su directorio raíz sin tomar en cuenta el nombre del servidor. Por ejemplo para el directorio raíz es mi_web; de este modo para enlazar otros documentos contenidos en el mismo directorio raíz basta con poner el nombre relativo de documento. Con un URI relativo se puede enlazar un documento cualquiera siempre que los dos documentos estén en el mismo directorio raíz de un mismo servidor, es decir documentos de un mismo sitio web. <a href="mi_pagina.html">documento 1</a> <a href="subdirectorio/mi_pagina2.html">documento 2</a> Lo más recomendable es usar URI's absolutos sólo cuando es necesario y usar URI's relativos siempre que los enlaces sean entre documentos del mismo sitio web Indicadores de fragmento Un indicador de fragmento es un enlace a un fragmento dentro del mismo documento. Se usa generalmente en índices, tablas de contenido, notas al pie, definiciones, etc. Su empleo consiste en definir un enlace y el destino del enlace con los atributos href y id del elemento A. Para distinguir que se trata de un fragmento del mismo documento se escribe el carácter usado para abreviar número (#) antes del nombre del fragmento y en el indicador de destino se suprime el carácter. Ejemplo:... ejemplo de <a href="#nombre_del_fragmento">fragmento</a>... más código html

12 ... <a id="nombre_del_fragmento">destino del enlace</a> Módulo de Lista Los elementos de este módulo se utilizan para crear listas UL: información no ordenada Se usa el elemento UL para crear una lista con información no ordenada, por ejemplo una lista de utensilios encontrados en una cocina OL: información ordenada Se usa el elemento OL para crear una lista con información ordenada, por ejemplo la lista de los capítulos de un libro o los pasos para preparar un pastel LI: objeto de lista Cada objeto de una lista, ya sea ordenada o no ordenada se escribe entre las etiquetas <li> y </li>. Dentro de un objeto de lista es posible crear otra lista como se observa en el siguiente ejemplo, sólo tenga cuidado con el orden en que abre y cierra las etiquetas. Ejemplo: <p>lista de ejemplo</p> <ul> <li>elemento 1</li> <li>elemento 2 <ul> <li>elemento 2.1</li> </ul> </li> <li>elemento 3</li> </ul> Resultado en el navegador: Lista de ejemplo Elemento 1 Elemento 2 o Elemento 2.1 Elemento Módulo de presentación

13 Lo más recomendable es especificar la presentación de un documento mediante una hoja de estilo externa, aunque existe un grupo de elementos que permiten hacer distinciones tipográficas que enriquecen la presentación de un documento HR: Línea de separación horizontal El elemento HR se usa para separar texto mediante una línea horizontal, por ejemplo las notas al pie de página. La etiqueta se forma de esta manera (<hr />) pues no tiene contenido. Por ejemplo:...texto <hr /> texto... Resultado en el navegador:...texto texto Presentación tipográfica Ejemplo, Tipo Negrita. Modo de empleo: <b>fuente en negrita</b> Resultado en el navegador: Fuente en negrita Otros elementos de este Módulo son: i - Fuente en itálicas big - Fuente grande small - Fuente pequeña sub - Índice inferior sup - Índice superior tt - Fuente tipo teletexto Compruebe usted mismo los resultados al usar estas etiquetas con algún texto Módulo de Imágenes IMG: imágenes Este módulo permite incluir imágenes en un documento. Ejemplo: <p><img src="imagenes/debian.png" alt="[ Debian ]" width="68" heigth="90" /><br />

14 Debian GNU/Linux -- El Sistema Operativo Universal.</p> Resultado en el navegador: Debian GNU/Linux -- El Sistema Operativo Universal. Nótese que para incluir el archivo de la imagen se ha utilizado un URI relativo, dado que se presupone que en el directorio raíz de la web de ejemplo existe un directorio imágenes que contiene este archivo Ejercicio Intente crear un documento XHTML basado en el ejemplo mi_pagina.html y compárelo con el ejemplo válido que se encuentra en el apéndice. Incluya otros elementos en el código y observe como se transforman. Cuando tenga claro cómo usar los elementos descritos en esta guía consulte las especificaciones si necesita enriquecer el formato de su documento Validación del documento Para verificar que en efecto su documento es válido, use el Servicio de Validación de la W3C [ ]. 3.- Hojas de Estilo en Cascada Las hojas de estilo permiten separar el contenido de la presentación de un documento XHTML, facilitan el mantenimiento de un sitio web y ayudan a extender su usabilidad a otros dispositivos distintos a un monitor de computadora (por ejemplo un PDA o un monitor de televisión). La ventaja de esto es que así es posible mantener un documento limpio, sólo con la información esencial. En términos prácticos el documento será más ligero en kilobytes y por tanto se cargará más rápido en el navegador de los usuarios. Al webmaster, esto le ahorra tiempo de trabajo, pues para modificar automáticamente las características gráficas de todas las páginas de un sitio basta con editar sólo un archivo. Este capitulo explica cómo diseñar una hoja de estilo en cascada para un documento XHTML. Se toma como referencia la especificación Cascading Style Sheets 2, Hojas de Estilo en Cascada 2 (CSS2) Crear una hoja de estilo Una hoja de estilo es un archivo de texto simple que contiene reglas de la tecnología CSS e interactúa con un documento de texto estructurado, por ejemplo HTML, XHTML o XML. Para diseñar una hoja de estilo primero se crea un archivo de texto simple y se nombra con la extensión.css, por ejemplo estilo.css.

15 3.2.- Sintaxis de una hoja de estilo Las Hojas de estilo contienen un conjunto de reglas CSS que modifican un documento estructurado, en este caso XHTML. Las reglas tienen dos componentes: un selector y una declaración; el selector indica que elemento se va modificar y la declaración es un conjunto de uno o más atributos con sus valores contenidos entre los caracteres de llave ({, })que modificarán la presentación del elemento. Las declaraciones (atributo: valor) se separan con el carácter punto y coma (;). body { color: black; background-color: silver; font-size: 12px } /* presenta la fuente del cuerpo de la página en negro, con tamaño de 12 píxeles y el fondo de la página en gris plata */ h1 { color: navy; font-size: 18px } /* presenta la fuente del encabezado h1 de color marino, con tamaño de 18 píxeles */ El texto contenido entre los caracteres /* y */ es un comentario. Existen más de 100 atributos y valores CSS2, se recomienda consultar la especificación oficial CSS2 para conocerlos. En las Referencias hay enlaces a la especificación traducida al español y en el Apéndice hay una lista básica de colores HTML y un ejemplo sencillo de hoja de estilo Vincular un documento XHTML a una hoja de estilo externa Dentro de la etiqueta encabezado <head> del documento XHTML se incuye la siguente etiqueta del elemento LINK (vínculo): <link href="nombre_del_archivo.css" rel="stylesheet" type="text/css" /> Cómo usar el elemento y el atributo STYLE en un documento XHTML Hay otras dos maneras de definir el estilo de un documento XHTML, aunque no son recomendables para sitios de varias páginas, bien valen para un documento pequeño y puede resultar útil saberlo. Como elemento se usa STYLE para formar una etiqueta que contenga las reglas de estilo, esta etiqueta va incluida en la etiqueta del encabezado. Ejemplo: <head>... <style type="text/css"> elemento1 { atributo1: valor1; atributo2: valor2 } elemento2 { atributo1: valor1; atributo2: valor2 } elemento3 { atributo1: valor1; atributo2: valor2 } </style>

16 </head> El otro modo es, dado cualquier elemento se puede definir el atributo STYLE. Esta información va en contenida en etiquetas que a su vez están contenidas en las etiquetas del elemento BODY. Ejemplo: <body>... <elemento style="atributo1: valor1; atributo2: valor2"> Contenido del elemento </elemento>... </body> Clase de estilo para elemento Otra funcionalidad de las Hojas de Estilo es la posibilidad de crear tantas clases como se desee para cada elemento. Para crear una clase en una hoja de estilo externa se define el selector con el nombre de la clase (elemento.nombre_de_la_clase) y enseguida las reglas de la clase, por ejemplo si ya se definieron reglas para el elemento1 y se necesitan otras reglas para ese mismo elemento en otra parte del documento basta crear una clase para el elemento1 con reglas distintas. En la hoja de estilo externa habría que escribir: elemento1 { atributo1: valor1; atributo2: valor2 } elemento1.nombre_de_la_clase { atributo3: valor3; atributo4: valor4 } Y en el documento XHTML se especifica así para que el contenido del elemento tome las declaraciones de las reglas de la clase: <elemento1>contenido del elemento</elemento1> <elemento1 class="nombre_de_la_clase">contenido del elemento</elemento> Ejercicio CSS Intente vincular una hoja de estilo externa a un documento XHTML que haya realizado. En el siguiente ejemplo se vinculó al documento mi_pagina2.html la hoja de estilo ejemplocss y este fue el resultado: 4.- La Web la tejemos todos

17 La Web es un recurso universal, si bien existen instancias que definen las pautas para el desarrollo escalable de la web, es tarea de cada usuario hacer su parte para mantener el carácter universal de este sistema de información. Apegarse a los estándares y ordenar la información de manera clara son dos tareas muy sencillas con las que el usuario puede colaborar para a construir una Web accesible y útil para todos Esquema básico de un sitio web Un sitio web es el conjunto de documentos relacionados entre sí que comparten un mismo directorio raíz en un mismo servidor en la WWW. La información contenida en los documentos que componen un sitio web es más útil si está organizada de manera clara y sencilla. Organice la información por secciones, si le es posible ordénela en directorios separados. Incluya siempre un método de contacto con el responsable del sitio. Si publica un documento con formato propietario proporcione siempre una alternativa con formato estándar Recomendaciones de accesibilidad web Es importante que los documentos que se publican en la web puedan ser leídos por el mayor número de usuarios posibles, de ahí que se recomiende usar lenguajes y formatos estandarizados que no necesitan aplicaciones o plug-ins especiales 3 para que puedan ser leídos por un navegador cualquiera. El W3C ha definido un conjunto de recomendaciones orientadas a ampliar la funcionalidad y universalidad de la Web. Este capitulo explica cómo publicar páginas siguiendo las pautas de accesibilidad de contenidos web. Referencia: Pautas de Accesibilidad del Contenido en la Web 1.0 definidas por el W3C. 1. Proporcione alternativas para los contenidos visuales y auditivos. Proporcione texto equivalente a todo contenido visual o sonoro a través de los atributos atl y/o longdesc. La web es hipertextual, si usa contenidos audiovisuales procure incluir una alternativa textual. 2. No se base sólo en el color. Antes de pensar en los colores que le agradan más, piense en los colores que se leen mejor. Contraste el color del texto y el color del fondo lo suficiente de modo que sea legible para personas con deficiencia de percepción de color o en monitores en blanco y negro. 3. Utilice etiquetas u hojas de estilo y hágalo apropiadamente. Procure siempre usar hojas de estilo externas en lugar de definir el estilo de un documento con elementos o atributos de presentación. Utilice los elementos sólo para lo que han sido definidos, no altere su función por medio de la hoja de estilo. Por ejemplo use las etiquetas de encabezado para destacar texto, en lugar de incrementar el tamaño de la fuente normal mediante el estilo. 4. Identifique el lenguaje natural usado. Señale siempre el lenguaje principal del documento con el atributo xml:lang=" " en la etiqueta <html> del encabezado.

18 5. Cree tablas que se transformen correctamente. Si usa tablas cuide abrir y cerrar las etiquetas en el orden correcto. Úselas sólo para dar formato a tablas de datos, no las use para estructurar el diseño gráfico del documento (para eso use hojas de estilo). 6. Asegure que las páginas que incorporen nuevas tecnologías se transformen correctamente. Si utiliza alguna animación o algún scrip para volver dinámico algún elemento, asegúrese de que su contenido siga siendo visible para quien no cuente en la tecnología para visualizarlo. 7. Asegure al usuario el control sobre los cambios de los contenidos dinámicos. Hasta que el usuario del navegador pueda detenerlo cuando lo desee, evite cualquier tipo movimiento en las páginas (texto dinámico y animaciones). Evite las actualizaciones y redireccionamientos automáticos. 5.- Notas 8. Utilice las tecnologías y pautas W3C. Use las especificaciones y las pautas definidas por la W3C [ htt:// ] siempre que sea posible; si aún no hay especificación para el formato de sus contenidos utilice texto equivalente. 9. Proporcione información de contexto y orientación. Incluya un breve resumen sobre el contenido del documento. Utilice el atributo title para rotular el contenido de los elementos de su documento. No utilice enlaces del tipo Haga click aquí y proporcione información sobre el destino y el contenido de enlace. 10. Proporcione mecanismos claros de navegación. Use un menú de navegación, tablas de contenido y mapas de sitio para ayudar a que el usuario encuentre lo que busca en su sitio. Utilice el atributo title en el elemento de hipertexto para orientar a donde dirige un enlace. Utilice metadatos (elemento META) para proporcionar información semántica del documento. 11. Asegure que los documentos sean claros y simples. Cuide que la redacción de su documento sea clara y simple para que sea fácilmente comprendida por el usuario Existen programas con una interfaz gráfica o de ventanas que permiten generar documentos html. Uno de ellos es Amaya [ que además cumple con las especificaciones de la W3C. Estos programas facilitan la elaboración de documentos html, xhtml, css, etc Hay empresas comerciales que cuando desarrollan una nueva funcionalidad web sólo el navegador que ellas desarrollan pueden leerla. De ese modo el usuario require comprar o actualizar ese navegador o se perderá de los contenidos que implementen esa funcionalidad. Esto va contra los principios de la web ya que la web es un recurso público no sólo de algunas empresas; de ahí la importancia de usar los estándares para permitir que la información pueda ser leída por el mayor número de usuarios posible sin importar que navegador use Es importante considerar que no todas las personas usan el mismo tipo de computadora, que no todas usan el mismo sistema operativo y que existe un número considerable de navegadores con distintas características. Se recomienda no requerir al usuario programas especiales para leer algún documento.

19 4. - La mayor parte de las personas que buscan información en Internet lo hacen mediante motores de búsqueda como google.com, estos buscadores leen las palabras clave que declaramos con la etiqueta meta para indexar las páginas de sus bases de datos. 6.- Referencias Especificación HTML 4.1 Traducido al español [ es/cover.html] XHTML El Lenguaje de Etiquetado Hipertextual Extensible Traducido al español [ XHTML XHTML basado en módulos Traducido al español [ W3C HTML Validation Service Servicio de Validación de documentos HTML [ Hojas de Estilo en Cascada, nivel 2 Especificación CSS2 Traducido al español [ Pautas de Accesibilidad al Contenido en la Web 1.0 Traducido al español [ 7.- Apéndice Carácteres No todos los carácteres del teclado son indentificados por los navegadores, el modo de asegurarse de que el navegador los muestre de manera correcta es escribiéndolos como entidades SGML. Hay dos mareras de componer las entidades SGML, la primera es con el número que tiene el carácter en la tabla ASCII (entidad numérica), la segunda es con la abreviatura de su nombre en inglés (entidad nombrada). En ambos casos primero se escribre el carácter Ampersand (&), enseguida el número o la abreviatura y al final el carácter Punto y coma (;). Los caráracteres especiales más comunes empleados en el idioma español: Entidad numérica: " Entidad nombrada: " Nombre: Comillas Entidad numérica: & Entidad nombrada: & Nombre: Ampersand Entidad numérica: < Entidad nombrada: < Nombre: Menor que Entidad numérica: > Entidad nombrada: > Nombre: Mayor que Entidad numérica: Entidad nombrada: &npsp; Nombre: Espacio en blanco evita el salto de línea Entidad numérica: Entidad nombrada: Nombre: Copyright Entidad numérica: Entidad nombrada: Nombre: Registrado Entidad numérica: Entidad nombrada: Nombre: Interrogación invertido Entidad numérica: Á Entidad nombrada: Á Nombre: A con acento Entidad numérica: Ñ Entidad nombrada: Ñ Nombre: Ñ Entidad numérica: Ü Entidad nombrada: Ü Nombre: U con diéresis Entidad numérica: Entidad nombrada: Nombre: Euro Colores HTML

20 Color: aqua Valor hexadecimal: #00ffff Color: black Valor hexadecimal: # Color: blue Valor hexadecimal: #00ffff Color: fuchsia Valor hexadecimal: #ff00ff Color: green Valor hexadecimal: # Color: gray Valor hexadecimal: # Color: lime Valor hexadecimal: #00ff00 Color: maroon Valor hexadecimal: # Color: navy Valor hexadecimal: # Color: olive Valor hexadecimal: # Color: purple Valor hexadecimal: # Color: red Valor hexadecimal: #ff0000 Color: silver Valor hexadecimal: #c0c0c0 Color: teal Valor hexadecimal: # Color: white Valor hexadecimal: #ffffff Color: yellow Valor hexadecimal: #ffff Ejemplo XHTML válido: mi_pagina2.html <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" " <html xmlns=" xml:lang="es"> <head> <title>mi página web</title> <meta http-equiv="content-type" content="text/html;charset=iso " /> <meta name="keywords" xml:lang="es" content="palablaras, clave, del, documento" /> </head> <!-- inicia cuerpo de la pagina --> <body> <h1>mi documento HTML</h1> <p>este es el resumen del documento.<br /> Lo que sigue es la lista de contenidos: </p>

21 <ul> <li>primer contenido</li> <li>segundo contenido</li> </ul> <h3>primer contenido</h3> <p>esto es un parrafo y esto una referencia a otro <a </p> <h3>segundo contenido</h3> <p>esto es otro parrafo y esto un enlace a mi dirección de <a href="mailto:mi_direcion_de_correo">correo</a>. </p> </body> <!-- termina cuerpo de la pagina --> </html> Ejemplo sencillo de hoja de estilo /* Hoja de estilo CSS2 ejemplo.css */ /* Cuerpo del documento */ body { color: black; background-color: silver; font-size:.8em; font-family: Helvetica, Verdana, Arial } /* Encabezado principal */ h1 { color: navy; background-color: white; border: 1px black solid; text-align: center }

22 /* Resto de encabezados */ h2, h3, h4, h5, h6 { color: navy; text-align: left } /* Enlaces */ a { color: red; text-decoration: underline } /* Enlaces al pasar el raton */ a:hover { color: navy; text-decoration: none } /* Imagenes */ img { border: 0px } Hosting: Modos de publicar un documento en la web Un documento de hipertexto es más útil si cualquer persona puede leerlo, copiarlo, redistribuirlo y/o modificarlo fácil y libremente desde la web. Para esto primero es necesario hacer público el documento en algún servidor de web. Al servicio de hospedar cualquier tipo de documentos disponibles a través de la web se le llama hosting. Hay varios tipos de hosting. Gratuito Basta con buscar las palabras espacio web gratis en cualquier motor de búsqueda y aparecerá una lista numerosa de compañías que ofrecen este servicio a cambio de incluir su publicidad en los documentos que ahí se publiquen. Las instrucciones para obtener espacio web gratuito varían según el servidor que se elija, pero por lo regular son muy sencillas. De pago Hay compañías que ofrecen espacio web sin publicidad, pero a cambio de pagar una renta mensual o anual por el servicio. Generalmente esto va acompañado del tramite de un nombre de dominio, por ejemplo, pero eso es un costo extra. Autogestionado También es posible que uno mismo instale su propio servidor de web, lo conecte a la Internet mediante una conexión ADSL contratada con una compañía telefónica, es barato si se coopera con un grupo de amigos con los que se comparta el uso y el pago del servicio. Institucional Hay instituciones, generalmente educativas, que ofrecen espacio web a sus alumnos o a las personas que ahí trabajan.

23 En la práctica no hay mucha diferencia entre hospedar un documento en un servidor gratuito, uno de pago o uno propio si sólo se busca publicar información y no administar el servicio o usar otras aplicaciones como bases de datos o formularios cgi, por ejemplo. En la web un documento o un sito vale por la calidad de su contenido y por la universalidad del formato en que se presenta. Así, usted elija el hosting que más se adapte a sus posibilidades técnicas y económicas, y que resuelva mejor sus necesidades comunicativas Transferencia de archivos Una vez que se ha creado un documento de hipertexto y se cuenta con un servidor web para hospedarlo sólo queda copiar o transferir el documento de la computadora personal al servidor web conectado a Internet para que cualquier persona pueda leerlo desde cualquier parte del mundo. Para poder transferir documentos de una computadora a otra, en este caso a un servidor web, es necesario un Protocolo, un programa o cliente que permita hacer la transferencia, una cuenta de usuario y una contraseña en la computadora de destino. Las maneras más comunes de transferir archivos son: FTP File Transfer Protocol, Protocolo de Transferencia de Archivos. Este protocolo es el adecuado para transferir varios documentos o documentos pesados (en kilobytes). Para usarlo es necesario contar con un cliente de FTP en él se especifica el nombre del servidor al que se hará la transferencia, y el nombre y la contraseña del usuario. Un cliente FTP es un programa que sirve para transferir archivos entre computadoras conectadas a una red. Si en su computadora no cuenta con un programa de este tipo, lo más probable es que quiera decargarlo de la Internet, para esto busque usted mismo a travé de un motor de búsqueda el cliente FTP que necesita. Los hay para diversos Sistemas Operativos, gratuitos, de pago y de software libre. También hay clientes con interfaz gráfica y otro que se ejecutan directamente en la línea de comandos en una terminal DOS o UNIX. Con el cliente de FTP se pueden listar los archivos locales y los del servidor, transferir, borrar y renombrar los archivos. FTP vía web Esta es la manera más usada por los servidores web gratuitos, consiste en una página web del servidor gratuito que pregunta por el nombre y contraseña del usuario, y por los archivos que se desea transferir mediante un formulario que copia los archivos locales al servidor usando el FTP, pero sin necesidad de usar un cliente FTP ya que la transferencia se hace con el navegador. Las instruciones varían según la compañia que ofrece el servicio, pero por lo regular son muy sencillas. SCP Secure Copy, Copia segura. Para usuarios de sistemas operativos tipo UNIX, existe el comando scp es sencillo de usar además los datos que transfiere viajan a través de un canal seguro (encriptado). En necesario tener cuenta de usuario con en las dos computadoras.