TECNOLOGÍAS DE LA INFORMACIÓN

EN LÍNEA
DESARROLLO DE SISTEMAS INFORMÁTICOS
3 créditos

Profesor Autor:
Ing. Enrique Macías Arias, Mtr.

Titulaciones Semestre

• DESARROLLO DE SISTEMAS Quinto

INFORMÁTICOS

Tutorías: El profesor asignado se publicará en el entorno virtual de aprendizaje

(online.utm.edu.ec), y sus horarios de conferencias se indicarán en la sección

ENCUENTROS VIRTUALES.

PERÍODO MAYO / SEPTIEMBRE 2023

Índice

Tabla de contenido

Unidad II Introducción a aplicaciones web ............................................................................................... 3

Tema 1: Introducción ............................................................................................................................ 3
Introducción a la World Wide Web ........................................................................................................ 3
Diferencia entre Internet y la Web ......................................................................................................... 4
Protocolo Hypertext Transfer Protocol (HTTP) ....................................................................................... 5
Modelo cliente-servidor........................................................................................................................ 10
Estándares web ..................................................................................................................................... 15
Tipos de aplicaciones web .................................................................................................................... 20
Tema 2: Estructura de un documento web ................................................................................... 23
Introducción a HTML ............................................................................................................................. 23
Elementos de un documento web ........................................................................................................ 23
Estructura básica de un documento web ............................................................................................. 26
Partes de una dirección web y enlaces ................................................................................................. 29
Validación de documentos bien formados: reglas y validadores ......................................................... 30
Herramientas de depuración ................................................................................................................ 32

1
 Organización de la lectura para el estudiante por semana del compendio

Semanas Páginas
Semana 1 Página 3 – 10
Semana 2 Página 16 – 23
Semana 3 Página 24 – 30
Semana 4 Página 33 – 43

Resultado de aprendizaje de la asignatura

Este curso provee a los estudiantes el conocimiento y la experiencia práctica para diseñar
e implementar aplicaciones web cumpliendo con los estándares actuales y las buenas
prácticas de programación que faciliten su mantenibilidad, escalabilidad y adaptabilidad.

Ilustraciones gráficas

Sabías que. - La presente imagen dentro del manual mostrara información

interesante y novedosa de la asignatura.

Recuerde que. - La presente imagen dentro del manual permite recordar información
que es relevante y que vas necesitar en tu vida profesional.

Comprueba tu aprendizaje. - Es un cuestionario de un conjunto de preguntas que

se confecciona para obtener información con algún objetivo en concreto. Por cada tema
de la unidad se tendrá cuestionario que el estudiante debe resolver entre preguntas
teóricas y prácticas.

Videos. - Para complementar contenidos de la unidad dentro del manual se tiene

videos que permitirá al estudiante revisar y explorar conocimientos auditivos y visuales.

Curiosidades. - La presente imagen en el manual mostrara información que debes

conocer de la asignatura.

2
 Datos útiles. - La presente imagen en el manual mostrara información que deberás
tomar en cuenta en otras unidades de la asignatura o de otras asignaturas en semestre
superiores.

DESARROLLO DE SISTEMAS
INFORMÁTICOS

Unidad II Introducción a aplicaciones web

Resultado de aprendizaje de la unidad: Reconocer los estándares más comunes para

el diseño, desarrollo y despliegue de aplicaciones web.

Tema 1: Introducción
Introducción a la World Wide Web

La World Wide Web (www , W3 ) es un espacio de información donde los documentos y

otros recursos web se identifican mediante URI, están interconectados por enlaces de
hipertexto y se puede acceder a ellos a través de Internet. Se la conoce simplemente
como Web. Los documentos de hipertexto se denominan comúnmente páginas web., que
son principalmente documentos de texto formateados y anotados con el lenguaje de
marcado de hipertexto (HTML). Las páginas web pueden contener enlaces a imágenes,
videos y componentes de software que se muestran a los usuarios de una aplicación de
navegador web, que se ejecuta en la computadora del usuario, como páginas coherentes
de contenido multimedia. Los hipervínculos integrados permiten a los usuarios navegar
entre páginas web. Cuando se publican varias páginas web con un tema común o dentro
de un nombre de dominio común, la colección suele denominarse sitio web.

El informático británico Tim Berners-Lee es el inventor de la Web. Como empleado del

CERN, Berners-Lee distribuyó una propuesta el 12 de marzo de 1989 para lo que
eventualmente se convertiría en la World Wide Web. La propuesta inicial pretendía un

3
sistema de comunicación CERN más eficaz, pero Berners-Lee también se dio cuenta de
que el concepto podría implementarse en todo el mundo.

Berners-Lee y el informático belga Robert Cailliau propusieron en 1990 utilizar el

hipertexto “para enlazar y acceder a información de diversa índole como una red de nodos
en los que el usuario puede navegar a voluntad”, y Berners-Lee finalizó el primer sitio
web en diciembre de ese año. La primera prueba se completó alrededor del 20 de
diciembre de 1990 y Berners-Lee informó sobre el proyecto en el grupo de noticias
alt.hypertext el 7 de agosto de 1991.

Diferencia entre Internet y la Web

Internet es una gran red de redes, una infraestructura de red. Conecta millones de
computadoras a nivel mundial, formando una red en la que cualquier computadora puede
comunicarse con cualquier otra computadora siempre que ambas estén conectadas a
Internet. La información que viaja a través de Internet

Las características de internet son las siguientes:

• Es una red global que conecta millones de computadoras.

• Internet está descentralizado.
• Cada computadora de Internet es independiente.
• Hay varias formas de acceder a Internet.
• Hay más de 3.500 millones de usuarios de Internet en el mundo. lo hace a través
de una variedad de lenguajes conocidos como protocolos.

La World Wide Web, o simplemente web, es una forma de acceder a la información a

través de Internet. Es un modelo de intercambio de información que se basa en Internet.
La web utiliza el protocolo HTTP, solo uno de los idiomas que se hablan en Internet, para
transmitir datos. Los servicios web, que utilizan HTTP para permitir que las aplicaciones
se comuniquen con el fin de intercambiar lógica empresarial, utilizan la web para compartir
información. La web también utiliza navegadores, como Internet Explorer o Firefox , para
acceder a documentos web llamados páginas web que están vinculadas entre sí mediante
hipervínculos . Los documentos web también contienen gráficos, sonidos, texto y video.

4
Las características de internet son las siguientes:

• Es un sistema de servidores de Internet que admite documentos con formato

especial.
• Los documentos están formateados en un lenguaje de marcado que admite
enlaces a otros documentos.
• Puede saltar de un documento a otro simplemente haciendo clic en hipervínculos.
• Aplicaciones denominadas navegadores web que facilitan el acceso a la World
Wide Web.
• Hay más de 1.275.000.000 sitios web.

La web es solo una de las formas en que se puede difundir información a través de
Internet. Internet, no la web, también se utiliza para el correo electrónico, que se basa en
SMTP, grupos de noticias de Usenet, mensajería instantánea y FTP . Por lo tanto, la web
es solo una parte de Internet, aunque una gran parte, pero los dos términos no son
sinónimos y no deben confundirse.

