Un Blog Valido Paso a Paso

Aviso, la accesibilidad de este post no está garantizada al estar en periodo de producción a fecha 1 de Diciembre de 2008.
Con este post me propongo iniciar y finalizar un blog que valide los estándares definidos en el DTD de blogger.
La metodología será la siguiente:

1. abrir un nuevo blog llamado completamenteValido.blogspot.com (OK.-11:37 1-12-2008)
   
2. cambiar la plantilla para usar una personalizada, en este caso uso "scribe" al ser una plantilla con fuerte contraste y maquetada para 800x600 que luego me va a ayudar para hacerla accesible (OK.-11:38 1-12-2008)
   
3. hacer que el blog valide (OK-14:06 1-12-2008) (vecinos.urbanizacioncasasverdes.org/web2/trucos/home.php)
   
4. introducir un post de texto (OK-14:07 1-12-2008)
5. hacer que todos los links a la pagina se filtren por php en caso de pulsarlos (OK.-14:30 1-12-2008)
   
6. hacer que el blog valide (OK-14:52 1-12-2008)
7. que valide la pagina que aparece al pulsar en el titulo de la noticia (OK 00:33 2-12-2008)
   
8. introducir un post con listas, texto, imágenes y todo lo que me permite el editor por defecto (ok.- 10:00 2-12-2008)
   
9. hacer que valide (OK.- 13:34 2-12-2008)
   
10. introducir un comentario con todo lo que me permita el formulario por defecto (OK.- 19:11 3-12-2008)
    
11. hacer que valide (OK.- 22:55 3-12-2008)
    
12. añadir gadgets uno por uno (1x1) y hacer que validen

los gadgets que voy a añadir son :

• suscribirse al blog (22:57.- 3-12-2008) (24:00 valida)
  
• listado de etiquetas del blog (6-12-2008) (20:17 valida)
  
• google calendar (20:17 6-12-2008) (21:16 valida)
  
• del.icio.us tag roll (21:16 6-12-2008) (21:36 valida)
  
• listado de seguidores del blog OK 7-dic
  
• datos personales , perfil ok 7dic
  
• mi lista de blogs ok 7-dic
  
• elementos compartidos de google reader ok-7dic
  

Herramientas que se van a usar:

• web developper tools , extension de firefox
• firebug, extension de firefox
• bluefish, software de lunix para edición de código (php,html,xml)
• validador online de W3C

Técnicas utilizadas:

• identificación de los elementos de la plantilla que generan código erroneo.
• edición directamente en la plantilla html.
• modificación del contenido de los gadgets y en su caso del javascript que genera el código de marcado, creando un nuevo gadget Valido.
• Filtrado del blog por medio de script PHP .

semantic-web.png

semantic-web.png
Cargado originalmente por trovao

una foto interesante publicada directamente desde Flickr

Como hacer blogger más validable

En este artículo voy a tratar de explicar como hacer que blogger llegue a validar XHTML sin cambiar el doctype claro.
En principio mi trabajo ha sido sobre la plantilla personalizada llamada Minima .
Los problemas con los que me he encontrado son:
1.-Nav-bar o codigo que no está en la plantilla y que introduce blogger.
2.-codigos de la plantilla que producen una url erronea usando & en lugar de &
3.-Etiquetas o atributos que no validan (iframe,target,aling,border,frameborder...)

