Tecnologías Web: Un Viaje de HTML a la Web 3.0

Este artículo es especialmente para aquellos lectores que buscan obtener algún conocimiento sobre o están interesados en trabajar como desarrolladores web o en cualquier otro aspecto de la web.

En este artículo, nos centraremos en lo esencial de algunas tecnologías web conocidas y no tan conocidas. Después de una introducción rápida y sencilla a la tecnología web, repasaremos los conceptos básicos de varios tipos de tecnología web.

En el transcurso de nuestra discusión, también cubriremos una breve historia de la tecnología web, así como algunas características y funcionalidades de cada tipo de tecnología de la que hablamos.

¿Qué Son Las Tecnologías Web?

Las tecnologías web son las diversas herramientas y técnicas que se utilizan en el proceso de comunicación entre diferentes tipos de dispositivos a través de Internet.

Para entender mejor este término, dividámoslo en dos partes: ‘web ‘ y’tecnología’.

La web, en este caso, se refiere a la World Wide Web, más comúnmente conocida como WWW. Surgió por primera vez en 1989, cuando el famoso científico e ingeniero Tim Berners-Lee ideó un mecanismo eficiente para compartir recursos entre científicos de todo el mundo.

El concepto de la web se puede explicar fácilmente con la ayuda de un ejemplo.

Supongamos que estás buscando una foto de una linda llama. Escribe ‘www.google.com en su navegador web. Introduce ‘linda llama’ en la barra de búsqueda y haz clic en la pestaña’ Imágenes’. Google te ofrece una gran cantidad de imágenes de llamas recopiladas de millones de fuentes diferentes.

Después de desplazarte un poco, piensas: «¡Oh, me gusta esta imagen!»Pero necesitas ver la imagen de tamaño completo antes de descargarla. Por lo tanto, abre la imagen original y llega a esta página:

¿Notaste la caja roja?

Es la URL (un tipo de identificador) para esta imagen en particular. De la misma manera, cada imagen de llama que hayas visto tendría una URL diferente que ayudaría a localizar esa imagen en Internet.

Todas estas páginas web, documentos y cualquier otro recurso se identifican y localizan con la ayuda de sus URL. Estos forman colectivamente lo que llamamos la World Wide Web.

El conocimiento que acumulas sobre la web y cómo funciona debe aplicarse para darle un mejor sentido. Para esto, necesita conocer los conceptos básicos de algunas tecnologías web comunes. Para obtener una mejor comprensión de la web, echemos un vistazo a algunos tipos básicos y ejemplos de tecnología web que se usan comúnmente en este campo.

¿Cuáles son los Diferentes Tipos de Tecnologías Web?

Dado que tenemos un espacio limitado para examinar la amplia gama de tecnologías web disponibles, hemos seleccionado algunas que utilizan con mayor frecuencia tanto principiantes como expertos en la industria. Los hemos dividido en las siguientes secciones:

1. Lo básico, que cubrirá los navegadores web y algunos fundamentos de desarrollo de aplicaciones web
2. Lenguajes de programación y marcos que se utilizan en el desarrollo de sitios web
3. Bases de datos que se utilizan en el backend para almacenar datos requeridos o recopilados por sitios web
4. Algunos protocolos, es decir, reglas para comunicarse en la web
5. Algunos formatos de datos que se utilizan generalmente para transmitir datos a través de Internet
6. Otras tecnologías web diversas

Mientras que nosotros comenzará con lo básico, nuestra discusión puede volverse un poco más técnica a medida que avanzamos en el artículo.

Ahora, vamos a entrar en los detalles de cada componente que enumeramos.

Lo básico

En esta sección, hablaremos sobre los navegadores web y algunos otros fundamentos web.

Navegadores web

Los navegadores web, a menudo llamados simplemente navegadores, nos permiten ver todos los recursos que forman parte de la World Wide Web. Se basan en una arquitectura cliente-servidor. El cliente es el navegador en este escenario. Puede pensar en el servidor como una combinación de software y hardware que recibe las solicitudes del cliente y luego envía el recurso solicitado al cliente.

Cada vez que ingresa una URL en la barra de direcciones de un navegador, transmite su solicitud al servidor y luego obtiene y muestra lo que el usuario solicitó.

