Sesión 2 - 33GIIN

Aplicaciones Web – 33GIIN
Sesión 2 – Parte I
Dra. Adelaide Bianchini
adelaide.bianchini@campusviu.es
24.02.22 BianchiniAd
Sesión 2 - 33GIIN Aplicaciones Web
CONTENIDOS DE LA ASIGNATURA
arquitecturas
Estrategias de diseño
HTML herramientas
JavaScript
CSS ambiente
UBICUIDAD Back
- end
SEGURIDAD Front
2
Aplicaciones Web – ESTA SESIÓN
Temas 1 y 2. Introducción y conceptos generales

✓ DEFINICIONES BÁSICAS SOBRE APLICACIONES WEB.
✓ CATEGORÍAS DE APLICACIONES WEB.
✓ CARACTERÍSTICAS DE LAS APLICACIONES WEB
↘ REQUISITOS DE LAS APLICACIONES WEB
↘ ARQUITECTURAS
3
Aplicaciones Web – REQUISITOS

Una manera eficaz de llevar a cabo el desarrollo de cualquier sistema de
software es la descripción efectiva de sus requisitos.
En el caso de las aplicaciones web aparecen nuevas condiciones que no se
contemplaban en el software tradicional y se refieren a las características
que hereda del ambiente web las cuales influyen en el producto resultante.
Los requisitos de las aplicaciones web son más exigentes que los
requisitos para sistemas de software tradicionales comparables.
Entre las características se consideran aquellas propias del producto, pero
cabe destacar todo lo relacionado al uso, y finalmente los aspectos que
afectan los procesos de desarrollo.
4

a) Requisitos de datos o información: se denominan también
requisitos de contenido, requisitos conceptuales o requisitos de
almacenamiento de información. Este tipo de requisitos responde a
preguntas del estilo ¿qué información debe almacenar y administrar
el sistema?
b) Requisitos de interfaz (con el usuario): también llamados en algunas
propuestas requisitos de interacción o de usuario. Responden a la
pregunta de cómo va a interactuar el usuario con el sistema.
c) Requisitos de navegación: recogen las necesidades de navegación
del usuario dentro un contenido.
5

d) Requisitos de personalización: describen cómo debe adaptarse el
sistema en función de cuál usuario interactúe con él y de la
descripción actual de dicho usuario.
e) Requisitos funcionales internos o transaccionales: recogen las
funcionalidades que provee el sistema de forma interna, sin incluir
aspectos de interfaz o interacción.
También son conocidos en el ambiente web como requisitos de
servicios.
6
Aplicaciones Web – REQUISITOS (NO FUNCIONALES)

Hay otro tipo de requisitos, los no funcionales (RNF) que no expresan
funcionalidad sino condiciones acerca del comportamiento del sistema
e imponen restricciones tanto en el producto como en el proceso de
desarrollo.
Estos requisitos especifican aquellas condiciones y restricciones
externas con las cuales debe cumplir la aplicación: plataforma de
desarrollo, sistemas heredados, presupuesto, calidad respecto al uso,
etc.
7
Aplicaciones Web – MODELOS PARA DESARROLLARLAS

En vista de los conceptos expuestos anteriormente, se puede afirmar
que para el desarrollo de una aplicación Web genérica se requiere de la
creación de una colección de modelos capaces de representar cada
uno de los conceptos asociados a niveles y aspectos.
Cada uno de los modelos sufren transformaciones necesarias según
se van realizando distintas actividades asociadas a las fases de
desarrollo.
8

Los modelos pueden ser de dos tipos según los aspectos y niveles que se
vayan a modelar y su uso durante el desarrollo, y son los siguientes:
• Modelos comunes: orientados a satisfacer las definiciones y requisitos
sobre contenido, navegación y presentación.
Son llamados comunes pues todas las aplicaciones web contemplan estos
niveles.
Para cada uno de los modelos en el nivel correspondiente debe incluir
todas las propiedades asociadas a los aspectos de estructura y
comportamiento. Así por ejemplo, un modelo de contenido trae consigo la
estructura y aquellas definiciones para modelar el comportamiento de ese
contenido dentro de una funcionalidad de la aplicación.
9
Los modelos pueden ser de dos tipos según los aspectos y niveles que se
vayan a modelar y su uso durante el desarrollo, y son los siguientes:
• Modelos característicos: orientados a modelar requisitos y
características específicas de cada aplicación, respecto a su
categoría, objetivo, complejidad, tecnología subyacente, entre
otros.
10
EJEMPLO SENCILLO.
Se desea desarrollar una aplicación web que brinda un servicio gratuito de
asesoría en un área específica.
La aplicación web es atendida por varios asesores (que deben registrarse en
el sistema), los cuales reciben preguntas de cualquier usuario en un área de
conocimiento y el asesor respectivo publica la respuesta que considera
adecuada. Cualquier usuario puede solicitar asesoría sin que se genere
ningún compromiso de pago a los asesores.
Un usuario ingresa preguntas (solicita una asesoría) y un asesor responde a
dichas preguntas. Cada usuario valora las respuestas. La asesoría se brinda
en forma gratuita.
11
EJEMPLO SENCILLO
Tipo de Requisitos Descripción
Los datos que deben almacenarse y gestionarse son:
Requisitos de 1. Cada pregunta y su respectiva respuesta.
datos 2. Para cada respuesta, hay que registrar la valoración del usuario.
3. Datos del asesor.
1. El asesor debe registrase en el sistema.
2. El asesor debe publicar la respuesta a cada pregunta.
3. El asesor puede visualizar las preguntas.
Requisitos
4. El asesor puede publicar respuestas.
transaccionales
5. El asesor puede modificar/eliminar preguntas y respuestas.
6. El usuario visualiza la respuesta a su pregunta.
7. El usuario podrá valorar las respuestas del asesor.
12

