¿Cómo funciona la WEB?. Segunda parte

En el post anterior, primera parte de cómo funciona la web, hablamos de clientes y servidores, direcciones IP y protocolos.

Hoy vamos a continuar hablando sobre cómo funciona la web, pero en esta ocasión lo haremos sobre los lenguajes informáticos que se utilizan para elaborar las páginas web.

¿Cómo está hecha una página WEB?

En realidad, una página web no es más que un documento de texto plano, no del tipo de los que se escriben en Word y otros paquetes ofimáticos, sino como los que podemos crear con el bloc de notas, es decir, nada más que texto sin información adicional de formato.

Para que este documento sea considerado como una página web por los diferentes ordenadores y dispositivos, generalmente es suficiente con añadirle la extensión .html al guardarlo en lugar de la clásica .txt. Así de sencillo.

¿No me crees?. Vamos a hacer una prueba: Abre el bloc de notas, escribe una frase y guarda el archivo con el nombre que quieras pero asegurándote de tenga la extensión .html. Para conseguir esto, a la hora de guardar, elige como Tipo la opción “todos los archivos”.

Ahora haz doble click sobre el archivo que acabas de crear. Si todo ha ido bien, se abrirá el navegador web mostrando el texto que has escrito. Eso si, esta “página web” sólo puedes verla tu desde tu ordenador. Si queremos que esté disponible para todo el mundo, para cualquiera que disponga de una conexión a Internet sea cual sea su ubicación, tendríamos que subirla (enviarla) a un servidor web.

El lenguaje HTML

El problema de la sencilla página web que acabamos de crear, es que no es más que texto. No tiene enlaces a otras páginas, ni imágenes, ni ningún tipo de estructura en la información que muestra.

Aquí es donde entra el lenguaje HTML (HyperText Markup Language), se trata de un lenguaje informático (que no de programación) que nos va a permitir añadir todo este tipo de información a nuestra página web.

Los navegadores web reconocen este lenguaje de manera automática, por lo que cualquier etiqueta HTML que pongamos en nuestro texto será interpretada por el navegador y mostrada en pantalla sin necesidad de que hagamos otra cosa que escribirla.

Así, si escribimos lo siguiente:

Mostrará en el navegador el texto “Ir a Google” en forma de enlace. Si pinchamos sobre él, automáticamente se cargará la página del buscador.

<a> es la etiqueta HTML que nos permite definir enlaces, tiene un atributo href cuyo valor (escrito entre comillas) es la página web a la que queremos enlazar. Finalmente, con </a> cerramos la etiqueta HTML y todo lo que queda comprendido entre <a> y </a> es el texto que servirá de enlace.

La mayoría de etiquetas HTML tienen un funcionamiento muy similar. Existen unas cuantas decenas de ellas y su cometido es siempre ayudarnos a mostrar y estructurar diferentes tipos de información.

El lenguaje CSS

CSS (Cascade Style Sheets) u hojas de estilo en cascada, convenientemente traducido al español, es otro lenguaje informático que complementa a HTML y cuyo cometido es diseñar, maquetar y definir el aspecto de la información contenida en las páginas web. Es decir, se encarga de hacer que las cosas se “vean bonitas”.

Así, CSS es el encargado de definir el tipo de letra, su color, tamaño, márgenes, interlineado…

Después de HTML, CSS sería el segundo lenguaje que deberíamos estudiar si queremos aprender a hacer páginas WEB.

¿Quieres que hagamos una prueba?. En el archivo de texto que ya tienes creado, añade la siguiente linea:

Es muy importante que no te dejes ninguna comilla sin escribir. Si guardas el documento y lo abres de nuevo en el navegador, verás que acabas de escribir un texto de color rojo: red en inglés. La parte correspondiente a CSS es simplemente donde hemos puesto “color:red”, el resto sigue siendo HTML. Así <p> es la etiqueta HTML para definir un párrafo y en el valor de su atributo style es donde escribimos las instrucciones CSS.

El lenguaje JavaScript

Hasta ahora todo cuanto hemos hecho en nuestra sencilla página web es mostrar información estática. Pero la web permite interactividad, es decir, interactuar con el usuario para que, en función de lo que éste haga, nuestra página reaccione de un modo u otro: animaciones, cálculos, juegos…

JavaScript es el lenguaje que se encarga de hacer esto posible. En este caso, si se trata de un lenguaje de programación propiamente dicho y su aprendizaje, si no tenemos conocimientos previos de programación, puede resultarnos algo más arduo que el de los dos lenguajes anteriores. Eso si, también es mucho más divertido.