Protocolo Hypertext Transfer Protocol (HTTP)

HTTP (Protocolo de transferencia de hipertexto) es el conjunto de reglas para transferir

archivos, como texto, imágenes, sonido, video y otros archivos multimedia, a través de la

5
web. Tan pronto como un usuario abre su navegador web, indirectamente está usando
HTTP. HTTP es un protocolo de aplicación que se ejecuta sobre el conjunto de
protocolos TCP/IP , que forma la base de Internet. La última versión de HTTP es HTTP/2 ,
que se publicó en mayo de 2015. Es una alternativa a su predecesor, HTTP 1.1 , pero no
deja obsoleto.

Cómo funciona HTTP

A través del protocolo HTTP, los recursos se intercambian entre los dispositivos del cliente
y los servidores a través de Internet. Los dispositivos cliente envían solicitudes a los
servidores de los recursos necesarios para cargar una página web; los servidores envían
respuestas al cliente para cumplir con las solicitudes. Las solicitudes y respuestas
comparten subdocumentos, como datos sobre imágenes, texto, diseños de texto, etc., que
un navegador web cliente reúne para mostrar el archivo completo de la página web.

Además de los archivos de página web que puede servir, un servidor web contiene un
demonio HTTP, un programa que espera las solicitudes HTTP y las maneja cuando llegan.
Un navegador web es un cliente HTTP que envía solicitudes a los servidores. Cuando el
usuario del navegador ingresa solicitudes de archivos "abriendo" un archivo web

6
escribiendo una URL o haciendo clic en un enlace de hipertexto, el navegador genera
una solicitud HTTP y la envía a la dirección de Protocolo de Internet (dirección IP ) indicada
por la URL. El demonio HTTP en el servidor de destino recibe la solicitud y devuelve el
archivo solicitado o los archivos asociados con la solicitud.

Cuando se envían estos pares de solicitud / respuesta, utilizan TCP / IP para reducir y
transportar información en pequeños paquetes de secuencias binarias de unos y ceros.
Estos paquetes se envían físicamente a través de cables eléctricos, cables de fibra óptica
y redes inalámbricas.

Las solicitudes y respuestas que los servidores y los clientes utilizan para compartir datos
entre sí consisten en código ASCII. Las solicitudes indican qué información busca el
cliente del servidor; las respuestas contienen código que el navegador del cliente traducirá
en una página web.

Solicitudes y respuestas HTTP

Cada interacción entre el cliente y el servidor se denomina mensaje. Los mensajes HTTP
son solicitudes o respuestas. Los dispositivos cliente envían solicitudes HTTP a los
servidores, que responden enviando respuestas HTTP a los clientes.

Solicitudes HTTP

Esto es cuando un dispositivo cliente, como un navegador de Internet, solicita al servidor

la información necesaria para cargar el sitio web. La solicitud proporciona al servidor la

7
información deseada que necesita para adaptar su respuesta al dispositivo del cliente.
Cada solicitud HTTP contiene datos codificados, con información como:

• La versión específica de HTTP. HTTP y HTTP / 2.

• Una URL. Esto apunta al recurso en la web.
• Un método HTTP. Esto indica la acción específica que la solicitud espera recibir
del servidor en su respuesta.
• Encabezados de solicitud HTTP. Esto incluye datos como qué tipo de navegador
se está utilizando y qué datos busca la solicitud del servidor. También puede incluir
cookies, que muestran información enviada previamente desde el servidor que
gestiona la solicitud.
• Un cuerpo HTTP. Esta es información opcional que el servidor necesita de la
solicitud, como formularios de usuario (inicios de sesión con nombre de usuario /
contraseña, respuestas breves y carga de archivos) que se envían al sitio web.

Respuestas HTTP. El mensaje de respuesta HTTP son los datos recibidos por un
dispositivo cliente desde el servidor web. Como sugiere su nombre, la respuesta es la
respuesta del servidor a una solicitud HTTP. La información contenida en una respuesta
HTTP se adapta al contexto que el servidor recibió de la solicitud. Las respuestas HTTP
suelen incluir los siguientes datos:

• Código de estado HTTP, que indica el estado de la solicitud al dispositivo cliente.

Las respuestas pueden indicar éxito, una respuesta informativa, una redirección o
errores en el lado del servidor o del cliente.
• Encabezados de respuesta HTTP, que envían información sobre el servidor y los
recursos solicitados.
• Un cuerpo HTTP (opcional). Si una solicitud tiene éxito, esta contiene los datos
solicitados en forma de código HTML, que el navegador del cliente traduce a una
página web.

8
Códigos de estado HTTP

En respuesta a las solicitudes HTTP, los servidores a menudo emiten códigos de

respuesta, lo que indica que la solicitud se está procesando, hubo un error en la solicitud
o que la solicitud se está redirigiendo. Los códigos de respuesta comunes incluyen:

• 200 OK. Esto significa que la solicitud, como GET o POST, funcionó y se está
atendiendo.
• 300 movidos permanentemente. Este código de respuesta significa que la URL
del recurso solicitado se ha cambiado de forma permanente.
• 401 No autorizado. El cliente, o el usuario que realiza la solicitud del servidor, no
ha sido autenticado.
• 403 Prohibido. Se conoce la identidad del cliente pero no se le ha dado
autorización de acceso.
• 404 No encontrado. Este es el código de error más frecuente. Significa que no se
reconoce la URL o que el recurso en la ubicación no existe.
• Error interno de servidor 500. El servidor se ha encontrado con una situación que
no sabe cómo manejar.

Proxies en HTTP

Los proxies, o servidores proxy, son los servidores de la capa de aplicación, computadoras
u otras máquinas que se encuentran entre el dispositivo cliente y el servidor. Los proxies
retransmiten solicitudes y respuestas HTTP entre el cliente y el servidor. Normalmente,
hay uno o más proxies para cada interacción cliente-servidor.

Los proxy pueden ser transparentes o no transparentes. Los proxies transparentes no

modifican la solicitud del cliente, sino que la envían al servidor en su forma original. Los
proxies no transparentes modificarán la solicitud del cliente de alguna manera. Los proxies
no transparentes se pueden utilizar para servicios adicionales, a menudo para aumentar
la velocidad de recuperación del servidor.

9
Los desarrolladores web pueden utilizar proxies para los siguientes propósitos:

• Almacenamiento en caché. Los servidores de caché pueden guardar páginas

web u otro contenido de Internet localmente, para una recuperación de contenido
más rápida y para reducir la demanda de ancho de banda del sitio.
• Autenticación. Controlar los privilegios de acceso a las aplicaciones y la
información en línea.
• Registro. El almacenamiento de datos históricos, como las direcciones IP de los
clientes que enviaron solicitudes al servidor.
• Filtrado web. Controlar el acceso a páginas web que pueden comprometer la
seguridad o incluir contenido inapropiado.
• Equilibrio de carga. Las solicitudes de los clientes al servidor pueden ser
manejadas por varios servidores, en lugar de uno solo.

