Um projeto de exemplo permitirá que você descubra os métodos que podem ser usados no WEBDEV para criar sites no modo Responsive Web Design. Isso permite que você execute as operações e compreenda melhor as ferramentas disponíveis.

Um exemplo simples foi preparado para você:
1. Inicie o WEBDEV 25 se necessário.
2. Exiba a página inicial do WEBDEV se necessário (Ctrl + <).
3. Abra o projeto "WW_Responsive". Para isso, na página inicial, clique em "Tutorial" e selecione "Web Design Responsivo (Exercício)".

Minha primeira página no modo Web Design Responsivo

Criação de uma página

No WEBDEV, o método para criar uma página no modo Responsivo é idêntico ao método para criar as outras páginas:

Crie uma nova página em branco.

Na janela do novo elemento, clique em "Página" e em "Página".
Observação: Para exibir a janela de criação de um novo elemento, clique entre os botões de acesso rápido.
O assistente de criação de página é iniciado.
Clique em "Em branco" e marque "Modo de Web Design Responsivo".

Valide o assistente.


	Observação	Todos os modelos de página incluídos no WEBDEV estão disponíveis no modo Responsivo. Basta marcar o "Modo de design da Web responsivo". Agora vamos criar uma página em branco para entender o princípio do Web Design Responsivo.

O WEBDEV exibe uma janela que permite escolher a largura principal usada para o Responsive Web Design. Neste exemplo, vamos criar uma página para o modo "Desktop".
Selecione "Desktop primeiro - edite no tamanho máximo" e valide.
A janela de salvamento da página é exibida. Digite o título da página: "Responsivo". O nome ("PAGE_Responsive") é proposto automaticamente.
Validar.
A página é criada no editor. Esta página é exibida no modo "Desktop".

Fluidez e Web Design Responsivo

Vamos ver como a página se comporta no editor WEBDEV criando um controle estático.

Para criar o controle estático:
1. No painel "Criação", no grupo "Controles usuais", clique em "ABC".
2. Em seguida, clique dentro da página para criar o controle.
3. Pressione F7 três vezes para exibir a borda dos controles.

O primeiro princípio do responsivo é a fluidez: quando o navegador é reduzido, os controles da página são reduzidos de acordo.

Para verificar essa fluidez no editor:
1. Use o cursor localizado na parte superior da página para reduzir o tamanho do navegador.
2. O controle estático que acabou de ser criado é reduzido de acordo.

Fatias de resolução

O cursor que acabou de ser utilizado pertence às fatias de resolução, segundo princípio do WEBDEV Responsive.

As fatias de resolução são usadas para materializar as resoluções de diferentes dispositivos.

Vamos estudar o modo de operação dessas fatias de resolução.
1. No projeto "WW_Responsive", abra a página PAGE_Adaptations.
2. Três fatias aparecem acima da página:
- Em azul, a fatia Desktop, para exibição em uma tela de desktop,
- Em verde, a fatia do Tablet correspondente à exibição em tablets,
- Em amarelo, a fatia Mobile para display em Smartphones.

As fatias de resolução permitem definir os layouts que serão usados para cada tipo de dispositivo.


	Observação	Você pode adicionar fatias de resolução personalizadas para gerenciar os diferentes dispositivos com mais eficiência. Para alterar a fatia de resolução, você pode usar o cursor ou clicar diretamente na fatia de resolução.


	Cuidado	O Web Design Responsivo com WEBDEV usa o conceito de "Desktop First" por padrão. Nesse modo, os controles são sempre criados na fatia da área de trabalho. Então, a interface deve ser adaptada para fatias menores.

A fatia Desktop corresponde à base da página, sem adaptação.

Para realizar adaptações nas outras fatias de resolução: basta realizar as modificações diretamente no editor.

Vamos estudar a página PAGE_Adaptations.

Esta página contém controles diferentes:
- um título no topo,
- um controle de mapa para indicar a localização do restaurante,
- um controle estático contendo o endereço do restaurante,
- um controle de imagem à direita para exibir um banner publicitário,
- um controle Looper na parte inferior para exibir as opiniões.

Execute o teste de página ( entre os botões de acesso rápido).
- A página aparece em teste como estava no editor no modo Desktop.
  Observação: Esta página usa um controle de mapa. Tanto no teste quanto na implantação, é necessário usar uma chave do Google. Caso contrário, ocorre um erro no controle do mapa. Consulte a ajuda online para obter esta chave.
  Se você possui uma chave, especifique-a na guia "Projeto" da janela de descrição do projeto.
- Reduza o tamanho do seu navegador para ver a mudança de fatia.

Alguns controles de página se movem ou desaparecem de acordo com as fatias de resolução exibidas.
Por exemplo, a imagem publicitária é mostrada na fatia da área de trabalho, mas se torna invisível nas fatias menores.

Como adaptar os controles às diferentes fatias?

Fazer adaptações quanto ao posicionamento e / ou tamanho é brincadeira de criança! As modificações são feitas diretamente no editor (como qualquer outra modificação). Na verdade, essas adaptações são substituições.


	Cuidado	Para que os tamanhos sejam respeitados ao reduzir o navegador, aconselhamos clicar na fatia de resolução para modificar antes de qualquer modificação. O tamanho padrão da fatia selecionada será tomado como referência e nenhum erro ocorrerá em tempo de execução.

É possível substituir várias propriedades para cada fatia de resolução. Eles podem ser identificados na janela de descrição do controle através do Substituir por fatia

picto.

Por exemplo, para o controle de imagem, um arquivo de imagem diferente pode ser usado de acordo com a fatia de resolução.

Para substituir o tamanho e a posição dos controles, você deve:
1. Selecione a fatia desejada.
2. Faça a modificação no editor.

Para ver a lista de substituições para uma fatia de resolução:
1. Selecione a fatia de resolução desejada (por exemplo, para a fatia do tablet, clique dentro da fatia do tablet).
2. Abra o menu popup da barra de fatias (clique com o botão direito) e selecione "Lista de substituições de fatias".
3. A lista de substituições realizadas é exibida:
  Observação: Esta janela permite excluir as substituições para restaurar o modo de operação padrão do controle.

Caso especial: Controle de visibilidade

A visibilidade de um controle é definida na guia "UI" da janela de descrição do controle.

No modo Responsivo, esta opção não pode ser substituída por fatia.

Para definir a visibilidade de um controle por fatia, você deve:
1. Selecione o controle.
2. Abra o menu popup do controle (clique com o botão direito).
3. Selecione "Web Design Responsivo .. Visibilidade por fatia".
4. Mantenha marcada apenas as fatias onde o controle deve permanecer visível.

Observação: Apenas a visibilidade definida na janela de descrição do controle pode ser modificada por programação. As substituições de visibilidade realizadas por fatia de resolução não podem ser modificadas por programação.


	Observação	Para ver os controles ocultos (por exemplo, para movê-los se eles se sobrepõem), vá ao painel "Exibir", grupo "Ajuda para edição" e marque "Controles ocultos". "

Páginas

segunda-feira, 2 de novembro de 2020

DICAS 3168 -WEBDEV TUTORIAL 102 - 16-11-2020-10_00Hrs- Web Design Responsivo e WEBDEV

https://youtu.be/9CDBP34aids

Esse Video Ao Vivo vai estrear as 10:00 do dia 16/11/2020-

Nenhum comentário:

Postar um comentário