Différences

Ci-dessous, les différences entre deux révisions de la page.

--- wiki:tutoriels:ascii-camera-html:accueil [2020/10/15 18:20]
bonnetja [Scripts JavaScript]
+++ wiki:tutoriels:ascii-camera-html:accueil [2020/10/16 11:44] (Version actuelle)
bonnetja [Débogage et Infos supplémentaires]
@@ Ligne 25: / Ligne 25: @@
 ===== Présentation de l'effet  =====
-On peut changer la couleur de la typographie et du fond d'écran dans le fichier "ascii.css", en inversant l'ordre des caractères dans le fichier "ascii.js"
+On peut changer la couleur de la typographie et du fond d'écran dans le fichier "ascii.css" et inverser l'ordre des caractères " dans le fichier "ascii.js"  (" .:-/*0#8%@"), cela nous donne une image en négatif.
 === Version classique  ===
@@ Ligne 39: / Ligne 39: @@
 Vous pouvez retrouver l'exemple de cette [[https://www.lookitsgraphic.com/projects/ascii.html|Expérimentation sur mon site web.]]
-Vous pouvez également télécharger les 4 styles d'effets montrés plus haut en {{ :wiki:tutoriels:ascii-camera-html:ascii-sites.rar |Fichier RAR (compression)}} ou en {{ :wiki:tutoriels:ascii-camera-html:ascii-sites.zip |Fichier ZIP (compression)}}
+Vous pouvez également télécharger les 4 styles d'effets montrés plus haut en
+  * {{ :wiki:tutoriels:ascii-camera-html:ascii-sites.rar |Fichier RAR (compression)}}
+  * ou en {{ :wiki:tutoriels:ascii-camera-html:ascii-sites.zip |Fichier ZIP (compression)}}
+==== Structure du dossier et site ====
+Dézipper votre téléchargement, ouvrez le dossier
+{{:wiki:tutoriels:ascii-camera-html:dossier.png?300|Dossier}}
+Ouvrez un des un des 4 dossiers d'exemples
+{{:wiki:tutoriels:ascii-camera-html:exemple_blanc.png?300|Dossiers exemples}}
+Ouvrez la page web "index.html"
+{{:wiki:tutoriels:ascii-camera-html:site_index.png?300|Index site}}
+Autoriser l'accès à votre caméra puis cliquez sur le bouton "play".
+{{:wiki:tutoriels:ascii-camera-html:autoriser.png?300|}}
+{{:wiki:tutoriels:ascii-camera-html:play.png?300|}}
 ====== Explication du programme  ======
-Le programme se compose de plusieurs parties, un fichier "index.html" composant la structure de création de la page web, un fichier "asciiCss.css" c'est la feuille de style en cascade, qui permet de composer le style graphique de la page. Et trois autre fichier en JavaScript (language de programmation de scripts utilisé pour les pages internet intéractives), "camera.js" qui définit les fonction et variable de la caméra, "ascii.js" sert à traduire l'image en caractères et en à les organiser et "app.js" donnant un cadre visuel, c'est l'interface.
+Le programme se compose de plusieurs parties, un fichier "index.html" composant la structure de création de la page web, un fichier "asciiCss.css" c'est la feuille de style en cascade, qui permet de composer le style graphique de la page. Et trois autre fichier en JavaScript (language de programmation de scripts utilisé pour les pages internet intéractives), "camera.js" qui définit les fonction et variable de la caméra, "ascii.js" sert à traduire l'image en caractères et en à les organiser et "app.js" c'est l'interface.
 ==== Structure Html ====
@@ Ligne 194: / Ligne 217: @@
 ==== Scripts JavaScript ====
-Les commentaires/explications se situent apres les //
+Les commentaires/explications se situent apres les /  /.
 **__camera.js__**
@@ Ligne 458: / Ligne 481: @@
+====== Débogage et Infos supplémentaires ======
+☛ ATTENTION : ne changez pas l'ordre des fichiers dans le téléchargement sinon vous allez rompre les liens, si vous souhaitez changer les emplacements des sous fichier ( autres que le fichier html), modifiez les liens dans le fichiers "index.html".
+☛ Si vous souhaitez héberger ce fichier sur votre propre site internet, il ne fonctionnera que si vous utilisez un protocole HTTPS (sécurisé) et non http, c'est la norme depuis 2018 pour pouvoir accéder à la caméra, le micro, la localisation, ... d'un visiteur web.
+☛ Ne fonctionne visiblement pas sur Safari, mais fonctionne sur téléphone.

TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Différences

Outils de la page