✒️SAP BTPFIORI / La adaptación de la IU a los diferentes dispositivos Por Roberto Santucho

Selector Alummnos / Empresas

SAP BTPFIORI La adaptación de la IU a los diferentes dispositivos

SAP BTPFIORI La adaptación de la IU a los diferentes dispositivos

1. EL DISENO RESPONSIVO

Hay 3 areas que debemos considerar para hacer una app responsiva

  • La disponsicion: escalar o mover difernetes controles de iu
  • los medio responsivos: escalar imagenes y videos / usar fuentes mas pequenas
  • la media queries en CSS3:

2 LOS CONTROLES RESPONSIVOS EN SAPUI5

Para el desafio de mostrar tablas en pantallas movil, sapui5 tiene 2 estrategias

  • La posibilidad de ocultar columnas:
  • el area de Pop-in: ES UN AREA DENTRO DE LA PANTALLA QUE SE USA PARA MOSTRAR DATOS MENOS RELEVANTES. LAS PROPIEDADES minScreenWith y demandPopin en sap.m.Column determinan como una columna se comporta en varios tamanos de pantalla.

demandPopin si es verdadero, la columna aparecera como valores secundarios, de lo contrario LA COLUMNA ESTARA OCULTA.

Ocultar por tipo de dispositivo, mediante configuracion de una clase CSS como sapUiVisibleOnlyOnDesktop o sapUiHideOnDesktop.

3. LA API DEVICE

sap.ui.Device es una API que proporciona informacion sobre los detalles del dispositivo, como SO y version, browser y version, tamano de pantalla, orientacion y compatibilidad (eventos tactiles, cambio orientacion,etc)

ejemplo sap.ui.Device.orientation

  • landscape
  • portait

sap.ui.Device.system.phone es verdadero si accedemos desde un telefono.

el binding en el modelo Device el modo binding debe ser en OneWay ya que el modelo del dispositivo es de solo lectura.

4. LA DENSIDAD DE CONTENIDO

factor que permite ajustar el tamano de los controle en funcio dle estilo de interacicion.

SAPUI5 proporiona factores de forma basados en la interaccion tactil y no tactil

  • Cozy: usa la clase sapUiSizeCozy. dimensiones de controles optimizadas para dispositivos tactiles. elementos grandes
  • Compact: usa la clase sapUiSizeCompact. diseno de tamano reducido, dimensiones de controles y espaciado se reducen.
  • Condensed: usa la clase sapUiSizeCondensed. especifico se utiliza para sap.ui.table.AnalyticalTable

5. LAS FUNCIONES INTEGRADAS

Algunos controles ya incluyen comportamiento responsivo

El control ObjectHeader: atributos

  • responsive : a partir de sapui5 1.28 debe estableceers en verdadero
  • fullScreenOptimized en true.

6. LA ACCESIBILIDAD

Atributos ARIA. una parte dle conjunto de estos son los denominados puntos de referencia. AYUDAN AL USUARIO A NAVEGAR A TRAVES DE LA APP.

LAS ETIQUETAS LANDMARK INFORMAN AL USUARIO SOBRE EL PROPOSITO DE LA SECCION DE LA PAGINA CORRESPONDIENTE.

LIBRERIA sap.m.PageAccessibleLandmarkinfo para definir roles y etiquetas ARIA

 

Escanear / Compartir

 

 

Sobre el autor

Publicación académica de Roberto Hernan Santucho, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.

Roberto Hernan Santucho

Profesión: Ingeniero en Sistemas - Mexico - Legajo: VA51C

✒️Autor de: 43 Publicaciones Académicas

🎓Egresado del módulo:

Certificación Académica de Roberto Santucho

✒️+Comunidad Académica CVOSOFT

Continúe aprendiendo sobre el tema "La adaptación de la IU a los diferentes dispositivos" de la mano de nuestros alumnos.

SAP Junior

La adaptación de la IU a los diferentes dispositivos La adaptación de la IU a los diferentes dispositivos en SAP Fiori se basa en el diseño responsivo. El diseño responsivo es la capacidad de una aplicación web de funcionar correctamente en distintos dispositivos, anchos de pantalla, resoluciones y densidades de píxeles, sin necesidad de desarrollar versiones separadas. Esto significa que una misma aplicación puede ejecutarse en teléfono, tableta o computadora de escritorio ajustando automáticamente su distribución y comportamiento. En SAPUI5, además de adaptar el layout, también se puede ajustar el tamaño de los controles según el tipo de interacción,...

Acceder a esta publicación

Creado y Compartido por: Candela Analia Nuñez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

