La declaración del tipo de documento web

La declaración del tipo de documento, expresada con la etiqueta <!DOCTYPE ...>, informa al navegador el tipo de documento (HTML o XHTML) y la versión usada en el resto del documento. Con esto el navegador sabrá cómo interpretar la sintaxis y contra cual especificación validar su código. La tabla html_doctypes muestra los tipos de documentos y sus versiones actualmente en uso. [Para una lista completa que incluye tipos de documentos para XHTML-Basic y XHTML Mobile Profile, resulta conveniente consultar la Wikipedia].

Aunque en HTML es opcional, siempre es conveniente incluir el tipo de documento; y a menos de que se esté usando (X)HTML5 es difícil memorizarlos. Por eso los autores históricamente han tenido una fuente de la cual copiar y pegar los tipos de documentos en sus creaciones, o confiar en un programa de diseño web que haga el trabajo automáticamente.

Si se omite la declaración del tipo de documento, la mayoría de navegadores entran en "quirks mode", un modo de compatibilidad para poder desplegar páginas web obsoletas que contienen errores o "quirks", con resultados que eran dependientes del navegador. Si la declaración del tipo de documento está presente, el navegador entra en modo estándar, y si el documento es válido, el comportamiento debería ser homogéneo entre navegadores.

Existen varias herramientas gratuitas de aseguramiento de la calidad (QA, Quality Assurance)que permiten someter un documento web a un conjunto de pruebas y obtener retroalimentación de si está bien formado, se conforma al tipo de documento que declara, no tiene enlaces rotos, sus estilos son válidos y otras pruebas. Algunas de estas herramientas son las siguientes:

• W3C Markup Validation Service. Es parte del juego de herramientas de control de calidad del Consorcio Web. Permite validar un documento HTML o XHTML. Tiene soporte experimental para (X)HTML5.
• El W3C's Unified Validator (Unicorn) también del Consorcio Web, permite validar tanto un documento (X)HTML como sus estilos (CSS). Tiene soporte para CSS 3.
• Validator.nu. Un conjunto de validadores que utilizan varios esquemas (además de DTD) para aseguramiento de la calidad. Es especialmente útil para (X)HTML5.

Existen otros validadores disponibles no mencionados en la lista anterior. Un código que resulte ser válido tras someterse a varios validadores, se considerará de mejor calidad y con más garantía de funcionar apropiadamente entre navegadores.

Cuando escriba un documento HTML, almacénelo con extensión .html y los documentos XHTML con extensión .xhtml. Aunque la extensión no debería ser algo de importancia, de forma lamentable, la mayoría del software web actual se guía por este detalle en lugar de la declaración del tipo de documento (incluso los validadores del W3C). Es probable que se tenga que hacer ajustes en la configuración del servidor web para que sirva los archivos XHTML correctamente. Además Internet Explorer 8 y anteriores no despliegan páginas XHTML sino que las ofrecen al usuario para que las guarde en disco; lo cual es una muestra de la reluctancia de Microsoft por los estándares.

(X)HTML5 pretende simplificar el web de un modo pragmático. Aunque aquí se incluye el "5" en "(X)HTML5" para diferenciarlo de sus predecesores, sus autores lo llaman realmente HTML, el estándar vivo, sin ningún número de versión, y por eso no se especifica en el DOCTYPE, ni tampoco su DTD como se aprecia en la línea 1 del xhtml5_outline, lo cual hace que deje de ser una aplicación XML válida. Por esto se dice que XHTML5 no existe como un estándar. El estándar es HTML5, el cual permite utilizar tanto la notación de HTML como XML, pero sin mezclarlos. Por esto XHTML5 no es una aplicación XML como sí lo es XHTML 1.0. XHTML5 simplemente es un término para referirse al HTML5 que utiliza notación XML.

Dado que XHTML5 no es una aplicación XML, los navegadores ignorarán la declaración XML (<?xml ...?>) en la primera línea del documento, por lo cual es común omitirla, como se hizo en el xhtml5_outline. La declaración de codificación debe hacerse entonces en el encabezado con un elemento meta (línea 4) mucho más sencilla que en XHTML 1.0 (compárese con la línea 7 del xhtml_outline).

   
      
      
   
   
      
   

]]>

El elemento documento

El elemento documento o elemento raíz de un documento (X)HTML es html. Normalmente se escribe sin atributos, lo cual es válido tanto en HTML como XHTML. Su único atributo exclusivo en XHTML es el espacio de nombres xmlns, el cual sirve para indicar que sus identificadores pertenecen al espacio de nombres de XHTML y así evitar que colisionen con otras especificaciones. Los demás atributos son los comunes para casi todos los elementos XHTML, mostrados en la xhtml_common_att. El elemento raíz html sólo admite dos elementos hijos: un encabezado (head) y el cuerpo del documento (body).