Modelo cliente-servidor

Cliente-servidor denota una relación entre programas que cooperan en una aplicación,
compuesta por clientes que inician solicitudes de servicios y servidores que brindan esa
función o servicio.

El siguiente diagrama muestra el modelo cliente-servidor, o la arquitectura cliente-

servidor, que es un marco de aplicación distribuido que divide las tareas entre servidores
y clientes.

10
El modelo cliente-servidor, o arquitectura cliente-servidor, es un marco de aplicación
distribuido que divide las tareas entre servidores y clientes, que residen en el mismo
sistema o se comunican a través de una red informática o Internet. El cliente confía en
enviar una solicitud a otro programa para acceder a un servicio puesto a disposición por
un servidor. El servidor ejecuta uno o más programas que comparten recursos y
distribuyen el trabajo entre los clientes.

La relación cliente-servidor se comunica en un patrón de mensajes de solicitud-respuesta

y debe adherirse a un protocolo de comunicaciones común, que define formalmente las
reglas, el lenguaje y los patrones de diálogo que se utilizarán. La comunicación cliente-
servidor normalmente se adhiere al conjunto de protocolos TCP / IP.

El protocolo TCP mantiene una conexión hasta que el cliente y el servidor hayan
completado el intercambio de mensajes. El protocolo TCP determina la mejor manera de
distribuir los datos de la aplicación en paquetes que las redes pueden entregar, transfiere
y recibe paquetes de la red y administra el control de flujo y la retransmisión de paquetes
caídos o confusos. IP es un protocolo sin conexión en el que cada paquete que viaja a
través de Internet es una unidad de datos independiente que no está relacionada con
ninguna otra unidad de datos.

Las solicitudes de los clientes se organizan y priorizan en un sistema de programación,

que ayuda a los servidores a hacer frente a la recepción de solicitudes de muchos clientes
distintos en un corto espacio de tiempo. El enfoque cliente-servidor permite que cualquier
computadora de propósito general expanda sus capacidades utilizando los recursos
compartidos de otros hosts. Las aplicaciones cliente-servidor más populares incluyen el
correo electrónico, la World Wide Web y la impresión en red.

Categorías de computación cliente-servidor

Hay cuatro categorías principales de computación cliente-servidor:

Arquitectura de una capa: consiste en un programa simple que se ejecuta en una sola
computadora sin requerir acceso a la red. Las solicitudes de los usuarios no administran
ningún protocolo de red, por lo tanto, el código es simple y la red se libera del tráfico
adicional.

11
Arquitectura de dos capas: consta del cliente, el servidor y el protocolo que vincula los
dos niveles. El código de la interfaz gráfica de usuario reside en el host del cliente y la
lógica del dominio reside en el host del servidor. La GUI cliente-servidor está escrita en
lenguajes de alto nivel como C ++ y Java.

Arquitectura de tres capas: consiste en un nivel de presentación, que es el nivel de

interfaz de usuario, el nivel de aplicación, que es el nivel de servicio que realiza el
procesamiento detallado, y el nivel de datos, que consiste en un servidor de base de datos
que almacena información.

Arquitectura de N-Capas: divide una aplicación en capas lógicas, que separan

responsabilidades y administran dependencias, y niveles físicos, que se ejecutan en
máquinas independientes, mejoran la escalabilidad y agregan latencia de la comunicación
de red adicional. La arquitectura de N- Capas puede ser de capa cerrada, en la que una
capa solo puede comunicarse con la siguiente capa hacia abajo, o de capa abierta, en la
que una capa puede comunicarse con cualquier capa debajo de ella.

Red cliente-servidor

Una red cliente-servidor es el medio a través del cual los clientes acceden a recursos y
servicios desde una computadora central, ya sea a través de una red de área local (LAN)
o una red de área amplia (WAN), como Internet. Se puede emplear un servidor único
llamado demonio con el único propósito de esperar las solicitudes del cliente, momento
en el que se inicia la conexión de red hasta que se haya cumplido la solicitud del cliente.

El tráfico de red se clasifica como cliente a servidor (tráfico de norte a sur) o de servidor a
servidor (tráfico de este a oeste). Los servicios de red más populares incluyen correo
electrónico, intercambio de archivos, impresión y la World Wide Web. Una de las
principales ventajas de la red cliente-servidor es la gestión centralizada de aplicaciones y
datos.

12
Ventajas del modelo de arquitectura cliente-servidor:

• Un único servidor que aloja todos los datos necesarios en un solo lugar facilita la
protección de los datos y la gestión de la autorización y autenticación de los
usuarios.
• Se pueden agregar recursos como segmentos de red, servidores y computadoras
a una red cliente-servidor sin interrupciones significativas.
• Se puede acceder a los datos de manera eficiente sin necesidad de que los clientes
y el servidor estén muy cerca.
• Todos los nodos en el sistema cliente-servidor son independientes y solicitan datos
solo del servidor, lo que facilita las actualizaciones, los reemplazos y la reubicación
de los nodos.
• Los datos que se transfieren a través de protocolos cliente-servidor son
independientes de la plataforma.

Diferencia entre cliente y servidor

Los clientes, también conocidos como solicitantes de servicios, son piezas de hardware o
software de servidor que solicitan recursos y servicios puestos a disposición por un
servidor. La informática del cliente se clasifica como espesa, delgada o híbrida.

Cliente grueso: un cliente que proporciona una amplia funcionalidad, realiza la mayor
parte del procesamiento de datos por sí mismo y depende muy poco del servidor.

Cliente ligero: un servidor de cliente ligero es una computadora liviana que depende en
gran medida de los recursos de la computadora host; un servidor de aplicaciones realiza
la mayor parte del procesamiento de datos requerido.

Cliente híbrido: al poseer una combinación de características de cliente ligero y cliente

pesado, un cliente híbrido depende del servidor para almacenar datos persistentes, pero
es capaz de procesamiento local.

Un servidor es un dispositivo o programa de computadora que proporciona funcionalidad

para otros dispositivos o programas. Cualquier proceso computarizado que pueda ser
utilizado o invocado por un cliente para compartir recursos y distribuir el trabajo es un
servidor. Algunos ejemplos comunes de servidores incluyen:

13
Servidor de aplicaciones: aloja aplicaciones web que los usuarios de la red pueden
utilizar sin necesidad de su propia copia.

Servidor de computación: comparte una enorme cantidad de recursos de computadora

con computadoras en red que requieren más potencia de CPU y RAM de la que
normalmente está disponible para una computadora personal.

Servidor de base de datos: mantiene y comparte bases de datos para cualquier

programa informático que ingiera datos bien organizados, como software de contabilidad
y hojas de cálculo.

Servidor web: aloja páginas web y facilita la existencia de la World Wide Web.

Programación del lado del servidor

Se refiere a un programa que se ejecuta en el servidor y se centra en la generación de

