Como criar um projeto HTML5 básico no Ubuntu usando Netbeans
Nesta série de 4 artigos sobre desenvolvimento web móvel, orientaremos você na configuração do Netbeans como um IDE (também conhecido como ambiente de desenvolvimento integrado) no Ubuntu para começar a desenvolver aplicativos Web HTML5 responsivos e compatíveis com dispositivos móveis.
A seguir está a série de 4 artigos sobre Desenvolvimento de Web Móvel HTML5:
Um ambiente de trabalho bem polido (como veremos mais tarde), o preenchimento automático para idiomas suportados e sua integração perfeita com navegadores da web são, em nossa opinião, alguns dos recursos mais distintivos do Netbeans.
Lembremos também que a especificação HTML 5 trouxe muitas vantagens para os desenvolvedores – para citar alguns exemplos: código mais limpo graças a muitos elementos novos), recursos integrados de reprodução de vídeo e áudio (que substitui a necessidade para Flash), compatibilidade cruzada com os principais navegadores e otimização para dispositivos móveis.
Embora inicialmente testemos nossos aplicativos em nossa máquina de desenvolvimento local, eventualmente moveremos nosso site para um servidor LAMP e o transformaremos em uma ferramenta dinâmica.
Ao longo do caminho, usaremos jQuery (uma conhecida biblioteca Javascript multiplataforma que simplifica muito os scripts do lado do cliente) e Bootstrap (o popular HTML, Estrutura CSS e JavaScript para desenvolvimento de sites responsivos). Você verá nos próximos artigos como é fácil configurar um aplicativo compatível com dispositivos móveis usando essas ferramentas HTML 5.
Depois de passar por esta breve série, você será capaz de:
usar as ferramentas descritas aqui para criar aplicativos dinâmicos HTML5 básicos e
continue aprendendo habilidades mais avançadas de desenvolvimento web.
No entanto, observe que embora usaremos Ubuntu para esta série, as instruções e procedimentos também são perfeitamente válidos para outras distribuições de desktop (Linux Mint, Debian, CentOS, Fedora, você escolhe).
Para isso, optamos por instalar o software necessário (Netbeans e o Java JDK, como você verá em um minuto) usando um tarball genérico (. tar.gz) como método de instalação.
Dito isto – vamos começar com a Parte 1.
Instalando Java JDK no Ubuntu
Este tutorial pressupõe que você já tenha uma instalação de desktop Ubuntu instalada. Caso contrário, consulte o artigo Instalação do Ubuntu Desktop, escrito por nosso colega Matei Cezar antes de prosseguir.
Como a versão do Netbeans que está disponível para download nos repositórios oficiais do Ubuntu está um pouco desatualizada, iremos baixar o pacote do site da Oracle para obter uma versão mais recente.
Para fazer isso, você tem duas opções:
Escolha 1: Baixe o pacote que inclui Netbeans + JDK ou
Escolha 2: Instale os dois utilitários separadamente.
Neste artigo vamos escolher #2 porque isso não significa apenas um download um pouco menor (já que instalaremos apenas o Netbeans com suporte para HTML5 e PHP), mas também nos permitirá ter um download independente Instalador JDK caso precisemos dele para outro conjunto que não requer Netbeans nem envolve desenvolvimento web (principalmente relacionado a outros produtos Oracle).
Para fazer download do JDK, acesse o site da Oracle Technology Network e navegue até a seção Java → Java SE → Downloads .
Ao clicar na imagem destacada abaixo, você será solicitado a aceitar o contrato de licença e então poderá baixar a versão necessária do JDK (que no nosso caso é o tarball para 64 -bit máquinas). Quando solicitado pelo seu navegador, opte por salvar o arquivo em vez de abri-lo.
Quando o download for concluído, vá para ~/Downloads e extraia o tarball para /usr/local/bin:
sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
Instalando o Netbeans no Ubuntu
Para instalar o Netbeans com suporte para HTML5 e PHP, acesse https://netbeans.org/downloads/ e clique em Baixar< ou use o seguinte comando wget para fazer download conforme mostrado.
A partir daí, siga as instruções na tela para concluir a instalação deixando os valores padrão:
e aguarde a conclusão da instalação.
Criando um projeto HTML5 básico no Ubuntu
Para abrir o Netbeans, selecione-o no menu Dash:
Para criar um novo projeto HTML5 usando o modelo básico fornecido pelo Netbeans, vá em Arquivo → Novo projeto → HTML5 → Aplicativo HTML5. Escolha um nome descritivo para o seu projeto e por fim clique em Concluir (não inclua um modelo de site externo ou bibliotecas javascript neste momento):
Seremos então levados para a UI do Netbeans, onde poderemos adicionar pastas e arquivos à nossa raiz do site conforme necessário. No nosso caso, isso significará adicionar pastas para fontes, imagens, arquivos Javascript (scripts) e folhas de estilo em cascata (estilos) para nos ajudar a organizar melhor nosso conteúdo nos próximos artigos.
Para adicionar uma pasta ou arquivo, clique com o botão direito em Raiz do site e escolha Novo → Pasta ou HTML arquivo.
Agora vamos apresentar alguns novos elementos HTML5 e modificar o corpo da página:
e definem um cabeçalho ou rodapé, respectivamente, para um documento ou seção.
representa o conteúdo principal de um documento, onde é mostrado o tópico ou funcionalidade central.
é usado para material independente, como imagens ou código, para citar alguns exemplos.
mostra uma legenda para um elemento e, portanto, deve ser colocado dentro das tags .
é reservado para conteúdos relacionados de alguma forma ao conteúdo da página, geralmente relacionados a ela. Ele pode ser colocado como barra lateral com a ajuda do CSS (mais sobre isso nos próximos artigos).
Agora copie o seguinte trecho de código para o arquivo index.html no Netbeans.
DICA: Não apenas copie e cole desta janela em seu ambiente de desenvolvimento, mas reserve um tempo para digitar cada tag para visualizar os recursos de preenchimento automático do Netbeans, que será útil mais tarde.
!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header style="background-color: #6699CC">THIS IS A HEADER</header>
<main>
<article>
<p>This is some sample text.</p>
<p>Another line of sample text for this HTML 5 article</p>
<aside>
<figure>
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML 5 logo" />
<figcaption>Figure 1: The HTML 5 logo</figcaption>
</figure>
<h2>Web development basics series at linux-console.net</h2>
<h3><a href="http://dev.w3.org/html5/html-author/">This is HTML 5!</a></h3>
<p>Some text here</p>
</aside>
</article>
</main>
<footer style="background-color: #CC6699">THIS IS A FOOTER</footer>
</body>
</html>
Você pode visualizar a página selecionando um navegador da web (de preferência Firefox, como na imagem abaixo) e clicando no ícone Reproduzir:
Agora você pode ver o progresso do seu desenvolvimento até agora:
Resumo
Neste artigo, revisamos algumas das vantagens de escrever suas aplicações web usando HTML 5 e configurar um ambiente de desenvolvimento com Netbeans no Ubuntu .
Aprendemos que essa especificação da linguagem introduziu novos elementos e, portanto, nos proporcionou a possibilidade de escrever código mais limpo e substituir componentes que consomem muitos recursos, como filmes em Flash, por controles integrados.
Nos próximos artigos, apresentaremos jQuery e Bootstrap para que você possa não apenas usar esses controles e ver suas páginas carregarem mais rápido, mas também torná-las compatíveis com dispositivos móveis.
Enquanto isso, sinta-se à vontade para experimentar outros controles no Netbeans e informe-nos se tiver alguma dúvida ou comentário usando o formulário abaixo.