Encabezado del documento

El encabezado del documento (X)HTML contiene información sobre el documento mismo pero que no es considerado parte del contenido, a lo que frecuentemente se le llama "metadatos" y son útiles para los navegadores o motores de búsqueda. Los elementos que pueden aparecer en el encabezado son: el título del documento, metadatos, hojas de estilo, programas de JavaScript y otros objetos. En esta sección se estudiarán los dos primeros.

El título del documento se escribe como un texto simple en el contenido del elemento title y es obligatorio en XHTML. No es parte del contenido del documento porque las personas lo usarán antes de tener acceso a él. Por eso, es uno de los textos más importantes y siempre debe escogerse con cuidado, tratando de que sea corto y descriptivo. Aparece en la barra de título del navegador y en los resultados de los motores de búsqueda como Google y Yahoo. Los lectores lo verán en el historial de su navegador y con suerte en sus favoritos.

Los metadatos son detalles sobre el contenido del documento como el autor, palabras clave, codificación del texto, etc. Se escriben en forma de parejas atributo-valor con el elemento vacío meta. El nombre del metadato se escribe en el atributo name y el valor del metadato en el atributo content. Si el nombre del atributo es el mismo que una de las directivas del encabezado HTTP se puede escribir en el atributo http-equiv en lugar de name. Cuando un documento web es solicitado, el servidor web puede revisar el encabezado por estos metadatos http-equiv y agregar las respectivas directivas en el encabezado del mensaje de respuesta HTTP (HTTP Response header) que precede al documento.

La recomendación (X)HTML no define un conjunto de valores válidos para ninguno de los atributos de meta, sino que permite libremente construir perfiles (profiles) de metadatos. El xhtml_header_example muestra un ejemplo de encabezado con título y metadatos comunes en XHTML 1.0. Para más detalles, revísese la especificación HTML 4.01. En versiones más recientes de (X)HTML, el W3C ha adoptado una notación más elaborada para la especificación de metadatos llamada Marco de descripción de recursos (RDF, Resource Description Framework).

   
   
   
   
   

]]>

El metadato para declarar la codificación del documento (en la línea 2 del xhtml_header_example) es tan común que en (X)HTML5 se agregó el atributo charset [que conceptualmente debió llamarse encoding] al elemento meta. De esta forma, los documentos (X)HTML5 pueden especificar la codificación de la forma compacta <meta charset="utf-8"/>, como se hizo en la línea 4 del xhtml5_outline.

Elementos de estructura en (X)HTML5

En un sitio web puede haber publicaciones de diversa naturaleza y de distintos autores: artículos, entradas de un blog, comentarios enviados por los lectores, libros, tutoriales, encuestas, noticias, etc. Para representar estas creaciones (X)HTML5 define seis elementos genéricos para amoldarse y poder describir la estructura de un documento: header, footer, nav, aside, article y section.

En (X)HTML5 el elemento header sirve para describir el encabezado de página, de un artículo o una sección. En cuanto a un sitio web, el encabezado suele contener el logotipo de la empresa o del sitio, el título del sitio, algún lema, y un campo de texto para hacer búsquedas en el sitio web, entre otros elementos. En las líneas 10 a 14 del xhtml_page_structure se muestra un encabezado de sitio web. El sobreuso que se hizo en el xhtml_page_structure del atributo id en la mayoría de elementos de estructura es opcional, pero facilita la labor de presentación (hojas de estilo) y de comportamiento (JavaScript).

El elemento footer indica el pie de página, o el pie de una sección; el cual sirve para indicar información acerca de ella, como el autor, enlaces hacia documentos relacionados (como términos de servicio, u otro menú de navegación), derechos de autor, etc. Las líneas 54 a 56 del xhtml_page_structure presentan un pie de página, cuyo texto se escribió dentro de un elemento small, redefinido en (X)HTML5 para marcar textos con restricciones legales y similares.

El elemento nav sirve para indicar un conjunto de enlaces que proveen navegación de la página misma (como una tabla de contenidos), o del sitio web mismo, como se hizo en las líneas 16 a 25 del xhtml_page_structure. Enlaces de publicidad, referencias bibliográficas, resultados de búsquedas, y similares, no deben encerrarse dentro de un elemento nav, dado a que no representan navegación dentro del sitio. El elemento nav puede contener títulos; cero, una o varias listas no ordenadas; párrafos y otros elementos.

El contenido de la página web inicia con cualquier elemento que no sea uno de los anteriores. Sin embargo, es apremiante que el autor estructure el contenido utilizando elementos article y section.

