BLOQUE I

INTRODUCCIÓN A LAS TECNOLOGÍAS WEB

Existen diversas tecnologías web que se utilizan para desarrollar aplicaciones y
sitios web interactivos y funcionales. Estas tecnologías web trabajan juntas para
permitir el desarrollo completo de aplicaciones web, desde la interfaz de usuario
hasta el backend y la gestión de datos.

Desarrollo Frontend

● HTML (HyperText Markup Language): Lenguaje de marcado utilizado para

estructurar el contenido de una página web.
● CSS (Cascading Style Sheets): Utilizado para el diseño y la presentación,
permite dar estilo al contenido HTML.
● JavaScript: Lenguaje de programación del lado del cliente que permite crear
páginas web interactivas y dinámicas.
● React, Angular, Vue.js: Bibliotecas y frameworks de JavaScript para el
desarrollo de interfaces de usuario (UI) modernas y escalables.

Desarrollo Backend:

● Node.js: Entorno de ejecución de JavaScript del lado del servidor que

permite construir aplicaciones web escalables.
● Django, Flask (Python): Frameworks de Python para el desarrollo rápido de
aplicaciones web seguras y mantenibles.
● Ruby on Rails: Framework de desarrollo web de Ruby que sigue el principio
de convención sobre configuración.
● Express.js: Framework minimalista de Node.js para construir aplicaciones
web y APIs.

Bases de Datos:

● MySQL, PostgreSQL, MongoDB: Sistemas de gestión de bases de datos

relacionales y no relacionales utilizados en el desarrollo web.

Servidores Web:

● Apache, Nginx: Servidores web populares utilizados para alojar y servir

sitios web.

Control de Versiones:

● Git: Sistema de control de versiones distribuido ampliamente utilizado en el

desarrollo de software.
Seguridad:

● HTTPS (SSL/TLS): Protocolo de seguridad que cifra la comunicación entre el

navegador y el servidor web.
● OAuth: Protocolo de autorización utilizado para la autenticación segura en
aplicaciones web.

HERRAMIENTAS WEB

Las herramientas web serían todas aquellas aplicaciones alojadas en internet que
facilitan todo tipo de trabajos en la red, desde el alojamiento e intercambio de
contenidos en distintos formatos (texto, fotos, vídeos...) hasta los sistemas
operativos online, pasando por las suites informáticas o la edición de vídeos.

Un protocolo es una serie de reglas que utilizan dos ordenadores para comunicarse
entre sí.

Productividad y Colaboración:

● Google Workspace: Incluye Gmail, Google Drive, Google Docs, Google

Sheets, entre otros, para la colaboración en tiempo real.
● Microsoft 365: Ofrece herramientas similares a Google Workspace, como
Outlook, Word Excel, y Teams.a

Comunicación y Videoconferencias:

● Slack: Para la comunicación en equipo.

● Zoom: Para videoconferencias y reuniones virtuales.
● Microsoft Teams: Integrado con Microsoft 365, ofrece mensajería y
reuniones.

Diseño Gráfico:

● Canva: Para crear gráficos, presentaciones y diseños.

● Adobe Spark: Herramienta de diseño gráfico fácil de usar.

Aprendizaje en Línea:

● Coursera, edX: Plataformas para cursos en línea

● Khan Academy: Ofrece lecciones gratuitas sobre una variedad de temas.

Almacenamiento en la Nube:

● Dropbox: Para almacenamiento y compartición de archivos.

● OneDrive: Integrado con Microsoft 365, ofrece almacenamiento en la nube.
 PROTOCOLO HTTP

HTTP (HyperText Transfer Protocol, o Protocolo de Transferencia de

Hipertexto). Es un protocolo de comunicación que permite la transferencia de
información en Internet.

HTTP

• Es un protocolo utilizado en un sistema de redes por el que dos máquinas

(cliente y servidor) se comunican. El cliente solicita información al servidor
utilizando el protocolo HTTP. El servidor le responde en forma de página web

HTTPS

• Es una combinación de protocolo de transferencia hipertexto (http) y

protocolo SSL/TLS. Es una forma más segura de enviar solicitudes al servidor
desde el cliente ya que al estar encriptado, nadie puede saber en qué consiste la
solicitud.

PROTOCOLO FTP

El Protocolo de Transferencia de Archivos (FTP, por sus siglas en inglés) es un

protocolo estándar de la red de Internet utilizado para la transferencia de
archivos entre computadoras. FTP permite a los usuarios cargar (subir) o
descargar (bajar) archivos desde o hacia sus servidores.

PROTOCOLO SMTP

El Protocolo Simple de Transferencia de Correo (SMTP, por sus siglas en inglés)

