separate Javascript, CSS and HTML

add a word
This commit is contained in:
ponce
2013-06-05 02:12:34 +02:00
parent 5dc1a49c91
commit 59f8219717
4 changed files with 246 additions and 246 deletions

View File

@@ -1,8 +1,6 @@
- l'en t<>te est un peu grand et un peu vide (mais je sais pas trop quoi en faire)
- les couleurs un peu rouges font bizarre, <20>a manque un peu de contraste entre le texte et le fond, pareil pour le box-shadow autour de .groupe-lettre (d'ailleurs pourquoi box-shadow plut<75>t que border?)
- le contraste rouge/vert doit pas etre terrible pour les daltoniens
- "document.creeElement" = document.createElement est un bon easter egg :)
- tu peux splitter le js et le css dans leur fichier (cache friendly)
- des liens vers chaque lettre de l'alphabet peuvent <20>tre utiles
- tu peux <20>ventuellement ajouter une feature inversion de l'annuaire (trier par clef fran<61>aises). OK en fait c'est fait mais c'est un peu confusant, on voit pas qu'il y a 2 listes. Ajouter un lien en haut ou un switch pour changer.

174
www.bitoduc.fr/creuille.js Normal file
View File

@@ -0,0 +1,174 @@
function construitListe(window)
{
var document = window.document;
document.creeElement = document.createElement;
var vrais_mots = [
{anglais: 'dangling pointer', francais: 'pointeur fou'},
{anglais: 'URL' , francais: 'adresse réticulaire'},
{anglais: 'GC' , francais: 'glaneur de cellule'},
{anglais: 'pipeline' , francais: 'bitoduc'},
{anglais: 'TL;DR (Too Long Didn\'t Read)' , francais: 'TLAL (Trop Long A Lire)'},
{anglais: 'framework', francais: 'cadriciel'},
{anglais: 'shareware', francais: 'partagiciel'},
{anglais: 'freeware', francais: 'gratuiciel'},
{anglais: 'spam', francais: 'polluriel, pourriel'},
{anglais: 'spammeur', francais: 'arroseur publicitaire'},
{anglais: 'CDROM', francais: 'cédérom'},
{anglais: 'e-mail', francais: 'courriel'},
{anglais: 'anti-pattern', francais: 'anti-patron'},
{anglais: 'callback function', francais: 'fonction de rappel'},
{anglais: 'stack overflow', francais: 'dépassement de pile'},
{anglais: 'flag', francais: 'fanion'},
{anglais: 'core dump', francais: 'vidage de mémoire'},
{anglais: 'spinlock', francais: 'tourniquet'},
{anglais: 'polling', francais: 'attente active'},
{anglais: 'debugger', francais: 'dévermineur'},
{anglais: 'god object', francais: 'objet omniscient'},
{anglais: 'flame', francais: 'propos inflammatoire'},
{anglais: 'angle brackets', francais: 'chevrons'},
{anglais: 'home row', francais: 'touche de repos'},
{anglais: 'number sign', francais: 'croisillon'},
{anglais: 'slash', francais: 'barre oblique'},
{anglais: 'backslash', francais: 'barre oblique inversée'},
{anglais: 'ampersand', francais: 'esperluette'},
{anglais: 'backport', francais: 'rétroportage'},
{anglais: 'rolling release', francais: 'publication continue'},
{anglais: 'checksum', francais: 'somme de contrôle'},
{anglais: 'repositery', francais: 'dépôt'},
{anglais: 'version control system', francais: 'logiciel de gestion de versions'},
{anglais: 'lazy evaluation', francais: 'évaluation paresseuse'},
{anglais: 'upload', francais: 'téléversement'},
{anglais: 'download', francais: 'téléchargement'},
{anglais: 'patch', francais: 'rustine logicielle'},
{anglais: 'endianness', francais: 'boutisme'},
{anglais: 'big-endian', francais: 'grand boutien'},
{anglais: 'little-endian', francais: 'petit boutien'},
{anglais: 'plugin', francais: 'greffon'},
{anglais: 'online chat', francais: 'clavardage'},
{anglais: 'webcam', francais: 'cybercaméra'},
{anglais: 'podcasting', francais: 'balladodiffusion'},
{anglais: 'phishing', francais: 'hameçonnage'},
{anglais: 'bloatware', francais: 'boufficiel'},
{anglais: 'spyware', francais: 'espiogiciel'},
{anglais: 'flood', francais: 'matraquage'},
{anglais: 'glue code', francais: 'code ciment'},
{anglais: 'proxy', francais: 'mandataire'},
{anglais: 'reverse proxy', francais: 'mandataire inverse'},
{anglais: 'tutorial', francais: 'didacticiel'},
{anglais: 'browser', francais: 'butineur'},
{anglais: 'BBS (Bulletin Board System)', francais: 'babillard électronique'},
{anglais: 'applet', francais: 'appliquette'},
{anglais: 'cloud computing', francais: 'infonuagique'},
{anglais: 'overclocking', francais: 'surcadençage'},
{anglais: 'double word', francais: 'trente-deuzet'},
{anglais: 'byte', francais: 'octet'},
{anglais: 'malware', francais: 'maliciel'},
{anglais: 'namespace', francais: 'espace de noms'},
{anglais: 'stylesheet (CSS)', francais: 'feuille de style'}
];
var faux_mots = [
{anglais: 'branch merging', francais: 'fusion de branches'},
{anglais: 'pull-request', francais: 'fusiodemande'},
{anglais: 'NIH (Not Invented Here)', francais: 'PII (Pas Inventé Ici)'},
{anglais: 'RTFM (Read The Fucking Manual)', francais: 'LPDM (Lis le Putain De Manuel)'},
{anglais: 'DRY (Don\'t Repeat Yourself)', francais: 'NTRP (Ne Te Répète Pas)'},
{anglais: 'hashtag', francais: 'mot-dièse (ou diestiquette)'},
{anglais: 'tweet', francais: 'gazouilli'}
];
function trouveElement(id)
{
return document.getElementById(id);
}
function cache(e)
{
e.style.visibility = 'hidden';
}
function montre(e)
{
e.style.visibility = 'visible';
}
var tous_les_mots = vrais_mots.concat(faux_mots);
var i;
var noeudFRversANG = trouveElement('francais_vers_anglais');
var noeudANGversFR = trouveElement('anglais_vers_francais');
var lettresFRversANG = new Array(26);
var lettresANGversFR = new Array(26);
var noeud;
function enleveLesAccents(s) {
s = s.replace("é", "e");
return s;
}
for (i = 0; i < 26; ++i) {
var lettre = String.fromCharCode(65 + i);
lettresFRversANG[i] = noeud = document.creeElement('div');
noeud.className = 'groupe-lettre';
noeud.enfants = 0;
var titre = document.creeElement('h3');
titre.innerHTML = lettre;
noeud.appendChild(titre);
lettresANGversFR[i] = noeud = document.creeElement('div');
noeud.className = 'groupe-lettre';
noeud.enfants = 0;
titre = document.creeElement('h3');
titre.innerHTML = lettre;
noeud.appendChild(titre);
}
// renvoie un nombre entre 0 et 25
function indiceDeLaPremiereLettre(m) {
var motSansAccent = enleveLesAccents(m);
var motEnMinuscule = motSansAccent.toLowerCase();
var resultat = motEnMinuscule.charCodeAt(0) - "a".charCodeAt(0);
return resultat;
}
for (i = 0; i < tous_les_mots.length; ++i) {
var mot = tous_les_mots[i];
noeud = document.createElement('div');
noeud.className = 'definition';
noeud.innerHTML = '· <span class="mot-anglais"> ' + mot.anglais + ' </span> : '
+ '<span class="mot-francais">' + mot.francais + "</span>";
var indice = indiceDeLaPremiereLettre(mot.anglais);
lettresANGversFR[indice].appendChild(noeud);
lettresANGversFR[indice].enfants++;
noeud = document.createElement('div');
noeud.className = 'definition';
noeud.innerHTML = mot.francais + ' &rarr; ' + mot.anglais;
noeud.innerHTML = '· <span class="mot-francais"> ' + mot.francais + '</span> : '
+ '<span class="mot-anglais">' + mot.anglais + ' </span>';
indice = indiceDeLaPremiereLettre(mot.francais);
lettresFRversANG[indice].appendChild(noeud);
lettresFRversANG[indice].enfants++;
}
for (i = 0; i < 26; ++i) {
noeud = lettresFRversANG[i];
if (noeud.enfants > 1)
noeudFRversANG.appendChild(noeud);
noeud = lettresANGversFR[i];
if (noeud.enfants > 1)
noeudANGversFR.appendChild(noeud);
}
}

