Pages

La force est avec toi.

On va hacker la page de Google !

http://filmetonjob.blogspot.fr/

FaceBook.
https://www.youtube.com/watch?v=ZJu4SeFEGGE

Faites croire à tes potes que t'es un génie



Environnement

Navigateurs

Mozilla
Chrome
Internet Explorer
Opera
Les  navigateurs WEB nous sont aujourd’hui familiers.
Découvrons ensemble des fonctionnalités moins connues et apprenons à maîtriser leurs boîtes à outils de développement.
les Navigateurs



























































++









La miage d'Evry était présente à la conférence fossa. Une matinée était consacrée à l'enseignement du libre. Evry est Mondialement reconnue comme leader de l'enseignement des technologie de pointe. Malgré notre partenariat priviégié avec Mozilla, nous allons nous focaliser sur le navigateur Chrome.

Personnaliser et Contrôler


Nous allons découvrir quelques fonctionnalités de Chrome (Google).

La barre d’adresse

Lancez le navigateur Chrome. Dans la barre d’adresse tapez successivement

  • chrome://version/
  • chrome://settings/
  • chrome://settings/autofill
  • chrome://settings/createProfile
  • file:///C:/Users/



Il est inutile de connaitre ces codes, nous disposons  d’un icône en haut à droite pour Personnaliser et Contrôler Chrome.


Cliquer sur l’icône et aller dans Paramêtres. Nous obtenons les mêmes résultats que la commande chrome://settings/.

L’aide

Lancer l’aide en ligne ->aide pour trouver comment : Définir votre page d'accueil


Avez vous lu la remarque en bas de page de l’aide “Vous utilisez un appareil Google Chrome au travail ou dans un établissement scolaire ? Votre administrateur réseau a peut-être configuré vos paramètres de page d'accueil à votre place. Si tel est le cas, vous ne pourrez pas les modifier à cet endroit. En savoir plus sur l'utilisation d'un appareil Chrome géré.”

Option avancée


Rechercher comment prendre en  compte un proxy.

Les extensions

Les extensions permettent d'ajouter de nouvelles fonctionnalités à un navigateur.
Tapez dans la barre d’adresse chrome://extensions/ ou rechercher dans  extensions.

Prenez le controle de Youtube en installant http://www.tubeenhancer.com/

Mot de passe


Pour eviter la saisie sistématique d’un mot de passe, les navigateurs proposent de les mémoriser.
Il est important de pouvoir effacer un mot de passe associé à un site.

Lancez le navigateur Chrome. Dans la barre d’adresse tapez successivement
  • chrome://settings/passwords






++






















































































++

























































































++ dev
phone















































Outils de développement

Tous les navigateurs possédent aujourd’hui de formidables outils de dévellopement.

Modification du DOM

A l’aide de code écrit en JavaScript on peut facilement modifier la structure d’une page WEB.

Nous allons nous amuser à remplacer le logo de google par notre photo !
Rendez vous sur la page de google et tapez F12 ou rechercher les outils de developpement

Dans la nouvelle fenêtre recherchez l’onglet console




Dans la console tapez le code suivant  :
  1. var newLogo=document.createElement('img');
  2. var oldLogo = document.getElementById("hplogo");
  4. oldLogo.parentNode.replaceChild(newLogo,oldLogo);

Ce code est écrit en Javascript, sa fonctionnalité peut se résumer ainsi
  1. Création d’une image
  2. Recherche du logo
  3. Mise de la source dans l’image
  4. remplacement du logo par l’image

Etude du réseau


Tapez l’adresse https://www.ibisc.univ-evry.fr/~dupont/. Dans la console, placez vous maintenant sur l’onglet NetWork, actualiser la page et observer le temps de chargement des images.


Web SQL


On ne sera pas surpris d’apprendre que le navigateur disposent d’une base de données

Inspection des éléments


Pour la suite nous allons utiliser le navigateur Mozilla.

La maîtrise du code HTML et CSS passe forcement par l’autoapprentissage. L’outil “inspecteur” facilite cette démarche. Cette partie est essentielle à la suite de votre formation.


Inspecter les codes pour
  • Connaître combien de balises <DIV> sont contenues dans le code.
  • Donner la taille du div id=”Gauche”
  • Changer sa couleur en rouge, mettre un taille de 70%, retirer la propriété float
  • Ajouter à div id=”droite” la propriété border: solid 5px;


Simuler la position hover


Aller dans la démo sur l’effet hover.

Inspectez la liste et à droite cliquez sur la partie jaune.

Ensuite, cocher hover pour simuler le comportement de la souris sur l’objet.

Debugger un programme


L’utilisation du débugger Javascript sera indispensable dans la suite du programme

Travail personnel

Extraire le code de la démo à l'aide de firebug.


Dernière inovation



Pour aller + loin







Libellés :