Editeur

HTML

CSS

JavaSCRIPT

Il existe plus d’une trentaine d’éditeurs !

Inutile de passer en revue les avantages et inconvenients de chacun.

Nous allons nous focaliser sur la dernière génération : les editeurs interactifs.

Environnement de travail

Editeur de base : Bloc-notes !

Pour Windows, lancer le Bloc-notes dans l’invite de commande :

La console se lance dans démarrer->command ou tapez la touche windows

puis taper dans Rechercher les programmes et les fichiers (en bas à gauche)

%windir%\system32\notepad.exe

Commençons par écrire notre code avec le Bloc-notes, et enregistrer le fichier en index.htm.

<!DOCTYPE html>
<meta charset="UTF-8">

<title>Insert title here</title>
<p>Fruits
<ul>
<li>bananes

<li>glissantes
</ul>

Utilisez le lien W3C validateur pour tester la validité de ce code. Vous devriez obtenir un message surprenant^[1].

This document was successfully checked as HTML5!

La syntaxe de HTML5 est permissive mais il conviendra d'éviter ce genre d’écriture.

Limite

les limites d’un éditeur de base comme Bloc-notes sont évidentes. Outre le fait, qu’il n’y a pas d’auto-completion, l'absence de verification syntaxique pose des problèmes.

Ecrire le code

<!DOCTYPE html>
<meta charset="UTF-8">

<title>Insert title here</title>
<h1> <h2> coucou </h2></h1>

Ce code n’est pas valide, le navigateur va prendre une décision pour l’affichage.

Editeur professionnel

L’éditeur Eclipse un classique en programmation Java est largement utilisé pour le développement WEB entreprise..

Avantage

Le warning en jaune indique que la balise H2 ne peut être à l'intérieur de la balise H1.

Editeur interactifs

Nous vous proposons de découvrir les éditeurs :

Nous allons utiliser jsbin

Création d’un compte

Votre compte vous permettra de retrouver et partager vos fichiers, il est donc important de créer un compte.Une fois connecté, un logo apparaît à droite

Edition de code HTML

Allez dans l’onglet à gauche Bins->New, puis écrire le code html suivant

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1> coucou </h1>

</body>

</html>

Créer une version 1 de ce fichier

Modifier maintenant votre fichier, verifier que vous êtes à la version 2

Votre fichier est visible par tous à cette adresse. Testez cette interractivité en communiquant l’adresse à un camarade.

Partage

Partager un code permettra d’illustrer une idée, de se faire aider …

Voici un exemple de code partagé pour illustrer la notion de canvas et d’intégration de jsbin dans un blog.

Astuce

Pour éviter de taper toutes les balises, comme par exemple <p>...</p>, vous pouvez vous contenter de taper la lettre p et de taper sur la touche tab.

Aide à la saisie

jsbin utilise Emmet.

Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow ?

Voici un exemple

HTML

tapez div>ul>li suivi de tab (une syntaxe CSS)

Pas convaincu :

taper .item*5 suivi de tab.
taper div{item $}*5 suivi de tab

Pour le CSS, essayez

Voici une liste pour aller plus loin.

Option avancée

Est il possible par exemple de découper mon code JS en plusieurs fichiers ?

Réponse

Autre

éditeurs !

A découvrir d’urgence :

A modern, open source text editor that understands web design.

http://duponttd.blogspot.fr/2014/10/editeur-sublime-text-3.html

http://duponttd.blogspot.fr/2014/11/sublime-text-suite.html

[1] Il me semble en effet que ce code n’est pas valide : il manquerait en effet des balises et toutes les balises <body> ou encore l'absence des balises </li>