1. Introducción al currículo de estándares web/contenidos

Chris Mills. 8 de julio del 2008. Publicado en: currículum, principiante, web, estándares, curso

Tengo un sueño desde hace tiempo. Los últimos 8 o 9 años, mi trabajo se ha centrado mucho en la enseñanza, ya sea encargando y editando publicaciones técnicas con el fin de ayudar a los demás a crear algo interesante con la tecnología, formando nuevos empleados en las diferentes empresas para las que he trabajado o editando y redactando artículos de seminarios para ayudar a los demás a utilizar el software Opera. También me entusiasma la web y creo firmemente en los estándares web abiertos. Quería contribuir a hacer que la web fuera un lugar mejor y creo que esto vuelve a tener que ver con la enseñanza, ya sea enseñando a los demás cómo colaborar y tener más respeto mutuo o enseñándoles cómo hacer que sus sitios web funcionen en todas las plataformas y dispositivos, y sean accesibles para personas discapacitadas. Los estándares web son la clave para el último objetivo, así que decidí invertir mi tiempo y energía en algo que les ayudara a mejorar la adopción de estándares en la web actualmente y en el futuro. Le he dado vueltas durante un tiempo, pero finalmente ha dado sus frutos con Opera: agradezco mucho a mis estupendos jefes que me hayan pagado para hacerlo. Uno de mis sueños se ha hecho realidad finalmente.

Así pues, en este artículo os presentaré el resultado de una gran cantidad de trabajo en los últimos meses (mía y de muchas otras personas): el currículo de estándares web, un curso diseñado para dar a todo el mundo una buena base en diseño/desarrollo web, sea cual sea el destinatario, cuyo uso es completamente gratuito, accesible y no requiere conocimientos previos. Como destinatarios pienso fundamentalmente en las universidades, porque creo que de alguna manera los estándares de enseñanza de los estándares web son muy deficientes en muchas de ellas. He oído rumores de alumnos a los que se les ha bajado la nota por utilizar estándares web en sus trabajos porque los esquemas de puntuación son muy anticuados; también he oído decir que hay empresarios que se desesperan porque, cuando entrevistan a graduados universitarios para puestos relacionados con la web, ven que los graduados realmente no tienen ni idea sobre desarrollo web en el mundo real. Si estáis en una universidad progresista que sí que enseña estándares web de manera razonable, me quito el sombrero: ¡poneos en contacto conmigo!

En este apartado trataremos lo siguiente:

• ¿Por qué son necesarios los estándares web? En este apartado trataremos brevemente las ventajas de utilizar estándares web, por qué no se adoptan como se debería hacer y cómo este curso pretende abordar estos temas.

• Cómo está estructurado el curso. Lo que su nombre indica. Esta sección también habla sobre cómo deberían pensar los educadores a la hora de presentar el material para utilizarlo de manera eficaz en los cursos.

• ¿Quién debería hacer este curso? Cuando digo "todo el mundo", ¿qué quiero decir exactamente?

• Contenidos. Pasad directamente a este subapartado si os cansáis de mi palabrería y queréis ir directamente al aprendizaje.

• Agradecimientos.

1.1. ¿Por qué son necesarios los estándares web?

Los principales motivos por los que la adopción de estándares web en su tarea de diseño/desarrollo web es una idea tan buena se amplían en el artículo 4, pero los trataremos brevemente aquí como presentación. El uso de estándares web ofrece las siguientes ventajas:

1. Eficiencia del código: como aprenderéis a lo largo del curso, gran parte de las mejores prácticas en el uso de estándares web se basan en la reutilización del código: en el hecho de que se pueda separar el contenido HTML de la información de estilo (CSS) y de comportamiento (JavaScript), lo que permite mantener un tamaño reducido de los ficheros y escribir el código sólo una vez y, más adelante, reutilizarlo siempre que sea necesario.