Algunos navegadores web populares son Opera, Mozilla Firefox, Google Chrome y Safari.

Tecnologías de desarrollo Frontend vs Backend

¿Qué es el desarrollo web?

El desarrollo web se refiere al proceso de creación de sitios web. Este proceso se basa en una serie de pasos, que cubriremos con más detalle cuando exploremos las herramientas involucradas en cada proceso.

Las dos partes de un sitio web típico

A medida que avanzamos, discutiremos las tecnologías de desarrollo web individuales y las herramientas utilizadas para crear sitios web. Pero antes de eso, tenemos que ser claros en las dos partes distintas de un sitio web: el frontend y el backend.

Frontend se refiere a todas las partes de un sitio web que un usuario puede ver en su pantalla e interactuar con ellas.

El motor se refiere exactamente a lo contrario de eso. Involucra los mecanismos ocultos que hacen que una página web funcione. Un usuario típico generalmente no es consciente de lo que sucede en el backend.

En el proceso de diseño y desarrollo web se utilizan diferentes tecnologías web.

Aquí hay una breve descripción de las diferencias entre las dos categorías de desarrollo web.

Frontend	Backend
del lado del Cliente	del lado del Servidor
diseño de sitio Web	Bases de datos
UI/UX	Servidores
Algunas tecnologías de interfaz de usuario:	Algunos backend tecnologías:
HTML	PHP
CSS	Java
JavaScript	Python
AJAX	Ruby
	.CIFRAS NETAS

HTML

El lenguaje de marcado de hipertexto, más comúnmente conocido como HTML, es donde comenzó el WWW. Es un componente crítico de todas las lecciones introductorias que cubren los conceptos básicos de la web. Es un lenguaje del lado del cliente que se utiliza para codificar el frontend de un sitio web. Ayuda a los desarrolladores a definir cómo se estructurará la página web, y lo hace con la ayuda de elementos que se identifican por etiquetas.

Aquí hay un ejemplo muy básico de un fragmento de código escrito en HTML:

<!DOCTYPE html><html><body><h1 style="background-color:SteelBlue; color:LightSteelBlue; font-family:Cambria; font-size:200%">Hello, We Are GoodCore Software.</h1><p style="background-color:LightSteelBlue; color:SteelBlue; font-family:Calibri; font-size:150%">Good to the Core! &#128513;</p></body></html>

Cada elemento incluido entre los corchetes < > es un elemento. DOCTYPE, sin embargo, es solo una declaración que comunica al navegador que lo que está a punto de cargar es un documento HTML. El elemento < body> define todo el contenido que forma el cuerpo del documento. < h1> y <p> indican el comienzo de un encabezado y un párrafo, respectivamente. </cuerpo>, </h>, y </p> son etiquetas de cierre. Indican dónde termina el cuerpo, el encabezado y el párrafo.

En este ejemplo, el atributo style se utiliza para asignar un color de fondo, color de fuente, familia y tamaño particulares al texto. Se puede ampliar aún más para incluir el estilo de fuente (negrita, cursiva, ital), alineación (centro, izquierda, left), etc. Otros atributos, aparte del estilo, también se pueden usar para modificar elementos de manera similar.

