segunda-feira, 2 de novembro de 2020

DICAS 3169 -WINDEV MOBILE TUTORIAL 1 - 17-11-2020-10_00Hrs- INTRODUCAO



https://youtu.be/1YaL_k7r3LM



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

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

DICAS 3169 -WINDEV MOBILE TUTORIAL 1 - 17-11-2020-10_00Hrs- INTRODUCAO

ASSUNTOS


Introdução
Pontos preliminares
Visão geral do tutorial
Legenda dos símbolos neste tutorial
Como acessar a ajuda online?
Observação: Para abrir a ajuda local do produto :
Se você está familiarizado com WINDEV Mobile 24
Para que é utilizado o WINDEV Mobile?



DICAS 3169 -WINDEV MOBILE TUTORIAL 1 - 17-11-2020-10_00Hrs- INTRODUCAO 
DICAS 3172 -WINDEV MOBILE TUTORIAL 2 - 19-11-2020-10_00Hrs- Lição 1.1. Descubra WINDEV Mobile




PlayList WebDev tutorial Amarildo Webdev
Playlist Windev Tutorial Amarildo Windev
PlayList Windev Mobile 
Amarildo
Donwloads Windev
Windev
WxSolucoes
Matos Informatica
Repositorio Windev
Inscricao Evento Pcsof
Site forum Google 
Video sobre 3 Mil Videos Windev 
Video sobre Alfaserver servidor 





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


Introdução
Pontos preliminares
Cuidado : este é um tutorial. Aconselhamo-lo a verificar a ajuda online quando estiver a utilizar WINDEV Mobile.
O objetivo deste tutorial é ajudá-lo a descobrir o WINDEV Mobile, familiarizar-se com os editores e aprender os conceitos do WINDEV Mobile. Este tutorial não cobre todos os recursos do WINDEV Mobile.
Este tutorial é destinado a desenvolvedores que já estão familiarizados com WINDEV . Apresenta apenas os principais conceitos necessários para desenvolver uma aplicação para dispositivos móveis (Android, iPhone, iPad, Windows Mobile, etc.).
Se não estiver familiarizado com WINDEV, recomendamos que leia o tutorial WINDEV com antecedência.
Gaste pelo menos algumas horas para seguir este tutorial e aprender WINDEV Mobile: é um bom investimento!
Como WINDEV Mobile está em constante evolução, as capturas de tela no tutorial podem ser diferentes das janelas exibidas em seu produto.


ÍndicePróxima lição
Visão geral do tutorial
O tutorial foi projetado para ajudá-lo a desenvolver nas principais plataformas móveis:
  • Android.
  • iOS (iPhone / iPad).
  • Windows Mobile / CE.
Este tutorial está dividido nas seguintes seções:
Este tutorial foi elaborado para ensiná-lo progressivamente como usar WINDEV Mobile. Seguindo este tutorial:
  • você descobrirá os principais conceitos explicados informalmente; esses são os conceitos que você deve aprender e compreender.
  • também será solicitado que você execute operações que ilustram os conceitos que acabamos de explicar.