De acuerdo a la especificación oficial, el elemento article se utiliza para especificar una obra auto-contenida en un documento, página, aplicación o sitio; y es, en principio, independientemente "distribuible" o reutilizable [Laws11]. Esto implica que un artículo es un trozo de información que puede ser movido de un lugar a otro dentro de la misma página web (a un margen, por ejemplo) y mantener su sentido. Son ejemplos: una entrada de un blog o foro, una noticia, un comentario de usuario, etc. Los elementos article se pueden anidar. En el xhtml_page_structure se indicó que la página web completa es un artículo (línea 9 a 57) y el contenido propio de la página, es decir, sin considerar el encabezado, menú de navegación y pie de página, es también un artículo (línea 27 a 52).

Los artículos se dividen en secciones temáticas. Por ejemplo, un libro se divide en partes, capítulos y secciones. Cada una de estas partes se identifica con un título. El elemento section permite dividir un artículo en partes o secciones, las cuales no son independientes, sino que tienen un orden. Como es de esperar, si una sección de contenido se mueve de lugar dentro de la misma página web (a un margen, por ejemplo), perderá su sentido. En el xhtml_page_structure cada entrada introductoria hacia una parte del sitio web, fue representada como una sección (líneas 34 a 40, y líneas 42 a 48). Las secciones se pueden anidar entre sí. La especificación (X)HTML5 también permite anidar artículos dentro de secciones; y las secciones también pueden tener encabezados, elementos de navegación y pie de sección.

El elemento aside sirve para indicar contenido que no es considerado parte del contenido principal del documento, por ejemplo, publicidad, noticias, artículos relacionados, etc. Si se quiere, el menú de navegación del sitio (nav) puede escribirse dentro de un elemento aside, para indicar que no es parte del contenido principal.

   
   
   


   

      

         
         
Tres uves dobles
         
Trucos y consejos de desarrollo web
      

      

      

         
Bienvenido(a) a Tres uves dobles, un sitio web con consejos para
         crear sitios web. Todo el código aquí alojado puede utilizarlo libremente en sus propios
         proyectos. Además puede colaborar con nuevos trucos que considere útiles para otros
         desarrolladores. Los consejos en este sitio están separados en los siguientes grandes
         temas:

         

            
            
Trucos sobre XML
            
Trucos para representar información en XML. Escribir y documentar sus propios DTD.
            Hacer transformaciones con XSLT. Formatear documentos con XSL-FO. Ejemplos de API y
            DOM.
         


         

            
            
Trucos sobre (X)HTML
            
Trucos para representar contenido en HTML 4.01, XHTML 1.0 y (X)HTML5. Tipos de
            documento. Elementos de texto. Elementos de estructura. Elementos multimedia
            (imágenes, audio, vídeo).
         


         

      


      
   



]]>

Elementos genéricos de estructura

Cuando el autor quiere especificar la estructura de un trozo de información, pero no existe un elemento en el estándar (X)HTML para tal fin, debe recurrir a uno de los elementos genéricos: div o span. Nota: Los autores deben siempre preferir los elementos semánticos y recurrir a los elementos genéricos sólo en última circunstancia, cuando no existe un elemento para el fin requerido.

Según la recomendación, el elemento div carece completamente de semántica. Simplemente se utiliza para agrupar elementos hijos o texto, al cual se le puede dar algún tratamiento con los atributos comunes, como id, class, lang y title. El atributo id sirve para darle un identificador único en el documento a un elemento. El atributo class sirve para agrupar uno o más elementos con características comunes, es decir, crea una clase de elementos, de forma similar a las clases de programación orientada a objetos.

Por defecto el elemento div crea un bloque, de forma similar a los párrafos, títulos, tablas y otros elementos; que al ser colocados uno tras otros, son separados visualmente por "un cambio de línea". En algunas circunstancias, el autor necesita encerrar sólo unas letras o un trozo pequeño de texto dentro de un párrafo, dentro de un título, etc.; para darle un tratamiento especial. Este es el objetivo del elemento span, el cual carece de semántica al igual que div y es normalmente usado con los atributos class, id o lang.

Títulos de secciones

Los documentos en (X)HTML5 son divididos en partes con elementos como article y section. Por ejemplo, un libro se divide en capítulos y secciones. Tanto la obra como sus partes son identificadas con títulos (en inglés, headings). En el caso de libro, cada uno de sus capítulos, secciones, y el mismo libro, tienen un título que las identifica y distingue de las demás.

(X)HTML define 6 niveles de títulos en orden descendente de importancia h1, h2, ..., h6. El navegador u otro software podría usar los títulos del documento, por ejemplo, para construir una tabla de contenidos automáticamente. Es habitual que la primera actividad que realice un autor sea definir la estructura temática de su documento antes de empezar a escribir el contenido de cada sección.

