Construct2

Fermer Explications

Fermer Débuter en vidéo

Fermer Images

Fermer Audio

Fermer Plugins

Fermer Commentaires

Fermer Interactions

Fermer Associations

Fermer Texte à trous

Fermer Choix audio

Fermer Puzzle

Fermer Tri d'images

Fermer Consignes

Fermer Construction

Fermer Dessin

Fermer Graphisme

Fermer Ordre

Fermer Quizz

Fermer Score

Fermer Animations

Fermer Fichiers

Fermer Masques

Fermer Données

Fermer En ligne

Fermer Générateurs

Notepad++

Fermer Les mains dedans

Visites

 220178 visiteurs

 2 visiteurs en ligne

Préférences

Se reconnecter
---

Votre nom (ou pseudo) :

Votre code secret


 Nombre de membres 4 membres


Connectés :

( personne )
Webmaster - Infos
Plugins 4.6
Les mains dedans - Structure d'un projet

Développer en HTML5 avec un éditeur comme Notepad++
"Structure d'un projet HTML multi-plaforme"
avec jQuery : "Moins coder, faire plus !"


Les éditeurs : libres et gratuits
Notepad++ (Editeur multi-langage avec coloration syntaxique. Geany sous Linux)
BlueGriffon (Editeur HTML5 avec rendu Wysiwyg)

 

Les bibliothèques : libres et gratuites          "Moins coder, faire plus !", c'est la devise de jQuery !
-HTML  (sur Wikipedia)
-JAVASCRIPT (sur Wikipedia)
-CSS (sur Wikipedia)
-jQuery, jQuery-ui ( jQuery sur Wikipedia ) et jquery.ui.touch-punch


Les bibliothèques jQuery et jQuery-ui permettent de travailler plus rapidement, de simplifier le codage, d'où le slogan de
jQuery "Write less, do more" ("Ecrire moins, faire plus"), et tout ça, en en faisant plus.

-jquery.ui.touch-punch est un fork qui "punche"  jQuery ui pour rendre cette bibliothèque compatible avec les interfaces tactiles des smartphones, tablettes et autres hybrides. (Linux, Windows, Android, Apple, etc.)


-Un fichier index.html basique : index.html
- - - - - - - - - - - - - - - - - - - - - - -
La structure d'un projet d'une application HTML5 multi-plateforme et compatible interfaces tactiles.

L'application HTML5 est constituée de plusieurs dossiers et fichiers.


structure05



Partie du projet à créer et à personnaliser :
 -1 dossier : images avec l'image du chien image1.png et l'image de la niche cible1.png.
 -3 fichiers : Index.html, style.css et leCode.js.


Partie du projet à télécharger, à copier et à ne pas toucher ! : Ce sont les bibliothèques jQuery et jQuery-ui...
 -2 dossiers : jqueri-ui et themes
 -5 fichiers : AUTHOR, MANIFEST, package.json, jquery.js et jquery.ui.touch-punch.min.js


Cliquer pour ouvrir l'appli HTML5 :
structure01.jpg

Pour lancer l'application, il faut double-cliquer sur le fichier index.html qui s'ouvrira dans le navigateur internet par défaut.


-index.html est un fichier HTML.
  Il existe dans tout projet HTML. C'est lui qui affiche le texte et les images.
  Il appelle les bibliothèques (jQuery, etc.), la feuille de style et le fichier Javascript.
 
Il faut double-cliquer dessus pour lancer l'application ou pour afficher la page web.
-style.css est une feuille de style CSS.
  Il fixe la mise en page (la position, la taille, la couleur, etc. ) des éléments de la page HTML.
-leCode.js est un fichier Javascript. D'où l'extension ".js").
  Il contient les fonctions de l'application qui déterminent les interactions entre les différents éléments, l'utilisateur, etc.
  Il utilise les bibliothèques chargées (ici : jQuery, jQuery ui, jQuery ui Touch Punch)
  Les bibliothèques utilisées permettent de coder moins tout en en faisant plus. Le travail est "mâché". Merci jQuery !


Le fichier index.html  :
structure02.jpg

Lignes 3 à 8 : Le <head> contient les informations générales.
  - Lignes 4 : Définit le jeu de caractères de la page internet. Pour avoir des caractères accentués, choisir UTF-8.
                      N'oubliez pas de régler Notepad++ pour qu'il affiche les caractères accentués UTF-8.
  - Lignes 5 : Définit la licence d'utilisation. Ici, GPL.
  - Lignes 6 : Lien vers le fichier CSS qui définit la mise en page. Ici, style.css.
  - Lignes 7 : Le <titre> s'affiche dans l'onglet du navigateur.

Lignes 9 à 19 : Le <body> : Le contenu de la page HTML.
 - Ligne 11 : Affiche la consigne.
 - Ligne 12 : Affiche l'image de la niche cible1.png, la bonne cible. (id : idCible1)
 - Ligne 13 : Affiche l'image du chien image1.png à déplacer sur la cible. (id : idImage1)

 - Ligne 15 : Lien vers le script de la bibliothèque jQuery.js.
 - Ligne 16 : Lien vers le script de la bibliothèque jQuery-ui.js.
 - Ligne 17 : Lien vers le script de la bibliothèque jQuery.ui.Touch-Punch.min.js.
 - Ligne 18 : Lien vers le script Javascript leCode.js.

Note : Très important ! Pour des raisons de performance, les fichiers Javascript (bibliothèques et leCode.js) sont chargés à la fin du <body> et non pas dans le <head> comme le fichier CSS !

Le fichier CSS style.css  :
glisser06


- #idImage1 : l' id de l'élément concerné. Ici, l'image1.    On mets un # devant le le nom d'id dans un fichier CSS.
- position: absolute;  : Cet élément est positionné en "absolute". (En fait, sa position est relative à son parent mais comme le parent est souvent la page Web, ça ne change pas grand chose. On peut considérer que la position est absolue.)
- left: 40px;  : Positionne l'élément à 40px en partant de la gauche (left). (px = pixel)
- top: 100px;  : Positionne l'élément à 100px en partant du haut (top).
- width: 100px;  : Définit la largeur (width) de l'élément.
- height: 100px;  : Définit la hauteur (height) de l'élément.

Les 2 images sont placées et leur taille adaptée grâce à ces définitions.

La position d'une image est donnée par rapport à son coin en haut à gauche :
coordonnees02c


Le fichier Javascript  leCode.js  :
glisser07

- $ : C'est l'alias de jQuery !
       On utilise la fonction
.draggable()   de jQuery-ui.

L'image qui correspond à l'ID #lidImage1 est déclarée "glissable"...









Date de création : 01/07/2016 @ 15:20
Dernière modification : 11/07/2016 @ 22:20
Catégorie : Les mains dedans
Page lue 2122 fois


Imprimer l'article Imprimer l'article

Réactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !

^ Haut ^