• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

¿Cómo se construyen los sitios web?

Log in or subscribe for free to enjoy all this course has to offer!

¡Hola a todos y bienvenidos!

¡Bueno, aquí tenemos el primer capítulo de este curso para principiantes que os va a enseñar a diseñar vuestro propio sitio web!

Vamos a pasar un rato juntos. Todo dependerá de lo rápido que aprendáis. Si leéis el curso con frecuencia y a una velocidad razonable, deberíais terminarlo en una o dos semanas. Pero si necesitáis más tiempo, no os preocupéis, lo principal es que vayáis a vuestro propio ritmo y que lo paséis bien.

Os sugiero que empecéis con lo más simple, pero también con lo más importante, pregunta: ¿cómo funcionan los sitios web?

¿Cómo funcionan los sitios web?

¿Cómo funcionan los sitios web?

No, no tengáis miedo a hacer preguntas aunque creáis que son «tontas». ¡Es muy importante que hablemos un poco sobre esto antes de que nos metamos de lleno en el diseño web!

Estoy seguro de que visitáis sitios web a diario. Para hacer esto ejecutáis 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
Los navegadores web son programas que muestran sitios web

Podéis visitar cualquier sitio web con un navegador. Aquí, por ejemplo tenemos un navegador que muestra la famosa página web de Wikipedia (ver la figura siguiente).

Página de Wikipedia
Página de Wikipedia

¡Estoy seguro de que estáis acostumbrados a usar un navegador web! Actualmente todo el mundo sabe como navegar en la Red..., pero ¿quién sabe realmente cómo funciona la Red? ¿Cómo diseñar sitios web como este?

He oído hablar del HTML y del CSS. ¿Tienen algo que ver con la forma en la que funcionan los sitios web?

¡Totalmente!
Existen lenguajes informáticos 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 aún sigue de cerca las evoluciones de la Red. El creó el World Wide Web Consortium(W3C) que define las nuevas versiones de estos lenguajes. Más recientemente él también creó la World Wide Web Foundationque analiza y monitoriza las evoluciones de la Red.

Los lenguajes HTML y CSS son los cimientos del funcionamiento de todos los sitios web. Cuando visitáis un sitio web con un navegador deberíais saber que detrás 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
HTML y CSS traducido por el ordenador

El HTML y el CSS son dos «lenguajes» que tenéis que conocer para crear sitios web. El navegador web traduce entre estos lenguajes de programación y lo que veis en la pantalla.
¿Probablemente os estaréis preguntando por qué necesitáis 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, tenéis que darle instrucciones al ordenador. No basta con teclear el texto que queráis poner en el sitio web (como lo haríais en un procesador de texto como Word, por ejemplo). También tenéis que mostrarle donde poner el texto, insertar las imágenes, crear los enlaces entre las páginas, etc.

La función de HTML y de CSS.

Para explicarle al ordenador lo que queréis hacer, tenéis que usar un lenguaje que él entienda. ¡Y es aquí donde la cosa se pone difícil porque tenéis que aprender dos lenguajes!

¿Por qué se crearon dos lenguajes? ¿No habría bastado con uno?

Probablemente estéis 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 más fáciles. 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 función es gestionar y organizar el contenido. Por lo tanto, usaréis el HTML para escribir lo que queréis que muestre la página: texto, enlaces, imágenes, etc. Podéis decir por ejemplo: «Este es el título, este es el menú, aquí está el texto principal de la página, aquí está una imagen a mostrar, etc.».

  • CSS( Cascading Style Sheets (hojas de estilo en cascada)): la función del CSS es gestionar la apariencia del sitio web (trazado, posicionamiento, diseño, color, tamaño del texto, etc.). Este lenguaje se introdujo para complementar al lenguaje HTML en 1996.

Podéis crear bastante bien un sitio web solo con HTML, pero no se va a ver muy bonito, se mostrará la información «granulada». Esta es la razón 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 página sin CSS y luego con CSS.

Con o sin CSS
Con o sin CSS

El HTML define el contenido (como podéis ver, ¡no está muy pulido!). El CSS se usa para colocar el contenido y definir la presentación: el color, la imagen de fondo, los márgenes, el tamaño del texto, etc.

Como os podéis imaginar el CSS necesita una página en HTML para funcionar. Esta es la razón 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 páginas no tendrán un aspecto muy bonito, pero ¡a quién 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 versión del HTML (HTML 1.0), ¡ni siquiera se podía mostrar imágenes!

Aquí tenemos un pequeño historial muy breve de los lenguajes para vuestros conocimiento general...

