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
  • Creación de la Page y de la barra de cabecera
  • Crear una página
  • Creando la barra de encabezamiento
  • Creando los elementos de la barra
  • Creando el título y el logo
  • La aplicación del logotipo
  • La aplicación del título
  • Prueba de la página
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
Esta ayuda Page explica cómo crear un Page que contenga una cabecera en modo responsive heredado.
Los pasos principales son:
Observación: El mismo método puede ser usado para crear una barra de pie de página.
Creación de la Page y de la barra de cabecera

Crear una página

Para crear una nueva Page en modo "Responsive Web Design:
  1. Haga clic en en los botones de acceso rápido.
    • La ventana de creación de nuevos elementos se abre: 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 Page a crear: Seleccione "En blanco" y confirme. La Page se crea automáticamente y se muestra en el editor.
  3. Abra la ventana de descripción de la página: En la pestaña "Página", en el grupo "description", haga clic en "description"..
  4. En la pestaña "General", vaya a "Modo de edición" y seleccione "Rebanadas (modo responsivo heredado)"..
  5. Valide la ventana de descripción.
  6. Los diferentes cortes aparecen en el editor. El modo Default es "Escritorio primero - Editar en tamaño máximo"..
  7. Haga clic derecho para abrir el menú contextual de la página y seleccione "Descripción".
  8. Escribe el nombre de Page: "Page_usingcell".
  9. Valide la ventana de descripción.
  10. Guarde la ventana (Ctrl + S).

Creando la barra de encabezamiento

La barra de presentación de rango de resolución se muestra en el editor:
Vamos a crear una cabecera Page con celdas.
Se deben realizar las siguientes operaciones:
  1. Haga clic en el escritorio rango de resolución.
    Recordatorio: Siempre hay que trabajar primero en el reference rango de resolución:
    • Escritorio rango de resolución en modo Escritorio primero.
    • Móvil rango de resolución en modo Móvil Primero .
  2. En la pestaña "Creación", en el grupo "Contenedores", seleccione "Celda"..
  3. Haga clic en la página: la control aparece en modo de creación.
  4. Coloca la control en la parte superior izquierda de la Corner y redimensiónala horizontalmente hasta que alcance toda la anchura de la Page. En este ejemplo no es necesario cambiar el tamaño verticalmente.
    Consejo: No dude en definir una Color de fondo para la célula con el fin de verla mejor.
    En este ejemplo, la celda tiene un fondo naranja color y un borde redondeado.
  5. El resultado es el siguiente:
    • "Escritorio" rango de resolución:
    • "Tableta" rango de resolución:
    • "Móvil" rango de resolución:
Para simular el cambio de ancho en el editor:
  1. Mostrar el "Escritorio" rango de resolución: haga clic en el encabezado "Escritorio.
  2. Haga clic en la flecha doble de la información sobre herramientas "Anchura del navegador".. Mantén el botón izquierdo del ratón pulsado y muévete a la izquierda.
  3. Mueve el ratón a la izquierda o a la derecha: el ancho del navegador se modifica en el editor.
  4. La celda sigue el ancho del navegador.
    En efecto, el ancla definida para la célula permite a ésta seguir la anchura de la rejilla, por lo tanto adaptarse a la anchura Page
Vamos a estudiar las opciones de anclaje disponibles para la célula:
  1. Seleccione la control Celda.
  2. Haga clic derecho para abrir el menú contextual y seleccione "Anclaje". Aparece la ventana de opciones de anclaje:
  3. En esta ventana, en "Anclajes horizontales", se selecciona la opción "Ampliar o reducir como el navegador (o su contenedor)".. La anchura del elemento seleccionado (aquí, la celda) se adapta a la anchura de la Page. En este caso, la célula sigue la anchura Page (como ya se ha visto).
  4. Para probar este comportamiento, cambie el parámetro "Anchura" y seleccione "Anchura fija"..
  5. Valide.
  6. Habilitar los errores de UI si es necesario:
    • en la pestaña "Proyecto", en el grupo "Proyecto", haga clic en "Descripción": en la pestaña "Compilación" del proyecto description , marque " Activar compilación de UI ".
    • visualice el panel "Errores de compilación" y haga clic en .
  7. Guarde la página (Ctrl + S).
  8. Vamos a comprobar la diferencia de comportamiento:
    • Mostrar el "Escritorio" rango de resolución: nada cambia.
    • Mostrar la "Tableta" o "Móvil" rango de resolución: la celda ya no se redimensiona horizontalmente.
    • La célula es más amplia que el límite de resolución: Los errores de UI ocurren:
Hay 2 soluciones para estos errores de UI:
  • Solución 1: Volver a la opción anterior de anclaje horizontal: "Ampliar o reducir como el navegador (o su contenedor)".
  • Solución 2: Modificar el ancho de la celda en cada rango de resolución donde se produce el error. Por lo tanto, el ancho de la celda se fijará en cada rango de resolución.
    Por ejemplo, en la siguiente ilustración, la anchura de la celda se modificó en el "Móvil" rango de resolución.
La solución 2 es sencilla, pero sólo es válida si la dimensión de los segmentos "Escritorio", "Tableta" y "Móvil" es fija y conocida.: el sitio web funciona con el mismo tipo de dispositivo/navegador.
La solución 1 funcionará independientemente de la resolución de su navegador. Por lo tanto, no tiene que preocuparse por su objetivo.
En esta Page, utilizaremos la solución 1: cambiaremos la opción de anclaje horizontal a "Ampliar o reducir como el navegador (o su contenedor)".
  1. Mostrar el "Escritorio" rango de resolución.
  2. Haga clic con el botón derecho del ratón en control Celda para abrir el menú contextual. Seleccione la opción "Anclaje".
  3. En "Anclajes horizontales", seleccione "Ampliar o reducir como el navegador (o su contenedor)".
  4. Validar
