AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WEBDEV 2024!
Ayuda / Tutorial WEBDEV / Tutorial - Layouts WEBDEV
  • Lección 1 - Layouts simples
  • ¿En qué consiste adaptar un sitio a dispositivos móviles?
  • Conceptos en WEBDEV
  • Usar layouts
  • Layouts simples
  • Página utilizada
  • Crear un layout Móvil
  • Definir el layout Móvil
  • Prueba de la página
  • Layouts y controles específicos
  • Página utilizada
  • Crear un layout Móvil
  • Definir el layout Móvil
  • ¿Cómo adaptar el tamaño de un control Looper?
  • Probar la página y el proyecto
  • En resumen

Tutorial - Layouts WEBDEV

Lección 1 - Layouts simples
Abordaremos los siguientes temas:
  • ¿En qué consiste adaptar un sitio a dispositivos móviles?
  • Crear un layout.
  • Disociar el posicionamiento de los controles.
  • Manipular controles Looper.
Durée de la leçon 30 min
¿En qué consiste adaptar un sitio a dispositivos móviles?
Cada vez más personas utilizan sus teléfonos o tabletas para acceder a Internet y a sitios de Intranet. Esto significa que los sitios deben diseñarse de manera que se adapten fácilmente a los dispositivos móviles (teléfonos o tabletas).
En un sitio adaptado a dispositivos móviles, los usuarios deben poder acceder a la información principal del sitio web desde sus dispositivos, sin tener que hacer zoom o reducir las páginas.

Conceptos en WEBDEV

WEBDEV incluye varios métodos para hacer que los sitios sean aptos para móviles:
  • Publicación dinámica: La "Publicación dinámica" es una técnica en la que la misma dirección (URL) conduce a 2 páginas diferentes: una página para PC y otra para móviles. La página se mostrará en función del dispositivo (PC o móvil) que la abra.
    Con la "Publicación dinámica" ya no es necesario modificar las páginas existentes: simplemente agregue páginas específicas para dispositivos móviles.
    Sin embargo, este método requiere el uso de dos conjuntos de páginas y, por tanto, dos conjuntos de código a ejecutar.
  • Responsive Web Design heredado: Este método divide las páginas en rangos de resolución que adaptan el sitio web a los dispositivos móviles. Esta solución permite utilizar el mismo código independientemente del dispositivo de destino. Sin embargo, este modo de edición requiere de gran atención por parte del desarrollador.
  • Layouts. Ya hemos mencionado y explicado este método en diferentes partes de este tutorial. El uso de layouts permite implementar rápidamente una interfaz específica para dispositivos móviles. El código sigue siendo el mismo. Simplemente mueva, oculte o configure los diferentes controles en el layout Móvil. El editor de páginas WYSIWYG muestra los cambios inmediatamente.
Usar layouts
En este tutorial, veremos los diferentes métodos que se pueden utilizar para crear layouts fácilmente en las páginas.
Más concretamente, esta lección nos permitirá:
  • disociar el posicionamiento de los controles.
  • posicionar los controles en los diferentes layouts.
  • establecer la visibilidad de los controles en cada layout.
  • manipular controles Looper en los layouts.
En la siguiente lección veremos cómo utilizar un menú en un layout.
Para descubrir las herramientas disponibles en WEBDEV para crear sitios web usando layouts, vamos a utilizar un proyecto de ejemplo. Esto le permitirá realizar todos los ejercicios y entender mejor las herramientas disponibles.
Abrir el proyecto de ejemplo
  1. Vaya a la página de inicio de WEBDEV (Ctrl +<).
  2. En la página de inicio, haga clic en "Tutorial", luego en "Tutorial - WEBDEV layouts", haga doble clic en "Layouts - Exercise".
Advertencia
Este proyecto se utilizará en las diferentes lecciones de este tutorial.
Layouts simples

Página utilizada

Para saber cómo establecer el orden de los controles, abra la página "PAGE_ControlOrder" en el proyecto WW_Layout.
Esta página contiene:
  • un control Estático con un título.
  • 3 controles Imagen y 3 controles Área de texto enriquecido dispuestos horizontalmente. Los controles Área de texto enriquecido muestran las descripciones de las imágenes.
