Cómo contratar diseño web sin hacer el ridículo

Capítulo 7

¿Cómo funciona una página web?

Aunque no seas consciente de ello ya casi sabes cómo funciona una página web, sólo queda unir las piezas.

Existen dos tipos de páginas web: las que no dependen de un lenguaje de programación (páginas web estáticas) y las que sí dependen de un lenguaje de programación (páginas web dinámicas).

En este capítulo aprenderás…

  1. Diferencias entre páginas web estáticas y páginas web dinámicas
  2. Cómo publicar una página we
  3. La importancia de las peticiones HTTP
  4. Diferencias entre un lenguaje de programación de servidor y un lenguaje de programación de cliente (o qué es JavaScript)
  5. Lo maravilloso que es AJAX
  6. La otra memoria caché
  7. Qué es un TPV, un CRM y un ERP, y por qué no tienen nada que ver con un CMS
  8. Qué es una API y qué es un servicio web

Páginas web estáticas

Cuando contratas un alojamiento y un dominio tu proveedor te proporciona, entre otros, los datos de conexión por FTP con dicho alojamiento: dirección, nombre de usuario y contraseña.

Puedes descargar e instalar un cliente de FTP y utilizar los datos proporcionados por tu proveedor para conectarte a su alojamiento. Después de eso puedes subir a dicho alojamiento los archivos que creaste en el capítulo 3 (index.html y style.css). Hecho todo esto habrás publicado una nueva página web. Para visitarla sólo tienes que abrir tu navegador y visitar el dominio contratado seguido de una barra y el nombre del archivo HTML (/index.html), por ejemplo: http://miprimerdominio.com/index.html.

Esta página web es estática, pues se trata de un archivo de texto invariable en el tiempo e independiente de cualquier condición. Si quieres que cambie algo debes editar el archivo HTML o CSS a mano.