es un protocolo estándar utilizado para el envío de correos electrónicos a través
de una red. SMTP se encarga de enviar los mensajes de correo electrónico desde
el cliente de correo electrónico del remitente hasta el servidor de correo electrónico
del destinatario o a través de varios servidores intermedios.

COMPONENTES NECESARIOS PARA EJECUTAR APPS

WEB
Ejecutar aplicaciones web implica la interacción de varios componentes, tanto en el
lado del servidor como en el lado del cliente. Una aplicación Web es proporcionada
por un servidor Web y utilizada por usuarios que se conectan desde browsers o
navegadores.

La arquitectura de un Sitio Web tiene tres componentes principales:

● Un servidor Web
● Una conexión de red
● Uno o más clientes
 SERVIDOR WEB

Se basan en el modelo cliente-servidor. Cada servicio disponible a través de una red

será ofrecido por un servidor (software) que está permanentemente en espera.

La tarea principal de un servidor web es la de guardar y organizar páginas web y

entregarlas a clientes como navegadores web. La comunicación entre servidor
(software) y cliente se basa en HTTP, es decir, en el protocolo de transferencia de
hipertexto o en HTTPS, la variante codificada.

Los servidores web más populares son el servidor HTTP Apache, los servicios de
Internet Information Server de Microsoft (IIS) o el servidor Nginx.

SERVIDOR DE BASE DE DATOS

Las aplicaciones web y de escritorio usan bases de datos para escribir, modificar y
recuperar información de forma rápida.

Un servidor de base de datos, también conocido como database server o RDBMS

(Relational DataBase Management Systems) en caso de bases de datos
relacionales, es un tipo de software de servidor que permiten la organización de la
información mediante el uso de tablas, índices y registros.

Un sistema de gestión de bases de datos (SGBD) como MySQL, PostgreSQL,

MongoDB, SQLite, o Microsoft SQL Server para almacenar y recuperar datos.

Un servidor de base de datos es un equipo informático especializado en servir

consultas a clientes remotos o locales que solicitan información o realizan
modificaciones a los registros y tablas que existen dentro de las bases de datos del
sistema (en muchos casos desde un servidor web o de aplicaciones).

Las bases de datos que existen dentro, sirven para gestionar y administrar
inmensas cantidades de información, como sucede en casos de empresas,
instituciones, universidades o bancos, que almacenan datos de usuarios/clientes
tales como direcciones, teléfonos, emails, ingresos, egresos, calificaciones, etc.

El origen de los servidores de bases de datos data de casi 60 años, cuando

surgieron en la década de 1960 para comenzar a dar soluciones de manejo y
administración de volúmenes de datos a grandes empresas.
 APLICACIONES WEB QUE SE EJECUTAN DE LADO DEL
CLIENTE

Las aplicaciones web que se ejecutan del lado del cliente son aquellas cuya lógica y
procesamiento tienen lugar en el navegador web del usuario, en lugar de depender
completamente del servidor. Estas aplicaciones son conocidas como aplicaciones
del lado del cliente o aplicaciones frontend.

Interactividad:

● Las aplicaciones del lado del cliente proporcionan una experiencia interactiva
y dinámica, permitiendo a los usuarios interactuar con el contenido sin tener
que recargar la página completa.

Rápida Respuesta:

● Dado que la lógica se ejecuta en el navegador del usuario, las respuestas a

las acciones del usuario son instantáneas, lo que mejora la velocidad y la
eficiencia.

Menos Carga en el Servidor:

● Al trasladar parte del procesamiento al cliente, se reduce la carga en el

servidor, lo que puede mejorar el rendimiento y la escalabilidad de la
aplicación.

HTML

HTML es el lenguaje de marcado estándar que se usa para crear páginas y

aplicaciones web.

Sus elementos forman los bloques de creación de las páginas y representan texto
con formato, imágenes, entradas de formulario y otras estructuras.

Cuando un explorador realiza una solicitud a una dirección URL, con independencia
de que se obtenga una página o una aplicación, lo primero que se devuelve es un
documento HTML.

Este documento HTML puede hacer referencia o incluir información adicional sobre
su apariencia y diseño en forma de CSS, o el comportamiento en forma de
JavaScript.

CSS

CSS (Hoja de estilos en cascada) se usa para controlar la apariencia y el diseño de

los elementos HTML. Los estilos CSS se pueden aplicar directamente a un
elemento HTML, o bien definirse por separado en la misma página o en un archivo
independiente al que la página haga referencia.
Los estilos se aplican en cascada en función de cómo se usan para seleccionar un
elemento HTML determinado. Por ejemplo, es posible que un estilo se aplique a
todo el documento, pero que se reemplace por un estilo que se aplica a un elemento
determinado.

JavaScript

JavaScript es un lenguaje de programación interpretado y dinámico que se ha

estandarizado en la especificación del lenguaje ECMAScript. Es el lenguaje de
programación de la web.

