Fundamentos de Tecnologías Web

Introducción a las tecnologías y herramientas esenciales para el desarrollo web moderno

Objetivos de Aprendizaje

Soluciones Web

Sistema Web

Aplicación compleja que integra múltiples componentes y funcionalidades para resolver problemas específicos.

Bases de datos APIs Autenticación

Aplicación Web

Software accesible a través de navegadores que permite interacción avanzada con el usuario.

React/Angular/Vue Interactividad SPA

Sitio Web

Conjunto de páginas web relacionadas bajo un mismo dominio, con propósito informativo o comercial.

HTML/CSS Navegación Contenido

Página Web

Documento individual accesible mediante una URL específica dentro de un sitio web.

Documento URL única Contenido

Tecnologías Web

Básicas
Lenguajes
Gráficos
  • HTML - Estructura y contenido
  • CSS - Presentación y diseño
  • JavaScript - Comportamiento e interactividad
  • HTTP/HTTPS - Protocolos de comunicación
  • Frontend: HTML5, CSS3, JavaScript, TypeScript
  • Backend: Node.js, Python, PHP, Java, C#
  • Bases de datos: SQL, MongoDB, Firebase
  • SVG - Gráficos vectoriales escalables
  • Canvas - Gráficos bitmap dinámicos
  • WebGL - Gráficos 3D en el navegador
  • CSS Graphics - Animaciones y efectos visuales

Funcionamiento de la Web

DNS

Sistema de nombres de dominio que traduce nombres de dominio a direcciones IP.

Navegador DNS Servidor

TCP/IP

Conjunto de protocolos para la transmisión de datos en redes, asegurando entrega confiable.

1. Establecimiento 2. Transmisión 3. Confirmación

HTTP/HTTPS

Protocolo para transferencia de hipertexto, base de la comunicación web (HTTPS es la versión segura).

GET POST PUT DELETE

Roles en Desarrollo Web

Frontend Developer

Responsable de la interfaz de usuario y experiencia del cliente.

  • HTML, CSS, JavaScript
  • Frameworks como React, Angular, Vue
  • Diseño responsive
  • Accesibilidad web

Backend Developer

Gestiona la lógica del servidor, bases de datos y API.

  • Node.js, Python, PHP, Java
  • Bases de datos SQL/NoSQL
  • APIs RESTful/GraphQL
  • Autenticación y seguridad

Fullstack Developer

Combina habilidades de frontend y backend para desarrollar aplicaciones completas.

  • Amplio conocimiento técnico
  • Capacidad para trabajar en todo el stack
  • Integración de sistemas
  • Visión global del proyecto

Visual Studio Code

Herramienta esencial para desarrollo web moderno con múltiples características para mejorar productividad.

Generación de Código Emmet

Abreviaciones que se expanden a código HTML/CSS completo.

Ejemplo HTML

ul>li*5>a{Item $}

Ejemplo CSS

m10+p20

Atajos de Teclado

Ctrl + P Buscar archivo
Ctrl + Shift + P Paleta de comandos
Alt + ↑/↓ Mover línea
Ctrl + / Comentar línea
F12 Ir a definición
Ctrl + D Seleccionar siguiente coincidencia

Extensiones Recomendadas

Live Server

Servidor local con recarga automática

Prettier

Formateador de código automático

ESLint

Análisis de código JavaScript

GitLens

Integración avanzada de Git

Bracket Pair Colorizer

Identifica pares de corchetes con colores

Auto Rename Tag

Renombra automáticamente etiquetas HTML

Resumen Semana 1

Conceptos Clave

  • Diferencias entre sistemas, aplicaciones, sitios y páginas web
  • Componentes básicos de la web: HTML, CSS, JavaScript
  • Protocolos fundamentales: DNS, TCP/IP, HTTP/HTTPS
  • Roles en desarrollo web: frontend, backend, fullstack

Herramientas

  • Visual Studio Code como editor principal
  • Emmet para generación rápida de código
  • Atajos de teclado para mejorar productividad
  • Extensiones esenciales para desarrollo web

Próximos Pasos

  • Profundizar en HTML5 y semántica
  • Explorar CSS moderno (Flexbox, Grid)
  • Introducción a JavaScript básico
  • Configuración avanzada de VS Code