contenido dinámico. La programación del lado del servidor se utiliza para consultar e
interactuar con la base de datos, acceder a archivos en un servidor, interactuar con otros
servidores, procesar la entrada del usuario y estructurar aplicaciones web. Los lenguajes
de programación populares para la programación del lado del servidor incluyen C ++, Java
y JSP, PHP, Python y Ruby on Rails.

Programación del lado del cliente se refiere a un programa que se ejecuta en la máquina
del cliente y se centra en la interfaz de usuario y otros procesos como leer y / o escribir
cookies. La programación del lado del cliente se utiliza para enviar solicitudes al servidor,
interactuar con el almacenamiento local, interactuar con el almacenamiento temporal,
crear páginas web interactivas y funciona como una interfaz entre el cliente y el servidor.
Los lenguajes de programación populares para la programación cliente-servidor incluyen
AJAX, CSS, HTML, Javascript y VBScript.

La representación del lado del servidor se refiere a la capacidad de una aplicación para
convertir archivos HTML en el servidor en una página completamente representada para

14
el cliente. El navegador web realiza una solicitud de información del servidor, que
responde, normalmente en milisegundos, con la pantalla HTML completamente
renderizada. Los motores de búsqueda pueden indexar y rastrear contenido antes de que
se entregue, lo que hace que la representación del lado del servidor sea muy beneficiosa
para el SEO.

En la representación cliente-servidor, en lugar de recibir todo el contenido del

documento HTML, el contenido se representa en el navegador utilizando la biblioteca
JavaScript del lado del cliente. El navegador no realiza una nueva solicitud al servidor
cuando se carga una nueva página. La clasificación de los motores de búsqueda puede
verse afectada negativamente, ya que el contenido no se procesa hasta que la página se
carga en el navegador; sin embargo, la reproducción del sitio web tiende a ser más rápida
en el lado del cliente.

Cliente-servidor vs peer-to-peer

Peer-to-peer (P2P) es un modelo de comunicaciones descentralizado en el que todos los

nodos de la red tienen una capacidad equivalente y pueden funcionar como cliente y
servidor. Los nodos de la informática punto a punto utilizan colectivamente sus recursos
y se comunican entre sí directamente a petición.

Un algoritmo en el protocolo de comunicaciones entre pares equilibra la carga, haciendo

que otros pares estén disponibles para compensar cualquier tiempo de inactividad de los
recursos y re direccionando las solicitudes a medida que cambia la capacidad de carga y
la disponibilidad de los pares. Una de las principales ventajas de las redes peer-to-peer
es la capacidad de expandir la red para administrar una gran cantidad de clientes.

Estándares web

La World Wide Web Antes De Los Estándares

Antes de los estándares web, no existían muchas reglas fijas para ninguna parte de este
sistema; no hay reglas formales sobre cómo se debe crear el contenido, ni requisitos en

15
cuanto a cómo un navegador debe entregar esa información a las personas que la
solicitan.

Entonces, en cierto modo, la red funcionaba un poco como el juguete de los niños en el
que tienes que clasificar los bloques de diferentes formas en los agujeros correctos. En
esta analogía, los diferentes tipos de navegadores son los orificios de diferentes formas y
el contenido o los sitios web son los bloques de colores brillantes.

En el pasado, como creador de contenido, hacías un sitio web que se ajustara al

navegador al que estaba destinado. Por ejemplo, crearía un bloque con forma de IE para
poder pasarlo a través del agujero de Internet Explorer.

Los desarrolladores de los 90 a menudo tenían que hacer tres o cuatro versiones de cada
sitio web que creaban, para que fuera compatible con cada uno de los navegadores
disponibles en ese momento. Y lo que es más, los fabricantes de navegadores en un
intento por mejorar su competencia introduciría "características" que diversificaron su
enfoque de sus competidores.

Los estándares web se introdujeron para proteger el ecosistema web, para mantenerlo
abierto, gratuito y accesible para todos. Poniendo la web en una burbuja protectora y
disolviéndola con la idea de tener que construir sitios web que se adapten a navegadores
específicos.

Cuando se introdujeron los estándares, se alentó a los fabricantes de navegadores a

adherirse a una forma estandarizada de hacer las cosas, lo que resultó en que la
compatibilidad cruzada se volviera más fácil para los creadores de contenido y ya no
existiera la necesidad de crear varias versiones del mismo sitio web.

16
Importancia de los estándares
• Ayudan A MANTENER LA WEB LIBRE Y ACCESIBLE PARA TODOS
• Simplifican EL CÓDIGO FUENTE
• Reducción DEL TIEMPO DE DESARROLLO Y MANTENIMIENTO
• Hacen de la web un lugar más accesible
• Permiten la validación y compatibilidad con versiones anteriores
• Ayudan a mantener un mejor seo (optimización de motores de búsqueda)
• Crean una reserva de conocimiento común

Organizaciones de estándares web

Los grupos a través de los cuales se desarrollan los estándares a veces se denominan
“Organizaciones de desarrollo de estándares” o SDO. Los SDO clave en el espacio web
incluyen Internet Engineering Task Force (IETF), World Wide Web Consortium (W3C),
WHATWG y ECMA TC39. Históricamente, también hubo grupos como el Proyecto de
Estándares Web (WaSP), que abogaba por que las organizaciones adoptaran los
estándares Web.

17
Los grupos que trabajan en Internet y los Estándares Web generalmente operan bajo un
régimen libre de regalías. Eso significa que cuando utiliza un estándar web no tiene que
pagarle a nadie, como a alguien que podría tener una patente relevante.

IETF

Es donde se estandarizan las tecnologías de Internet subyacentes como TCP / IP

(Protocolo de control de transmisión / Protocolo de Internet) y DNS (Sistema de nombres
de dominio). Otra tecnología clave desarrollada en IETF es algo llamado Protocolo de
transporte de hipertexto (HTTP) del que quizás haya oído hablar.

W3C

El Consorcio World Wide Web (W3C) es una comunidad internacional donde las
organizaciones miembros, un personal de tiempo completo , expertos invitados y el
público trabajan juntos para desarrollar estándares web. Dirigido por el inventor y director
de la Web Tim Berners-Lee y el CEO Jeffrey Jaffe, la misión del W3C es llevar la Web a
su máximo potencial.

La comunidad fue fundada en 1994 en el MIT (Instituto Tecnológico de Massachusetts)

en colaboración con el CERN. En el momento de esta publicación, W3C tiene 475
empresas y organizaciones miembros y existe como un consorcio entre 4 instituciones
académicas: MIT (EE. UU.), ERCIM (Francia), Universidad KEIO (Japón) y Universidad
de Beihang (China).

El trabajo en W3C ocurre en grupos de trabajo y grupos comunitarios. Los grupos

comunitarios son el lugar donde se produce una gran cantidad de innovación inicial en
torno a las nuevas tecnologías web. Los grupos comunitarios pueden producir nuevos
estándares web, pero oficialmente se consideran "pre estándar". Los grupos comunitarios
están abiertos a la participación de cualquier persona, independientemente de que la
organización para la que trabaja o esté afiliada sea miembro del W3C o no.

