Cmo se construyen los sitios web?

Hola a todos y bienvenidos!

Bueno, aqu tenemos el primer captulo de este curso para principiantes que os
va a ensear a disear vuestro propio sitio web!

Vamos a pasar un rato juntos. Todo depender de lo rpido que aprendis. Si

leis el curso con frecuencia y a una velocidad razonable, deberais terminarlo en
una o dos semanas. Pero si necesitis ms tiempo, no os preocupis, lo principal
es que vayis a vuestro propio ritmo y que lo pasis bien.

Os sugiero que empecis con lo ms simple, pero tambin con lo ms importante,

pregunta: cmo funcionan los sitios web?

Cmo funcionan los sitios web?

Cmo funcionan los sitios web?

No, no tengis miedo a hacer preguntas aunque creis que son tontas. Es muy
importante que hablemos un poco sobre esto antes de que nos metamos de lleno
en el diseo web!

Estoy seguro de que visitis sitios web a diario. Para hacer esto ejecutis un
programa que se denomina navegador web haciendo clic en uno de estos iconos
que se muestran en la figura siguiente.

Los navegadores web son programas que

muestran sitios web

Podis visitar cualquier sitio web con un navegador. Aqu, por ejemplo tenemos un
navegador que muestra la famosa pgina web de Wikipedia (ver la figura
siguiente).
Pgina de Wikipedia

Estoy seguro de que estis acostumbrados a usar un navegador web!

Actualmente todo el mundo sabe como navegar en la Red..., pero quin sabe
realmente cmo funciona la Red? Cmo disear sitios web como este?

He odo hablar del HTML y del CSS. Tienen algo que ver con la forma en la que
funcionan los sitios web?
Totalmente!
Existen lenguajes informticos para crear sitios web. Todos los sitios web se
basan en estos lenguajes que son fundamentales actualmente y se usan en todos
los lugares. Son los verdaderos cimientos de la Red. El lenguaje HTML lo invent
Tim Berners-Lee en 1991...

Tim Berners-Lee an sigue de cerca las evoluciones de la Red. El cre el World

Wide Web Consortium(W3C) que define las nuevas versiones de estos lenguajes.
Ms recientemente l tambin cre la World Wide Web Foundationque analiza y
monitoriza las evoluciones de la Red.

Mucha gente confunde errneamente Internet con la Red. Deberas saber que la
Red es parte de Internet.
Internet es, por lo tanto, un gran sistema que incluye entre otras cosas la Red, los
correos electrnicos, los mensajes instantneos, etc.
As que Tim Berners-Lee no invent Internet, sino nicamente la Red.

Los lenguajes HTML y CSS son los cimientos del funcionamiento de todos los
sitios web. Cuando visitis un sitio web con un navegador deberais saber que
detrs de bastidores las ruedas giran para permitir que el sitio web se visualice. El
ordenador se basa en lo que se le explic en HTML y CSS para saber que mostrar
(ver la figura siguiente).
HTML y CSS traducido por el ordenador

El HTML y el CSS son dos lenguajes que tenis que conocer para crear sitios
web. El navegador web traduce entre estos lenguajes de programacin y lo que
veis en la pantalla.
Probablemente os estaris preguntando por qu necesitis conocer dos
lenguajes para crear sitios web? Voy a responder a esto de inmediato!

HTML y CSS: dos lenguajes para crear un sitio web

Para crear un sitio web, tenis que darle instrucciones al ordenador. No basta con
teclear el texto que queris poner en el sitio web (como lo harais en un
procesador de texto como Word, por ejemplo). Tambin tenis que mostrarle
donde poner el texto, insertar las imgenes, crear los enlaces entre las pginas,
etc.

La funcin de HTML y de CSS.

Para explicarle al ordenador lo que queris hacer, tenis que usar un lenguaje que
l entienda. Y es aqu donde la cosa se pone difcil porque tenis que aprender
dos lenguajes!

Por qu se crearon dos lenguajes? No habra bastado con uno?

Probablemente estis pensando que manejar dos lenguajes va a ser doblemente

