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, si has leído todos los capítulos de este libro 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 web estática
  3. Qué ocurre cuando visitas una página web estática
  4. Qué son las peticiones HTTP y su importancia
  5. Cómo funciona una página web dinámica
  6. Diferencias entre un lenguaje de programación de servidor y un lenguaje de programación de cliente (o, en otras palabras, qué es JavaScript)
  7. Qué es AJAX y por qué es tan maravilloso
  8. Qué es la otra memoria caché, la caché web
  9. Qué es un TPV, un CRM y un ERP, y por qué son cosas distintas que nada tienen que ver con un CMS
  10. 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 creado una nueva página web en internet. Para visitarla sólo tendrás 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 manualmente.

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 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 archivo de texto, 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 ya hemos visto 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).

Obviamente, 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 se 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 en el equipo de Google Chrome, donde explica en mayor detalle que con el que yo lo he hecho cuál es el proceso que sigue un navegador hasta mostrar una página web y cómo exprimir ese conocimiento 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 hoja 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.

Pero además de éstos existe un elemento importante del que apenas hemos hablado todavía: el lenguaje de programación del cliente. Se trata de programas, similares a los escritos en PHP, que en lugar de ejecutarse en el servidor y devolver un resultado, se ejecutan en el cliente –el navegador–.

JavaScript

El lenguaje de programación de cliente más utilizado (y prácticamente el único utilizado) 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.

Por contra, para visualizar un cambio producido por un lenguaje de programación de servidor (como PHP) no queda otro remedio que recargar la página web.

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 dicha 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 es capaz de escribir 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 con la ayuda del servidor MySQL, 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 nuevas peticiones al servidor web por cada archivo asociado al archivo HTML recién descargado. En este caso el navegador realizará dos peticiones más: una para descargar el archivo style.css y otra para descargar el archivo dynamic.js.
  11. Una vez se ha descargado el archivo HTML y todos sus archivos asociados, el navegador del usuario visitante interpreta el texto que contienen para mostrar una bonita página web con el formato y estilos indicados en dichos archivos.

Como has visto, los archivos JavaScript (JS) y las hojas de estilo (CSS) son archivos asociados al archivo HTML y por cada uno de ellos el navegador debe realizar una petición al servidor web para que éste se los envíe.

En el ejemplo anterior se han necesitado un total de 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 y de muy baja resolución tarde más en cargar que una web con una imagen grande de alta resolución, aunque ésta imagen grande pese más que la suma de las tres imágenes pequeñas de la otra página web.

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 de una página web.

En el Capítulo 4. Desmitificando la programación. mencionaba que jQuery es 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 movimientos de elementos de la 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 en Firefox (aunque en realidad, aplicar sus consejos reducirá el tiempo de carga de una web en cualquier navegador):

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.

En cuanto al diseño y la velocidad de una página web se da la paradoja del reactor nuclear y el cobertizo para bicicletas. Mientras la mayoría de las empresas se obsesionan por proporcionar una buena experiencia a sus visitantes a través de un bonito diseño web, a casi ninguna le preocupa el tiempo de carga de su sitio web, algo que, como Microsoft y Google demostraron en un experimento conjunto, tiene más repercusión que el diseño en la experiencia de uso.

¿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: no puede extraer información de una base de datos, ni escribir nuevos datos, con lo que la funcionalidad que nos puede ofrecer es más limitada que con 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 es algo que 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.

Lo último y más importante es que JavaScript es un lenguaje muy simple como para desarrollar programas demasiado sofisticados (aunque por otro lado, aplicaciones web como Gmail desafían 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 recibir información de una base de datos y también enviarla. 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 por completo dicha página web.

Esa actualización en segundo plano de una página web es lo que significa 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 en las aplicaciones de escritorio. Un buen ejemplo es el cliente de correo Gmail.com que, por ejemplo, muestra la recepción de un nuevo correo electrónico sin tener que recargar la página web.

Por cierto, pese a su nombre, Ajax no necesariamente debe emplear archivos XML, también es posible intercambiar información con otros formatos, como JSON.

Elección de tecnologías web

Si te enfrentas a un desarrollo web a medida estas son las principales decisiones tecnológicas que tienes que tomar antes de empezar con él:

  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. Lenguaje 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.

Y aunque estas decisiones deberían ser tomadas o asesoradas por tu proveedor de diseño y desarrollo web, y son importantes, 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 el término “memoria caché” se usa en otro ámbito que, aunque parecido en concepto, nada tiene que ver en su funcionamiento: la memoria caché web (comúnmente llamada caché web).

Cuando visitas un sitio web, dependiendo de cómo esté construido dicho 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 ya has visitado un sitio web y éste sitio web sufre una modificación (por ejemplo cambia el logo de su cabecera o cambia el favicon) tú no veas el cambio si vuelves a visitar el sitio web con el mismo navegador que con el que hiciste la visita anterior. 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 al sitio web en cuestión.

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 ya 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 ya ha sido cacheada por el navegador (derecha de la imagen, Primed Cache, que significa que la página que se visita está almacenada en la caché del navegador).

TPVs, CRMs y ERPs

Antes de continuar hacemos un inciso para definir algunas de las palabras más prostituidas en el mundo del desarrollo web y la gestión empresarial:

TPV

TPV son las 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, adicionalmente, de un software que, instalado en un ordenador, almacena todas las transacciones del establecimiento y en algunos casos 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 no es diferente en su concepto, es la tecnología que permite el cobro/pago 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 PayPal, Google Wallet o Authorize.net.

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

Es un buen momento para aclarar que, por lo general, las expresiones “comercio electrónico” y “tienda online” se utilizan como sinónimos. Esta explicación está dedicada a las muchas personas que a lo largo de los años, tras que les dijera que en Clever Consulting desarrollamos, entre otras cosas, tiendas online, me han preguntado si seríamos capaces de desarrollar un proyecto de comercio electrónico. Nunca he sabido cuál es la diferencia que éstas 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 diseñado para facilitar y optimizar 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.

A diferencia de un TPV, 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 diseñado para facilitar y optimizar la gestión global de una empresa: finanzas, contabilidad, producción y almacenaje, ventas, servicio de atención al cliente, …

Un CRM puede ser parte de un ERP.

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

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 antes, 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, con la información proporcionada por un ERP.

Si una aplicación cuenta con una API probablemente sea posible construir un software que permita intercambiar 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 puede guardar 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.

Gracias a una API y a través de servicios web podemos hacer que varias aplicaciones interactúen a través de una red.

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