La Web y sus movidas

Hola,

Llevo unos días jugando con los internals de wordpress y creo que es interesante comentar un poco como va el temita de la web. Que parece que todos lo sabemos pero me temo que no es así en absoluto.

Voy a hablar mencionando tecnologías concretas: HTML, CSS, PHP, JavaScript y MySQL. Pero lo intentaré generalizar en cada punto. Hablo de estas en concreto porque son muy comunes, wordpress y prestashop, por ejemplo, las usan y, los que no las usan, usan otro tipo de herramientas en su lugar pero mantienen el mismo objetivo.

Vamos a por ello. Primero tendremos que explicar cómo funciona “La Interné” (es broma, eso lleva unas pocas entradas más 😀 ). Simplificando mucho todo esto funciona a base de mensajes que se intercambian los equipos. Si saltamos a la capa de abstracción adecuada (¡aplicación!), veremos que la web es un intercambio de mensajes entre un servidor y un cliente. Por ejemplo, vosotros, para leer este contenido, le habéis hecho una petición a algún servidor de wordpress, y éste, os ha devuelto el contenido que leéis.

client-server

Servidor web (izq), cliente (dch) y la inmensidad de internet en el centro.

Obviemos toda la inmensidad de internet (capa de aplicación, recuerden), esto es entre tú y él.

Una vez definido esto, vamos a por la web. La Web es un sistema de distribución de documentos de Hipertexto. Tan simple como eso.

El hipertexto son archivos de texto con enlaces (hipervínculos), como éste. Las páginas web que usamos están definidas en archivos de texto plano que cumplen una sintaxis que puede ser interpretada por nuestros navegadores web (firefox, google-crome, internet explorer, links2…) y mostrarnos todo muy bonito, tal y como estáis haciendo con esta entrada. Si queréis ver lo que realmente recibe vuestro navegador web podéis usar la opción “Ver código fuente de la página” (en firefox se puede hacer pulsando el botón derecho sobre la página y seleccionándola). Os recomiendo que, para verlo, vayáis a la siguiente web (la de Richard Stallman), porque es muy sencilla y el contenido es limpio:
https://stallman.org/

Ese código que veréis es HTML. Como veis, no es un lenguaje de programación, sólo describe documentos de hipertexto, tal y como indica su propio nombre: HyperText Markup Language.

Si os fijáis, la página web de Richard Stallman es como muy “antigua” y “fea”, os traerá recuerdos del internet de antaño. Eso se debe a que las páginas web actuales se basan en otras tecnologías para cambiar su aspecto y para conseguir dinamismo (ahora explico esto).

Primero el aspecto. Para editar el aspecto de las páginas web se utiliza una cosa que se llama CSS (Cascading Style Sheets) que son archivos que describen el estilo que van a tener las páginas. De esta forma, podemos definir el contenido con el HTML y dejar la forma en estos archivos. Para ver CSS podéis ver el código fuente de esta propia página e investigar un poco:

<style type="text/css" id="custom-background-css">;
body.custom-background { background-color: #FFFFFF; }
</style>

También pueden encontrarse en archivos completos que se cargan al comienzo del documento HTML. Con esto, entre el HTML y el CSS tenemos el contenido de la página y el estilo.

Ahora hablemos del dinamismo. Antes las páginas web se parecían mucho a la de Richard Stallman que os muestro más arriba, el contenido era completamente estático (puro HTML). Nosotros pedíamos un documento y lo recibíamos, simplemente. Al clickar un hipervínculo, pedíamos otro documento etc. Hoy en día podemos chatear en ellas, jugar a juegos, etc, etc. Tenemos un contenido dinámico, que cambia con nuestras acciones, sesiones, etc.

Por ejemplo, cuando yo entro a mi facebook, es diferente a cuando tú entras al tuyo, aunque ambos estemos en la página “www.facebook.com”. Esto se debe a que la página que recibimos es diferente.

Para que lo que recibamos pueda ser diferente, algo debe ejecutarse en el servidor para construir el documento que recibimos de forma automática. Para esto se pueden utilizar tecnologías distintas, yo les llamaré Server Side Scripting, aunque no tenga por qué ser scripting. PHP, el lenguaje mencionado anteriormente, suele ocupar éste lugar, aunque también son habituales Python, ASP, Perl y otros. En general, es interesante que el lenguaje que se utilice trate cadenas de caracteres (o strings) de forma cómoda, porque los documentos generados serán de caracteres como hemos dicho antes (son HTML).

Normalmente, el Server Side Scripting tiene a mano una base de datos de la que carga el contenido que quiere volcar al documento que envía. Por ejemplo, en WordPress, si estás visualizando las entradas de una categoría concreta, el servidor pedirá a la base de datos todos los posts que pertenezcan a esa categoría, los volcará con el formato adecuado en el documento HTML y te los enviará. Para poder hacer esto, todos los datos están organizados en la base de datos de forma que tengan un acceso sencillo y que puedan accederse a modo de consultas.

Una base de datos es una colección ordenada de datos. Simplemente. Suelen estar controladas por un DBMS (DataBase Management System) que es un programa que sirve como intermediario entre la base de datos y diferentes tipos de usuarios (humanos, programas, etc) para introducir, editar, reordenar y extraer contenidos (y más cosas). Nuestro Server Side Scripting preguntará a nuestro DBMS y éste le devolverá lo que necesite. Los DBMS más utilizados son: MySQL, PostgreSQL, Oracle, Microsoft SQL Server, etc. (SQL es un sistema estándar para hacer consultas).

Está claro que si queremos que nuestro DBMS responda lo que debe, a la hora de introducir nuevos contenidos tendremos que introducirlos en la base de datos también y ordenarlos correctamente, de forma que luego puedan ser extraídos.

Ahora mismo hemos visto que podemos hacer documentos de hipertexto bonitos con HTML y CSS y podemos hacer que se generen de forma dinámica, por ejemplo, mirando quién es el usuario o qué datos está consultando. En el lado del servidor, esto se lleva a cabo generando “documentos plantilla” en HTML con etiquetas en las que se define código fuente (que sí que es programación). Estos documentos HTML serán evaluados antes de ser enviados, construyendo el HTML que finalmente es enviado. En PHP por ejemplo sería así:

<?php get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

		<?php
		// Start the loop.
		while ( have_posts() ) : the_post();

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) :
				comments_template();
			endif;

		// End the loop.
		endwhile;
		?>

		</main><!-- .site-main -->;
	</div><!-- .content-area -->;

