📚 SEMANA 02

IS093 – Desarrollo de Aplicaciones Web

Fundamentos de la Tecnología Web

Prof. Mg. Jaime Suasnábar Terrel

Temas Aprendidos - Definiciones y Procedimientos

🌐 Tecnologías de Desarrollo de Software

Definición: La transformación digital ha generado dos tecnologías principales para el desarrollo de software orientadas a satisfacer las exigencias del mercado actual.

Tecnología Web

Basada en estándares abiertos, multiplataforma, ejecutable en navegadores web. Utiliza HTML, CSS, JavaScript y tecnologías web complementarias.

Tecnología de Software Nativo

Desarrollado específicamente para una plataforma (Windows, Linux, Android, iOS). Optimizado para el rendimiento del sistema operativo específico.

🔓 Open Web Platform - Web Abierta

Definición: Colección de tecnologías abiertas y estándares desarrollados por organismos como W3C, Unicode Consortium, Internet Engineering Task Force, y ECMA International.

Principios Fundamentales:

  • Evita ser controlado por ninguna empresa
  • Aporta transparencia, haciendo visibles todos los niveles
  • Capacidad de integración con fuentes externas
  • Documentación y especificaciones abiertas
  • Libertad de uso
  • Cadena de favores: compartir conocimiento adquirido

📋 Estándares Internacionales para Desarrollo Web

🔧 Tecnologías Básicas:

HTTP/HTTPS

Protocolo de Transferencia de Hipertexto para la transmisión de documentos hipermedia como HTML.

HTML

Lenguaje de Marcado de Hipertexto utilizado para describir y definir el contenido de páginas web estructuradas.

CSS

Hojas de Estilo en Cascada para describir el aspecto y presentación del contenido web.

JavaScript

Lenguaje de programación que se ejecuta en el navegador para crear sitios web interactivos y aplicaciones avanzadas.

XML

Lenguaje de Marcado Extensible para almacenar e intercambiar información estructurada entre plataformas.

🎨 Tecnologías Complementarias:

Web APIs

Interfaces de Programación de Aplicaciones Web para manipular DOM, reproducir multimedia y generar gráficos 3D.

SVG

Gráficos Vectoriales Escalables que permiten imágenes como conjuntos de vectores que se escalan sin pérdida de calidad.

WebGL

API JavaScript para dibujar gráficos 3D o 2D utilizando elementos HTML5 canvas.

MathML

Lenguaje de Marcado Matemático para mostrar ecuaciones y sintaxis matemáticas complejas.

ARIA

Aplicaciones de Internet Rica Accesibles para personas con discapacidad.

🌍 DNS - Sistema de Nombres de Dominio

Definición: DNS es el directorio telefónico de Internet. Traduce nombres de dominio legibles por humanos (como www.uncp.edu.pe) a direcciones IP que los navegadores necesitan para cargar recursos de Internet.

Procedimiento: Usuario ingresa dominio → DNS traduce a IP → Navegador se conecta al servidor → Se cargan los recursos web.

💻 Desarrollo Frontend vs Backend

🎨 Frontend (Cliente)

Definición: Parte de la programación web enfocada en la interfaz y experiencia del usuario.

Tecnologías: HTML, CSS, JavaScript

Función: Todo lo que los usuarios ven e interactúan en una página web.

⚙️ Backend (Servidor)

Definición: Parte que maneja la lógica, base de datos y funcionamiento interno de aplicaciones.

Tecnologías: Python, Java, PHP, Node.js, Ruby

Función: Motor que hace posible el funcionamiento del frontend.

🎯 Diseño UX/UI

UI (User Interface): Se refiere a los mockups y diseño visual de la interfaz. Herramientas: Figma, Adobe XD.

UX (User Experience): La experiencia completa que tiene el usuario al interactuar con productos o servicios. Objetivo: crear soluciones agradables, intuitivas, atractivas y eficientes.

Ejercicios de Laboratorio - Resultados

📝 Ejercicio 01: Visual Studio Code - Reconocimiento

Resultado: Familiarización con la herramienta de desarrollo integrado, identificación de áreas de la pantalla principal y aplicaciones de la barra de menús.

⌨️ Ejercicio 02: Paleta de Comandos

Resultado: Activación y uso práctico de la paleta de comandos, incluyendo ejemplos con GitHub Codespaces para desarrollo en la nube.

