Comment créer un projet HTML5 de base dans Ubuntu à l'aide de Netbeans
Dans cette série de 4 articles sur le développement Web mobile, nous vous guiderons dans la configuration de Netbeans en tant qu'IDE (également connu sous le nom d'Environnement de développement intégré). dans Ubuntu pour commencer à développer des applications Web HTML5 réactives et adaptées aux mobiles.
Voici la série de quatre articles sur le développement Web mobile HTML5 :
Un environnement de travail bien peaufiné (comme nous le verrons plus tard), la saisie semi-automatique pour les langues prises en charge et son intégration transparente avec les navigateurs Web sont, à notre avis, quelques-unes des fonctionnalités les plus distinctives de Netbeans.
Rappelons également que la spécification HTML 5 a apporté de nombreux avantages aux développeurs – pour ne citer que quelques exemples : code plus propre grâce à de nombreux nouveaux éléments), capacités de lecture vidéo et audio intégrées (qui remplacent le besoin pour Flash), compatibilité croisée avec les principaux navigateurs et optimisation pour les appareils mobiles.
Bien que nous testions dans un premier temps nos applications sur notre machine de développement locale, nous finirons par déplacer notre site Web vers un serveur LAMP et le transformer en un outil dynamique.
En cours de route, nous utiliserons jQuery (une bibliothèque Javascript multiplateforme bien connue qui simplifie grandement les scripts côté client) et Bootstrap (le populaire HTML, CSS et JavaScript pour développer des sites Web réactifs). Vous verrez dans les articles à venir à quel point il est facile de configurer une application adaptée aux mobiles à l'aide de ces outils HTML 5.
Après avoir parcouru cette brève série, vous serez en mesure de :
utiliser les outils décrits ici pour créer des applications dynamiques HTML5 de base, et
Continuez à acquérir des compétences plus avancées en matière de développement Web.
Cependant, veuillez noter que même si nous utiliserons Ubuntu pour cette série, les instructions et procédures sont également parfaitement valables pour d'autres distributions de bureau (Linux Mint, Debian, CentOS, Fedora, etc.).
Pour cela, nous avons choisi d'installer les logiciels nécessaires (Netbeans et le Java JDK, comme vous le verrez dans une minute) à l'aide d'une archive tar générique (. tar.gz) comme méthode d'installation.
Cela étant dit, commençons par la Partie 1.
Installer Java JDK dans Ubuntu
Ce didacticiel suppose que vous disposez déjà d’une installation de bureau Ubuntu. Si ce n’est pas le cas, veuillez vous référer à l’article Ubuntu Desktop Installation, rédigé par notre collègue Matei Cezar avant de continuer.
Étant donné que la version Netbeans disponible en téléchargement depuis les référentiels officiels Ubuntu est un peu obsolète, nous allons télécharger le package depuis le site Web d'Oracle pour obtenir une version plus récente.
Pour ce faire, vous avez deux choix :
Choix 1 : Téléchargez le package comprenant Netbeans + JDK, ou
Choix 2 : installez les deux utilitaires séparément.
Dans cet article, nous choisirons #2 car cela signifie non seulement un téléchargement un peu plus petit (car nous n'installerons Netbeans qu'avec le support de HTML5 et PHP), mais cela nous permettra également d'avoir un fichier autonome. Installateur JDK si nous en avons besoin pour un autre ensemble qui ne nécessite pas Netbeans ni n'implique de développement Web (principalement lié à d'autres produits Oracle).
Pour télécharger JDK, accédez au site Oracle Technology Network et accédez à la section Java → Java SE → Téléchargements. .
Lorsque vous cliquez sur l'image mise en évidence ci-dessous, il vous sera demandé d'accepter le contrat de licence et vous pourrez alors télécharger la version JDK nécessaire (qui dans notre cas est l'archive tar de 64 -bit machines). Lorsque votre navigateur Web vous y invite, choisissez d'enregistrer le fichier au lieu de l'ouvrir.
Une fois le téléchargement terminé, accédez à ~/Downloads et extrayez l'archive tar dans /usr/local/bin :
sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
Installer Netbeans dans Ubuntu
Pour installer Netbeans avec la prise en charge de HTML5 et PHP, accédez à https://netbeans.org/downloads/ et cliquez sur Télécharger< ou utilisez la commande wget suivante pour télécharger comme indiqué.
À partir de là, suivez les instructions à l'écran pour terminer l'installation en laissant les valeurs par défaut :
et attendez la fin de l'installation.
Création d'un projet HTML5 de base dans Ubuntu
Pour ouvrir Netbeans, sélectionnez-le dans le menu Dash :
Pour créer un nouveau projet HTML5 à l'aide du modèle de base fourni par Netbeans, accédez à Fichier → Nouveau projet → HTML5 → Application HTML5. Choisissez un nom descriptif pour votre projet et enfin cliquez sur Terminer (n'incluez pas de modèle de site externe ni de bibliothèques javascript pour le moment) :
Nous serons ensuite redirigés vers l'interface utilisateur Netbeans, où nous pourrons ajouter des dossiers et des fichiers à notre racine de site selon nos besoins. Dans notre cas, cela signifiera ajouter des dossiers pour les polices, les images, les fichiers Javascript (scripts) et les feuilles de style en cascade (styles) pour nous aider à mieux organiser notre contenu dans les articles à venir.
Pour ajouter un dossier ou un fichier, faites un clic droit sur Racine du site puis choisissez Nouveau → Dossier ou HTML déposer.
Introduisons maintenant quelques nouveaux éléments HTML5 et modifions le corps de la page :
et définissent respectivement un en-tête ou un pied de page pour un document ou une section.
représente le contenu principal d'un document, où le sujet central ou la fonctionnalité est affiché.
est utilisé pour du matériel autonome, tel que des images ou du code, pour ne citer que quelques exemples.
affiche une légende pour un élément , et doit donc être placée dans les balises .
est réservé aux contenus liés d'une manière ou d'une autre au contenu de la page, généralement lié à celle-ci. Il peut être placé sous forme de barre latérale avec l'aide de CSS (plus d'informations à ce sujet dans les prochains articles).
Copiez maintenant l'extrait de code suivant dans votre fichier index.html dans Netbeans.
ASTUCE : Ne vous contentez pas de copier/coller depuis cette fenêtre vers votre environnement de développement, mais prenez le temps de saisir chaque balise afin de visualiser les fonctionnalités d'auto-complétion de Netbeans, qui nous sera utile plus tard.
!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>
Vous pouvez afficher la page en sélectionnant un navigateur Web (de préférence Firefox, comme dans l'image ci-dessous) et en cliquant sur l'icône Lecture :
Vous pouvez désormais visualiser la progression de votre développement jusqu'à présent :
Résumé
Dans cet article, nous avons passé en revue certains des avantages de l'écriture de vos applications Web à l'aide de HTML 5 et mis en place un environnement de développement avec Netbeans dans Ubuntu. .
Nous avons appris que cette spécification du langage introduisait de nouveaux éléments et nous offrait ainsi la possibilité d'écrire du code plus propre et de remplacer des composants gourmands en ressources tels que les animations Flash par des contrôles intégrés.
Dans les prochains articles, nous présenterons jQuery et Bootstrap afin que vous puissiez non seulement utiliser ces contrôles et voir vos pages se charger plus rapidement, mais également les rendre adaptées aux mobiles.
En attendant, n'hésitez pas à expérimenter d'autres contrôles dans Netbeans et faites-nous savoir si vous avez des questions ou des commentaires en utilisant le formulaire ci-dessous.
