AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Este contenido se ha traducido automáticamente.  Haga clic aquí  para ver la versión en inglés.
Ayuda / Editores / Editor de ventanas y de páginas / Editor de páginas / Responsive Web Design
  • Presentación
  • Error sobre el orden y la posición de la pantalla
  • Ejemplo
  • Explicaciones
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
Presentación
WEBDEV presenta los errores de UI específicos de la posición de los controles en los diferentes cortes:
  • Error sobre el orden de visualización: La posición del control <Nombre de control> cambia el orden en el que se muestran los controles. Este orden se define en el rango de resolución de referencia (Escritorio o Móvil según el modo de gestión de la página Desktop First o Mobile First). El orden de visualización de los controles debe ser el mismo en todos los cortes
  • Error de solapamiento en los bloques de posicionamiento: El bloque de posicionamiento receptivo que contiene el <nombre de la control> control en la Tableta rango de resolución como un error de superposición.
Si estos errores no se procesan, puede producirse un comportamiento inesperado en tiempo de ejecución. Para corregir este error, puede, por ejemplo:
  • mover la control en la dirección recomendada.
  • modificar el orden de los controles en el "Escritorio" rango de resolución.
  • modificar el anclaje de los mandos.
  • usar una celda para agrupar los controles lógicamente.
Error sobre el orden y la posición de la pantalla

Ejemplo

En un Responsive Web Design Page, el orden de visualización de los controles debe mantenerse entre los diferentes slices. Por ejemplo, no se puede modificar completamente el orden de los controles entre la reference rango de resolución (de escritorio o móvil) y la Tableta rango de resolución.
En algunos casos, WEBDEV muestra un error con respecto al orden de visualización, mientras que la interfaz parece ser coherente.. En efecto, el orden de visualización de los controles depende de varios parámetros: posicionamiento de los mandos respecto a los demás, alineación, anclajes, ....
Estudiemos el siguiente ejemplo (Page creada en modo Desktop First):
  1. En el escritorio rango de resolución, se muestran tres imágenes y tres subtítulos.
    3 imágenes y 3 pies de foto
  2. En rango de resolución Móvil, las imágenes de los productos son reducidas y truncadas por Default. Para solucionar este problema, debes mostrar los controles con el mismo tamaño que en la rango de resolución de escritorio, y posicionar una imagen con su leyenda en la Line.
  3. En Desktop rango de resolución, el anclaje de los controles (3 imágenes y 3 subtítulos) se modifica para usar el tamaño de edición en ancho.
  4. En el rango de resolución Tableta, la última imagen y su texto se mueven a la "siguiente línea".
  5. Los errores de UI ocurren. Haciendo doble clic en el error de superposición, la vista del error de superposición se habilita automáticamente.
    Modificación en modo tableta
    Aparece un bloque de color rosa y bordes azules y rojos en líneas de puntos. Materializan un área de superposición inválida.

Explicaciones

WEBDEV divide los diferentes elementos de la Page en líneas. En el "Escritorio" rango de resolución, WEBDEV creó:
  • una Line para las imágenes,
  • una Line para los pies de foto.
En la más pequeña rango de resolución (Tableta o Móvil), WEBDEV realiza la misma división, una Line para las imágenes y una Line para los pies de foto. Como la Line que contiene las imágenes y la Line que contiene los controles estáticos tienen alturas diferentes, las dos Line se superponen.
En el editor, WEBDEV permite ver dónde se superponen estas líneas:
  • El borde de blue corresponde al Line que contiene las imágenes.
  • El borde de la red corresponde al de la Line que contiene las leyendas.
Para corregir este tipo de error de solapamiento, simplemente especifique la semántica a nivel de texto.
En nuestro caso, cada control Imagen debe ser relacionado a su texto:
  • para hacerlo, debe crear celdas que contengan cada pareja "Image + Caption. Esta operación debe realizarse en el escritorio rango de resolución.
  • cada celda debe tener anclajes de "anchura fija"..
Entonces, puedes mover la última celda debajo de las otras en la Tabla rango de resolución sin tener ningún error de UI.
Versión mínima requerida
  • Versión 21
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 11/03/2023

Señalar un error o enviar una sugerencia | Ayuda local