Aunque Blocs ofrece una representación muy precisa de su sitio final a medida que lo construye, hay momentos en que puede necesitar obtener una vista previa rápida de su sitio para verificar y probar otros aspectos de diseño como interacciones, FX de desplazamiento y el animaciones. Blocs tiene varias opciones de vista previa integradas que están diseñadas para ayudarlo a probar su sitio de una manera más natural y completa.
Modo de vista previa en Blocs no solo le permite obtener una vista previa de HTML localmente, sino que también admite la vista previa de PHP. Siempre que una página tenga la tipo de archivo establecido en PHP en el configuración de página, la vista previa mostrará cualquier código PHP agregado a través del Widget de código , en tiempo real.
En la vista previa de la aplicación
La vista previa en la aplicación te permite obtener una vista previa de tu sitio web en varios tamaños de pantalla dentro de un solo espacio de trabajo. Para ingresar al modo de vista previa, simplemente click izquierdo el botón de reproducción ⏵ ubicado a la derecha del control de punto de interrupción o, alternativamente, utilice el atajo de teclado ⌃V.
Barra de herramientas de vista previa
En el modo de vista previa, la barra de herramientas de vista previa se encuentra en la parte superior de la ventana principal de la aplicación. Esta barra de herramientas contiene varias funciones que lo ayudarán a probar y obtener una vista previa de su sitio web.
Agregar ventana gráfica
El botón más + Ubicado en el extremo izquierdo de la barra de herramientas, permite agregar de forma rápida y sencilla ventanas gráficas adicionales según las dimensiones de las pantallas comunes de computadoras, monitores, tabletas y teléfonos.
Miradores no Simulan las características del sistema operativo del dispositivo en cuestión. Son simplemente ventanas del navegador escaladas para adaptarse al tamaño de la pantalla del dispositivo.
Dibujar ventana gráfica
El botón con el lápiz El icono se alternará modo de dibujo, que le permite dibujar manualmente ventanas gráficas de tamaño personalizado. Esta función también se puede habilitar manteniendo presionada la tecla D clave.
Modo de edición
El tercer botón desde la izquierda de la barra de herramientas alternará modo de ediciónCuando está habilitado, el modo de edición le permite mover y organizar las ventanas gráficas alrededor del lienzo de vista previa. Si una ventana gráfica está desbloqueado, entonces también es posible cambiar el tamaño de las dimensiones de ancho y alto de las vistas durante el modo de edición. Esta función también se puede habilitar manteniendo presionada la tecla Shift ⇧ clave.
Selección de página
El control ubicado en el centro de la barra de herramientas, le permite seleccionar la página actual que se carga en todas las ventanas de vista previa.
Recargar
El botón con el ↻ El icono es el botón de recarga. Este botón se puede utilizar para recargar todas las ventanas de vista previa.
Controles de transmisión
El Blocs Se puede acceder al servidor de vista previa desde cualquier otro dispositivo en la misma red, el segundo botón desde el final de la barra de herramientas le dará acceso a las opciones de transmisión de la red local.
Vista previa de AirDrop
Esta opción le permitirá compartir rápida y fácilmente la URL de vista previa con otros dispositivos en la misma red local a través de AirDrop. Las URL que se comparten mediante AirDrop se abren automáticamente en el navegador web del dispositivo receptor, lo que le permite obtener una vista previa y probar su sitio en el dispositivo real.
Si encuentra que las opciones de AirDrop no están disponibles o su dispositivo no aparece como disponible, tenemos esta guía dedicada a la solución de problemas eso puede ayudarte a resolver el problema.
Copiar URL de vista previa
La opción de vista previa de copia copiará la URL de la red local en el portapapeles de su dispositivo. Si ingresa esta URL en un navegador web en cualquier dispositivo que esté conectado a la misma red, podrá obtener una vista previa y probar su sitio en el dispositivo.
Detener / Salir
El botón con el stop ◼ Símbolo ubicado en el extremo derecho de la barra de herramientas, se utiliza para salir del modo de vista previa.
Cambiar el nombre de la ventana gráfica
Cada ventana de vista previa tiene una etiqueta ubicada en la esquina superior izquierda. El contenido de esta etiqueta se puede editar simplemente haciendo clic en ella y modificando el texto.
Opciones de ventana gráfica
En la esquina superior derecha de cada ventana gráfica del lienzo de vista previa hay un botón de menú ☰, este menú le permite acceder a funciones específicas de la ventana gráfica relevante.
Inspeccciona
Esta opción abrirá las herramientas de inspección para desarrolladores de WebKit para la ventana gráfica correspondiente. Las herramientas de inspección son una excelente manera de inspeccionar el código de su sitio y depurar cualquier problema potencial que pueda encontrar. Tenemos esta guía práctica que le ayudará a inspeccionar su sitio web en busca de errores.
Cambiar el enfoque
Esta opción alternará el modo de enfoque. Puede leer más sobre el modo de enfoque en la sección de abajo.
Recargar
Esta opción recargará la ventana gráfica relevante.
Compartir captura de pantalla
Esta opción le permitirá acceder a las distintas opciones para compartir capturas de pantalla para la ventana gráfica correspondiente. Blocs Tiene soporte para compartir una captura de pantalla de la ventana gráfica actual a almacenamiento local, correo electrónico, la vida y más Lanzamiento desde el aire.
Borrar
Esta opción eliminará la ventana gráfica relevante.
Modo de enfoque
Al hacer doble clic en cualquier ventana gráfica del lienzo de vista previa, se habilitará modo de enfoqueCuando el modo de enfoque está habilitado, todas las demás ventanas gráficas se ocultarán y el lienzo de vista previa se ampliará para ajustar la ventana gráfica seleccionada al espacio de ventana disponible. Vuelva a hacer doble clic en la vista enfocada o presione el botón escapar tecla, saldrá del modo de enfoque, revelando todas las demás ventanas gráficas.
Cambio de tamaño temporal
Cuando una ventana gráfica está en modo de enfoque, se muestra un control de ancho de cambio de tamaño temporal en la derecha de la ventana gráfica. Al salir del modo de enfoque, la ventana gráfica volverá a su valor de ancho original.
También es posible cambiar rápidamente a un ancho de punto de interrupción predefinido clic derecho el control de cambio de tamaño y seleccionar una de las opciones disponibles en el menú contextual.
Controles de punto de interrupción
Cuando una ventana gráfica está en modo de enfoque, los controles de punto de interrupción se muestran en la parte inferior de la ventana gráficaEstos controles le permiten cambiar temporalmente el ancho del punto de interrupción actual de la ventana gráfica enfocada.
También es posible cambiar a un punto de interrupción particular utilizando los siguientes atajos de teclado:
- Punto de interrupción de LG – ⌘1
- Punto de interrupción MD – ⌘2
- Punto de interrupción de SM – ⌘3
- Punto de interrupción XS – ⌘4
Lienzo de sartén
Con un Magic Mouse o Trackpad de Apple, es posible desplazar el lienzo de vista previa principal desplazando el dedo en cualquier dirección en el espacio vacío del lienzo de vista previa. Alternativamente, el lienzo de vista previa también se puede desplazar presionando y manteniendo presionado el barra espaciadora en su teclado y arrastrándolo en el espacio del lienzo vacío, en cualquier dirección.
Opciones de lienzo
También hay una gama de opciones a las que se puede acceder mediante clic derecho en cualquier lugar del espacio vacío en el lienzo de vista previa.
Recargar todas las ventanas gráficas
Esta opción recargará todas las ventanas gráficas.
Alinear el espacio de trabajo al centro
Esta opción centrará el espacio de trabajo actual. El espacio de trabajo es el área que cubren todas las ventanas gráficas del lienzo de diseño.
Espacio de trabajo ajustado
Esta opción ajustará el nivel de zoom del lienzo de vista previa para que todas las ventanas gráficas quepan dentro del marco de la ventana de vista previa.
Borrar caché de vista previa
Esta opción borrará el caché de todas las ventanas gráficas en el lienzo de vista previa y las volverá a cargar.
Eliminar todas las ventanas gráficas
Esta opción eliminará todas las ventanas gráficas del lienzo de vista previa.
Vista previa en el navegador
Además de la vista previa en la aplicación, Blocs también le permite obtener una vista previa rápida de su sitio con cualquiera de los navegadores que haya instalado en su Mac. Para obtener una vista previa de su sitio en un navegador, simplemente haga clic derecho el botón de vista previa y seleccione un navegador en el menú emergente.
Puede leer más sobre la vista previa en los navegadores. aquí.
Simulación de fecha y hora
Si su sitio web utiliza Interacciones personalizadas que dependen de time or datos, puedes usar el modo de vista previa simulación de fecha y hora Función para probarlas. Esto te permite obtener una vista previa de tu sitio web en una fecha o hora específica para ver cómo se comportan tus interacciones.
Para acceder a las funciones de simulación de fecha y hora, haga clic en el icono reloj icono en la parte inferior esquina izquierda del lienzo de vista previa principal.
Si tiene problemas con el modo de vista previa o simplemente no funciona, le recomendamos leer este guía para resolver problemas.