18
WHATWG

El WHATWG fue originalmente un grupo disidente del W3C. Se formó en 2007 porque
algunos proveedores de navegadores no estaban de acuerdo con la dirección en la que
el W3C estaba impulsando HTML. WHATWG sigue siendo el lugar donde se desarrolla y
evoluciona HTML. Sin embargo, la comunidad de participación en la especificación HTML
todavía incluye a muchas personas de la comunidad W3C, y muchas personas afiliadas
a WHATWG participan en los grupos de trabajo del W3C.

WICG

El Web Incubator Community Group (WICG, pronunciado Why-CG) es un grupo

comunitario especial, dentro del W3C, donde se discuten y desarrollan algunas
tecnologías web nuevas y emergentes.

¿QUÉ ES EL ECMA TC39?

Ecma es una organización de estándares para sistemas de información y comunicación,

que fue fundada en 1961 para estandarizar los sistemas informáticos en Europa. Su
nombre proviene de ser conocido anteriormente como la "Asociación Europea de
Fabricantes de Computadoras", pero ahora se conoce como "Ecma International -
Asociación europea para estandarizar los sistemas de información y comunicación" desde
que la organización se globalizó en 1994.

El estándar ECMA-262 describe la Especificación del lenguaje ECMAScript, que es la

especificación estandarizada del lenguaje de secuencias de comandos conocido como
JavaScript. Hay diez ediciones de ECMA-262 que se han publicado (la décima edición se
publicó en junio de 2018).

19
Nuevos estándares

Las propuestas para nuevos estándares generalmente comienzan como una discusión
dentro de un grupo de la comunidad (este es especialmente el caso en el W3C) o a través
de problemas que surgen en el repositorio de GitHub relevante.

A través de los diferentes SDO, parece haber un tema común de ascensión; una vez que
la discusión ha comenzado, asciende dentro de la organización, y en cada nivel, un comité
de decisión necesita llegar a un consenso para aprobar la elevación de esa discusión.
Esto se repite hasta que la discusión se convierte en una propuesta, luego esa propuesta
se convierte en un borrador y el borrador pasa a convertirse en un estándar oficial.

Tipos de aplicaciones web

Existen 4 características de una aplicación web que te ayudarán a diferenciarlas de otros
tipos de apps:

• Requieren un único desarrollo para cualquier dispositivo. Un mismo desarrollo en

HTML5 es suficiente para cualquier sistema operativo.
• No es necesario descargarlas. La aplicación se aloja en un servidor y se accede a
ella a partir de un navegador. Esto significa que es necesario estar conectado para
acceder a ella.
• Son accesibles desde cualquier navegador. Si tienes un navegador instalado en el
dispositivo (Firefox, Safari, Chrome…) podrás acceder a la aplicación web.
• Aparecen como resultado en los buscadores tradicionales. Al no necesitar
descarga no las encontrarás en las app stores, pero sí aparecerán como resultado
en motores como Google.

Aunque las aplicaciones nativas permiten desarrollos más complejos, también son más
costosos y no siempre necesarios. La decisión dependerá del uso que se vaya a hacer de
la aplicación.

Aplicación web estática

Si optamos por crear una app web estática, lo primero que debemos saber es que este
tipo de web app muestra poca información y no suele cambiar mucho.

20
Por regla general suelen estar desarrolladas en HTML y CSS, aunque también se pueden
mostrar en alguna parte de la aplicación web objetos en movimiento como por ejemplo
banners, GIF animados o vídeos. También se puede hablar de desarrollo de aplicaciones
web con jQuery y Ajax.

Un portfolio, un curriculum digital o una página de presentación de empresa serían

ejemplos de aplicaciones web estáticas.

Modificar los contenidos de las apps estáticas no es sencillo. Para hacerlo es necesario
editar el HTML y actualizarlo en el servidor. Estos cambios serán, normalmente,
responsabilidad del webmaster o de la empresa de desarrollo que programó el diseño de
la web app.

Aplicación web dinámicas

Las aplicaciones web dinámicas son mucho más complejas a nivel técnico. Utilizan bases
de datos para cargar a información y estos contenidos se actualizan cada vez que el
usuario accede a la web app.

Existen muchos lenguajes de programación para el desarrollo de aplicaciones web

dinámicas. Los lenguajes PHP y ASP son los más comunes porque permiten una buena
estructuración del contenido.

Las aplicaciones web dinámicas suelen contar con un panel de administrador (CMS) para
realizar cambios.

El proceso de actualización es muy sencillo y ni siquiera necesita entrar en el servidor

para modificarlo. Además permite implementar muchas funcionalidades, como foros o
bases de datos.

El diseño de las aplicaciones web dinámicas también puede modificarse al gusto del
administrador.

Tienda virtual o comercio electrónico

Si por el contrario la aplicación web es una tienda o comercio digital, podemos decir que
el desarrollo tenderá a parecerse al de un m-commerce o un e-commerce.

21
El desarrollo es más complicado porque debe permitir pagos electrónicos a través de
tarjeta de crédito, PayPal u otro método de pago. El desarrollador también deberá crear
un panel de gestión para el administrador. A partir de él se subirán, actualizarán o
eliminarán los productos y se podrán gestionar pedidos y los pagos.

Algunos ejemplos de proyectos de aplicaciones web de venta online los protagonizan

grandes empresas como El Corte Inglés. En este caso la web app se ajusta al dispositivo
móvil como una aplicación móvil, permitiendo interactuar con ella como si fuera una app
nativa.

Portal web app

Con portal nos referimos a un tipo de aplicación en el que la página principal permite el
acceso a diversos apartados, categorías o secciones. Estos son algunos ejemplos:

• Foros
• Chats
• Correo electrónico
• Buscadores
• Zona de acceso con registro

Aplicación web con gestor de contenidos

En el caso de aplicaciones web en las que el contenido se debe ir actualizando

continuamente lo mejor es recurrir a un gestor de contenidos (CMS) a través del cual el
administrador pude ir realizando los cambios y actualizaciones él mismo.

Algunos ejemplos de gestores de contenidos son:

WordPress: Sin duda es el más extendido de los gestores de contenidos. Existe mucha
información en la red, tutoriales y guías para personalizarlo, entenderlo y además es
gratuito.

Joomla: Es el segundo en el top CMS, tras WordPress. Aunque no goza de tantos

usuarios sí que tiene una comunidad potente.

22
Drupal: Es un CSM de software libre. Es muy adaptable, y recomendado especialmente
para generar comunidades.

Tema 2: Estructura de un documento web

Introducción a HTML

HTML (lenguaje de marcado de hipertexto) no es un lenguaje de programación. Es un

lenguaje de marcado que les dice a los navegadores web cómo estructurar las páginas
web que visita. Puede ser tan complicado o tan simple como quiera el desarrollador web.
HTML consta de una serie de elementos, que se utilizan para encerrar, envolver o marcar
diferentes partes del contenido para que aparezca o actúe de cierta manera. Las etiquetas
adjuntas pueden convertir el contenido en un hipervínculo para conectarse a otra página,
poner palabras en cursiva, etc.

