Diseño de aplicaciones Web

Semana 02

Razón social
00.00.2015
1
Logro de la sesión

Al finalizar la sesión, el estudiante explica

las arquitecturas modernas en las que se
desarrollan aplicaciones Web

2
Agenda

• Arquitecturas modernas de aplicaciones Web

• Cloud Computing
• Estructura básica de HTML5
• Estructuras semánticas

3
Introducción a la Arquitectura de Software
Niveles de abstracción
• Requisitos/Requerimientos
- “Qué" debe hacerse de alto nivel

• Arquitectura (diseño de alto nivel)

- "cómo" de alto nivel, "qué" de nivel medio

• Diseño OO (diseño de bajo nivel, por

ejemplo, patrones de diseño)
- "cómo" de nivel medio, "qué" de bajo nivel

• Código
- "cómo" de bajo nivel
Diferencia entre Diseño de Software y Arquitectura del Software:

• Toda la arquitectura es diseño, no todo el diseño es arquitectura

Los requerimientos funcionales para un sistema refieren lo que el sistema debe hacer. cómo debería reaccionar el
sistema a entradas particulares y cómo debería comportarse el sistema en situaciones particulares.

Los requerimientos no funcionales son restricciones en los servicios o funciones que ofrece el sistema, como
restricciones de tiempo, restricciones en el proceso de desarrollo, estándares. Pueden relacionarse con propiedades
emergentes del sistema, como fiabilidad, tiempo de respuesta y uso de almacenamiento. A menudo se aplican al
sistema en su conjunto en lugar de a funciones o servicios individuales.
 Arquitectura Web
https://www.youtube.com/watch?v=IAaDiaQctvY
Arquitecturas modernas de aplicaciones web
Componentes de una arquitectura de aplicaciones web
Arquitecturas modernas de aplicaciones web

Las aplicaciones web modernas todavía usan el concepto de

Los factores que distinguen a un sitio web de una aplicación arquitectura de 3 niveles, que separa las aplicaciones en nivel de
web son la interactividad, la integración y la autenticación presentación, nivel de aplicación y nivel de datos

Se evalúa los tipos de arquitectura de aplicaciones web, de acuerdo con los criterios que se consideran más vitales para
las empresas, es decir, rendimiento, interfaz de usuario, SEO, “linkability” y la velocidad de implementación en el lado
del desarrollo
Front-End

10
Arquitecturas modernas de aplicaciones web

Ventajas
• El HTML se “renderiza” en el servidor
con ello mejor SEO, linkability y carga
instantánea de la primera página
• No se imponen requisitos específicos
para el navegador
• Detección de errores al instante
• Implementación con cualquier
lenguaje de programación y back-end

Desventajas
• No se pueden manejar solicitudes de
servidor pesadas
• Representación lenta cuando se
reinicia una página completa o
cuando el servidor está cargado
• No hay buena interacción con el
usuario final, incapacidad de crear
una interfaz de usuario completa.
• Ideal para sitios web sencillos
Arquitecturas modernas de aplicaciones web
Al elegir Static Site Generation, recibirá un sitio web estático simple ubicado en una CDN o en
cualquier servidor, que contiene una página HTML ya generada para ser entregada a los usuarios a pedido

STATIC SITE GENERATION (SSG)

Ventajas Desventajas

• Alta velocidad de entrega del • Útil solo para sitios web

contenido estático a través de • El contenido de las páginas del
una CDN. sitio web no cambia a menos que
• Todas las operaciones del se agregue nuevos datos o
servidor y el trabajo con la BBDD componentes
se realiza a través de una API, • Se debe generar completamente
independiente del sitio web. el sitio web una vez que se desea
• Opción simple y asequible de agregar contenido
realizar

El proceso SSG implica un generador que automatiza la codificación de páginas HTML individuales, creándolas a partir de
plantillas. Por lo tanto, no es necesario generarlo cada vez que alguien visita su sitio web: el servidor simplemente
envía los datos ya existentes a través de una API. Ejemplos de generadores de sitios estáticos simples son Jekyll y Hugo,
mientras que Gatsby y VuePress son adecuados para la realización de soluciones más complejas.
Arquitecturas modernas de aplicaciones web
SPA es el tipo de aplicación web que no requiere volver a cargar la página cuando es necesario mostrar
nuevos datos. Se utiliza ampliamente en nuestra vida diaria: Facebook, Gmail, Google Maps, GitHub y Twitter

Ventajas Desventajas

