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 expliquerons comment configurer Netbeans en tant qu'IDE (également appelé 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 :

Partie 1 :Comment créer un projet HTML5 de base dans Ubuntu à l'aide de Netbeans Partie 2 : Ajout de composants jQuery et Bootstrap pour rendre l'application HTML5 réactive et adaptée aux mobilesPartie 3 :Rendre l'application HTML5 dynamique et la déployer sur un serveur LAMP à l'aide de FilezillaPartie 4 :Réglage des applications Web HTML5 dynamiques à l'aide d'utilitaires Open Source

Un environnement de travail soigné (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, certaines des caractéristiques les plus distinctives de Netbeans.

Rappelons également que le HTML 5 a apporté de nombreux avantages aux développeurs - pour n'en 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 mobiles appareils.

Bien que nous testerons 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 grandement les scripts côté client) et Bootstrap (le framework HTML, CSS et JavaScript populaire pour le développement de sites Web réactifs). Vous verrez dans les articles entrants à 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 courte série, vous pourrez :

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 les procédures sont également parfaitement valables pour les autres distributions de bureau (Linux Mint , Debian , CentOS , Fédora , vous l'appelez).

Pour cela, nous avons choisi d'installer le logiciel nécessaire (Netbeans et le JDK Java , comme vous le verrez dans une minute) en utilisant une archive 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 sur l'installation d'Ubuntu Desktop, écrit par notre collègue Matei Cezar avant de continuer.

Depuis Netbeans La version 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 à partir du site Web d'Oracle pour obtenir une version plus récente.

Pour ce faire, vous avez deux choix :

Choix 1 :Téléchargez le bundle qui inclut Netbeans + JDK, ou
Choix 2 :installez les deux utilitaires séparément.

Dans cet article, nous allons choisir #2 car cela signifie non seulement un téléchargement un peu plus petit (car nous n'installerons que Netbeans avec le support 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 Netbeans ni impliquer le développement Web (principalement lié à d'autres produits Oracle).

Pour télécharger JDK , accédez au site Oracle Technology Network et accédez à Java → Java SE → Téléchargements rubrique.

Lorsque vous cliquez sur l'image en surbrillance ci-dessous, il vous sera demandé d'accepter le contrat de licence et vous pourrez ensuite télécharger le JDK nécessaire version (qui dans notre cas est l'archive pour 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 à ~/Téléchargements et extrayez l'archive vers /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 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 ~/Downloads
$ wget https://dlcdn.apache.org/netbeans/netbeans/12.5/Apache-NetBeans-12.5-bin-linux-x64.sh
$ chmod 755 Apache-NetBeans-12.5-bin-linux-x64.sh
$ sudo ./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 tiret :

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 cliquez enfin 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 pouvons ajouter des dossiers et des fichiers à notre racine du site comme requis. 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, faites un clic droit sur Racine du site puis choisissez Nouveau → Dossier ou HTML fichier.

Introduisons maintenant du nouveau HTML5 éléments et modifiez le corps de la page :

et
définir un en-tête ou un pied de page, respectivement, 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 les éléments autonomes, tels que les images ou le code, pour ne citer que quelques exemples.
affiche une légende pour un
élément, et donc il doit être placé dans l'élément
balises.
<à part> est réservé aux contenus liés d'une manière ou d'une autre au contenu de la page, généralement lié à celui-ci. Il peut être placé en tant que barre latérale avec l'aide de CSS (plus d'informations à ce sujet dans les articles à venir).

.
Copiez maintenant l'extrait de code suivant dans votre index.html fichier dans Netbeans.

CONSEIL :Ne vous contentez pas de copier-coller depuis cette fenêtre vers 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, qui vous seront utiles 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 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 Tecmint.com</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 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 Jouer icône :

Vous pouvez maintenant voir l'état d'avancement de votre développement :

Résumé

Dans cet article, nous avons passé en revue certains des avantages d'écrire vos applications Web en utilisant HTML 5 et 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 du code plus propre et de remplacer les 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 commandes et regarder vos pages se charger plus rapidement, mais aussi 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.