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
- Entorno de desarrollo configurado para crear aplicaciones de Oracle JET con el tiempo de ejecución de JavaScript, Node.js y la última interfaz de línea de comandos de Oracle JET instalada
- Acceso a Oracle JET Developer Cookbook
- Finalización del tutorial anterior en esta ruta de aprendizaje para que haya creado la carpeta
JET_Web_Application
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.
-
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.
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.
-
En Google Chrome, pulse Ctrl+Shift+I para mostrar la ventana Chrome DevTools.
-
En la barra de herramientas Chrome DevTools, haga clic en
para cambiar al modo de dispositivo.
-
En el emulador de pantalla del modo de dispositivo, seleccione un dispositivo o tamaño de pantalla específico para probar la aplicación.
-
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.
-
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.
-
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.
-
En la barra de herramientas Chrome DevTools, haga clic en
para salir del modo de dispositivo.
-
Cierre la ventana o separador del explorador que muestra la aplicación web en ejecución.
-
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.
Test the Oracle JET web application on different screen sizes
F53135-01
February 2022
Copyright © 2022, Oracle and/or its affiliates.