Índice
Hoje, desenvolver em HTML5 é um padrão, pois funciona em um navegador ou em dispositivos móveis por meio de aplicativos híbridos. Se o aplicativo ou site funciona no Chrome, Firefox ou outro navegador e está adaptado às resoluções de tela de dispositivos móveis, portanto, sem muitas alterações, também temos um aplicativo móvel para Android ou IOS.
Uma das ferramentas gratuitas mais importantes para programação é o Netbeans, já que permite desenvolver sites tradicionais ou aplicativos móveis nativos ou híbridos.
[color = # 006400] Download do plugin [/ color] [color = # 006400] Pacote HTML5 divertido [/ color]
PROLONGAR
Em seguida, devemos instalar o plugin, para isso vamos:
- Ferramentas
- Plugar
- Guia baixado
- Clicamos no botão Adicionar Plugin
- Procuramos o arquivo baixado que terá a extensão nbm.
PROLONGAR
Uma vez instalados, podemos usar os componentes da paleta de ferramentas HTML.
Criaremos um projeto HTML5 para ver seus recursos e componentes.
Vamos a:
- Arquivo
- Novo projeto
- Selecionamos HTML5 Application, para criar um projeto em branco ou vazio
Na próxima tela, ele nos pedirá para atribuir um nome ao nosso projeto e um diretório onde salvá-lo, a seguir clicaremos no botão Avançar. Aqui teremos várias opções, por exemplo: Não usar modelo (sem modelo de site)
Selecionar um modelo (Selecionar modelo) permite selecionar a partir de um modelo que temos em um diretório do computador ou especificar a localização de um arquivo .zip de um modelo em uma url. Você pode digitar a URL do arquivo .zip ou clicar em Procurar para especificar um local em seu sistema local. Quando você cria um projeto com base em um modelo de site, os arquivos, bibliotecas e estrutura do projeto são copiados para o diretório do projeto, por exemplo, um site de modelo gratuito.
PROLONGAR
Pegaremos o primeiro modelo cujo link para o arquivo zip é o seguinte:
http: //cdn.freehtml5… imcreatives.zip
Nós selecionamos a opção
Selecione o modelo e copie o link na caixa de texto Modelo. Em seguida, clicamos em Avançar.
PROLONGAR
Então, na próxima tela, podemos adicionar bibliotecas se precisarmos para o nosso desenvolvimento e o Netbeans irá anexá-las ao nosso projeto.
PROLONGAR
Podemos ver que ele reconheceu várias bibliotecas Javascript e também adicionamos o Jquery por conta própria.
Em seguida, clicamos em Concluir e o Netbeans se encarregará de descompactar o modelo e ordenar todos os arquivos do projeto.
PROLONGAR
Na barra de ferramentas, temos um seletor drop-down para testar o aplicativo em diferentes dispositivos como navegadores, dispositivos móveis, SmartTV e emuladores como Apache Cordoba para Android, para isso precisamos ter o Android SDK e o AVD Manager instalados. O AVD Manager fornece uma interface gráfica de usuário na qual você pode criar e gerenciar Android Virtual Devices (AVDS), que são exigidos pelo emulador Android.
PROLONGAR
Neste caso, selecionamos Firefox, clicamos na seta verde para executar o projeto e o resultado é o modelo funcionando localmente.
PROLONGAR
Outra forma de criar um projeto com modelos é poder usar os modelos do site www.initializr.com. Initializr é um gerador de modelo HTML5 para ajudá-lo a começar com um novo projeto baseado em HTML5. Ele gera um modelo personalizável com um código limpo e fácil de entender, também inclui todos os elementos e componentes básicos necessários.
PROLONGAR
No Netbeans, só precisamos selecionar o tipo de modelo que queremos usar e ele irá gerar automaticamente o código e a estrutura do projeto.
Por exemplo, selecionamos um modelo de tipo Boostrap para um novo projeto.
PROLONGAR
Clicamos em Avançar e novamente nos permitirá selecionar e adicionar mais bibliotecas Jquery se precisarmos delas e, em seguida, clicar em Concluir.
Veremos como foi criada a estrutura do projeto HTML5 e à direita veremos a paleta com os componentes do plugin previamente instalado.
PROLONGAR
Executamos o projeto como antes ou também pressionando a tecla F6. O resultado será um modelo simples para iniciar nosso projeto.
PROLONGAR
Em seguida, vamos testar o modelo
Responsivo de Initializr com os mesmos passos anteriores e veremos o resultado quando executado no navegador.
PROLONGAR
Se quisermos testar nosso aplicativo no navegador Google Chrome, devemos instalar um plugin que conecte o Netbeans ao Chome.
PROLONGAR
Devemos acessar nossa conta do Google com nosso Gmail para autorizar a instalação do plugin no Google Chrome, então podemos executar e visualizar o aplicativo sem problemas.
Uma das vantagens de usar o Google Chrome é que clicando com o botão direito na tela poderemos acessar o Inspetor de Elementos e teremos diversos utilitários para revisar nosso aplicativo, um deles simulando o aplicativo em diferentes dispositivos móveis e resoluções.
PROLONGAR
Acessando através deste ícone podemos simular nosso aplicativo em celulares e laptops como Ipad, Iphone, LG, Samsumg, Notebook.
Por exemplo, simulamos nosso aplicativo rodando em um Iphone 6 com uma conexão Wi-Fi de 30 Mbps
A seguir, vamos examinar os componentes da paleta HTML5. Vamos criar um projeto HTML5 em branco ou vazio. Adicionamos a biblioteca Jquery 2.0.3 e criamos a estrutura do projeto. A paleta de componentes, se não a tivermos na tela, é habilitada no menu do Windows> Paleta de ferramentas Ide
Em nosso arquivo index.html, dentro da seção de código
Arrastamos o componente Data List e o soltamos, veremos que um bloco de código será criado automaticamente como exemploPaís:
Se executarmos nosso aplicativo, veremos como funciona o drop-down, ele pode até filtrar sendo sensível enquanto escrevemos, ele irá filtrar automaticamente a lista que contém o drop-down
Vamos alterar o código gerado pelo Netbeans e extrair os dados selecionados da Lista de Dados, com Jquery referindo-se ao id de cada elemento
País: Ver País
Executamos o aplicativo e vemos que ele retorna o resultado com o nome do país selecionado:
Também podemos enviar uma DataList com um formulário e capturar os dados selecionados e salvá-los em um banco de dados
O componente obrigatório da paleta nos permite adicionar como Obrigatório um elemento dentro de um formulário, como o seguinte código com dois campos obrigatórios obrigatórios:
Nome: Email
Se executarmos este código, podemos ver que o formulário não poderá ser enviado se os dois campos não estiverem preenchidos.
ConclusãoVimos neste tutorial algumas ferramentas que nos ajudarão a desenvolver e testar aplicativos em HTML5 e Jquery com mais rapidez, mesmo sem ter programado quase nenhum código complexo. Em tutoriais futuros, continuaremos avançando no desenvolvimento de aplicativos HTML5 e Jquery, tanto tradicionais quanto móveis.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
