No Description

Bachir Soussi Chiadmi 80aa2a6432 download screenshot 2 years ago
css f9157645ec cleaned css 2 years ago
images 80aa2a6432 download screenshot 2 years ago
js 449f880946 cleaned js 2 years ago
LICENSE 0116fcf5b3 readme 2 years ago
README.md 80aa2a6432 download screenshot 2 years ago
index.html 449f880946 cleaned js 2 years ago

README.md

jsPhone starterKit

Kit pédagogique de démarage pour developpement javascript sur smartphone

Les fichiers

il ya trois fichiers principaux :

  • index.html
  • css/main.css
  • js/main.js

et des plugins javacript

  • js/dist/gyronorm.complete.js
  • js/dist/wad.js

index.html, *.html

le fichier html est central, il va contenir votre contenu dans la balise <body>, charger les styles graphiques dans al balise <link> dans <head>, et charger vos librairies javascript et votre code javascript avec les balises <script> a la fin de <body>
index.html est la page web numéro zero, celle qui sera chargé par default.
pour créer d'autre pages il suffit de la dupliqué et de lui donner un autre nom, ex: page1.html puis de changer le contenu dans la balise body

css/main.css

le fichier main.css contiendra tous vos styles graphiques écrit en css (cascading style sheet)

js/main.js

le fichier main.js contiendra le code js (javascript) que vous allez écrire et qui rendra interactive vos pages.
Il contient deja un certain nombre d'exemples commentés d'utilisation des différentes librairie présentés ci-dessous.

js/dist/*.js

le dossier js/dist contient un certain nombre de plugin javascript qui vont vous permettre d'augmenter les capacités de javascript. Vous ne devez pas les modifier. Il sont chargés dans votre page html, et vous allez vous en servire dans votre code (dans js/main.js)

js/dist/gyronorm.complete.js

gyronorm est un plugin qui facilite l'utilisation des capteur de mouvement de votre smartphone. Vous avez un exemple d'utilisation dans js/main.js
Gyronorm

js/dist/wad.js

wad est un plugin qui vous permet de générer du son, comme un oscillateur, de faire des notes, etc
vous avez ici plein d'exemple d'utilisation : workshop espace/son
wad

GPS

l'utilisation du gps est implémenté nativement dans le navigateur, il n'y a pas besoin de plugin.
Vous avez un exmple d'utilisation dans /js/main.js

Développer pour smartphone

Coder

le develeppement web pour smartphone se fait comme pour un site classique.
il vous faut un editeur de code : je vous conseille atom. Il est très puissant et a beaucoup de plugin disponible pour vous aider a travailler (lisez la doc)
Il y a aussi brackets

Tester

Ensuite il vous faut tester votre code.
Dans un premier temps c'est tres simple il vous suffit d'ouvrir le fichier index.html avec un navigateur web. Je vous conseil fortement firefox developpeur qui est fait pour coder des sites (il y a plein de video sur cette page, regardez les!). Vous pourez notamment afficher votre page dans différents formats mobiles en utilisant les outils de developpement. voici comment faire

Tester sur smartphone

enfin, pour ce qui est des comportement interactifs liés spécifiquement au téléphone, comme les gyroscope ou le gps, il faudra tester directement sur le télephone.

Pour cela il faudra rendre accessible votre site pour pouvoir l'ouvrir depuis le firefox du téléphone. Nous utiliserons xamp qui vous permet d'avoir un serveur web sur votre ordinateur
vous pouvez télécharger xamp et trouverez la doc ici

Ensuite firefox developper vous permet de debuguer depuis votre ordinateur, le site que vous consultez sur votre téléphone. vous avez ici un tutoriel

Pour télécharger ce dossier

download