Versiones del HTML
  • HTML 1: esta fue la primera versión que creó Tim Berners-Lee en 1991.

  • HTML 2: la segunda versión del HTML apareció en 1994 y finalizó en 1996 con la publicación del HTML 3.0. Esta fue la versión que sentó las bases para las versiones futuras del HTML. Las reglas y la operatividad de esta versión las otorgó el W3C (aunque la primera versión la creó un solo hombre).

  • HTML 3: apareció en 1996 y esta versión nueva del HTML añadió muchas posibilidades al lenguaje, como tablas, applets, scripts, posicionamiento de texto alrededor de las imágenes, etc.

  • HTML 4: esta es la versión más común del HTML (más específicamente es HTML 4.01). Apareció por primera vez en 1998 y propuso el uso de tramas (estas seccionan una página web en varias partes), tablas más complejas, mejoras en los formularios, etc. Lo más importante es que esta versión permitió por primera vez el uso de hojas de estilo, ¡nuestro famoso CSS!

  • HTML 5: esta es la última versión. Aún no está muy extendida y llama mucho la atención porque proporciona muchas mejoras, como la capacidad para incluir vídeos fácilmente, un diseño mejorado del contenido, nuevas funciones para los formularios, etc. Esta es la versión que vamos a estudiar en detalle.

Versiones del CSS
  • CSS 1: la primera versión del CSS se usó a partir de 1996. Sentó las bases de este lenguaje que permite mostrar las páginas web con colores, márgenes, tipos de letra, etc.

  • CSS 2: apareció en 1999 y luego se completó con la versión CSS 2.1. Esta versión nueva del CSS añadió numerosas opciones. Ahora podemos usar con bastante exactitud las técnicas de colocación para mostrar objetos en el lugar que queremos que estén en la página.

  • CSS 3: esta es la última versión, esta incluye funciones muy esperadas, como bordes redondeados, degradado, sombras, etc.

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 número de programas informáticos para el diseño de sitios web. Pero os puedo asegurar que no vais a necesitar pagar ni un duro por ellos. ¿Por qué pagar por un software informático complicado cuando ya tenéis en casa todo lo que necesitáis?

Sí, coged aire porque todo los que necesitáis 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 Notepad en Windows
Captura de Text Edit en Mac
Captura de Text Edit en Mac

Extraño pero cierto: podéis diseñar bastante bien una página web usando simplemente el Bloc de notas, el programa de edición de texto que viene incluido de serie en Windows. Tengo que admitir que esta es la forma en la que empecé hace unos años.

Sin embargo, hay software más potente disponible actualmente y realmente nadie usa ya el Bloc de notas. Estos programas para el diseño webse pueden clasificar en dos categorías:

  • WYSIWYG ( What You See Is What You Get (lo que ves es lo que hay)): estos programas son muy fáciles de usar y permiten crear sitios web sin aprender ningún lenguaje en particular. Entre los más conocidos están: Nvu, Microsoft Expression Web, Dreamweaver... ¡e incluso Word! Su desventaja principal es la calidad del código HTML y CSS que generan automáticamente estas herramientas, el cual tiene a menudo una calidad bastante mala. Un buen diseñador de páginas web va a tener que saber tarde o temprano HTML y CSS, y esta es la razón por la que no recomiendo el uso de estas herramientas.

  • Editores de texto: estos son programas para escribir código. Generalmente se usan para otros lenguajes y no únicamente para HTML y CSS. ¡Han demostrado que son aliados poderosos para los diseñadores de páginas web!

Como os habréis dado cuenta, os voy a pedir que uséis un editor de texto en este curso. En todos los sistemas operativos podéis usar los siguientes editores de texto:

Dependiendo del sistema operativo, veréis que por defecto vienen instalados otros, que o disponen de una interfaz mucho más 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 más usados entre los desarrolladores web, estaréis más que cubiertos.

Cuando tengáis el software instalado, sólo tendréis que crearos vuestro proyecto con la estructura que queráis e ir creando poco a poco ficheros que en nuestro caso serán en HTML y CSS. Sin embargo estos editores os permiten jugar con infinidad de lenguajes de programación.

Proyecto  en lenguaje Python en SublimeText
Proyecto en lenguaje Python en SublimeText

Navegadores

Por qué un navegador es importante

Un navegador es un programa que permite ver los sitios web. Si podéis leer esto significa que vuestro navegador está abierto y lo estáis viendo. Como expliqué anteriormente, el trabajo de un navegador es interpretar el código HTML y el CSS para mostrar un resultado visual en la pantalla. Si vuestro código CSS dice que «los títulos están en rojo» el navegador mostrará los títulos en rojo. ¡La función del navegador es por tanto primordial!

