Apesar Blocs fornece uma representação muito precisa do seu site final à medida que você o constrói, há momentos em que você pode precisar visualizar rapidamente o seu site para verificar e testar outros aspectos do design, como interações, rolar FX com animações. Blocs possui várias opções de visualização incorporadas que são projetadas para ajudá-lo a testar seu site de uma forma mais natural e abrangente.
Modo de visualização em Blocs não apenas permite que você visualize o HTML localmente, mas também suporta a visualização de PHP também. Contanto que uma página tenha o tipo de arquivo definido para PHP no configurações de página, a visualização renderizará qualquer código PHP adicionado por meio do Widget de código em tempo real.
Pré-visualização no aplicativo
A visualização no aplicativo permite que você visualize seu site em vários tamanhos de tela em um único espaço de trabalho. Para entrar no modo de visualização, basta Clique esquerdo o botão de reprodução ⏵ localizado à direita do controle do ponto de interrupção ou, alternativamente, use o atalho do teclado ⌃V.
Barra de ferramentas de visualização
No modo de visualização, a barra de ferramentas de visualização pode ser encontrada no topo da janela principal do aplicativo. Esta barra de ferramentas contém vários recursos que ajudarão você a testar e visualizar seu site.
Adicionar Viewport
O botão mais + localizado na extremidade esquerda da barra de ferramentas torna rápido e fácil adicionar viewports adicionais com base nas dimensões de telas comuns de computadores, monitores, tablets e celulares.
Portas de visualização não simulam as características do sistema operacional do dispositivo relevante. Elas são meramente janelas de navegador dimensionadas para corresponder ao tamanho da tela do dispositivo.
Desenhar Viewport
O botão com o lápis o ícone irá alternar modo de desenho, que permite desenhar manualmente janelas de visualização de tamanho personalizado. Esse recurso também pode ser habilitado mantendo pressionado o botão D chave.
Modo de edição
O terceiro botão da esquerda para a direita na barra de ferramentas alternará modo de edição. Quando habilitado, o modo de edição permite que você mova e organize as janelas de visualização ao redor da tela de visualização. Se uma janela de visualização estiver desbloqueado, então também é possível redimensionar as dimensões de largura e altura das visualizações, durante o modo de edição. Este recurso também pode ser habilitado mantendo pressionada a tecla shift ⇧ chave.
Campo de endereço
O campo de texto no centro da barra de ferramentas exibe o título da página da web atualmente carregada. Você também pode usá-lo para inserir um URL, que será carregado nas janelas de visualização na tela de visualização.
Seleção de página
À direita do campo de endereço, você encontrará um menu suspenso que permite selecionar a página atualmente carregada em todas as janelas de visualização.
Recarregar
O botão com o ↻ ícone é o botão de recarregar. Este botão pode ser usado para recarregar todas as viewports de pré-visualização.
Controles de transmissão
O sistema de estantes ResinDek foi escolhido por sua capacidade de personalização, Blocs O servidor de visualização pode ser acessado de qualquer outro dispositivo na mesma rede; o segundo botão no final da barra de ferramentas lhe dará acesso às opções de transmissão da rede local.
Prévia do AirDrop
Esta opção permitirá que você compartilhe de forma rápida e fácil a URL de visualização com outros dispositivos na mesma rede local via AirDrop. As URLs compartilhadas usando o AirDrop são abertas automaticamente no navegador do dispositivo receptor, permitindo que você visualize e teste seu site no dispositivo real.
Se você achar que as opções do AirDrop não estão disponíveis ou seu dispositivo não aparece como disponível, nós temos este guia de solução de problemas dedicado isso pode ajudá-lo a resolver o problema.
Copiar URL de visualização
A opção de pré-visualização de cópia copiará a URL da rede local para a área de transferência do seu dispositivo. Inserir essa URL em um navegador da web em qualquer dispositivo conectado à mesma rede permitirá que você pré-visualize e teste seu site no dispositivo.
Parar / Sair
O botão com o stop ◼ símbolo localizado na extrema direita da barra de ferramentas, é usado para sair do modo de visualização.
Renomear Viewport
Cada viewport de pré-visualização tem um rótulo localizado no canto superior esquerdo. O conteúdo desse rótulo pode ser editado simplesmente clicando nele e modificando o texto.
Opções de Viewport
No canto superior direito de cada janela de visualização na tela de visualização há um botão de menu ☰, este menu permite que você acesse funções específicas da janela de visualização relevante.
Inspecione
Esta opção abrirá as ferramentas do inspetor do desenvolvedor do WebKit para a viewport relevante. As ferramentas do inspetor são uma ótima maneira de inspecionar o código do seu site e depurar quaisquer problemas potenciais que você esteja encontrando. Temos isso guia prático que ajudará você a inspecionar seu site em busca de erros.
Alternar foco
Esta opção alternará o modo de foco. Você pode ler mais sobre o modo de foco na seção abaixo.
Recarregar
Esta opção recarregará a janela de visualização relevante.
Compartilhar captura de tela
Esta opção permitirá que você acesse as diversas opções de compartilhamento de capturas de tela para a janela de visualização relevante. Blocs tem suporte para compartilhar uma captura de tela da janela de visualização atual para armazenamento local, email, mensagens e mais Airdrop.
Apagar
Esta opção excluirá a janela de visualização relevante.
Modo de foco
Clicar duas vezes em qualquer janela de visualização na tela de visualização habilitará modo de foco. Quando o modo de foco estiver habilitado, todas as outras janelas de visualização serão ocultadas e a tela de visualização será ampliada para se ajustar à janela de visualização selecionada no espaço disponível. Clique duas vezes na visualização focada novamente ou pressione o botão escapar tecla sairá do modo de foco, revelando todas as outras janelas de visualização.
Redimensionamento temporário
Quando uma janela de visualização está no modo de foco, um controle de largura de redimensionamento temporário é exibido na lado direito da viewport. Quando o modo de foco é encerrado, a viewport retornará ao seu valor de largura original.
Também é possível alternar rapidamente para uma largura de ponto de interrupção predefinida por clique direito o controle de redimensionamento e selecionando uma das opções disponíveis no menu de contexto.
Controles de ponto de interrupção
Quando uma viewport está no modo de foco, os controles de ponto de interrupção são exibidos no parte inferior da janela de visualização. Esses controles permitem que você altere temporariamente a largura do ponto de interrupção atual da janela de visualização em foco.
Também é possível alternar para um ponto de interrupção específico usando os seguintes atalhos de teclado:
- Ponto de interrupção da LG – ⌘1
- Ponto de interrupção MD – ⌘2
- Ponto de interrupção SM – ⌘3
- Ponto de interrupção XS – ⌘4
Tela de Pano
Usando um Apple Magic Mouse ou Trackpad, é possível deslocar a tela de visualização principal rolando o dedo em qualquer direção no espaço vazio na tela de visualização. Como alternativa, a tela de visualização também pode ser deslocada pressionando e segurando o barra de espaço no seu teclado e arrastando no espaço vazio da tela, em qualquer direção.
Opções de visualização
Você pode desativar várias opções de visualização automática, como: pré-visualização de links, rolagem sincronizada, clicando em com entrada Utilizando as opções de pré-visualização encontradas no canto inferior direito da tela de pré-visualização.
Mostrar pré-visualização do link
Esta opção ativa/desativa a pequena miniatura de pré-visualização que é exibida no canto inferior direito da tela de pré-visualização quando o cursor é posicionado sobre um link dentro da área visível.
Rolagem Sincronizada
Esta opção ativa ou desativa a rolagem sincronizada em todas as janelas de visualização.
Cliques sincronizados
Esta opção ativará ou desativará a sincronização de cliques em todas as janelas de visualização.
Entrada Sincronizada
Esta opção ativará ou desativará a entrada sincronizada em todas as janelas de visualização.
Opções de espaço de trabalho em tela
Existe também uma variedade de opções de espaço de trabalho que podem ser acessadas por clique direito em qualquer lugar no espaço vazio na tela de visualização.
Recarregar todas as janelas de visualização
Esta opção recarregará todas as janelas de visualização.
Centralizar o espaço de trabalho
Esta opção centralizará o workspace atual. O workspace é a área coberta por todas as viewports na tela de design.
Espaço de trabalho adequado
Esta opção ajustará o nível de zoom da tela de visualização para que todas as janelas de visualização caibam no quadro da janela de visualização.
Limpar cache de visualização
Esta opção limpará o cache de todas as janelas de visualização na tela de visualização e as recarregará.
Remover todas as janelas de visualização
Esta opção removerá todas as janelas de visualização na tela de visualização.
Calculadora de Peso de Página
O peso estimado da página atual é mostrado no canto superior direito canto da tela de visualização.
esta estimativa não conta para otimizações somente de exportação, como substituição de imagem WebP ou minificação de recursos.
A Calculadora de Peso de Página requer macOS Sonoma mínimo.
O peso da página pode afetar tanto a velocidade de carregamento quanto o SEO. Recomendamos mantê-lo em torno de 1MB para um desempenho ideal. Se uma página exceder 2.5MB, o rótulo fica âmbar para indicar que é mais pesado do que o recomendado. Páginas acima 5MB acionará um rótulo vermelho, avisando que a página é muito pesada e provavelmente carregará lentamente.
Reduzir o peso da página
Se o seu site contiver páginas com alto peso de página, consulte este guia para dicas sobre como reduzi-lo.
Pré-visualizar no navegador
Além da visualização no aplicativo, Blocs também permite que você visualize rapidamente seu site com qualquer um dos navegadores instalados no Mac. Para visualizar seu site em um navegador, basta clique direito o botão de visualização e selecione um navegador no menu pop-up.
Você pode ler mais sobre como visualizar em navegadores aqui..
Simulação de hora e data
Se o seu site usa Interações personalizadas que dependem de tempo or dados, você pode usar o modo de visualização simulação de hora e data recurso para testá-los. Isso permite que você visualize seu site em um horário ou data específica para ver como suas interações se comportam.
Para acessar os recursos de simulação de hora e data, clique em relógio ícone na parte inferior canto esquerdo da tela de visualização principal.
Se você está tendo problemas com o modo de visualização ou simplesmente não está funcionando, recomendamos a leitura deste guia de solução de problemas.