Aplicaciones web mobile

1. Aplicaciones web mobile

2. Componentes CSS
 CCSS , o Component CSS, es una arquitectura que
simplifica la experiencia de creación de CSS para
grandes aplicaciones web.
 Las aplicaciones web grandes generalmente tienen
muchos archivos CSS y a menudo tienen muchos
desarrolladores trabajando en esos archivos
simultáneamente. Con el advenimiento de tantos
marcos, pautas, herramientas y metodologías (OOCSS,
SMACSS, BEM, etc.), los desarrolladores necesitan una
arquitectura CSS que sea mantenible, manejable y
escalable.

3. Elementos de CCSS
 A continuación se detallan los elementos principales que se utilizan por completo o de forma
modificada para lograr la mejor configuración para la arquitectura CCSS.
 SMACSS
 SMACSS, creado por Jonathan Snook , significa Arquitectura escalable y modular para CSS. Es más una guía de
estilo que un marco rígido.
 BEM
 BEM, creado por los desarrolladores de Yandex , significa "Bloque", "Elemento", "Modificador". Es una metodología
front-end que es una nueva forma de pensar al desarrollar interfaces web.
 Brújula
 La brújula no tiene definiciones de clase; Es una extensión para Sass que proporciona muchas utilidades. Se utiliza
para mezclas generales útiles y compilación sass

4. EJEMPLO CSS

5. Componentes GUI
 Los componentes de control de la GUI son los elementos principales de una interfaz gráfica de
usuario que permiten la interacción con el usuario. Son subclases de la clase Componente . Los
componentes de control de la GUI para construir menús se derivan de la clase abstracta
MenuComponent.
 Los siguientes tres pasos son esenciales para utilizar un componente de control de la GUI.
 Un componente de control de la GUI se crea llamando al constructor apropiado. JButton guiComponent =
new JButton ("ON");
 El componente de control de la GUI se agrega a un contenedor mediante un administrador de diseño. Esto
implica invocar el método sobrecargado add () en un contenedor con el componente de control GUI como
argumento. guiFrame.add (guiComponent);
 Los oyentes están registrados con el componente GUI, para que puedan recibir eventos cuando ocurran. Los
componentes de la GUI generan eventos particulares en respuesta a las acciones del usuario.

6. Componentes js – GUI
 ComponentJS es una biblioteca de código abierto
independiente con licencia MPL para JavaScript , que
proporciona un poderoso sistema de componentes en tiempo
de ejecución para estructurar jerárquicamente los diálogos de
interfaz de usuario (UI) de clientes ricos complejos basados en
HTML5 bajo el principio de arquitectura de separación de
preocupaciones (SoC) máxima aplicada

7. Web components
 Los Componentes Web es un paquete
de diferentes tecnologías permitiendo
crear elementos personalizados
reutilizables — con su funcionalidad
encapsulada apartada del resto del
código — y utilizarlos en las
aplicaciones web.

8. Bootstrap js - GUI
 Bootstrap es un kit de herramientas
de código abierto para desarrollar
con HTML, CSS y JS.
 Permite realizar rápidamente
prototipos de ideas o crear toda una
aplicación con variables y mixins
Sass, sistema de cuadrícula sensible,
componentes precompilados
extensos y complementos potentes
creados en jQuery.

9. Componentes advanced – UI
 La UI, principalmente
presenta las posibilidades de
interacción junto con el look
& feel, o en otras palabras, el
diseño visual. Esto quiere
decir, que las decisiones de
Arquitectura de Información,
Diseño de Interacción y/o
Diseño Visual se ven
reflejadas aquí.

10.  La arquitectura dicta la estructura y el esqueleto, además se piensa en cómo se comporta el sistema
en respuesta al usuario y por último tiene una capa de colores, texturas y gráficos que lo hacen
estético.
 Según Usability.gov, los elementos que generalmente se presentan en una UI para un producto
digital son:
 Controles de Input: botones, campos de texto, checkboxes, radio buttons, listas drop down, switches,
campos de fecha
 Componentes de Navegación: breadcrumbs, sliders, formularios de búsqueda, paginación, sliders, tags,
iconos
 Componentes de Información: tooltips, iconos, barras de progreso, notificaciones, cajas de mensajes,
modals,
 Contenedores: acordeones