Recuerde que. - Las etiquetas en HTML no distinguen entre mayúsculas y

minúsculas. Esto significa que se pueden escribir en mayúsculas o minúsculas. Por
ejemplo, una <title>etiqueta podría ser escrita como <title>, <TITLE>, <Title>, <TiTlE>,
etc, y que va a funcionar. Sin embargo, se recomienda escribir todas las etiquetas en
minúsculas para mantener la coherencia y la legibilidad.

Elementos de un documento web

Anatomía de un elemento HTML

23
La etiqueta de apertura: consiste en el nombre del elemento (en este ejemplo, p para
párrafo), envuelto entre paréntesis angulares de apertura y cierre. Esta etiqueta de
apertura marca dónde el elemento comienza o comienza a tener efecto. En este ejemplo,
precede al inicio del texto del párrafo.

El contenido: este es el contenido del elemento. En este ejemplo, es el texto del párrafo.

La etiqueta de cierre: es la misma que la etiqueta de apertura, excepto que incluye una
barra diagonal antes del nombre del elemento. Esto marca dónde termina el elemento. No
incluir una etiqueta de cierre es un error común para principiantes que puede producir
resultados peculiares.

El ejemplo contiene un atributo class. Un atributo debe tener:

• Un espacio entre este y el nombre del elemento. (Para un elemento con más de un
atributo, los atributos también deben estar separados por espacios).
• El nombre del atributo, seguido de un signo igual.
• Un valor de atributo, envuelto con comillas de apertura y cierre.

Etiquetas anidadas

<p>Esto es un <strong>párrafo</strong> importante.</p>

24
Los elementos se pueden colocar dentro de otros elementos. A esto se le llama
anidamiento.

Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el
elemento y luego lo abrimos strong. Para un anidamiento adecuado, debemos cerrar el
strong elemento primero, antes de cerrar el p.

Las etiquetas tienen que abrirse y cerrarse de forma que queden dentro o fuera de la otra.
Colocándolas en orden incorrecto de cierre, el navegador tiene que adivinar su intención.
Este tipo de adivinanzas puede dar lugar a resultados inesperados.

Anatomía de un documento HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>My test page</title>

</head>

<body>

<p>This is my page</p>

</body>

</html>

El tipo de documento es un artefacto histórico que debe incluirse para que todo lo demás
funcione correctamente. <!DOCTYPE html>es la cadena de caracteres más corta que
cuenta como un tipo de documento válido.

25
<html></html>: El <html>elemento. Este elemento envuelve todo el contenido de la
página. A veces se lo conoce como elemento raíz.

<head></head>: El <head>elemento. Este elemento actúa como un contenedor para todo

lo que desea incluir en la página HTML, que no es el contenido que la página mostrará a
los espectadores. Esto incluye palabras clave y una descripción de la página que
aparecería en los resultados de búsqueda, CSS para diseñar el contenido, declaraciones
de juegos de caracteres y más.

<meta charset="utf-8">: Este elemento especifica el juego de caracteres para su

documento en UTF-8, que incluye la mayoría de los caracteres de la gran mayoría de los
lenguajes escritos humanos. Con esta configuración, la página ahora puede manejar
cualquier contenido textual que pueda contener. No hay ninguna razón para no configurar
esto y puede ayudar a evitar algunos problemas más adelante.

<title></title>: Esto establece el título de la página, que es el título que aparece en la

pestaña del navegador en la que se carga la página. El título de la página también se usa
para describir la página cuando se marca como favorita.

<body></body: Este contiene todo el contenido que se muestra en la página, incluido

texto, imágenes, videos, juegos, pistas de audio reproducibles o cualquier otra cosa.

Estructura básica de un documento web

Las páginas web pueden verse y se verán bastante diferentes entre sí, pero todas tienden
a compartir componentes estándar similares, a menos que la página muestre un video o
juego en pantalla completa, sea parte de algún tipo de proyecto de arte o simplemente
esté mal estructurada:
26
Encabezamiento:

Por lo general, una gran franja en la parte superior con un gran título, logotipo y quizás un
eslogan. Por lo general, esto permanece igual de una página web a otra.

Barra de navegación:

Enlaces a las secciones principales del sitio; generalmente representado por botones de
menú, enlaces o pestañas. Al igual que el encabezado, este contenido generalmente
permanece constante de una página web a otra; tener una navegación inconsistente en
su sitio web solo conducirá a usuarios confundidos y frustrados. Muchos diseñadores web
consideran que la barra de navegación es parte del encabezado en lugar de un
componente individual, pero eso no es un requisito; de hecho, algunos también
argumentan que tener los dos por separado es mejor para la accesibilidad, ya que los
lectores de pantalla pueden leer mejor las dos funciones si están separados.

Contenido principal:

Un área grande en el centro que contiene la mayor parte del contenido exclusivo de una
página web determinada, por ejemplo, el video que desea ver, la historia principal que
está leyendo, el mapa que desea ver o los titulares de las noticias. etc. Esta es la única
parte del sitio web que definitivamente variará de una página a otra.

Barra lateral:

Alguna información periférica, enlaces, citas, anuncios, etc. Por lo general, esto es
contextual a lo que se incluye en el contenido principal (por ejemplo, en la página de un
artículo de noticias, la barra lateral puede contener la biografía del autor o enlaces a
artículos relacionados) pero no También son casos en los que encontrará algunos
elementos recurrentes como un sistema de navegación secundario.

27
Pie de página:

Una franja en la parte inferior de la página que generalmente contiene letra pequeña,
avisos de derechos de autor o información de contacto. Es un lugar para colocar
información común (como el encabezado) pero, por lo general, esa información no es
crítica ni secundaria para el sitio web en sí. El pie de página también se utiliza a veces
con fines de SEO, al proporcionar enlaces para un acceso rápido a contenido popular.

Un "sitio web típico" podría estructurarse de la siguiente manera:

En su código HTML, puede marcar secciones de contenido según su funcionalidad; puede

usar elementos que representen las secciones de contenido descritas anteriormente sin
ambigüedades, y las tecnologías de asistencia, como los lectores de pantalla, pueden
reconocer esos elementos y ayudar con tareas como "encontrar la navegación principal
"o" buscar el contenido principal ". Hay una serie de consecuencias de no usar la
estructura de elementos y la semántica correctas para el trabajo correcto.

28
Para implementar dicho marcado semántico, HTML proporciona etiquetas dedicadas que
puede utilizar para representar dichas secciones, por ejemplo:

• Cabecera: <header>.
• Barra de navegación: <nav>.
• Contenido principal: <main>, con varias subsecciones de contenido representados
por <article>, <section>y <div>elementos.
• Recuadro: <aside>; a menudo colocado en el interior <main>.
• Pie de página: <footer>