La adaptación de la IU a los diferentes dispositivos 1. Introducción La adaptación de la Interfaz de Usuario (IU) en SAPUI5 busca garantizar que las aplicaciones funcionen correctamente en todo tipo de dispositivos —computadoras, tablets y teléfonos— ofreciendo una experiencia fluida, intuitiva y uniforme. SAP Fiori y SAPUI5 están diseñados con el principio "responsive by design", lo que significa que las aplicaciones ajustan automáticamente su presentación según el tamaño, orientación y capacidades del dispositivo, sin necesidad de desarrollar versiones separadas. 2. Concepto de diseño responsivo El diseño responsivo es la capacidad...

Acceder a esta publicación

Creado y Compartido por: Jose Rodrigo Baz Suarez / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master

La adaptacion de la IU a los diferentes dispositivos: significa diseñar y construir aplicaciones o páginas web de forma que se vean y funcionen correctamente en cualquier dispositivo: Se deben tener en cuenta los siguientes aspectos para que una app sea responsiva La disposicion: se refiere a cómo organizas los controles y elementos en la interfaz de usuario. Los medios responsivos: son técnicas y componentes que permiten que tu aplicación se adapte automáticamente al tamaño de la pantalla (PC, tablet, móvil). Las medias queries en CSS3: son una característica de CSS3 que permiten cambiar los estilos según el tamaño de la pantalla. Los controles responsivos...

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

1. EL DISENO RESPONSIVO Hay 3 areas que debemos considerar para hacer una app responsiva La disponsicion: escalar o mover difernetes controles de iu los medio responsivos: escalar imagenes y videos / usar fuentes mas pequenas la media queries en CSS3: 2 LOS CONTROLES RESPONSIVOS EN SAPUI5 Para el desafio de mostrar tablas en pantallas movil, sapui5 tiene 2 estrategias La posibilidad de ocultar columnas: el area de Pop-in: ES UN AREA DENTRO DE LA PANTALLA QUE SE USA PARA MOSTRAR DATOS MENOS RELEVANTES. LAS PROPIEDADES minScreenWith y demandPopin en sap.m.Column determinan como una columna se comporta en varios tamanos de pantalla. demandPopin si es verdadero, la columna aparecera como valores secundarios, de lo contrario...

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


SAP GUI 5 nos proporciona las herramientas y tecnologías para crear aplicaciones responsives para que podamos codificar una vez y ejecutarlas en varios dispositivos seguir el diseño responsivo puede ahorrar enormes costos en el desarrollo y mantenimiento del código de software de estas aplicaciones. Podemos probar las aplicaciones específicas del dispositivo de nuestra aplicación con las herramientas de desarrollo de nuestro navegador por ejemplo en Google Chrome se puede emular una tableta o un teléfono fácilmente y ver los efectos algunas opciones de respuesta de SAP GUI 5 solo se configuran inicialmente al cargar la aplicación por lo que es posible que debamos a cargar la página...

Acceder a esta publicación

Creado y Compartido por: Jose Medina / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

El diseño Responsivo Se trata de la capacidad de las aplicaciones Web para funcionar sin problema en todos los dispositivos Hay tres áreas que debemos considerar para hacer una aplicación responsiva: La disposición Los medios responsirvos Las medias querés en ccs3 Uno de los aspectos más importantes de SAP FIORI nuestras aplicaciones deben desarrollarse, configurarse y mantenerse una sola vez para que todos los cambios sean efectivos en todos los dispositivos Además SAPUI5 nos permite ajustar el tamaño de los controles para que coincida con el tipo de Interaccion tales como un dispositivo táctil o un teclado o un mouse. Controles responsirvos en SAPUI5 Tablas...

Acceder a esta publicación

Creado y Compartido por: Detriana Barrios / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

El diseño responsivo Se trata de la capacidad de las aplicaciones web, para verse desde distintos dispositivos sin problemas. Hay tres áreas que debemos considerar para hacer que una aplicación sea responsiva: La disposición: se trata de tener una estrategia para escalar y mover los diferentes controles de IU para que se ajusten a los diferentes anchos de pantalla. Los medios responsivos: Esta estrategia consiste en escalar las imágenes y videos para diferentes dispositivos Las media queries en CSS3: nos permiten especificar diferentes CSS según las dimensiones de los dispositivos De esta forma el usuario tiene una experiencia unica indistintamente del dispositivo que este utilizando. ...

Acceder a esta publicación

Creado y Compartido por: Miguel Enrique Tivamosa Rodriguez

 

 

👌Genial!, estos fueron los últimos artículos sobre más de 99.000 publicaciones académicas abiertas, libres y gratuitas compartidas con la comunidad, para acceder a ellas le dejamos el enlace a CVOPEN ACADEMY.

🔎Buscador de Publicaciones:

 

 

No sea Juan... Solo podrá llegar alto si realiza su formación con los mejores!