Affichage des articles dont le libellé est Editeur. Afficher tous les articles

Lorsque vous écrivez un script dans jsfiddle, il faut ouvrir la console pour voir son affichage.

si, vous incluez ce code dans le fichier HTML, la console apparaît dans le résultat !

<script>

var _consoleLog = console.log;

console.log = function(){
var name = _consoleLog.apply(console,arguments);
var str = "";
for(var index in arguments){
if(Array.isArray(arguments[index])){
arguments[index] = arguments[index].map(function(item){
if(typeof item == "object"){
item = JSON.stringify(item,null,4)+"<br>";
}

return item;
});
str += arguments[index]+" ";

} else if(typeof arguments[index] == "object"){
str = JSON.stringify(arguments[index],null,4);
} else {
str += arguments[index]+" ";
}
}
$('body').append("<div>"+str+"</div>");
}

</script>

Attention au DOM de vos éditeurs

Pour travailler le cours sur le DOM. Il serait préférable de créer un fichier source sans passer par un éditeur comme jsbin ou jsfiddle.

En effet, les éditeurs vont ajouter des scripts (type google anaytic) et donc modifier votre DOM initial.

Exemple :

Sur la figure suivante, nous notons une différence entre les valeurs d'une même expression, si vous la tapez dans la console.

Autre exemple :

Si vous travaillez le DOM sur un fichier en ligne : tout se passe comme prévu !

Si vous écrivez ce fichier avec jsbin ! attention

Ce résultat prend en compte les scripts

jsbin : plusieurs fichiers !

JS Bin on jsbin.com

Besoin d'un script dans jsbin

Créer un bin sans HTML et noter son adresse :

JS Bin

Créer un second bin et créer simplement un lien sur ce fichier !
<script src="http://output.jsbin.com/diyore.js"></script>

JS Bin

Jsbin : AJAX

Comment faire de l'AJAX avec jsbin ?

Exemple construction de fichier AJAX

JS Bin
Ne rien mettre dans le html

Construction de votre test

JS Bin

Les éditeurs

Editeur

HTML

CSS

JavaSCRIPT

Il existe plus d’une trentaine d’éditeurs ! Inutil 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

Commençons par ecrire 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.

This document was successfully checked as HTML5!

La syntaxe de HTML5 est permissive mais il conviendra d’eviter 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’interieur 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 apparait à 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 eviter 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.

Pour le CSS, essayez

Voici une liste pour aller plus loin.

Limite

A chacun de trouver les faiblesses de cette éditeur !

NB :
Sublime est un éditeur très utilisé chez les professionnel.

Sublime Text (suite)

Sublime Text est un éditeur de texte générique (et non un IDE) développé par Jon Skinner, en C++ et Python. Il est aujourd'hui un des éditeurs les plus utilisés avec notamment Notepad++.

Le logiciel est payant (mais utilisable en version "Unregistered"), il prend en charge 44 langages de programmation majeurs (ex: html/css/javascript/php/...).

Sublime Text est très personnalisable, il vous est par exemple possible d'adapter l'interface de votre programme jusqu'à changer la couleur de la balise de votre code.
Afin de rendre votre programmation la plus ergonomique possible, vous pouvez utiliser des raccourcis très pratiques !

Voici quelques exemples :

Aller directement à un symbole (ex:#) : Windows : Control + R | Mac : ⌘ + R

Splitter l'éditeur en deux parties : Windows : Alt + Maj + 2 | Mac : ⌘ + ⌥ + 2

Sublime Text possède un package manager (comprendre un gestionnaire d'extensions pour le programme) qui est téléchargeable librement à l'adresse suivante :

https://sublime.wbond.net/installation

Il vous faudra par la suite copier (Ctrl+C) l'instruction fournie en prenant soin de choisir la version que vous possédez (Sublime Text 2 ou 3)

Puis la collez dans Sublime Text comme ceci :

Cliquez sur "View" dans la barre de menu

Cliquez sur "Show Console"

Vous verrez alors apparaître une fenêtre en bas du programme.

Collez y votre instruction précédemment copiée. Appuyez sur Entrée et relancez votre programme.

Voilà, vous avez réussi à installer le Package Control !

Le + de l'article !

Après avoir installé le Package Control, il vous est possible d'installer l'un des plugins les plus populaires : Live Reload

Live Reload vous permet de pouvoir rafraîchir par exemple une page HTML que vous codez sur Sublime Text. Nul besoin d'aller tapoter votre touche F5 pour mettre à jour l'affichage de votre page modifiée. Il vous suffit juste de sauvegarder votre code HTML, Live Reload s'occupe du rafraichissement automatique de votre navigateur.

Pour installer Live Reload, procédez comme ceci :

Ouvrez Sublime Text
Cliquez sur "Tools" puis sur "Commande Palette"
Saisissez dans la recherche qui s'affiche : "pci"
Appuyez sur Entrée
Saisissez "Live Reload" et appuyez sur Entrée

Redémarrez votre Sublime Text
Tapez dans Google : "Live Reload" et choisissez :

Ajoutez l'extension en cliquant sur "Gratuit"
Retournez dans Google Chrome, accédez à : Menu (3 barres) > Plus d'outils > Extensions
Cherchez l'extension LiveReload
Cochez : "Autoriser l'accès aux URL de fichiers"