Algunos de nuestros usuarios tienden a utilizar el último navegador pero hay una "inmensa mayoría" que utiliza navegadores "antiguos" o incluso modernos pero que no son capaces de interpretar ciertas partes del código.
Para que esto sea posible, debe existir un organismo internacional regulador de código que establezca cuáles son los estándares compatibles sobre los que se debe trabajar. Ese organismo es el W3C.
¿Quieres comenzar por validar las hojas de estilo que utilizas en tu página web o Blog?, ¿deseas cumplir con los estándares oficiales en la materia?, entonces este artículo te dará algunas claves para conseguirlo.
Conceptos Previos:
¿Qué es el W3C?
Según "reza" su web (cito con sus enlaces incluidos por el valor de toda esta información):
"El Consorcio World Wide Web (W3C) es una comunidad internacional donde las organizaciones Miembro[ingles], personal[ingles] a tiempo completo y el público en general trabajan conjuntamente para desarrollar estándares Web[ingles]. Liderado por el inventor de la Web Tim Berners-Lee[ingles] y el Director Ejecutivo (CEO)Jeffrey Jaffe[ingles], la misión del W3C es guiar la Web hacia su máximo potencial. Contacta con el W3C para más información."
¿Qué hace el W3C?
De nuevo citando su web:
"La principal actividad del W3C es desarrollar protocolos y directrices que aseguren el crecimiento de la Web a largo plazo. Los estándares del W3C definen las partes claves que hacen que la World Wide Web funcione. Conoce más sobre el objetivo del W3C."
¿En qué me puede ayudar?
Utilizar los protocolos y directrices que aseguran que tu sitio web es totalmente compatible con cualquier navegador es sólo el comienzo.
El consorcio pone a tu disposición un magnífico conjunto de herramientas que merece la pena estudiar, pues "validan" tu código informándote de aquello que no cumple con los estándares o que directamente es erróneo.
Toda su documentación y código es abierta, está disponible para cualquiera que lo desee y es muy utilizada por todas las organizaciones y empresas desarrolladoras de páginas web que se precien.
Mejorando las hojas de estilo de mi página web, haciéndolas compatibles con cualquier navegador y componiéndolas según los estándares oficiales de W3C:
En Blogger y con cualquier publicación web, las plantillas basan su presentación fundamentalmente en hojas de estilo. Esta clase de archivos tienen la extensión .css: Hojas_de_estilo_en_cascada. Contienen la información semánticamente construida de los elementos que en la página HTML constituirán el aspecto y el formato de los componentes que integran dicha página.
Es decir, son archivos externos que le dicen a cada componente que utilizamos en nuestro Blog (cajas de texto, títulos, comentarios, etc...) qué formato deben tener para darle un "estilo", una presentación a nuestras páginas web. Establecen, por citar ejemplos simples que puedan comprenderse al instante, el espaciado entre caracteres, el margen entre un marco y el texto, el color que se va a utilizar en las letras...
Utilizando el validador de hojas de estilo de W3C
1) Conéctate a http://jigsaw.w3.org/css-validator/, te aparecerá una pantalla como la que se muestra a continuación:
2) Introduce la URL de tu sitio web o Blog en la caja de texto con el literal "Dirección". A continuación te mostrará el listado de "Avisos" y "Errores" que tus CSS pueden tener:
Los Avisos, aunque de menor importancia que los errores, deben atenderse para alcanzar el mayor nivel de compatibilidad.
Los errores deben tratarse para evitar problemas de compatibilidad y mejorar la ejecución de tu código en el navegador.
EXPERIMENTAL: CSS Inline y CSS validado por W3C con Blogger
AVISO:
- los pasos aquí realizados han sido probados y realizados con mi Blog. Lo que a mí me ha funcionado no tiene porqué funcionarte a tí dado que cada página web es distinta.
- Evidentemente mi plantilla Blogger es modesta y carece de complejidad. Lo que a mí me ha funcionado no tiene porqué funcionar en todos los casos, pero me siento en el deber de compartir esto con la comunidad dado que lo considero un avance útil para todos los que trabajamos para mejorar nuestros Blogs y sitios web a todos los niveles.
- No me responsabilizo de los daños que puedas sufrir en tu Blog por el uso de los pasos aquí explicados.
1) Al final del informe encontrarás que te ha generado tu código CSS completo corregido (siempre que haya sido posible) en "Información CSS válida".
2) En mi Blog de Blogger utilizo CSS inline debidamente comprimido para cumplir con las sugerencias de Google Developers realizadas por el servicio Google PageSpeed Insights. Adicionalmente y debido a la aplicación de esta técnica vigilo el concepto HTML Text Ratio para no caer en un exceso de código frente a texto.
3) Después he probado a copiar el código CSS corregido por el validador de la W3C a mi plantilla XHTML de Blogger debidamente comprimidio. El resultado ha sido totalmente correcto. La hoja de estilo queda depurada, lo que antes no funcionaba en los Explorer antiguos (famosos por su dificultad para "tragar" código), ahora funciona sin meta-etiquetas o scripts de compatibilidad ni problemas de esa clase.
Sólo realicé un cambio en la clase destinada al menú para ajustar su colocación "20 píxeles a la derecha" y poco más. Es posible que en cada web realizar este ajuste pueda requerir más o menos cambios.
4) Con la tecla F12, utilizando Chrome y haciendo "clic" en la opción de menú "Audits", si pulsas el botón "RUN", podrás auditar cada parte del código que utilizas.
Para las CSS tendrás dos apartados especialmente interesantes: "Remove unused css rules" y "optimize the order of styles and scripts". Con estas indicaciones podrás eliminar de tu CSS aquellas clases que o están utilizando y podrás ordenar su colocación en el CSS por prioridad de utilización.
Esto es ir probando y depurando hasta que finalmente dejas tu página correctamente optimizada:
- Reduces la cantidad de "código innecesario".
- Aumentas el rendimiento y reduces los tiempos de ejecución en cliente.
- Dejas tus estilos totalmente compatibles con las normas y estándares de W3C.
eres muy chido amigo gracias
ResponderEliminarHola, esta plantilla tiene esos errores, la anterior con la que hice este trabajo no tiene ninguno.
ResponderEliminarTodo el trabajo y pruebas quese hacen en diariosdelanube están probados y analizados previamente por mí.
Esta web tiene el respaldo y el cariño de la gente que la apoya y la sigue día a día gracias al esfuerzo y el trabajo duro que realizo para ayudar a todos.
Aquí no se miente, aquí se trabaja duro por los demás y nadie se esconde detrás de un comentario anónimo.