2. Facilidad de mantenimiento: esto está estrechamente relacionado con el último punto; si se puede escribir el código HTML sólo una vez y después aplicar los estilos y el comportamiento siempre que sea necesario utilizando clases y funciones, si se necesita cambiar algún elemento más adelante, se puede hacer el cambio sólo en un lugar y que se traslade a todo el sitio web, sin tener que especificar este cambio cada vez que sea necesario.

3. Accesibilidad: los dos puntos siguientes están muy relacionados; uno de los grandes problemas de la web es hacer que los sitios web sean accesibles para todo el mundo, independientemente de quien sea, independientemente de su circunstancia. Esto incluye hacer que los sitios web sean utilizables por personas con discapacidades como ceguera o problemas de visión y problemas motores (es decir, personas con limitación de movimientos y que es posible que no puedan usar adecuadamente las manos, o nada en absoluto). Mediante el uso de estándares web y buenas prácticas, se puede conseguir que los sitios web sean utilizables para este grupo de público de la web tan importante sin que haya que hacer ningún esfuerzo adicional.

4. Compatibilidad de dispositivos: con esto nos referimos al hecho de garantizar que sus sitios web funcionarán no sólo en diferentes plataformas –es decir, Windows, Mac, Linux–, sino también con dispositivos de navegación alternativos, como los que hoy día pueden incluir los teléfonos móviles, televisores y consolas de juegos. Estos dispositivos tienen limitaciones como el tamaño de pantalla, la potencia de procesamiento, los mecanismos de control disponibles y otros, pero una vez más la buena noticia es que, utilizando estándares web y las mejores prácticas, está garantizado que los sitios web funcionarán en la mayor parte de estos dispositivos. Hay más teléfonos móviles en el mundo que ordenadores, muchos de los cuales son compatibles con Internet, de manera que ¿os podéis permitir vosotros o vuestros clientes perderos este mercado? Para más información sobre desarrollo web para móviles, podéis consultar algunos de los artículos relacionados en <dev.opera.com>.

5. Arañas web y motores de búsqueda: con esto nos referimos a lo que se denomina "optimización de motores de búsqueda", la práctica de hacer que los sitios web sean tan visibles como sea posible para los llamados buscadores web que rastrean la web e indexan sitios web, y, por lo tanto, ofrecen mejores posiciones de busca en sitios como Google. Existe toda una ciencia detrás (podéis ver los artículos sobre la optimización de motores de búsqueda como Intelligent site structure for better SEO! y Semantic HTML and Search Engine Optimization), sin embargo, una vez más, sólo utilizando los estándares web ya conseguiréis que vuestro sitio sea más visible en Google, Yahoo!, etc., lo cual es bueno para los negocios.

No obstante, a pesar de estas ventajas, la mayor parte de los sitios no siguen los estándares web y muchos desarrolladores web actualmente todavía utilizan prácticas incorrectas y obsoletas. "¿Por qué?", os preguntaréis. Hay una serie de motivos para ello: algunos dirán que es por falta de formación, por políticas de empresa, por que no hay que aprender estándares si se les paga de todos modos, que son muy difíciles de aprender, que hay poca compatibilidad de los estándares en los navegadores web, etc. Examinemos con más detalle algunos de estos conceptos y, a continuación, veamos los argumentos contrarios para deshacernos de cualquier excusa que nos impida adoptar o aprender los estándares.

1. Falta de formación: esto es un problema, pero es uno de los motivos principales por los que se ha creado este curso. Muchas universidades no enseñan los estándares web en sus cursos relacionados con la web y muchos planes de estudios tienden a incluir prácticas obsoletas, muy difíciles de cambiar a causa de la burocracia. Los libros y cursos de formación tienden a ser caros. Pero, un momento. Ahora hemos ofrecido un curso que es gratuito y estamos yendo por las universidades, etc., para ayudarles a hacer estos cambios, de manera que realmente no hay excusa posible en este caso.