•SPA le permite crear una aplicación web interactiva. • Requiere esfuerzos adicionales para ser “linkability” y el
Utiliza una API para comunicarse con el servidor SEO.
•Esta arquitectura es buena para escalar fácilmente su • Largo tiempo para la primera carga.
producto. • Soporte limitado para navegadores obsoletos.
•Sin mayor esfuerzo adicional para aplicaciones móviles, • SPA es adecuado para crear una interfaz de usuario
por utilizar el mismo API. “responsive” para usuarios B2C.
•Rápido “renderizado”, después que la aplicación esté
cargada. Crea un software altamente “responsive” para
el usuario final
Arquitecturas modernas de aplicaciones web
La arquitectura PWA usa la lógica de una aplicación web SPA con algunos servicios ejecutándose a
continuación. Tanto el navegador como el sistema operativo deben admitir este conjunto de estándares
Para el usuario final, PWA significa físicamente un
ofrecimiento pop-up (emergente) para agregar la aplicación
en la pantalla de inicio (no un navegador, sino la pantalla
de su SO), cuando visitan un sitio web. Si el usuario
acepta, la aplicación se agrega automáticamente al
dispositivo

Ventajas Desventajas

• Permite que la aplicación web admita • Las opciones como PWA no son adecuadas
experiencias sin conexión, sincronización en para startups. Es bastante eficiente si una
segundo plano y notificaciones “push”. empresa es estable y el propietario del
• PWA es compatible con Windows, Android e producto sabe quiénes son sus usuarios
iOS (para iOS, el modo sin conexión está finales y qué tipo de experiencia esperan (por
deshabilitado) ejemplo, la mayoría de ellos son usuarios de
• Los desarrolladores pueden agregar Android).
actualizaciones a una aplicación web de forma • Entre los inconvenientes de este tipo de
remota arquitectura se encuentran la necesidad de
• Una PWA es segura ya que utiliza HTTPS. Los seleccionar el navegador y el sistema
usuarios finales pueden instalar una PWA sin operativo que lo admitan completamente
siquiera visitar un Play Market o App Store. • No disponible completamente en iOS
• Uber, Aliexpress, Alibaba, Pinterest y • Soporte PWA no es extenso
Starbucks son algunas compañías famosas
que son conocidas por desarrollar sus
productos en forma de PWA.
Arquitecturas modernas de aplicaciones web
La arquitectura Isomorfa es un tipo aplicación JavaScript que puede ejecutarse tanto en el lado del
cliente como en el lado del servidor. Primero, el cliente carga un HTML, donde la aplicación JavaScript
se carga en el navegador, luego la aplicación comienza a ejecutarse como un SPA.

A diferencia de SPA, aquí la primera “renderización” se produce en el

servidor. En otras palabras, cuando un usuario escribe la dirección de
la aplicación web, el servidor representa completamente HTML (paquetes
JS) primero. Esto permite a los rastreadores de Google examinar las
páginas web y hacer que el SEO de su aplicación web funcione. Como
resultado, una empresa obtiene una página ya renderizada y paquetes JS
de una aplicación web SPA.
Ventajas Desventajas

• A diferencia de SSR, proporciona • El único inconveniente que tiene este

actualizaciones rápidas de datos, tipo de arquitectura de aplicación web
capacidad de respuesta y múltiples es que solo es totalmente compatible
opciones de UI / UX. con JavaScript. La mayoría de las veces,
• Garantiza una representación esto significa que la pila de tecnología
(rendering) más rápida cuando el para elegir se limita a marcos y
servidor está cargado, ya que el código herramientas basados en JS.
procesado se transfiere al cliente
• Y a diferencia de la representación
(rendering) del lado del cliente, otorga
una visualización instantánea en el
navegador, enrutamiento fácil de usar,
SEO y “linkability” (vinculabilidad)
Arquitecturas modernas de aplicaciones web
Separar la capa de interfaz de usuario del back-end de la lógica de negocio del back-end solo tiene sentido
en una arquitectura web más grande y compleja.

NODE.JS Y EL NUEVO FRONT-END WEB Esta arquitectura consta de un servidor basado en Node.js y
una capa de interfaz de usuario. Junto con eso, el servidor
de la lógica del negocio se puede escribir en cualquier
lenguaje (tomemos PHP como ejemplo) y usar una API para
comunicarse con el servidor.

