sábado, 31 de outubro de 2020

DICAS 3166 -WEBDEV TUTORIAL 100 - 14-11-2020-10_00Hrs- Lesson 7.4. Ancoragem - Implementando a ancoragem - PARTE B - FINAL


https://youtu.be/gNt9SdjAoA0



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

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

DICAS 3166 -WEBDEV TUTORIAL 100 - 14-11-2020-10_00Hrs- Lesson 7.4. Ancoragem - Implementando a ancoragem - PARTE B - FINAL

ASSUNTOS


Aula TOP Demais sobre ancora..
se voce ainda nao entendeu assista a 
esse video .
Implementando a ancoragem
Entrar em zoning
Ancorar Cabecalho
Ancorar Menu
Ancorar Conteudo
Ancorar os controles do cabecalho,menu e conteudo
Explicando as ancoras
Explicando as posicoes dos controles 
Mostrando o repositorio windev
Proxima Licao: Lesson 8.1. Responsive Web Design



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


Implementando a ancoragem
Em primeiro lugar, vamos implementar a ancoragem de áreas e depois a ancoragem de controles nas áreas.
Queremos obter o seguinte comportamento ao ampliar o navegador:
  • A área do cabeçalho (amarelo) deve ser ampliada em largura.
  • A área do menu (verde) deve ser aumentada em altura.
  • A área de conteúdo (laranja) deve ser ampliada em largura e altura.
  • Para os controles, queremos que eles permaneçam centralizados em relação à sua área.
Agora vamos realizar todas as operações necessárias.
  • Para implementar a ancoragem de áreas:
    1. Exiba a página no modo de zoneamento: clique na guia "Zoneamento" na parte superior da página.
    2. Selecione a área amarela.
    3. Exiba o menu pop-up e selecione "Ancorar". A janela para gerenciamento de âncoras é exibida.
    4. A área deve ser ampliada em largura. Selecione:
      • Posição: O controle mantém sua posição.
      • Ancorar na largura: Amplie ou reduza como o navegador.
      • Âncora em altura: Altura fixa.
    5. Validar.
    6. Selecione a área verde, exiba o menu pop-up e selecione "Âncora".
    7. A área deve ser aumentada em altura. Selecione:
      • Posição: Sem âncora.
      • Âncora em largura: largura fixa.
      • Âncora em altura: amplie ou reduza como o navegador.
    8. Validar.
    9. Selecione a área laranja e exiba a janela para gerenciamento de âncoras. A área deve ser ampliada em largura e altura. Selecione:
      • Posição: Sem âncora.
      • Ancorar na largura: Amplie ou reduza como o navegador.
      • Âncora em altura: amplie ou reduza como o navegador.
    10. Validar.
  • Para implementar a ancoragem de controles:
    1. Exiba a página no modo Página: clique na guia "Página" na parte superior da página.
    2. Selecione "Cabeçalho".
    3. Exiba o menu pop-up e selecione "Ancorar".
    4. O controle deve ser centralizado na largura:
      • Posição: centrado horizontalmente.
      • Âncora em largura: largura fixa.
      • Âncora em altura: Altura fixa.
    5. Validar.
    6. Repita as mesmas operações para o controle "Menu" e para o controle "Conteúdo":
      • A legenda "Menu" deve ser centrada verticalmente.
      • A legenda "Conteúdo" deve ser centralizada.
  • Salve a página (Ctrl + S) e execute o teste de página ( Execute o teste de uma páginaentre os botões de acesso rápido).
    1. A página é exibida no navegador.
    2. Redimensione o navegador: as áreas se adaptam ao espaço disponível no navegador.
  • Feche o navegador.
Postado por às Nenhum comentário:
Marcadores: , , , ,

sexta-feira, 30 de outubro de 2020

DICAS 3165 -WEBDEV TUTORIAL 99 - 13-11-2020-10_00Hrs- Lesson 7.4. Ancoragem e zoneamento - PARTE A



https://youtu.be/5fi2lJ6Lj_8



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

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

DICAS 3165 -WEBDEV TUTORIAL 99 - 13-11-2020-10_00Hrs- Lesson 7.4. Ancoragem e zoneamento - PARTE A


ASSUNTOS

Ancoragem e zoneamento
Esta lição vai te ensinar os seguintes conceitos
O que é uma âncora?
Criando uma página no modo Zoning.
Implementando as âncoras.
Visão geral
Criando projeto Webdev_Ancora_Zoneamento_Amarildo
e sera colocado no repositorio windev 
adicionando o projeto no scm 
Criação de uma página no modo de zoneamento
Pagina Ancoras 
Indo Pagina Zoneamento
Dividindo pagina horizontalmente
Dividindo pagina verticalmente
e colocando cor em cada zona
colocanco controles staticos
e alterando para cabecalho,menu,conteudo


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 7.4. Ancoragem e zoneamento
Esta lição vai te ensinar os seguintes conceitos
  • O que é uma âncora?
  • Criando uma página no modo Zoning.
  • Implementando as âncoras.
