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:
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:
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:
<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:
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 < y el signo menor > por >
El símbolo ampersand & se reemplaza por &
Las comillas dobles " por " y las simples ' por '
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:
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 < y el signo menor > por >
El símbolo ampersand & se reemplaza por &
Las comillas dobles " por " y las simples ' por '
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.
Hasta aquí las reglas, creo que no hay más pero, uno nunca sabe ¿Tema aburrido? No cabe la menor duda.
14 comentarios:
Hola JMiur,
Aunque el contenido del artículo es aburrido como tu dices a pesar de ser necesario, lo has explicado muy bien.
¿Existe alguna página o documento donde se recojan las etiquetas de Blogger (las tipo data:nombre y demás...)
Un saludo
Hola JMiur! me llama la atención que las plantillas de blogger tengan la nominación XHTML strict y que luego tan estricto no es.... DE MOMENTO, pues ya vimos (si no me equivoco) algunos cambios súbitos en el lenguaje de Blogger, tal como aquel que de repente no permitia las "div" en la cabecera... como debe ser...
Gracias por la explicación y un saludo.
MadQuark:
Hace tiempo hice una lista incompleta de esas etiquetas y puedes verla en este POST.
La Blogueria:
Es que Blogger usa XHTML strict estilo Google :D
Son los beneficios de llamarse dios ;)
hola eh bajado mil plantillas y a la hora de subirlas me dice qe esta mal,, que pagina me recomendas?
saludos
Huy J.Miur te luciste con el post , biene bien estricta la mano , ya que cuando inserto la etiqueta font en el post más tarde me aparece q la etiqueta span y el estilo que le puse a font .Gracias :)
natii:
Lo que me pides es casi imposible, no sé tus gustos. En todo caso, si hay alguna que te haya gustado y no has podido poner, dime cuál es y la veo.
Eso sí, fíajte que sea para Blogger y sobre todo para el nuevo Blogger ya que aún quedan algunas del viejo modelo.
Lacrax:
Exacto, eso que te ocurre es el ejemplo perfecto. En realidad, debería "rechazar" la etiqueta y decirte por qué pero, la cambia sin decirte nada.
Gracias infinitas por los posts de este tipo.
No existe que logre leer a nadie más :)
(Aunque luego te atormente)
Bien, a la carpeta de Vagabundia.
Gracias
Gracias, Mar :D
ola nose si esto tenga algo que ver pero quiero colocar una slide de imagenes(((presentacion de imagenes con link ke al pasar el mouse se detienen))) y bueno el problemas es que empieza con un codigo
" <!DOCTYPE " y nose donde colocarlo como me he dado cuenta que tu eres un experto te agradeceria mucho si me pudieras ayudar ...de ante mano graciias y tienes un excelente blog..
No sé quñe quieres colocar pero etiquetas como DOCTYPE ya forman parte de las plantillas de Blogger y por lo tanto, no se agregan otra vez. Lo más probable es que tengas un demo de eso pero ahí deberás buscar las partes a insertar poruqe debe ser una página web completa.
mira lo que quiero agregar es algo como lo que esta en esta web http://animeid.com
el la parte de arriba hay unas imagenes con unos flechas a izquierda y derecha para ir cambiando de imagen eso es lo que quiero agregar pofavor veelas te agradeceria mucho
Eso requiere que agregues a tu blog una serie de librerías:
http://sorgalla.com/jcarousel/
gracias!!. la vere y disculpa por tantas molestias
JMiur excelente guía, bastante instructiva,
gracias por compartirla.
saludos josé!
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...