Diseño de páginas web
semántica
Semántica de diseño es una de las muchas palabras de moda flotando sin preocupaciones en torno a Internet en el momento. Es cierto que no es el más grande (que debe ser el Ajax en el momento), pero es bastante una buena palabra. However, not many people know what is actually is. Sin embargo, muchas personas no saben lo que realmente es.
El diseño de la web semántica que estoy hablando no es parte de Tim Berners-de la web semántica Lee de nuevo, pero está relacionado. La web semántica es una iniciativa para escribir nuevas páginas en un lenguaje basado en RDF, que permite a los ordenadores para extraer el significado de las páginas web. El diseño de la web semántica que estoy hablando es el uso adecuado de las etiquetas XHTML, para estructurar una página de cordura. Sin embargo, esto también permite a la computadora "lee" las páginas web, hasta cierto punto.
Todas las etiquetas HTML originales fueron creados y diseñados para estructurar la información, no para darle formato. Sin embargo, desde la explosión de la Internet, esa frontera era borrosa por masas de popó ineducated y HTML se convirtió en una sopa de guisantes de un lenguaje de formato. El W3C decidió que no era lo suficientemente bueno, así que crearon XHTML. Fue diseñado para ser similar al HTML, pero con todas las etiquetas de formato extraños eliminado. El marcado se semántica, y XML-compatible.
Sin embargo, incluso cuando se usa XHTML, la gente de algún modo encontrar la forma de abuso de la semántica, y las etiquetas de uso inadecuado. Este artículo está tratando de acabar con eso. Echemos un vistazo a algunas de marcado de la página de la muestra que ha sido escrito por un no-semántico-autor consciente. Al mismo tiempo, veremos la misma página con una semántica bien. Ambas páginas validar perfectamente, sin embargo, el mal ejemplo es mucho peor que la buena. Why? ¿Por qué?
Ambos ejemplos comenzar con el mismo marcado válido - el DOCTYPE y la apertura <html> y <head>:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
Después de esto, empieza a ir mal.
<title> element: El mal ejemplo pone datos incorrectos en el elemento <title>: <title> DrBob's amazing page </title>
Esto no es aceptable, ya que - aunque no estrictamente semánticamente incorrecta que se ha hecho - las dos caras smilie ( " “) No debe estar en el título, ya que no tienen nada que ver con el título de la página, y son confusos - la semántica no se limita a cubrir el uso de etiquetas, que también cubre el contenido de dichas etiquetas.
El código debe ser escrito como sigue, con las caritas eliminado:
<title>DrBob's amazing page</title>
Después de eso, algunos pantanos código estándar de la siguiente manera. Sin embargo, el mal ejemplo que se ha logrado aún lío hasta que - incluso el más simple de código puede ser semánticamente incorrecta:
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="keywords" content="bad semantics,web design,web development,XHTML,semantic web" />
<meta name="author" content="Philip Withnall" />
<meta name="description" content="A page to teach about how not to do semantics in web design. Woo! I'm such a cool web designer!
Pick me! Woo! (@Google: This mad text is all in the name of education.)" />
Usted notará el contenido de locos en la etiqueta meta descripción: es semánticamente incorrecta. En una etiqueta de descripción del meta, usted sólo debe incluir los datos pertinentes a la descripción de la página, no (como en este caso) una descripción muy modesta de sí mismo.
Se ha limpiado, el código es el siguiente:
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="keywords" content="good semantics,web design,web development,XHTML,semantic web" />
<meta name="author" content="Philip Withnall" />
<meta name="description" content="A page to teach about how to do semantics in web design." />
El siguiente bloque de código en el mal ejemplo es muy interesante, y nos da una idea de por qué el diseño de la web semántica es mejor:
<style type="text/css">
.title
{
font-size: x-large;
font-weight: bold;
}
H1, H2, H3, H4, H5, H5, la dirección
{ (
/*Bah! / * Tuve que hacer estas línea pantalla para que sean pantalla de la derecha! W3C estúpido no puede conseguir lo correcto! * /
display: inline; display: inline;
} )
</style> </ style>
Podemos ver que la semántica mal del autor le han costado las apariencias, como el uso incorrecto de etiquetas de título (ver más abajo) significa que su página no se muestran correctamente sin CSS "mejoras". Cualquier leve-codificador CSS competentes que sepan que si usted está haciendo etiquetas de título de visualización en línea, hay algo seriamente mal.
Sólo por comparación, lo que sigue es el CSS para el buen ejemplo. La mayor parte de ella se puede eliminar o poner en los atributos de estilo en línea, sin embargo, ya que es sólo para hacer el buen ejemplo al igual que hacen el mal ejemplo:
<style type="text/css">
.italic
{
font-style: italic;
}
.bold . negrita
{ (
font-weight: bold; font-weight: bold;
} )
.large . grande
{ (
font-size: large; font-size: grandes;
} )
.strikethrough . tachado
{ (
text-decoration: line-through; text-decoration: line-through;
} )
.float_left . float_left
{ (
float: left; float: left;
} )
.float_right . float_right
{ (
float: right; float: right;
} )
.indent . guión
{ (
padding-left: 20px; padding-left: 20px;
} )
</style> </ style>
El siguiente bloque de código es completamente correcto, y analiza muy bien, pero el autor del mal ejemplo ha hecho una de las peores (y unfortunely, el más común) los errores relacionados con la semántica: se usa una etiqueta de encabezado de forma incorrecta:
</head>
<body>
<div class="title">DrBob's amazing page <h1>lolzorz</h1></div>
Etiquetas de título se supone que se utilizará para la estructura lógica del documento, con las partidas lógica de un tramo corto en una estructura de árbol. A partir de la etiqueta de cabecera principal es de la mayor importancia, pero todo el título debe estar en la etiqueta, no sólo de algunas pequeñas (e irrelevantes) parte de ella. Se ha limpiado, el código es el siguiente:
</head>
<body>
<h1>DrBob's amazing page</h1>
La siguiente sección del texto no se ve tan mal, pero hay algunos errores, y algunos más ofensivo con las cabeceras:
<div>I live at <address>Buckingham Palace</address> in <strong>England</strong>. Aren't I
<h4>lucky</h4>! Whee!</div>
<p>My name is DrBob, and <em>I</em> come from <em>behind you</em>.</p>
El primer delito es la encapsulación de texto en un <div>. Este elemento es, lógicamente, de la agrupación secciones de un documento de estilo o con otros fines. No está diseñado para contener texto, por eso, usted debe utilizar un elemento de párrafo. El siguiente error es el uso del elemento de la dirección. Aunque su uso es discutible, los estados de la especificación oficial del W3C HTML que el elemento de dirección debería ser utilizado para encapsular no información de contacto de una página web, o una parte importante de una página web, dirección postal de alguien, a menos que es su medio preferido de contacto con lo que respecta a la página web. Otros errores en esta sección son sobre el uso de énfasis y los elementos fuertes. Estos elementos no son para ser utilizado con la mentalidad de que "se va a hacer que el texto en cursiva", o "eso los hará el texto en negrita"! Deben ser utilizados para señalar el énfasis en una sección de texto que se destaca si el texto fue leído en voz alta. Aunque la gente solía hacer el texto en cursiva o negrita, cuando ello sea aplicable, probablemente no es aplicable en estas circunstancias, por lo que el efecto se logra utilizando CSS. El error final de esta sección es el uso incorrecto de un nivel 4 de la partida.
No se puede insistir suficientemente en que los encabezados se deben utilizar para la sección de lógica en el documento de titulación, y ciertamente no para determinar el tamaño de texto y las opciones de fuente!
Corregido, la sección es mucho más fácil de leer:
<p>I live at <span class="italic">Buckingham Palace</span> in <span class="bold">England</span>.
Aren't I <span class="bold">lucky</span>! Whee!</p>
<p>My name is DrBob, and <span class="italic">I</span> come from <span class="italic">behind
you</span>.</p>
La siguiente sección es incorrecta desde el principio, ya que el autor ha optado por guión, todo uso de un elemento blockquote, en lugar de estilos:
<blockquote>
<!-- Bah! I had to change it from a <p> to a <div> to get it to validate! Oh well. They're the same to me, anyway, because I know
best. -->
<div>Look at my wonderful indented text! Aren't I so <h2>good</h2> at <abbr title="HyperText Markup
Language">HTML</abbr>!</div>
<p>I know this page is <a href="http://validator.w3.org/check?uri=referer">valid <abbr>XHTML</abbr></a> and uses
<a href="http://jigsaw.w3.org/css-validator/?check=referer">valid <acronym>CSS</acronym></a>. Aren't I
<strong>so good</strong>!</p>
</blockquote>
El uso del elemento blockquote es malo, como el elemento blockquote debe utilizarse para referirse a las citas largas, no a las cosas guión.
En esta sección, hay también más ejemplos de uso indebido de cabecera, y <div> uso indebido de etiquetas. También hay algo más, que no se ha visto antes, y eso es el mal uso y la confusión sobre la abreviatura y elementos de acrónimo. La etiqueta sólo debe abreviatura (naturalmente) se utilizarán las abreviaturas, por lo que su uso aquí para explicar lo que "HTML" significa es completamente incorrecta. Los otros dos usos de la sigla y los elementos de abreviatura también incorrecto, ya que siempre debe especificar un título atributo utilizando cualquier elemento (y el autor ha utilizado la etiqueta HTML mal que de nuevo).
He aquí una versión limpia de esta sección:
Look at my wonderful indented text! Aren't I so <span class="bold large">good</span> at <acronym title="HyperText Markup Language">HTML</acronym>!</p> <div class="indent">
<p>I know this page is <a href="http://validator.w3.org/check?uri=referer">valid <acronym title="eXtensible HyperText Markup
Language">XHTML</acronym></a> and uses <a href="http://jigsaw.w3.org/css-validator/?check=referer">valid <acronym title="Cascading
StyleSheets">CSS</acronym></a>. Aren't I <span class="bold">so good</span>!</p>
</div>
Por ahora, usted se está enfermando de este autor mal uso de las cabeceras, por lo que pasaremos por alto que el error en la siguiente sección:
<h3>Did you know I'm so good at HTML, I can make <del>text strikethrough</del>? Isn't that cool?!</h3>
Aparte de la mala utilización de cabecera, sólo hay un problema con esta sección, y ese es el uso incorrecto de la etiqueta <Supr>. Se supone que se utiliza para indicar que una página web ha cambiado, y que el contenido encapsulado ha sido eliminado en la versión más reciente, pero este autor es incorrecto usarlo para añadir un efecto de tachado a su texto. (El autor también ha olvidado añadir una <acronym> etiqueta, pero esto no es tan importante.) Esto es fácil de limpiar:
<p class="large">Did you know I'm so good at <acronym title="HyperText Markup Language">HTML</acronym>, I can make <span class="strikethrough">text strikethrough</span>? Isn't that cool?!</p>
La última sección de nuestra página web de mal ejemplo es también el más grande, pero sólo contiene algunos errores repetido muchas veces:
<table border="1" width="100%">
<tr>
<td>
<cite>Here's a recent conversation I had with a friend of mine:</cite>
</td>
<td>
<d>
<dt>Mark said:</dt>
<dd>So, have you looked into this new <q>semantic markup</q> thing?</dd>
<dt>DrBob said:</dt>
<dd>Hell no! I'm the best coder in the world already!</dd>
<dt>Mark said:</dt>
<dd>Are you sure? It looks like it has benefits.</dd>
<dt>DrBob said:</dt>
<dd>Go away. I hate you.</dd>
</dl>
</td>
</tr>
</table>
</body>
</html>
Como puede ver, la sección contiene un registro de la conversación de una interacción entre el autor y uno de sus (ya) no amigos. El primer error es un uso cegadoramente obviamente incorrecto de una tabla. Mucha gente ha dicho muchas veces, y no hace daño a decir de nuevo: las tablas deben ser utilizados para mostrar datos tabulares solamente, y no utilizarse para diseñar una página web! El siguiente error es el uso de una etiqueta de citación en el lugar equivocado. Tags cita debe ser utilizado para mostrar una cita que viene, y no a todos en la forma indicada en el ejemplo. Los errores restantes en esta sección son el mal uso de los elementos de definición. La especificación HTML definido varios elementos para su uso en la definición de términos. Aquí, se han utilizado para dar formato a las respuestas en un registro de conversaciones, y eso es completamente erróneo - si un equipo se para leer esta página, habría constancia de que "Marcos dijo:" significa "Así que, ¿has buscado en esta nueva semántica Lo margen de beneficio? ", entre otras cosas.
Un error final de esta sección es el uso incorrecto de una etiqueta de cotización. Como nadie dijo "marcado semántico" (por lo que cualquier lector de la página puede decir, de todos modos), no debe ser dentro de una etiqueta . En su lugar, debe ser sólo la cita con normalidad, como en la versión sin limpiar:
<div class="float_left">
<p>Here's a recent conversation I had with a friend of mine:</p>
</div>
<div class="float_right">
<ul>
<li><cite>Mark</cite> said:
<blockquote><p>So, have you looked into this new "semantic markup" thing?</p>>/blockquote></li>
<li><cite>DrBob</cite> said:
<blockquote><p>Hell no! I'm the best coder in the world already!</p></blockquote></li>
<li><cite>Mark</cite> said:
<blockquote><p>Are you sure? It looks like it has benefits.</p></blockquote></li>
<li><cite>DrBob</cite> said:
<blockquote><p>Go away. I hate you.</p></blockquote></li>
</u>
<</div>
</body>
</htm>
Así concluye nuestro valsecito a través de una página semánticamente incorrecta. Es de ninguna manera ha cubierto todos los errores imaginables en relación con la legibilidad semántico, sino que ha cubierto los principales. Lo principal que hay que pensar cuando la codificación de una página web, es lo que el significado real de los elementos que está utilizando es. La mayoría de las veces esto es muy obvio y auto-explicativo, pero si no estás seguro en cualquier momento, siempre es mejor consultar con las especificaciones del W3C.
El futuro es asegurarse de incluir más equipos de arrastre a través de Internet en busca de información. Ya sea el Googlebot omnipresente, o proyecto web semántica algún estudiante universitario, todos los equipos que necesitan ayuda en la comprensión de las páginas web. ¿Por qué hacer que sea más difícil para ellos, cuando es tan simple para hacer más fácil?
Para obtener más información sobre errores comunes semántica, y la utilización adecuada de los elementos que intervienen en tales errores, ¿por qué no mirar a la página de mi semántica ejemplo? Se muestra una tabla de errores comunes, y los escaparates de algunas complicado (aún no correcta) la semántica.
Articulo sacado de:
RemiseroStudio
www.remiserostudio.com
No hay comentarios:
Publicar un comentario