JMiur [E]

Me preguntan sobre el significado o el uso de ciertas etiquetas de la plantilla y como la respuesta directa (si pudiera contestarla bien) sería tan técnica que no la entendería nadie, preferí hacerlo así, tratando de hablar de algo que es engorroso pero ver si es posible encontrarle un lado práctico.

Al mirar cualquier plantilla de Blogger, vemos que las primeras lineas son un galimatías incomprensible y, cuando preguntamos algo al respecto, lo más normal es que nos digan: "son declaraciones, no tienen importancia" y, hasta cierto punto es cierto ya que no hay nada que podamos hacer con ella, ni siquiera eliminarlas para no verlas más.

XML, HTML y XHTML son "lenguajes" para hacer páginas web. El HTML (Hypertext Markup Language) es el más conocido y con ese es con el que normalmente trabajamos. XML (Extensible Markup Language) es otro lenguaje que permite crear "etiquetas especiales" para usos específicos. XHTML (Extensible Hypertext Markup Language) es una combinación de ambos lenguajes donde se usan tanto etiquetas "comunes" como etiquetas "especiales", definidas por el servidor, en este caso, Blogger. En muchos sentidos, el XHTML es el sucesor del HTML y muchos lo consideran la "versión actual del HTML" y se ha vuelto "estricto" porque se requiere que haya compatibilidad entre los diferentes navegadores e incluso, con los diferentes dispositivos que se han ido incorporando, por ejemplo, los teléfonos móviles.

Por eso, la primera línea de nuestra plantilla dice:
<?xml version="1.0" encoding="UTF-8" ?>
Según la W3C las páginas web deben tener una serie de cabeceras que identifiquen el tipo de código que utilizan para que se compruebe la sintaxis del documento. Blogger, declara nuestras páginas como: XHTML 1.0 Strict (más información)

Esto, lo hace con la etiqueta DOCTYPE (Document Type Declaration) indicando el tipo (DTD) más estricto, es decir, nos pone en apuros porque dice que TODO debe estar escrito con ciertas reglas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Por último, vemos la tercer línea que, para quienes han experimentado un poco fuera de los blogs, es una etiqueta conocida: HTML pero, ni así nos dejan en paz ya que se agregan una serie de parámetros que nos son desconocidos:
<html
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
Esos atributos xmlns son llamados namespaces. Cada uno de ellos, contiene una definición o un prefijo que, en este caso, se corresponden con las etiquetas especiales que usa Blogger:

<b:instruccion>
<data:nombre>
< ... expr:codigo ...>

Pero, de todo eso, lo único que realmente nos afecta es DOCTYPE y Blogger no es el único que coloca ese tipo de código, lo hacen casi todos los servicios de blogs y la mayoría de los programas de software que se utilizan para crear páginas web.

Si es importante es porque es el motivo por el cual recibimos mensajes de error cuando queremos editar la plantilla.

Es que por ser un documento "estricto" debemos seguir reglas muy específicas así que no nos hará daño conocerlas:

1. Los códigos deben ser escritos en minúscula.

Esto es así porque el XML a diferencia del HTML distingue entre mayúsculas y minúsculas. Esto, no provocará un error en la plantilla y todos sabemos que Google/Blogger como cualquier buen dios acomoda las reglas un poco a su gusto así que meta y META serán lo mismo pero, id="nombre" e id="NOMBRE" no serán iguales y si usamos scripts, no funcionarán así que lo mejor es tratar de acostumbrarse a que todo lo que está entre < y >, se escriba con minúscula exepto los valores, claro.
 
2. Todos los valores de los atributos deben estar entre comillas simple o dobles (Blogger suele usar comillas simples).

En HTML esto no es obligatorio ya que width="500" o width=500 son interpretados igual.

3. Todas las etiquetas deben tener una etiqueta de apertura y una etiqueta de cierre.

Este es el punto sobre el que más consultas hay ya que es una regla que Blogger no admite que se quiebre ni en las plantillas ni en los posts y una de las más difíciles de seguir si se está acostumbrado a escribir HTML. En ese lenguaje, esto es válido:
<p>Un texto
<p>Otro texto
<img src="unaImagen">
<br>
Porque nos enseñaron que hay etiquetas como IMG, BR, INPUT, PARAM, HR, META y LINK que no tenían una etiqueta de cierre y que hay otras como P o LI que sí las tenían pero su uso era optativo.

En XHTML estricto SIEMPRE debe haber una etiqueta de cierre y, si esta no existe se debe agregar la barra de cierre en la misma etiqueta de apertura. Así que lo anterior, debería transformarse en:
<p>Un texto</p>
<p>Otro texto</p>
<img src="unaImagen" />
<br/>
4. No se admiten atributos minimizados.

Algunas etiquetas poseen atributos que no siguen la forma tradicional:
atributo="valor"
y son reemplazados por una palabra; por ejemplo:
<textarea readonly> ... </textarea>
pero, no podemos usarlos y hay que "reinventarlos":
<textarea readonly="readonly"> ... </textarea>

5. Siempre debe especificarse un texto alternativo para las imágenes utilizando el atributo alt para la etiqueta IMG.