EJEMPLO SENCILLO
Para la captura de datos, el sistema debe proveer los siguientes
mecanismos:
1. Formulario para ingresar la pregunta consta de:
a) Campo de texto para escribir la pregunta;
b) Botones: Enviar, Limpiar y Cancelar;
2. Formulario para ingresar la respuesta consta de:
Requisitos de a) Campo de texto para escribir la respuesta;
interfaz b) Botones: Publicar, Limpiar y Cancelar.
3. Formulario para visualizar respuestas: es un campo con scroll bar para
barrer todas las preguntas recibidas y sus respectivas respuestas.
4. Formulario para valorar al asesor con:
a) Campo de texto con la pregunta y la respuesta;
b) Colección de 5 radio buttons con 5 opciones del 1 al 5;
c) Elemento que indica el significado de las opciones;
13
EJEMPLO SENCILLO
1. Al sistema accederán solo dos tipos de actores: Usuario y
Asesor;
Requisitos de 2. El sistema permitirá que cualquier usuario ingrese preguntas sin
personalización identificarse o registrarse;
3. El sistema solicitará un Login y Pássword para el acceso de un
asesor.
14
Aplicaciones Web – CONTEXTO
Modelos a desarrollar en las aplicaciones web. EJEMPLO SENCILLO.

Algunas características de la aplicación final:
Aspectos Descripción
Categoría Transaccional
1. Modelos comunes: modelo de datos (contenido), modelo de
Modelos interfaz (presentación)
necesarios 2. Modelos característicos: modelo de operaciones (CRUD),
modelo de actores.
15
Aplicaciones Web – MODELOS Y MARCO DE REFERENCIA
Front-end
Desarrollo
Back-end
Fraternali, P. (1999). Tools and

approaches for developing data-
intensive Web applications: a
survey. ACM Computing Surveys
(CSUR), Volume 31, Issue 3,
September 1999, pp. 227-263.
16
EJEMPLO SENCILLO.
Aspectos Descripción
Categoría Transaccional
1. Modelos comunes: modelo de datos, modelo de interfaz

Modelos
2. Modelos característicos: modelo de operaciones (CRUD),
necesarios
modelo de actores
Back-end Front-end
17
Aplicaciones Web - Parte II – Unidad Competencial 1 – Tema 2
definiendo
2 capas
componentes arquitecturas N capas
calidad
Back-end
Front-end
Cliente-servidor
18
Aplicaciones Web – PARTE II – CONTENIDO A CUBRIR

Arquitectura de las aplicaciones web. Calidad
Arquitectura Cliente/Servidor:
• Características
• Separación de tareas
• Niveles/Capas
Componentes de una arquitectura de aplicaciones Web
19
Arquitecturas de las aplicaciones web
Una aplicación web es un tipo especial de aplicación cliente/servidor,

donde tanto el cliente (el navegador) como el servidor (el servidor web) y el
protocolo de comunicación (HTTP) están estandarizados y no han de ser
creados por el programador de aplicaciones.
El protocolo HTTP (HyperText Transfer Protocol) forma parte de la familia de
protocolos de comunicaciones TCP/IP (Transfer Control Protocol / Internet
Protocol), que son los empleados en Internet.
Estos protocolos permiten la conexión de sistemas heterogéneos, lo que
facilita el intercambio de información entre distintos dispositivos
(computadores, tabletas, smartphone, etc.).
Luján, S. (2002). Programación de aplicaciones web: historia, principios básicos y clientes web. Editorial Fondo Universitario. España.
20
Arquitecturas de las aplicaciones web – CALIDAD
Una arquitectura inapropiada, a menudo, puede causar un bajo rendimiento,

insuficiente capacidad de mantenimiento y de expansión (evolución), y la
baja disponibilidad de la aplicación.
Además de las limitaciones técnicas, las arquitecturas de las aplicaciones
web también deben considerar el marco organizativo en el que están
integradas (por ejemplo, la experiencia del arquitecto), la complejidad, el
ambiente de despliegue, su evolución, etc..
Los servidores web disponibles, los servidores de

aplicaciones utilizados, la integración de sistemas
heredados, etc.
21
Arquitecturas de las aplicaciones web – CALIDAD
Elementos a considerar para lograr una arquitectura de calidad para una

aplicación web.
1. TIPO O CATEGORÍA DE LA APLICACIÓN
2. CARACTERÍSTICAS DE LA APLICACIÓN
3. USOS DE LA APLICACIÓN
4. AMBIENTE DE DESARROLLO
5. ESQUEMA DE EVOLUCIÓN
6. REQUISITOS
22
Arquitectura de las aplicaciones web
ARQUITECTURA CLIENTE/SERVIDOR.
Cliente/servidor es una arquitectura de red en la que cada computador, (u
otro dispositivo) o proceso en la red es considerado un cliente o un servidor.
Generalmente, los servidores son computadores potentes dedicados a
gestionar unidades de almacenamiento (servidor de contenidos, servidor
de bases de datos, etc.), periféricos (servidor de impresoras, etc.), tráfico de
red (servidor de red), o incluso aplicaciones externas o heredadas (servidor
de aplicaciones), mientras que los clientes son máquinas menos potentes y
usan los recursos que ofrecen los servidores.
23
ARQUITECTURA CLIENTE/SERVIDOR. ALGUNAS CARACTERÍSTICAS

• Permite la creación de aplicaciones distribuidas.
• Facilita la separación de las funciones según su servicio, permitiendo situar
cada función en la plataforma más adecuada para su ejecución.
• Las redes de computadores permiten que múltiples procesadores puedan
ejecutar partes distribuidas de una misma aplicación, logrando
concurrencia.
24
ARQUITECTURA CLIENTE/SERVIDOR. ALGUNAS CARACTERÍSTICAS

