Dans ce tuto HTML 5 en video, nous verrons comment utiliser l'attribut "contenteditable" de HTML5 qui nous permet d'éditer directement notre page web depuis notre navigateur.
Nous verrons ensuite comment sauvegarder notre contenu côté client de manière persistante, même après avoir fermé le navigateur, grâce à l'objet javascript "localStorage" et ses méthode "setItem" et "getItem".
Nous verrons également l'utilisation de l'attribut spellcheck qui nous permet d'activer la correction orthographique.
Pour le côté javascript, nous utiliserons la librairie Jquery pour plus de simplicité.
Jetez un oeil à ces autres tuto HTML 5
Débuter en HTML5 - CSS3 -…
Cette formation fait partie d'une série sur la programmation…
Apprendre HTML5 et CSS3
Voici une formation HTML5 et CSS3 de près de 9h et découpée…
Introduction à l'animation…
Dans ce tuto HTML5 gratuit, en vidéo, nous vous proposons une…
Introduction à la balise…
Dans ce tuto HTML 5, en vidéo, nous vous proposons de découvrir…
Administration en AJAX et…
Dans ce tuto AJAX en vidéo, nous verrons comment ajouter, supprimer…
Formation Html5 et CSS3
Voici une formation à la découverte de l'HTML5 et du CSS3.…
Videojs : Player vidéo HTML…
Dans ce tuto HTML 5 et Jquery en vidéo, nous découvrirons…
HTML5 : Doctype, balises nouvelles…
Dans cette première partie de cette formation HTML5, nous verrons…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto HTML 5 de 14 minutes est proposée dans une résolution plus grande que l’extrait suivant :
simpledev
, formateur certifié
Témoignage des clients de simpledev
![]()
Très bon formateur et surtout une incroyable diversité de tuto dans le domaine du développement de site web. J'ai commencé par les tutos concernant le html 5 et CSS3. Ces derniers proposent des sujets très utiles pour dynamiser mon site
![]()
Excellents tutos, très bien expliqués. Les tutos de Simpledev sont très utiles. L'une des choses qui fait la richesses des tutos est le "mélange des langages de programmation". On peut ainsi réaliser des systèmes complexes, avec plusieurs langages !
![]()
Bref j'ai pas besoin de préciser très bon formateur :)
![]()
Excellent Formateur, 5/5 tout y-est: application, contenu, bon son, pédagogie, bonne image, j'ai beaucoup appris en 2 jours de tuto. Parmi les quelques tutoriels que j'ai vu c'est celui qui se démarque. Simpledev. Bravo à lui j'en redemande.
![]()
Quoi dire d'autre ? merci pour tout ;).
Lire les autres témoignages
D'autres tuto de simpledev
HTML 5 et formulaires
Dans ce tuto HTML 5 en vidéo, nous verrons quelques nouvelles possibilités offertes…
Un blog en PHP (deuxième partie)
Dans ce tuto PHP en video sur la réalisation d'un blog, deuxième partie, nous verrons…
Créez un Espace Membre
Dans ce tuto Codeigniter en vidéo, nous verrons comment réaliser un espace membre pour…
Un blog en PHP (première partie)
Dans ce tuto PHP en vidéo, nous verrons comment réaliser un blog. Nous aborderons plusieurs…
Notes attribuées par les utilisateurs (4 votes)
Les avis / Questions des utilisateurs (8)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto HTML 5 d’une durée de 14 minutes a été téléchargé 432 fois et a reçu une note moyenne de 4/5.
Ce tuto a été publié le 6 juillet 2010 par simpledev, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,4/5 pour l’ensemble de ses vidéos.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.











(a téléchargé ce tuto - 09 mars 2012)
" merci pour ce tuto !
j'ai bien aimé car j'ai appris des choses !
merci encore très bon tuto ! "
(a téléchargé ce tuto - 13 décembre 2010)
" Merci pour ce tuto, c'est vrai que le html5 va permettre de gagner de precieuses heures en dev.
"
(a téléchargé ce tuto - 04 octobre 2010)
" Merci pour le tuto :)
Ps: il me semble qu'il y a un énorme décalage vidéo/son, non ? "
(auteur de ce tuto - 10 août 2010)
" Oui j'ai vu ça aujourd'hui, on doit avoir les mêmes lectures:) "
(a téléchargé ce tuto - 10 août 2010)
" ben oui suis-je bête si c'est le navigateur qui sauvegarde les données c'est normal qu'on puis rien faire coté serveur.
sinon net.tutsplus propose un tuto qui utilise aussi cette nouveauté d'html 5 en y ajoutant un coté fun puisqu'il sagit de réaliser des post-it qu'on peu ensuite balader dans la page grâce a la fonction drag & drop :
http://net.tutsplus.com/tutorials/html-css-techniques/building-persistant-sticky-notes-with-local-storage/
Un complément sympa (en anglais) à ton tuto "
(auteur de ce tuto - 10 août 2010)
" Salut damski, le problème est que si la personne fait un "effacer mes données de navigation", le tout est perdu. De plus toutes le données sont stockées sur le navigateur, si tu change de navigateur, pareil. Donc on ne pourra pas se passer des traitement côté serveur pour sauvegarder et encore moins pour un système de login je pense.
Sinon pour insérer du HTML, ça ne fonctionne pas, je viens d'essayer tu m'as fichu un doute pendant 2 secondes:)
Voilà, bref il n' y a que les langages côté serveur pour faire ce genre de chose correctement, PHP est une valeur sûr et a encore de beaux jours devant lui.
A+ "
(a téléchargé ce tuto - 10 août 2010)
" Bonjour,
bravo pour ce tuto très intéressant mais je me pose deux questions:
- peut on insérez du html dans ce paragraphe éditable ( je ne peu pas tester pour avoir la réponse direct je suis au boulot ;) )?
- serait-il possible d'utiliser ce super système pour faire un site éditable sans php+mysql? je t'explique mon idée: la balise "contenteditable serait par défault sur false et false serait une variable. Un simple système de login permettrait de passer toutes les balises du site sur true et permettrait à l'admin de modifier ses textes.
cette deuxieme idée combinée à la première permettrait un gain de temps et de coût assez conséquent si bien sur tout cela s'avère bien possible
qu'en penses-tu? "
(auteur de ce tuto - 06 juillet 2010)
" Je viens de me rendre compte que le code javascript peut être simplifié, pas besoin d'utiliser de variable "edit", il suffit de remplacer la ligne : $(edit).blur(function() par : $("#edit").blur(function() et suprimer donc la ligne : var edit = document.getElementById('edit');
Voilà, le fichier que vous pouvez télécharger avec le tuto a été modifié.
Bon tutoriel! "