Le Blog du grand loup Zeur » ajax http://blog.gaetan-grigis.eu Le blog qui vous fait connaitre ce que vous savez déjà Tue, 17 Jan 2012 08:43:06 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 TPLN : un moteur de template http://blog.gaetan-grigis.eu/programmation/ajax/tpln-un-moteur-de-template/ http://blog.gaetan-grigis.eu/programmation/ajax/tpln-un-moteur-de-template/#comments Mon, 04 Aug 2008 07:30:26 +0000 Gaëtan http://www.php-engineering.info/blog-php/?p=50 Bonjour …

Bon je suis si bien lancé aujourd’hui :) .

Donc voilà … je vais rapidement parler d’un moteur de template, alors tous d’abord, ça sert à quoi? Ben jusqu’à maintenant, je codais mes sites comme un porc :

  1. Je récuperais un kit graphique sur le net
  2. Je découpais le site : un header, la partie des articles, et le footer
  3. Je programmais le site via des fonctions qui modifiait la partie article et …

Grâce aux templates maintenant, je fait des trucs un peu plus propre, qui permettent non seulement de respecter les standards plus facilement, car qu’en on a un fichier html répartie sur plusieurs page, on oublie souvent de fermer des balises … adieu les standards.

Donc maintenant, gràce à TPLN je fait :

  1. Récupération du kit graphique
  2. Remplacement des éléments texte par balises propre au moteur de template
  3. Programmation du site.

Ok ça n’a rien changé au niveau des étapes, mais avec la deuxième méthode, on passe plus rapidement à la partie programmation du site, (et comme j’aime pas trop le grahisme, autant passer dessus rapidement).

Donc voilà … je vais faire un peu la « promotion » de TPLN pour plusieurs choses :

  1. TPLN ne s’occupe pas seulement de la mise en page, il peut aussi chercher directement des choses ^^ dans la base de données, permettre un affichage automatique de liens vers des pages, …
  2. Permet une bonne interaction avec ajax :)
  3. Plein d’autre chose encore (génération de flux rss, …)

C’est sûr les puristes qui veulent juste un moteur de template vont plutôt se tourner vers smarty et … mais bon je vois pas trop l’intêret de créer toute une page php pour gérer des pages qui ne font qu’afficher directement le contenu d’une base de donnée :

Pour l’exemple : le template, le fichier php (désolé mais wordpress n’aime pas les codes source php et html)

Avoué que c’est plutôt court non? et pis ça facilite pas mal le développement, le developpeur modifie le .php, et le graphiste modifie seulement le .html (c’est le but d’un moteur de template oui :) ). Mais dans ce cas, le dev écrit beaucoup moins de code qu’avec un autre moteur de template.

Si ça vous intéresse :

L’ensemble des exemples

Pour télécharger les sources

La doc

Articles similaires :

Copyright © 2008-2011 - Gaetan Grigis - blog.gaetan-grigis.eu ]]> http://blog.gaetan-grigis.eu/programmation/ajax/tpln-un-moteur-de-template/feed/ 0 Ajax et infobulle http://blog.gaetan-grigis.eu/programmation/ajax/ajax-et-infobulle/ http://blog.gaetan-grigis.eu/programmation/ajax/ajax-et-infobulle/#comments Fri, 16 May 2008 11:34:01 +0000 Gaëtan http://www.php-engineering.info/blog-php/?p=7 Ben voilà … nouvelle article sur l’ajax, une petite astuce pour notifier le visiteur d’événement survenue avec ajax. La plupart du temps en ajax on privilégie une zone sur l’écran, au centre, tout en haut, tout en bas.

J’expérimente depuis quelque temps déjà, une autre zone, qui est elle aussi assez souvent bien vue par l’utilisateur … a coté du pointeur de la souris :

Le pointeur de la souris est manquant … mais faut l’imaginer quoi :p

Donc voila le code :

Le CSS dont on a besoin :

#infobulle {
  1.     background-color:white;
  2.     border:1px solid #CCCCCC;
  3.     font-family:Verdana,Arial;
  4.     font-size:0.7em;
  5.     padding:10px;
  6.     position:fixed;
  7.     visibility:hidden;
  8. }

Le code Javascript :