El formato por defecto de cada título es dependiente del navegador. Es usual que empleen tamaños más grandes y mayor peso para que sean más vistosos. En general esto ocurre con todos los elementos visuales de (X)HTML y es bueno que el navegador escoja su formato por defecto. De esta forma, el autor se concentra en escribir el contenido del documento y el navegador escoge el formato ideal para un medio específico, por ejemplo, una limitada pantalla de un dispositivo móvil. Sin embargo, (X)HTML permite al autor controlar el formato utilizando hojas de estilo como se estudiará en el capítulo siguiente.

El xhtml_section_headings presenta un ejemplo de cómo se pueden usar los títulos de secciones dentro de los elementos article y section para estructurar las partes de una tesis en (X)HTML5. En este ejemplo, el título de nivel 1 (h1) se usa para el título de la tesis, los títulos de nivel 2 (h2) para los títulos de los capítulos, los títulos de nivel 3 (h3) para los títulos de las secciones, y así sucesivamente.

   
   



   

      
Tesis: Representación de letras de canciones en XML
      
Maicol Yaxon <myaxon@garach.edu>

      

         
Resumen
         
Dado que no existe un estándar para representar letras[...]
      


      

         
Objetivos

         

            
Objetivo general
            
El objetivo general de este trabajo es formular una espec[...]
         


         

            
Objetivos específicos
            

               
Analizar estadísticamente los componentes típicos [...]
               
Proponer una representación XML de los componentes[...]
               
Generar tipos de documentos y esquemas de la repre[...]
               
[...]
            
         


      


      

   



]]>

En HTML 4.01 / XHTML 1.0 y versiones previas, no existen los elementos semánticos de estructura como article y section. Los autores recurrían a elementos genéricos de división del texto div o simplemente dejaban a los títulos flotar libremente entre el texto del documento, ya que el navegador asume que cada título está dentro de una sección implícita. Es decir, cuando se abre un título de igual o mayor nivel, el navegador asume que la sección anterior se debe cerrar. El uso de títulos fuera de artículos, secciones o elementos div, limita el poder de los estilos (CSS) o del comportamiento (JavaScript), y no se recomienda para documentos extensos o complejos.

Párrafos

Un párrafo en (X)HTML se escribe con el elemento p como se aprecia en el listado xhtml_paragraphs_example. Aunque en HTML es opcional cerrarlo, es recomendable siempre hacerlo. A través de hojas de estilo se puede controlar el espaciado entre párrafos, la sangría y otros formatos. No escriba párrafos vacíos <p></p> para tratar de dejar espacio en blanco en el documento. La especificación (X)HTML recomienda al navegador ignorar estos elementos. Algunos autores, entonces, fuerzan el espaciado con párrafos que consisten de espacio no separable (<p>&nbsp;</p>), lo cual es el mal uso de la estructura (los párrafos) con fines de apariencia (el estilo).

   
   




   

      
Universidad de Costa Rica

      Escuela de Ciencias de la Computación e Informática

      CI1201 - Programación II
   
   
Programación en C++

   

      
Introducción a la programación
      
La computadora es un artefacto electro-matemático que puede ejecutar[...]

      

         
Hola mundo en C++

         
Desde el libro de Kernighan y Ritchie se ha seguido la tradición del primer
         programa a mostrar sea uno simple: escribir la cadena "Hola mundo" en la
         pantalla o algún otro medio. La forma de decir "Hola mundo en C++" se aprecia
         en el siguiente código:

         


           int main()
           {
            std::cout << "Hola mundo" << std::endl;
            return 0;
           }
         ]]>]]>

      

   




]]>

A veces se quiere insertar un cambio de línea sin iniciar otro párrafo, por ejemplo, en un poema los versos se separan por cambios de línea y las estrofas por párrafos. Un cambio de línea se representa con el elemento vacío <br /> (acrónimo de break return). Algunos autores acostumbran dejar el espacio en blanco antes de la barra inclinada en las etiquetas vacías, ya que navegadores viejos que no implementan XHTML ignorarán la barra inclinada pensando que fue un "dedazo" del autor. Esta práctica ya no es necesaria.

Cuando la longitud de un párrafo excede el ancho de la ventana, el navegador inserta cambios de línea automáticos (word wrap). Cuando se quiere evitar que el navegador por esta característica separe dos palabras, estas deben separarse por un espacio no divisible (not breaking space) obtenible por la referencia de entidad  . Por ejemplo, el código (506) 905-LLAMEYA genera el texto "(506) 905-LLAMEYA". Si usted redimensiona la ventana del navegador, notará que el número de teléfono no será separado del código de país mientras se ajusta el párrafo automáticamente al tamaño de la ventana (probar en una ventana externa). La entidad   está sólo disponible en HTML. En XHTML se puede usar su equivalente  .