• Existe la posibilidad de migrar aplicaciones de un procesador a otro con
modificaciones mínimas en los programas.
• Se obtiene una escalabilidad de la aplicación, tanto horizontal como
vertical.
• Posibilita el acceso a los datos independientemente de donde se encuentre
el usuario.
Capacidad de migrar hacia servidores de mayor Capacidad de añadir o suprimir estaciones de trabajo
capacidad o velocidad, o de un tipo distinto de que hagan uso de la aplicación (clientes), y que no
arquitectura sin que afecte a los clientes afecte sustancialmente al rendimiento general.
25
ARQUITECTURA CLIENTE/SERVIDOR (ESQUEMA SIMPLIFICADO).
Cliente 1
Cliente 2
respuesta
solicitud Cliente 3
SERVIDOR
26
ARQUITECTURA CLIENTE-SERVIDOR. SEPARACIÓN DE TAREAS.

Esta arquitectura permite la separación de tareas en:
1. Presentación.
Se encarga de la entrada y salida de la aplicación con el usuario.
Sus principales tareas son:
• Obtener información del usuario,
• Enviar la información del usuario a la lógica de negocio para su
procesamiento,
• Recibir los resultados del procesamiento de la lógica de negocio y presentar
estos resultados al usuario.
27
ARQUITECTURA CLIENTE-SERVIDOR. SEPARACIÓN DE TAREAS

2. Lógica de negocio (o aplicación).
Se encarga de gestionar los datos a nivel de procesamiento.
Actúa de puente entre el usuario y los datos.
• Recibir la entrada del nivel de presentación,
• Interactuar con la lógica de datos para ejecutar las reglas de negocio que
tiene que cumplir la aplicación y
• Enviar el resultado del procesamiento al nivel de presentación.
28
ARQUITECTURA CLIENTE-SERVIDOR. SEPARACIÓN DE TAREAS.

3. Lógica de datos.
Se encarga de gestionar los datos a nivel de almacenamiento.
• Almacenar los datos,
• Recuperar los datos,
• Mantener los datos y
• Asegurar la integridad de los datos.
29
ARQUITECTURA CLIENTE-SERVIDOR. CARACTERÍSTICAS

Un sistema cliente/servidor suele presentar las siguientes características:
1. Una combinación de la parte cliente (llamada front-end) que interactúa
con el usuario y la parte servidor (o back-end) que interactúa con los
recursos compartidos (bases de datos, impresoras, etc.).
2. La parte cliente y la de servidor tienen diferentes necesidades de recursos
a la hora de ejecutarse.
Por ejemplo, la velocidad de procesador, cantidad y velocidad de la
memoria, velocidad y capacidad de los discos duros, dispositivos de
entrada/salida, etc.
30
ARQUITECTURA CLIENTE-SERVIDOR. CARACTERÍSTICAS

Un sistema cliente/servidor suele presentar las siguientes características:
3. El entorno suele ser heterogéneo y de distintos proveedores. Tanto el
hardware, como el sistema operativo (el del cliente y del servidor pueden ser
distintos).
El cliente y el servidor se suelen comunicar a través de una Application Program
Interface (API) y Remote Procedure Call (RPC) conocidas (por ejemplo, Open
Data Base Connectivity – ODBC, para acceder a bases de datos).
4. La implementación de la parte cliente se enfoca al uso de una interfaz gráfica
de usuario, que permite la interacción a través de teclado, ratón, manipulación
táctil, etc.
31
LADO CLIENTE
El cliente web es un programa con el que interactúa el usuario para solicitar,
a un servidor web, el envío de los recursos que desea obtener mediante el
protocolo HTTP.
La parte cliente de las aplicaciones web suele estar formada por el código
HTML (HyperText Markup Language) que genera la página web más algo
de código ejecutable realizado en algún lenguaje de script del navegador
(por ejemplo JavaScript) o mediante pequeños programas (applets)
realizados en lenguaje Java.
32
LADO SERVIDOR
El servidor web es un “programa” que está esperando las solicitudes de
conexión mediante el protocolo HTTP por parte de los clientes web. En los
sistemas Unix suele ser un demonio y en otros ambientes son servicios.
La parte servidor de las aplicaciones web está formada por:
• Páginas estáticas (documentos HTML) que siempre muestran el mismo
contenido.
• Recursos adicionales (multimedia, documentos adicionales, etc.) que se
pueden emplear dentro de las páginas o estar disponibles para ser
descargados y ejecutados (visualizados) en el cliente.
33
LADO SERVIDOR
La parte servidor de las aplicaciones web está formada por:
• Programas o scripts que son ejecutados por el servidor web cuando el
navegador solicita algunas páginas. El resultado de estos script suele ser un
conjunto de páginas HTML estándar que se envían al navegador.
Tradicionalmente este programa o script que es ejecutado por el servidor web
se basa en la tecnología CGI (Computer Generated Imagery).
Existen casos en los cuales se puede acceder a bases de datos.
Las imágenes generadas por computadora (CGI) son la aplicación de

gráficos para crear o contribuir a imágenes en arte, medios impresos,
videojuegos, simuladores, animación por computadora y VFX en
películas, programas de televisión, documentales, comerciales y videos.
34
Arquitectura de las aplicaciones web – NIVELES/CAPAS
ARQUITECTURA DE 2 CAPAS
CLIENTE
CLIENTE
SERVIDOR
SERVIDOR WEB SERVICIOS
Y LÓGICA DEL
NEGOCIO
PÁGINAS HTML
PÁGINAS HTML DINÁMICAS
ESTÁTICAS BASE DE DATOS
35
Una arquitectura de 2 capas, utiliza un servidor web para proporcionar
servicios a un cliente. Puede tomar diferentes formas dentro del entorno de
las aplicaciones web.
Caso estático.
Una solicitud del cliente puede:
• Apuntar directamente a páginas HTML estáticas, sin requerir ninguna
lógica de procesamiento en la capa del servidor, o
• Acceder a una base de datos a través de la lógica de la aplicación en el
servidor web (por ejemplo, en forma de scripts).
36

