Como embelezar um aplicativo da Web HTML5 dinâmico usando ferramentas online
Ao iniciar o último artigo desta série, espero que você tenha conseguido compreender a importância do HTML 5 e do desenvolvimento web responsivo e compatível com dispositivos móveis.
Independentemente da distribuição de desktop de sua escolha, o Netbeans é um IDE poderoso e, quando usado em conjunto com habilidades básicas de linha de comando do Linux e as ferramentas discutidas na Parte 3, pode ajudá-lo a criar aplicativos excelentes sem muitos problemas.
No entanto, observe que cobrimos apenas os conceitos básicos de HTML 5 e desenvolvimento web nesta série e presumimos que você esteja familiarizado com HTML, mas a WWW está cheia de ótimos recursos – alguns deles são FOSS – para expandir o que compartilhamos aqui.
Neste último guia, falaremos sobre algumas dessas ferramentas e mostraremos como usá-las para adicionar à página existente em que estamos trabalhando. Embelezando nossa UI (interface de usuário).
Embelezando a interface do usuário do site
Font Awesome é um kit de ferramentas completo de ícones/fontes/css que tem o potencial de integração perfeita com o Bootstrap. Você não apenas pode adicionar muitos outros ícones às suas páginas, mas também redimensioná-las, projetar sombras, alterar cores e muitas outras opções usando CSS.
No entanto, como lidar com CSS está fora do escopo desta série, trataremos apenas dos ícones de tamanho padrão, mas encorajamos você, ao mesmo tempo, a “cavar um pouco mais fundo” para descobrir até que ponto esta ferramenta pode levar você.
Para baixar Font Awesome e incorporá-lo ao seu projeto, execute os seguintes comandos (ou sinta-se à vontade para ir diretamente ao Github do projeto e baixar o arquivo zip fontawesome através do seu navegador e descompactá-lo usando ferramentas GUI):
wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.15.4/fontawesome-free-5.15.4-web.zip
(sim, o nome de domínio é na verdade FortAwesome, com um R, então isso não é um erro de digitação).
unzip fontawesome-free-5.15.4-web.zip
cp fontawesome-free-5.15.4-web/css/fontawesome.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles
cp fontawesome-free-5.15.4-web/webfonts/* /home/ubuntu/NetBeansProjects/TecmintTest/public_html/fonts
E adicione o arquivo .css à lista de referências no topo da nossa página, assim como fizemos com jQuery e Bootstrap anteriormente (lembre-se disso você não precisa digitar tudo – basta arrastar o arquivo da aba Projetos para a janela de código):
Vejamos a lista suspensa em nossa barra de navegação, por exemplo:
Legal, certo? Basta substituir o conteúdo da classe ul chamada menu suspenso na parte inferior de index.php por:
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
Acredite: investir seu tempo aprendendo como usar essas ferramentas será uma experiência muito gratificante.
Onde pedir ajuda
Como pessoa de TI, você deve estar bem familiarizado com os muitos recursos de ajuda que a Internet disponibiliza. Como desenvolver web não é uma exceção, aqui estão alguns recursos que temos certeza que você achará úteis ao ajustar seus aplicativos.
Ao lidar com código Javascript (por exemplo, ao trabalhar com jQuery como fizemos na Parte 2), você desejará usar o JSHint, um verificador de código de qualidade Javascript online que visa em ajudar os desenvolvedores a detectar erros e problemas potenciais. Quando essas armadilhas são encontradas, JSHint indica o número da linha onde elas estão localizadas e dá dicas para corrigi-las:
Isso certamente parece ótimo, mas mesmo com esta excelente ferramenta automatizada, haverá momentos em que você precisará de outra pessoa para dar uma olhada no seu código e lhe dizer como corrigi-lo ou melhorá-lo, o que implica compartilhá-lo de alguma forma.
JSFiddle (um testador de código Javascript/CSS/HTML online) e Bootply (o mesmo que JSFiddle, mas especializado em código Bootstrap) permitem salvar trechos de código (também conhecidos como fiddles) e fornecem um link para compartilhá-los facilmente pela Internet (seja por e-mail com seus amigos, usando seus perfis de redes sociais ou em fóruns).
Resumo
Neste artigo, fornecemos algumas dicas para ajustar seus aplicativos da web e compartilhamos alguns recursos que serão úteis se você ficar preso ou quiser que outro par de olhos (e não apenas um, mas muitos) dê uma olhada. seu código para ver como ele pode ser melhorado.
É provável que você também conheça outros recursos. Se sim, sinta-se à vontade para compartilhá-los com o resto da comunidade Tecmint usando o formulário de comentários abaixo – e a propósito, não hesite em nos informar se tiver alguma dúvida sobre o conteúdo apresentado neste artigo.
Esperamos que esta série tenha lhe dado um vislumbre das vastas possibilidades de desenvolvimento web responsivo e compatível com dispositivos móveis.