Sus usos más importantes son los siguientes:

● Desarrollo de sitios web del lado del cliente (frontend, en el navegador)

● Desarrollo de todo tipo de aplicaciones gracias a la plataforma NodeJS
● Desarrollo de aplicaciones para dispositivos móviles, híbridas o que compilan
a nativo
● Desarrollo de aplicaciones de escritorio para sistemas Windows, Linux y Mac,
pudiendo escribir un código compatible con todas las plataformas.

HTML, CSS y Javascript

Estos son los tres lenguajes principales que se utilizan en el front-end de nuestra
aplicación, es decir, se utilizan en el lado del cliente en el propio navegador. Estas
son las tecnologías fundamentales para construir la estructura, el estilo y la
interactividad de las páginas web

● HTML: lenguaje de marcado utilizado para estructurar elementos de la

página, como párrafos, enlaces, títulos, tablas, imágenes e incluso videos.
● CSS: lenguaje de estilo utilizado para definir colores, fuentes, tamaños,
posicionamiento y cualquier otro valor estético para los elementos de la
página.
● Javascript: lenguaje de programación utilizado para hacer la página con más
movimiento, pudiendo actualizar elementos de forma dinámica y manejar
mejor los datos enviados y recibidos en la página.

Applets de java

Las Applets de Java son pequeñas aplicaciones escritas en el lenguaje de programación

Java que se ejecutan en un entorno seguro dentro de un navegador web. Aunque en el
pasado eran comunes en el desarrollo web, su uso ha disminuido signitivamente en los
últimos años debido a preocupaciones de seguridad y a la evolución de las tecnologías web.

Cuando una página web cargaba una Applet, esta se descargaba y ejecutaba en el
navegador del usuario.

Para ejecutar Applets, era necesario tener un plugin Java instalado en el navegador.
La disminución del soporte para Java en los navegadores modernos ha afectado su
viabilidad.

Debido a cuestiones de seguridad y a la evolución de las

tecnologías web, se han adoptado tecnologías web más modernas como JavaScript,
HTML5, y WebGL para lograr funcionalidades similares sin depender de plugins externos.

VBSCRIPT

VBScript, o Visual Basic Scripting Edition, es un lenguaje de programación interpretado

desarrollado por Microsoft. Está diseñado principalmente para la creación de scripts del lado
del cliente y del servidor en el entorno de desarrollo web, aunque también puede utilizarse
para la automatización de tareas en sistemas Windows.

El modo de funcionamiento de Visual Basic Script para construir efectos especiales en

páginas web es muy similar al utilizado en Javascript.

A medida que las tecnologías web evolucionaron, VBScript perdió popularidad en favor de
lenguajes como JavaScript para scripting del lado del cliente y otros lenguajes del lado del
servidor

APLICACIONES WEB QUE SE EJECUTAN DE LADO DEL

SERVIDOR

Aplicaciones Web que se ejecutan del lado del servidor

Las aplicaciones web que se ejecutan del lado del servidor realizan la mayor parte
de su procesamiento en el servidor antes de enviar el resultado al navegador del
usuario. Estas aplicaciones utilizan tecnologías del lado del servidor para gestionar
la lógica, la interacción con bases de datos y otros procesos.

Ejemplos de aplicaciones web que se ejecutan principalmente del lado del servidor:

Servicios en la Nube Amazon Web Services (AWS)

Ofrece una variedad de servicios en la nube, como almacenamiento, cómputo y
bases de datos, que son gestionados y ejecutados en el servidor.

Sistemas de Reservas y Reservas

Booking.com
Plataforma de reservas en línea que gestiona reservas de hoteles, vuelos y otros
servicios.

Server-side rendering (SSR)

El Server-Side Rendering (SSR), o Renderización del Lado del Servidor en español,

es un enfoque en el desarrollo web donde la generación inicial de la interfaz de
usuario se realiza en el servidor antes de enviarla al navegador del usuario.
Contrasta con el enfoque tradicional del cliente, donde la renderización de la interfaz
de usuario se realiza real en el navegador del usuario después de recibir los datos
del servidor.

Los lenguajes de programación típicos del renderizado del lado del servidor son:
● Java
● Ruby
● ASP.NET
● Perl
● PHP
● Python
● Node.js o JavaScript

Server-side rendering (SSR)

Proceso de Server-Side Rendering

1.Solicitud del Cliente:

● Cuando un usuario solicita una página web, el navegador envía una solicitud
al servidor.

2 Procesamiento en el Servidor.
● En el servidor, se realiza la generación de la interfaz de usuario, incluyendo el
HTML, CSS y, en algunos casos, el JavaScript necesario para la
interactividad.

3.Datos Dinámicos:
● Si la pagina requiere datos dinámicos, como informacion de una base de
datos, estos datos se incorporan en la generación del lado del servidor

