Environnement

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

cours ++ ++ ++ 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  : var newLogo=document.createElement('img'); var oldLogo = document.getElementById("hplogo"); newLogo.src="https://www.ibisc.univ-evry.fr/~dupont/Images/denis.jpg"; oldLogo.parentNode.replaceChild(newLogo,oldLogo); Ce code est écrit en Javascript, sa fonctionnalité peut se résumer ainsi Création d’une image Recherche du logo Mise de la source dans l’image 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. Tapez l’adresse https://www.ibisc.univ-evry.fr/~dupont/NEW/CSS/etudiant/page/flux1.html 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ères inovations Simulation de téléphone et tablette Extention pour chrome Top site