(La cadena de caracteres aleatorios &#128513; al final del párrafo hay un elemento sorpresa que puedes ver en la pantalla de salida a continuación!)

CSS

CSS es una de las tecnologías de diseño de sitios web más fundamentales. Para embellecer aún más sus páginas web, puede integrar CSS (Hojas de estilo en cascada) en su código HTML.

El proceso de aplicar ciertos estilos a ciertos elementos de su código HTML puede convertirse en una tarea repetitiva. Para ahorrar tiempo y energía, CSS se puede utilizar para agilizar el proceso de estilo de sus páginas en todo el sitio. Una vez que prepare una hoja de estilos con todos los estilos de fuente, colores y otras características predeterminados relacionados con el diseño general de una página web, puede aplicarla en todo el sitio. CSS también se combina con Bootstrap para diseñar aplicaciones web para dispositivos móviles.

Lenguajes de programación y Frameworks

Los lenguajes de programación son el componente más básico de la creación de sitios web. Para codificar un sitio web, necesita estar familiarizado con algunos conceptos de programación, algunos lenguajes y su sintaxis, y un buen IDE de desarrollo. Algunos de estos lenguajes pueden ser de uso general, pero otros están creados específicamente para el desarrollo web.

A continuación se muestran algunos ejemplos de lenguajes de desarrollo web de uso común.

1. Java

Java fue creado en 1991 como un lenguaje de programación de propósito general, pero poco a poco evolucionó para desempeñar un papel importante en el desarrollo web a mediados de los años 90.

Java es bien conocido debido a algunas de sus características sorprendentes, incluida su

• Naturaleza orientada a objetos
• Portabilidad e independencia de plataforma
• Sintaxis simple
• Capacidad de aprendizaje
• Robustez

Cuando se trata de desarrollo web, Java se usa generalmente en el lado del servidor.

2. JavaScript

JavaScript se creó por primera vez en 1995. Hoy en día, es uno de los favoritos de los desarrolladores de todo el mundo. Ahora es un componente vital del desarrollo web que ayuda a crear elementos dinámicos de páginas web.

La introducción de JavaScript provocó la ola revolucionaria de páginas web interactivas. Hoy en día, la inclusión de elementos gráficos, la integración de bases de datos y la dinámica general de un sitio web son posibles debido a la llegada de JavaScript.

Aunque JavaScript se introdujo inicialmente como lenguaje de desarrollo de frontend, ahora se está convirtiendo en una opción popular para el desarrollo de backend también.

3. Python

Python ha existido durante años, pero solo recientemente está ganando popularidad debido a su sintaxis extremadamente fácil de aprender y legible, así como a su alta productividad. Una tarea que podría usar 10 líneas de código cuando se escribe en cualquier otro lenguaje de programación podría lograrse fácilmente en 2-3 líneas de código Python.

Para el desarrollo web del lado del servidor, Python se usa a menudo junto con los frameworks Django o Flask, lo que simplifica aún más el proceso de desarrollo.

Este año, StackOverflow informó que Python superó a Java y C en términos de popularidad, y ocupó el segundo lugar en la lista de lenguajes de programación más queridos.

4. PHP

PHP, acrónimo recursivo, significa PHP: Preprocesador de hipertexto. Es el lenguaje de scripting más popular y ampliamente utilizado preferido tanto por novatos como por profesionales experimentados en la industria del desarrollo web. Es muy fácil de aprender y es absolutamente gratis.

Cuando se usa con Apache (o cualquier otro) servidor HTTP en el backend, PHP le permite entregar proyectos de desarrollo web eficientes, de alta velocidad y de alto rendimiento. Además, dado que PHP ha existido durante años y solo ha crecido y mejorado, hay un amplio soporte de la comunidad de desarrolladores fácilmente disponible.

5. Ruby

Introducido a mediados de los años 90, Ruby es un poderoso lenguaje de programación de propósito general que, con los años, se ha vuelto popular entre los desarrolladores de back-end. A menudo se usa junto con su popular framework Ruby on Rails. Ruby está especialmente recomendado para sitios web con mucho tráfico y aquellos que requieren mucho trabajo al final de la base de datos. También es útil para escribir aplicaciones escalables.

Los sitios populares como Twitter y Shopify se construyeron con Ruby en el backend.

6. Objective-C & Swift

Tanto Objective – C como Swift son lenguajes de programación de uso general que se utilizan específicamente para crear aplicaciones para dispositivos Apple que ejecutan macOS e iOS.

Objective-C se basa en C, mientras que Swift se basa en gran medida en la sintaxis de C++. Aunque Objective-C ha existido durante muchos más años que Swift, el primero está perdiendo seguidores lentamente a medida que se vuelve cada vez más obsoleto. Se espera que Swift reemplace gradualmente a Objective-C con sus características más avanzadas, facilidad de uso y seguridad. Desde que Swift era de código abierto, los desarrolladores también lo han utilizado para el desarrollo web.

Frameworks

En términos simples, un framework se puede definir como código esqueleto. Piense en ello como un esbozo sin detalles finos. Un framework define las funciones o tareas básicas que se espera que realice el código. Sin embargo, para decirle a ese programa en particular cómo realizar esas funciones, tendrá que escribir algunas instrucciones más detalladas y específicas.

Echemos un vistazo a algunos frameworks que son comúnmente utilizados por los programadores con el propósito de desarrollo web de backend, junto con los lenguajes con los que funcionan mejor. Esta lista incluye algunas de las últimas tecnologías de sitios web.

Marcos	Idiomas
Vue.js	JavaScript
Express	Nodo.js (JavaScript)
Reacciona.js	JavaScript
AngularJS	JavaScript
Django	Python
Matraz	Python
Laravel	PHP
Ruby on Rails	Ruby
Catalizador	Perl
Cacao & Cocoa Touch	Swift

la Elección entre estas opciones depende de sus necesidades de desarrollo. Debe determinar qué combinación de marco y lenguaje se ajustará mejor a sus requisitos de escalabilidad, seguridad y productividad sin invertir mucho en aprender la tecnología en sí.

Bases de datos

Todos los datos que se intercambian en la web deben almacenarse en algún lugar. Para este propósito, la mayoría de los sitios web tienen sus propias bases de datos asociadas a ellos.

A continuación se muestra una lista de algunas bases de datos, algunas relacionales y otras no relacionales, que se usan comúnmente para aplicaciones web.

• MySQL
• SQL Server
• Postgres
• Oracle
• MongoDB
• Redis

Formatos de datos

Siempre que sea necesario para intercambiar datos entre dos dispositivos en la web, se sigue un procedimiento adecuado. Los datos se empaquetan correctamente para su transmisión desde el origen al destino. Las API especiales (Interfaces de programación de aplicaciones) se diseñan e integran en los sitios web para un intercambio de datos conveniente. Organizar los datos de tal manera que el receptor puede fácilmente decodificar y entender.

A continuación se muestran dos formatos de datos comunes utilizados en el desarrollo web.

1. XML

XML significa Lenguaje de marcado extensible. Discutimos la sintaxis para HTML al principio de este artículo. XML funciona de manera similar, ya que desglosa los datos en elementos identificados por varios tipos de etiquetas. Sin embargo, con XML, puedes inventar tus propias etiquetas para describir mejor tus datos. Estos datos, al llegar a una aplicación web o servidor, se pueden comprender y analizar fácilmente.

Veamos un ejemplo de un registro de un estudiante, sus datos personales y sus cursos registrados en la universidad. Así es como se vería almacenado en XML:

<student><studentname>Regina George</studentname><year>2</year><courses><course>Compiler Design</course><course>Film Studies</course><course>Accounting</course></courses></student>

Aquí, el nodo principal o raíz es student. el nombre del estudiante, el año y los cursos son nodos secundarios. Se podría decir que estos son atributos del nodo raíz. Al igual que en el caso de HTML, los datos XML también se escriben entre las etiquetas de apertura y cierre de los nodos secundarios.

2. JSON

Después de años de experimentar la voluminosidad de XML y el gran consumo de ancho de banda, los expertos crearon JSON (Notación de objetos JavaScript). A diferencia de XML, JSON se centra más en el intercambio de datos rápido y fácil que en la definición y modelado detallados de datos. También elimina toda la carga adicional que conlleva XML en forma de etiquetas repetitivas.

JSON se basa en el conocido mecanismo de par clave-valor. Su sintaxis se asemeja a la de JavaScript, por lo que es bastante fácil de leer y entender.

Veamos cómo aparecería nuestro ejemplo anterior de un registro de estudiante cuando se almacena es JSON:

{"studentname": "Regina George","year": "2","courses": }

Aquí, el estudiante es el objeto. el nombre del estudiante es un ejemplo de una clave, que es un atributo del objeto estudiante. Su valor asociado es Regina George. Del mismo modo, los cursos también son una clave. Sin embargo, tiene la forma de una matriz (indicada por los corchetes), ya que tiene múltiples valores asociados, es decir, Diseño del Compilador, Estudios de Películas y Contabilidad.

Protocolos

Los protocolos web son algunas reglas predefinidas que deben seguir todos los que se comunican a través de la web.

HTTP

El Protocolo de transferencia de hipertexto, más conocido como HTTP, es un protocolo web que define dos conceptos:

1. Cómo se transmiten las solicitudes de los clientes a los servidores
2. Cómo responden los servidores a las solicitudes de los clientes

La solicitud debe especificar los siguientes cuatro elementos:

1. La URL del recurso que el cliente desea
2. Un método, como GET (que se usa para obtener datos del servidor) o POST (que se usa para enviar datos que deben actualizarse en el servidor)
3. Una lista de encabezados (los encabezados de solicitud pueden contener información diversa sobre el cliente o el recurso que han solicitado, como el nombre del navegador del cliente, el sistema operativo, el tamaño solicitud, información de control de acceso/credenciales, etc.)
4. El cuerpo que contiene la información que el cliente desea enviar al servidor

El servidor envía una respuesta desde el otro extremo una vez que se ha atendido una solicitud. Esta respuesta especifica tres elementos:

1. Un código de estado que tiene la forma de un número de 3 dígitos (un código de estado que puede haber visto durante sus sesiones diarias de navegación web es 404, que indica que no se pudo encontrar el recurso solicitado.)
2. Una lista de encabezados (los encabezados de respuesta se asemejan a los encabezados de solicitud en la estructura y pueden contener información como el tamaño del mensaje, el tipo de contenido, etc.)
3. El cuerpo que contiene la información que el cliente solicitó del servidor

Otros protocolos

A continuación se muestra una lista de otros protocolos web comunes y sus usos.

Protocolo	significa	Uso
TCP	Protocolo de Control de Transmisión	Para establecer una conexión entre dos dispositivos en la web y la gestión de la entrega de paquetes de datos
IP	Protocolo de Internet	Para la transferencia de paquetes de datos entre dos dispositivos en la web
TCP/IP		Estas dos tecnologías web a menudo trabajan juntos.
UDP	Protocolo de datagramas de usuario	Para establecer una conexión entre dos dispositivos en la web
FTP	Protocolo de transferencia de archivos	Para transferir archivos entre el cliente y el servidor
SMTP	Protocolo simple de transferencia de correo	Para enviar mensajes de correo electrónico al servidor
POP	Protocolo de oficina de correos	Para obtener mensajes de correo electrónico del servidor
SOAP	Protocolo de Acceso a Objetos simples	Para enviar Mensajes XML a través de HTTP

Gráficos

Los elementos gráficos son una característica clave de cualquier página web. No solo contribuyen al embellecimiento de una página, sino que también se pueden usar para transmitir puntos importantes de una mejor manera que el texto.

1. Canvas

Canvas es un elemento que forma parte de HTML. Cuando se usa junto con JavaScript (o cualquier otro lenguaje de scripting), puede dibujar gráficos en una página web poco a poco. El aspecto JS proporciona interactividad en gráficos de lienzo, incluida la animación.

Canvas funciona mejor en situaciones en las que se necesita cargar una gran cantidad de objetos gráficos en una página web. Es rápido y ligero en ese aspecto. Sin embargo, no es muy excepcional cuando se trata de cambiar el tamaño de los gráficos y ampliarlos, ya que está basado en ráster.

2. SVG

SVG significa Gráficos Vectoriales escalables. Está basado en XML y funciona muy bien con HTML. también se puede manipular fácilmente usando CSS.

El secreto de su popularidad está en su nombre: escalabilidad. Lo que diferencia a SVG de otros estilos gráficos como JPEG y PNG es que no está basado en píxeles. Se basa en dimensiones numéricas (vectores) que se pueden escalar fácilmente hacia arriba o hacia abajo sin pérdida de calidad.

Cuando se trata de usar elementos gráficos en un sitio web, la calidad de los gráficos es un factor crítico. SVG no solo logra un alto rendimiento para gráficos de mayor tamaño, sino que también garantiza la interactividad. Debido a estas razones, SVG es actualmente una de las tecnologías web gráficas más preferidas.

3. WebGL

La biblioteca de gráficos Web, más conocida como WebGL, es un recurso de tecnología web que permite a los navegadores representar imágenes 2D y 3D en la pantalla. Elimina la necesidad de complementos externos y es compatible con navegadores de escritorio y móviles.

Otros

Aquí hay algunas otras tecnologías web de las que es posible que no haya oído hablar antes. Creemos que merecen una mención honorífica en nuestro artículo.

1. Perl & CGI

Perl es un lenguaje de programación multiplataforma de propósito general que ha ido ganando popularidad en el panorama del desarrollo web. Se basa en lenguajes como C y BASIC y funciona sin problemas con HTML, el lenguaje de marcado más utilizado. Perl también funciona bien con bases de datos convencionales como MySQL y Oracle.

Perl se utiliza para escribir aplicaciones que implementan CGI (Interfaz de puerta de enlace Común). CGI es un protocolo web que define cómo una aplicación se comunica con el servidor web al realizar solicitudes HTTP. Estos scripts CGI hacen que el proceso de obtención de recursos sea más eficiente.

2. MathML

Al igual que HTML, MathML (Mathematical Markup Language) es un lenguaje de marcado. Sin embargo, se utiliza específicamente para la representación precisa y adecuada de ecuaciones matemáticas y científicas en la web.

MathML no solo se asegura de que las ecuaciones se muestren correctamente, sino que también asigna significado al contenido matemático. Todo esto se logra mediante el uso de elementos XML para la representación de contenido matemático y símbolos. Por ejemplo, el elemento msqrt se traduce en un símbolo de raíz cuadrada, la función seno trigonométrica está representada por el elemento sin, y así sucesivamente.

3. XSL, XSLT & EXSLT

XSL (Lenguaje de hoja de estilos extensible) es un lenguaje que se utiliza para definir la forma en que se deben formatear los datos XML cuando se muestran al cliente. Mientras que XML se ocupa de los datos en sí, XSL gestiona su transformación, diseño y presentación. Podemos decir que XSL tiene el mismo propósito para XML que CSS para HTML.

El sitio web W3 indica los dos componentes de XSL: a) XSLT (Transformaciones) para manejar transformaciones y b) XSL-FO (Objetos de formato) para manejar formato, paginación, etc. Sin embargo, en 2013, XSL-FO fue descontinuado y reemplazado por CSS3.