Caso dinámico.
Consiste en un servidor web estático con un software extra , lo común es que sea
una aplicación servidor y una base de datos.
Se le dice "dinámico" por que la aplicación servidor actualiza los archivos
almacenados en la base de datos antes de enviarlos mediante el servidor HTTP.
La lógica de la aplicación, o las páginas HTML dinámicas, pueden usar servicios
(por ejemplo, identificación del usuario o cifrado de datos) cuando se genera la
respuesta HTML.
37
ARQUITECTURAS EN 2 CAPAS
En general, cuando se habla de aplicaciones de dos niveles/capas se está
haciendo referencia a una aplicación donde el cliente mantiene la lógica de
presentación, de negocio, y de acceso a los datos, y el servidor únicamente
gestiona los datos.
Suelen ser aplicaciones cerradas que supeditan la lógica de los procesos
cliente al gestor de bases de datos que se está usando.
Esta arquitectura es especialmente adecuada para aplicaciones web
sencillas.
38
ARQUITECTURAS EN N CAPAS
Para aplicaciones más exigentes, se requiere un enfoque arquitectónico de
múltiples capas, a las que acceden una gran cantidad de clientes
concurrentes, o que proporcionan procesos de negocio complejos que
requieren el acceso a sistemas heredados, consideración del aspecto de
evolución, seguridad, entre otros.
Las arquitecturas de N capas permiten organizar la aplicación en un número
arbitrario de niveles.
Además, los mecanismos de seguridad como los firewalls, o los mecanismos
de almacenamiento en caché como los servidores proxy, se pueden integrar
en el flujo de solicitud-respuesta bajo demanda.
39
ARQUITECTURAS EN N CAPAS. EJEMPLO 3 NIVELES

En el caso de las arquitecturas de tres niveles, la lógica de presentación, la
lógica de negocio y la lógica de datos están separadas, de tal forma que
mientras la lógica de presentación se ejecuta normalmente en la estación
cliente, la lógica de negocio y la de datos pueden estar repartidas entre
distintos procesadores.
En este tipo de arquitectura suelen existir al menos dos tipos de servidores:
uno que contiene la lógica de negocio y otro la lógica de datos.
40
ARQUITECTURA EN N CAPAS CLIENTE
FIREWAL
PROXY
Capa de presentación SERVIDOR WEB
Capa de negocio
BACK-END
APLICACIONES HEREDADAS / SERVIDOR DE APLICACIÓN
SISTEMAS DE INFORMACIÓN EMPRESARIAL
Capa de datos SERVIDOR DE DATOS SERVICIOS

41
Arquitectura de las aplicaciones web – COMPONENTES
COMPONENTES DE LA ARQUITECTURA DE UNA APLICACIÓN WEB.

Proxy
Servidor
Cliente Web
Navegador
Plug-ins Firewall
HTML,
Servidor
Servidor XML, etc. Gestión de
Aplicaciones Base de
externas contenidos
datos
Servidor Servidor de Aplicaciones

COMPONENTES
COMPONENTES OPCIONALES
multimedia aplicaciones heredadas
Kappel, G., Pröll, B., Reich, S., Retschitzegger, W. (2005). Web Engineering: The discipline of systematic development of web applications. John Wiley & Sons.
42
La siguiente lista describe brevemente cada uno de estos componentes:

Cliente: generalmente un navegador, es controlado por un usuario para
operar la aplicación web. La funcionalidad del cliente se puede ampliar
mediante la instalación de complementos (plug-ins) y applets.
Firewall: es un software que regula la comunicación entre redes inseguras
(por ejemplo, Internet) y redes seguras (por ejemplo, LANs corporativas). Esta
comunicación se filtra por las reglas de acceso.
Proxy: se usa generalmente para almacenar temporalmente páginas web en
una caché. Sin embargo, los servidores proxy también pueden asumir otras
funcionalidades, por ejemplo, adaptar los contenidos para los usuarios
(personalización) o el seguimiento de usuarios.
43

Servidor web: es un dispositivo/software que admite varios protocolos de
comunicación como HTTP y HTTPS, para procesar las solicitudes de los
clientes.
Servidor de base de datos: proporciona los datos de producción de una
organización en forma estructurada, por ejemplo, en tablas.
Servidor de multimedios: este componente se utiliza principalmente para la
transmisión de contenido de datos masivos no estructurados (por ejemplo,
imágenes, audio o video).
44

Servidor de gestión de contenido: similar a un servidor de base de datos,
que gestiona contenido para servir una aplicación. Estos contenidos
normalmente están disponibles en forma de datos semi estructurados, por
ejemplo, documentos XML.
Servidor de aplicaciones: un servidor que posee la funcionalidad requerida
por varias aplicaciones, por ejemplo, flujo de trabajo o personalización.
Aplicaciones heredadas: son sistemas anteriores (generalmente con
tecnología no web) que deben integrarse como un componente interno o
externo.
XML no es un lenguaje en sí mismo, sino un sistema que
permite definir lenguajes de acuerdo a las necesidades.
45
Aplicaciones web
Necesidades técnicas
Resumiendo para el desarrollo de
WebApps
Cliente (Front-end): es la parte que puede
visualizar el usuario (contenido de las páginas web generadas por la
aplicación). Es decir, es el conjunto de elementos con los cuales interactuará
el usuario.
Servidor (Back-end): es la gestión de datos de un servicio. Incluye la
conexión con las bases de datos, la gestión de usuarios, la distribución de la
información dentro de la nube, la gestión de permisos de usuarios, etc. (Vera
del Campo, 2019)
Vera del Campo (2019). Aplicación Web. Manual del curso. Universidad Internacional de Valencia. España
46
Aplicaciones Web
Otras consideraciones sobre su desarrollo

