AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WEBDEV 2024!
Ayuda / Tutorial WEBDEV / Tutorial - Anclajes, zoning y layouts
  • Diferentes métodos de diseño de página
  • Presentación
  • Ejemplo práctico
  • Crear un proyecto de ejemplo
  • Crear una página
  • Crear áreas
  • Prueba de la página
  • Implementar anclajes
  • Anclajes de la página
  • Anclaje de las áreas
  • Anclajes de los controles
  • Probar página
  • Implementar los layouts
  • Crear un layout Móvil
  • Editar el layout para móviles
  • Prueba de la página
  • En resumen

Tutorial - Anclajes, zoning y layouts

Diferentes métodos de diseño de página
Abordaremos los siguientes temas:
  • ¿Qué es un anclaje?
  • Implementar anclajes.
  • Implementar layouts.
Durée de la leçon 30 min
Presentación
En este tutorial, veremos los diferentes métodos que ofrece WEBDEV para crear fácilmente un diseño de página que se adapte al tamaño del navegador.
El primer método es el uso de anclajes. Los anclajes definen el comportamiento de un control o un área cuando cambia el tamaño del navegador. Por ejemplo, definen si un control debe ampliarse o reposicionarse.
Este tipo de anclaje define cómo se comportan las páginas cuando se muestran en resoluciones específicas (tabletas, teléfonos, etc.).
Un método adicional para que un sitio web sea más fácil de usar en dispositivos móviles es el uso de layouts. Al combinarlos con los anclajes, los layouts permiten crear sitios web adaptables.
En este tutorial, crearemos un proyecto y una página para implementar anclajes en el navegador y entender mejor las ventajas de este método.
Más adelante, editaremos el proyecto para adaptarlo a dispositivos móviles utilizando layouts.
Ejemplo práctico

Crear un proyecto de ejemplo

Para crear un proyecto en WEBDEV:
  1. Inicie WEBDEV.
  2. Vaya a la página de inicio de WEBDEV si es necesario (Ctrl + <).
  3. En la página de inicio, haga clic en "Crear un proyecto" y seleccione "Sitio". El asistente de creación de proyectos se abre.
  4. Conserve las opciones predeterminadas de las diferentes etapas del asistente de creación del proyecto, hasta llegar a "Descripción - Información general".
  5. Introduzca el nombre del proyecto "Anchors" y haga clic en "Finalizar".

Crear una página

Para crear una página e implementar anclajes:
  1. Cree una nueva página en blanco.
    • En la ventana "Nuevo", haga clic en "Página", y luego en "Página".
      Observación: Para abrir la ventana de creación de elementos, haga clic en Crear un elemento en los botones de acceso rápido.
    • El asistente de creación de páginas se abre automáticamente.
    • Haga clic en "En blanco" y finalice el asistente.
  2. La ventana para guardar la página se abre.
  3. Introduzca "Anchors" para el título. El nombre se rellena automáticamente: "PAGE_Anchors".
  4. Valide.

Crear áreas

Vamos a dividir la página en 3 áreas:
  • Un encabezado (en la parte superior que ocupe todo el espacio de la página horizontalmente).
  • Un menú a la izquierda (que ocupe el espacio verticalmente).
  • Un área de contenido en el centro.
Cada área tendrá un comportamiento específico al redimensionar la página.
Para crear las áreas, usaremos la función de zoning.
Para crear una primera área de título en la parte superior de la página:
  1. En la pestaña "Página", en el grupo "Edición", despliegue "Zoning" y seleccione "Dividir horizontalmente".
  2. El puntero se convierte en un lápiz.
  3. Haga clic en la parte superior de la página y dibuje una línea horizontal. El área se crea al soltar el botón del ratón.
Para ver esta área, vamos a aplicar un color de fondo:
  1. Abra la ventana de descripción del área: seleccione "Descripción del área" en el menú contextual.
  2. En la pestaña "Estilo", seleccione el elemento "Bordes/Fondo" si es necesario y elija un color de fondo (amarillo pastel, por ejemplo).
  3. Valide la ventana de descripción del área.
