Lo básico de un documento web
De mi intención para intentar ayudar a quien se haya podido meter en alguno de los líos donde también me he metido yo nace esta entrada. Por ejemplo y dirigido a XHTML, lo que humildemente creo que[...]
- 20
- mar
- 2007
Publicado por J.A.Cobo.
Guardado en Desarrollo web.
hace 3 años y 4 meses
No hay comentarios
De mi intención para intentar ayudar a quien se haya podido meter en alguno de los líos donde también me he metido yo nace esta entrada.
Por ejemplo y dirigido a XHTML, lo que humildemente creo que debe tener cualquier estructura de sitio o página web, a grosso modo, como concepto y en espera de escribir algo más extenso:
Doctype
Lo primero un (DOCTYPE) Tipo de Documento donde se declara una Definición del tipo de Documento (DTD) acorde con su contenido y esctructura.
<!DOCTYPE...Las declaraciones DOCTYPE para XHTML pueden ser: “Transitional” (más flexible para la transición a XML donde se permite marcado de HTML), “Strict” (estricto con un compromiso duro para la migración a XML) o “Frameset” para un documento con marcos (“frames”).
¿Para qué?:
Para que el dispositivo donde se visualize el documento no tenga que hacer birguerías para saber QUÉ TIPO de documento es.
Esto dotará al sitio de mayor rapidez de interpretación por parte del dispositivo (un navegador web, un lector de pantalla…) ya que no tendrá que “adivinar” el tipo de documento e interpretar el código digamos “al vuelo” sino que sabrá (o espera saber) como va a estar estructurado, las etiquetas permitidas, etc…
Si se añade el lenguaje en que estará escrito el documento y la dirección pues mejor, apenas son unos cuantos más atributos en la etiqueta padre HTML del espacio de nombres (es el conjunto de elementos y atributos de cada DOCTYPE):
1 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" dir="ltr"> |
Español o Castellano de izquierda a derecha.
A raíz de la decisión del W3C de migrar definitivamente a XML como lenguaje de marcado universal se decidió incluir en todos los documentos un prólogo XML que especifica la versión de XML usada y la codificación de caracteres (más adelante):
1 | <?xml version="1.0" encoding="Codificacion de caracteres" ?> |
Este prólogo suele dar problemas en navegadores antiguos e incluso en IE6 para Windows, así que puede ser recomendable especificar la codificación de caracteres en una etiqueta meta más adelante:
Metadatos
Opcionalmente un Título y algunos metadatos más o menos relevantes:
Un título, unas palabras clave al que asociarlo, una descripción… un autor, una declaración de propiedad intelectual si procede… en definitiva las etiquetas meta proporcionarán información más o menos relevante según el contenido del sitio, es algo bastante importante en relación a SEO o “posicionamiento web”.
Más relevante es una definición de la codificación de los caracteres del sitio (se recomienda Unicode: UTF-8, más internacional) y de nuevo el lenguaje usado:
(XHTML, UTF-8, Español España)
1 2 | <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <meta http-equiv="Content-Language" content="es" /> |
o
1 | <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
Estilos Externos o Importados
Un estilo base
¿Para qué?:
Para exploradores antiguos que no sepan interpretar las nuevas reglas CSS, obteniendo a la vez un estilo separado en función de la importancia en el diseño como por ejemplo estilos para selectores principales del sitio: HTML, BODY, H1, H2…, A, etc.
Preferiblemente enlazado:
1 | <link href="/css/basic.css" rel="stylesheet" title="Estilo Base" type="text/css" media="screen" /> |
Un estilo de impresión
¿Para qué?:
Para que, por defecto, la mayoría de los nuevos exploradores, u otros dispositivos, reconozcan un estilo para impresión a través del atributo
media="print"
:
1 | <link rel="stylesheet" href="/css/print.css" type="text/css" title="Estilo de Impresion" media="print" /> |
Un estilo sofisticado
¿Para qué?:
Para exploradores modernos, para elementos y clases propios, preferiblemente importado:
<style type="text/css"> <!-- @import url("/css/estilo_sofisticado.css"); --> </style>
También ayuda a separar el estilo de elementos principales de la página y reglas propias.
Opcionalmente y según el nivel de experiencia se puede usar otra hoja de estilos (css) donde agrupar solo las clases.
Menú de navegación Accesible
Un menú de navegación Accesible, oculto o no para dispotivos visuales es opcional, pero un menú inicial de navegación del sitio con sus respectivas Teclas de Acceso es muy muy recomendable:
1 2 3 4 5 | <ul id="navlist"> <li><a href="home.html" title="Inicio" accesskey="I">Inicio</a></li> <li><a href="accesibilidad.html" title="Accesibilidad" accesskey="K">Accesibilidad</a></li> <!-- El más importante --> <li><a href="noticias.html" title="Noticias" accesskey="N">Noticias</a></li> </ul> |
Proporcionando un documento donde se indiquen las funciones accesibles del documento: teclas de acceso (Access-Hot Keys), navegación mediante Tabulador…
En este mismo punto se puede (y se debe en mi opinión) añadir una opción para Saltar directamente al contenido del documento, es decir, evitar los menús de navegación u otro contenido repetitivo en el documento que quizás no interese.
1 | <a href="#content" title="Ir al contenido del documento">Contenido</a> |
¿Para qué?:
Imaginemos que se visualiza desde un navegador de un teléfono móvil, la pantalla es pequeña además de que es probable que no pueda interpretar nuestro CSS sofisticado y use el estilo base.
Puede que nuestro menú de navegación quede siempre al principio de la página y el navegador móvil deba recorrerlo una y otra vez hasta llegar al contenido.
Con este menú de salto y accesibilidad, se puede acceder con un solo click a la sección deseada o al contenido del documento sin tener que recorrer una y otra vez todo el documento.
Evidentemente, dichos enlaces deberían estar al comienzo del documento e incluso al final de este para intentar un acceso desde cualquier parte del documento a los contenidos principales.
Para un navegador web quizás es recomendable usar una regla CSS para fijar un elemento en la misma posición de pantalla, así, aunque recorramos el documento, siempre tendremos “a mano” el salto al contenido o a donde estimemos oportuno.
Un buen lugar puede ser al final de la pantalla (abajo).
Estructura
El resto del documento ya es otra cuestión y depende del gusto e imaginación del diseñador, por mi parte, la estructura base que suelo usar es muy conocida ya: un contenedor, una cabecera, un menu flotado, un contenido y un pie.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <body> <!-- Container --> <div id="container"> <!-- Cabecera --> <div id="head"> <h1>Titulo</h1> <h2>Descripción</h2> </div> <!-- End Cabecera --> <!-- Menu --> <div id="menu"></div> <!-- End Menu --> <!-- Contenido --> <div id="content"></div> <!-- End Contenido --> <!-- Pie --> <div id="footer"></div> <!-- End Pie --> </div> <!-- End Container --> </body> |
NOTAS:
Por último recordar varios puntos algo más complejos:
Accesibilidad
Es recomendable que las imágenes con contenido importante, es decir no decorativas por ejemplo, contengan el atributo alt.
¿Para qué?
Para que el documento sea igual de funcional sin imágenes.
Así mismo, si una imagen es demasiado importante, se le puede añadir un atributo longdesc enlazando a una descripción larga de la imagen.
Usabilidad
El atributo alt también es importante, mucho, en enlaces basados en imágenes, si usas alt, tus enlaces seguirán funcionando en modo texto en un navegador sin imágenes o con ellas deshabilitadas.
Semántica
Un título es un título, no necesitas hacer un
<div class="big">Título</div>
, ni un
<font size="24px">Título</font>
ni nada tan horroroso para poner un título de primer nivel en un documento web.
Usa:
<h1>Título</h1>
Y al contrario, si quieres una estilo de tamaño grande en mitad de un documento no necesitas meter un título de primer nivel (h1).
Puedes especificar una clase como la anterior (big) y usar por ejempo
1 2 3 4 | <strong class="big">Palabra GRANDE</strong> .big { font-size: 24px; } |
Strong se comportará como especifiques en la regla CSS, es decir, si de verdad quieres enfásis puedes añadir:
font-weight: bold;
aunque aquí quizás “pequemos” un poco en la estructura ya que strong actua más como etiqueta delimitadora que como estilo… aunque de eso se trata en un futuro, pero en cualquier caso, si imaginas que no se usa CSS esa palabra GRANDE tendrá énfasis que es lo que queríamos.
Y con CSS tienes tu texto de gran tamaño, el enfásis no es importante en este caso sino lo especificas en la regla CSS.
—
Bien… eso creo que es todo por ahora, personalmente intento estructurar siempre mis documentos web así, son 5 reglas que siempre intento cumplir… pero bueno, para gustos los colores y seguro que hay mucha gente que tiene muchas ideas mejores.
Espero que le pueda servir a alguien ;)
Acerca del autor
- No hay comentarios.
- TrackBack URL
Aún no hay comentarios.
Dejar un comentario.no seas tímido
Juan Antonio Cobo
JuanAntonioCobo
- «Webdev freelance» Mejor aquí: http://blog.culturadigital.org/acerca-de - 20
- @lusagad Yo solo lo he visto d rafilón, oyes las voces y dices: "q coño es eso?" Luego ya.. te partes la caja lo serios q se ponen y todo xD (vía web).
- hace 1 día y 18 horas - Casualmente a lo de TeleCinco, en Italia hay una buena liada con el tema gitano. Ainsss... kasco de tele dios. (vía web).
- hace 2 días y 19 horas - mm... dios, qué mentira más gorda los debates esos de Tele5, no? Qué casualidad una gitana pija en el público, vms, lo + normal del mundo xD (vía web).
- hace 2 días y 19 horas - @Frambueso Lo acabo de ver en las noticias... que grandes las nuevas tecnologías: nosotros en vivo vía Twitter. Creo q todo bien, no? (vía web).
- hace 1 semana y 2 días - Weno,va siendo hora.. joder!.. pro xq mcae tan mal Barceló!?, tan repipi, pdante, sos gestos, ojjj, ajjjjj.. ggg Nas noxs #puntopelota #zzzz (vía TweetDeck).
- hace 1 semana y 3 días - @Rino6966 Pulido quiere lo que muchos, entre los qm incluyo, kizá pecando dantimadridsta: un Madrid humilde como la 8ª Champions. (vía TweetDeck).
- hace 1 semana y 3 días - @ateneanike Roncero es..., bueno, lo que es, es bastante inbécil y #puntopelota, Diosss... lo q pasa q hasta da pena y todo gg (vía TweetDeck).
- hace 1 semana y 3 días - ...ganas de liga... sinceramente, después de este verano... solo quiero... que llegue ya la Eurocopa! #ESP #puntopelota (vía TweetDeck).
- hace 1 semana y 3 días - Ntre Xixarito ( @fcevallos ) y los #parabólicos ( @francescobu @plazacasals ) se están comiendo la sección de @pacorabadan -.- #puntopelota (vía TweetDeck).
- hace 1 semana y 3 días - @ateneanike No sé... me da que es así ^^! Según él, los de las críticas somos lo peor de Twitter; imagino q le gustaría solo recibir elogios (vía TweetDeck).
- hace 1 semana y 3 días - xD Ostais jugando 1 unfollow fijo RT @sergimaister: @ateneanike Lo dla cara d Borbón d @Pedrerol es d lo mejor ke leído jamás en Twitter xDD (vía TweetDeck).
- hace 1 semana y 3 días - Para 1 año... deberían djar a Raúl retirarse nel Madrid, no sé si el problema son las condiciones o el orgullo, lícito, de Raúl #puntopelota (vía TweetDeck).
- hace 1 semana y 3 días - @Pelotero100 Y a Chuck Norris ggg (vía TweetDeck).
- hace 1 semana y 3 días - Hoy no hay 2online, que estamos ya de intermission, con las ganas que tenía :( #BattlegroundEurope #2online (vía web).
- hace 1 semana y 3 días - @CarmeBarcelo tú crees q burlarte d di Maria es tnr algo didea d fútbol???, t lo dice @sirolopez Petón y medio Twitter, o ntero #puntopelota (vía web).
- hace 1 semana y 3 días - Este perro viejo de PC (A8V-X + AMD64) ha muerto... estaremos por aquí mientras aguante el portátil ;) (vía web).
- hace 1 semana y 6 días - @lalibreta +1000000 #246 zellfhirot: "Marca, cada día decís y haceis mayores tonterías." :) (vía web).
- hace 2 semanas - [...]pero no es lo q nos enseña nuestra gramática dsd luego ;) ... bueno, más bien semántica :S (vía web).
- hace 2 semanas - @elias_israel Para el lenguaje técnico, imagino q viene cojonudo... pero no es lo q nos enseña nuestra gramática dsd luego ;) (vía web).
- hace 2 semanas - @elias_israel Hay artículos en la Wikipedia inglesa con más siglas que oraciones xD (vía web).
- hace 2 semanas
Acerca de esta entrada
Estás leyendo «Lo básico de un documento web»,
una entrada publicada el martes 20 de marzo de 2007.
Etiquetas 
Desarrollo web, diseño, reglas
Revisada 
hace 1 año y 5 meses
Imprimir
XHTML
1.1 Válido