las soluciones que he aplicado han sido:
En el caso de la Nav-bar mandar un escrito a blogger para que la cambie y como solución inmediata generar un documento php a modo de ejemplo que filtra la página cambiando los códigos erroneos, puedes ver el texto de este código
En el caso de los códigos que producen algunas etiquetas como:
data:olderPageUrl , data:renderingUrl y data:trackingUrl
dan una mala codificación de & por lo que en los casos que me ha sido posible he copiado el código generado , lo he cambiado y lo he sustituido por la variable en el template, tambien he generado algunas sugerencias al grupo de ayuda de blogger para que lo cambien. Estos problemas tambien se pueden solucionar filtrando el código mediante php como lo de la Nav-bar.
En cuanto a las etiquetas y atributos erroneos los he quitado o sustituido:
Quitado: target, border, frameborder,aling
sustituido: iframe por object, cambiando el contenido del src por data.
Bueno y en algunos gadgets se deberia reformular su código js para que generen buen marcado, un ejemplo de modificación de un gadget, en este caso el tagroll de del.icio.us lo puedes encontrar alojado en mi domimio , tambien llama a los scripts que alli se alojan llamados del-tagrolls.js y salida1.js

Web 2.0 ¿ un peligro para la accesibilidad?

Si partimos de la base de que lo más importante de las nuevas funcionalidades que nos permite la web 2.0 es la capacidad de "democratizar la web", es decir, que cualquier usuario con conocimientos básicos puede ser generador , clasificador y supervisor de contenidos, nos encontramos con dos problemas diferenciados.
El primero es el creciente número de aplicaciones "sociales" que pugnan por acaparar lo más rápidamente posible el mayor trozo del pastel, dejando a un lado la calidad , usabilidad y estándares, para ofertar vistosidad y adaptabilidad.
Una de estas es el mismo Blogger que se lanza con la etiqueta de estandarización W3C y que define su propio documento como XHTML strict pero que no es capaz de producir su propio código conforme a ese DTD, ademas blogger , de una forma exitosa y comercial, abre la puerta a los usuarios para que diseñen sus propias plantillas y sus propios gadgets, lo que nos introduce otras dos fuentes de posibles problemas.
El segundo es el contenido que producen los mismo usuarios, los cuales pueden hacerlo mediante formularios de entrada muy diversos que pocas veces producen un marcado correcto, y menos una estructuración accesible de los post.
La solución al primer problema pasaría por que las empresas que se lanzan a esta conquista de la web social, fueran mas escrupulosas con su trabajo, lo que considero dificil pues su objetivo principal es posicionarse en un mercado nuevo y por ello el tiempo es fundamental. Otra "solución de compromiso" pasaría por que estas empresas dejaran al menos su código abierto para que usuarios comprometidos pudiéramos generar una versión accesible del mismo.
En el caso de blogger la mayoría de los problemas de validación son de una solución sencilla desde el punto de vista de programación por lo que supongo que no lo consideran un problema importante.
Para evitar que los usuarios introduzcan contenido con mal marcado , se deberia desarrollar un componente editor de tipo WYSIYYG que produzca código correcto, así como los administradores de los portales deberian poner recordatorios para intentar que los usuarios que ponen comentarios estructuren sus contenidos de forma adecuada.
Ahora ya estoy preparado para contestar a la pregunta que planteábamos al principio, y la respuesta es NO, pues si bien como hemos visto esta popularización de la web ha supuesto un gran incremento de contenido poco accesible, debemos recordar que WEB 2.0 significa muchas cosas más y estas si que son positivas para mejora la comunicación y para ofrecer a los usuarios contenidos y formas de interelación a las que antes no podía acceder.

escapar códigos en la plantilla de blogger

Cuando ponemos códigos tipo & que queremos cambiar para usar el amp; que valida, lo mejor es usar los códigos en hexadecimal del tipo &#xx; siendo xx el correspondiente hexadecimal de ese caracter por ejemplo
&
seria
&amp8

asi nos aseguramos que entra correctamente el código en la plantilla

Para meter códico en los comentarios de blogger

El problema a solucionar es poder controlar la validez de los comentarios de forma que no provoquen que la página no valide automáticamente , el código actual de bloggger es bastante restrictivo asi que lo que realmente me encuentro es con la incapacidad de meter lineas que se interpreten como código.
La solución pasará por intervenir en la plantilla para que muestre otro formulario y alli añadirle un boton para generar código valido , del tipo convierte código seleccionado, que lo sacaré del gadget que tengo instalado llamado post-code converter.

