El tema de diseño sobre las aplicaciones web actualmente y su funcionamiento en la web, su estructura, su comportamiento y comunicación.

1. Diseño de
Aplicaciones Web
Román Huerta Bernabe

2. ¿Qué es ?
• El diseño y desarrollo de aplicaciones web
consiste en implementar sus necesidades,
objetivos o ideas en Internet utilizando las
tecnologías más idóneas según su proyecto.
• Las aplicaciones web ofrecen servicios a los
usuarios de Internet que acceden utilizando un
navegador web como Internet Explorer,
Firefox o Safari entre otros

3. Diseño web desde una perspectiva evolutiva
• A través de los años, se desarrolló la Web para que fuera un sistema de hipertexto
simple aunque mundial a través de Internet, y se centró principalmente en la información
textual, en esta parte se las actividades de el autor y el programador.
• El comienzo de la era HTML se centró exclusivamente en autoría. Solo admitían
documentos de hipertexto.
• Al inicio solo tenían nodos, enlaces y anclajes.
• HTML se entendió como un lenguaje de descripción de documentos(centrado en el texto).

4. Aspectos de la Autoría
• • Las mallas deben formar el centro del diseño de la información.
• • Los documentos convencionales deben descomponerse en nodos atómicos.
• Aspectos como el diseño y el contenido, el nodo y la malla, etc., deben separarse
conceptualmente, incluso si una tecnología no admite dicha separación.

5. Diseño de software: una actividad de programación
• Los primeros pasos hacia la "dinámica" fueron los formularios HTML, con su introducción,
los lenguajes de script aumento drásticamente y son los que se usan para crear páginas
HTML.
• Se creo el Modelo de objeto de documento(DOM),que se ha definido consistentemente
a medida que surgieron nuevas versiones de HTML.
•

6. Programación Distribuida.
• La programación distribuida es un paradigma de
programación enfocado en desarrollar sistemas
distribuidos, abiertos, escalables, transparentes y
tolerantes de fallos. Este paradigma es el resultado
natural del uso de las computadoras y las redes

7. • Hubo avances de conexiones TCP; comunicación entre procesos(CIPpara abreviar) a sido
reemplazado por Llamada a procedimiento remoto(RPC), acompañado de arquitecturas
cliente/servidor.
• Con tecnologías como CORBA y Java sale la Invocación de método remoto(RMI)
• comunicación basada en eventos(EBCpara abreviar), y las arquitecturas de
publicación/suscripción es la mas actual .

8. Problemas y Restricciones en el Diseño Web Integrado
• El diseño de páginas web en el sentido de diseño de información y diseño de software y
las fases de desarrollo posteriores son normalmente no con el apoyo de las tecnologías
disponibles en el mercado.
• Los applets de Java no han ganado mucho terreno en el mundo de la producción de
software industrial
• • No existe una tecnología apropiada para algunas variantes deseables de los dos
conceptos de diseño, por ejemplo HTML no tiene forma de calcular el destino de un
enlace en el momento de la navegación.

9. Diseño de la presentación
• El contenido de una aplicación Web resulta de la composición de contenidos multimedia
desarrollados explícitamente en el lado del componente y contenidos definidos .
• Un buen diseño de presentación nos permite adaptar la presentación de manera flexible
a diversos requisitos culturales, tecnológicos y contextuales.
• Las herramientas disponibles para crear aplicaciones web se pueden agrupar en dos
categorías según la forma en que admiten el diseño de la presentación de editores de
página y mas avanzado sistemas de gestión de contenido.

10. • El contenido, el diseño y la navegación están separados, se especifican los contenidos de
las unidades de información individuales y se pueden mapear los flujos de trabajo.
• La diferenciación entre los editores de páginas y los sistemas de administración de
contenido presentada aquí se difumina continuamente, porque en versiones recientes
muchos editores de páginas integran funciones simples de sistemas de administración de
contenido.

11. Enfoques de desarrollo independientes del dispositivo
• Los requisitos mejorados en el diseño de
presentaciones son el resultado de una
demanda creciente para considerar la
tendencia hacia una gran cantidad de
diferentes dispositivos habilitados para la
Web en el diseño de aplicaciones Web.
• Estos dispositivos habilitados para la Web
incluye casi todas las clases imaginables
de dispositivos móviles, desde teléfonos
móviles muy pequeños con navegadores
WAP hasta teléfonos inteligentes y
organizadores,.

12. Diseño de interacción
• El diseño de interacción se refiere a la intersección de
los elementos visuales, dinámicos, funcionales y
técnicos de las aplicaciones web.
• Su objetivo es ofrecer a los usuarios una experiencia
interesante y atractiva, así como consistente y fácil de
entender.