Vamos a seguir los mismos pasos para dividir la parte inferior de la página:
  1. En la pestaña "Página", en el grupo "Edición", despliegue "Zoning" y seleccione "Dividir verticalmente".
  2. El puntero se convierte en un lápiz.
  3. Haga clic en el centro del área inferior y trace una línea vertical.
Para ver mejor las áreas, aplique un color verde al área de la izquierda y naranja al área del centro.
Vamos a crear controles Estáticos en cada área:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Texto" y seleccione "Estático simple".
  2. Haga clic dentro del área amarilla. El control Estático se crea automáticamente.
  3. Cambie el texto (presione la barra espaciadora): introduzca "Header".
  4. Repita los pasos anteriores para crear:
    • un control Estático con el texto "Menu" en el área verde.
    • un control Estático con el texto "Content" en el área naranja.
  5. Guarde la página (Ctrl + S)

Prueba de la página

  1. Pruebe la página (haga clic en Probar página en los botones de acceso rápido). La página se muestra en el navegador.
  2. Redimensione el navegador: la página permanece centrada pero las áreas no se redimensionan.
    Vamos a cambiar este comportamiento para que la página y las áreas se adapten al tamaño del navegador. Para ello, utilizaremos anclajes.
Cierre el navegador.
Implementar anclajes
Vamos a definir los anclajes de la página, de las áreas, y por último, de los controles.
Cuando se amplíe el navegador:
  • La página debe ampliarse vertical y horizontalmente.
  • El área del encabezado (amarilla) debe ampliarse horizontalmente.
  • El área del menú (verde) debe ampliarse verticalmente.
  • El área de contenido (naranja) debe ampliarse horizontal y verticalmente.
  • Los controles deben permanecer centrados con respecto a su área.
Ahora, vamos a realizar todas las operaciones necesarias.

Anclajes de la página

Para definir las opciones de anclaje de la página:
  1. Haga clic en el editor, al exterior de la página.
  2. Abra el menú contextual y seleccione "Anclaje". La ventana de opciones de anclajes se abre.
  3. La página debe ampliarse horizontal y verticalmente. Seleccione:
    • Posición: Conserve la opción predeterminada ().
    • Anclaje horizontal: Ampliar o reducir como el navegador (o su contenedor).
    • Anclaje vertical: Ampliar o reducir como el navegador (o su contenedor).
  4. Valide.

Anclaje de las áreas

Para anclar las áreas:
  1. Seleccione el área amarilla.
  2. Abra el menú contextual y seleccione "Anclaje". La ventana de opciones de anclajes se abre.
  3. El área debe ampliarse horizontalmente. Seleccione:
    • Posición: El control conserva la posición.
    • Anclaje horizontal: Ampliar o reducir como el navegador (o su contenedor).
    • Anclaje vertical: Alto fijo.
  4. Valide.
  5. Seleccione el área verde, abra el menú contextual y seleccione "Anclaje".
  6. El área debe ampliarse verticalmente. Seleccione:
    • Posición: El control conserva la posición ().
    • Anclaje horizontal: Ancho fijo.
    • Anclaje vertical: Ampliar o reducir como el navegador (o su contenedor).
  7. Valide.
  8. Seleccione el área naranja y abra la ventana de opciones de anclaje. El área debe ampliarse horizontal y verticalmente. Seleccione:
    • Posición: El control conserva la posición ().
    • Anclaje horizontal: Ampliar o reducir como el navegador (o su contenedor).
    • Anclaje vertical: Ampliar o reducir como el navegador (o su contenedor).
  9. Valide.

Anclajes de los controles

Para definir los anclajes de los controles:
  1. Seleccione "Header".
  2. Abra el menú contextual y seleccione "Anclaje".
  3. El control debe centrarse horizontalmente:
    • Posición: Centrado horizontalmente.
    • Anclaje horizontal: Ancho fijo.
    • Anclaje vertical: Alto fijo.
  4. Valide.
  5. Repita las mismas operaciones para los controles "Menu" y "Content":
    • "Menu" debe estar centrado verticalmente (seleccione "Centrado verticalmente").
    • "Content" debe estar centrado (seleccione "Centrado").
Guarde la página (Ctrl + S).

Probar página

Pruebe la página (haga clic en Probar página en los botones de acceso rápido).
  1. La página se muestra en el navegador.
  2. Redimensione el navegador: las áreas se adaptan al espacio disponible en el navegador.
