Modifier l’apparence d’un site web en ligne.

N’aimeriez-vous pas vous amuser à changer l’apparence d’un site, en modifiant ses titres, en changeant ses images tout en vous amusant et en apprenant le langage HTML. Eh bien, cette prouesse est possible grâce à une création de Mozilla, webmaker. Voici comment cela fonctionnne.

Rayons X webmaker

Pour commencer, il faut se rendre sur le site goggles.webmaker.org et faire glisser le bouton « activer les rayons X dans la barre de favoris. Ce bouton est en réalité un Bookmarklet, une application javascript qui vous permettra de modifier le site de notre choix.

Dans un deuxième temps, rendez-vous sur la page web que vous voulez modifier, puis cliquer sur le bouton « Activer les rayons X » placé dans vos favoris. Le site se décompose alors en blocs lorsqu’on passe la souris sur la page et un menu apparaît en bas à droite.

Il ne reste plus qu’à modifier les titres, les sous-titres, les paragraphes et les images, en cliquant sur la partie à modifier. Une fenêtre s’ouvre alors, avec la partie modifiable. Un onglet avancé permet de modifier l’élément en profondeur. Voici un exemple du site modifié. Il s’agit du site de l’équipe.

  • Le site de l’équipe avant les modifications :

l'equipe non modifiée

  • Le site de l’équipe après les modifications :

l'équipe modifée

Comme vous pouvez le constater, « NADAL ET SERENA, ANNEE ROYALE », est devenu « NADAL ET SERENA SE MARIENT ». Pour chercher les autres modifications, vous pouvez consulter  le site modifié.

Cette option est la cerise sur le gâteau. la page web modifiée, peut être sauvegardée et visible depuis une adresse web. Pour enregistrer son oeuvre, il faut cliquer sur « publier » dans le menu en bas à droite. Cet enregistrement requière une inscription à WebMaker. Une adresse email valide et un mot de passe vous seront demandés. Mais cela vaut la peine de s’inscrire, car  d’autre services tout aussi intéressants seront mis à votre disposition.

Ce service de Mozilla est intéressant à plus d’un titre, puisqu’il permet d’apprendre les bases de la création de sites web en HTML tout en s’amusant.

Cet article vous a plu. N’hésitez pas à le partager.

One Comment

Répondre à Eliastik Annuler la réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
drag and drop
Comment faire du drag and drop avec jQuery ? [partie 2 droppable]

Dans un premier article, nous avons vu comment faire du drag and drop avec jQuery et plus particulièrement la fonction...

galaxie
Tutoriel : créer un effet de parallaxe avec jQuery

Vous avez certainement déjà visité un site en une seule page ou les articles se succèdent les uns à la...

couteau suisse post layout
Post Layout : une extension à tout faire.

Pour ce début d'année, voici un petit article parler d'un plugins très pratique pour intégrer des bouts de codes dans...

Fermer