{"id":288,"date":"2009-01-30T17:13:02","date_gmt":"2009-01-30T16:13:02","guid":{"rendered":"http:\/\/www.sortea2.com\/blog\/?p=288"},"modified":"2009-03-13T16:50:19","modified_gmt":"2009-03-13T15:50:19","slug":"pasar_el_w3c_validator","status":"publish","type":"post","link":"https:\/\/www.sortea2.com\/blog\/2009\/01\/pasar_el_w3c_validator\/","title":{"rendered":"Pasar el W3C Validator"},"content":{"rendered":"

El servicio w3c validator<\/a> tiene la utilidad de testear una web para encontrar las partes en las que esta puede ser incompatible con los est\u00e1ndares<\/strong>, las partes con errores y los posibles conflictos <\/strong>que se pueden dar.<\/p>\n

El W3C validator sirve para validar el c\u00f3digo HTML<\/p>\n

Este servicio puede validar HTML indicando la URL de la web, subiendo un archivo .html o escribiendo el HTML directamente.<\/p>\n

Pasar correctamente estas validaciones y por consiguiente conseguir el logo de \u00abW3C validator\u00bb es bastante complicado<\/strong>, sobre todo en el caso de intentar pasar este test una vez finalizada la parte de desarrollo en la p\u00e1gina web; a nosotros nos sucedi\u00f3 ese problema: tratamos de solucionar la mayor parte de problemas de compatibilidad posibles, pero no fue posible en todos los casos.<\/p>\n

A priori puede parecer que, mientras la p\u00e1gina funcione y se vea m\u00e1s o menos bien en la mayor\u00eda de los navegadores, es suficiente; pero no deber\u00edamos conformarnos con esto porque el principal motivo para esforzarse en este tema es que Google indexa mejor<\/strong> p\u00e1ginas que sean W3C compatible<\/em>, esto es debido a que para el robot de Google le es m\u00e1s f\u00e1cil leer nuestra web<\/strong>, por lo que obtendr\u00edamos mejores resultados en las b\u00fasquedas de Google.<\/p>\n

A continuaci\u00f3n voy a detallarle las cosas que suelen dar errores <\/strong>y que hay que tratar de evitar porque dan problemas con el validador de W3C:<\/p>\n

\nDejarse etiquetas sin cerrar: <\/span>
\nEsto puede parecer obvio, pero no lo es tanto. A veces se nos puede olvidar cerrar un div, es normal, y este validador nos lo indicar\u00e1.
\nPero hay casos en los que hay que cerrar las etiquetas aunque no haga falta, por ejemplo, en el caso de utilizar XHTML, las etiquetas img <\/code>deben terminar con \/>, las etiquetas meta <\/code>, link<\/code>, input<\/code>, etc. necesitan ser cerradas de manera expl\u00edcita.
\nOtro caso es el de las etiquetas que aparentemente no es necesario cerrar, sino que el navegador sobreentiende que ya han finalizado. Este es el caso, por ejemplo de las etiquetas <option> y <li> no son imprescindibles de cerrar, porque cuando empieza la siguiente etiqueta de este tipo ya se sobreentiende que se han cerrado. Esta pr\u00e1ctica no cumple con los est\u00e1ndares, por lo que deber\u00edamos evitarla.<\/p>\n

\nUso excesivo de tablas<\/span>
\nEste es un problema dificil de diagnosticar, puesto que el validador nos mostrar\u00e1 un mont\u00f3n de errores <\/strong>cuando una p\u00e1gina tiene muchas tablas. Para que las tablas sean compatibles, tienen que estar compuestas de la siguiente manera: <table><tbody><tr><td><\/code>, en caso de que el tbody se nos olvide o algo, ya nos dar\u00e1 error.
\nEl consejo ser\u00eda evitar el uso de las tablas, aunque, como a veces es inevitable, se pueden o bien ignorar los errores, o tratar de usar todas las etiquetas necesarias.<\/p>\n

\nElementos que est\u00e1n donde no deben<\/span>
\nEste problema es t\u00edpico cuando se define unos estilos dentro del body o cuando se tratan de usar etiquetas meta dentro del body. Tambi\u00e9n da error en caso de introducir una etiqueta que dibuje algo en la pantalla dentro del head.
\nEstos errores son habitualmente f\u00e1ciles de solucionar, aunque hay veces que hay problemas inevitables. Se trata de situar cada elemento en su sitio y ya est\u00e1; si nos es imprescindible que un elemento est\u00e9 fuera del sitio, tampoco nos tenemos que obsesionar.<\/p>\n

\nAtributos que una etiqueta no tiene<\/span>
\nEste tipo de errores se suele dar en p\u00e1ginas en las que se aplica Javascript, como nos es necesario acceder a los elementos de la p\u00e1gina a trav\u00e9s de atributos id, name, class, etc., a veces podemos tener el caso de que nos hagan falta m\u00e1s atributos o algo as\u00ed.
\nUn caso puede ser tener un elemento <td><\/code> en el que hemos aplicado un atributo id para ponerle estilo CSS, si este id se repite (m\u00e1s adelante veremos que esto tambi\u00e9n da problemas), entonces tenemos que tener otro atributo que se refiera a este elemento td. Una posible soluci\u00f3n es usar un atributo name<\/strong>, esta pr\u00e1ctica no es muy recomendable, puesto que da errores de compatibilidad; siempre hay que tratar de usar un atributo id y que sea \u00fanico<\/strong>.
\nEl atributo name <\/code>se deber\u00eda utilizar solo para formularios <\/strong>y para anclas.<\/p>\n

\nProblemas con IDs<\/span>
\nUn ID es un identificador \u00fanico<\/strong>, por lo tanto, se debe utilizar tan solo para una etiqueta hml. En caso de usarlo para aplicar un estilo CSS, se debe tener en cuenta que si ese estilo solo se va a usar en una etiqueta de la misma p\u00e1gina, entonces si se puede usar un ID; en caso de tener que reutilizar el mismo estilo varias veces en el mismo documento, entonces hay que usar una class<\/strong>.
\nLos IDs no pueden empezar por un n\u00famero<\/strong> sino que deben empezar por una letra o un gui\u00f3n bajo o similar. Esto puede suponer un problema cuando, para aplicar Javascript nos es necesario aplicar un ID a un elemento que sea su n\u00famero identificador; por ejemplo, en la pantalla de lista de sorteos <\/a> cada sorteo tiene en el bot\u00f3n de borrar sorteo asignado un id que es el n\u00famero de sorteo. En nuestro caso nos es imprescindible, puesto que as\u00ed se facilitan mucho las operaciones internas; podr\u00edamos haber evitado esta pr\u00e1ctica, aunque no lo hemos visto necesario.
\nEn resumen, que se evite empezar por un n\u00famero, aunque tampoco tiene que ser algo que complique mucho la programaci\u00f3n interna en Javascript o PHP.<\/p>\n

\nResumen<\/span>
\nConcluyendo, hay que tratar de pasar el W3C validator aunque tampoco debe ser una obsesi\u00f3n que haga que pongamos todos nuestros recursos en pasar con \u00e9xito. Es m\u00e1s importante saber como evitar los errores <\/strong>que saber c\u00f3mo arreglarlos; esto es debido a que a veces es tan avanzada la programaci\u00f3n interna, que es muy complicado modificarla a posteriori para que se tomen en cuenta los cambios.<\/p>\n

En sortea2 <\/a>hemos tratado de pasar el W3C validator, aunque en la mayor\u00eda de las p\u00e1ginas no nos ha sido posible. Lo importante es saber qu\u00e9 t\u00e9cnicas evitar a la hora de programar y es por eso por lo que os escribo este art\u00edculo.<\/p>\n

\u00bfcrees que faltan errores de compatibilidad comunes? comun\u00edcanoslo a trav\u00e9s de los comentarios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

El servicio w3c validator tiene la utilidad de testear una web para encontrar las partes en las que esta puede ser incompatible con los est\u00e1ndares, las partes con errores y los posibles conflictos que se pueden dar. Este servicio puede validar HTML indicando la URL de la web, subiendo un archivo .html o escribiendo el […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,1],"tags":[23,61,22],"class_list":["post-288","post","type-post","status-publish","format-standard","hentry","category-tutoriales","category-uncategorized","tag-sortea2","tag-tutoriales","tag-w3c-validator"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/posts\/288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/comments?post=288"}],"version-history":[{"count":7,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/posts\/288\/revisions"}],"predecessor-version":[{"id":333,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/posts\/288\/revisions\/333"}],"wp:attachment":[{"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/media?parent=288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/categories?post=288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/tags?post=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}