XHTML errores con la Barra de Navegación del Blogger

Me ha surgido el problema al intentar validar el blog de que la barra de navegación no cumple , a partir de ahi me he puesto a trabajar, lo primero y fácil es ocultarla por css


<style type="text/css">

#navbar-iframe {

    height: 0;

    visibility: hidden;

    display: none;

               }

</style>



pero eso no hace que valide, asi que la segunda opción es con javascript al final del documento , pero esto no hace mas que engañar al validador

<script type="'text/javascript'">

imagen = document.getElementById("navbar-iframe");

if (!imagen)

  {

    alert('El elemento selecionado no existe$imagen');

    } else

        {

        padre = imagen.parentNode;

        padre.removeChild(imagen);

        }

</script>

pero esto no hace que desaparezca el código que no provoca errores

por último existe la opció que aparece en el blog del siguiente enlace en ingles:

ocultar Nav-Bar mediante etiqueta noscript

Y hasta aquí he llegado, seguramente lo acabaré ocultando de la última opción aún así mantendré un periodo de reflexión de unos cuantos dias para hacerlo.

Tambien hay que tener en cuenta las consecuencias legales de esto:

LEGAL ISSUES

The Terms of Service for Blogger can be found here. Iagree with Digital Inspiration what he say here about the legality of removing the navbar and I quote :

"The Terms of Service for Blogspot.com do not mention anything about Blogger Navbar but it does state a word about the discontinued Blogger AdBar which was previously displayed on freely-hosted Blog*Spot blogs.

By creating your BlogSpot Site, you agree that Pyra has the right to run such advertisements and promotions. You also agree that you will not attempt to block or otherwise interfere with advertisements displayed on your BlogSpot site via JavaScript or any other means. Doing so is grounds for immediate termination of service. The manner, mode and extent of advertising by Pyra on your BlogSpot Site is subject to change.

Since it is not mentioned explicitly in the Terms of service, it remains doubtful if removing and hacking the Blogger navbar is any violation of the Blogger terms of service. Lets say we are not "removing the navbar" but only "hiding the navbar" or we could even re-position the navbar to the bottom of the blog. Get rid of the blogger nav bar."

respuesta legal

While we don't recommend or support the removal of the Blogger navbar, there is nothing in our Terms of Service that explicitly mandate its use.

I'll let you draw your own conclusions from there ;-)

Thanks, Gatsby
The Blogger Team

Indicar que no he podido verificar la autoria de la respuesta y que la he sacado de otro blog.

Entender XHTML Básico

Bueno este es el primer post que intento hacer referencia a otro blog , pero de él sólo me interesa una noticia que ha publicado, así que no sabia si lo suyo es pegarla aquí directamente o poner el enlace, lo suyo seria que se pudiera poner un link a la noticia de forma que se replique en mi blog, siempre indicado la fuente de la información pero sin duplicarla.
este enlace te mandará a otro blog : fuente de la noticia

Sweetxml: Valid XHTML - the blogger navigation bar

Sweetxml: Valid XHTML - the blogger navigation bar

Contenidos multimedia

Aqui podemos ver una interesante presentación de lo que es la web semántica
Nova Spivack Semantic Web Talk, Entendiendo la web semántica

View SlideShare presentation or Upload your own. (tags: tags web3.0)

Aqui vemos dos maneras muy distintas de presentar el mismo video
esta cono you tube



y este el mismo pero usando un el metodo correcto de poner subtitulos

y aqui con dotsub aunque le he cambiado el iframe y el maquetado para que valide xhtml strict



la forma ideal es usar el estilo TT definido por w3c al estilo que marca en el post del enlace en ingles:
como hacer you tube accesible en 4 pasos

puedes ver grandes ejemplos en portugues en:
blindtube
video de ejemplo