Partes de una dirección web y enlaces

Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han
sido una característica de la Web desde el principio y son lo que hace de la Web una red.
Los hipervínculos nos permiten vincular documentos a otros documentos o recursos,
vincular a partes específicas de documentos o hacer que las aplicaciones estén
disponibles en una dirección web. Casi cualquier contenido web se puede convertir en un
enlace de modo que cuando se hace clic o se activa de otro modo, el navegador web se
dirige a otra dirección web (URL).

Recuerde que. - una URL puede apuntar a archivos HTML, archivos de texto,
imágenes, documentos de texto, archivos de video y audio, o cualquier otra cosa que viva
en la Web. Si el navegador web no sabe cómo mostrar o manejar el archivo, le preguntará
si desea abrir el archivo (en cuyo caso el deber de abrir o manejar el archivo se transfiere
a una aplicación nativa adecuada en el dispositivo). O descargue el archivo (en cuyo caso
puede intentar tratar con él más adelante).

29
Un enlace básico se crea envolviendo el texto u otro contenido, dentro de un elemento
<a> y utilizando el atributo href

<p>Enlace a

<a href="https://www.google.com">Google</a>.

</p>

El título contiene información adicional sobre el enlace, como qué tipo de información
contiene la página o cosas que debe tener en cuenta en el sitio web.

<p>Enlace a

<a href="https://www.google.com"

title="El buscador más popular">Google</a>.

</p>

El título de un enlace solo se muestra al pasar el mouse, lo que significa que las personas
que dependen de los controles del teclado o las pantallas táctiles para navegar por las
páginas web tendrán dificultades para acceder a la información del título

Validación de documentos bien formados: reglas y validadores

El HTML no es un lenguaje de programación, pero tiene su propio vocabulario (las marcas,

atributos y valores de atributos que podemos utilizar) y su propia sintaxis (las reglas de
utilización de sus elementos). Las páginas web son documentos creados por humanos e
interpretados por los ordenadores (por los navegadores), por lo que podemos entender el
HTML como un lenguaje con el que los humanos nos comunicamos con los ordenadores,
aunque sólo sea para decirles cómo tienen que mostrar el contenido de las páginas web
a otros humanos.

30
Quizás uno de los motivos del éxito de la web (es decir, del HTML) fue que los
navegadores siempre han sido capaces de procesar documentos con errores y de
conseguir en muchos casos mostrarlos como deseaba su autor. Por supuesto, esa
capacidad se debe al trabajo y esfuerzo de los programadores que crean los navegadores,
que han incluido en los navegadores numerosas reglas para reconocer los errores más
comunes e intentar corregirlos sobre la marcha.

En el año 2000, el W3C intentó con el XHTML obligar a que las páginas web dejaran de
tener errores de sintaxis. Ese intento fue un fracaso, y en el HTML 5 se ha tomado el
camino contrario, detallando cómo actuar ante violaciones de la propia sintaxis y
consiguiendo un comportamiento similar en todos los navegadores. Por cierto, aunque en
el HTML 5 se mantiene una variante con sintaxis estricta, el XHTML 5, su uso real es
residual.

De todas formas, en un curso de creación de páginas web es lógico insistir en la necesidad

de escribir páginas sin errores de sintaxis. Es verdad que podemos cometer errores y es
bueno que los navegadores aun así consigan mostrar las páginas correctamente, pero si
nos acostumbramos a escribir páginas plagadas de errores, en el momento en que los
navegadores ya no puedan entender nuestras páginas será más difícil encontrar el origen
del error porque habrá demasiados.

Validadores disponibles en Internet

W3C ofrece desde hace muchos años varios validadores que permiten validar todo tipo
de documentos (HTML, XHTML, CSS, SVG, MathML, XML, etc.). Los distintos validadores
son:

Validación de lenguajes de marcas (HTML, XHTML, SVG, MathML, SMIL)

Validación de hojas de estilo CSS

Comprobador de enlaces

Validación total (HTML, CSS, internacionalización, RSS)

31
La validación se puede hacer de tres maneras:

• dando la dirección web del recurso (si ya está disponible en Internet),

• subiendo el archivo mediante un formulario de subida de archivos
• copiando el código fuente en un formulario.

Para la validación de HTML 5, el validador del W3C utiliza el validador de validator.nu.

Este validador fue iniciado en 2005 por Henri Sivonen, que desde 2007 trabaja en la
fundación Mozilla.

Validación en el navegador

En Firefox o Chrome se pueden validar las páginas web y hojas de estilo accediendo a
las páginas web de los validadores disponibles en Internet.

E en Firefox podremos recurrir a extensiones como Web Developer, cuya instalación y

uso se comenta en la lección Complementos de Firefox.

Herramientas de depuración

Todos los navegadores web modernos incluyen un potente conjunto de herramientas para
desarrolladores. Estas herramientas hacen una variedad de cosas, desde inspeccionar
HTML, CSS y JavaScript actualmente cargados, hasta mostrar qué activos ha solicitado

32
la página y cuánto tiempo tardaron en cargarse. Este artículo explica cómo utilizar las
funciones básicas de las herramientas de desarrollo de tu navegador

Formas de acceder a las herramientas de depuración

• Teclado: Ctrl + Mayús + I , excepto en

o Internet Explorer y Edge: F12
o macOS: ⌘ + ⌥ + I
• Barra de menú:
o Firefox: Menú ➤ Desarrollador web ➤ Alternar herramientas, o ➤
Herramientas ➤ Alternar herramientas del desarrollador web

o Chrome: Más herramientas ➤ Herramientas del desarrollador

33
 o Safari: Desarrollador ➤ Mostrar el inspector web. Si no puedes ver el
menú Desarrollar, ve a Safari ➤ Preferencias ➤ Avanzado y marca la
casilla de verificación Mostrar menú desarrollador en la barra de menú.
o Opera: Desarrollador ➤ Herramientas para desarrolladores
• Menú contextual: Presiona y mantén presionado / haz clic con el botón derecho
en un elemento en una página web (Ctrl-clic en Mac) y elige Inspeccionar
elemento en el menú contextual que aparece. (Una ventaja adicional: este método,
inmediatamente resalta el código del elemento en el que hiciste clic con el botón
derecho).

Las herramientas del desarrollador, generalmente se abren de forma predeterminada en

el inspector, parecido a la siguiente captura de pantalla. Esta herramienta muestra cómo
se ve el HTML en tu página en tiempo de ejecución, así como qué CSS se aplica a cada
elemento de la página. También te permite modificar instantáneamente el HTML y CSS y
ver los resultados de tus cambios reflejados en vivo en la ventana del navegador.

34
Explorando el DOM con el inspector
Para empezar, haz clic con el botón derecho (Ctrl+clic) en un elemento HTML en el
inspector del DOM y observa el menú contextual. Las opciones disponibles en el menú
varían según el navegador, pero en su mayoría, las más importantes son las mismas:

• Eliminar nodo (A veces Eliminar elemento). Elimina el elemento actual.

