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
  • Principio para la creación de una página "Responsive Web Design" en WEBDEV
  • Implementación
  • Creación de una página en modo "Diseño Web con capacidad de respuesta
  • Implementación
  • Los diferentes elementos del editor
  • Creación de controles en una página en modo Diseño Web con capacidad de respuesta
  • Ejemplo práctico para la gestión de los anclajes en una página de Diseño Web con capacidad de respuesta
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
A partir de ahora, los sitios web pueden ser vistos en varias plataformas: móviles, tabletas, ordenadores, etc.. El tamaño del navegador cambia en cada dispositivo, así como el espacio utilizado para mostrar los datos..
El método "Responsive Web Design" consiste en crear una sola página que se adapta automáticamente según la plataforma en la que se muestra.
WEBDEV le permite crear páginas utilizando el método "Responsive Web Design" y le permite optimizar la visualización de la página en diferentes plataformas a través de varias funciones de edición.
Principio para la creación de una página "Responsive Web Design" en WEBDEV

Implementación

Para crear una página "Responsive Web Design", le aconsejamos que:
Observaciones:
Creación de una página en modo "Diseño Web con capacidad de respuesta

Implementación

Para crear una nueva página en modo "Diseño Web con capacidad de respuesta:
  1. Haga clic en en los botones de acceso rápido.
    • Aparece la ventana de creación: haga clic en "Página", y luego en "Página".
    • El asistente de creación de páginas se abre automáticamente.
  2. Seleccione el tipo de página a crear: "Página en blanco" de tipo "Diseño Web con capacidad de respuesta.
  3. Seleccione el modo de edición:
    • Primero el escritorio: La página se define en su versión más grande (Desktop) que se utiliza como reference, luego se reduce a las hojas inferiores (Tablet y Mobile). Hay dos opciones disponibles:
      • Editar en tamaño mínimo: En este caso, cada rango de resolución se editará en el editor de páginas en su tamaño mínimo. Así, cuando se selecciona la Tableta rango de resolución, el área de edición será la Móvil rango de resolución, que es la de menor tamaño en la Tableta rango de resolución.
      • Editar en tamaño máximo: En este caso, cada rango de resolución se editará en el editor de páginas en su tamaño máximo. Así, cuando se selecciona la tableta rango de resolución, el área de edición será la tableta rango de resolución, que es el tamaño más grande de la tableta rango de resolución. Las anulaciones se propagan
    • Mobile First: La página se define en su versión más pequeña (Mobile), se usa como un reference, luego se amplía a los trozos más grandes (Tablet y Desktop).
      En nuestro ejemplo, la página se define en Primero el escritorio modo.
  4. Valide el asistente. La página se crea automáticamente y se muestra en el editor.
Observaciones:
  • Las páginas que utilizan el modo "Responsive Web Design" están en HTML 5.
  • Para ver o cambiar el modo de edición de las páginas, vaya a la pestaña "General" de la ventana de la página description.
  • Cambiar el modo de edición de Desktop First: Para pasar de "Editar en tamaño mínimo" a "Editar en tamaño máximo" (o viceversa), abra el menú contextual de la primera rango de resolución (Móvil) y seleccione la opción deseada:

Los diferentes elementos del editor

La página creada en modo "Responsive Web Design" se muestra en un editor que utiliza opciones específicas (en este caso, la página creada con "Desktop First: Editar en tamaño mínimo") :
  • 1. Cinta de opciones que contiene las opciones específicas del "Responsive Web Design".
  • 2. Rango de resolución gobernante. Esta barra contiene diferentes cortes que representan las resoluciones de los dispositivos más comunes. Estos cortes pueden ser modificados, eliminados o añadidos. Para mostrar una página en un rango de resolución, simplemente haga clic en ese rango de resolución.
  • 3. Manejador de edición de navegador. Esta manipular se utiliza para redimensionar el navegador en el editor para ver dinámicamente cómo se adaptan los controles al tamaño del navegador.. Para reducir o aumentar el tamaño del navegador en el editor, todo lo que tiene que hacer es hacer clic en la flecha doble, mantener el botón del ratón pulsado y moverse horizontalmente.
  • 4. Cuadrícula (en columnas) utilizada para posicionar los controles en la página. Esta rejilla se utiliza para simplificar el posicionamiento de los controles. No tiene existencia real en la página Web. La rejilla simplifica la alineación y permite calcular automáticamente la posición de los mandos.. Esta cuadrícula se puede desactivar al mover los controles pulsando la tecla Mayúsculas..

Creación de controles en una página en modo Diseño Web con capacidad de respuesta

  • Los controles creados en una página en el modo "Diseño web sensible" se crean automáticamente en el mayor rango de resolución o en el más pequeño según el modo Desktop First o Mobile First.
  • Algunos de ellos están adaptados al modo "Responsive Web Design".:
    • La control Barra de navegación.
    • Control Looper: el número de columnas cambia según la rango de resolución.
    • Control Tabla: las columnas de tabla se muestran (o no) según el rango de resolución.
    • Control Cuadro de mando : el número de columnas cambia según la rango de resolución.
Ejemplo práctico para la gestión de los anclajes en una página de Diseño Web con capacidad de respuesta
Vamos a configurar los anclajes para la siguiente página (nuestra página de ejemplo está en Primero el escritorio modo de operación):
Los controles han sido creados en la página con las opciones de anclaje de Default.
Usemos el navegador de edición para comprobar el comportamiento de los controles cuando se redimensiona el navegador.
Observará que las imágenes de los 2 controles de la parte superior de la pantalla están truncadas.
Si reducimos aún más el ancho del navegador, el título aparece en varias líneas.
Para solucionar estos problemas, basta con cambiar el anclaje de los controles:
  1. Aanclaje del control Imagen en la parte superior izquierda:
    • El ancla en X "Izquierda" se mantiene: el control mantiene su posición en relación con la Border izquierda de la página.
    • El ancho es usando el tamaño de edición. Por lo tanto, la control no puede ser truncada.
  2. Aanclaje del control Imagen en la parte superior derecha:
    • El ancla en X se convierte en "Right": la control mantiene su posición con respecto a la página derecha Border.
    • El ancho es usando el tamaño de edición. Por lo tanto, la control no puede ser truncada.
  3. Anclaje de título:
    • El ancla en X se vuelve "Centrada": la control permanece centrada en la página independientemente del ancho de la misma.
    • El ancho es usando el tamaño de edición. Por lo tanto, la control no puede ser truncada o mostrada en varias líneas.
  4. Anclaje de los controles Static y Chart: Este ancla no se modifica. Los controles se reducen en función del tamaño de la página. El espacio entre los controles estático y gráfico se mantiene proporcionalmente (ancla en X a la izquierda de Default).
El resultado es el siguiente:
  • Escritorio rango de resolución:
  • Al cambiar el tamaño (Tableta rango de resolución):
Modo avanzado: Ejemplo de override: También puedes override la posición de los controles de Gráfico y Estática en modo móvil:
Versión mínima requerida
  • Versión 21
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 27/05/2022

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