Comment embellir une application Web HTML5 dynamique à l’aide d’outils en ligne

Alors que j’entame le dernier article de cette série, j’espère que vous avez pu saisir l’importance du HTML 5 et du développement web adapté aux mobiles/réactifs.

Quelle que soit la distribution de bureau de votre choix, Netbeans est un IDE puissant qui, lorsqu’il est utilisé avec des compétences de base en ligne de commande Linux et les outils discutés dans la partie 3, peut vous aider à créer des applications exceptionnelles sans trop de tracas.

Cependant, veuillez noter que nous n’avons couvert que les bases de HTML 5 et du développement Web dans cette série et supposons que vous êtes quelque peu familier avec HTML, mais le WWW regorge d’excellentes ressources – certaines d’entre elles sont des logiciels libres – pour développer ce que nous avons partagé ici.

Dans ce dernier guide, nous allons parler de certains de ces outils et vous montrer comment les utiliser pour les ajouter à la page existante sur laquelle nous avons travaillé Embellir notre interface utilisateur (UI).

Embellissement de l’interface utilisateur du site Web

Font Awesome est une boîte à outils complète d’icônes/polices/css qui a le potentiel de s’intégrer de manière transparente à Bootstrap. Non seulement vous pouvez ajouter un grand nombre d’autres icônes à vos pages, mais vous pouvez également les redimensionner, projeter des ombres, changer de couleur et de nombreuses autres options à l’aide de CSS.

Cependant, comme le CSS n’entre pas dans le cadre de cette série, nous ne traiterons que des icônes de taille par défaut, mais nous vous encourageons en même temps à « creuser un peu plus » pour découvrir jusqu’où cet outil peut vous emmener.

Pour télécharger Font Awesome et l’incorporer dans votre projet, exécutez les commandes suivantes (ou n’hésitez pas à aller directement sur le Github du projet et à télécharger le fichier zip fontawesome via votre navigateur et à le décompresser à l’aide des outils GUI) :

$ wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.15.4/fontawesome-free-5.15.4-web.zip

(oui, le nom de domaine est en fait FortAwesome, avec un R, donc ce n’est pas une faute de frappe).

$ 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

Et ajoutez le fichier .css à la liste des références en haut de notre page, tout comme nous l’avons fait avec jQuery et Bootstrap plus tôt (n’oubliez pas que vous n’avez pas besoin de tout taper - il suffit de faire glisser le fichier de l’onglet Projets dans la fenêtre de code) :

Prenons l’exemple de la liste déroulante de notre barre de navigation :

Sympa, non ? Tout ce qu’il faut, c’est remplacer le contenu de la classe ul existante nommée menu déroulant en bas de index.php par :

<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>

Croyez-moi, investir votre temps dans l’apprentissage de l’utilisation de ces outils sera une expérience très enrichissante.

Où demander de l’aide

En tant qu’informaticien, vous devez bien connaître les nombreuses ressources d’aide disponibles sur Internet. Étant donné que le développement web ne fait pas exception, voici quelques ressources que nous sommes sûrs que vous trouverez utiles lors de la mise au point de vos applications.

Lorsque vous traitez du code Javascript (par exemple, lorsque vous travaillez avec jQuery comme nous l’avons fait dans la partie 2), vous voudrez utiliser JSHint, un vérificateur de code de qualité Javascript en ligne qui vise à aider les développeurs à détecter les erreurs et les problèmes potentiels. Lorsque ces pièges sont trouvés, JSHint indique le numéro de la ligne où ils se trouvent et vous donne des conseils pour les résoudre :

Cela a certainement l’air génial, mais même avec cet excellent outil automatisé, il y aura des moments où vous aurez besoin que quelqu’un d’autre jette un coup d’œil à votre code et vous dise comment le corriger ou l’améliorer, ce qui implique de le partager d’une manière ou d’une autre.

JSFiddle (un testeur de code Javascript/CSS/HTML en ligne) et Bootply (identique à JSFiddle mais spécialisé dans le code Bootstrap) vous permettent d’enregistrer des extraits de code (également appelés fiddles) et vous fournissent un lien pour les partager très facilement sur Internet (soit par e-mail avec vos amis, en utilisant vos profils de réseaux sociaux ou dans des forums).

Résumé

Dans cet article, nous vous avons fourni quelques conseils pour optimiser vos applications web et partagé quelques ressources qui vous seront utiles si vous êtes bloqué ou si vous souhaitez une autre paire d’yeux (et pas seulement une, mais plusieurs) pour jeter un coup d’œil à votre code afin de voir comment il peut être amélioré.

Il y a de fortes chances que vous connaissiez également d’autres ressources. Si c’est le cas, n’hésitez pas à les partager avec le reste de la communauté Tecmint en utilisant le formulaire de commentaire ci-dessous - et d’ailleurs, n’hésitez pas à nous faire savoir si vous avez des questions sur le contenu présenté dans cet article.

Nous espérons que cette série vous a donné un aperçu des vastes possibilités du développement Web adapté aux mobiles et réactif.