🔧 Ejercicio 03: Terminal y Git

Resultado: Uso efectivo de la terminal integrada con comandos git: init, add, commit, checkout, push. Manejo de ramas y merge en GitHub.

⚡ Ejercicio 04: Emmet y Fragmentos

Resultado: Implementación de disparadores Emmet para generación rápida de código HTML y CSS. Creación y uso de fragmentos personalizados.

⌨️ Ejercicio 05: Keyboard Shortcuts

Resultado: Dominio de atajos de teclado esenciales para mejorar la productividad en el desarrollo.

🤔 Reflexión Final

¿Qué aprendí y cómo lo hice?

Durante esta primera semana de fundamentos de tecnología web, he construido una base sólida de conocimiento que abarca desde los conceptos más básicos hasta las herramientas más avanzadas del desarrollo web moderno.

Aprendizajes Técnicos: Comprendí la diferencia fundamental entre tecnología web y software nativo, donde la primera ofrece ventajas de multiplataforma y estándares abiertos. Los estándares internacionales como HTML, CSS, JavaScript, HTTP/HTTPS se revelaron como los pilares fundamentales que sostienen toda la experiencia web moderna.

Comprensión Sistémica: El concepto de DNS como "directorio telefónico" de Internet me ayudó a visualizar cómo los usuarios acceden a los recursos web mediante nombres comprensibles que se traducen a direcciones IP. La arquitectura cliente-servidor con Frontend y Backend quedó claramente diferenciada en términos de responsabilidades y tecnologías.

📝 Reflexión Metacognitiva

Mi proceso de aprendizaje durante esta semana siguió un patrón constructivista donde cada concepto se construyó sobre el anterior. Inicié con una perspectiva fragmentada de las tecnologías web, pero gradualmente desarrollé una visión holística del ecosistema web.

Estrategias de Aprendizaje Empleadas:

• Aprendizaje activo: No me limité a la teoría, sino que practiqué cada concepto en Visual Studio Code

• Conexión conceptual: Relacioné cada tecnología con su propósito específico en el desarrollo web

• Experimentación práctica: Los ejercicios de laboratorio me permitieron internalizar los conocimientos teóricos

Metacognición del Proceso: Reconozco que mi comprensión evolucionó de memorizar definiciones a entender las interrelaciones entre tecnologías. La práctica con herramientas como Git y Emmet no solo me enseñó comandos, sino que me hizo consciente de la importancia del flujo de trabajo eficiente en el desarrollo.

Áreas de Crecimiento Identificadas: Aunque domino los conceptos básicos, reconozco que necesito profundizar en las tecnologías complementarias como WebGL y SVG. Mi próximo objetivo es aplicar estos conocimientos en proyectos reales para consolidar el aprendizaje.

Esta experiencia metacognitiva me ha enseñado que el aprendizaje efectivo en tecnología web requiere equilibrio entre comprensión teórica y aplicación práctica, además de mantener una perspectiva sistémica que conecte todas las piezas del ecosistema web.

📚 Bibliografía

Estándares Web Oficiales:

• HTML Living Standard - WHATWG: https://html.spec.whatwg.org/

• CSS Specifications - W3C: https://www.w3.org/Style/CSS/Overview.en.html

• HTTP Working Group Specifications: https://httpwg.org/specs/

Documentación Técnica:

• XML 1.0 Specification - W3C: https://www.w3.org/TR/xml/

• ECMAScript Language Specification: https://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html

• WAI-ARIA Authoring Practices: https://www.w3.org/TR/html-aria/

Herramientas de Desarrollo:

• Emmet Documentation: https://docs.emmet.io/

• Visual Studio Code Documentation: https://code.visualstudio.com/docs

• Git Documentation: https://git-scm.com/doc

Libros de Referencia:

• Flanagan, David. "JavaScript: The Definitive Guide". O'Reilly Media.

• Duckett, Jon. "HTML and CSS: Design and Build Websites". Wiley.

• Brown, Ethan. "Web Development with Node and Express". O'Reilly Media.

Recursos Académicos:

• Mozilla Developer Network (MDN): https://developer.mozilla.org/

• W3Schools Web Technologies: https://www.w3schools.com/

• Can I Use - Browser Support Tables: https://caniuse.com/

Volver a Cuadernos