complicado y va a llevar el doble de tiempo aprenderlos..., pero no es as! Os
puedo asegurar que si hay dos lenguajes se dise as para hacer las cosas ms
fciles. Estaremos lidiando con dos lenguajes que se complementan entre ellos
debido a tienen funciones distintas:

HTML ( HyperText Markup Language (lenguaje de marcas de

hipertexto)): apareci por primera vez en 1991 cuando se lanz la Red.
Su funcin es gestionar y organizar el contenido. Por lo tanto, usaris el
HTML para escribir lo que queris que muestre la pgina: texto, enlaces,
imgenes, etc. Podis decir por ejemplo: Este es el ttulo, este es el
men, aqu est el texto principal de la pgina, aqu est una imagen a
mostrar, etc..
CSS( Cascading Style Sheets (hojas de estilo en cascada)): la funcin
del CSS es gestionar la apariencia del sitio web (trazado,
posicionamiento, diseo, color, tamao del texto, etc.). Este lenguaje se
introdujo para complementar al lenguaje HTML en 1996.

Tambin puede que hayis odo sobre el lenguaje XHTML. Este es una variante
del HTML que es ms rigurosa y por tanto un poco ms complicada de manejar.
En pocas palabras el HTML apareci por primera vez en 1991. A comienzos de
2000, el W3C lanz el XHTML y declar que este representaba el futuro..., pero el
XHTML no tuvo tanto xito como se esperaba. As que se volvi a lo bsico en
2009, el W3C abandon el XHTML y decidi volver al HTML y actualizarlo.
Hay mucha confusin en relacin a estos lenguajes porque son muy parecidos.
Ninguno de ellos es realmente mejor que el otro. Son solo dos formas diferentes
de hacer las cosas. En este curso vamos a trabajar con la ltima versin del HTML
(HTML5) que es ahora el lenguaje del futuro que todo el mundo se anima a usar.

Podis crear bastante bien un sitio web solo con HTML, pero no se va a ver muy
bonito, se mostrar la informacin granulada. Esta es la razn por la que el
lenguaje CSS siempre se usa para complementarlo.
Para daros una idea de esto la figura siguiente muestra como se ve la misma
pgina sin CSS y luego con CSS.

Con o sin
CSS

El HTML define el contenido (como podis ver, no est muy pulido!). El CSS se
usa para colocar el contenido y definir la presentacin: el color, la imagen de
fondo, los mrgenes, el tamao del texto, etc.

Como os podis imaginar el CSS necesita una pgina en HTML para funcionar.
Esta es la razn por la que primero vamos a aprender los fundamentos del HTML
antes de pasar a lidiar con el aspecto decorativo en CSS.
Como resultado vuestras primeras pginas no tendrn un aspecto muy bonito,
pero a quin le importa! Esto no va a durar mucho tiempo.

Las diferentes versiones del HTML y del CSS

Con el paso del tiempo los lenguajes HTML y CSS han cambiado
significativamente. En la primera versin del HTML (HTML 1.0), ni siquiera se
poda mostrar imgenes!
Aqu tenemos un pequeo historial muy breve de los lenguajes para vuestros
conocimiento general...

Versiones del HTML

HTML 1: esta fue la primera versin que cre Tim Berners-Lee en 1991.
HTML 2: la segunda versin del HTML apareci en 1994 y finaliz en
1996 con la publicacin del HTML 3.0. Esta fue la versin que sent las
bases para las versiones futuras del HTML. Las reglas y la operatividad
de esta versin las otorg el W3C (aunque la primera versin la cre un
solo hombre).
HTML 3: apareci en 1996 y esta versin nueva del HTML aadi
muchas posibilidades al lenguaje, como tablas, applets, scripts,
posicionamiento de texto alrededor de las imgenes, etc.
HTML 4: esta es la versin ms comn del HTML (ms especficamente
es HTML 4.01). Apareci por primera vez en 1998 y propuso el uso de
tramas (estas seccionan una pgina web en varias partes), tablas ms
complejas, mejoras en los formularios, etc. Lo ms importante es que
esta versin permiti por primera vez el uso de hojas de estilo, nuestro
famoso CSS!
HTML 5: esta es la ltima versin. An no est muy extendida y llama
mucho la atencin porque proporciona muchas mejoras, como la
capacidad para incluir vdeos fcilmente, un diseo mejorado del
contenido, nuevas funciones para los formularios, etc. Esta es la versin
que vamos a estudiar en detalle.

