NIVEL MEDIO SUPERIOR • SEMESTRE 2025

Diseño y Elaboración
de Páginas Web

Fundamentos esenciales para comprender y construir la web moderna

DESPLAZA
TEMA A

Identificación de Elementos Web

🌐
INFRAESTRUCTURA

Internet

Red global de computadoras interconectadas que utilizan protocolos estándar para comunicarse. Es la infraestructura física y lógica sobre la que opera la World Wide Web y otros servicios digitales.

🕸️
SERVICIO

World Wide Web (WWW)

Sistema de documentos hipermedia interconectados que se accede a través de Internet. Inventado por Tim Berners-Lee en 1989, usa URLs, HTTP y HTML para distribuir información globalmente.

🖥️
SOFTWARE

Navegadores Web

Aplicaciones que interpretan y muestran páginas web al usuario. Ejemplos: Chrome, Firefox, Edge y Safari. Interpretan HTML, CSS y JavaScript para renderizar el contenido visual.

🔗
PROTOCOLO

Protocolo HTTP / HTTPS

HyperText Transfer Protocol: protocolo de comunicación entre navegador y servidor. HTTPS es su versión segura con cifrado SSL/TLS. Funciona con solicitudes y respuestas (GET, POST, PUT…).

📁
PROTOCOLO

Protocolo FTP

File Transfer Protocol: protocolo estándar para transferir archivos entre computadoras en una red. Se utiliza comúnmente para subir archivos al servidor de hospedaje web (puerto 21).

🎨
LENGUAJE

CSS

Cascading Style Sheets: lenguaje que describe la presentación visual de documentos HTML. Controla colores, tipografía, espaciado, diseño responsivo y animaciones.

World Wide Web Consortium

Organización internacional fundada por Tim Berners-Lee en 1994 que desarrolla estándares abiertos para la web. Define las especificaciones de HTML, CSS, XML y otros tecnologías clave, asegurando que la web sea accesible, interoperable y evolucione de forma ordenada.

SUBTEMA

Lenguajes de Programación Web

Lenguajes del lado del usuario (Cliente)
HTML CLIENTE
HyperText Markup Language. Estructura y semántica del contenido web. Define elementos como párrafos, encabezados, imágenes, formularios y enlaces.
Versión actual: HTML5
JavaScript CLIENTE
Lenguaje de programación que agrega interactividad a las páginas web. Se ejecuta en el navegador y permite manipular el DOM, hacer peticiones asíncronas y crear animaciones.
También corre en servidor (Node.js)
XML CLIENTE
eXtensible Markup Language. Formato para almacenar y transportar datos de forma estructurada y legible. Base de tecnologías como SOAP, SVG y RSS.
Lenguaje de marcado de datos
Lenguajes del lado del servidor
PHP SERVIDOR
Hypertext Preprocessor. Lenguaje de scripting ampliamente usado para desarrollo web del lado del servidor. Permite acceder a bases de datos y generar HTML dinámico.
Potencia WordPress, Laravel…
ASP SERVIDOR
Active Server Pages. Tecnología de Microsoft para crear páginas web dinámicas. ASP.NET es su versión moderna, usada con lenguajes como C# y VB.NET en servidores Windows.
Tecnología Microsoft
LENGUAJE / TECNOLOGÍA TIPO FUNCIÓN PRINCIPAL EJECUCIÓN
HTML CLIENTE Estructura y contenido de la página Navegador
CSS CLIENTE Presentación visual y diseño Navegador
JavaScript CLIENTE Interactividad y lógica en el cliente Navegador / Node.js
XML CLIENTE Transporte e intercambio de datos Ambos
PHP SERVIDOR Lógica del servidor, bases de datos Servidor
ASP / ASP.NET SERVIDOR Aplicaciones web dinámicas (Microsoft) Servidor IIS
HTTP / HTTPS PROTOCOLO Comunicación cliente-servidor Red
FTP PROTOCOLO Transferencia de archivos Red
W3C ORGANISMO Define estándares y recomendaciones web Internacional
TEMA B

Comprobación de Estándares

Validación de HTML

  • Verifica que el código HTML cumpla con las especificaciones del W3C
  • Detecta etiquetas mal cerradas, atributos incorrectos o estructuras inválidas
  • Mejora la accesibilidad y compatibilidad entre navegadores
  • Reduce errores de renderizado inesperados
  • Herramienta oficial: validator.w3.org
🔗 validator.w3.org
🎨

Validación de CSS

  • Verifica que las hojas de estilo sigan la especificación oficial CSS del W3C
  • Identifica propiedades desconocidas, valores inválidos y errores de sintaxis
  • Garantiza que los estilos se apliquen de forma consistente
  • Ayuda a mantener código limpio y fácil de mantener
  • Herramienta oficial: jigsaw.w3.org/css-validator
🔗 CSS Validator W3C
🔍
BENEFICIO

Compatibilidad

Un código válido se comporta igual en Chrome, Firefox, Safari y Edge, evitando diferencias visuales inesperadas entre navegadores.

BENEFICIO

Accesibilidad

Los estándares aseguran que lectores de pantalla y tecnologías asistivas puedan interpretar correctamente el contenido para usuarios con discapacidades.

BENEFICIO

Rendimiento SEO

Los motores de búsqueda indexan mejor el código semántico y válido, mejorando el posicionamiento de la página en resultados de búsqueda.