2. Políticas de empresa: no cabe duda de que algunas empresas/instituciones todavía tienen sitios web realmente anticuados y obsoletos. Puede que tengan políticas que obliguen a sus empleados a utilizar navegadores obsoletos, pero la situación está mejorando y ahora que hay un curso gratuito disponible para saber fácilmente cómo hacer cambios, las cosas deberían mejorar aún más. La actualización de un sitio web a los estándares modernos anima a las empresas a actualizar los navegadores que utilizan porque los sitios no se verán bien en navegadores obsoletos (aunque todavía deberían funcionar en navegadores antiguos). Las empresas también deberían animar a sus clientes a actualizarse. También existe un razonamiento empresarial sólido: los sitios que utilizan estándares web, como se ha explicado anteriormente, obtendrán mejores resultados en los motores de búsqueda y serán accesibles para personas con discapacidades y usuarios de dispositivos alternativos. ¿Se pueden permitir las empresas ignorar a este público?

3. "No necesito aprenderlos": sabemos que algunos desarrolladores aún dicen: "Pero si estoy utilizando prácticas obsoletas y aún me pagan, ¿por qué me debo preocupar de estas cosas nuevas?". Como se ha dicho antes, hace que el código sea más eficiente, más fácil de escribir y más fácil de mantener. Además, permite escribir un código moderno que es accesible y utilizable en dispositivos alternativos. ¿Es o no interesante? También hará que vuestro conjunto de habilidades sea a prueba de contingencias futuras y lo hará capaz de ganar más. En la actualidad, hay muchas empresas que piden saber utilizar los estándares web.

4. "Cuesta demasiado de aprender": tonterías. Después de digerir parte de este curso, veréis qué fácil es entender los conceptos básicos del uso de estándares web, tanto si sois nuevos en el desarrollo/diseño web como si ya conocéis el tema y estáis actualizando vuestro conjunto de capacidades. Es tan difícil como utilizar los métodos anticuados y desfasados, lo que no es nada difícil, y, a pesar de todo, aporta muchas ventajas en comparación con los métodos antiguos.

5. Compatibilidad de los estándares en los navegadores: antes, la compatibilidad de los estándares en los navegadores web solía diferir mucho y esto hacía que conseguir que un sitio web funcionara en diferentes navegadores fuera todo un dolor de cabeza. Pero actualmente esto ya ha pasado y los navegadores actuales tienen todos una compatibilidad correcta con los estándares web. En ocasiones aún se necesita compatibilidad con navegadores antiguos que no disponen de una compatibilidad tan buena, pero mediante el uso de las mejores prácticas actuales podéis garantizar que los usuarios de estos navegadores sigan teniendo una experiencia de usuario razonable.

Así pues, como se puede ver, realmente no hay excusa para no adoptar los estándares web en su tarea de desarrollo web. Como mínimo, si hacéis este curso desde el punto de vista de un principiante, empezaréis con buen pie y aprenderéis las mejores prácticas desde el comienzo en lugar de haber aprendido prácticas incorrectas.

1.2. Estructura del curso

El curso se compone de varios artículos, de los que habrá más de 50 cuando se haya acabado el curso básico, cada uno de ellos con miles de palabras. Cada artículo trata sobre un microtema específico y, en caso necesario, incluye antecedentes sobre el tema, teoría esencial, ejemplos prácticos y guías paso a paso, además de preguntas de repaso para comprobar los conocimientos adquiridos.

Además, en el futuro ofreceremos un programa de aprendizaje entero paso a paso, que repasará todo el proceso de construcción de un sitio web de principio a fin.

Una manera lógica de impartir el curso es calcular en cuántas lecciones se puede enseñar y dividirlas por el número de artículos. Para cada lección, debéis hacer que los alumnos lean los artículos relacionados con la lección mencionada antes de que se imparta. A continuación, podéis repasar ejemplos prácticos durante la lección y hacer que los alumnos respondan a las preguntas de repaso después de cada lección. Lógicamente, creo que una hora debería ser tiempo suficiente para repasar los conceptos contenidos en cada artículo, siempre que los alumnos lean cada artículo antes de impartir las lecciones. En este curso hay unas 50 horas de tiempo de clase y 50 horas de lectura preliminar.

Naturalmente, hay que tener en cuenta la cantidad de tiempo que se tarda en impartir el curso y qué se debe cubrir exactamente en cada lección, pero la experiencia es la clave.

1.3. ¿Quién debería seguir este curso?

Se trata de un curso de estándares web que consta de varios artículos, dirigido a prácticamente todo el mundo que quiera aprender diseño web basado en estándares desde cero. La finalidad es que el lector pase de tener una mera familiaridad básica con la navegación a la web a ser competente en CSS y HTML y a tener conocimientos básicos de JavaScript y cómo encaja en el rompecabezas. Deberéis dar bastantes conocimientos para que se pueda empezar a pensar en entrar en el mercado laboral con confianza (naturalmente, la experiencia no se puede enseñar).

¿A quién va dirigido? Queremos que lo pueda hacer cualquier persona que desee aprender diseño web "de la manera correcta":

1. Estudiantes y profesores universitarios: ya lo hemos comentado anteriormente, se trata de un conjunto ideal de artículos a partir del que se puede crear un curso propio para impartirlo a los estudiantes o utilizar parte de los artículos para completar otro curso. Si sois alumnos que ya estáis estudiando algún curso relacionado con la web, deberíais utilizar este material para completar vuestros conocimientos y presionar a vuestros profesores para que también lo puedan tener en cuenta. Recomendaría también a todos los profesores y conferenciantes que echen un vistazo a este material para asegurarse de que las técnicas cubiertas en sus cursos son buenas prácticas actuales.

2. Alumnos en edad preuniversitaria o universitaria: aunque este curso se ha concebido principalmente para adultos, también se podría impartir perfectamente a alumnos más jóvenes; es cuestión de intentarlo y ver cómo funciona.

3. Diseñadores y desarrolladores web existentes: hay muchos desarrolladores y diseñadores web en el mercado que no están utilizando los estándares web y las mejores prácticas, o que podrían utilizar una referencia fácilmente accesible para consultar dudas o utilizarlos para repasar sus conocimientos. A los primeros, les recomiendo que le den una oportunidad a este curso y vean lo fácil que es y lo valioso que resulta adoptar los estándares web. Para los últimos, estoy seguro de que encontrarán este curso de utilidad para ayudar a los demás, para repasar sus conocimientos, consultar hechos difíciles de recordar y encontrar argumentos para intentar convencer a jefes y clientes de que cosas como la accesibilidad son muy útiles.

4. Educadores en empresas: se trata de una manera ideal de proporcionar una formación nada cara a los empleados.

5. Otras personas: si sois personas a quienes simplemente les apetece aprender algo sobre diseño y desarrollo web, entonces, una vez más, ésta es una manera nada cara de contar con un poco de ayuda para vuestro objetivo.

No espero que la gente pague para utilizar este curso. Se publica con una licencia de Creative Commons, de modo que está disponible libremente para cualquiera que quiera utilizarlo mientras nos dé el reconocimiento adecuado.

1.4. Contenidos

Hay que tener en cuenta que se han publicado los primeros 39 artículos del currículo y que se publicarán aproximadamente 10 más tan pronto como sea posible para completar el curso.

Inicio

• 1. Material de introducción, por Chris Mills (es lo que habéis leído hasta ahora). [versión original en inglés]

HAY TRADUCCIONES DISPONIBLES. Hay traducciones disponibles del currículo de estándares web.

Introducción al mundo de los estándares web

• 2. La historia de Internet y la web y la evolución de los estándares web
• 3. ¿Cómo funciona Internet?
• 4. El modelo de estándares web: HTML, CSS y JavaScript
• 5. Estándares web: un bonito sueño, pero ¿cuál es la realidad?

Conceptos de diseño web

