Para entender los fundamentos de desarrollo web hay que conocer los diferentes protagonistas que interactúan entre sí en el terreno online, entidades que facilitan que lo que conocemos por “la web”, uno de los variados mecanismos y servicios de Internet, se haga posible.
Tanto si tu perfil es el de un usuario o navegante como si es el de un aspirante a introducirte en el mundo del desarrollo web, con esta publicación podrás podrás familiarizarte con los conceptos básicos relacionados y sus ámbitos de actuación. descubrirás aspectos muy interesantes que te vendrá muy bien conocer, ya que al fin y al cabo, tú también formas parte del complejo entramado que es Internet de una manera o de otra. ¿Empezamos?.
Contenidos de esta publicación
Qué es Internet
Internet es un sistema descentralizado de redes de ordenadores conectados, distribuidos en todo el mundo, que está disponible para ofrecer servicios de comunicación por medio de datos.
Su origen esta basado un sistema computacional cuyo objetivo era facilitar la colaboración científica en investigaciones de carácter militar, era el año 1969 y el nombre del invento de llamaba Arpanet.
El objetivo que se perseguía era evitar que las comunicaciones se cortaran por cualquier ataque enemigo, así que para conectar los ordenadores entre sí previnieron la posibilidad de utilizar diferentes rutas, favoreciendo que al fallar alguna se conservara la comunicación.
Además existían diferentes redes que se conectaban entre sí, por lo que se acuño el concepto de red de redes. Esta propiedad aún se conserva a día de hoya pesar de los numerosos avances tecnológicos que han contribuido a su evolución.
Internet hoy es una gran infraestructura física de comunicaciones que soporta un grandísimo conjunto de servicios, a la que nos conectamos habitualmente para interactuar con la infinita variedad de contenidos que existen. Para ello utilizamos diferentes dispositivos y software con diferentes lenguajes y protocolos.
Cómo funciona la web
La web es un sistema de distribución y recuperación de documentos basados en hipertexto que nació en un laboratorio de física nuclear a finales de los años 80. Se trata de un servicio que nos permite navegar a través de las numerosísimas páginas web que están alojadas en servidores de todo el planeta.
Encontramos lo que nos interesa gracias a buscadores que realizan un seguimiento de los enlaces gracias al protocolo “HTTP” y el lenguaje de marcado de hipertexto “html” que se encarga de componer las páginas en los navegadores.
El hecho de poner una dirección en nuestro navegador es comparable al de marcar un número de teléfono, nuestro ordenador como cliente que realiza llamada se pone en contacto con el servidor que está vinculado con esa dirección recibiendo la solicitud, este servidor la atiende enviándonos un lenguaje o código que nuestro navegador presenta después de interpretarlo.
Este proceso tan aparentemente sencillo y con el que estamos tan familiarizados implica una gran complejidad en su funcionamiento y la intervención de muchos actuadores.
Paradigma cliente-servidor
Los servidores son ordenadores que se conectan a internet con el software adecuado para permitir la consulta de información almacenada en ellos por parte de otros ordenadores conectados a la red. Un servidor puede ser cualquier equipo doméstico o pertenecer a una infraestructura de pequeños o grandes centros de datos, y es indispensable dentro del desarrollo web.
Las limitaciones de los equipos individuales o domésticos hacen inapropiado su uso para poder realizar tareas como servir la información a un gran número de solicitudes a la vez, además el tipo de conexiones y el ancho de banda de los equipos con estas características suele ser limitado. Otro inconveniente es el hecho de que la información debería estar disponible de forma permanente, y brindar la posibilidad de realizar copias de seguridad periódicas de esta información almacenada o actualizada, aparte de ofrecer otros requisitos mínimos de seguridad para su consulta y protección.
Estos motivos hacen que sea una práctica habitual elegir un proveedor de alojamiento web especializado para alquilar el espacio que ocuparán los archivos, sitios web de consulta o aplicaciones que dispongamos en los servidores que gestionan.
Estos servidores profesionales no siempre sirven la información con mayor rapidez, pero están preparados para soportar multitud de accesos de forma ininterrumpida y disponen de un ancho de banda considerablemente superior al que se puede utilizar en redes domésticas o del trabajo. Suelen estar apilados o dispuestos en rack y formando torres, con su ubicación en instalaciones especiales dotadas de medidas de seguridad.
Los usuarios que se conecten a la red para solicitar información a los servidores necesitan hacerlo mediante el uso de un software cliente web, se trata del navegador que utilizamos de forma habitual. También se puede utilizar software que permita interactuar a través de diferentes protocolos, como es el caso del protocolo FTP, permitiendo descargar íntegramente archivos del disco duro disponibles en el servidor.
Cuando en nuestro navegador hacemos una petición introduciendo una URL en la barra de dirección, esta solicitud es recogida por un servidor de nombres de dominio o DNS, este servidor traduce la URL en una dirección IP, que a su vez es utilizada por el navegador para localizar al servidor web que aloja la página concreta.
Según las características y enfoque en el desarrollo web de las páginas del sitio pueden ocurrir diferentes cosas:
- Sitios web estáticos: En el caso de una página en HTML esta se transfiere al navegador junto a sus contenidos asociados almacenados en directorios por medio de rutas, tales como imágenes, vídeo o audio, hojas de estilo, etc. Si existe algún tipo de script en la composición de la página este se ejecutará en el lado del cliente gracias al de nuevo navegador.
- Sitos web dinámicos: En este caso el proceso inicial es similar al anterior, pero después de que el navegador haga la solicitud de la página y el servidor DNS que le brinde la IP, en el lado del servidor tienen lugar otros procesos para buscar, encontrar y devolver información. Se trata de consultas a bases de datos que se ejecutan por medio de lenguajes del lado de servidor, como pueden ser PHP, .NET, Ruby, etc. gracias a las cuales se compone la página para enviarla al navegador junto al resto de elementos anteriormente descritos.
Qué son las DNS
Las direcciones IP identifican cada uno de los dispositivos que se conectan a internet, son como números de teléfono que interactúan a través de la red con el terminal correspondiente facilitando la conexión.
Las IP están formadas por grupos de números, por ejemplo… 897.657.210.345, pero como memorizarlas no sería viable debido a la cantidad de ellas que podemos consultar a lo largo del día, existe un sistema de nombres de dominio que facilitan una navegación fluida, se trata de los nombres de dominio que elegimos para definir las URL, y que a la vez son los alias de estas direcciones IP difíciles de recordar.
Las DNS (Domain name system) son precisamente las que se encargan de traducir esos nombres de dominio que nos benefician en las IP que interpretan las máquinas. Son tablas con las equivalencias entre los dominios y las direcciones IP, distribuidas y replicadas por distintos servidores en todo el mundo, y se actualizan ininterrumpidamente gracias a conexiones programadas. Nuestro distribuidor de acceso a internet nos proporciona dos direcciones de servidores de DNS.
Los proveedores de servicios de Internet suelen otorgar una IP diferente cada vez que se conectan los equipos domésticos o del trabajo, a no ser que se solicite una IP fija por un coste adicional. Sin embargo los servidores que alojan la información utilizan IPs fijas, evitando que el reconocimiento de su ubicación cambie de lugar.
Cuando un determinado contenido, página o sitio web cambia de asociación a un nuevo dominio e IP, se pone en marcha un proceso que se conoce como “propagación de DNS”. Es como se denomina al espacio conceptual de tiempo que tarda en asociarse la información con la nueva dirección para poder solicitarla, y se también se realiza en los servidores de todo el mundo.
Los protocolos de Internet en el desarrollo web
Los protocolos de internet, tan importantes para considerar en el desarrollo web, son conjuntos de normas que permiten compartir datos entre diferentes equipos y dispositivos independientemente de su arquitectura o su sistema operativo. Los protocolos son fundamentales en el sistema, ya que se utilizan a modo de estándares para garantizar el funcionamiento de todo en Internet.
Internet utiliza una familia de protocolos de red conocida como TCP/IP (protocolo de transmisión) y protocolo de Internet respectivamente. Este conjunto de protocolos es numeroso, aunque mayoritariamente se utiliza de forma consciente un pequeño grupo.
Cada uno de estos protocolos está diseñado para tareas muy específicas como por ejemplo HTTP para navegar, FTP para transferir archivos de una forma más eficiente, SMTP para transferir el correo de cliente a servidor, o POP para descargar los mensajes de correo desde el servidor hasta la bandeja de entrada del cliente de correo, IMAP que es similar a POP pero con características añadidas, RTP para la entrega de audio o vídeo a través de internet utilizado en las transmisiones de voz sobre IP y en las aplicaciones de chat, Telnet y SSH para crear conexiones remotas interactivas en forma de terminal virtual, etc… existen unos cuántos más.
TCP/IP opera a través del uso de una pila de capas entre las que se distribuyen los protocolos necesarios para completar una transferencia de datos. Las capas son también los diferentes niveles por los que van pasando los datos.
Anatomía de una URL
Un URL (localizador uniforme de recursos) permite localizar el servidor correcto gracias a su sintaxis, y al servidor localizar el recurso solicitado, ya que los archivos de las páginas web están alojados en los discos duros de los servidores, y generalmente distribuidos en diferentes carpetas o directorios.
Las URL pueden ser muy largas y complejas o muy cortas y sencillas
Ejemplo: http://www.restaurantemanuel.es
Si analizamos sus partes, serían las siguientes:
- El inicio “http” es el protocolo de navegación
- Los dos puntos y barras “://” se encargan de separar el protocolo del nombre del recurso.
- Los caracteres “www” hacen referencia al subdominio principal.
- El nombre de “restaurantemanuel” representa el dominio de segundo nivel.
- La extensión “.es” es el dominio de primer nivel.
Las dos últimas partes “restaurantemanuel” y “.es” conforman el concepto de dominio o nombre que utiliza el navegador para localizar al servidor y su contenido. Normalmente no es necesario utilizar el subdominio principal “www” ya que el mismo servidor suele seleccionar el que está por defecto, pudiendo introducir simplemente «restaurantemanuel.es» para ser redirigidos a la dirección completa y correcta de la página web.
Los navegadores son las aplicaciones que instalamos localmente en un ordenador y que nos permiten realizar consultas y navegar por las páginas web. Son indispensables para trabajar y realizar pruebas en el desarrollo web, disponen de una interfaz de usuario con un marco que envuelve la página web y contenidos que muestra, e incorpora la barra de direcciones y otros elementos como la barra de scroll, botones y otros que pueden variar en función del modelo y la configuración realizada o incluso diferentes extras que se hayan instalado.
Los navegadores disponen de un motor interno que se encarga de gestionar las comunicaciones a través de varios componentes.
También incorporan un motor de renderizado que interpreta en código HTML y CSS y controla la representación visual de las páginas. Esta interpretación puede variar ligeramente entre diferentes navegadores, motivo por el que muchas páginas no se ven exactamente igual en ellos.
Por supuesto incorporan el protocolo HTTP y otros adecuados que pueden variar según el modelo, la versión, la operatividad o incluso las necesidades del usuario.
El navegador dispone de capacidad para almacenar datos asociados a las cookies y otros archivos de las páginas que se visitan, y también de la gestión de sesiones que dependen de ellos. Aunque en HTML5 existen otros modelos de almacenamiento de datos en el cliente o navegador.
El intérprete de JavaScript se encarga de la ejecución del código JavaScript que tiene lugar en el navegador, y también puede haber diferencias sobre la interpretación de este código entre navegadores.
Existe contenido que los navegadores no pueden procesar o interpretar por si mismos, en algunos casos necesitan extensiones para poder hacerlo. También existen plugins, módulos o componentes añadidos para poder visualizar determinados contenidos cuyos archivos han sido generados con aplicaciones no estandarizadas, como es el caso de Flash player o Silverligth.
Estándares web y W3C
Los estándares web se hacen necesarios para establecer unas normas basadas en criterios que establezcan un equilibrio en el terreno online. Esto evita que los principales comercializadores de software y hardware enfoquen sus esfuerzos desde un punto de vista exclusivamente comercial y beneficioso solo para ellos, compitiendo además entre sí por dominar diferentes mercados, algo que era bastante habitual allá por el año 1995, en plena guerra de los navegadores.
Esto propiciaba por ejemplo que cada navegador interpretara los contenidos de manera muy diferente, obligando a los desarrolladores de sitios web a incluir indicaciones sobre el navegador concreto en el que debía visualizarse cada página y su qué versión.
Por suerte diferentes comités de estandarización fueron precedidos por el “Web Standards Project” o proyecto de estándares web, formado por un grupo de diseñadores y desarrolladores descontentos con la situación.
Ellos empezaron a recomendar de manera organizada la adopción de las recomendaciones de la World Wide Web, consorcio W3C, una comunidad internacional que promueve estándares para reducir el coste y complejidad del desarrollo, garantizando la accesibilidad y viabilidad de los documentos y el crecimiento de la web a largo plazo.
Las recomendaciones del W3C no empiezan a ser adoptadas por las principales empresas actuadoras hasta 1998. La entrada en la escena de otros navegadores de código abierto como Firefox, coordinado por la corporación y la Fundación Mozilla, contribuyeron a que otras compañías de software advirtieran las ventajas de a largo plazo de apoyar los estándares web.
Los diseñadores y desarrolladores actuales buscan que su trabajo se adapte a estos estándares para garantizar que funcione correctamente en diferentes plataformas y dispositivos. Aún así siempre hay diferentes interpretaciones por parte de los navegadores que obligan a los diseñadores a realizar ajustes para lograr los mejores resultados.
Los estándares web renuevan habitualmente las especificaciones para diferentes lenguajes como HTML y CSS, así que el desarrollo implica lógicamente mantenerse pendiente de novedades y actualizaciones. También hay que tener en cuenta que estos aspectos no son incorporados de forma inmediata por los navegadores, más bien es algo que sucede progresivamente.
Los servidores web para almacenar la información
Todos los servidores poseen una IP única, pero bajo el concepto de alojamiento virtual pueden servir diferentes sitos web almacenados en sus discos duros con nombres de dominios también diferentes bajo esta única IP. Este modelo recibe la denominación de “alojamiento compartido”, pero si el proyecto web es suficientemente grande en términos de almacenamiento, es posible contratar planes de servidores “dedicados” para hacer un uso exclusivo de ellos.
Según la naturaleza del sitio web puede ser posible la ejecución de código en el servidor, y para ello este debe contar con las aplicaciones web necesarias. Para ello existen diferentes combinaciones, entre las más conocidas e encuentra el conocido como “paradigma AMP” que integra un software de servidor Apache basado el el protocolo http para navegar, un gestor de bases de datos MySql para almacenar el contenido, y el lenguaje de programación avanzada PHP que se encarga de solicitar datos a la base de datos para componer las páginas y servirlas posteriormente.
Este trío tiene en común la particularidad de ser de código abierto, pero existen otras alternativas que implican otros lenguajes, bases de datos y servidores, también libres o con un coste adicional. La elección de un sistema u otro dependerá de las preferencias y requerimientos, así como del tipo de proyecto.
La tecnología Front end
El término “front end” hace referencia a los lenguajes que operan del lado del cliente para ser interpretados por el navegador. Los lenguajes más extendidos para su utilización en el lado del cliente son HTML, CSS y JavaScript.
El primero HTML es un sencillo código de etiquetas que define la estructura del contenido, mientras que CSS se encarga de la apariencia visual de la página web interactuando con las etiquetas de HTML, y JavaScript cubre la necesidad de desarrollar comportamientos avanzados con multitud de posibles funcionalidades.
Aunque el front end se relaciona más con perfiles enfocados al diseño por el uso de HTML y CSS con sus características más estéticas, la verdad es que implica también la concepción y lógica de la programación pura y dura al incluir JavaScrip en el proceso de desarrollo.
La tecnología Back end
El back end o programación del lado de servidor consiste en el procesamiento de una petición de un usuario mediante la interpretación de un script en el servidor web. El objetivo es generar páginas web HTML dinámicamente como respuesta a esa petición.
Aunque cada lenguaje tiene sus diferencias, el proceso de scripting del lado de servidor es similar en ellos. Cuando el usuario realiza una solicitud, el código del lenguaje de lado de servidor realiza habitualmente una consulta en la base de datos, que puede incluir también cálculos y procesos para definir la respuesta.
Las páginas se devuelven al usuario componiéndose en el momento de la búsqueda o interacción, esto se conoce como una secuencia de comandos del servidor, y también sucede cuando nos damos de alta o nos registramos, al rellenar y enviar un formulario, si hacemos reservas o compramos un billete de tren, entre otros muchos casos.
El hecho de que el código se ejecute en el servidor implica la protección de esta información sensible que queda almacenada con seguridad. Por otro lado la carga de la ejecución recae sobre el servidor que debe estar preparado para ello.
El sistema en su conjunto es más lento, ya que la página debe descargarse y componerse por completo para mostrarse en el navegador, al contrario que con el código ejecutado solo y exclusivamente del lado del cliente.
Nota importante: Aunque la tecnología front end y back en son diferentes desde el punto de vista técnico, lo cierto es que a efectos prácticos el código del lado del cliente y del servidor se solapan. Generalmente se encuentran conectados y se hace un uso mixto de estas dos tecnologías.
Otras tecnologías complementarias en el desarrollo web
Hemos tratado algunos de los conceptos básicos sobre tecnologías de desarrollo web, pero existen además variedad de tecnologías complementarias basadas en las anteriores para facilitar la creación de sitios web. Entre los diferentes recursos se encuentran las plantillas con diseños y funcionalidades predefinidas, preprocesadores, gestores de contenidos, frameworks o marcos de desarrollo con activos que agilizan el proceso de diseño, y los IDE (inferfaces de desarrollo de aplicaciones) que ofrecen la combinación de todo tipo de accesorios y complementos.
Estos medios también pueden incluir fuentes tipográficas, iconos, librerías con funciones previamente desarrolladas de lenguajes de programación, archivos CSS, plantillas en HTML, etc… y constituyen una base ideal sobre la que construir proyectos web personalizados partiendo de prototipos.
Conclusiones
El desarrollo web necesita y se alimenta de muy diferentes sistemas, enfoques, procedimientos y recursos, que comprenden una compleja trama de elementos que interactúan entre sí para lograr disponer contenidos interactivos con información y servicios a los que podamos acceder.
A la vez es un entorno cambiante, siempre para mejorar, y los avances se suceden de manera constante, sobre todo en el terreno del desarrollo de nuevas aplicaciones o complementos, que resuelven problemas u ofrecen una mejor solución a los que ya hay. Aunque como se suele decir “cada maestrillo tiene su librillo” o metodología, lo cierto es que el desarrollo web exige permanecer en constante aprendizaje.
Enlaces de interés
- Consorcio W3C (World Wide Web Consortium) : Consorcio internacional que genera recomendaciones y estándares para a asegurar el crecimiento de la web a largo plazo.
- Fundación Mozilla (Mozilla Foundation): Es una organización sin ánimo de lucro que tiene como misión mantenr la elección e innovación de internet.
