Introducción a la web
¿Qué es la web?
Definición: La web es un sistema de documentos interconectados que se acceden a través de Internet.
Diferencia entre Internet y la Web:
Internet es una red global de computadoras conectadas entre sí que permite el intercambio de información (red de redes). La Web (o la World Wide Web, WWW) es una forma específica de acceder a la información a través de documentos interconectados (páginas web) usando navegadores. La web es solo una parte de Internet.
Ejemplo de productos/servicios:
Google Search: Un motor de búsqueda que accede a la web para ofrecer resultados.
Facebook, Twitter, Instagram: Redes sociales que permiten interactuar con contenido en la web.
¿Cómo funciona la web?
Proceso de carga de una página web:
Un usuario escribe una URL en su navegador (ej., www.ejemplo.com).
El navegador envía una solicitud HTTP a un servidor web donde está alojada la página.
El servidor responde con archivos HTML, CSS y JavaScript.
El navegador interpreta estos archivos y muestra la página web.
Ejemplo de productos/servicios:
Amazon: Cuando accedes a la tienda, tu navegador hace solicitudes HTTP al servidor de Amazon para cargar los productos, imágenes, y precios.
¿Qué es HTML?
Definición: HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas web. Define la estructura de los documentos web mediante etiquetas.
Ejemplo de productos/servicios:
Wikipedia: La información se estructura usando HTML, con encabezados, párrafos, listas y enlaces para organizar el contenido.
Ejemplo de código básico HTML:
HTML
<html>
<head>
<title>Mi Página Web</title>
</head>
<body>
<h1>Bienvenidos a mi sitio web</h1>
<p>Este es un párrafo de texto.</p>
<a href="https://www.google.com">Ir a Google</a>
</body>
</html>¿Qué es CSS?
Definición: CSS (Cascading Style Sheets) es un lenguaje utilizado para describir la presentación de un documento HTML. Permite estilizar elementos como el color, tamaño y disposición de los elementos en la página.
Ejemplo de productos/servicios:
Netflix: La interfaz de usuario de Netflix se diseña con CSS para que el contenido (películas, series) se muestre de manera atractiva y organizada.
Ejemplo de código CSS:
CSS
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #2c3e50;
}
p {
font-size: 16px;
}¿Qué es JavaScript?
Definición: JavaScript es un lenguaje de programación que permite agregar interactividad a las páginas web. Se ejecuta en el navegador del usuario, lo que permite crear dinámicamente contenido o interactuar con el servidor sin necesidad de recargar la página.
Conceptos básicos de JavaScript:
Variables: Contienen datos (números, cadenas de texto, etc.).
JAVASCRIPT
let nombre = "Juan";
Funciones: Bloques de código que realizan una tarea específica.
javascript
Copiar código
function saludar() {
console.log("¡Hola, " + nombre + "!");
}
saludar(); // Imprime: ¡Hola, Juan!
Eventos: JavaScript se utiliza para manejar eventos como clics o movimientos del ratón.
javascript
Copiar código
document.getElementById("boton").onclick = function() {
alert("¡Botón presionado!");
}Ejemplo de productos/servicios:
Google Maps: Utiliza JavaScript para mostrar mapas interactivos y permitir que los usuarios hagan clic en ubicaciones. YouTube: Utiliza JavaScript para permitir la reproducción de videos y la interacción con la interfaz.
¿Qué es Node.js?
Definición: Node.js es un entorno de ejecución para JavaScript en el lado del servidor. Permite usar JavaScript para crear aplicaciones backend, lo que facilita la construcción de aplicaciones completas con JavaScript tanto en el frontend como en el backend.
Ejemplo de productos/servicios:
Netflix (backend): Utiliza Node.js para manejar grandes volúmenes de datos y conexiones en tiempo real para la transmisión de contenido.
Ejemplo de código básico en Node.js:
JAVASCRIPT
const http = require('http');
const server = http.createServer((req, res) => {
res.write('¡Hola Mundo!');
res.end();
});
server.listen(3000, () => {
console.log('Servidor corriendo en http://localhost:3000');
});¿Qué es React?
Definicióno: React es una biblioteca de JavaScript para construir interfaces de usuario. Permite crear aplicaciones web interactivas mediante la construcción de componentes reutilizables que gestionan su propio estado.
Ejemplo de productos/servicios:
Facebook: Fue desarrollado con React para construir interfaces de usuario rápidas y reactivas. Instagram: Utiliza React para gestionar la interacción con las publicaciones, los comentarios y las actualizaciones en tiempo real.
Ejemplo de código básico en React:
JAVASCRIPT
import React, { useState } from 'react';
function App() {
const [contador, setContador] = useState(0);
return (
<div>
<h1>Contador: {contador}</h1>
<button onClick={() => setContador(contador + 1)}>Incrementar</button>
</div>
);
}
export default App;Frontend vs. Backend
Definición:
Frontend: Es la parte de la aplicación con la que interactúan los usuarios. Incluye todo lo que se ve en la pantalla: diseño, contenido y la lógica de interactividad (HTML, CSS, JavaScript, React).
Backend: Es la parte “invisible” que maneja los datos y la lógica del servidor. Se encarga de procesar las solicitudes de los usuarios, interactuar con bases de datos y enviar respuestas al frontend (Node.js, Python, Ruby, PHP).
Ejemplo de productos/servicios:
Amazon (Frontend): La página que ves cuando compras algo, donde se muestran los productos, el carrito y el proceso de pago.
Amazon (Backend): Los sistemas que gestionan los inventarios, las transacciones y la autenticación de usuarios.
API y API REST
Definición:
API (Interfaz de Programación de Aplicaciones): Es un conjunto de reglas y herramientas que permiten que diferentes aplicaciones se comuniquen entre sí. En la web, las APIs permiten que el frontend y el backend intercambien datos.
API REST (Representational State Transfer): Es un estilo arquitectónico para diseñar APIs que usan HTTP y siguen principios como la claridad en las URLs, el uso de métodos HTTP (GET, POST, PUT, DELETE) y la estructura de datos en formato JSON.
Ejemplo de productos/servicios:
Twitter API: Permite a las aplicaciones externas interactuar con Twitter, como publicar tuits o leer mensajes.
Spotify API: Permite integrar las funciones de Spotify (como reproducir canciones) en otras aplicaciones.
Ejemplo de llamada a una API REST:
JAVASCRIPT
fetch('https://api.ejemplo.com/data')
.then(response => response.json())
.then(data => console.log(data));
// Ejemplo de respuesta:
// {
// "nombre": "Juan",
// "edad": 30
// }Extra
Server Site Rendering:
Definición:
Conclusión
La web es un sistema de documentos interconectados que se acceden a través de Internet. Los navegadores web permiten acceder a la web y mostrar páginas creadas con HTML, CSS y JavaScript. Node.js permite ejecutar JavaScript en el lado del servidor, mientras que React facilita la creación de interfaces de usuario interactivas. Las APIs y las APIs REST permiten que las aplicaciones se comuniquen entre sí y compartan datos.