Además del front-end y del back-end, se requieren otras capacidades
técnicas, y es el caso de la gestión de los servidores.
DevOps: incluye la gestión de los servidores físicos necesarios para ofrecer
una aplicación web, cómo actualizar la página web que ven los usuarios cada
vez que los programadores/desarrolladores realizan alguna mejora, el
manejo de los elementos de seguridad del sistema o la gestión de “la nube”.
(Vera del Campo, 2019)
Vera del Campo (2019). Aplicación Web. Manual del curso. Universidad Internacional de Valencia. España
47
Aplicaciones Web – 33GIIN
Sesión 2 – Parte III
BianchiniAd 24.02.22
Parte III – Unidad Competencial 1 – Tema 3
elementos características
atributos etiquetas
textos
contenido imágenes
enlaces
documentos
tablas
estructura formularios
Listas, …
49
Aplicaciones Web – CREANDO DOCUMENTOS WEB
Un documento o página web tiene asociado los siguientes

conceptos:
• Estructura: encabezado, párrafos, listas, tablas
• Contenido: texto, imágenes, enlaces, formularios
Lorem ipsum dolor sit amet,
• Apariencia: colores, fondos, tipografía, tipos de consectetur adipiscing elit.
Aenean ut nulla ac urna aliquam
mattis eget et mi.
alineación, tamaños de letras, etc.
• Comportamiento: efectos, animaciones,
automatismos.
50
Un documento o página web tiene asociado los siguientes conceptos:
• Estructura: encabezado, párrafos, listas, tablas

• Contenido: texto, imágenes, enlaces, formularios
• Apariencia: colores, fondos, tipografía, tipos de Lorem ipsum dolor sit amet,
alineación, tamaños de letras, etc. consectetur adipiscing elit.

Aenean ut nulla ac urna aliquam
mattis eget et mi.
• Comportamiento: efectos, animaciones,

automatismos.
51

Las herramientas de construcción básicas de documentos (páginas) web son
los tres principales estándares : HTML (o XHTML), CSS y JavaScript.
Lenguaje de marcado de hipertexto (HTML) se utiliza para especificar los
contenidos y estructura de un documento, y definir el significado de cada
parte (es lo que incluye todo el texto, imágenes, etc.,). Utiliza elementos para
identificar los diferentes componentes de una página.
XHTML (eXtensible HyperText Markup Language), puede ser ampliable.
Las hojas de estilo en cascada (CSS) dan un control total sobre cómo se
visualiza un elemento.
52
Las herramientas de construcción básicas de documentos en el web son los

tres principales estándares : HTML (o XHTML), CSS y JavaScript.
JavaScript es un lenguaje que aporta funciones dinámicas a las páginas web.
Con este lenguaje se pueden escribir pequeños programas que se ejecutarán
en el dispositivo cliente y que no requieren que haya ningún software
especial instalado en el servidor.
JavaScript permite añadir algunas funciones básicas e interactividad a las
páginas web, pero tiene sus limitaciones, lo que nos lleva a hablar de
lenguajes de programación del lado del servidor y de páginas web dinámicas.
53
Introducción a HTML – PÁGINAS WEB ESTÁTICAS Y DINÁMICAS
Una página web estática es una página donde el contenido, el HTML y los
gráficos, son siempre estáticos —cualquier usuario lo verá igual.
Por el contrario, en una página web dinámica, el contenido del servidor es el
mismo, pero en vez de ser sólo HTML, también contiene código dinámico, que
puede mostrar datos diferentes según la información que suministre el
usuario a la página web.
54
Introducción a HTML – PÁGINAS WEB ESTÁTICAS Y DINÁMICAS
Los archivos HTML estáticos normales se guardan con una extensión .html.
Aquellos que contienen código dinámico especial (además del HTML) se
guardan con extensiones distintas, para indicar al servidor web que necesitan
un procesamiento adicional antes de enviarlos al cliente.
Por ejemplo, los archivos PHP (conexiones a una base de datos),
generalmente tienen una extensión de archivo .php.
55
Introducción a HTML
HTML (HyperText Markup Language),
NO es un lenguaje de programación.
Permite:
• Publicar documentos.
• Acceder a documentos cargándolos directamente en el navegador o,
seleccionar un enlace existente para llegar a otro documento.
• Rellenar formularios con información que es enviada al servidor para su
procesamiento.
• Incluir objetos multimedia (videos, imágenes, sonidos, animaciones, etc.)
en un documento.
56
Introducción a HTML
En esencia, HTML es un lenguaje de marcas bastante simple compuesto

de elementos, que se puede “aplicar” a fragmentos de texto para darles
un significado diferente en un documento (conjunto de páginas) : ya sea
un párrafo, o una lista de viñetas, una tabla, etc.
Se puede estructurar un documento en secciones lógicas.
Por ejemplo, un encabezado, columnas de contenido, un menú de
navegación, e incrustar contenido como imágenes y videos en una
página.
57
Introducción a HTML – ELEMENTOS

HTML (HyperText Markup Language),
NO es un lenguaje de programación.
En todo documento HTML se distinguen dos tipos de elementos:

Etiquetas:
• Indican como se ha de organizar el contenido del documento.
• Están delimitadas por los caracteres < y >.
• No hay distinción entre mayúsculas y minúsculas.
58
Introducción a HTML – ELEMENTOS
HTML (HyperText Markup Language) es un lenguaje de marcado,