Veamos cómo se redimensiona la página al cambiar el tamaño del navegador.
  1. Pruebe la página (haga clic en Probar página en los botones de acceso rápido).
  2. La página se muestra en el navegador.
  3. Redimensione el navegador: el sitio no se muestra correctamente.
  4. Cierre el navegador.
Este no es el comportamiento esperado
En modo Móvil, haremos que los 3 productos y sus descripciones se muestren verticalmente y que ocupen todo el espacio disponible en la página.

Crear un layout Móvil

Primero vamos a crear un nuevo layout para 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_ControlOrder". El layout Móvil se selecciona automáticamente y se muestra en el editor.
    Las áreas resaltadas con una línea de puntos rojos indican que hay un conflicto.

Definir el layout Móvil

Para definir nuestro layout, vamos a comenzar ampliando la página verticalmente:
  1. Haga clic dentro del rectángulo que representa la página. La barra de estado muestra el tamaño de la página: 320 x 406.
  2. Cambie la altura de la página de 406 a 1200.
A continuación, vamos a reposicionar los controles en la página.
  1. Seleccione el título "Dissociate positioning of controls" y ajústelo horizontalmente para que se adapte al tamaño de la página.

    La opción (en la esquina superior derecha de la barra de título de la ventana principal) permite activar o desactivar el modo "Disociación automática". Con este modo (predeterminado), cuando cambia el tamaño o la posición de un control en una de las paginas del layout, los cambios no se aplican a las demás páginas.
  2. Seleccione la segunda imagen junto con la descripción, y ubíquela debajo de la descripción de la primera imagen.
  3. Repita estos pasos para la tercera imagen.
  4. Seleccione las tres imágenes y las descripciones, luego vaya a la pestaña "Alineación", grupo "Centrar y distribuir", y seleccione "Centrar en el padre".
Ahora, centrémonos en el título: el texto es demasiado grande y no cabe completamente en el control. Vamos a reducir el tamaño de la fuente, pero solo en el layout Móvil.
  1. Si es necesario, abra el layout Móvil (haga doble clic en la miniatura correspondiente).
  2. Seleccione el título y abra la ventana de descripción del control (Alt + Entrar).
  3. En la pestaña "Estilo", cambie el tamaño de 24 a 20 pixeles.
  4. Valide. El texto ahora cabe en el control Estático.
  5. Guarde la página (Ctrl + S).
Al estar activado el modo "Disociación automática", el tamaño de la fuente solo cambia en el layout actual. Esto se puede comprobar fácilmente:
  1. Abra el layout Escritorio: haga doble clic en la miniatura "Escritorio" que aparece a la derecha de la página.
  2. Abra la ventana de descripción del control Estático: en la pestaña "Estilo", el tamaño de la fuente sigue siendo de 24 pixeles.

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.
  3. 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.
Layouts y controles específicos

Página utilizada

Abra la página PAGE_Adaptations.
Página en el editor
Esta página contiene diferentes controles:
  • un título en la parte superior,
  • un control Mapa para indicar la ubicación del restaurante,
  • un control Área de texto enriquecido con la dirección del restaurante,
  • un control Imagen a la derecha para mostrar un banner publicitario,
  • un control Looper en la parte inferior para mostrar las opiniones.
Veamos cómo se redimensiona la página al cambiar el tamaño del navegador.
  1. Pruebe la página (haga clic en Probar página en los botones de acceso rápido).
  2. La página se muestra en el navegador tal y como estaba en el editor en modo Escritorio.
    Advertencia
    Esta página utiliza un control Mapa. Tanto en modo de prueba como en producción, es necesario utilizar una clave de Google. En caso contrario, se produce un error en el control Mapa. Consulte la ayuda en línea para saber cómo obtener una clave.
    Si ya tiene una clave, especifíquela en la pestaña "Proyecto" de la ventana de descripción del proyecto.
  3. Reduzca el tamaño del navegador para ver cómo se mostraría la página en dispositivos móviles.
    Página móvil