13. Interacción del usuario
• El diseño de interacción se refiere a la intersección de los elementos visuales, dinámicos,
funcionales y técnicos de las aplicaciones web
• un número cada vez mayor de roles se acoplaron a HTML: transporte de información,
diseño, interacción con el usuario, navegación y acceso directo al contenido digital.
• Se convirtió en una limitación importante: los servidores necesitan generar una nueva
página cada vez, las aplicaciones se ejecutan más lentamente y los formularios no son
suficientes.

14. Se tomaron en cuenta estos puntos para la
interacción con el usuario
• Propiedades centrales de la aplicación:
• Mantenibilidad, refiere al esfuerzo promedio para localizar y corregir una falla de software.
• Reutilización, refiere a la posibilidad de factorizar el código de una aplicación en particular
para usar en otras aplicaciones sin (muchos) cambios.
• Capacidad de expansión, requerido para mejorar o modificar la eficiencia de las funciones
del software.

15. • Escalabilidad, a la capacidad de adaptación y respuesta de un sistema con
respecto al rendimiento del mismo a medida que aumentan de forma significativa
el número de usuarios del mismo
• Sostenibilidad o sustentabilidad,

17. Diseño de Interacción
• En esta parte se enfocaron en la
portabilidad de la app web, para
que todos los usuarios puedan
acceder desde cualquier lugar o
plataforma a la app web.

18. Diseño de Navegación
• Se toman en cuenta 2 partes
• Los elementos a los que se acceden : los elementos se convierten en nodos, es
decir una agrupación de servidores
• La estructura de navegación: define la relación entre los nodos, que por su parte
se convertirán en anclas visibles por el usuario (anclas y URL).

19. Diseño de una representación de enlace: el ancla
• Los anclajes son correspondencias visibles de URL
• Los usuarios no pueden estar seguros de cuáles serán las posibles
consecuencias al seguir un enlace .

20. Navegación y Orientación
• • Organización de la navegación: Esta estrategia determina toda la estructura de
navegación. (el espacio de navegación de un diseño
• • Ayuda de orientación: Esta estrategia aborda las preguntas "¿Dónde estoy?" y "¿Dónde
estaba yo?" bajo los aspectos de interacción del diseño de la presentación,
• • Percepción de enlace: Esta estrategia se refiere principalmente a cuestiones
relacionadas con la asociación de vínculos con la motivación y la consecuencia

21. Diálogo estructurado para actividades complejas
• En este caso, podemos identificar tres categorías de navegación hacia adelante: (1) Se
activa una acción como resultado del paso de navegación.
• (2) La navegación llama "sólo" una página adicional, por ejemplo, la página 2 de un
formulario.
• (3) El paso de navegación conduce a un nodo que no está directamente involucrado en
la actividad (información adicional, etc.).

23. Interacción con la tecnología y la arquitectura
• La transición tiene un impacto en la tecnología y la arquitectura
de software, siendo a veces una transición difícil hacia
arquitecturas más complejas y tecnologías de mejor rendimiento.
• Han tenido mucho impacto en el área de diseño, las plantillas, el
control de la aplicación y la lógica de la aplicación
• Las fuentes fueron sustituidas por etiquetas

24. Diseño funcional
• Se tiene que observar la medida de los
medios disponibles, pero también deben
ser aplicaciones expandibles, escalables y
mantenibles
• Esto requiere soporte para transacciones y
flujos de trabajo y la integración de bases de
datos y sistemas de software heredados.

25. Integración
• Se pueden integrar sistemas en 3 niveles
• El de nivel de datos, nos aseguramos de que los datos entre las representaciones de
diferentes aplicaciones se transformen y copien.
• El nivel de aplicación(también llamado nivel de objeto), la interacción se produce a través
de las API, lo que significa que el tiempo y la semántica están estrechamente
intercalados.
• El nivel de proceso se considera el nivel más alto, porque modela modelos de negocio
independientemente de la infraestructura utilizada.

26. Paradigmas de comunicación y middleware
• El middleware se ha mencionado como una tecnología para vincular aplicaciones.
• Los nuevos estándares de aplicaciones distribuidas, en particular el Simple Object Access
Protocol( SOAP), los Lenguaje de descripción del servicio web(WSDL), y Descripción
Universal, Descubrimiento e Integración(UDDI), por mencionar algunos.
• SOAP maneja mensajes y llamadas a través de diferentes protocolos de Internet, por
ejemplo, HTTP
, SMTP
, etc. WSDL sirve para describir interfaces y abordar los servicios
web, y UDDI proporciona una especie de base de datos para publicar y buscar servicios
web.
• Por ejemplo:
• eBay proporciona no solo un único sistema de autenticación, sino que también es
compatible con Passport de Microsoft, y Google le permite integrar su función de
búsqueda en aplicaciones externas a través de SOAP

27. FIN