En Blogger, no hacerlo, no producirá error en la plantilla pero, hay que recordar que también es un buen método para que se indexen las imágenes.

6. Ciertos caracteres están prohibidos y deben ser reemplazados por sus equivalentes.

¿Qué son? Son códigos que reemplazan ciertos caracteres que podrían llevar a confusión. El caso típico son los simbolos mayor y menor que están reservados para indicar las etiquetas y que no podemos usar para nada más y debemos reemplazarlos por sus códigos equivalentes. Blogger, incluso, va más allá y suele reemplazar otros símbolos o rechazarlos. Probablemente, esa es la causa de muchos desvelos ya que esos cambios forzosos crean códigos confusos y casi ilegibles. Incluso, solemos colocar los scripts en servidores externos porque no logramos que la plantilla los acepte si los escribimos directamente en ella.

El signo mayor < se reemplaza por &lt; y el signo menor > por &gt;
El símbolo ampersand & se reemplaza por &amp;
Las comillas dobles " por &quot; y las simples ' por &#39;

7. No pueden usarse atributos y etiquetas depreciados.
 
Depreciado es una palabra fea y no se la deseo como calificativo a nadie. Ser despreciable es malo pero ser depreciado es peor. La W3C, la organización que establece las reglas tiene una lista de etiquetas y atributos "depreciados", es decir, cosas que nos recomiendan no utilizar y nos aconsejan que coloquemos otros códigos alternativos. Mucha de ellas ya no se usan hace tiempo (APPLET, BASEFONT, DIR, MENU, ISINDEX), otras, siguen dando vueltas por ahí (FONT). Muchos atributos han sido reemplazados por las propiedades de estilo CSS correspondientes que, en general son más sencillas y más claras.

Todos estos atributos están considerados como "depreciados":

BACKGROUND, BGCOLOR, BORDER, WIDTH, HEIGHT en las tablas
TEXT, LINK, VLINK, ALINK en el cuerpo de la página
HPSACE, VSPACE, WIDTH, HEIGHT en las imágenes
TYPE, START, VALUE en las listas
COMPACT, NOSHADE, SIZE, NOWRAP, VERSION, LANGUAGE, CLEAR, etc

Todas ellas son sencillas de evitar, otras como la etiqueta CENTER y el atributo ALIGN se nos hace difícil y a veces es imposible no usarlas.

Por último, algunas otras depreciadas que seguimos usando porque muchas veces es más cómodo:

para <b> un texto en negrita </b> usar font-weight: bold;
para <i> un texto en itálica </i> usar font-style: italic;
para <u> un texto subrayado </u> usar text-decoration: underline;
para <s> un texto tachado </s> usar text-decoration: line-through;
para <big> un tamaño de texto más grande </big> usar font-size: larger;
para <small> un tamaño de texto más chico </small> usar font-size: smaller;
para <tt> un texto tipo teletipo </tt> usar font-family: monospace;

De cualquier forma es otra de las reglas que Blogger pasa por alto.

8. Los textos no deben ser insertado directamente en el body; deben ser parte de una etiqueta:

esto es incorrecto: <body> un texto cualquiera </body>
esto es correcto: <body><span> un texto cualquiera </span></body>

9. No se deben insertar elementos de bloque dentro de elementos de línea.

esto es incorrecto: <em><h2> un texto </h2></em>
esto es correcto: <h2><em> un texto </em></h2>

10. Todos los elementos deben estar debidamente anidados.

Esta es la otra regla que suele causar problemas: "falta la etiqueta de cierre", "la etiqueta está mal cerrada", son frases habituales. Esto, tiene que ver con lo dicho anteriormente sobre la barra de cierre obligatoria pero, también con la forma equivocada en que colocamos las etiquetas. Probablemente, esta sea una regla de oro: la primera etiqueta a cerrar es la última etiqueta abierta.

esto es incorrecto <em><strong> el texto </em></strong>
esto es correcto:<em><strong> el texto </strong></em>

Otro ejemplo:
<div>
<ul>
<li> item 1 </li> antes de abrir otra etiqueta LI se cierra la anterior
<li> item 2 aquí queda abierta porque contiene otra lista dentro
<ul> se abre la lista interior
<li> subitem 2.1 </li> 
<li> subitem 2.2 </li>
</ul> se cierra la lista interior
</li> antes de abrir otra etiqueta LI se cierra la anterior
<li> item 3 </li> 
</ul>
</div>
Es por eso que siempre es recomendable indentar (usar sangrías) los códigos, de tal manera, podemos saber qué cosa está adentro de que otra y así cerrarla en el orden adecuado. Imaginen que las etiquetas son cajas con tapa: abren la más grande y adentro ponen otra, le quitan la tapa a la segunda y ponen una tercera. Ahora, debemos taparlas en el mismo orden, primero la más chica, luego la del medio y por último la más grande que contiene a las otras.

Hasta aquí las reglas, creo que no hay más pero, uno nunca sabe ¿Tema aburrido? No cabe la menor duda.

14 comentarios |

|

Suscribirse a la entradas
 
CERRAR