¿Vemos un pequeño ejemplo?. Escribe lo siguiente:

Ten cuidado de escribir correctamente las comillas dobles y las simples: las comillas simples están a la derecha de la tecla del número cero. Si todo va bien, observarás que al pulsar el botón que ahora aparecerá en el navegador, verás desplegarse una pequeña ventana con un saludo.

La parte correspondiente a JavaScript es

Como todos los lengujes de programación, JavaScript tiene una sintaxis propia que hay que respetar y que define cuando hay que utilizar paréntesis, comillas, punto y coma… pero en realidad son reglas bastante sencillas y que se asimilan rápidamente con un poco de práctica.

Quizá hayas oído hablar de JQuery y otras librerías JavaScript. Si te preguntas de que se trata, no son más que eso, librerías de código listas para usar que facilitan tareas habituales de programación como las animaciones o realizar peticiones de información a otras páginas web.

Los lenguajes de Servidor

Tanto HTML, como CSS, como JavaScript, son lenguajes que se interpretan y ejecutan en el cliente, es decir, en el navegador del ordenador del usuario que visita nuestra página web.

Pero muchas veces esto no es suficiente. Sobre todo cuando se consultan bases de datos con mucha información, como es el caso de buscadores y aplicaciones complejas, debemos echar mano de los llamados lenguajes de servidor.

Estos son también lenguajes de programación y se encargan de cosas como hacer consultas a bases de datos (MySQL, SQL Server, Oracle…) e incluso generar código HTML de manera más o menos automatizada.

Lamentablemente no podemos aquí poner un ejemplo sencillo, porque tendríamos que disponer de un servidor web correctamente configurado y al que tuviesemos acceso, y eso se escapa de lo que es posible explicar en un simple post como este.

Además, al contrario de los lenguajes de cliente para la web que son siempre los mismos: HTML, CSS y JavaScript, los lenguajes de servidor son mucho más numerosos, siendo quizá el más conocido PHP. Pero existen otras muchas alternativas como ASP, Java, Python o Ruby.

Los CMS

Seguramente puedes hacerte ya una idea de lo complejo y trabajoso que puede llegar a ser desarrollar una página web profesional desde cero.

Para ayudar en esta tarea, existen toda una serie de aplicaciones desarrolladas utilizando todos los lenguajes descritos hasta aquí. Los CMS (Content Management System) o Sistemas de Gestión de Contenidos, son los de propósito más general y los más asequibles para su aprendizaje.

Entre los más conocidos se encuentran WordPress, Joomla o Drupal, pero hay decenas de ellos disponibles.

Aunque su instalación, configuración y manteniemiento también requiere de conocimientos especializados, su objetivo es permitirnos la publicación sencilla de información en nuestra propia web, facilitándonos tareas como la edición y actualización de contenidos, manejo de archivos en el servidor, conexión con redes sociales, diseño mediante plantillas… Pemitiéndonos en general conseguir resultados de alta calidad en menor tiempo, sobre todo en proyectos de tipo generalista.

Y hasta aquí mi pequeña introducción a cómo funciona la web en dos partes. Si quieres seguir profundizando, puedes leer algunos otros de mis post como los siguientes: Cómo obtener y configurar un dominio en Internet o cómo instalar WordPress fácilmente.

¿Alguna duda, pregunta o aportación?. Te animo a escribir en el hilo de comentarios que para eso está 🙂

2 Comentarios

  • Amparo Millán

    Me he suscrito hace poco a vuestro boletín y tengo que decir que con cada artículo me llevo una sorpresa agradable!

    Me ha encantado esta pequeña serie de conceptos básicos de cómo funciona la web. A veces, lo más difícil para los que empezamos con wordrpess y un blog no es encontrar la información de cómo instalar este o ese plugin (de esto hay cientos de posts) sino entender “desde la base” cómo funciona todo esto.

    Mi enhorabuena por vuestro blog y espero leeros mucho tiempo! Un abrazo.

    • Luis Hernández

      Hola Amparo, te aseguro que más agradable aun es encontrar comentarios como el tuyo 🙂
      Para nosotros también es importante saber que temas suscitan mayor interés y estamos encantados de que nos lo hagais saber.
      Gracias por hacernos sentir en tan buena compañía.
      Un abrazo!

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: