Hay un gran problema con la Web 2.0 y es que para entenderla debemos alejarnos tanto de la tecnología y los conceptos técnicos y hablar tanto de conceptos, actitudes y metodologías que sentimos mas que estamos en las ciencias sociales que en las tecnologícas.

La Web nació de la mano de Tim Berners-Lee el inventor del hipertexto y en su comienzo solo eran textos e imagenes "colgadas" o "subidas" a una computadora conectada a la red todo el dia para que le gente pudiera entrar en ella en cualquier momento, a estas computadoras se las llama servidores. Para modificar su contenido se debía acceder a esa computadora y reemplazarlo manualmente. La web comenzó a popularisarse, nunca habia habido en la historia de la humanidad algo similar para acceder a información. El concepto era simple pero poderoso: Podía publicarse información a la vista de cualquiera que tuviera una computadora y una línea telefónica. Las empresas comenzaron a interesarse en acceder a este sistema y comenzaron a abrirse muchas posibilidades. Fue el momento de las .com, a las empresas les bastaba con agregar una "e-" al principio o un ".com" al final de sus nombres para cotizar mejor en bolsa, fue el gran furor de la tecnolgía de la comunicación, la sensación de algo nuevo y poderoso que se salía de las manos... y de hecho se salió, esa burbuja especular reventó a finales del 2001 generando una crisis económica en las empresas de Tecnología de la información y luego propagándose a otros ambientes. El problema de las modas es justamente que nadie sabe que está pasando pero todos estamos emocionados.

Esa etapa en la vida de la web se la llamó Web 1.0

Paralelamente a esto, comenzaban a surgir tecnologías del tipo aplicaciones server-side, es decir, programas que funcionaban en las computadoras que alojan las páginas webs e interactúan con ellas. Además comenzaban a aparecer los estándares XHTML, CSS, Javascript, que permitian una web mas rica, funcional y bonita. Estas tecnologías en conjunto permitían que los usuarios participaran con la web, enviando datos ellos mismos, y las tecnologías server-side modificaban el contenido de las páginas.

Solo deténgase a pensar un momento... piénselo detenidamente... las posibilidades que esto ofrece. ¿Por que decimos que la Web 2.0 es un concepto? Por que los medios los tenemos y cada dia tenemos mas, nuestro único límite es la creatividad sobre como usarlo: una colección de información que no tiene límite en cuanto al tamaño que puede alcanzar, miles de millones de editores, redactores, contribuidores... la biblioteca de Alejandría multiplicada por muchísimo, infinitas posibilidades de interacción, la posibilidad de enviar información a cualquier lugar del planeta en instantes, saber que jamás perderás el contacto con nadie gracias al email y las redes sociales, obtener la información que necesitas y cuando la necesitas gracias a la internet movil, mapas a escala real, enciclopedias tan vastas que serían imposibles tenerlas en papel, noticias a tiempo real, a minutos de que sucedan los hechos, comunidades enteras tomando decisiones a travez de internet, compañeros de trabajo que jamás se han visto las caras por que trabajan desde sus casas en polos opuestos del mundo, estar en contacto con quien quieras cuando quieras todo el tiempo, poder mostrarle a literalmente todo el mundo tu empresa por mas pequeña que sea. No es el futuro. Es el presente. Esto es la Web 2.0.

Introducción
En este curso y tutorial de maquetación vamos a aprender en forma intensiva a armar la estructura visual de un sitio web. Para hacerlo se requieren ganas de aprender y conocimientos básicos de informática en Windows (Instalar un programa, usar el bloc de notas, el explorador de windows, etc). Intentaremos evitar conceptos y palabras demasiado técnicas al principio y abusaremos un poco de la metáfora y el lenguaje coloquial.

Un sitio web se compone de una parte de programación (El sistema SiteUp basado en Jaws, en nuestro caso) y un frente visual. Es como si fuera el frente de la casa y el decorado del interior, es lo que se ve cuando la visitas, detrás de ella hay muchísimas cosas que el visitante no ve, cañerías, instalación eléctrica, cimientos que corresponderían a la programación.

XHTML es un lenguaje de con el que pueden armarse estos diseños o estructuras visuales para sitios webs. CSS es un lenguaje que permite definir la estética de un XHTML.
XHTML simplemente dice que cosa es que en una página web.
Vamos a dar unos ejemplos, es la mejor forma de aprender, directo al grano.
Puedes usar el bloc de notas de windows, o si quieres uno un poco mejor te recomendamos notepad++