Ventajas
• Es modular, lo que significa que las páginas y los widgets son
aplicaciones completamente independientes.
• Con este enfoque, el desarrollo y la implementación se
ejecutan en paralelo.
• Es escalable, los microservicios aparecen en el front-end y
back-end y se pueden escalar en términos de sus equipos y
la carga que se ejecuta en la nube
• Adecuado para los clientes empresariales, ya que a menudo
el desarrollo de piezas de software masivas se divide entre
varios equipos.
Arquitecturas modernas de aplicaciones web
La arquitectura Micro Front-end, es un enfoque que se basa en la descomposición de una aplicación front-end
en "micro-apps" separadas que trabajan juntas. Para el usuario final, todos están ubicados en una sola
página.

Ventajas
• Es modular, lo que significa que las
páginas y los widgets son aplicaciones
completamente independientes.
• Con este enfoque, el desarrollo y la
implementación se ejecutan en paralelo.
• Es escalable, los microservicios
aparecen en el front-end y back-end y
se pueden escalar en términos de sus
equipos y la carga que se ejecuta en la
nube
• Adecuado para los clientes
empresariales, ya que a menudo el
desarrollo de piezas de software
masivas se divide entre varios equipos.

Desventajas
• La estructura complica la aplicación y
provoca la duplicación de código
Back-end

18
Arquitecturas modernas de aplicaciones web
La arquitectura de microservicios se ha convertido en la mejor alternativa a la arquitectura orientada a
servicios (SOA) y la arquitectura monolítica. Los servicios están poco acoplados para ser desarrollados,
probados, mantenidos e implementados de forma independiente. Dichos servicios también pueden comunicarse
con otros servicios a través de APIs para resolver problemas empresariales complejos.

Ventajas
• La implementación de aplicaciones
web utilizando una arquitectura
monolítica es una tarea engorrosa
debido a sus componentes
estrechamente acoplados.
• Los Microservicios han resuelto
este problema separando la
aplicación en varios componentes
de servicio individuales. Simplifica
aún más la conectividad entre los
componentes del servicio y elimina
la necesidad de orquestación del
servicio.
• Algunos gigantes tecnológicos que
son populares para usar
microservicios son Amazon,
Netflix, SoundCloud, Comcast y
eBay.
Arquitecturas modernas de aplicaciones web
Serverless es una arquitectura en la que toda la ejecución del código es atendida por los proveedores de
servicios en la nube, sin necesidad de implementarlos manualmente en su servidor. La arquitectura sin
servidor es un patrón de diseño en el que las aplicaciones se construyen y ejecutan sin ninguna
intervención manual en los servidores administrados por proveedores de servicios en la nube de terceros
como Amazon y Microsoft.

Ventajas
• Le permite centrarse más en la calidad del
producto y la complejidad para que sean
altamente escalables y confiables. En
términos generales, se clasifica en dos tipos:
Backend-as-a-Service (BaaS) y Function-as-a-
Service (FaaS).

• BaaS permite a los desarrolladores centrarse

en las tareas de desarrollo del frontend,
eliminando las operaciones realizadas en el
backend. AWS Amplify, por ejemplo, es un
producto BaaS popular.
• FaaS, por otro lado, es un modelo basado en
eventos que permite a los desarrolladores
dividir las aplicaciones en pequeñas
funciones para centrarse en el código y los
desencadenadores de eventos. El resto será
manejado por los proveedores de servicios
FaaS como AWS Lambda y Microsoft Azure.
Arquitecturas modernas de aplicaciones web
El siguiente esquema proporciona una comprensión de cómo se pueden utilizar los servicios web de AWS
para crear una aplicación web utilizando la lógica de arquitectura de 3 niveles que explicamos
anteriormente
Arquitecturas Web – Reflexiones finales
El éxito de una aplicación web moderna siempre está estrechamente relacionado con su arquitectura. Mantenerse al día con los
requisitos cambiantes es una tarea desafiante y un menor error puede costarle la vida útil de su producto.

Al seleccionar un tipo de arquitectura, tenga en cuenta las necesidades específicas de su negocio y adapte los criterios que
enumeramos para evaluar las opciones disponibles para elegir cuál funciona mejor para usted.

Los actores del mercado como

Amazon, Google y Microsoft
proporcionan estructuras complejas
para construir una arquitectura en la
nube en los tres niveles de una
aplicación web

La arquitectura de aplicaciones web es un modelo de

interacciones simultáneas entre componentes, bases de
datos, sistemas middleware, interfaces de usuario y
servidores en una aplicación. También se puede
describir como el diseño que define lógicamente la
conexión entre el servidor y el lado del cliente para una
mejor experiencia web
Logro de la sesión

Al finalizar la sesión, el alumno conoce las