Esto es lo que ocurre cuando visitas una página web estática:

  1. El usuario introduce una dirección en la barra de direcciones del navegador, por ejemplo: http://miprimerdominio.com/index.html.

    El usuario introduce la ruta

    Imagen 7.1. Tras escribir la ruta http://miprimerdominio.com/index.html el navegador conectará con el DNS para obtener la dirección IP asociada al dominio miprimerdominio.com.

  2. El navegador, a través del DNS, localiza en qué servidor del mundo se encuentra la web alojada tras el dominio miprimerdominio.com.

    El navegador, por ejemplo Firefox, se conecta al DNS y pregunta por la dirección IP asociada al dominio

    Imagen 7.2. La dirección IP permite localizar el servidor web.

  3. Por haber escrito /index.html después del nombre del dominio, el navegador le pide dicho archivo al servidor de páginas web recién localizado.
    [Una vez que (gracias a la dirección IP) el navegador ha localizado el ordenador donde está almacenado el archivo

    Imagen 7.3. Localizado el servidor web el navegador le solicita el archivo HTML incluido en la ruta http://miprimerdominio.com/index.html. En caso de no haber introducido el index.html del final de la ruta, será el archivo HTML llamado index el que por defecto enviará el servidor web.

  4. El servidor de páginas web de tu alojamiento le envía a tu navegador el archivo index.html.

    El servidor web con dirección IP

    Imagen 7.4. El servidor web envía al navegador el archivo index.html pero podría devolvernos cualquier otro archivo que le pidamos siempre y cuando esté alojado en la ruta que indiquemos.

  5. El navegador de tu ordenador lee el archivo index.html y comprueba que tiene otros archivos asociados, en este caso el archivo style.css.

    Cuando el navegador lee el contenido del archivo

    Imagen 7.5. El navegador continuará analizando e interpretando la página web incluso si el servidor no le devuelve los archivos y recursos asociados, aunque eso provocaría que la página web no se mostrara o funcionara tal y como ha sido concebida.

  6. El navegador de tu ordenador realiza una nueva petición adicional al servidor web por cada archivo asociado al archivo HTML recién descargado. En este caso sólo hay un archivo asociado, style.css.

    El navegador solicita al servidor con dirección IP

    Imagen 7.6. En caso de que todo vaya bien el servidor web enviará al navegador, uno a uno, todos los archivos asociados al archivo HTML.

  7. Una vez se ha descargado el archivo HTML y todos sus archivos asociados, tu navegador los interpreta para, en lugar de mostrar un feo código HTML, mostrar una bonita página web con el formato y estilos indicados en dichos archivos.

    El navegador lee los archivos

    Imagen 7.7. Cuantos más archivos formen parte de una página web y más grandes sean éstos, más tardará en cargar dicha página web.

En total el navegador ha hecho dos peticiones al servidor: una solicitando el archivo index.html y otra solicitando el archivo style.css. Como explicaba antes, estas peticiones se producen a través del protocolo HTTP, por tanto, en este ejemplo, el navegador realiza dos peticiones HTTP (HTTP requests en inglés).

Con cada petición HTTP se incrementa el tiempo de carga de una página web.

Páginas web dinámicas

En una página web dinámica los archivos HTML que se descargan en el ordenador del visitante son construidos por el servidor en el momento en el que ese usuario visita la página web en cuestión. Para cada visita de cada usuario el servidor construye un archivo HTML.

Para ello el desarrollador web habrá escrito en PHP –o en otro lenguaje de programación– un programa que genera un archivo HTML cada vez que se ejecuta dicho programa. Y dicho programa se ejecuta cada vez que se produce una visita.

Es decir, en este caso no existen archivos HTML construidos previamente, sino que se crean dinámicamente. Esto permite que el HTML resultante dependa de datos y condiciones externas.

Podríamos, por ejemplo, escribir un programa en PHP que cree un archivo HTML en el que ponga “Buenos días” si es por la mañana o “Buenas tardes” si es por la tarde. Esta página web se consideraría dinámica porque su contenido sería diferente según ciertas condiciones iniciales (la hora del día).

Por si tienes curiosidad, ese programa se podría escribir así en PHP:

<!DOCTYPE html>
<html>
  <body>

    <p>

      <?php
        if (date("H")<"12") {  
          echo "Buenos días";
        } else {
          echo "Buenas tardes";
        }
      ?>

    </p>

  </body>
</html>

Una página web dinámica también permitiría que parte del contenido del archivo HTML que se genera se extrajera de una base de datos.

De la misma forma que los archivos CSS independizan el estilo de los archivos HTML, las bases de datos independizan el contenido (texto, imágenes, etc.) del código de programación y del código HTML. Esto facilita la creación, edición y mantenimiento posterior, tanto del contenido, como del código de programación y del código HTML.

Lenguajes de programación como PHP, Java o Ruby, se denominan lenguajes de servidor, pues son ejecutados por un servidor (un servidor PHP, por ejemplo). El resultado de dicha ejecución –un archivo HTML–, es enviado al cliente (navegador del usuario que visita la página web), a través de otro servidor, un servidor de páginas web, como Apache o nginx.

En una página web que es originada por un archivo PHP, que a su vez accede a una base de datos, están actuando hasta tres servidores:

  1. El servidor de PHP, que ejecuta un programa que produce un archivo HTML.
  2. El servidor de bases de datos MySQL, que proporciona información al servidor PHP.
  3. El servidor de páginas web (ej.: Apache), que envía el archivo HTML resultante al navegador (ej. Google Chrome) del visitante.

    El cliente web (navegador Firefox) le pide información al servidor web (Apache), que le pide información al servidor PHP, que le pide información al servidor MySQL. El servidor MySQL le envía la información solicitada al servidor PHP, que le envía la información solicitada al servidor web (Apache), que le envía la información solicitada al cliente web (navegador Firefox).

    Imagen 7.8. En la construcción de una página web dinámica intervienen varios servidores que se comunican entre ellos. Según cual sea la funcionalidad de la página web pueden intervenir más servidores, como un servidor de correo electrónico.

Pixels are expensive da título a un artículo y a una charla de Paul Lewis, programador del equipo de Google Chrome, donde explica con detalle el proceso que sigue un navegador hasta mostrar una página web y cómo aprovecharlo para diseñar sitios web más rápidos.

Hasta ahora hemos visto que una página web se compone de los siguientes elementos:

  1. Una base de datos, por ejemplo en MySQL.
  2. Una o varias hojas de estilos, en CSS.
  3. Un lenguaje de programación que se ejecuta en el servidor, como PHP.
  4. El HTML resultante tras la ejecución, por parte del servidor, del programa en PHP.
  5. Recursos como imágenes, vídeos o el favicon.

Pues bien, todavía existe otro elemento importante: el lenguaje de programación del cliente. Programas que en lugar de ejecutarse en el servidor y devolver un resultado se ejecutan en el cliente, es decir, en el navegador.

JavaScript

El lenguaje de programación de cliente más utilizado, y prácticamente el único, es JavaScript.

En caso de que visites una página web que cuente con uno o varios programas en JavaScript (archivos JS), éstos se descargarán en tu ordenador y se ejecutarán de manera constante una vez que la web ya se haya cargado en tu ordenador y durante el tiempo que estés visitando dicha página web.

Los programas en JavaScript pueden modificar el contenido y apariencia de una página web sin necesidad de que haya que realizar nuevas peticiones al servidor, y por tanto, de manera más rápida de lo que lo haría un programa en el servidor (como uno en PHP), y sin que haya que refrescar dicha página.

Antes veíamos un programa PHP que genera una página web con el mensaje “Buenos días” si es por la mañana o “Buenas tardes” si es por la tarde. En ese ejemplo, si visitas la página web a las 11:59, verás que dice “Buenos días” y, a menos que refresques la página web, cuando lleguen las 12:00 seguirás viendo el mismo mensaje de “Buenos días”. Sin embargo, si el mensaje de la página web, en lugar de ser generado por un programa en PHP, estuviera generado por un programa en JavaScript, cambiaría automáticamente de “Buenos días” a “Buenas tardes” en el momento preciso que den las 12:00.

Así es como funciona una página web programada en PHP, que cuente con una hoja de estilos, una base de datos y un programa en JavaScript:

  1. El usuario introduce una dirección en la barra de direcciones del navegador, por ejemplo: http://miprimerawebdinamica.com.
  2. El navegador, con la ayuda del sistema operativo, localiza, a través del DNS en qué servidor del mundo se encuentra la página web alojada tras el dominio miprimerawebdinamica.com.
  3. El navegador le pide al servidor web recién localizado que le envíe un archivo HTML.
  4. El servidor web le dice al servidor de PHP que genere y le devuelva un archivo HTML.
  5. El servidor PHP ejecuta el archivo index.php y en el proceso de construcción del archivo index.html se da cuenta que para finalizarlo necesita consultar algunos datos al servidor MySQL. Así, el servidor de PHP solicita al servidor MySQL que le devuelva información (por ejemplo, el nombre, descripción y precio de los productos de una tienda online).
  6. El servidor de MySQL le proporciona al servidor PHP la información reclamada por éste último y con dicha información el servidor PHP escribe por completo un archivo HTML.
  7. Una vez que el servidor PHP ha concluido con la generación del archivo HTML proporciona dicho archivo al servidor web.
  8. El servidor web envía el archivo HTML producido por el servidor PHP al navegador del usuario visitante de la página web.
  9. El navegador del usuario que visita la página web lee el archivo index.html y comprueba que tiene dos archivos asociados: la hoja de estilos style.css y el archivo de JavaScript dynamic.js.
  10. El navegador del ordenador del visitante realiza una petición al servidor web por cada archivo asociado al archivo HTML.
  11. Una vez se ha descargado el archivo HTML y sus demás archivos asociados el navegador del usuario visitante interpreta dichos archivos para mostrar una bonita página web.

En este ejemplo se han necesitado un 3 peticiones HTTP: una para el archivo HTML, otra para el archivo CSS y otra para el archivo JS, pero se pueden necesitar muchas más. Una web puede contar con varios archivos CSS o JS, pero también con imágenes, vídeos u otros elementos que requieran peticiones HTTP adicionales.

A menudo, el tiempo necesario para realizar una petición HTTP es mayor que el tiempo de descarga del archivo asociado a dicha petición. Por ejemplo, puede ocurrir que una web con tres imágenes pequeñas tarde más en cargar que una web con una imagen grande, aunque la imagen grande pese más que la suma de las tres imágenes pequeñas.

Captura de pantalla del software Yahoo! YSlow en el que se puede ver cuántas peticiones HTTP hace el navegador cuando visita la web de elmundo.es, y que es 253.

Imagen 7.9. Herramientas como Yahoo! YSlow analizan el número de peticiones HTTP que el navegador realiza cuando visita una página web. En la captura se observa que se realizan 253 peticiones cuando se visita elmundo.es.

Minimizar el número de peticiones HTTP necesarias para cargar una web es clave para ofrecer una alta velocidad de navegación, algo que repercute positivamente en la experiencia de uso y en el posicionamiento en buscadores.

En el Capítulo 4. Desmitificando la programación, mencionaba  jQuery, una librería de JavaScript.

jQuery es probablemente la librería más usada de todos los tiempos, y aunque tiene otras utilidades, se abusa usa con propósitos estéticos, como para dotar de movimiento a elementos de una página web.

David Baron, programador en Mozilla Corporation, nos cuenta qué pueden hacer los desarrolladores web para que sus sitios web funcionen más rápido:

También Google se esfuerza en evangelizar acerca de la importancia del tiempo de carga de una página web. Dos de sus mejores charlas al respecto son How Edmunds Decreased Page Load Time by 80% in 3 Simple Steps (“Como Edmunds Redujo el Tiempo de Carga en un 80% en 3 Fáciles Pasos”) y Faster HTML and CSS: Layout Engine Internals for Web Developers (HTML y CSS Más Rápido: el Funcionamiento del Motor de Layout para Desarrolladores Web).

La editorial técnica O’Reilly cada año organiza varios eventos por el mundo, llamados Velocity, centrados en mejorar el rendimiento de internet.

Aun así, la experiencia me ha enseñado que aunque la mayoría de las empresas se obsesionan por tener un bonito diseño web, a casi ninguna le preocupa el tiempo de carga, algo que como Microsoft y Google demostraron en un experimento conjunto tiene más repercusión en la experiencia de uso que el diseño. Es un caso de la paradoja del reactor nuclear y el cobertizo para bicicletas.

¿Por qué no utilizar JavaScript para todo?

A diferencia de PHP, JavaScript por sí solo no es capaz de acceder a una base de datos, con lo que la funcionalidad que nos ofrece es más limitada que la de los lenguajes de programación de servidor. Además, es más probable que JavaScript no funcione correctamente en algunos navegadores, mientras que con PHP –puesto que se ejecuta en el servidor– eso no puede pasar.

Otro motivo es la velocidad. La ejecución de un programa en PHP y la descarga del resultado de dicha ejecución puede ser más rápida que la descarga y ejecución de un programa en JavaScript.

Por último, JavaScript es un lenguaje muy simple como para desarrollar programas demasiado sofisticados (aunque aplicaciones web como Gmail han conseguido poner en duda esta afirmación).

¿Qué es AJAX?

AJAX (o Ajax) son las siglas de la expresión anglosajona “Asynchronous JavaScript and XML“, lo que se traduce como “JavaScript y XML Asíncronos”.

Gracias al intercambio de información en formato XML, JavaScript puede intercambiar información con una base de datos. Es decir, gracias a Ajax una página web puede actualizarse utilizando información de una base de datos almacenada en un ordenador remoto (el servidor), sin necesidad de tener que refrescar dicha página web. A esa actualización en segundo plano es a lo que se refiere la palabra “asíncrono”.

El uso de Ajax dio lugar a una nueva generación de aplicaciones web que proporcionaban una experiencia al usuario casi tan satisfactoria como la de las aplicaciones de escritorio. Un ejemplo es el cliente de correo gmail.com, capaz, entre otras virguerías, de mostrar que has recibido un nuevo mensaje sin necesidad de recargar la página web.

Pese a su nombre Ajax puede trabajar con otros formatos además de XML, como JSON.

Elección de tecnologías web

Si te enfrentas a un desarrollo web estas son las principales decisiones tecnológicas que tienes que tomar:

  1. Lenguaje de programación, y opcionalmente, framework o frameworks (Java, Ruby on Rails, PHP, .Net…)
  2. Sistema operativo del servidor (a menos que previamente hayas elegido un entorno de programación como ASP.NET, que por ser de Microsoft requiere un servidor con Windows).
  3. Gestor y servidor de bases de datos (MySQL, SQLite, PostgreSQL, MongoDB, NoSQL…)
  4. Servidor web (Apache, Nginx, Microsoft IIS…)
  5. Servidor de correo electrónico.
  6. Características técnicas de tu alojamiento.

No obstante, en el siguiente capítulo te convenceré de por qué, si las elecciones tecnológicas te preocupan, lo estás haciendo mal.

Memoria caché (web)

En el capítulo 2 aprendiste que los procesadores tienen integrada una memoria llamada caché. El lío está en que existe otro tipo de caché: la memoria caché web.

Cuando visitas un sitio web tu navegador guarda parte de sus recursos (imágenes, hojas de estilo, archivos JS, etc.) en tu disco duro. Este es el concepto de memoria caché web. De esta forma, la próxima vez que visites el mismo sitio web éste cargará más rápido, pues parte de sus recursos se obtendrán de tu disco duro, ahorrando así peticiones al servidor y tiempo de descarga.

Es posible que si un sitio web que has visitado sufre una modificación (por ejemplo cambia su logo) tú no veas el cambio. Esto se debe a que en lugar de obtener la última versión de un archivo estás viendo una versión anticuada, que es la que tu navegador guardó en tu ordenador cuando hiciste la primera visita.

Para ver el cambio deberás borrar la memoria caché de tu navegador o esperar a que caduque (porque el tiempo durante el que un archivo se conserva en la memoria caché es limitado).

Borrar datos de navegación -> Archivos e imágenes almacenados en la caché.

Imagen 7.10. Para borrar la memoria caché de Google Chrome tendrás que hacer clic en el botón “hamburguesa”, que es ese botón en la esquina superior derecha que consiste en tres rayas horizontales. Acto seguido, clic en el elemento de menú “Configuración”, luego en “Mostrar opciones avanzadas…”, después en “Borrar datos de navegación”, seleccionar “Archivos e imágenes almacenados en la caché” y por último clic en “Borrar datos de navegación”.

La memoria caché web es algo de lo que todos los sitios web deberían hacer un uso intensivo, pues se traduce en una mayor velocidad de navegación y menor consumo de recursos para cliente y servidor.

Captura de pantalla de la extensión Yahoo! YSlow para Google Chrome tras analizar la pagina web http://amazon.es. En la mitad izquierda de la imagen se muestra una gráfica de tarta y datos relacionados con el número de peticiones y datos que se transfieren cuando la página web se visita por primera vez, y en la mitad derecha se muestra una gráfica de tarta y datos relacionados con el número de peticiones y datos que se transfieren cuando la página web se visita una vez que ya ha sido cacheada por el navegador.

Imagen 7.11. La herramienta Yahoo! YSlow muestra el número de peticiones HTTP y la cantidad de datos descargados para una página web cuando se visita por primera vez y cuando se visita una vez que ha sido cacheada.
En la imagen superior se muestran los resultados de Yahoo! YSlow tras analizar la página de inicio de amazon.es: 88 peticiones y 1.607,3 kB en la primera visita (izquierda de la imagen, Empty Cache, que significa “Caché Vacía”) y tan sólo 3 peticiones y 306,9 kB una vez que la página web ha sido cacheada (derecha de la imagen, Primed Cache).

TPVs, CRMs y ERPs

Hagamos un paréntesis para definir las palabras más prostituidas del mundo de la gestión:

TPV

Siglas de “Terminal Punto de Venta”, que es el dispositivo y/o software que permite el cobro por tarjeta de crédito. Cuando hablamos de “TPV Virtual” nos referimos al software que permite, en una tienda online, cobrar a través de tarjeta de crédito y débito.

En un establecimiento físico el TPV habitualmente consta de un datáfono y a veces, también de un software que almacena las transacciones, muestra estadísticas básicas o transfiere datos de ventas a un software de gestión contable o a un CRM.

Aparato gris con pantalla y cable, de plástico, con un teclado numérico, tres teclas adicionales para cancelar (rojo), borrar (amarillo), y aceptar (verde), y una ranura en su parte inferior y otra en su parte superior para pasar tarjetas de crédito.

Imagen 7.12. Un datáfono es el aparato que permite el cobro por tarjeta en comercios. También se llama TPV, que son las siglas de “Terminal de Punto de Venta”. Un TPV Virtual es la tecnología que permite el cobro con tarjeta de crédito a través de internet.
(Imagen bajo licencia CC BY-SA 3.0 cortesía de whym.)

El TPV Virtual que nos proporciona el banco es un tipo de pasarela de pago (payment gateway en inglés). Otras de las muchas pasarelas de pago que existen son amazon payAuthorize.netbraintree, Google Wallet, PayPal o stripe.

Aunque los cuatro puedan almacenar información de clientes, TPV, CMS (gestor de contenidos), CRM y ERP cumplen funciones muy diferentes.

Algunas veces me han preguntado si en Clever Consulting, además de tiendas online, desarrollamos soluciones de comercio electrónico. Por más que he preguntado no he alcanzado a comprender la diferencia estas personas percibían entre una y otra cosa.

Por otro lado, un marketplace es un tipo de tienda online en la que son varios los vendedores que publican los productos que se venden.

CRM

CRM son las siglas de “Customer Relationship Management“, lo que se traduce como “Gestión de Relaciones con Clientes”. Un CRM es un software que facilita la gestión de la actividad comercial de una empresa. SAP, SugarCRM y SalesForce son algunas de las empresas que comercializan sus propias soluciones de CRM.

Un CRM no sirve para cobrar y mucho menos para gestionar un sitio web, y es infinitamente más complejo, completo y personalizable en lo que a la gestión de clientes se refiere de lo que lo es un TPV o un CMS.

ERP

ERP son las siglas de “Enterprise Resource Planning“, que se traduce como “Planificación de Recursos de la Empresa”. Un ERP es un software para facilitar la gestión de una empresa: finanzas, contabilidad, producción, almacén…

SAP es una empresa que comercializa sus propias soluciones de ERP, probablemente las más populares que existen. odoo es otra solución popular de ERP, y de código abierto.

Detalle del morro del coche de fórmula 1 del equipo de McLaren-Mercedes, en el que aparece el logotipo de SAP junto con los logos de Vodafone, Bridgestone, Mobil, y Mercedes.

Imagen 7.14. Aunque no te hayas dado cuenta casi seguro que ya conocías a SAP por alguno de los infinitos lugares donde se anuncian.
(Imagen bajo licencia CC BY-SA 2.0 cortesía de David Wall.)

APIs y servicios web

API son las siglas de “Application Programming Interface“, que se traduce como “Interfaz de Programación de Aplicaciones”. Una API es el medio por el que un software interactúa y se comunica con otro software.

Un servicio web es un tipo de API que permite el intercambio de datos, a través de una red, entre dos aplicaciones. Los datos se pueden intercambiar en CSV, XML, JSON u otros formatos.

Un servicio web sirve para, por ejemplo, actualizar en una tienda online las unidades disponibles de un producto (stock) de manera automática gracias a la información que proporciona un ERP.

Si una aplicación cuenta con una API entonces es posible construir un software que intercambie información con dicha aplicación.


Resumen

Una página web puede ser estática o dinámica. Las páginas web estáticas consisten en un archivo de texto, en formato HTML, que el navegador interpreta y muestra de una forma fácilmente legible para los humanos. Los archivos HTML de las páginas web dinámicas son generados por un programa (en PHP u otro lenguaje) para cada visita.

Además de los programas que generan los archivos HTML de las páginas dinámicas, llamados programas de servidor, existe un lenguaje de programación cuyo código se ejecuta en el cliente, JavaScript, y que por ejecutarse en el cliente puede producir cambios en una página web sin necesidad de que el usuario tenga que refrescarla, ofreciendo así mayor interactividad.

Son varios los servidores que intervienen en la carga de una página web, como el servidor web, el servidor del lenguaje de programación o el servidor de bases de datos.

Por cada recurso asociado a una página web (imágenes, hojas de estilo, archivos JS…) el navegador debe hacer una petición HTTP al servidor, lo que repercute en un mayor tiempo de carga de la página web.

jQuery es una librería de JavaScript muy utilizada en el desarrollo web, especialmente con fines estéticos.

Ajax es un conjunto de tecnologías que, a grandes rasgos, permiten la actualización de una página web sin tener que refrescar dicha página web.

La memoria caché web es el mecanismo por el que un sitio web guarda parte de sus recursos en tu disco duro para que así, en tu próxima visita, el mencionado sitio web cargue más rápido.

APIs y servicios web sirven para que varias aplicaciones interactúen entre sí.

Un TPV es la herramienta que permite el cobro por tarjeta de crédito. Algo distinto es un CRM, software para gestionar las relaciones con clientes, y un ERP, que ayuda en la gestión de una empresa y la producción de una fábrica.