El hecho de que (X)HTML ignore los cambios de línea que usted escribe, no es práctico para escribir código fuente u otros tipos de escritos donde el espaciado en blanco es relevante. Para esas situaciones (X)HTML provee el elemento de texto preformateado pre, el cual instruye al navegador mantener los espacios en blanco, usar una fuente mono-espaciada y desactivar el ajuste automático de línea (word wrap). La especificación recomienda a los navegadores reemplazar tabuladores por 8 espacios en blanco, lo cual muchas veces resulta molesto, por eso, es recomendable utilizar espacios en blanco en lugar de tabuladores en las secciones pre o hacer modificaciones con programación del lado del servidor o JavaScript.

El navegador intentará interpretar el marcado (X)HTML que escriba dentro de un elemento pre, por esto debe al menos reemplazar los tres caracteres especiales (<, > y &) con sus referencias de entidad respectivas (<, > y &), o escribir el texto dentro de una sección CDATA como se hizo en las líneas 26 a 34 del xhtml_paragraphs_example, lo cual tendrá efecto sólo si su documento es XHTML.

Un elemento hr (hard return) crea una línea horizontal que sirve para separar párrafos tratando de hacer una separación más visible entre ellos, por ejemplo, para separar los cambios temáticos entre estrofas de un poema. Es un elemento vacío y su apariencia debe ser estrictamente controlada con estilos.

Texto estructurado

(X)HTML define los elementos de frase (phrase elements) para agregar información a fragmentos de texto. Son elementos que afectan no a un párrafo sino sólo a algunas palabras de un párrafo, por ejemplo, denotan énfasis en una palabra, un trozo de código, una abreviatura, etc. La xhtml_phrase_elements lista los elementos de frase definidos en (X)HTML.

Los dos elementos de frase de uso más común son em y strong. Normalmente los navegadores los despliegan en itálicas y negritas respectivamente, pero se puede alterar con hojas de estilo. Los demás elementos de frase están orientados a documentos técnicos. El listado xhtml_phrase_elements_example muestra el uso de algunos de estos elementos.

   Se dice que las entidades describen la estructura física
   y los elementos la estructura lógica de los documentos
   XML.
   La estructura lógica (elementos) y física (entidades) se representa dentro del
   documento 
   XML agregando el marcado, el cual
   se delimita de los datos de carácter encerrando la descripción de los
   elementos dentro de paréntesis angulares ("<" y ">"),
   que se conocen como etiquetas y las referencias a entidades entre
   el signo "&" y el punto y coma (";"). Es decir, el
   texto encerrado dentro de estos cuatro caracteres se conoce como marcado,
   lo restante como datos de carácter. La combinación del marcado
   más los datos de carácter son el texto XML [Gold99].

]]>

Todos los elementos de frase tienen un atributo title, en el cual se puede escribir información adicional que aparece cuando hay cierta interacción con el elemento, normalmente un "tooltip" cuando el puntero del ratón pasa sobre ellos. Esto es útil para expandir el significado de las abreviaturas y acrónimos sin tener que incluir estas definiciones explícitamente en el texto cada vez que se quiere usar la abreviatura. Nótese que esto se hizo en el listado xhtml_phrase_elements_example para la abreviatura "XML" que aparece dos veces (líneas 4 y 6), lo que genera redundancia de código. Teóricamente esta redundancia se puede evitar en XHTML definiendo entidades generales en el parámetro interno del tipo de documento, sin embargo, los navegadores actuales las ignoran, por lo que la mayoría de autores prefieren hacer algún tipo de programación del lado del servidor antes de despachar la página web.

Los elementos sub y sup sirven para declarar subíndices y superíndices respectivamente. Aunque tienen utilidad matemática y en otras notaciones científicas, realmente se mantienen en la recomendación para otros textos. Ejemplos:

El elemento time aparecido en (X)HTML5 permite especificar que un trozo de texto representa una fecha, una hora o ambas; lo que posibilita a los programas su procesamiento, por ejemplo, para agregar un evento a la agenda del usuario, hacer conversiones de huso horario, guiar a los motores de búsqueda a indexar la fecha correcta, etc. El contenido del elemento time permite escribir la fecha en el formato que prefiera el autor, y el atributo datetime en formato "YYYY-MM-DDThh:mm:ss.sss±HH", el cual puede ser entendido por las computadoras. Ejemplos:

Estimado cliente. Su tiquete para el vuelo LA389 del
lunes 30 de abril a las 6:45 p.m.
ha sido reservado con éxito. La hora actual de su destino, San Pedro Sula, es
8:29 p.m. Recuerde registrar este evento en su agenda.