etiquetas y estructura de una página
HTML, para crear páginas web básicas.

23
Estructura del básica de HTML5

24
Estructura del básica de HTML5
<!DOCTYPE>

La declaración del tipo de documento (DTD

Document Type Declaration), esta sección se
ubica en la primera línea del archivo HTML, es
decir antes de la marca html.

Ahora con el HTML 5 se simplifica esta sección con la

siguiente sintaxis: <!DOCTYPE HTML>

Al detectar el DTD el navegador activa el modo

“estándares” (trata de presentar el documento
adecuadamente)

25
Estructura del básica de HTML5
<HTML>

Luego de declarar el tipo de documento,

debemos comenzar a construir la estructura
HTML. Como siempre, la estructura tipo
árbol de este lenguaje tiene su raíz en el
elemento <html>. Este elemento envolverá al
resto del código:

atributo lang en la etiqueta de apertura <html>

es el único atributo que necesitamos especificar
en HTML5. Este atributo define el idioma
humano del contenido del documento que
estamos creando, en este caso es por español.

26
Estructura del básica de HTML5

<head>

Dentro de las etiquetas <head> definiremos el

título de nuestra página web<title></title>,
declararemos el set de caracteres
correspondiente, proveeremos información general
acerca del documento e incorporaremos los
archivos externos con estilos, códigos Javascript o
incluso imágenes necesarias para generar la
página en la pantalla.
Excepto por el título y algunos íconos, el resto de
la información incorporada en el documento entre
estas etiquetas es invisible para el usuario.

27
Estructura del básica de HTML5
<meta charset=“”>

La etiqueta que define el juego de

caracteres a utilizar para mostrar el
documento. Ésta es una etiqueta <meta>
que especifica cómo el texto será
presentado en pantalla.
UTF-8 asegura compatibilidad con ASCII
(cualquier carácter ASCCI se mostrará)

28
Estructura del básica de HTML5
<title>

La etiqueta <title>, como siempre,

simplemente especifica el título del
documento, y no hay nada nuevo para
comentar:
Conceptos básicos: El texto entre las
etiquetas <title> es el título del documento
que estamos creando.
Normalmente este texto es mostrado en la
barra superior de la ventana del
navegador.

29
Estructura del básica de HTML5

<link>
Otro importante elemento que va dentro
de la cabecera del documento es <link>.
Este elemento es usado para incorporar
estilos, códigos Javascript, imágenes
o iconos desde archivos externos. Uno
de los usos más comunes para <link> es
la incorporación de archivos con estilos
CSS:

<link rel=”stylesheet” href=”misestilos.css”>

30
Estructura del básica de HTML5
<body>

La siguiente gran sección que es parte principal

de la organización de un documento HTML es el
cuerpo. El cuerpo representa la parte visible de
todo documento y es especificado entre
etiquetas <body>. Estas etiquetas tampoco han
cambiado en relación con versiones previas de
HTML:

31
Estructura del contenido de
una página Web

32
Etiquetas semánticas

33
Etiquetas semánticas

- En Windows, crear la siguiente estructura de carpetas.

- En Sublime Text , agregar la carpeta principal a un
Proyecto
miweb
nosotros index.html
index.html
contactos
procesa.php
servicios index.html
css
js
img

index.html
Etiquetas semánticas
Etiqueta <header>
Las etiquetas <header> y su cierre </header> se encargan de indicar a los navegadores que lo que
contienen es la cabecera de la página y que dentro seguramente llevarán lo típico, algún logotipo, el título
de la página quizás una descripción de la misma y un poco más.

A tener en cuenta

Por otro lado, el header no se

limita a identificar la cabecera de
una página web, sino que puede
usarse también para recoger la
cabecera de una sección o varias
dentro del contenido.

35
Etiquetas semánticas

Etiquetas <header> ejemplo:

…………………..
<header>
<h1>TITULO DE LA WEB</h1>
<h2>Breve descripción de la página web.</h2>
<ul>
<li><a href="inicio.html">Inicio</a></li>
<li><a href="unaseccion.html">Una Sección</a></li>
<li><a href="otraseccion.html">Otra Sección</a></li>
</ul>
< /header>
....... …………….

36
Etiquetas semánticas
Etiquetas <nav>
Otro elemento bastante típico y común en muchas páginas web es la zona de navegación, formada por
enlaces a las zonas principales de la web, o por un menú de navegación, desplegable de enlaces, etc.
Html5 interpreta que es una zona que deberíamos identificar y ha creado para ello la nueva etiqueta <nav>,
con su respectiva etiqueta de cierre </nav>.
A tener en cuenta