Este no es el comportamiento esperado. En el layout Móvil:
  • la imagen del anuncio no debería aparecer,
  • el mapa debe ser más pequeño y aparecer debajo de la descripción.
  • el control Looper debe mostrar la información en una sola columna.

Crear un layout Móvil

Primero vamos a crear un nuevo layout para 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 la ventana.
  3. En nuestro ejemplo se crearon dos layouts. Estos layouts se muestran como miniaturas a la derecha de la página "PAGE_Adaptations".
    El layout Móvil se selecciona automáticamente y se muestra en la página.

Definir el layout Móvil

Para definir nuestro layout, ampliaremos la página verticalmente:
  1. Haga clic dentro del rectángulo que representa la página. La barra de estado muestra el tamaño de la página: 320 x 616.
  2. Cambie la altura de la página de 616 a 1024.
También cambiaremos los márgenes de la página en el modo de layout Móvil. Los márgenes de la versión "Escritorio" de la página son demasiado grandes para la versión móvil. Para reducir los márgenes:
  1. Abra la ventana de descripción de la página: en la pestaña "Página", en el grupo "Descripción", haga clic en "Descripción".
  2. En la pestaña "Estilo", despliegue "Elemento" y seleccione "Márgenes".
  3. Reemplace "20px" por "10px".
  4. Valide.
Para ver mejor los cambios, desplace los diferentes controles al área de la derecha de la página. Para cada control (excepto el título):
  1. Seleccione el control deseado.
  2. Desplace el control al área de la derecha de la página.
Puede que algunas áreas estén resaltadas en rojo para indicar que hay conflictos de posicionamiento. Este comportamiento es normal. Ahora adaptaremos los controles uno por uno.
Para ajustar la posición y/o el tamaño de controles simples (Estático, Campo de entrada, Imagen, Mapa, etc.), simplemente realice los cambios deseados en el editor. Estos cambios se aplicarán solo en el layout actual gracias a la disociación automática que vimos anteriormente en esta lección.
El control Imagen no debe aparecer en los dispositivos móviles. Por lo tanto, lo vamos a ocultar en el layout Móvil:
  1. Seleccione el control Imagen.
  2. En el menú contextual del control, seleccione "Layouts", vaya a "Visibilidad por layout" y deseleccione "Móvil (Smartphone)".
  3. El control desaparece del layout móvil.
    Observación: La visibilidad de un control se define en la pestaña "UI" de la ventana de descripción del control.
Ahora, vamos a mover los diferentes controles para posicionarlos en la página:
  1. Ubique el área de texto debajo del título y ajuste el tamaño para que se adapte a la página.
  2. Asimismo, ubique el control Mapa debajo del texto y ajuste el tamaño.
  3. A continuación, redimensione y ubique el control "Reviews". Obtendrá la siguiente interfaz:
  4. Por último, ubique el control Looper.
    Este control es demasiado grande para el layout Móvil. Vamos a ver cómo ajustar el tamaño de este control en función de los diferentes layouts.

¿Cómo adaptar el tamaño de un control Looper?

El control Looper debe mostrarse de forma diferente según el layout. En este caso, debe tener dos columnas en el layout Escritorio, pero solo una en el layout Móvil. Para ello, es necesario "disociar" el número de columnas que se muestran en el control en cada layout.
Para disociar el número de columnas que se muestran en el control Looper:
  1. Seleccione el control en el layout Móvil.
  2. Abra la ventana de descripción del control.
  3. En la pestaña "Detalles", haga clic en . En la ventana que aparece:
    • Seleccione la opción "Disociar valor por layout".
    • Para el layout Escritorio, conserve "2".
    • Para el layout móvil, reemplace "2" por "1".
  4. Valide.
  5. Valide la ventana de descripción del control.
  6. El control Looper solo muestra una columna en el layout Móvil. Puede redimensionarlo para que se ajuste a la página.
Guarde la página (Ctrl + S).

Probar la página y el proyecto

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 y manipulamos layouts para crear páginas relativamente sencillas.
En la próxima lección, crearemos un menú en una página que utiliza un layout.
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 - WEBDEV layouts", haga doble clic en "Layouts - Answers".
Tabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 13/12/2023

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