LecturaQué es el desarrollo web: historia, importancia y conceptos
Antes de escribir la primera etiqueta conviene tener el mapa: qué es la web, quién la inventó, por qué usa tres lenguajes y qué tiene que ver con la ciberseguridad.
Qué es el desarrollo web
Desarrollo web es crear las páginas y aplicaciones que se usan desde un navegador. La web funciona como una conversación entre dos programas. El cliente es el navegador del visitante: pide una página y la dibuja en pantalla. El servidor es una computadora que espera esas peticiones y responde con archivos o datos. Cada clic, cada búsqueda y cada formulario es una petición y una respuesta.
Lo que el navegador recibe se escribe en tres lenguajes, cada uno con un trabajo:
- HTML da la estructura: qué es un título, un párrafo, un enlace o un formulario.
- CSS da la apariencia: colores, letras, espacios y cómo se reorganiza la página en un celular.
- JavaScript da el comportamiento: reacciona a clics, revisa datos y cambia la página sin recargarla.
Piense en una casa: HTML son las paredes, CSS la pintura y JavaScript la electricidad. A la parte que corre en el navegador se le llama front-end y a la que corre en el servidor, back-end. Este curso se concentra en el front-end y le muestra dónde termina su poder.
Breve historia
| Año | Hito |
|---|---|
| 1989 | Tim Berners-Lee, en el CERN de Suiza, propone un sistema de documentos enlazados por hipertexto |
| 1991 | Se publica el primer sitio web, que explicaba el propio proyecto, con un HTML de apenas un puñado de etiquetas |
| 1993 | El CERN libera la web para uso público y el navegador Mosaic agrega imágenes junto al texto |
| 1994 | Nace el W3C, el consorcio que publica los estándares de la web |
| 1995 | Brendan Eich crea JavaScript en Netscape en unos diez días |
| 1996 | El W3C publica CSS nivel 1, propuesto por Håkon Wium Lie, para separar contenido y estilo |
| 1997 | JavaScript se estandariza con el nombre ECMAScript |
| 2014 | HTML5 se publica como recomendación: video, formularios mejores y etiquetas con significado |
| 2015 | ECMAScript 2015 trae let, const y las funciones flecha que usará en este curso |
Desde 2019, HTML es un "estándar vivo" del WHATWG, el grupo de los fabricantes de navegadores, que lo actualiza sin versiones numeradas.
Por qué importa en ciberseguridad
La web es hoy una de las mayores superficies de ataque: bancos, hospitales, tiendas y gobiernos atienden a sus usuarios por un navegador. En 2018, por ejemplo, una aerolínea británica perdió datos de tarjetas de cientos de miles de clientes porque alguien modificó un solo archivo JavaScript de su página de pago.
Sin entender HTML, CSS y JavaScript no se puede:
- Leer un informe de seguridad web ni entender una falla del OWASP Top 10, como el cross-site scripting.
- Analizar una página de phishing para saber qué datos roba y a dónde los envía.
- Revisar en la pestaña Red si un sitio envía datos personales sin cifrar o a dominios extraños.
- Explicar a un equipo de desarrollo por qué una validación o un secreto están en el lugar equivocado.
Lo usan a diario analistas de seguridad de aplicaciones, pentesters web con autorización, analistas de SOC y, por supuesto, quienes desarrollan.
Dónde se usa
| Lugar | Ejemplo |
|---|---|
| Sitios y aplicaciones web | La página de un negocio, la banca en línea, el correo web |
| Aplicaciones de escritorio | Programas como Visual Studio Code están hechos con tecnología web por dentro |
| Celulares | Muchas aplicaciones muestran pantallas web dentro de la app |
| Equipos de red | El panel de configuración de su router o de una cámara IP es una página web |
| Correo electrónico | Los correos con formato son HTML, y los de phishing también |
| Herramientas de seguridad | Paneles de SIEM, consolas de nube y escáneres se manejan desde el navegador |
Conceptos clave
| Concepto | Qué significa |
|---|---|
| Navegador | Programa que pide páginas y las dibuja: Chrome, Edge, Firefox, Safari |
| Cliente y servidor | Quien pide (el navegador) y quien responde (la computadora del sitio) |
| Petición y respuesta | El mensaje que envía el navegador y lo que devuelve el servidor, con un código de estado |
| URL | La dirección completa de un recurso, como https://www.ejemplo.cr/contacto |
| Código fuente | El texto HTML, CSS y JavaScript que recibe el navegador; cualquiera puede leerlo |
| Etiqueta | La marca de HTML que dice qué es cada cosa, como p para un párrafo |
| Estándar | La especificación pública que todos los navegadores siguen para que una página se vea igual en todos |
Cómo leer las fichas de este curso
Cada lenguaje y cada función importante tendrá una ficha con su sintaxis general. Se lee así:
- Lo que está en MAYÚSCULAS lo reemplaza usted por un valor real.
- Lo que está entre corchetes es opcional.
- Los tres puntos indican que esa parte se puede repetir.
elemento.addEventListener(TIPO, FUNCIÓN[, OPCIONES])Aquí TIPO puede ser "click" y FUNCIÓN el código que se ejecuta; las opciones se pueden omitir.
Dónde pedir ayuda
- MDN Web Docs (
developer.mozilla.org): la referencia más confiable de HTML, CSS y JavaScript, también en español. - Validador del W3C (
validator.w3.org): revisa su HTML y le dice qué está mal escrito. - Las herramientas de desarrollador del navegador, del módulo 2: muestran los errores con el archivo y la línea.