Probar la aplicación web Oracle JET en diferentes tamaños de pantalla

Introducción

Una distribución ajustable se ajusta a diferentes tamaños de pantalla en una amplia gama de dispositivos. Al ejecutar la aplicación web Oracle JET en el explorador web Google Chrome, puede probar la capacidad de respuesta de la aplicación web con diferentes tamaños de pantalla que seleccione en las herramientas para desarrolladores de Google Chrome (Chrome DevTools).

Objetivos

En este tutorial, probará el diseño ajustable de la aplicación web desarrollada de Oracle JET en diferentes tamaños de pantalla.

Requisitos

Tarea 1: ejecutar la aplicación web

La aplicación web de Oracle JET tiene un diseño y componentes ajustables, y se puede ejecutar en muchos exploradores web diferentes. Para este tutorial, utilizaremos el explorador Chrome y DevTools para ver la aplicación en varios tamaños de pantalla.

  1. En la ventana de terminal, cambie al directorio JET_Web_Application y ejecute la aplicación.

    $ ojet serve

    Las herramientas de Oracle JET ejecutan su aplicación web en Google Chrome.

    El aspecto de la aplicación final

    Descripción de la ilustración final-app.png

Tarea 2: Cambiar el tamaño de la pantalla

Puede probar la capacidad de respuesta de la aplicación web para diferentes tamaños de pantalla y dispositivos en el modo depurador del explorador de Google Chrome. Cuando ejecuta la aplicación en diferentes dispositivos, el contenido de la aplicación web se muestra para el tamaño de pantalla seleccionado y la alineación de texto se basa en el tamaño de pantalla.

  1. En Google Chrome, pulse Ctrl+Shift+I para mostrar la ventana Chrome DevTools.

    Depurador de Google Chrome activado

    Descripción de la ilustración cromo-debmode.png

  2. En la barra de herramientas Chrome DevTools, haga clic en Botón Alternar barra de herramientas de dispositivo para cambiar al modo de dispositivo.

    Localizador de la barra de herramientas del modo de dispositivo

    Descripción de la ilustración device-mode-lens.png

  3. En el emulador de pantalla del modo de dispositivo, seleccione un dispositivo o tamaño de pantalla específico para probar la aplicación.

    Se muestran varios viewports

    Descripción de la ilustración viewport.png

  4. Seleccione Pixel 5.

    En el contenedor Actividades, el contenido se alinea al final de la pantalla. En el contenedor Ítems de actividad, se muestran los elementos de la lista para pantallas pequeñas y medianas.

    Aplicación mostrada para un tamaño de pantalla pequeño

    Descripción de la ilustración Small-screen.png

  5. Seleccione iPad Air.

    En el contenedor Actividades, el contenido se alinea a la izquierda. En el contenedor Ítems de actividad, se muestran los elementos de la lista para pantallas pequeñas y medianas. Para el contenedor Ítems de actividad, se aplica el relleno.

    Aplicación mostrada para un tamaño de pantalla medio

    Descripción de la ilustración media-screen.png

  6. Seleccione Nest Hub Max (Máximo de hub anidado).

    En el contenedor Actividades, el contenido se alinea a la izquierda. En el contenedor Ítems de actividad, se muestran los elementos de la lista para pantallas grandes y extragrandes.

    Aplicación mostrada para un tamaño de pantalla grande

    Descripción de la ilustración Large-screen.png

  7. En la barra de herramientas Chrome DevTools, haga clic en Botón Alternar barra de herramientas de dispositivo para salir del modo de dispositivo.

  8. Cierre la ventana o separador del explorador que muestra la aplicación web en ejecución.

  9. En la ventana de terminal, pulse Ctrl+C y, si se le solicita, introduzca y para salir del trabajo por lotes de herramientas de Oracle JET.

Más recursos de aprendizaje

Explore otras prácticas en docs.oracle.com/learn o acceda a contenido de aprendizaje más gratuito en el canal YouTube de Oracle Learning. Además, visite education.oracle.com/learning-explorer para convertirse en un explorador de formación de Oracle.

Para obtener documentación sobre los productos, visite Oracle Help Center.