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

Alors que je commence le dernier article de cette série, j'espère que vous avez pu saisir l'importance de HTML 5 et du développement Web adapté aux mobiles et réactif.

Quelle que soit la distribution de bureau de votre choix, Netbeans est un IDE puissant et, lorsqu'il est utilisé avec des compétences de base en ligne de commande Linux et les outils abordés dans la partie 3, il 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 avons supposé que vous êtes quelque peu familier avec HTML, mais le WWW regorge d'excellentes ressources - certaines d'entre elles sont FOSS – pour développer ce que nous avons partagé ici.

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

Embellir 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 de nombreuses autres icônes à vos pages, mais vous pouvez également les redimensionner, projeter des ombres, changer de couleur et bien d'autres options à l'aide de CSS.

Cependant, comme le CSS sort du cadre de cette série, nous ne traiterons que des icônes de taille par défaut tout en vous encourageant à « creuser un peu plus profondément » pour découvrir jusqu'où cet outil peut vous emmener.

Pour télécharger Font Awesome et l'intégrer dans votre projet, exécutez les commandes suivantes (ou n'hésitez pas à accéder directement au 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, ce n'est donc 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 (rappelez-vous que vous n'êtes pas obligé de tout saisir : faites simplement glisser le fichier depuis l'onglet Projets vers la fenêtre de code) :

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

Bonne droite? Il suffit de remplacer le contenu de la ul class existante nommée dropdown-menu 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 ces outils sera une expérience très enrichissante.

Où demander de l'aide

En tant que informaticien, vous devez bien connaître les nombreuses ressources d’aide mises à disposition par Internet. Puisque le développement Web ne fait pas exception, voici quelques ressources qui, nous en sommes sûrs, vous seront utiles lors du réglage 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 souhaiterez utiliser JSHint, un vérificateur de code de qualité Javascript en ligne qui vise pour aider les développeurs à détecter les erreurs et les problèmes potentiels. Lorsque ces pièges sont détectés, JSHint indique le numéro de ligne où ils se trouvent et vous donne des astuces pour les corriger :

Cela a sûrement 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 examine 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 (aussi appelés violons) et vous fournissent un lien pour les partager très facilement sur Internet (soit par email avec vos amis, via vos profils de réseaux sociaux, soit sur des forums).

Résumé

Dans cet article, nous vous avons fourni quelques conseils pour affiner vos applications Web et partagé quelques ressources qui vous seront utiles si vous êtes bloqué ou si vous souhaitez qu'une autre paire d'yeux (et pas seulement un, mais plusieurs) y jette un œil. votre code pour voir comment il peut être amélioré.

Il y a de fortes chances que vous connaissiez également d’autres ressources. Si tel est le cas, n'hésitez pas à les partager avec le reste de la communauté Tecmint en utilisant le formulaire de commentaires 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 réactif et adapté aux mobiles.