©2012 Tali Van Airlines Group. Documento generado el
23-mar-2012 12:26:54 a.m.
]]>

5 pts. Investigue los elementos del e ins en la especificación HTML 4.01, haga un ejemplo y describa cuál es su utilidad.

5 pts. Investigue los elementos i, b, s, small y mark en la especificación HTML5. ¿Cuál es la diferencia entre em e i? ¿Cuál es la diferencia entre strong y b? ¿Cuál es la diferencia entre del y s? Si un documento (X)HTML sólo debe representar contenido y no presentación ni comportamiento ¿por qué el estándar (X)HTML5 los mantiene?

Listas

(X)HTML permite definir listas de ítemes. Las hay en tres tipos: listas ordenadas, listas no ordenadas, y listas de definiciones. Las tres se pueden anidar. El xhtml_lists_example muestra un ejemplo de los tres tipos de listas y su anidamiento:

   
Puesto: Desarrollador web
   
Requisitos:
   

      
Conocimiento de estándares web
      
Programación en PHP o JSP
      
DBMS libres: PosgreSQL, MySQL o SQLite
      
Afiliado al colegio respectivo
   

   
Procedimiento de reclutación
   

      
Llenar la fórmula RE-TI-C-2348 a mano
      
Presentarla en las oficinas centrales
      
Si es seleccionado:
         

            
Presentarse a realizar el examen RE-TI-E-23
            
Presentarse a realizar el examen RE-LG-E-02
            
Si es seleccionado: presentarse a trabajar
         
      
   

   
Definiciones
   

      
DBMS
Database Management System
      
RE-TI-C-2348
Fórmula de cualidades para TI
      
RE-TI-E-23
Examen de tecnologías web
      
RE-LG-E-02
Examen básico de inglés
   

]]>

Las listas ordenadas se escriben con el elemento ol (ordered list). Sirven para indicar que los ítemes en la lista siguen cierto orden, como en una serie de pasos a ejecutar o cuando se quiere simplemente enumerar ítemes. Cada ítem de la lista se escribe dentro del elemento li (list item). Los navegadores les anteponen números arábigos por defecto, pero con estilos estos se pueden cambiar por números romanos, letras u otras formas. El atributo start del elemento ol en (X)HTML5 permite indicar el número con el cual se inicia el conteo, y si no se incluye se asume que es 1.

Las listas no ordenadas se escriben con el elemento ul (unordered list). Sirven para indicar una lista de ítemes que no siguen un orden inherente. Visualmente se anteceden con una viñeta circular que puede cambiarse con estilos a rectángulos u otras figuras.

Las listas de definiciones se escriben con el elemento dl (definition list). Sirven para escribir glosarios u otros tipos de estructuras similares. A diferencia de los tipos de listas anteriores, los ítemes de las listas de definiciones constan de parejas término-definición. El término se escribe con el elemento dt (definition term) y su definición con el término dd (definition description).

Anclas

El elemento a también permite darle nombre a un punto específico del documento, al cual se le puede hacer referencia posteriormente con un URL. A este punto se le llama ancla (en inglés, anchor, de ahí el nombre del elemento a). La siguiente notación crea un ancla en el documento

<a name="nombre_ancla" />

Para hacer referencia a un ancla, se crea un enlace y se le indica al navegador que su destino es el nombre del ancla pero antecedido por un símbolo de número (#). De esta forma un enlace puede apuntar hacia un documento web, y con el símbolo de número hacia una sección específica de dicho documento, como se ve en los siguientes ejemplos.

Introducción


DTD
]]>

Sin embargo, la practicidad de las anclas ha caído desde que el W3C permitió que cualquier elemento pueda ser identificado de forma única en el documento con el atributo id, al cual se le puede enlazar utilizando el mismo símbolo de número (#), como se ve en el siguiente ejemplo.

Tabla de contenidos

   Introducción

   Arquitectura web





Introducción


Arquitectura web
]]>

Ventana objetivo

Cuando el usuario hace click en un enlace, el navegador reemplaza el documento con el recurso referido. A veces este comportamiento no es el deseado. El atributo target del elemento a permite especificar el nombre de una ventana o frame. Si no existe ninguna con el nombre especificado, el navegador creará una y mostrará en ella todos los recursos destinados a ese nombre. Si se usa "_blank" como valor del atributo target, el recurso será siempre cargado en una ventana o pestaña nueva del navegador.

<a href="destino.url" target="ventana_objetivo">contenido del enlace</a>

El atributo target está disponible en todas las variantes de (X)HTML, excepto XHTML 1.x strict, debido a que especifica comportamiento, lo cual es responsabilidad de JavaScript.

Acceso con el teclado