Comenzando:
Abre un bloc de notas o archivo en notepad++ y comenzamos con la hoja en blanco.
Lo primero que debemos hacer es indicar en el texto que estamos haciendo una página web para que el navegador la entienda cuando la abra.
Comenzamos con algo como esto: (los colores están solo para facilitar la lectura)

No te preocupes mucho por que quiere decir cada palabra del código, lo que importa es que sepas que estamos diciendole al navegador que estamos haciendo un documento de página web.

En XHTML definimos un elemento de la siguiente forma:
<elemento> contenido del elemento </elemento>

Es decir, el nombre del elemento entre signos menor y mayor para comenzar, y luego el nombre del elemento entre signos menor y mayor y una barra (/) para finalizarlo.

En caso de que el elemento no tenga contenido dentro (Por ejemplo, un salto de línea, no tiene nada dentro, es un salto de linea y ya está). Se pone la barra antes del signo mayor.

De forma que ahora pondremos cosas dentro del elemento <html>. A los textos entre signos mayor y menor los llamaremos etiquetas o tags.

Dentro del elemento <html> van dos elementos mas: <head> y <body> . En <head> van datos sobre la página y en <body> el cuerpo de la página propiamente dicha. Luego, cada uno de ellos dos aceptan elementos distintos dentro.

Por ejemplo:

Puedes probar el código con el Espacio de Pruebas. Modifica el código como quieras agregando y quitando párrafos, subrayados, negritas, cursivas, etc, y sigue probando diferentes formas hasta comprender la estructura del XHTML. En el próximo capítulo pondremos un poco de color a los elementos. Para verlo en una página hecha por ti mismo, pon este código o uno que hayas hecho en un bloc de notas o notepad++, guardalo con extensión .html y luego ábrelo con el navegador o hazle doble click.

Nota: Es recomendable haber leido o entender lo publicado en el artículo Tutorial: ¿Que es XHTML? para leer este otro.

En el capítulo pasado pudimos aprender a utilizar XHTML y algunas de sus etiquetas. Hoy vamos aprender la base de las hojas de estilo. Una de las cosas pendientes que teníamos era poner información en la etiqueta asi que retomaremos por ese lado.

Como habíamos dicho en la etiqueta ponemos información extra que no es parte del cuerpo de la página. Por ejemplo para que la barra del navegador muestre el título de nuestra página debemos poner un tag <title>

Haz la prueba en un archivo html en tu propia pc y prueba abrirlo con el navegador, tal como vimos la clase pasada.

Ahora vamos a identificar elementos dentro del html. Podemos hacerlo de dos maneras, poniendo un identificador o una clase. Lo correcto seria que no hubiera dos elementos con el mismo identificador en la misma página, para no confundir, pero si pueden haber varios elementos de la misma clase. Podemos poner identificadores y clases de la siguiente forma:

Aquí estamos diciendo que el parrafo tiene identificado "nombre del parrafo" y es de la clase "bonito" y de la clase "oscuro". Podemos separar varias clases con espacios.

Para poner estilos debemos dentro del usar una etiqueta o tag llamado <style>.

Si pruebas este código en el área de pruebas, verás los resultados.

Que estamos diciendo en el <style>? pues las instrucciones de estilo CSS tienen el siguiente formato:
elemento { propiedad:valor ; propiedad:valor ..... }

el elemento es una forma de identificar a lo que queremos poner propiedades y utilizamos el numeral (#) para identificadores, el punto (.) para las clases y simplemente la palabra para el tipo de etiqueta.

Por ejemplo: p#cabecera identificaria a <p id="cabecera"> a mi me identifica </p>

o también: b.rojo en <b class="rojo">a mi me identifica</b> <b>a mi no</b>

Dentro de la identificación del CSS definiremos las propiedades del elemento, si sabes inglés son muy intuitivas:

font-family: La fuente del texto, puede ser Arial, Verdana. Si lleva espacios debe ir entre comillas, por ejemplo "Times new Roman".
text-decoration: Decoraciones del texto, por ejemplo underline (subrayado), line-through (tachado), none (nada).
color: El color de la fuente, puede ser red (rojo), blue, (azul), etc. También puede ser un código hexadecimal como #ff0000; ya veremos mas adelante como generar esos códigos.
font-weight: El "peso" de la letra, por ejemplo bold (negrita) o normal.
Una lista completa de las propiedades CSS puedes encontrarla aqui: http://www.w3schools.com/Css/css_reference.asp (en inglés).

Veamos un ejemplo mas complejo:

Ahora lo mismo con otros estilos:

Ahora sería una buena idea practicar un poco los estilos y experimentar con la lista completa de estilos de W3Schools