Duração da aula

Tempo estimado: 30 min
Lição AnteriorÍndicePróxima lição
Visão geral
O WEBDEV permite que você gerencie dois tipos de âncoras:
  • A âncora para o conteúdo: Uma âncora para o conteúdo é usada para definir o comportamento do controle ou área ao modificar seu conteúdo. O controle manterá o mesmo tamanho? Ele vai se adaptar ao seu conteúdo?
  • A âncora do navegador: uma âncora do navegador é usada para definir o comportamento de um controle ou área ao redimensionar o navegador. O controle será ampliado? Ele vai se mover?
    A âncora do navegador é usada para definir o comportamento das páginas durante a exibição em resoluções específicas (tablets, telefones, ...).
As âncoras podem ser facilmente implementadas por meio de uma opção encontrada no menu pop-up de controles.
Vamos brincar com as âncoras agora com um exemplo. Nesta lição, usaremos apenas âncoras de navegador.
Vamos criar um projeto contendo uma página usada para implementar as âncoras do navegador e apresentar seus benefícios.
  • Para criar um projeto no WEBDEV:
    1. Inicie o WEBDEV se necessário.
    2. Exiba a página inicial do WEBDEV se necessário (Ctrl + <).
    3. Na página inicial, clique no botão "Criar um projeto" e selecione "Site". O assistente de criação de projeto é iniciado.
    4. Mantenha as opções padrão das diferentes etapas do assistente de criação de projetos, até chegar a "Descrição - Informações gerais".
    5. Digite o nome do projeto ("Âncoras") e valide as diferentes etapas do assistente com as opções padrão.

      Responda

      		Um exemplo corrigido pode ser acessado a qualquer momento para verificar a validade das operações realizadas.
      Para abrir este projeto corrigido, na página inicial, clique em "Tutorial" e selecione "Âncoras (Resposta)".
Criação de uma página no modo de zoneamento
  • Para criar uma página usada para implementar o gerenciamento de âncoras:
    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 valide o assistente.
    2. A janela para salvar a página é exibida.
    3. Digite "Âncoras" como título. O nome ("PAGE_Anchors") é proposto automaticamente.
    4. Validar.
Agora vamos dividir nossa página em 3 áreas:
  • Um cabeçalho (no topo em toda a largura).
  • Um menu à esquerda (em toda a altura).
  • Uma área de conteúdo no meio.
Cada área terá um comportamento específico ao redimensionar a página.
Para criar as áreas, usaremos o recurso de zoneamento.
  • Para criar uma primeira área de título no topo da página:
    1. No painel "Página", no grupo "Editar", expanda "Zoneamento" e selecione "Dividir horizontalmente".
    2. O cursor do mouse se transforma em uma caneta.
    3. Clique no topo da página e desenhe uma linha horizontal. A área é criada ao soltar o botão do mouse.
  • Para visualizar esta área, vamos associá-la a uma cor de fundo:
    1. Abra a janela de descrição da área: selecione "Descrição da área" no menu pop-up.
    2. Na guia "Estilo", selecione o elemento "Borda / Bckgrd" se necessário e selecione uma cor de fundo (dica de ferramenta amarela, por exemplo).
    3. Valide a janela de descrição da área.
  • Vamos realizar as mesmas operações para dividir a área inferior de nossa página:
    1. No painel "Página", no grupo "Editar", expanda "Zoneamento" e selecione "Dividir verticalmente".
    2. O cursor do mouse se transforma em uma caneta.
    3. Clique no meio da área inferior e desenhe uma linha vertical.
  • Para ver essas áreas, associe a cor verde à área inferior à esquerda e a cor laranja à área inferior à direita.
  • Agora vamos criar controles estáticos em cada área:
    1. Saia do modo de edição "Zoneamento" clicando na guia "Página" na parte superior da página (abaixo da faixa de opções).
    2. No painel "Criação", no grupo "Controles usuais", expanda "Texto" e selecione "Estático simples".
    3. Clique dentro da área amarela. O controle estático é criado automaticamente.
    4. Modifique a legenda (tecla de espaço no teclado): a legenda do controle é "Cabeçalho".
    5. Repita as operações 2 a 4 para criar:
      • um controle estático exibindo "Menu" na área verde.
      • um controle estático exibindo "Conteúdo" na área laranja.
  • Salve a página (Ctrl + S) e execute o teste de página ( Execute o teste de uma páginaentre os botões de acesso rápido).
    1. A página é exibida no navegador.
    2. Redimensione o navegador: a página permanece centralizada, mas as áreas não são redimensionadas.
      Vamos mudar este modo de operação para que as áreas se adaptem ao tamanho do navegador. Usaremos âncoras.

    Postado por às Nenhum comentário:
    Marcadores: , , ,
    Assinar: Postagens (Atom)

    Teste

    Teste
    teste