Los navegadores permiten acceder a los enlaces con el teclado, lo cual es importante para aquellos en modo texto o para personas con necesidades especiales. Esto además habilita otras opciones que el desarrollador web debe tener presente.

Se puede asignar atajos de teclado (keyboard shortcuts) a los enlaces más frecuentes de su sitio web con el atributo accesskey, el cual recibe sólo un carácter, por ejemplo, accesskey="K". El navegador habilitará alguna combinación de teclas, como Ctrl+K ó Alt+K, que permitirá activar el enlace o al menos seleccionarlo. Es normal que el autor dé una indicación en el texto de que el enlace tiene un atajo de teclado, ejemplo:

<a href="#xhtml_keyboard_shortcuts" accesskey="k">Acceso con el teclado (Ctrl+K)</a>

Desdichadamente el comportamiento de los atajos del teclado son dependientes del navegador, y en algunos pueden no funcionar o reemplazar otras operaciones preestablecidas del navegador.

La mayoría de navegadores permiten recorrer los enlaces, controles de formularios y otros elementos con la tecla tabulador. El autor puede alterar este orden con el atributo tabindex="n", donde n es la posición en el orden que se quiere para ese enlace o elemento. Si se le da un número negativo se sacará de la secuencia. Si dos elementos tienen el mismo valor para este atributo, el navegador seguirá el orden de aparición en el documento.

Tamaños de imagen

Cuando el navegador está cargando un documento web y encuentra una etiqueta <img src="imagen.url" alt="algún texto" /> con esos atributos, solicita al servidor web que le envíe una copia de la imagen. Mientras ésta llega, el navegador sigue cargando (rendering) el resto del documento (X)HTML. Es muy probable que termine de mostrar el documento antes de que la imagen llegue y que el visitante empiece a leer el documento. Cuando finalmente la imagen es recibida, el navegador la insertará en el lugar donde encontró el elemento img correspondiente, desplazando el texto que se encuentre debajo. Esto es molesto para el lector, en especial si el documento tiene un considerable número de imágenes o son de gran tamaño o ambas.

El problema anterior se soluciona especificando las dimensiones de la imagen en el documento (X)HTML, de tal forma que el navegador pueda reservar espacio para la imagen antes de que esta sea recibida. Simplemente especifique las dimensiones en pixeles con los atributos width y hight.

<img src="imagen.url" alt="texto alternativo" width="320" height="280" />

Si el valor indicado en los atributos ancho o alto de img no coincide con el tamaño real de la imagen, el navegador la escalará. También se puede especificar en ellos un porcentaje de la ventana, algo como width="75%". Normalmente las aplicaciones de diseño web se encargan de asignar los valores reales de la imagen en forma automática. El ancho y alto de una o varias imágenes y otros detalles se pueden controlar con estilos, lo cual es muy útil para un conjunto grande de imágenes que comparten las mismas dimensiones.

Formatos de imágenes

Aunque existen muchos formatos de imágenes, sólo unos pocos se pueden utilizar en la web. La tab_formatos_imagen muestra una comparación de los formatos más soportados entre los navegadores actuales. Es tentador publicar imágenes de alta calidad, pero su tamaño será considerable y tardarán en cargarse en proporción inversa al ancho de banda del visitante. Si una o muchas imágenes hacen lento el cargado de una página web, es una invitación al lector para abandonarla. El autor debe hacer un balance entre la calidad de la imagen y su tamaño en bytes. Por esto es importante que conozca la diferencia entre los formatos disponibles y cómo ajustar este balance.

Cuando un autor quiere representar alguna pieza de información en forma gráfica, debe decidir si utilizar una fotografía, una ilustración o una animación. Esta decisión ayuda en gran medida a delimitar el formato a escoger.

Una fotografía tiene millones de colores o grises. Se obtienen por cámaras digitales o escáneres. Ambos dispositivos no proveen información de transparencia. El formato más recomendable para fotografías es el JPEG, creado en 1992 por el Joint Photographic Experts Group. Es un algoritmo de pérdida de calidad que trata de descartar detalles que el ojo humano no percibe con el fin de ahorrar espacio. El formato PNG (Portable Network Graphics) también puede almacenar fotografías, pero sin pérdida de calidad, lo cual es poco recomendable para el web ya que su tamaño compromete la velocidad de carga del documento.

Una ilustración es una imagen, normalmente en dos dimensiones, que contiene texto o lo complementa. Suelen contener diagramas o dibujos hechos en un programa de cómputo, en contraposición a los obtenidos por una cámara o escáner. La cantidad de colores de una ilustración suele ser reducida. El formato PNG o SVG (Scalar Vector Graphics) son aptos para ilustraciones, la diferencia entre ambos es el tipo de imagen: escalar o vectorial respectivamente.