var timeOUTaffBulle=null;
  1. var bubble = document.getElementById("infobulle");
  2. var cursor_padding = 5;
  3. var nav = navigator.appName;
  4. var ie = document.all;
  5. var ns = document.layers;
  6. if(!ie)
  7.  document.captureEvents(Event.MOUSEMOVE);
  8.  
  9. document.onmousemove = get_mouse;
  10.  
  11. function get_mouse(e){
  12.  if(ie){
  13.  x = event.x;
  14.  y = event.y;
  15.  window.status = x;
  16.  }else{
  17.  x = e.pageX;
  18.  y = e.pageY;
  19.  }
  20.  
  21.  bubble = document.getElementById("infobulle");
  22.  bubble.style.left = x + cursor_padding+'px';
  23.  bubble.style.top = y – document.documentElement.scrollTop + cursor_padding+'px';
  24. }
  25.  
  26. document.onmousemove = get_mouse;
  27.  
  28. // affiche la bubble
  29. function see_bubble(text){
  30.  bubble.style.visibility = "visible";
  31.  bubble.style.display = "block";
  32.  if(timeOUTaffBulle!=null)
  33.  bubble.innerHTML+="
  34. "+text;
  35.  else
  36.  bubble.innerHTML = text;
  37. }
  38.  
  39. function affBulle(text)
  40. {
  41.  see_bubble(text)
  42.  timeOUTaffBulle=setTimeout("kill_bubble()",1800)
  43. }
  44.  
  45. function kill_bubble(){
  46.  bubble.style.visibility = "hidden";
  47.  bubble.style.display = "none";
  48.  if(timeOUTaffBulle!=null)
  49.  {
  50.  clearTimeout(timeOUTaffBulle);
  51.  timeOUTaffBulle=null;
  52.  }
  53. }
  54. /*FIN INFOBULLE*/

Donc voila … il suffit juste de mettre une div avec comme id « infobulle » et d’appeler la fonction : affBulle(‘Salut à vous …’);
Pour afficher une superbe infobulle à côté de votre souris.

Articles similaires :

Copyright © 2008-2011 - Gaetan Grigis - blog.gaetan-grigis.eu ]]> http://blog.gaetan-grigis.eu/programmation/ajax/ajax-et-infobulle/feed/ 0 Gérer les accents en Ajax http://blog.gaetan-grigis.eu/programmation/ajax/gerer-les-accents-en-ajax/ http://blog.gaetan-grigis.eu/programmation/ajax/gerer-les-accents-en-ajax/#comments Fri, 16 May 2008 09:08:28 +0000 Gaëtan http://www.php-engineering.info/blog-php/?p=6 Un rapide article sur la gestion des accents en Ajax, avec scriptaculous (bien entendu).

Rapide rappel :

Faire une requete en GET avec scriptaculous :

new Ajax.Request('url',
  1. {
  2.     asynchronous:true,
  3.     onSuccess: function(e) {
  4.         //le traitement
  5.     }
  6. });

Les requetes en POST avec scriptaculous :

new Ajax.Request('url',
  1. {
  2.     method:'post',
  3.     postBody:'param1='+escape(document.getElementById('val1').value)+
  4.     '&param2='+escape(document.getElementById('val2').value),
  5.     asynchronous:true,
  6.     onSuccess: function(e) {
  7.         //traitement
  8.     }
  9. });

Et donc pour rajouter le support des accents, il faut rajouter l’option :

encoding: ‘iso-8859-1′

Faire une requete en GET avec les accents :

new Ajax.Request('url',
  1. {
  2.     asynchronous:true,
  3.     encoding: 'iso-8859-1',
  4.     onSuccess: function(e) {
  5.         //le traitement
  6.     }
  7. });

Les requetes en POST avec les accents :

new Ajax.Request('url',
  1. {
  2.     method:'post',
  3.     postBody:'param1='+escape(document.getElementById('val1').value)+
  4.     '&param2='+escape(document.getElementById('val2').value)+
  5.     asynchronous:true,
  6.     encoding: 'iso-8859-1',
  7.     onSuccess: function(e) {
  8.         //traitement
  9.     }
  10. });

Et voilà, plus aucun problème avec les accents et autre caractères spéciaux. (En français bien sur).

Articles similaires :

Copyright © 2008-2011 - Gaetan Grigis - blog.gaetan-grigis.eu ]]> http://blog.gaetan-grigis.eu/programmation/ajax/gerer-les-accents-en-ajax/feed/ 0