Voir tous les tags
-
-
Je suis en train de vous concocter un nouveau design, très web 2.0 (évidemment).
J'ai eu envie d'accumuler les clichés, donc ne vous offusquez pas, si vous trouvez que ça fait too much, c'est parce que c'est du second degré... (Macaron, boutons "glossy").
J'ai mis le header, sachant que la charte graphique en découle, donc des tons bleu pastel réhaussé par du orange. Si c'est à chier, dites le moi vite svp ;)
8 commentaires
-
Pour obtenir une page dynamique sans rechargement complet, il faut pouvoir la manipuler par JS.
Exemple : Un formulaire qui traite toutes les informations par JS, un bouton pour cacher/afficher un bloc de texte, des "fenêtres"... Les possibilités sont illimitées (pour les fenêtres, utilisez un framework :p)
Etape 1 : Etiqueter la page
Pour que JS puisse s'y retrouver dans votre page xHTML, la manière la plus simple est de donner des id aux balises.
<p id="nomLabel">Texte</p>
Si vous le pouvez, utilisez toujours des balises sémantiques, pas la peine de charger sa page de div et de span inutiles si des balises adéquates existent.
<div id="nomLabel2">Bloc de page</div>
Etape 2 : Accéder à la page par JS
Pour accéder par JS à une balise étiquetée, c'est la fonction getElementById();
var element = document.getElementById("nomLabel");
Ensuite, on peut faire plein de trucs avec cette variable element, récupérer/modifier ce qu'il ya à l'intérieur de la paire de balises (innerHTML), modifier ses attributs CSS (afficher/masquer par exemple), récupérer la valeur dans le cas d'un <input > d'un form.
alert(element.innerHTML);
De façon générale, les attributs CSS gardent leur nom en JS, sauf s'ils contiennent des tirets (z-index devient zIndex par exemple)
alert(element.value); //Si la balise est de type input
element.style.display = "none"; //Masque le bloc
element.style.border = "1px solid red"; //Bidouiller les propriétés CSS
element.className = "nomClasse"; //Modifier la classe CSS appliquée à l'élément
Vous avez déjà de quoi faire un formulaire géré par JS, et pas mal de bidouillis.
Exemple : un bouton qui affiche/masque un bloc de texte.
Code xHTML
<p id="texte" style="display : none;">Lorem ipsum dolor sit amet, etc...</p>
Code JS
<a href="javascript:void(0);" onclick="toggleText(this);">Afficher le texte</a>
function toggleText (link){
Voilà. Ce que j'ai fait est affreux sur un plan accessibilité, car quiconque n'a pas activé JS ne verra jamais le texte. Le mieux est de faire un texte visible par défaut, d'appeler juste après un bout de JS qui aura pour fonction de le cacher. Comme ça, celui qui a JS ne le verra pas par défaut, et pourra faire joujou avec, mais celui qui n'a pas JS activé le verra. (L'important c'est de transmettre des infos, plus que de pouvoir les cacher/masquer)
var element = document.getElementById("texte");
if (element.style.display == "none"){
element.style.display = "block";
link.innerHTML = "Masquer le texte";
}else{
element.style.display = "none";
link.innerHTML = "Afficher le texte";
}
}
Voilou, j'espère que ce tuto assez basique vous sera utile !
1 commentaire
-
Graaaaaaah ! Déjà qu'elle y connait rien en info, maintenant elle se mêle de programmation... Snif.
Déjà on programme avec Maple. Pour ceux qui connaissent pas, Maple c'est un formidable outil de calcul formel, associé à un piteux langage de programmation. Toutes sortes d'instructions non standard, une gestion des boucles... pathétique, et une syntaxe générale qui me rappelle le pascal. (vous savez, ce truc qu'on utilisait il ya longtemps)
Pour un soft qui sort régulièrement avec des versions de plus en plus performantes, c'est déprimant.
Bon, ça c'est l'intro.
La nouvelle marotte de PG, c'est de dire qu'il ne faut pas se servir des fonctions natives de Maple. (en gros de se priver de son seul intérêt)
Mais le pire, c'est le pourquoi de cette étrange décision.
"C'est plus rapide de recoder les fonctions, le programme sera plus rapide" (sic!)
Donc, pour résumer, voilà le fonctionnement de Maple.
Il parse le code pour repérer les erreurs.
Il l'interprète, le compile et enfin l'exécute.
Par quel MIRACLE, utiliser une fonction native précompilée et over optimisée serait-il plus lent que de
faire interpréter puis compiler puis utiliser une fonction. Ca implique que le temps d'interprétation et de compilation soit négatif. Problème.
Deuxièmement, sur un plan moins technique, je voulais parler du comportement général du programmeur.
Un comportement bien (que je m'efforce de respecter) consiste à aérer son code, indenter, éviter les astuces™ foireuses de programmation, de faire des bouts de code réutilisables, mettre des noms de variables explicites, bien sûr à commenter, bref respecter le lecteur éventuel.
Le programmeur qui code pour lui pourrait à la limite ne pas suivre ces conventions (bien que je ne lui conseille pas), mais quand on est professeur, ça devient indispensable.
Surtout que la majorité des élèves ne connaissait pas la programmation avant le premier cours de cette année.
En gros, voilà ce qu'il ne faut pas faire (en règle générale, mais surtout lorsque c'est un "corrigé") :
Racine_carré :=proc(a,e)
Voilà le code à la PG, featuring plusieurs instructions par ligne, la proc sous définie en plein milieu d'autres
local p,c,q,em,b,n,f,u;
p:=0; c:=1; while c<a do p:=p+1; u=2*u od;
u:=1; q:=0; while 2*q<p-2 do q:=q+1; c=2*c od;
em:=e/(3*u); b:=1/5;f:=proc(x,a) ;(x*x+a)/(2*x) end;
print(p,q,'valeurs_initiales_choisies u0_et_u1_sont', u, 'et', evalf(f(u,a)));
u:=f(u,a); n:=1;while b>em do n:=n+1;b:=b*b;u:=f(u,a) od;
print('valeur_approchée de_racine_de_',a,'est', evalf(u));
print('valeur_obtenue_en_',n,'_iterations');
print('valeur_approchée_donnée_par_maple', evalf(sqrt(a)));
end;
instructions, aucune indentation, aucun commentaire.
Comment donner envie aux gens de programmer. Bravo. Clap Clap.
Racine_carré :=proc(a,e)
Voilà un code un peu plus clair
local p,c,q,em,b,n,f,u;
p:=0;
c:=1;
while c<a do# On approxime rapidement le premier terme de la suite par des puissances de 2
p:=p+1; c=2*c
od;
u:=1;
q:=0;
while 2*q<p-2 do# On calcule u0=2^E(p/2)
q:=q+1; c=2*c
od;
em:=e/(3*u);#Calcul visant à obtenir la précision de l'approximation
b:=1/5;
f:=proc(x,a) # Fonction dépendant d'un paramètre
(x*x+a)/(2*x);
end;
print(p,q,'valeurs_initiales_choisies u0_et_u1_sont', u, 'et', evalf(f(u,a)));
u:=f(u,a);
n:=1;
while b>em do#Tant que la précision voulue n'a pas été atteinte
n:=n+1;b:=b*b;u:=f(u,a)
od;
print('valeur_approchée de_racine_de_',a,'est', evalf(u));
print('valeur_obtenue_en_',n,'_iterations');
print('valeur_approchée_donnée_par_maple', evalf(sqrt(a)));
end;
Enfin bon c'est pas à moi de faire son boulot, mais ya des fois ça m'énerve 5 commentaires
-
Je suis vraiment désolé pour la (ou peut être les, soyons fous) personne(s) qui suivent le projet,
je suis vraiment overbooké de chez overbooké en ce moment, je n'ai que peu de temps à consacrer à pdg101.
Mais bon je vais résumer les derniers trucs que j'ai eu le temps de faire.
Je suis en train de bosser sur tout ce qui est cartes pour l'instant : la carte du complexe de chaque entreprise, avec les bâtiments et tout, et la carte de chaque région où sont regroupées les entreprises.
Il va falloir que je remodifie les classes que j'avais faites, je vais pouvoir les passer PHP 5 par la même occasion :D
Niveau graphismes, je commence à me servir un peu de XARA LX, un logiciel de dessin vecto ultra performant, open source sous linux (eh oui, la classe).
Enfin voilà les dernières nouveautés.
Et puis vous l'avez remarqué, j'ai adapté le design de pdg101 pour eklablog, histoire de rester dans le thème :p
A bientôt pour les prochaines news. 9 commentaires
Suivre le flux RSS des articles de cette rubrique Suivre le flux RSS des commentaires de cette rubrique
Actions
Aller à l'accueil
Contact
Chercher un article
Connexion
Créer mon blog
Vous avez reçu un nouveau message !