Recherche de site Web

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 tout au long de 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 adaptées aux mobiles et réactives.

Voici la série de 4 articles sur le développement Web mobile HTML5 :

Un environnement de travail bien rodé (comme nous le verrons plus tard), l’autocomplétion pour les langues prises en charge et son intégration transparente avec les navigateurs Web sont, à notre avis, quelques-unes des caractéristiques les plus distinctives de Netbeans.

N’oublions pas non plus que la spécification HTML 5 a apporté de nombreux avantages aux développeurs, pour ne citer que quelques exemples : un code plus propre grâce à de nombreux nouveaux éléments, des capacités de lecture vidéo et audio intégrées (qui remplacent le besoin de Flash), une compatibilité croisée avec les principaux navigateurs et une optimisation pour les appareils mobiles.

Bien que nous testions initialement nos applications sur notre machine de développement locale, nous déplacerons éventuellement notre site Web vers un serveur LAMP et le transformerons en un outil dynamique.

En cours de route, nous utiliserons jQuery (une bibliothèque Javascript multiplateforme bien connue qui simplifie considérablement les scripts côté client) et Bootstrap (le cadre populaire HTML, CSS et JavaScript pour développer des sites Web réactifs). Vous verrez à 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 :

  1. utiliser les outils décrits dans le présent document pour créer des applications dynamiques HTML5 de base, et
  2. Poursuivez votre apprentissage de compétences plus avancées en développement Web.

Cependant, veuillez noter que même si nous utiliserons Ubuntu pour cette série, les instructions et les procédures sont parfaitement valables pour d’autres distributions de bureau également (Linux Mint, Debian, CentOS, Fedora, etc.).

À cette fin, nous avons choisi d’installer les logiciels nécessaires (Netbeans et le JDK Java, comme vous le verrez dans une minute) en utilisant une archive tar générique (.tar.gz) comme méthode d’installation.

Cela étant dit, commençons par la partie 1.

Installation de Java JDK dans Ubuntu

Ce tutoriel suppose que vous avez déjà une installation de bureau Ubuntu en place. Si ce n’est pas le cas, veuillez vous référer à l’article d’installation d’Ubuntu Desktop, écrit par notre collègue Matei Cezar avant de continuer.

Étant donné que la version Netbeans qui est disponible en téléchargement à partir des dépôts officiels d’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 l’offre groupée qui inclut 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 que Netbeans avec prise en charge de HTML5 et PHP), mais nous permettra également d’avoir un installateur JDK autonome si nous en avons besoin pour un autre ensemble qui ne nécessite pas de Netbeans ni n’implique de développement web (principalement lié à d’autres produits Oracle).

Pour télécharger JDK, rendez-vous sur le 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 ensuite télécharger la version JDK nécessaire (qui dans notre cas est l’archive tar pour les machines 64 bits). Lorsque votre navigateur Web vous y invite, choisissez d’enregistrer le fichier au lieu de l’ouvrir.

Une fois le téléchargement terminé, allez dans ~/Downloads et extrayez l’archive tar dans /usr/local/bin :

$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin

Installation de Netbeans dans Ubuntu

Pour installer Netbeans avec 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é.

$ cd ~/Downloadswget https://dlcdn.apache.org/netbeans/netbeans/12.5/Apache-NetBeans-12.5-bin-linux-x64.shchmod 755 Apache-NetBeans-12.5-bin-linux-x64.shsudo ./Apache-NetBeans-12.5-bin-linux-x64.sh --javahome /usr/local/bin/jdk-17.0.1

À 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 → Application HTML5 → HTML5. Choisissez un nom descriptif pour votre projet et enfin cliquez sur Terminer (n’incluez pas de modèle de site externe ou de bibliothèques javascript pour le moment) :

Nous serons ensuite redirigés vers l’interface utilisateur de Netbeans, où nous pourrons ajouter des dossiers et des fichiers à la racine de notre site si nécessaire. Dans notre cas, cela signifie 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, cliquez avec le bouton droit de la souris sur Racine du site, puis choisissez Nouveau dossier → ou Fichier HTML.

Introduisons maintenant de nouveaux éléments HTML5 et modifions le corps de la page :

  1. <en-tête> et <pied de page> définissent respectivement un en-tête ou un pied de page pour un document ou une section.
  2. < principal > représente le contenu principal d’un document, où le sujet ou la fonctionnalité centrale est affiché.
  3. <figure> est utilisé pour des matériaux autonomes, tels que des images ou du code, pour ne citer que quelques exemples.
  4. <figcaption> affiche une légende pour un élément <figure> et doit donc être placée dans les balises <figure>.
  5. <apart> est réservé aux contenus liés d’une manière ou d’une autre au contenu de la page, généralement liés à celle-ci. Il peut être placé en tant que 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 et coller de cette fenêtre dans votre environnement de développement, mais prenez le temps de taper chaque balise afin de visualiser les fonctionnalités d’auto-complétion de Netbeans, ce qui vous 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 maintenant voir l’avancement de votre développement jusqu’à présent :

Résumé

Dans cet article, nous avons passé en revue certains des avantages d’écrire vos applications web à l’aide de HTML 5 et de mettre 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 un code plus propre et de remplacer les composants gourmands en ressources tels que les films 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 regarder vos pages se charger plus rapidement, mais aussi les rendre compatibles avec les 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.

Articles connexes: