Tutorial: Introducción al XHTML y CSS

Bueno, más que "introducción" os dejo en un entorno de referencia sobre este tema, por si queréis modificar vuestros blogs, añadir funcionalidad o simplemente hacerlo más ameno. Al final no os lo dejaré tan masticado, pues cada blog es un mundo y escribir algo tan denso en un simple post, "apastela" hasta al más animado. Quizá lo lógico sería deciros que mantendréis un concepto más claro que el inicial (o eso espero), empezar a moverse (para los principiantes y los que no, mejor repasar ;-D), y tener una referencia sobre lo que se está haciendo y poder consultar.

Os aconsejo por otro lado, no llenarlo de "tonterías", ya que para mi cualquier página con demasiado contenido no muy organizado o con demasiadas "florituras" es un candidato para "la papelera"; asi lo digo yo como cualquiera que pudiese visitar vuestro sitio, creo que sería la primera sensación que tendría, pese a verlo tan sofisticado inicialmente. Aunque si tiene cierta utilidad (pese a ser recargado) lo que os pretendáis montar, pues adelante. Sed críticos con vosotros mismos.

Para empezar, estaría bien entrar en materia comentando brevemente la base de todo este meollo. Por lo general y en el caso concreto de Blogger está altamente concentrado en la modificación de su plantilla, refiriendome a su centro de edición, que está basada en XHTML. Lo ideal sería ver esta plantilla en un código identado y los programadores que leáis esto, sabéis a que me refiero, ya que la estructura de lo escrito es crucial para la localización de cierta parte del código a editar o modificar. Si lo deseáis podéis copiar la de este blog, que tan cuidadosamente he adaptado. ¡OJO! no os vayáis a quedar con una apariencia réplica de esta y tengáis las mismas opciones que esta ;-). Si bien os aconsejo buscar las partes que os interese adaptar.

Bueno, XHTML es un estándar (al igual que el HTML) que pretende conseguir que todos los documentos web sean compatibles en cualquier navegador (no solamente en ordenadores, sino también en cualquier dispositivo). A su vez es te (el XHTML) es una "reformulación del estándar HTML 4", con el que es compatible al 100%.

Por otro lado, CSS son las siglas de "Cascade Style Sheet", y especifica la forma del diseño de los documentos (tanto XHTML como HTML). Una misma página web (un mismo documento XHTML, por ejemplo) puede ser vista de diferente forma en un PC que un PDA, gracias a diferentes hojas de estilo CSS, dados los formatos de pantalla y capacidades de cada uno estos.

Usar ambos (XHTML y CSS) combinados, mejora altamente el rendimiento del diseño web. Para adentraros en lo que al formato HTLM en si se refiere, os aconsejo los siguientes tutoriales (no hechos por mi claro está), antes de adentraros en el diseño en si bajo las características CSS. Os ayudarán a adentraros no en la programación en si, ya que HTML no se considera programación sino diseño de estructuras. De esta manera al ver las etiquetas de un código HTML, no os perdáis. Le he hechado un buen ojo a estos tutorial es escritos en un lenguaje muy accesible y sin enrollarse demasiado, sobre los conceptos a tratar y lo encuentro bastante bueno para principiantes. No son enlaces directos, pues asi lo prefieren sus legítimos autores. No obstante en la página en la que os hago la referencia tendréis la descarga en pdf, a la vista ;-).

• Belén Albeza (XHTML+CSS Alfa 3)
  
• Daniel Clemente (HTML Correcto)
• W3C (Comenzando con HTML+CSS)
  

Estos enlaces que os he dejado, son bastante interesantes y he procurado buscar los más escuetos y a la vez lo más funcional posible, explicando lo justo y necesario. Por otro lado podríamos tener una mejor ayuda cuando ya estemos "en la onda" con un enlace que os dejo a continuación. Una especie de ayuda interactiva sobre cualquier tag o característica de CSS, en la que tras escribir la duda, nos ofrece todo su abanico de valores y posibilidades de parametros para andar más finos en el diseño en la web de W3Schools que además nos ofrece muchos más tutoriales, aunque en inglés, espero os sirva de ayuda o consulta. Con el ejemplo de comentarios de HTML os dejo el enlace para ojear los tags de HTML y este índice CSS de propiedades para los estilos de CSS, agrupados por el tipo al que dar formato.

Espero que todo lo que os he expuesto, os sirva de ayuda y/o apoyo. Un saludo.

P.D.: No obstante, me pesa en el fondo sobre aquellos que pretenden realizar alguna mejora a su web / blog y no tienen ni idea, con lo que no tendría ningún reparo en hecharle alguna mano ;-). Para cualquier consulta, mi dirección de correo, se encuentra visible bajo mi perfil, en el blog.

Actualización: Se me quedó en el tintero, que para el diseño web en general o el blog hosteado fuera de Blogger (via ftp) se podría realizar perfectamente bajo herramientas de diseño visual, las cuales estaban al margen de este post.