como SGML y otros muchos.
En todo documento HTML se distinguen dos tipos de elementos:
Contenido:
• Es la información contenida en el documento.
• Se presenta en el navegador según el tipo de etiqueta.
Por ejemplo, la etiqueta (o marca) <b> indica que el texto debe ir en
negrilla. Esta etiqueta se usa de la siguiente forma
<b>Bienvenidos</b> y se mostrará como: Bienvenidos
59
Introducción a HTML – ESTRUCTURA DE UN DOCUMENTO HTML

<!DOCTYPE html …> Indica que el documento es Tipo HTML
<html lang="es"> Indica que inicia un documento HTML

<head> Inicio cabecera
<meta charset="utf-8">
<title>Página de ejemplo</title>
</head> Fin cabecera
<body> Inicio cuerpo
<h1>Hola mundo</h1>
</body> Fin cuerpo
</html> Indica que termina un documento HTML
60
Introducción a HTML – ESTRUCTURA DE UN DOCUMENTO HTML
En el ejemplo anterior, las etiquetas definen una estructura de árbol con

una raíz, HTML, de la que cuelgan los hijos HEAD y BODY.
Dentro de cada uno de ellos,
se puede incluir texto plano, o HTML
bien una serie de etiquetas
aceptadas dentro de cada sección.
Por ejemplo, la etiqueta TITLE
dentro de HEAD, que se tratará
más adelante. HEAD BODY
61
Introducción a HTML – MIRANDO DE CERCA EL CÓDIGO HTML
Considere el siguiente código en HTML:
Etiqueta Etiqueta
de apertura de cierre
<p>Mirando de cerca el código HTML</p>

Contenido
Elemento
62
Las partes principales de un elemento son:

a) La etiqueta de apertura: consiste en el nombre del elemento (en este
caso, p, por (paragraph) párrafo), encerrado por paréntesis angulares
(< >) de apertura y cierre.
Establece dónde comienza o empieza a tener efecto el elemento — en el
ejemplo <p>, dónde es el comienzo del párrafo.
b) La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que
incluye una barra de cierre (/) antes del nombre de la etiqueta, en este
caso </p>.
Establece dónde termina el elemento — en este caso dónde termina el
párrafo.
63
Las partes principales de un elemento son:

c) El contenido: se refiere al contenido del elemento, que en este caso
es sólo el texto Mirando de cerca el código HTML.
d) El elemento: formado por las dos etiquetas más el contenido.
<p>Mirando de cerca el código HTML</p>

Contenido
Elemento
64
Los elementos pueden tener atributos.

Son valores adicionales que configuran los elementos o ajustan su
comportamiento de diversas formas para cumplir los criterios de los
usuarios.
Atributo y valor
<p class=“ejemplo”>Mirando de cerca el código HTML</p>

Contenido
Elemento
El atributo class, permite darle al elemento un nombre
identificativo, que puede ser usado luego para asociar
información de estilo y otras cosas, al elemento.
65
Un atributo debe tener siempre:

• Un espacio entre éste y el nombre del elemento (o del atributo previo,
si el elemento ya posee uno o más atributos).
• El nombre del atributo, seguido por un signo de igual (=).
• Comillas de apertura y de cierre, encerrando el valor del atributo.
Atributo y valor
<p class=“ejemplo”>Mirando de cerca el código HTML</p>

Contenido
Elemento
66
Introducción a HTML – TIPO DE ELEMENTOS (“INSTRUCCIONES”)
Los elementos de HTML pueden ser de dos tipos:

A. Elementos compuestos: <NOMBRE>texto</NOMBRE>.
• Tienen etiquetas inicial y final con el mismo NOMBRE.
• La etiqueta final está delimitada por los caracteres </ y >.
• Modifican el aspecto y/o comportamiento del texto.
B. Elementos simples: <NOMBRE>.
• Sólo tienen etiqueta inicial.
• Modifican el aspecto y/o organización del documento.
67
Introducción a HTML – ETIQUETAS ANIDADAS
• La anidación de etiquetas es inherente al lenguaje HTML.

• Dentro de un elemento HTML se puede incluir cualquier otra, generando
una anidación en las etiquetas.
• La única regla a seguir consiste en incluir las etiquetas finales (si son
necesarias) en orden inverso al de las etiquetas iniciales.
• Anidación correcta: <ET1> .. <ET2> .. </ET2> .. </ET1>.
• Anidación incorrecta: <ET1> .. <ET2> .. </ET1> .. </ET2>.
• Una anidación incorrecta genera resultados inesperados o erróneos en el
navegador
68
Introducción a HTML – COMENTARIOS
• El elemento  sirve para incluir comentarios en

distintas áreas de una página HTML.
• Por lo general, el comentario es un texto que no es procesado por el
navegador.
• Sin embargo, el comentario se puede consultar a través de la opción
del navegador: “ver el código fuente de la página” (en el menú).
69
Introducción a HTML – Partes de un documento - CABECERA
La cabecera de un documento incluye información que no forma parte del

contenido del documento.
En la cabecera debe aparecer el título del documento:
Título: <TITLE> ... </TITLE>
El título de un documento aparece únicamente en la barra de título del
navegador.
Todo documento HTML debe tener un título.
También puede aparecer la dirección base para resolver los URL relativos o
absolutos
<BASE href="URL_base">
70
Introducción a HTML – Partes de un documento - CUERPO Y BLOQUES
Como se puede deducir, a menudo los elementos contienen otros elementos.