<?php get_footer(); ?>

El código ha sido extraido del tema TwentyFifteen de WordPress, que está escrito por el equipo de WordPress.

Como veis, hay unas etiquetas especiales <?php > que contienen código fuente PHP. Esto sí es dinámico, es un lenguaje de programación, mientras que, repito, HTML no lo es. Como veis, esto genera un HTML con el contenido de las entradas que haya (bucle: have posts? the post) y muestra la plantilla de comentarios cuando los comentarios están abiertos o hay algún comentario, esto lo hace en la zona central, dentro del “main” que, a su vez, está dentro del “div” de tipo “content-area”. También obtiene la cabecera y el pié de página. Internamente, estas funciones hacen consultas a una base de datos, podéis mirarlo en la documentación de WordPress. Como he dicho, este documento es evaluado antes de ser enviado, por lo que todas las zonas marcadas como código PHP serán ejecutadas y su contenido sustituido por el resultado de la ejecución. De esta forma se generará una página en HTML que será enviada.

Por el otro lado, en nuestro ordenador, también podemos tener dinamismo. Es lo que llamaré Client Side Scripting (normalmente es JavaScript). Nuestros navegadores (aunque lo podemos quitar) son intérpretes de JavaScript. Esto significa que ejecutan el código JavaScript que reciben. Este código fuente lo reciben dentro de los documentos HTML y lo podéis ver en tags como este cuando mostráis el código fuente de los sitios web:

<script type="text/javascript">
	!function(d,s,id){
		var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
			if(!d.getElementById(id)){
				js=d.createElement(s);
				js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
				fjs.parentNode.insertBefore(js,fjs);
			}
	}(document,"script","twitter-wjs");
</script>

Este bloque, por lo que yo entiendo (seguro que me equivoco, no sé nada de JavaScript) es el bloquecito de mostrar mis tweets que tengo en el menú del blog. Viendo esto, mi navegador ejecuta ese código y forma la barrita de los tweets que sale al ver mi blog.

Este código fuente se envía a la red, no como el PHP, que se ejecuta antes de enviarse, y es ejecutado en nuestros equipos. Así conseguimos dinamismo en el lado del cliente. Por ejemplo, haciendo que los menús cambien de tamaño cuando el usuario acerca el puntero del ratón.

Y este es un poco el rollo. Resumen nombrando una única tecnología:

  • Documentos de Hipertexto: HTML.
  • Estilo de los documentos de Hipertexto: CSS.
  • Server Side Scripting: PHP.
    • Pregunta a una base de datos: MySQL.
  • Client Side Scripting: JavaScript.

Espero que os haya sido útil. Si queréis saber más podéis preguntarme o buscar en internet cosas a cerca de las tecnologías concretas que comento y de ahí ir derivando, buscando alternativas, etc.

¡Un abrazo!

Anuncios

3 pensamientos en “La Web y sus movidas

  1. Skeleton, framework CSS – Free Hacks!

  2. Single-page apps: Razones y herramientas – Free Hacks!

  3. Lo que he aprendido: ecuaciones en la web con LaTeX y Mathjax | Onda Hostil

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s