Codificación aprenderaprogramar.com: CU01023D
SERVICIOS DEL W3C
Hemos comentado que el estándar CSS es definido por el consorcio internacional W3C. El W3C ofrece algunos servicios de interés a través de internet, como la posibilidad de consultar la documentación oficial relacionada con CSS, una web divulgativa y con ejemplos sobre la aplicación de CSS en la práctica y la validación (comprobación de cumplimiento del estándar) CSS de páginas web.
DOCUMENTACIÓN OFICIAL CSS
La web oficial del consorcio W3C es http://www.w3.org/. A través de esta web podemos acceder a distintos contenidos del trabajo de la W3C, que no solo tratan sobre CSS, sino en general sobre las tecnologías relacionadas con el desarrollo web como HTML, CSS, Javascript, gráficos, audio y video en entornos web, protocolos, etc.
Desde la página principal de W3C podemos navegar hasta llegar a la página oficial CSS (cuya URL será similar a esta: http://www.w3.org/Style/CSS/) donde podremos encontrar numerosa información sobre CSS (en inglés). Dentro de esta información están disponibles las especificaciones oficiales CSS, por ejemplo en http://www.w3.org/TR/selectors/ podemos consultar la especificación oficial de selectores para CSS. El principal problema de recurrir a la documentación oficial para el aprendizaje es que resulta demasiado extensa y demasiado técnica. También existen numerosos documentos técnicos, algunos de los cuales son recomendaciones, otros pre-recomendaciones (se denominan candidatos a recomendación) y otros borradores. Este exceso de información y su forma de presentación resulta poco útil de cara a adquirir una formación práctica y básica sobre CSS. No obstante, conviene conocer su existencia porque puede ser necesaria su consulta en algún momento.
RECURSOS DIDÁCTICOS SOBRE CSS
Indicado ya que la documentación oficial CSS puede ser demasiado árida o extensa, ¿qué recursos existen que sean más didácticos y educativos? Existen numerosas alternativas.
En primer lugar señalaremos la página web http://www.w3schools.com/. Esta plataforma alberga tutoriales y documentación sobre numerosas tecnologías relacionadas con el desarrollo web como HTML, CSS, Javascript, AJAX, PHP, SQL y muchas otras. Contrariamente a lo que pueda parecer, esta web pertenece a una empresa privada y no está en absoluto relacionada con el consorcio W3C. La similitud del nombre de dominio resulta, cuando menos, confusa. Tampoco hay indicaciones explícitas en la plataforma de la no-relación con el W3C. Los resultados de w3schools suelen aparecer en los primeros lugares cuando se hacen consultas en buscadores, de ahí que muchos usuarios o profesionales relacionados con internet piensen que w3schools es un servicio de W3C, cuando la realidad es que no es así. Debido a estos hechos y a otros aspectos negativos que se pueden achacar a w3schools han surgido voces críticas que recomiendan no usar esta web, entre los que podemos destacar http://www.w3fools.com/.
Nosotros no recomendamos el uso de w3schools, pero tampoco lo desaconsejamos. Simplemente pensamos que debe conocerse qué es y cuáles son sus ventajas e inconvenientes. Como ventajas señalaremos estas:
- Se trata de una plataforma web con una buena estructuración de los contenidos y una buena presentación.
- Tiene un sistema de contenidos, ejemplos y pruebas basadas en la edición de código on-line que en general resultan bastante didácticos y facilitan el aprendizaje.
- Es accesible gratuitamente.
Como inconvenientes señaleremos los siguientes:
- Parecen aprovecharse de la confusión y similitud de nombre con el W3C, aparentando ofrecer información oficial cuando no la es.
- Ofrecen cursos y certificados previo pago que no están avalados por organismos o empresas con garantías suficientes. Su publicidad puede resultar engañosa.
- En general se trata de webs bastante cargadas de publicidad que se entremezcla con los contenidos, llegando a resultar molesta.
- Parte de la información que ofrece esta web puede ser no correcta o estar no actualizada.
La mayor parte de los desarrolladores web o diseñadores web han utilizado en algún momento w3schools. Nosotros simplemente te aconsejamos que si la usas, conozcas qué es, sus ventajas e inconvenientes.
A continuación vamos a ofrecer un listado con recursos didácticos sobre CSS:
|
Recurso |
URL |
|
Tutorial CSS de aprenderaprogramar.com |
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203 |
|
Documentación CSS de Mozilla |
https://developer.mozilla.org/en-US/docs/Web/CSS |
|
Wiki de la W3C para CSS |
http://www.w3.org/wiki/CSS |
|
Documentación CSS de webplatform |
http://docs.webplatform.org/wiki/css |
|
Documentación CSS de sitepoint |
http://reference.sitepoint.com/css |
|
Documentación CSS de w3schools |
http://www.w3schools.com/css/ |
Nuestra recomendación es que para el aprendizaje inicial de CSS uses un solo curso y trates de seguirlo de forma completa y hasta el final, consultando otras fuentes sólo para cuestiones puntuales. Si tratas de adquirir una formación básica recurriendo a varias fuentes de información al mismo tiempo es posible que acabes perdiendo el tiempo y haciéndote un lío. Una vez tengas las bases de CSS y algo de experiencia, será más fácil moverte consultando la multitud de recursos e información que existen en libros, revistas y páginas web.
VALIDACIÓN CSS CON W3C VALIDATOR
Hay un servicio de la W3C que puede resultar de relativo interés: el W3C CSS validator o validador CSS de la W3C. Se accede a través de w3.org escogiendo la opción validators: CSS. También se puede acceder directamente en la URL http://jigsaw.w3.org/css-validator/
Una vez en la página con el formulario de entrada, basta introducir una URL para que el contenido de esa página web sea sometido a análisis y aparezcan los resultados del mismo. Si el CSS de la web cumple con la especificación oficial aparece un mensaje informativo y se nos ofrece la posibilidad de insertar los logos de validación W3C en nuestra página web.
En caso de que la página web no cumpla la especificación, se nos indican cuántas faltas se han encontrado y cuáles son. Las faltas se dividen en faltas menores (warnings o advertencias) y faltas mayores o errores.
El servicio de validación CSS puede ser una herramienta útil para personas que están aprendiendo y para profesionales, al permitirles identificar en qué partes de su código no están cumpliendo con la especificación oficial. No obstante, te recomendamos que no pierdas demasiado tiempo tratando de que la página web que estés creando tenga cero errores por un motivo simple: no tener errores en el validador no garantiza que tu web se vaya a visualizar correctamente. Muchas personas pierden horas tratando de corregir el código para pasar la validación W3C cuando su web no tenía ningún problema de visualización. Entonces, ¿para qué perder el tiempo en ello? Sí, siempre es “bonito” pasar limpiamente un validador, la cuestión que debemos tener en mente es si merece la pena el tiempo que vayamos a invertir.
A modo de curiosidad, piensa en algunas páginas web importantes que conozcas (por ejemplo de algún diario, alguna televisión, alguna empresa importante) y pásale el validador CSS de W3C. Encontrarás que muchas de ellas no superan la validación, y sin embargo son webs de prestigio y con millones de visitas. Si estas grandes webs no se preocupan de tener una validación W3C perfecta ¿merece la pena obsesionarse con no tener errores de validación CSS en nuestras páginas web? A modo de curiosidad te diremos que en el momento de escribir este curso hemos pasado el validador CSS a facebook.com y hemos obtenido como resultado 24 errores. En la web oficial del gobierno de Estados Unidos, 102 errores, y así podríamos continuar una larga lista de webs importantes que no superan la validación. Pero repetimos: lo importante no es superar la validación, lo importante es que la web funcione y se vea correctamente.
Sobre los logos del W3C de validación, su presencia en una página web no asegura que la página web pase el validador, ya que se trata de simples imágenes que cualquiera podría insertar en su web. La forma de saber si una web cumple la validación es pasar su URL por el validador CSS de la W3C.
EJERCICIO
Crea un documento HTML que conste de los siguientes elementos: un título h1 con el texto “Aprendizaje de la programación”. Una división div con id menú que contenga: un título h2 con el texto “Menú” y una lista de elementos ordenados (ol) con los siguientes items: Programación básica, Programación intermedia y Programación avanzada. Finalmente, una división div con id footer con el texto “Curso aprenderaprogramar.com”. Establece diferentes valores de las propiedades color, background-color y font-size para:
a) Los elementos h1
b) Los elementos h2
c) Los elementos ol y partes internas a este (elementos li de listas).
d) El elemento con id footer.
A continuación utiliza el W3C validator y comprueba si no te indica ningún error, o qué errores o warnings te indica y trata de identificar el por qué de ellos y corregirlos. Puedes comprobar si tus respuestas son correctas consultando en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