Cierre el navegador.
Implementar los layouts
Las áreas y los anclajes permiten manipular fácilmente "pequeños" cambios de tamaño. Como vimos anteriormente, los sitios web deben estar diseñados para adaptarse a los dispositivos móviles.
Por lo general, para que los sitios se muestren correctamente en los dispositivos móviles, no basta con definir los anclajes. En algunos casos, es necesario ocultar algunos controles o áreas enteras para obtener una interfaz que se ajuste a estos dispositivos.
Esto puede lograrse utilizando layouts.
Los layouts permiten definir varias vistas de una misma página en un proyecto. Esto permite definir:
  • una vista específica para dispositivos móviles,
  • una vista específica para imprimir,
  • una vista específica para utilizar la página en una aplicación WINDEV.
  • una vista específica para utilizar la página en una aplicación WINDEV Mobile.
  • etc.
Vamos a editar la página para obtener un layout específico para dispositivos móviles. Este layout permitirá ocultar el área verde. A continuación, probaremos el sitio directamente en un dispositivo móvil.
Esta lección presenta de manera general los layouts en sitios WEBDEV. La implementación y gestión de layouts en sitios WEBDEV se explican en detalle en las diferentes lecciones del tutorial Layouts WEBDEV.

Crear un layout Móvil

Para crear un layout para dispositivos móviles:
  1. En la pestaña " Página ", en el grupo " Layouts ", despliegue " Layouts " y seleccione "Agregar un layout".
  2. En la ventana que aparece, se muestra un layout adaptado a teléfonos y tabletas.
    Valide.
  3. En nuestro ejemplo se crearon dos layouts. Estos layouts se muestran como miniaturas a la derecha de la página "PAGE_Anchors".

Editar el layout para móviles

Abra el layout "Móvil":
  1. Haga doble clic en la miniatura del layout Móvil: la página que corresponde a este layout se muestra en el centro del editor.
  2. La opción (en la esquina superior derecha de la ventana principal, en la barra de título) indica si el modo "Disociación automática" está activado. Si se activa este modo, los cambios realizados en una de las páginas del layout no se aplicarán a las demás. Conserve el modo "Disociación automática" activado.
Vamos a cambiar la visibilidad de los controles en el layout móvil. En modo móvil, el área del menú de la izquierda y el texto pueden ocultarse para utilizar un menú desplegable, por ejemplo (veremos cómo implementar este menú en una próxima lección). Para hacerlo más fácil, vamos a realizar estos cambios en el layout "Escritorio".
  1. Haga doble clic en la miniatura "Escritorio".
  2. Seleccione el área verde.
  3. En el menú contextual del control, seleccione "Layouts", vaya a "Visibilidad por layout" y deseleccione "Móvil (Smartphone)".
  4. La miniatura del layout Móvil se actualiza automáticamente.
    Si abre el layout móvil, el área verde y el texto ya no se muestran.
Guarde la página (Ctrl + S).

Prueba de la página

Pruebe la página (haga clic en Probar página en los botones de acceso rápido).
  1. La página se muestra en el navegador.
  2. Redimensione el navegador: el layout Móvil se muestra en el navegador.
Cierre el navegador.
Ahora, podemos probar el sitio en un teléfono o tableta:
  1. Despliegue la opción en el área de acceso rápido y seleccione "Probar desde un teléfono (acceso mediante un código QR)".
  2. Una ventana aparece con un código QR que se puede escanear desde el teléfono.
  3. Una vez escaneado el código QR, el sitio se muestra en el teléfono.
  4. El layout "Móvil" aparece automáticamente.
En resumen
En esta lección, creamos un ejemplo para ilustrar la implementación de los anclajes, tanto en los controles como en las áreas.
También combinamos el uso de anclajes con layouts. Para saber más sobre los layouts, le recomendamos seguir el tutorial Layouts WEBDEV.
Proyecto completado:
Si desea comprobar el resultado final de los pasos descritos en este tutorial, puede abrir una versión finalizada del proyecto. En este proyecto, ya se completaron todos los ejercicios presentados en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Tutorial - Anchors, zoning and layouts", haga doble clic en "Anchors - Answers".
Tabla de contenido
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 14/12/2023

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