Una página puede estar organizada en secciones (bloques lógicos), como
cualquier documento.
Esas secciones crean la estructura general del documento y también
contendrán subdivisiones.
Cada una de las subdivisiones contendrán títulos, párrafos, listas, etc.
Los párrafos pueden contener elementos que creen enlaces hacia otros
documentos, citas, énfasis, etc.
Para cada párrafo habrá un marcador de inicio y fin párrafo.
71
Introducción a HTML – ATRIBUTOS

Ejemplo de atributos
<div id="masthead">
atributos
<h1>Ejercicio para explicar el
<abbr title=“HyperText Markup Language">
HTML</abbr>
</h1> Valor del atributo
</div>
abbr es hijo de h1, que a su vez es hijo de div
72
Introducción a HTML – ATRIBUTOS

Muchos de los atributos de HTML son comunes para todos los elementos,
aunque algunos son específicos de uno o varios elementos concretos.
Éstos tienen siempre la forma palabraclave="valor".
El valor debe aparecer siempre entre comillas simples o dobles.
En algunas circunstancias se pueden omitir las comillas, pero no es una
práctica recomendable con respecto a la predictibilidad, la comprensión y
la claridad; se deben poner siempre los valores entre comillas.
https://developer.mozilla.org
73
Introducción a HTML – ELEMENTOS EN BLOQUE Y EN LÍNEA
En el HTML hay dos categorías generales de elementos que corresponden a

dos tipos de contenidos y estructuras que representan estos elementos:
Elementos en bloque
Ocupa todo el espacio de su elemento padre (contenedor), creando así un
"bloque". Sólo deben aparecer dentro del elemento <body>.
Los navegadores suelen mostrar el elemento a nivel de bloque con un salto
de línea antes y después del elemento.
Los elementos de bloque siempre comienzan en una nueva línea.
Ejm. <p>Este párrafo es un elemento en bloque</p>
74

Elementos en bloque
Un bloque puede contener elementos en línea y otros elementos en bloque.
La idea es que los elementos en bloque crean estructuras "más grandes" que
sólo los elementos en línea.
75

Elementos en línea
Ocupa sólo el espacio delimitado por las etiquetas que definen el elemento
en línea y no comienzan con la nueva línea.
Ejemplo de elementos "en línea":

b, big, i, small, tt, abbr, acronym, cite, code, dfn, em,
kbd, strong, samp, time, var, a, bdo, br, img, map, object,
q, script, span, sub, sup, button, input, label, select,
textarea
76
Introducción a HTML – EJERCICIO 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es“
xml:lang="es">
<head>
<title>Ejercicio 1</title>
</head>
<body>
<p>Vamos a aprender a usar HTML</p>
</body>
</html>
77

<html xmlns="http://www.w3.org/1999/xhtml" lang="es“
xml:lang="es">
<head>
</head>
<body>
<p>Vamos a aprender a usar HTML</p>
</body>
</html>
78

<html xmlns="http://www.w3.org/1999/xhtml" lang="es"
xml:lang="es">
<head>
</head>
<body>
<h2>Vamos a aprender a usar HTML</h2>
</body>
</html>
79

xml:lang="es">
<head>
</head>
<body>
<h1>Una imagen de un monitor de PC</h1>
<p><img src=“monitor.jpg"></p>
</body>
</html>
80

xml:lang="es">
<head>
</head>
<body>
<h1>Una imagen de un monitor de PC</h1>
<p><img src=“monitor.jpg"></p>
</body>
</html>
81

xml:lang="es">
<head>
</head>
<body>
<p>Una imagen de un monitor de un <strong>PC</strong></p>
</body>
</html>
82
Introducción a HTML – ALGUNAS HERRAMIENTAS
Editor de documentos en HTML, por ejemplo el Notepad++
Disponible en https://notepad-plus-plus.org/downloads/
Cualquier navegador.
83
Actividad #1
En el ámbito de las aplicaciones Web para móviles, existen varios tipos de

aplicaciones, entre ellas las nativas, las híbridas y las progressive web apps.
Por ejemplo, las aplicaciones Facebook, Instagram, Whatsapp y
Twitter, son consideradas aplicaciones híbridas.
Las apps nativas se desarrollan en el lenguaje nativo de cada sistema
operativo, lo que también determina sus parámetros y características.
Una de las ventajas que presentan las apps nativas es que garantizan la
experiencia del usuario y el pleno acceso e integración con las funciones de
hardware del dispositivo, aprovechando al máximo sus capacidades.
Además, este tipo de aplicaciones permiten tiempos de respuestas mucho
más cortos y se puedan utilizar sin conexión a internet. (Jobe, 2013)
84
Actividad #1
Las aplicaciones híbridas se construyen de forma similar a una aplicación

Web, pero se utilizan a través de un navegador integrado dentro de una
aplicación nativa.
Las aplicaciones híbridas permiten aprovechar el uso de algunas de las
funcionalidades del dispositivo móvil y simular la experiencia de usuario
como si se tratase de una app nativa, ya que se adaptan al dispositivo como
tal.
Este tipo de apps es recomendable para proyectos efímeros y requiere
menor inversión en desarrollo al mantener una sola fuente de código.
(Biørn-Hansen, Majchrzak, Grønli, 2017)
85
Actividad #1
Las Progressive Web Apps (PWAs) son una solución basada en la Web
tradicional tal como la conocemos, aunque incorpora algunas
particularidades que la hacen parecerse a una aplicación nativa para
teléfonos móviles y tabletas. (mozilla.org, 2022)
En esta actividad, Usted debe llevar a cabo las siguientes tareas:

1. Investigar el concepto sobre Progressive Web Apps (PWA).
2. Identificar las características sus características generales, e buscar al menos
2 ejemplos.
3. Indicar al menos 3 características que la diferencia de las aplicaciones
nativas.
4. Redactar un documento con el resultado de las tareas anteriores.
Más adelante se indica el contenido de ese documento.
86
Actividad #1
FORMATO DE ENTREGA Y CONTENIDOS:
Informe en formato PDF, con los siguientes contenidos:
• Introducción a la actividad, con el planteamiento del problema.
• Contenidos sobre Progressive Web Apps (PWAs) :
a. Concepto y características de las Progressive Web Apps (PWAs).
b. Listar las aplicaciones seleccionadas y sus características principales.
c. Indicar al menos 3 características que diferencian las PWAs de las aplicaciones nativas.
Todo este contenido no puede sobrepasar dos páginas (Arial 11).
• Conclusiones sobre la actividad desarrollada respecto a los resultados de aprendizajes;
• Bibliografía utilizada para la actividad.
Para este trabajo, respecto a la bibliografía utilizada, deben seguir las

normas APA que están disponibles en la sección Materiales y
Recursos, en el directorio Materiales del Profesor.
87
Actividad #1
Pueden utilizar cualquier referencia respetable.

Evitar cualquier fuente/sitio web no acreditado,
o de reputación desconocida.
FECHA DE ENTREGA
1ª CONVOCATORIA 2ª CONVOCATORIA
08/03/2022 17/03/2022
88
Dudas Actividad #1
Dudas sobre Actividad 1
89
Unidad Competencial 1 – Tema 3 – Próxima sesión
elementos características
atributos etiquetas
textos
contenido imágenes
enlaces
documentos tablas
estructura formularios
listas, …
90
Gracias
BianchiniAd

Sesión 2 - 33GIIN

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Sesión 2 - 33GIIN

Cargado por

Copyright:

Formatos disponibles

Aplicaciones Web – 33GIIN

Aplicaciones Web – ESTA SESIÓN

Temas 1 y 2. Introducción y conceptos generales

Aplicaciones Web – REQUISITOS

Aplicaciones Web – REQUISITOS

Aplicaciones Web – REQUISITOS

Aplicaciones Web – REQUISITOS (NO FUNCIONALES)

Aplicaciones Web – MODELOS PARA DESARROLLARLAS

Aplicaciones Web – MODELOS PARA DESARROLLARLAS

Aplicaciones Web – MODELOS PARA DESARROLLARLAS

Aplicaciones Web – MODELOS PARA DESARROLLARLAS

Aplicaciones Web – MODELOS PARA DESARROLLARLAS

Aplicaciones Web – MODELOS PARA DESARROLLARLAS

Aplicaciones Web – MODELOS PARA DESARROLLARLAS

Aplicaciones Web – CONTEXTO

Modelos a desarrollar en las aplicaciones web. EJEMPLO SENCILLO.

Aplicaciones Web – MODELOS Y MARCO DE REFERENCIA

Fraternali, P. (1999). Tools and

Aplicaciones Web – MODELOS PARA DESARROLLARLAS

1. Modelos comunes: modelo de datos, modelo de interfaz

Aplicaciones Web - Parte II – Unidad Competencial 1 – Tema 2

Aplicaciones Web – PARTE II – CONTENIDO A CUBRIR

Arquitecturas de las aplicaciones web

Una aplicación web es un tipo especial de aplicación cliente/servidor,

Arquitecturas de las aplicaciones web – CALIDAD

Una arquitectura inapropiada, a menudo, puede causar un bajo rendimiento,

Los servidores web disponibles, los servidores de

Arquitecturas de las aplicaciones web – CALIDAD

Elementos a considerar para lograr una arquitectura de calidad para una

Arquitectura de las aplicaciones web

Arquitectura de las aplicaciones web

ARQUITECTURA CLIENTE/SERVIDOR. ALGUNAS CARACTERÍSTICAS

Arquitectura de las aplicaciones web

ARQUITECTURA CLIENTE/SERVIDOR. ALGUNAS CARACTERÍSTICAS

Arquitectura de las aplicaciones web

ARQUITECTURA CLIENTE/SERVIDOR (ESQUEMA SIMPLIFICADO).

Arquitectura de las aplicaciones web

ARQUITECTURA CLIENTE-SERVIDOR. SEPARACIÓN DE TAREAS.

Arquitectura de las aplicaciones web

ARQUITECTURA CLIENTE-SERVIDOR. SEPARACIÓN DE TAREAS

Arquitectura de las aplicaciones web

ARQUITECTURA CLIENTE-SERVIDOR. SEPARACIÓN DE TAREAS.

Arquitectura de las aplicaciones web

ARQUITECTURA CLIENTE-SERVIDOR. CARACTERÍSTICAS

Arquitectura de las aplicaciones web

ARQUITECTURA CLIENTE-SERVIDOR. CARACTERÍSTICAS

Arquitectura de las aplicaciones web

Arquitectura de las aplicaciones web

Arquitectura de las aplicaciones web

Las imágenes generadas por computadora (CGI) son la aplicación de

Arquitectura de las aplicaciones web – NIVELES/CAPAS

Arquitectura de las aplicaciones web – NIVELES/CAPAS

Arquitectura de las aplicaciones web – NIVELES/CAPAS

Arquitectura de las aplicaciones web – NIVELES/CAPAS

Arquitectura de las aplicaciones web – NIVELES/CAPAS

Arquitectura de las aplicaciones web – NIVELES/CAPAS

ARQUITECTURAS EN N CAPAS. EJEMPLO 3 NIVELES

Arquitectura de las aplicaciones web – NIVELES/CAPAS

ARQUITECTURA EN N CAPAS CLIENTE

Capa de presentación SERVIDOR WEB

Capa de datos SERVIDOR DE DATOS SERVICIOS

Arquitectura de las aplicaciones web – COMPONENTES

COMPONENTES DE LA ARQUITECTURA DE UNA APLICACIÓN WEB.