Aunque no lo creáis un navegador es un programa extremadamente complejo. Entender el código HTML y el CSS no es de hecho una tarea fácil. El problema principal como os daréis cuenta rápidamente es que ¡los navegadores no muestran todos los sitios web exactamente de la misma manera! Os tendréis que acostumbrar a esto y habituaos a comprobar con frecuencia que vuestro sitio web funciona correctamente en la mayoría de los navegadores.

Los navegadores en los ordenadores

Descarga de navegadores

Hay muchos navegadores diferentes. Los principales que deberíais conocer se muestran en la figura siguiente.

Navegador

OS

Descargar

Comentarios

Google Chrome

Google Chrome
Google Chrome

Windows
Mac
Linux

Descargar

El navegador de Google que es muy fácil de usar y muy rápido.
Es el navegador que uso todos los días.

Mozilla Firefox

Logotipo de Firefox
Firefox

Windows
Mac
Linux

Descargar

El navegador famoso y renombrado de la Fundación Mozilla.
Lo uso con frecuencia para probar los sitios web.

Internet Explorer

IE9
IE9

Windows

Descargar
(Preinstalado en Windows)

El navegador de Microsoft que está instalado en todos los PC de Windows.
Lo uso con frecuencia para probar los sitios web.

Safari

Logotipo de Safari
Safari

Windows
Mac

Descargar
(Preinstalado en Mac OS X)

El navegador de Apple que viene instalado en todos los Macs.

Opera

Logotipo de Opera
Opera

Windows
Mac
Linux

Descargar

El eterno desconocido.
Aunque ofrece muchas funciones se usa menos.

En la siguiente figura podéis ver una visión general de algunos de los navegadores principales en la página de inicio de Google.

Visión general de algunos navegadores
Visión 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 relación a algunas funciones del CSS (y paradójicamente 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 versión 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 automáticas que no requieren la intervención 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 versión que también requiere una actualización 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 navegadoresLista de funciones compatibles por navegadores

Como podéis ver, es... complicado.

El problema más grande se encuentra con más frecuencia en las versiones más antiguas de Internet Explorer (IE6, IE7 y IE8). Deberíais comprobar cómo 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.

Navegadores en teléfonos móviles

Además de los navegadores que he presentado se pueden encontrar versiones de estos navegadores para teléfonos móviles, particularmente para smartphones.
Ya que más y más gente visita actualmente los sitios web con sus móviles tenemos que tener por lo menos alguna idea de cómo funcionan los navegadores en los teléfonos móviles.

De hecho, no os perderéis: la mayoría de los navegadores de los smartphones son los mismos que los de los ordenadores en una versión más ligera apta para teléfonos móviles. Todo depende el tipo de teléfono móvil.

  • iPhone: en el iPhone de Apple se usa el navegador Safari Mobile. Esta es una versión ligera, pero aún así muy completa del Safari para ordenadores.

  • Android: Los teléfonos móviles Android usan el navegador Chrome Mobile. Una vez más, esta es una versión para teléfonos móviles.

  • Teléfono Windows: El teléfono Windows incluye... ¡Internet Explorer Mobile! El principio es el mismo al igual que los navegadores anteriores: es una versión dedicada a teléfonos móviles.

  • Blackberry: Las Blackberries son la excepción a la regla porque tienen su propio navegador (no hay equivalente en ordenadores). Sin embargo, las versiones más recientes de este navegador están basadas en el núcleo común de Safari y Chrome (el motor de renderizado Webkit). Como resultado la visualización es normalmente similar a la de Safari y Chrome.

Los navegadores para teléfonos móviles soportan la mayoría de las últimas funciones del HTML y del CSS. Además, el sistema de actualización automático de los teléfonos móviles garantiza que los usuarios tengan la última versión más a menudo.

Sin embargo, deberíais ser consientes de que hay diferencias entre estos navegadores para teléfonos móviles y ¡es aconsejable que también probéis el sitio web en estos dispositivos! Concretamente, debido a que la pantalla es mucho más estrecha os deberíais asegurar que vuestro sitio web se muestra correctamente.

En resumen

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

  • Para crear sitios web usamos dos lenguajes informáticos:

    • HTML que nos permite escribir y organizar el contenido de la página (párrafos, títulos...);

    • CSS que nos permite dar formato a la página (color, tamaño...).

  • 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 montón 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».

Example of certificate of achievement
Example of certificate of achievement