En la norma donde se
dictan toda estas reglas
del HTML5 no indica que
no pueda existir más de
un bloque del tipo nav
dentro de una misma
página. No obstante se
recomienda que solo
exista una.
Etiquetas semánticas

Etiquetas NAV Ejemplo

<nav>
<ul>
<li><a href="cursohtml.html">Curso de Html5</a></li>
<li><a href="cursocss.html">Curso de CSS</a></li> <article>
<li><a href="cursojavascript.html">Curso de Javascript</a></li>
</ul>
< /nav> </article>
Etiquetas semánticas
Etiquetas SECTION
La etiqueta <section> y su correspondiente etiqueta de cierre </section> se utilizan para encerrar el
código correspondiente a una sección genérica dentro de un documento o aplicación. Normalmente, un
bloque de texto al que perfectamente le podríamos colocar un título o encabezado. Además, todo el
contenido que engloba ha de guardar cierta relación entre sí.

A tener en cuenta

Existe cierta confusión sobre

cuándo usar <article> y cuándo
<section> ya que ambos se
parecen bastante. En general, se
debe usar <article> cuando el
contenido sea susceptible de ser
Sindicado.

39
Etiquetas semánticas
Etiquetas SECTION Ejemplo

<h1>Título de la página</h1>
<section id="news-list"> <h2>Noticias</h2>
<article>
<h3>Noticia 1</h3>
<p>Desarrollo de la noticia 1</p>
</article>
<article>

<article> </article>
<h3>Noticia 2</h3>
<p>Desarrollo de la noticia 2</p>
</article>
</section>

40
Etiquetas semánticas

Etiquetas ARTICLE
La etiqueta <article> se usa para marcar contenido independiente que tendría sentido fuera del contexto de la página
actual y que podría sindicarse, por ejemplo: una noticia, un artículo en un blog o un comentario.

A tener en cuenta

Normalmente
un <article> tendrá, además
de su propio contenido, <article>
también una cabecera (a
menudo con<header>) y
posiblemente un pie </article>
(<footer>).
Etiquetas semánticas

Etiquetas ARTICLE Ejemplo

<article>
<header>
<h1>La etiqueta Article</h1>
<article>
</header>
<p>La etiqueta <b>Article</b> suele usarse para fragmento independientes
de contenido...</p>
...
</article>
<footer>
<p><small>Contenido publicado por Juanito</small></p>
</footer>
< /article>
Etiquetas semánticas
Etiquetas ASIDE
La etiqueta <aside> se usa para marcar un trozo de contenido que está relacionado con el contenido de la página
web, pero que no es parte del mismo. Ejemplos de uso serían: glosario de términos, grupos de enlaces a páginas
relacionadas, barras laterales,

A tener en cuenta

Lo usaremos en todos
aquellos elementos
secundarios, como podrían
ser los bloques publicitarios,
enlaces externos, citas, un
calendario de eventos, etc,
siempre claro que no
encontremos otra etiqueta
más acorde de entre las ya
comentadas
Etiquetas semánticas

Etiquetas ASIDE Ejemplo

<aside> <article>
<h6>Publicidad</h6>
(( código de la publicidad ))
< /aside> </article>
Etiquetas semánticas
Etiquetas FOOTER
La etiqueta <footer> se usa para marcar el pie de una sección o documento y que contiene información sobre el
mismo como el autor, licencia, términos de uso, una página de comentarios sobre el copyright, una política del
portal, quizás algo de publicidad, etc

A tener en cuenta

Un footer o pie de
página, puede contener
tantos elementos como
sea necesario. No ha
de limitarse a contener
lo dicho antes
Etiquetas semánticas

Etiquetas FOOTER Ejemplo

<footer> <article>

<p><small>Contenido publicado por

Juanito</small></p> </article>
</footer
Ejemplo Página Web
Tarea: Control de lectura sobre
Ingeniería Web
¿Preguntas?

49
 Resumen
• …………. es la directiva que permite al navegador activar el modo “estándar”
para presentar el documento adecuadamente.

• <html lang=en> Es la etiqueta se usa para ……………………………………………

• ………… es la codificación que asegura compatibilidad con ASCII, cualquier

carácter ASCII se mostrará adecuadamente.

• <link rel=”stylesheet”…….> se utiliza para…………………..……………………………

• ……………..es la etiqueta que permite definir una zona de navegación (menú)

50
FIN

51