|
|
|
|
- Presentación
- Error sobre el orden y la posición de la pantalla
- Ejemplo
- Explicaciones
Responsive Web Design: Errores específicos de UI
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): - En el escritorio rango de resolución, se muestran tres imágenes y tres subtítulos.
- 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.
- 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.
- En el rango de resolución Tableta, la última imagen y su texto se mueven a la "siguiente línea".
- 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. 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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|