XSLT (Transformaciones de lenguaje de hojas de estilo extensibles) es un lenguaje que define cómo se convertirán los documentos XML a otros formatos más legibles para el ser humano, como HTML. Aplica hojas de estilo XSL a documentos XML, con la ayuda de un procesador XSL, para embellecer los datos XML.

EXSLT es un medio para ampliar la funcionalidad de XSLT. No es una parte oficial de XSLT, pero es un proyecto impulsado por la comunidad. Su objetivo es hacer que las hojas de estilo XSL sean más portátiles y aumentar su funcionalidad y soporte al agregarles más funciones.

El futuro de las tecnologías web

Un informe de Cisco predice que casi el 52% de la población mundial tendrá acceso a Internet para el año 2020. La World Wide Web crecerá a un ritmo asombroso para incluir un mayor número de personas, dispositivos y recursos disponibles en línea. Por lo tanto, se espera que las tecnologías web se amplíen. En consecuencia, los profesionales de la tecnología se esforzarán más para proporcionar contenido web accesible a los usuarios de todo el mundo. Se deberán tomar medidas de seguridad más estrictas para proteger el contenido web privado de ciberataques maliciosos.

La WWW comenzó como Web 1.0 con páginas web estáticas escritas en HTML antiguo. Luego pasó a la Web 2.0 con el advenimiento de JavaScript y otras tecnologías que permitieron a los usuarios interactuar con el contenido web y producir el suyo propio.

Pronto, la Web irá un paso más allá y entrará en su tercera fase, es decir, la Web 3.0, que estará mucho más descentralizada de lo que está hoy en día. Las tecnologías modernas, como IA e IoT, pronto dominarán la Web. Todo estará mucho más automatizado en términos de desarrollo y consumo de nuevos contenidos.

Esperamos que este artículo le haya ayudado a obtener información valiosa sobre la evolución y el futuro de las tecnologías web. ¡Sigue nuestro blog para mantenerte actualizado sobre otros desarrollos interesantes en el panorama de WWW!