Una imagen escalar es un mapa de bits, es decir, una matriz de tamaño definido donde cada celda o pixel almacena un color codificado en forma numérica. "Redimensionar" a menor tamaño una imagen escalar provoca que ésta se deforme en especial si no se mantiene su proporción. Si se agranda una imagen escalar provocará que los pixeles se propaguen a las celdas adyacentes, generando zonas de colores poco agradables a la vista humana.

Una imagen vectorial está compuesta por figuras geométricas como puntos, líneas, curvas o polígonos. Sus atributos como posición y tamaño son los que se almacenan en el archivo. "Redimensionar" una imagen vectorial a cualquier tamaño significa reajustar las posiciones de las figuras geométricas y volverlas a pintar, lo que provoca que la imagen siempre se vea agradable a la vista humana.

La explicación anterior facilita la decisión hacia SVG como formato de elección para ilustraciones, sin embargo hay que tener en cuenta que, aunque SVG es un estándar abrigado por el W3C, su implementación en los navegadores actuales es parcial y quizá ausente en aquellos de dispositivos móviles, debido a que su despliegue requiere de mayor poder de cómputo que los otros formatos. Algunos sitios web como Wikipedia usan SVG, pero si el navegador no soporta este formato, el servidor web envía a cambio un PNG autogenerado.

Si el autor encuentra que una animación es el mejor medio de comunicar algo, puede usar una imagen GIF (Graphics Interchange Format), que permite animaciones escalares muy sencillas y limitadas a 256 colores. Si se requiere animaciones vectoriales, el autor podría programar un elemento canvas con JavaScript, o tecnologías propietarias como Adobe Flash. Si se requiere animaciones de más de 256 colores, se trata de un video y estos pueden incrustarse con objetos como se estudiará en la sección Objetos multimedia.

Indiferentemente de si se utilizan imágenes escalares o vectoriales, el autor debe conseguir reducir el tamaño tanto como se pueda sin que la imagen se vea desagradable al lector. El autor necesita que el editor de imágenes lo apoye en esta labor. Normalmente estos programas proveen una opción que permite variar el tamaño en bytes de la imagen u otros parámetros y ver el efecto en tiempo real en la visualización de la misma. Es importante que el autor guarde además la imagen original en un formato con mayor calidad o sin pérdida alguna.

Existe considerable cantidad de editores de imágenes disponibles, desde los renombrados paquetes de Adobe: Photoshop para imágenes escalares e Illustrator para imágenes vectoriales. Como opciones libres a estos programas se puede citar Gimp e Inkscape respectivamente.

5 pts. Suponga que está escribiendo un manual de usuario en (X)HTML ¿Qué formato de imagen utilizaría para una captura de pantalla (screenshot) del programa en cuestión? Justifique la respuesta.

Figuras

Cuando se inserta una imagen, vídeo, un listado de código u otro objeto en un documento, es muy común agregar algún texto que dé una explicación corta, los derechos de copia u otros detalles del objeto. Este texto, a veces conocido como leyenda, rótulo o título del objeto (caption), forma junto con el objeto una unidad; es decir, deben estar juntos en el documento. Por ejemplo, si la imagen se mueve de lugar en el documento, el rótulo debe viajar con ella, de lo contario pierde su sentido. (X)HTML5 provee el elemento figure para unir una imagen o cualquier objeto con su leyenda, la cual se indica con el elemento figcaption como se muestra en el xhtml_figure_example.

   
   

]]>

En caso de proveerse una leyenda con el elemento figcaption, se convierte en opcional el proveer un texto alternativo con el atributo alt de img, como ocurrió en la línea 2 del xhtml_figure_example. Es importante reiterar que el elemento figure no está limitado sólo a imágenes, si no a cualquier objeto o trozo de texto que necesite una leyenda.

Icono de favoritos

Se ha convertido en una práctica común proveer un pequeño icono que ayuda al visitante a identificar la página web. A este icono se le suele llamar icono de favoritos ó simplemente favicon (contracción de favorites icon), porque el navegador lo almacena junto a los favoritos, y lo despliega en la barra de direcciones o en las pestañas. Usualmente el mismo icono se utiliza en todas las páginas de un sitio web, lo que le da identidad al sitio entero y por ende también se le llama icono de sitio web (web site icon).

El favicon es un archivo PNG, o uno con extensión .ico que puede contener imágenes de varios tamaños. Normalmente son de 16x16 pixeles y utilizan fondo transparente. El documento web debe indicar el favicon en su encabezado (head) utilizando el elemento vacío link, el tipo de imagen y su URL, como se muestra en xhtml_favicon_inclusion. A modo de conveniencia véase Wikipedia para otros tipos de imágenes, enlaces y restricciones a la hora de declarar favicons.

   ...
   

]]>