Versiones del CSS

CSS 1: la primera versin del CSS se us a partir de 1996. Sent las

bases de este lenguaje que permite mostrar las pginas web con
colores, mrgenes, tipos de letra, etc.
CSS 2: apareci en 1999 y luego se complet con la versin CSS 2.1.
Esta versin nueva del CSS aadi numerosas opciones. Ahora
podemos usar con bastante exactitud las tcnicas de colocacin para
mostrar objetos en el lugar que queremos que estn en la pgina.
CSS 3: esta es la ltima versin, esta incluye funciones muy esperadas,
como bordes redondeados, degradado, sombras, etc.

Tened en cuenta que HTML5 y CSS3 no son versiones que el W3C haya
finalizado completamente. Sin embargo, aunque puede que se hagan cambios
menores en estos lenguajes, de verdad os recomiendo que empecis con estas
versiones nuevas hoy. Hacen muchas contribuciones y merecen la pena. Tambin
muchos sitios web profesionales actualmente estn construidos con estas ltimas
versiones.

El editor de texto
Qu software voy a necesitar para construir un sitio web?
Voy a tener que romper la hucha para comprarme un software muy complejo que
voy a tardar meses en entender?

Hay de hecho un gran nmero de programas informticos para el diseo de sitios

web. Pero os puedo asegurar que no vais a necesitar pagar ni un duro por ellos.
Por qu pagar por un software informtico complicado cuando ya tenis en casa
todo lo que necesitis?

S, coged aire porque todo los que necesitis es... El el Editor de Texto para
usuarios MAC o el bloc de notas para los de WINDOWS! (ver la figuras
siguientes)

Captura de Notepad en Windows

Captura de Text Edit en Mac

Extrao pero cierto: podis disear bastante bien una pgina web usando
simplemente el Bloc de notas, el programa de edicin de texto que viene incluido
de serie en Windows. Tengo que admitir que esta es la forma en la que empec
hace unos aos.

Sin embargo, hay software ms potente disponible actualmente y realmente nadie

usa ya el Bloc de notas. Estos programas para el diseo webse pueden clasificar
en dos categoras:

WYSIWYG ( What You See Is What You Get (lo que ves es lo que hay)):
estos programas son muy fciles de usar y permiten crear sitios web sin
aprender ningn lenguaje en particular. Entre los ms conocidos estn:
Nvu, Microsoft Expression Web, Dreamweaver... e incluso Word! Su
desventaja principal es la calidad del cdigo HTML y CSS que generan
automticamente estas herramientas, el cual tiene a menudo una calidad
bastante mala. Un buen diseador de pginas web va a tener que saber
tarde o temprano HTML y CSS, y esta es la razn por la que no
recomiendo el uso de estas herramientas.
 Editores de texto: estos son programas para escribir cdigo.
Generalmente se usan para otros lenguajes y no nicamente para HTML
y CSS. Han demostrado que son aliados poderosos para los
diseadores de pginas web!

Como os habris dado cuenta, os voy a pedir que usis un editor de texto en este
curso. En todos los sistemas operativos podis usar los siguientes editores de
texto:

Sublime Text
Atom

Dependiendo del sistema operativo, veris que por defecto vienen instalados
otros, que o disponen de una interfaz mucho ms ambigua y arcaica o
directamente solo se pueden usar en la terminal (como VIM o Emacs). Con estos
dos editores que os he recomendado, que son los ms usados entre los
desarrolladores web, estaris ms que cubiertos.