View File

@@ -0,0 +1,68 @@
body
{
background: #dfd5e5;
}
h1, h2, h3
{
color: #000020;
}
h3
{
margin-left: -10px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
text-decoration: none;
}
#tout
{
font-family: Georgia, Nimbus Roman No9 L, serif;
margin-left: auto;
margin-right: auto;
width: 800px;
background-color: #fff5f5;
padding: 50px;
box-shadow: 0px 0px 10px 0px #d8d8d8;
}
.groupe-lettre
{
margin: 10px;
background-color: #fff5f5;
padding-left: 40px;
padding-right: 30px;
padding-top: 12px;
padding-bottom: 20px;
box-shadow: 0px 0px 5px 0px #d0d0d0;
}
.definition
{
padding: 1px 2px 1px 2px;
}
.definition
{
margin-left: 10px;
}
.mot-francais
{
color: #208f20;
}
.mot-anglais
{
color: #905050;
}
#intro
{
font-size: larger;
color: #905050;
margin: 50px;
}

View File

@@ -4,79 +4,10 @@
<meta charset="UTF-8">
<title>Bitoduc.fr: la référence sur les termes informatiques en français</title>
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="feuille_de_style.css" />
<style>
<script type="text/javascript" src="creuille.js"></script>
body
{
background: #dfd5e5;
}
h1, h2, h3
{
color: #000020;
}
h3
{
margin-left: -10px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
text-decoration: none;
}
#tout
{
font-family: Georgia, Nimbus Roman No9 L, serif;
margin-left: auto;
margin-right: auto;
width: 800px;
background-color: #fff5f5;
padding: 50px;
box-shadow: 0px 0px 10px 0px #d8d8d8;
}
.groupe-lettre
{
margin: 10px;
background-color: #fff5f5;
padding-left: 40px;
padding-right: 30px;
padding-top: 12px;
padding-bottom: 20px;
box-shadow: 0px 0px 5px 0px #d0d0d0;
}
.definition
{
padding: 1px 2px 1px 2px;
}
.definition
{
margin-left: 10px;
}
.mot-francais
{
color: #208f20;
}
.mot-anglais
{
color: #905050;
}
#intro
{
font-size: larger;
color: #905050;
margin: 50px;
}
</style>
</head>
<body>
@@ -96,179 +27,8 @@
</div>
</div>
<script>
document.creeElement = document.createElement;
var vrais_mots = [
{anglais: 'dangling pointer', francais: 'pointeur fou'},
{anglais: 'URL' , francais: 'adresse réticulaire'},
{anglais: 'GC' , francais: 'glaneur de cellule'},
{anglais: 'pipeline' , francais: 'bitoduc'},
{anglais: 'TL;DR (Too Long Didn\'t Read)' , francais: 'TLAL (Trop Long A Lire)'},
{anglais: 'framework', francais: 'cadriciel'},
{anglais: 'shareware', francais: 'partagiciel'},
{anglais: 'freeware', francais: 'gratuiciel'},
{anglais: 'spam', francais: 'polluriel, pourriel'},
{anglais: 'spammeur', francais: 'arroseur publicitaire'},
{anglais: 'CDROM', francais: 'cédérom'},
{anglais: 'e-mail', francais: 'courriel'},
{anglais: 'anti-pattern', francais: 'anti-patron'},
{anglais: 'callback function', francais: 'fonction de rappel'},
{anglais: 'stack overflow', francais: 'dépassement de pile'},
{anglais: 'flag', francais: 'fanion'},
{anglais: 'core dump', francais: 'vidage de mémoire'},
{anglais: 'spinlock', francais: 'tourniquet'},
{anglais: 'polling', francais: 'attente active'},
{anglais: 'debugger', francais: 'dévermineur'},
{anglais: 'god object', francais: 'objet omniscient'},
{anglais: 'flame', francais: 'propos inflammatoire'},
{anglais: 'angle brackets', francais: 'chevrons'},
{anglais: 'home row', francais: 'touche de repos'},
{anglais: 'number sign', francais: 'croisillon'},
{anglais: 'slash', francais: 'barre oblique'},
{anglais: 'backslash', francais: 'barre oblique inversée'},
{anglais: 'ampersand', francais: 'esperluette'},
{anglais: 'backport', francais: 'rétroportage'},
{anglais: 'rolling release', francais: 'publication continue'},
{anglais: 'checksum', francais: 'somme de contrôle'},
{anglais: 'repositery', francais: 'dépôt'},
{anglais: 'version control system', francais: 'logiciel de gestion de versions'},
{anglais: 'lazy evaluation', francais: 'évaluation paresseuse'},
{anglais: 'upload', francais: 'téléversement'},
{anglais: 'download', francais: 'téléchargement'},
{anglais: 'patch', francais: 'rustine logicielle'},
{anglais: 'endianness', francais: 'boutisme'},
{anglais: 'big-endian', francais: 'grand boutien'},
{anglais: 'little-endian', francais: 'petit boutien'},
{anglais: 'plugin', francais: 'greffon'},
{anglais: 'online chat', francais: 'clavardage'},
{anglais: 'webcam', francais: 'cybercaméra'},
{anglais: 'podcasting', francais: 'balladodiffusion'},
{anglais: 'phishing', francais: 'hameçonnage'},
{anglais: 'bloatware', francais: 'boufficiel'},
{anglais: 'spyware', francais: 'espiogiciel'},
{anglais: 'flood', francais: 'matraquage'},
{anglais: 'glue code', francais: 'code ciment'},
{anglais: 'proxy', francais: 'mandataire'},
{anglais: 'reverse proxy', francais: 'mandataire inverse'},
{anglais: 'tutorial', francais: 'didacticiel'},
{anglais: 'browser', francais: 'butineur'},
{anglais: 'BBS (Bulletin Board System)', francais: 'babillard électronique'},
{anglais: 'applet', francais: 'appliquette'},
{anglais: 'cloud computing', francais: 'infonuagique'},
{anglais: 'overclocking', francais: 'surcadençage'},
{anglais: 'double word', francais: 'trente-deuzet'},
{anglais: 'byte', francais: 'octet'},
{anglais: 'malware', francais: 'maliciel'}
];
var faux_mots = [
{anglais: 'branch merging', francais: 'fusion de branches'},
{anglais: 'pull-request', francais: 'fusiodemande'},
{anglais: 'NIH (Not Invented Here)', francais: 'PII (Pas Inventé Ici)'},
{anglais: 'RTFM (Read The Fucking Manual)', francais: 'LPDM (Lis le Putain De Manuel)'},
{anglais: 'DRY (Don\'t Repeat Yourself)', francais: 'NTRP (Ne Te Répète Pas)'},
{anglais: 'hashtag', francais: 'diestiquette'},
{anglais: 'tweet', francais: 'gazouilli'}
];
function trouveElement(id)
{
return document.getElementById(id);
}
function cache(e)
{
e.style.visibility = 'hidden';
}
function montre(e)
{
e.style.visibility = 'visible';
}
var tous_les_mots = vrais_mots.concat(faux_mots);
var i;
var noeudFRversANG = trouveElement('francais_vers_anglais');
var noeudANGversFR = trouveElement('anglais_vers_francais');
var lettresFRversANG = new Array(26);
var lettresANGversFR = new Array(26);
var noeud;
function enleveLesAccents(s) {
s = s.replace("é", "e");
return s;
}
for (i = 0; i < 26; ++i) {
var lettre = String.fromCharCode(65 + i);
lettresFRversANG[i] = noeud = document.creeElement('div');
noeud.className = 'groupe-lettre';
noeud.enfants = 0;
var titre = document.creeElement('h3');
titre.innerHTML = lettre;
noeud.appendChild(titre);
lettresANGversFR[i] = noeud = document.creeElement('div');
noeud.className = 'groupe-lettre';
noeud.enfants = 0;
titre = document.creeElement('h3');
titre.innerHTML = lettre;
noeud.appendChild(titre);
}
// renvoie un nombre entre 0 et 25
function indiceDeLaPremiereLettre(m) {
var motSansAccent = enleveLesAccents(m);
var motEnMinuscule = motSansAccent.toLowerCase();
var resultat = motEnMinuscule.charCodeAt(0) - "a".charCodeAt(0);
return resultat;
}
for (i = 0; i < tous_les_mots.length; ++i) {
var mot = tous_les_mots[i];
noeud = document.createElement('div');
noeud.className = 'definition';
noeud.innerHTML = '· <span class="mot-anglais"> ' + mot.anglais + ' </span> : '
+ '<span class="mot-francais">' + mot.francais + "</span>";
var indice = indiceDeLaPremiereLettre(mot.anglais);
lettresANGversFR[indice].appendChild(noeud);
lettresANGversFR[indice].enfants++;
noeud = document.createElement('div');
noeud.className = 'definition';
noeud.innerHTML = mot.francais + ' &rarr; ' + mot.anglais;
noeud.innerHTML = '· <span class="mot-francais"> ' + mot.francais + '</span> : '
+ '<span class="mot-anglais">' + mot.anglais + ' </span>';
indice = indiceDeLaPremiereLettre(mot.francais);
lettresFRversANG[indice].appendChild(noeud);
lettresFRversANG[indice].enfants++;
}
for (i = 0; i < 26; ++i) {
noeud = lettresFRversANG[i];
if (noeud.enfants > 1)
noeudFRversANG.appendChild(noeud);
noeud = lettresANGversFR[i];
if (noeud.enfants > 1)
noeudANGversFR.appendChild(noeud);
}
<script type="text/javascript">
construitListe(window);
</script>
</body>