Table des matières
Développer en HTML5 est aujourd'hui un standard puisqu'il fonctionne dans un navigateur ou sur des appareils mobiles via des applications hybrides. Si l'application ou le site Web fonctionne sous Chrome, Firefox ou un autre navigateur et est adapté aux résolutions d'écran des appareils mobiles, nous avons donc sans beaucoup de changements une application mobile pour Android ou IOS.
L'un des outils gratuits les plus importants pour la programmation est Netbeans, car il vous permet de développer des sites Web traditionnels ou des applications mobiles natives ou hybrides.
[color = # 006400] Télécharger le plugin [/ color] [color = # 006400] HTML5 Fun Pack [/ color]
AGRANDIR
Ensuite, nous devons installer le plugin, pour cela nous allons :
- Outils
- Brancher
- Onglet téléchargé
- Nous cliquons sur le bouton Ajouter un plugin
- Nous recherchons le fichier téléchargé qui aura l'extension nbm.
AGRANDIR
Une fois installé, nous pouvons utiliser les composants de la palette d'outils HTML.
Nous allons créer un projet HTML5 pour voir ses fonctionnalités et ses composants.
Nous allons:
- Fichier
- Nouveau projet
- Nous sélectionnons Application HTML5, pour créer un projet vierge ou vide
Sur l'écran suivant, il nous demandera d'attribuer un nom à notre projet et un répertoire où l'enregistrer, puis nous cliquons sur le bouton Suivant. Ici, nous aurons plusieurs options par exemple : Ne pas utiliser de modèle (pas de modèle de site)
La sélection d'un modèle (Select Template), vous permet de choisir parmi un modèle que nous avons dans un répertoire sur l'ordinateur ou de spécifier l'emplacement d'un fichier .zip d'un modèle dans une url. Vous pouvez saisir l'URL du fichier .zip ou cliquer sur Parcourir pour spécifier un emplacement sur votre système local. Lorsque vous créez un projet basé sur un modèle de site, les fichiers, les bibliothèques et la structure du projet sont copiés dans le répertoire du projet, par exemple un site Web modèle gratuit.
AGRANDIR
On prendra le premier template dont le lien vers le fichier zip est le suivant :
http: //cdn.freehtml5… imcreatives.zip
Nous sélectionnons l'option
Sélectionner un modèle et copiez le lien dans la zone de texte Modèle. Ensuite, nous cliquons sur Suivant.
AGRANDIR
Ensuite, sur l'écran suivant, nous pouvons ajouter des bibliothèques si nous en avons besoin pour notre développement et Netbeans les attachera à notre projet.
AGRANDIR
Nous pouvons voir qu'il reconnaît plusieurs bibliothèques Javascript et nous avons également ajouté Jquery par nous-mêmes.
Ensuite, nous cliquons sur Terminer et Netbeans s'occupera de décompresser le modèle et de commander tous les fichiers du projet.
AGRANDIR
Dans la barre d'outils, nous avons un sélecteur déroulant pour tester l'application sur différents appareils tels que les navigateurs, les appareils mobiles, SmartTV et les émulateurs tels que Apache Cordoba pour Android, pour cela nous devons avoir le SDK Android et le gestionnaire AVD installés. Le gestionnaire AVD fournit une interface utilisateur graphique dans laquelle vous pouvez créer et gérer des appareils virtuels Android (AVDS), qui sont requis par l'émulateur Android.
AGRANDIR
Dans ce cas, nous sélectionnons Firefox, puis nous cliquons sur la flèche verte pour exécuter le projet et le résultat est le modèle fonctionnant localement.
AGRANDIR
Une autre façon de créer un projet avec des modèles est de pouvoir utiliser des modèles du site Web www.initializr.com. Initializr est un générateur de modèles HTML5 pour vous aider à démarrer avec un nouveau projet basé sur HTML5. Il génère un modèle personnalisable avec un code propre et facile à comprendre, il comprend également tous les éléments et composants de base nécessaires.
AGRANDIR
Depuis Netbeans, nous n'avons qu'à sélectionner le type de modèle que nous voulons utiliser et il générera automatiquement le code et la structure du projet.
Par exemple, nous sélectionnons un modèle de type Boostrap pour un nouveau projet.
AGRANDIR
Nous cliquons sur Suivant et cela nous permettra à nouveau de sélectionner et d'ajouter plus de bibliothèques Jquery si nous en avons besoin, puis nous cliquons sur Terminer.
Nous verrons comment la structure du projet HTML5 a été créée et à droite nous verrons la palette avec les composants du plugin précédemment installé.
AGRANDIR
Nous exécutons le projet comme nous le faisions auparavant ou également en appuyant sur la touche F6. Le résultat sera un modèle simple pour démarrer notre projet.
AGRANDIR
Ensuite, nous allons tester le modèle
Réactif depuis Initializr avec les mêmes étapes précédentes et nous verrons le résultat lors de l'exécution dans le navigateur.
AGRANDIR
Si nous voulons tester notre application dans le navigateur Google Chrome, nous devons installer un plugin qui connecte Netbeans avec Chome.
AGRANDIR
Nous devons accéder à notre compte Google avec notre Gmail pour autoriser l'installation du plugin dans Google Chrome, puis nous pouvons exécuter et visualiser l'application sans problème.
L'un des avantages de l'utilisation de Google Chrome est qu'en faisant un clic droit sur l'écran, nous pourrons accéder à l'Inspecteur d'éléments et nous aurons de nombreux utilitaires pour revoir notre application, l'un d'eux simulant l'application sur différents appareils mobiles et résolutions.
AGRANDIR
En accédant à cette icône, nous pouvons simuler notre application sur des téléphones mobiles et des ordinateurs portables tels que Ipad, Iphone, LG, Samsumg, Notebook.
Par exemple nous simulons notre application fonctionnant sur un Iphone 6 avec une connexion Wi-Fi 30 Mbps
Examinons ensuite les composants de la palette HTML5. Créons un projet HTML5 vierge ou vide. Nous ajoutons la bibliothèque Jquery 2.0.3 et créons la structure du projet. La palette de composants si nous ne l'avons pas à l'écran est activée depuis le menu Windows> Palette d'outils d'ide
Dans notre fichier index.html, dans la section code
Nous faisons glisser le composant Data List et le déposons, nous verrons qu'un bloc de code sera créé automatiquement à titre d'exempleDe campagne:
Si nous exécutons notre application, nous verrons comment fonctionne la liste déroulante, il est même permis de filtrer en étant sensible pendant que nous écrivons, elle filtrera automatiquement la liste qui contient la liste déroulante
Modifions le code généré par Netbeans et extrayons les données sélectionnées de la liste de données, avec Jquery faisant référence à l'identifiant de chaque élément
Pays : Voir Pays
Nous lançons l'application et voyons qu'elle renvoie le résultat avec le nom du pays sélectionné :
Nous pouvons également envoyer une DataList avec un formulaire et capturer les données sélectionnées et les enregistrer dans une base de données
Le composant obligatoire de la palette nous permet d'ajouter comme Obligatoire un élément dans un formulaire, tel que le code suivant avec deux champs obligatoires obligatoires :
Nom : Courriel
Si nous exécutons ce code, nous pouvons voir que le formulaire ne pourra pas être envoyé si les deux champs ne sont pas remplis.
conclusionNous avons vu dans ce tutoriel quelques outils qui nous aideront à développer et tester des applications en HTML5 et Jquery plus rapidement, même sans avoir programmé quasiment aucun code complexe. Dans les futurs tutoriels, nous continuerons à progresser dans le développement d'applications HTML5 et Jquery, à la fois traditionnelles et mobiles.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