Cuando tengis el software instalado, slo tendris que crearos vuestro proyecto
con la estructura que queris e ir creando poco a poco ficheros que en nuestro
caso sern en HTML y CSS. Sin embargo estos editores os permiten jugar con
infinidad de lenguajes de programacin.
Proyecto en lenguaje Python en SublimeText
De momento no os preocupis por lo que significa todo este galimatas. Solo
quera daros una visin general de lo que puede hacer el software.

Navegadores

Por qu un navegador es importante

Un navegador es un programa que permite ver los sitios web. Si podis leer esto
significa que vuestro navegador est abierto y lo estis viendo. Como expliqu
anteriormente, el trabajo de un navegador es interpretar el cdigo HTML y el CSS
para mostrar un resultado visual en la pantalla. Si vuestro cdigo CSS dice que
los ttulos estn en rojo el navegador mostrar los ttulos en rojo. La funcin del
navegador es por tanto primordial!

Aunque no lo creis un navegador es un programa extremadamente complejo.

Entender el cdigo HTML y el CSS no es de hecho una tarea fcil. El problema
principal como os daris cuenta rpidamente es que los navegadores no
muestran todos los sitios web exactamente de la misma manera! Os tendris que
acostumbrar a esto y habituaos a comprobar con frecuencia que vuestro sitio web
funciona correctamente en la mayora de los navegadores.
Los navegadores en los ordenadores

Descarga de navegadores

Hay muchos navegadores diferentes. Los principales que deberais conocer se

muestran en la figura siguiente.

Navegador OS Descargar Comentarios

Google Windows Descargar El navegador de Google que es muy

Chrome Mac fcil de usar y muy rpido.
Linux Es el navegador que uso todos los
das.

Google
Chrome

Mozilla Windows Descargar El navegador famoso y renombrado

Firefox Mac de la Fundacin Mozilla.
Linux Lo uso con frecuencia para probar
los sitios web.

Firefox

Internet Windows Descargar El navegador de Microsoft que est

Explorer (Preinstalado en instalado en todos los PC de
Windows) Windows.
Lo uso con frecuencia para probar
los sitios web.
IE9

Safari Windows Descargar El navegador de Apple que viene

Mac (Preinstalado en instalado en todos los Macs.
Mac OS X)

Safari

Opera Windows Descargar El eterno desconocido.

Mac Aunque ofrece muchas funciones se
Linux usa menos.

Opera
Es recomendable que instalis varios navegadores en vuestro ordenador para que
os aseguris que vuestro sitio web funciona correctamente en cada uno de ellos.
En general, os recomiendo que probis vuestro sitio web con frecuencia al menos
en Google Chrome, Mozilla Firefox e Internet Explorer.
Tomad en cuenta que Safari y Google Chrome muestran los sitios web casi de la
misma forma. No tenis que probar vuestro sitio web en Safari y Google Chrome,
aunque es siempre ms seguro.

En la siguiente figura podis ver una visin general de algunos de los navegadores
principales en la pgina de inicio de Google.

Visin general de algunos navegadores

Entender la diferencia entre navegadores

Como he mencionado anteriormente, los navegadores no siempre muestran los

sitios web exactamente de la misma forma. Por qu? Esto se debe a que los
navegadores no siempre conocen las ltimas funciones del HTML y del CSS. Por
ejemplo Internet Explorer se ha quedado por mucho tiempo rezagado en relacin a
algunas funciones del CSS (y paradjicamente ha estado por delante de otras).

Para complicar el asunto hay varias versiones de los navegadores que coexisten:

Firefox 2, Firefox 3.5, Firefox 3.6 y Firefox 4;

Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 y Internet
Explorer 9;
Chrome 8, Chrome 9 y Chrome 10;
...

Aunque cada versin es compatible con las nuevas funciones, esto se convierte
en un problema para los administradores web como vosotros que crean sitios
web cuando los usuarios no actualizan los navegadores.
Chrome ha resuelto en gran medida este problema con el establecimiento de
actualizaciones automticas que no requieren la intervencin del usuario. Muchos
de los usuarios de Firefox se olvidan de actualizar e Internet Explorer se esfuerza
para conseguir que los usuarios actualicen a la ltima versin que tambin
requiere una actualizacin de Windows (por ejemplo Internet Explorer 9 no est
disponible para Windows XP).

Sitios como normansblog.de y caniuse.com proporcionan una lista actualizada con

las funciones del CSS que soportan las diferentes versiones de cada navegador
(ver figura siguiente).

Lista de funciones compatibles por navegadores

Como podis ver, es... complicado.

El problema ms grande se encuentra con ms frecuencia en las versiones ms

antiguas de Internet Explorer (IE6, IE7 y IE8). Deberais comprobar cmo se ve
vuestro sitio web en estas versiones antiguas... Esperad lo inesperado!
Especialmente aseguraos de que vuestro sitio web se muestra sin errores sin
intentar obtener exactamente el mismo resultado en las versiones antiguas de
estos navegadores.

Hay un programa para Windows que se llama IETester que permite probar el sitio
web en varias versiones de Internet Explorer. Considerad que aunque este
programa es relativamente inestable (se cuelga a menudo) por lo menos existe.

Navegadores en telfonos mviles

Adems de los navegadores que he presentado se pueden encontrar versiones de
estos navegadores para telfonos mviles, particularmente para smartphones.
Ya que ms y ms gente visita actualmente los sitios web con sus mviles
tenemos que tener por lo menos alguna idea de cmo funcionan los navegadores
en los telfonos mviles.

De hecho, no os perderis: la mayora de los navegadores de los smartphones

son los mismos que los de los ordenadores en una versin ms ligera apta para
telfonos mviles. Todo depende el tipo de telfono mvil.

iPhone: en el iPhone de Apple se usa el navegador Safari Mobile. Esta

es una versin ligera, pero an as muy completa del Safari para
ordenadores.
Android: Los telfonos mviles Android usan el navegador Chrome
Mobile. Una vez ms, esta es una versin para telfonos mviles.
Telfono Windows: El telfono Windows incluye... Internet Explorer
Mobile! El principio es el mismo al igual que los navegadores anteriores:
es una versin dedicada a telfonos mviles.
Blackberry: Las Blackberries son la excepcin a la regla porque tienen
su propio navegador (no hay equivalente en ordenadores). Sin embargo,
las versiones ms recientes de este navegador estn basadas en el
ncleo comn de Safari y Chrome (el motor de renderizado Webkit).
Como resultado la visualizacin es normalmente similar a la de Safari y
Chrome.

Los navegadores para telfonos mviles soportan la mayora de las ltimas

funciones del HTML y del CSS. Adems, el sistema de actualizacin automtico
de los telfonos mviles garantiza que los usuarios tengan la ltima versin ms a
menudo.

Sin embargo, deberais ser consientes de que hay diferencias entre estos
navegadores para telfonos mviles y es aconsejable que tambin probis el sitio
web en estos dispositivos! Concretamente, debido a que la pantalla es mucho ms
estrecha os deberais asegurar que vuestro sitio web se muestra correctamente.

Los dispositivos tctiles como las tabletas tienen los mismos navegadores, pero
simplemente la pantalla es ms amplia. Por tanto, el iPad viene de serie con Safari
Mobile por ejemplo.

En resumen

La Red la invent Tim Berners a principios de los 90.

Para crear sitios web usamos dos lenguajes informticos:
o HTML que nos permite escribir y organizar el contenido de la
pgina (prrafos, ttulos...);
o CSS que nos permite dar formato a la pgina (color, tamao...).
 Ha habido varias versiones de HTML y de CSS. Las ltimas son HTML5
y CSS3
Un navegador web es un programa que muestra sitios web. Interpreta los
lenguajes HTML y CSS para saber que es lo que tiene que mostrar.
Existen un montn de navegadores web: Google Chrome, Mozilla
Firefox, Internet Explorer, Safari, Opera... Cada uno de ellos mostrar los
sitios web de una forma ligeramente diferente.
En este curso aprenderemos a usar los lenguajes HTML y CSS.
Trabajaremos con un programa llamado editor de texto.