Tecnologías Web

2 de julio de 2024

Las tecnologías web son herramientas y técnicas utilizadas para crear, desarrollar y mantener sitios y aplicaciones web. Estas tecnologías abarcan una amplia gama de lenguajes de programación, marcos de trabajo (frameworks), y herramientas de desarrollo que permiten a los desarrolladores construir experiencias web interactivas y dinámicas.

Lenguajes de Marcado y Estilo

HTML (HyperText Markup Language)

HTML es el lenguaje estándar para crear páginas web. Utiliza etiquetas para estructurar el contenido en la web. HTML define la estructura de una página web mediante elementos como encabezados, párrafos, enlaces, imágenes, y más.

<!DOCTYPE html>
<html>
	<head>
		<title>Mi página web</title>
	</head>
	<body>
		<h1>¡Hola, mundo!</h1>
		<p>Esta es mi primera página web.</p>
	</body>
</html>

CSS (Cascading Style Sheets)

CSS se utiliza para describir la presentación de un documento escrito en HTML. Permite a los desarrolladores aplicar estilos como colores, fuentes, y diseños a sus páginas web.

body {
	font-family: Arial, sans-serif;
	background-color: #f0f0f0;
}

h1 {
	color: #333;
}

Lenguajes de Programación

JavaScript

JavaScript es un lenguaje de programación que se ejecuta en el navegador del cliente. Se utiliza para crear contenido interactivo y dinámico en las páginas web. JavaScript puede manipular el DOM (Document Object Model), manejar eventos, y comunicarse con servidores.

document.addEventListener("DOMContentLoaded", function () {
	document.getElementById("miBoton").addEventListener("click", function () {
		alert("¡Botón clicado!")
	})
})

PHP (Hypertext Preprocessor)

PHP es un lenguaje de programación del lado del servidor. Se utiliza para generar contenido dinámico que se envía al navegador del cliente. PHP es muy utilizado en el desarrollo de aplicaciones web y sitios dinámicos.

<?php
	echo "¡Hola, mundo!";
?>

Frameworks y Librerías

React

React es una librería de JavaScript para construir interfaces de usuario. Desarrollada por Facebook, permite a los desarrolladores crear componentes reutilizables y gestionar el estado de manera eficiente.

import React from "react"
import ReactDOM from "react-dom"

function App() {
	return (
		<div>
			<h1>¡Hola, mundo!</h1>
		</div>
	)
}

ReactDOM.render(<App />, document.getElementById("root"))

Angular

Angular es un framework de desarrollo web basado en TypeScript, desarrollado por Google. Proporciona una estructura robusta para construir aplicaciones web dinámicas de una sola página (SPA).

import { Component } from "@angular/core"

@Component({
	selector: "app-root",
	template: "<h1>¡Hola, mundo!</h1>",
	styles: ["h1 { color: red; }"],
})
export class AppComponent {}

Vue.js

Vue.js es un framework progresivo de JavaScript para construir interfaces de usuario. Es fácil de integrar con otros proyectos y bibliotecas existentes, y permite crear aplicaciones web complejas con una curva de aprendizaje relativamente baja.

new Vue({
	el: "#app",
	data: {
		message: "¡Hola, mundo!",
	},
})

Tecnologías de Backend

Node.js

Node.js es un entorno de ejecución de JavaScript del lado del servidor. Permite a los desarrolladores utilizar JavaScript para la programación del servidor, creando aplicaciones escalables y de alto rendimiento.

const http = require("http")

const server = http.createServer((req, res) => {
	res.statusCode = 200
	res.setHeader("Content-Type", "text/plain")
	res.end("¡Hola, mundo!\n")
})

server.listen(3000, "127.0.0.1", () => {
	console.log("Servidor ejecutándose en http://127.0.0.1:3000/")
})

Django

Django es un framework de desarrollo web de alto nivel para Python. Promueve el desarrollo rápido y el diseño limpio y pragmático, facilitando la creación de aplicaciones web robustas y seguras.

from django.http import HttpResponse
from django.shortcuts import render

def hello_world(request):
    return HttpResponse('¡Hola, mundo!')

Bases de Datos

MySQL

MySQL es un sistema de gestión de bases de datos relacional (RDBMS) de código abierto. Es ampliamente utilizado para gestionar grandes volúmenes de datos y es la base de datos preferida para muchas aplicaciones web.

CREATE DATABASE mi_base_de_datos;
USE mi_base_de_datos;
CREATE TABLE usuarios (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nombre VARCHAR(100),
    email VARCHAR(100)
);

MongoDB

MongoDB es una base de datos NoSQL orientada a documentos. Almacena datos en documentos JSON, lo que permite una mayor flexibilidad y escalabilidad en comparación con las bases de datos relacionales tradicionales.

db.usuarios.insertOne({
	nombre: "Juan Perez",
	email: "juan@example.com",
})

Conclusión

Las tecnologías web están en constante evolución, y mantenerse actualizado con las últimas tendencias y herramientas es crucial para los desarrolladores web. Desde el HTML y CSS básicos hasta frameworks avanzados como React y Angular, estas tecnologías permiten crear experiencias web ricas y dinámicas que son fundamentales en el mundo digital de hoy.

Gracias por leer y recuerda tomar agüita 💙