Conforme você avança no tutorial, se quiser dar uma olhada em um conceito ou se quiser obter mais detalhes sobre uma função de programação, consulte a ajuda online (acessível a partir dos editores).
O tamanho de uma aula não é necessariamente proporcional à sua relevância.
E não se esqueça de consultar os exemplos fornecidos com WINDEV Mobile: são muito instrutivos!
Legenda dos símbolos neste tutorial
Duração
Este símbolo indica a duração da aula. Observe que o tempo real pode variar de acordo com seu nível de experiência.
Exemplo
Um exemplo está disponível para complementar a lição. Os exemplos estão disponíveis na página inicial do WINDEV Mobile (Ctrl + <).
Dica
Este símbolo introduz uma "Dica": a leitura do texto associado é altamente recomendável.
Atenção
Este símbolo apresenta um "Aviso": a leitura do texto associado é essencial.
Observação
Este símbolo introduz uma "Nota": a leitura do texto associado é recomendada.
Como acessar a ajuda online?
A ajuda online do WINDEV Mobile permite-lhe obter informações detalhadas sobre as funções do 3700 WLanguage. A ajuda online também contém a ajuda sobre os editores e os controles, dicas ...
A ajuda online está disponível a qualquer momento no WINDEV Mobile:
  • No editor de código, uma ajuda específica está disponível para cada função através da tecla F1.
  • Cada caixa de diálogo exibida pelo WINDEV Mobile propõe um Socorrobotão que permite acessar a página de ajuda correspondente.
  • O menu de ajuda dos editores (opção "Ajuda" no painel "Home", no grupo "Ajuda online" do menu WINDEV Mobile) permite iniciar a ajuda online.
  • A ajuda pode ser exibida:
    • em um navegador da Internet, se você tiver acesso à Internet:
      Ajuda no navegador
    • em um "navegador de ajuda" específico:
      Ajuda no navegador de ajuda

Observação

Aconselhamos você a verificar a ajuda online na Internet em vez da ajuda online local. Na verdade, a ajuda online da Internet é atualizada regularmente.
A ajuda online do WINDEV, WEBDEV e WINDEV Mobile na Internet está disponível a partir de qualquer computador equipado com acesso à Internet, sem que o produto esteja necessariamente instalado.
Cada usuário da Web pode adicionar comentários sobre as páginas de documentação: notas pessoais, exemplos, links ...
Observação: Para abrir a ajuda local do produto :
  1. No painel "Home", no grupo "Ambiente", expanda "Opções" e selecione "Opções gerais do WINDEV Mobile".
  2. Na guia "Ajuda", selecione:
    • o modo de acesso ao banco de dados de ajuda.
      Opções gerais
    • o conteúdo de ajuda: ajuda comum para WINDEV, WEBDEV e WINDEV Mobile ou ajuda para o produto utilizado atualmente.
Se você está familiarizado com WINDEV Mobile 24
Se você está familiarizado com o WINDEV Mobile 24, seguir este tutorial não fará mal: é uma boa oportunidade para "rever" as funcionalidades do WINDEV Mobile!
Para que é utilizado o WINDEV Mobile?
WINDEV Mobile é um ambiente de desenvolvimento integrado DevOps. Ele permite que você desenvolva aplicativos em vários campos:
  • Gestão de estoques
  • Inventários, rastreamento de mercadorias
  • Ajuste e monitoramento de máquinas em uma linha de montagem
  • Recepção de pedidos para processamento rápido em outlet temporário (feiras, escolas, estande ...)
  • Formulários de cliente
  • Ajuda na tomada de decisões instantâneas em um telefone celular
  • Verificando a identidade dos visitantes de um evento: feira, apresentação de produtos ...
  • Médicos ou veterinários de plantão
  • Levando informações em um ponto de venda temporário: feira, votação de rua, estádio ...
  • Devolução de equipamentos pesados ​​alugados (ferramentas, veículos ...) para um estacionamento
  • ...
WINDEV Mobile é um ambiente de desenvolvimento que inclui todas as ferramentas necessárias para desenvolver uma aplicação.
Ao contrário de outras linguagens de programação, não há necessidade de encontrar e adicionar módulos para poder projetar, verificar e instalar um aplicativo.
O 5GL (5th Generation Language) do WINDEV Mobile, denominado WLanguage, irá surpreendê-lo pela sua simplicidade: algumas horas são tudo o que você precisa para pegar o jeito, uma semana normalmente é o suficiente para dominar totalmente seu potencial!
Não há mais problemas de programação, WLanguage está disponível em inglês e em francês!



Postado por às Nenhum comentário:
Marcadores: ,

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 Nenhum comentário:
Marcadores: , ,
Assinar: Postagens (Atom)

Teste

Teste
teste