Esta sección no entrará en detalles de códigos o etiquetado, y servirá de introducción al proceso de diseño para más tarde pasar a empezar a crear gráficos, código y presentará conceptos de AI, navegación, usabilidad, etc.

• 6. Arquitectura de la información: planificación de una web
• 7. ¿Qué necesita una buena página web?
• 8. Teoría del color
• 9. Construcción del esqueleto de una página web
• 10. Combinaciones de color y modelos de diseño
• 11. La tipografía en la Web

Fundamentos de HTML

• 12. Conceptos básicos de HTML
• 13. El elemento <head> del HTML
• 14. Elegir el doctype correcto para los documentos HTML

El texto central de HTML

• 15. Etiquetar contenido textual en HTML
• 16. Listas HTML
• 17. Imágenes en HTML
• 18. Enlaces HTML: ¡construimos una web!
• 19. Tablas HTML
• 20. Formularios HTML: conceptos básicos
• 21. Elementos semánticos menos conocidos
• 22. Contenedores genéricos: los elementos div y span
• 23. Creación de múltiples páginas con menús de navegación
• 24. Validar el HTML

Accesibilidad

• 25. Conceptos básicos de accesibilidad
• 26. Pruebas de accesibilidad

CSS

• 27. Conceptos básicos de CSS
• 28. Herencia y cascada
• 29. Creación de estilos de texto con CSS
• 30. El modelo de composición de CSS: cajas, bordes, márgenes, relleno
• 31. Imágenes de fondo en CSS
• 32. Estilos de listas y enlaces
• 33. Estilos de las tablas
• 34. Diseño, composición y presentación de formularios con CSS
• 35. Elementos flotantes y clearing
• 36. Posicionamiento estático y relativo con CSS
• 37. Posicionamiento absoluto y fijo con CSS

Encabezamientos, pies, columnas y plantillas

• 38. Encabezamientos, pies, columnas y plantillas

Agradecimientos

Son tantas las personas que me han ayudado a crear este curso que es imposible mencionarlas con detalle, pero creo no haberme olvidado de nadie. Todas son grandes personas, de modo que no las perdáis de vista, id a sus charlas, comprad sus libros, leed sus blogs o haced cualquier otra cosa para apoyarlas. Os doy a todos las gracias y os expreso mi admiración.

1. Los autores: muchas gracias a Ben Buchanan, Tom Hughes-Croucher, Mark Norman "Norm" Francis, Linda Goin, Paul Haine, Jen Hanen, Benjamin Hawkes-Lewis, Ben Henick, Christian Heilmann, Roger Johansson, Peter-Paul Koch, Jonathan Lane, Tommy Olsson, Nicole Sullivan y Mike West. Sin vosotros, este curso no sería nada, literalmente.

2. El equipo de Opera: agradezco mucho a Jan Standal, David Storey, al resto de mi equipo y a toda la gente de Opera que creyeran en esta idea y me ayudaran a desarrollar el plan.

3. Las organizaciones: gracias a todos los de Yahoo! (a los autores, y a Sophie Major por su ayuda en la organización y promoción), a WaSP (especialmente a Gareth Rushgrove, Stephanie Troeth y Aarron Walter), a Britpack, a la gente de Geekup y a todas las universidades que mostraron interés por este curso y por contribuir a su desarrollo.

4. Las personas: muchas gracias a estas personas maravillosas: Craig Saila, Sara Dodd, John Allsopp, Roan Lavery, Bruce Lawson, Alan White. Mis disculpas si me he dejado a alguien.

5. Los lectores: agradezco especialmente a todos los lectores su interés en la creación de páginas web de la manera correcta y también el hecho de tomarse la molestia de leer este curso.

Sobre los autores...

Ben Buchanan

Mark Norman Francis

Linda Goin

Paul Haine

Jenifer Hanen

Benjamin Hawkes-Lewis

Ben Henick

Christian Heilmann

Tom Hughes-Croucher

Roger Johansson

Jonathan Lane

Chris Mills

Tommy Olsson

Nicole Sullivan

Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada.

: :