Creando los elementos de la barra

Creando el título y el logo

Vamos a añadir un título y un logo en la celda.
Para crear el título:
  1. Visualizar el "Escritorio" rango de resolución.
  2. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en y, a continuación, haga clic en la celda situada en la esquina superior izquierda de Page: la control aparece en modo de creación.
Para crear el logo:
  1. Visualizar el "Escritorio" rango de resolución.
  2. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Imagen" y seleccione "Image"..
  3. Haga clic en Page arriba a la derecha en la celda: la control aparece en modo de creación.

La aplicación del logotipo

En primer lugar, vamos a manipular el Image:
  1. Seleccione una Image en el catálogo WEBDEV:
    • Abra la ventana de descripción del control Imagen (seleccione "Descripción" en el menú contextual).
    • En la pestaña "General", haga clic en Botón desplegable a la derecha de "Imagen". Seleccione "Catálogo" en el menú que aparece.
    • En el catálogo Image, escriba "coche", por ejemplo, y seleccione un Image en la lista.
    • Seleccione una anchura set a 80 y valide.
    • Valide la siguiente pantalla para guardar la Image en el directorio del sitio.
  2. La ventana description de la Image se actualiza. Valide.
Si la Image no se muestra por completo, cambie su tamaño vertical u horizontalmente mientras mantiene pulsada la tecla Shift.
Observación: Puede evitar que los elementos se ajusten a la cuadrícula manteniendo pulsada la tecla Shift: Las operaciones de movimiento y redimensionamiento se realizan con precisión de píxeles.
Después de estas operaciones, usted get:
No se realizará ninguna otra operación en el "Escritorio" rango de resolución. Veamos ahora lo que ocurre en los otros 2 segmentos ("Tablet" y "Móvil"):
  1. Seleccione la "Tableta" rango de resolución, luego la "Móvil" rango de resolución.
    • "Tableta" rango de resolución:
    • "Móvil" rango de resolución:
  2. La Image desborda la zona en los dos modos de presentación. Este problema de visualización proviene de un problema de anclaje.
  3. Estancia en el "Mobile" rango de resolución. Los otros trozos se fijarán después.
  4. Compruebe las opciones de anclaje de la control Imagen ("Anclaje" en el menú contextual).
    El Image mantiene la anchura de creación en el editor WEBDEV. La anchura no depende de la anchura Page.
  5. La Image debe desplazarse a la izquierda para que aparezca dentro de la Page.
  6. Seleccione la "Tableta" rango de resolución. Se produce el mismo problema de visualización.
  7. Realice las mismas operaciones para corregir la visualización.

La aplicación del título

Trabajemos ahora en el título:
  1. Mostrar el "Escritorio" rango de resolución.
  2. Escriba el título y elija un estilo para el texto:
    • Haga clic con el botón derecho del ratón en control Estático para abrir el menú contextual y seleccione "description".
    • En la ventana de descripción:
      • Dale un nombre a la control: "RTA_TITLE".
      • Haga clic en el botón "Editar texto enriquecido" y escriba "Page con celdas", por ejemplo.
      • Elija la fuente "Times New Roman" con un tamaño set a 20 píxeles.
  3. Pulse Esc para salir del modo de edición de control.
  4. Visualice la "Tableta" rango de resolución, luego el "Móvil" rango de resolución:
    • "Tableta" rango de resolución:
    • "Móvil" rango de resolución:
  5. La leyenda se reduce horizontalmente, el texto ya no es Visible en el "Móvil" rango de resolución. El pie de foto es sólo Visible en la "Tableta" rango de resolución.
Para corregir este problema de visualización de control Estático, hay que modificar los parámetros de anclaje de control Estático.
  1. Seleccione la rango de resolución "Móvil" si es necesario.
  2. Seleccione el control Estático.
  3. Haga clic con el botón derecho del ratón en la control para abrir el menú contextual y seleccione "Anclar"..
  4. Cambiar la opción de anclaje horizontal. Seleccione "Anchura fija" y confirme.
  5. El control se estira para que el contenido sea completamente Visible.
Prueba de la página
Comprobemos ahora el comportamiento de la barra de cabecera en tiempo de ejecución.
  1. Pruebe la página (haga clic en en los botones de acceso rápido).
  2. Usted get estas 3 representaciones (reduzca el ancho de su navegador para simular una ejecución en una tableta o en un dispositivo móvil).
    • Navegador ("Escritorio" rango de resolución):
    • Navegador ("Tablet" rango de resolución):
    • Navegador ("Móvil" rango de resolución):
La Image se desplaza y no se alinea correctamente con el borde derecho del navegador. Además, cambia Line debajo del título.
Una vez más, es un problema relacionado con el anclaje..
El problema viene de los anclajes. En realidad, la Image está anclada a la izquierda, pero debería seguir el borde derecho del navegador.
Para solucionarlo, anclemos la Image a la derecha:
  1. Seleccione el "Escritorio" rango de resolución.
  2. Seleccione el control Imagen.
  3. Haga clic con el botón derecho del ratón en la control para abrir el menú contextual y seleccione "Anclar"..
  4. Cambiar la configuración del anclaje. Seleccione "Derecha" () y confirme.
  5. Pruebe la página (haga clic en en los botones de acceso rápido).
  6. La Image se alinea correctamente incluso en una resolución pequeña.
Versión mínima requerida
  • Versión 21
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 21/06/2023

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