• Editar como HTML (A veces Agregar atributo/Editar texto). Te permite cambiar el
HTML y ver los resultados en tiempo real. Muy útil para depurar y probar.
• :hover/:active/:focus. Obliga a que se activen los estados de los elementos, para
que puedas ver cómo se vería su estilo.
• Copiar/Copiar como HTML. Copie el HTML seleccionado actualmente.
• Algunos navegadores también disponen de Copiar ruta CSS y Copiar XPath, para
permitirte copiar el selector CSS o la expresión XPath que seleccionaría el
elemento HTML actual.

35
Explorar el editor CSS
De manera predeterminada, el editor CSS muestra las reglas CSS aplicadas al elemento
seleccionado actualmente:

Estas características son especialmente útiles:

• Las reglas aplicadas al elemento actual se muestran en orden de mayor a menor

especificidad.
• Haz clic en las casillas de verificación junto a cada declaración para ver qué
pasaría si eliminaras la declaración.
• Haz clic en la pequeña flecha al lado de la abreviatura de cada propiedad para
mostrar los nombres completos equivalentes de la propiedad.
• Haz clic en el nombre o valor de una propiedad para que aparezca un cuadro de
texto, donde puedes ingresar un nuevo valor para obtener una vista previa en vivo
de un cambio de estilo.
• Junto a cada regla está el nombre del archivo y el número de línea en el que se
define la regla. Al hacer clic en esa regla, las herramientas de desarrollo saltan
para mostrarlas en su propia vista, donde generalmente puedes editar y guardar.

36
 • También puedes hacer clic en la llave de cierre de cualquier regla para que
aparezca un cuadro de texto en una nueva línea, donde puedes escribir una
declaración completamente nueva para tu página.

Notarás una serie de pestañas en las que se puede hacer clic en la parte superior del
Visor CSS:

• Calculado: Muestra los estilos calculados para el elemento seleccionado

actualmente (los valores finales normalizados que aplica el navegador).
• Diseño: En Firefox, esta área incluye dos secciones:
• Modelo de caja: representa visualmente el modelo de caja del elemento actual,
por lo que de un vistazo puedes identificar qué relleno, borde y margen se le
aplica, y qué tan grande es su contenido.
• Cuadrícula: Si la página que estás inspeccionando utiliza Grid CSS, esta sección
te permite ver los detalles de la cuadrícula.
• Fuentes: En Firefox, la pestaña Fuentes muestra los tipos de letra aplicados al
elemento actual.

El depurador de JavaScript
El depurador de JavaScript te permite observar el valor de las variables y establecer
puntos de interrupción, lugares en tu código en los que deseas pausar la ejecución e
identificar los problemas que impiden que tu código se ejecute correctamente.

37
Para llegar al depurador:

Firefox: Selecciona➤ Desarrollador Web ➤ Depurador o presiona Ctrl+Mayús+S para

abrir el depurador de JavaScript. Si ya estás viendo las herramientas, haz clic en la
pestaña Depurador.

Chrome: Abre las herramientas para desarrolladores y luego selecciona la pestaña

Fuentes. (Opera funciona de la misma manera).

Edge e Internet Explorer 11: presiona F12 y luego Ctrl+3, o si ya estás viendo las
herramientas, haz clic en la pestaña Depurador.

Safari: Abre las herramientas para desarrolladores y luego selecciona la pestaña

Depurador.

Explorando el depurador

En Firefox hay tres paneles en el depurador de JavaScript.

Lista de archivos

El primer panel de la izquierda contiene la lista de archivos asociados con la página que
estás depurando. Selecciona el archivo con el que deseas trabajar de esta lista. Haz clic
en un archivo para seleccionarlo y ver su contenido en el panel central del depurador.

38
Código fuente

Establece puntos de interrupción donde desees pausar la ejecución. En la siguiente

imagen, el resaltado del número 18 muestra que la línea tiene un punto de interrupción
establecido.

Ver expresiones y puntos de interrupción

El panel de la derecha muestra una lista de las expresiones en observación que has
agregado y los puntos de interrupción que has establecido.

En la imagen, la primera sección, Ver expresiones, muestra que se ha agregado la

variable listItems. Puedes expandir la lista para ver los valores del arreglo.

39
La siguiente sección, Puntos de interrupción, enumera los puntos de interrupción
establecidos en la página. En example.js, se ha establecido un punto de interrupción en
la instrucción listItems.push(inputNewItem.value;

Las dos últimas secciones solo aparecen cuando el código se está ejecutando.

La sección Pila de llamadas muestra qué código se ejecutó para llegar a la línea actual.
Puedes ver que el código está en la función que maneja un clic del mouse y que el código
está actualmente en pausa en el punto de interrupción.

La sección final, Alcances, muestra qué valores son visibles desde varios puntos dentro
de tu código. Por ejemplo, en la siguiente imagen, puedes ver los objetos disponibles para
el código en la función addItemClick.

40
La consola de JavaScript
La consola de JavaScript es una herramienta increíblemente útil para depurar JavaScript
que no funciona como se esperaba. Te permite ejecutar líneas de JavaScript en la página
actualmente cargada en el navegador e informa los errores encontrados cuando el
navegador intenta ejecutar tu código. Para acceder a la consola en cualquier navegador:

41
Si las herramientas para desarrolladores ya están abiertas, haz clic o presiona la pestaña
Consola.

De lo contrario, Firefox te permite abrir la consola directamente usando Ctrl+Mayús+K o

usando el comando del menú: Menú➤ Desarrollador web ➤ Consola web, o Herramientas
➤ Desarrollador web ➤ Consola web. En otro navegador, abre las herramientas para
desarrolladores y luego haz clic en la pestaña Consola.

Esto te dará una ventana como la siguiente:

42
Bibliografía

The Difference between the Internet and World Wide Web. (2021). Retrieved 11 June
2021, from https://www.webopedia.com/insights/web-vs-internet/

The World Wide Web. (2021). Retrieved 11 June 2021, from

https://courses.lumenlearning.com/zeliite115/chapter/reading-the-world-wide-web/

HTTP (Hypertext Transfer Protocol). (2021). Retrieved 11 June 2021, from

https://whatis.techtarget.com/definition/HTTP-Hypertext-Transfer-Protocol

Client-Server Definition. (2021). Retrieved 11 June 2021, from

https://www.omnisci.com/technical-glossary/client-server

Web standards guide. (2021). Retrieved 16 June 2021, from

https://www.smashingmagazine.com/2019/01/web-standards-guide/

Estructura de un documento y sitio web. (2021). Retrieved 20 June 2021, from

https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

Hipervinculos. (2021). Retrieved 20 June 2021, from https://developer.mozilla.org/en-

US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks

Validación de páginas web y hojas de estilo. (2021). Retrieved 20 June 2021, from
https://www.mclibre.org/consultar/htmlcss/html/html-validacion.html

Herramientas para desarrollador. (2021). Retrieved 25 June 2021, from

https://developer.mozilla.org/es/docs/Learn/Common_questions/What_are_browser
_developer_tools

43