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



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

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

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

 
ASSUNTOS

Dica : F12 Opcao Desenvolvedor 

Lição 8.2. Web Design Responsivo e WEBDEV
visão global
Minha primeira página no modo Web Design Responsivo
Criando a Pagina responsive
Fluidez e Web Design Responsivo
Criado controle e testado na pagina 
F12 Opcao Desenvolvedor 
Fatias de resolução
Como adaptar os controles às diferentes fatias?
Caso especial: Controle de visibilidade
Monstrando onde mostra os nao visiveis 

DICAS 3067 -WEBDEV TUTORIAL 1-Licao 1.1-14-09-2020 11hrs-DESCUBRA WEBDEV
DICAS 3068 -WEBDEV TUTORIAL 1-Licao 1.2-14-09-2020 15hrs-Web development and WEBDEV - PARTE A
DICAS 3069 -WEBDEV TUTORIAL 3-Licao 1.2-14-09-2020 16hrs-Web development and WEBDEV - PARTE B








PlayList WebDev tutorial Amarildo Webdev
Playlist Windev Tutorial Amarildo Windev
Playlist windev Franca PcSoft
Amarildo
Windev
WxSolucoes
Matos Informatica
Repositorio Windev
Site forum Google 
Video sobre 3 Mil Videos Windev 
PlayList Pedrosao
Video sobre Alfaserver servidor 
Ultimo Video manipulacao arquivos





ErpMatos - TgsSistemas
skype:amarildo.matos.informatica
email: amarildo.matos@gmail.com
whats: 51984197742
Youtube: Amarildo Matos
http://www.amarildomatos.com.br
https://groups.google.com/forum/#!forum/amarildowindev

www.windev.com
https://www.pcsoft.fr/webinaires.htm?p=forumpcs
https://forum.pcsoft.fr/fr-FR/pcsoft.br.windev/page/1.awp
https://www.windev.com/windev/WD-Express.htm
https://www.windev.com/windevmobile/WM-Express.htm
http://windevdesenvolvimento.blogspot.com.br/2017/07/menu-blog.html


Lição 8.2. Web Design Responsivo e WEBDEV
Esta lição vai te ensinar os seguintes conceitos
  • Ferramentas WEBDEV disponíveis.
  • Grade de posicionamento.
  • Fatias de resolução.
  • Substituições.
Duração da aula

Tempo estimado: 30 min
Lição AnteriorÍndicePróxima lição
visão global
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:
    1. 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 Crie um elementoentre 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".
        Assistente de criação de página
      • 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.
    2. 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 o modo de edição RWD
    3. Selecione "Desktop primeiro - edite no tamanho máximo" e valide.
    4. A janela de salvamento da página é exibida. Digite o título da página: "Responsivo". O nome ("PAGE_Responsive") é proposto automaticamente.
    5. Validar.
    6. A página é criada no editor. Esta página é exibida no modo "Desktop".
      Página RWD no editor de página

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.
      Criação de um controle estático
    3. Pressione F7 três vezes para exibir a borda dos controles.
      Exibindo as bordas 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.
      Cursor
    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:
      Fatias padrão
    • 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.
    Página no editor
  • 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 ( Execute o teste de uma páginaentre 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.
    Teste no modo tablet

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 fatiapicto.
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:
      Substituições de uma fatia
      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".
      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".
"
Postado por às
Marcadores: , ,

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)

Teste

Teste
teste