4 Respuesta al Cliente:
● El servidor envia la página ya renderizada (HTML completo) al navegador del
usuario como respuesta a la solicitud.

5 Renderización Inicial:
● El navegador recibe el HTML y comienza a renderizar la página. Esto puede
incluir la carga y ejecución de scripts JavaScript, pero la renderización inicial
ya se ha realizado en gran medida en el servidor.

6 Interactividad:
● Después de la renderización inicial, el JavaScript adicional puede encargarse
de la interactividad en la página. Esto podría incluir la actualización dinámica
de contenido, interacción con el usuario, o cualquier otra operación que
requiera ejecución de código en el navegador

Ventajas de la programación del lado del servidor

1. SEO Search Engine Optimization (Optimización para motores de búsqueda)

mejorado:
 ● Los motores de búsqueda pueden indexar el contenido más fácilmente, ya
que la página ya se encuentra completamente renderizada en el servidor y no
depende tanto de la ejecución de JavaScript en el cliente.

2 Tiempo de Carga Inicial Mejorado:

● Los usuarios reciben el contenido renderizado más rápidamente, ya que no
tienen que esperar a que se cargue y ejecute JavaScript en el navegador.

3. Compatibilidad con Redes Sociales y Web Scraping:

● Las redes sociales y las herramientas de web scraping pueden acceder
fácilmente al contenido de la página, ya que está disponible directamente en
el HTML enviado por el servidor.

DISEÑO WEB RESPONSIVO

Es una configuración en la que el servidor siempre envía el mismo código HTML a

todos los dispositivos y se usa CSS para modificar el procesamiento de la página en
el dispositivo.

Mediante el diseño responsivo, se envía a todos los dispositivos un mismo código

adaptado al tamaño de la pantalla.

A través de la metaetiqueta "viewport", se indica al navegador cómo adaptar las

dimensiones y el escalamiento de la página al ancho del dispositivo.

Cuando no se incluye este elemento, los navegadores para dispositivos móviles

procesan de forma predeterminada la página con un ancho de pantalla de
computadora de escritorio.

En la página de la izquierda, no se incluye la metaetiqueta viewport. Por lo tanto,

cuando se muestra en un navegador para dispositivos móviles, se interpreta que el
ancho corresponde a la versión para computadoras de escritorio y se adapta la
página para que quepa en la pantalla. Como resultado, el contenido es difícil de leer.

A la derecha, vemos la misma página con una viewport específica cada que
coincide con el ancho del dispositivo. El navegador para dispositivos móviles no
adapta la página y el contenido se puede leer.

Estos son algunos motivos por los cuales recomendamos usar el diseño responsivo:

● Facilita a los usuarios compartir y vincular tu contenido mediante una sola

URL
● Permite que los algoritmos de Google asignen correctamente las propiedades
de indexación a la página sin necesidad de señalar la existencia de páginas
correspondientes para computadoras de escritorio o dispositivos móviles.
● Se requiere menos tiempo de ingeniería para mantener varias páginas del
mismo contenido
● Reduce la posibilidad de que se produzcan los errores comunes que afectan
a los sitios móviles.
 ● No es necesario redireccionar a los usuarios a la vista optimizada para el
dispositivo, por lo que se reduce el tiempo de carga

CMS Hub

Un Sistema de Gestión de Contenido o un creador de sitios web, es un software que

te permite construir tu sitio web sin tener que saber cómo codificar y eso incluye
saber cómo modificar un diseño para que sea responsive.

CMS Hub es un CMS que cuenta con alojamiento web integrado. Se conecta a tus
otras herramientas de HubSpot y crea una experiencia unificada de marketing,
ventas, servicio y navegación del sitio para tus visitantes, clientes y empleados.

Wix

Wix es otro creador de sitios web que ofrece suscripciones para crear sitios web
gratuitos y de paga. Proporciona un editor fácil de usar con el que solo tendrás que
arrastrar y soltar elementos y también dispondrás de alojamiento gratuito y
funciones de seguridad.

Todas las plantillas de Wix proporcionan una experiencia optimizada para

dispositivos móviles para tus visitantes. Al igual que Squarespace, el editor de Wix
te permite ver cómo luce tu sitio web en múltiples dispositivos.

WordPress

WordPress es el CMS más popular del mundo y ofrece uno de los creadores de
sitios web más directos: el editor Gutenberg

WordPress ofrece miles de temas y plantillas para comenzar, incluidas muchas con
diseño responsive.

Una vez que se haya conf gurado un tema para el sitio web de WordPress, involucra
y convierte a los visitantes creando formularios de forma gratuita, chat en vivo,
marketing por correo electrónico y análisis agregando el complemento WordPress
de HubSpot.