Contrairement aux jsp, qui permettent l’inclusion de code java et qui sont par conséquent extrêmement permissives, les templates Tapestry de par leurs structures xml ne contient que très peu de logique. Ils permettent d’isoler un maximum les traitements et de revenir à la fonction principale de la vue qui est d’afficher la donnée. Cette philosophie est intéressante car elle oblige le développeur à factoriser son travail. La vue se retrouve ainsi considérablement allégée et sa lecture devient facilitée.

Par contre l’utilisation quasi magique des composants du framework peut parfois faire tourner la tête et rendre certaines problématiques plus complexe qu’initialement.

Mise en place du problème

Nous allons créer un composant dont le rôle sera d’afficher une liste d’éléments avec pour chacun d’entre eux, un lien avec la possibilité de charger de manière asynchrone un élément de cette liste.
Pour cela nous alons donc commencer par créer le model :

public class Foo {
    private String name ;
    private String about ;
    public Foo(String name, String about){
        this.name = name ;
        this.about = about ;
    }
    public String getName() {
        return name ;
    }
    public void String setName(String Name) {
        this.name = name ;
    }
    public String getAbout() {
        return about ;
    }
    public void String setAbout(String about) {
        this.about = about ;
    }
}

Nous allons mainenant créer note controlleur qui contiendra la liste de Foo que nous allons créer arbitrairement pour l’exemple.

public class FooList {
    @Property
    private List<Foo> fooList;
    @Property
    private Foo foo;   
 
    public FooList() {
        fooList = new ArrayList<Foo>();
        fooList.add(new Foo("one", "blablablabla"));
        fooList.add(new Foo("two", "blibliblibli"));
        fooList.add(new Foo("tree", "bloblobloblo"));
        fooList.add(new Foo("four", "blublublublu"));
    }
 
    @Inject
    private Block blockFoo;
 
    @Inject
    private Request request;
 
    @OnEvent(value = EventConstants.ACTION, component = "editZone")
    public Object editZone(String fooName) {
        for (Foo fooTmp : fooList) {
            if (fooTmp.getName().equals(fooName)) {
                foo = fooTmp;
            }
        }
        return request.isXHR() ? blockFoo : this ;
    }
}

Dans la vue :

<t:loop source="fooList" value="foo">
   <t:actionlink t:id="editZone" t:zone="zoneFoo" t:context="foo.name">
      View Foo
   </t:actionlink>
   <t:zone t:id="zoneFoo">
      <t:block t:id="blockFoo"> ${foo.about} </t:block>
   </t:zone>
</t:loop>

Voilà nous pouvons maintenant tester. Notre liste de lien s’affiche bien mais il est impossible de mettre à jour les différentes zones. Quoi que l’on fasse c’est toujours la première qui est affectée.

Solution

Pour expliquer celà, il faut commencer par identifier l’erreur. Regardons du côté de t:zone. Le composant est utilisé à l’intérieur d’une boucle et nous lui mettons toujours le même t:id. Cette notation est accepté par Tapestry mais évidement un id dans le DOM se doit d’être unique.

En HTML/Javascript classique, une démarche classique aurait été de générer un id spécifique pour chaque itération et de générer l’appel asynchrone directement en js. Rien de bien sorcier si on connait javacscript, mais on se prive de la logique et la magie de Tapestry pour la gestion des Zone et des Event. C’est pas le top.

On va plutôt essayer de prendre le problème dans le sens inverse. C’est à dire plutôt que de générer un id comme on sait le faire, on pourrait déterminer l’id que tapestry génère et voir si on peut dynamiquement pointer vers lui.

En regardant de plus près, du coté client, Tapestry génère un id différent pour chaque zone ayant le même t:id suivant la règle suivante :

1ère itération : zoneFoo
2nd itération : zoneFoo_0
3nd itération : zoneFoo_1
4ème itération : zoneFoo_2
…

Et dans l’actionLink t:zone="zoneFoo" fait référence au id HTML et non au t:id. Ce qui nous permet de déterminer le nom généré par Tapestry pour une certaine itération. Pour ce faire nous allons créer une méthode getZoneName.

Dans le controller :

    @Property
    private Integer index;
 
    public String getZoneName() {
        if (index.intValue() == 0)
            return "zoneFoo";
        return "zoneFoo_" + (index.intValue() - 1);
    }

Dans la vue :

<t:loop source="fooList" value="foo" t:index="index">
   <t:actionlink t:id="editZone" t:zone="zoneFoo" t:context="foo.name">
      View Foo
   </t:actionlink>
   <t:zone t:id="zoneFoo">
      <t:block t:id="blockFoo"> ${foo.about} </t:block>
   </t:zone>
</t:loop>

Avec cette petite astuce, on peut utiliser les zones de Tapestry dans une boucle sans problème.

Il existe aussi un plugin Firefox très connu chez tous les twittos que nous sommes. Il permet de synchroniser ses tweets directement dans son navigateur Internet préféré. Ce qui est très pratique car au final la consultation de twitter est très souvent associé à celle d’une page web.

Vous avez peut-être pu vous rendre compte que la dernière mise à jour du plugin a fait apparaître une nauséabonde bannière de publicité avant le premier résultat. Il semblerait que le service était une version beta et que désormais le produit devient commercial.

Heureusement pour nous ce n’est pas une fatalité. Firefox est une plate-forme libre et donc facilement customisable. On peut par exemple changer l’apparence certaines boites et c’est exactement ce qui nous intéresse avec cette bannière.

Pour ce faire il suffit de se rendre dans le profile de firefox.

pour linux/mac :
/home/[user]/.mozilla/firefox/[key].default

pour windows XP:
C:\Document and Setting\Application Data\[user]\Mozilla\Firefox\[key].default

pour windows Vista/7/8:
C:\Users\[USER]\AppData\Roaming\[user]\Mozilla\Firefox\[key].default

Dans le répertoire chrome créer le fichier userChrome.css et rajouter ces quelques lignes css.

#echofon-ad-unit {
   display: none !important;
}

Vous pouvez redémarrer votre Firefox, la publicité s’en est allée.

Sinon vous pouvez toujours acheter la version payante ($9.99) du plugin.

Dans un premier temps, ouvrez Google Chrome ou Mozilla Firefox et saisissez dans la barre d’adresse about:cache. Cette page liste tous les fichiers que le navigateur possède dans son cache. Croisez les droits en espérant ne pas l’avoir effacé ou rafraîchi manuellement. La boite de recherche devrait vous permettre de retrouver le fichier rapidement.

Quand on clique dessus, on peut se rendre compte que Chrome ne l’affiche pas. A la place il nous montre les données brut de la trame HTTP. Si vous avez déjà travaillé avec Wireshark vous ne serez pas perdu.

La partie « contenu » de la trame est sous une forme binaire. Elle n’est donc pas exploitable telle quelle.
Dans le cas où la transaction avec le serveur web est compressée, il faudra également la dézipper.

Le script que j’ai trouvé sur le blog de Frozax résout très bien la problématique.

<?php
// cache.log is a copy of chrome cache page with only the file content section
$cacheString = file_get_contents("cache.log");
$matches = array();
preg_match_all('/\s[0-9a-f]{2}\s/', $cacheString, $matches);
$f = fopen("t.bin","wb");
foreach ($matches[0] as $match)
{
  fwrite($f,chr(hexdec($match)));
}
fclose($f);
 
ob_start();
readgzfile("t.bin");
$decoded_data=ob_get_clean();
echo $decoded_data;
?>

Pour l’utiliser, il suffit de copier la partie « File content » de la trame dans un fichier nommé cache.log, d’éxecuter le script php et votre fichier sera restauré.

sources: http://www.frozax.com/blog/2011/05/recover-file-google-chrome-cache-gzipped/

Mais comment se priver, aujourd’hui, des webfonts alors que tous les navigateurs internet récents permettent d’intégrer cette singularité.
De plus, c’est véritablement un jeu d’enfant, vous pouvez consulter ce billet, qui explique comment intégrer une fonte custom dans une page web.

La vrai difficulté réside dans le choix de cette fonte, effectivement, le net pullule de site permettant d’en télécharger. Mais c’est toujours frustrant qu’une fois trouvée celle adaptée à son projet, on se rend compte qu’elle est sous licence protégée et qu’il va falloir sortir le porte-feuille pour l’utiliser.

C’est pour cette raison qu’aujourd’hui, je vous propose 5 annuaires complètement gratuits qui vous aideront à choisir vos polices d’écriture pour vos projets.

FontSpace

FontSpace – www.dafont.com
Un annuaire de fonts de qualité, qui est connu et qu’on ne présente plus qui possède un large choix de polices d’écriture dans toutes les catégories.

API Google Fonts

API Google Fonts – www.fontsquirrel.com
L’API Google Font est une l’excellence dans le domaine, elle permet de charger les fonts via des CDN sur les serveurs de Google. Il est très aisé de choisir et comparer toutes les polices. Domage qu’il y ait si peu de choix.

Font Squirrel

Font Squirrel – www.fontsquirrel.com
Un site concernant les fonts à connaître absolument. Il permet la conversion de tous les formats et possède un annuaire impressionnant.

FontSpace

FontSpace – www.fontspace.com
Les polices d’écritures que j’ai trouvé sur ce site sont plus excentriques que les autres. Mais celà peut très bien correspondre à un besoin.

Open Font Library

FontSpace – openfontlibrary.org
Communauté de designer voulant créer une librairie de font libre. La bibliothèque est encore assez pauvre.

PHP Fatal error: Allowed memory size of 33554432 bytes exhausted 
(tried to allocate 491520 bytes) in...

Pour corriger le problème, il suffit d’augmenter la taille de la mémoire allouée à wordpress. Pour se faire, il faut éditer le fichier config.php et y redéfinir la valeur par défaut. Pour celà, ajouter la ligne suivante :

define('WP_MEMORY_LIMIT', '64M');

La limite de mémoire dédié à WordPress va passer de 32Mb à 64Mb et normalement le bug devrait être corrigé.

FontForge

FontForge est une application open source qui permet via une interface d’éditer des fichiers de font. Il a l’avantage d’être disponible pour mac, linux. Il faudra passer par cygwin pour les utilisateurs Windows. Il est possible de télécharger librement FontForge sur SourceForge. Avec cette outils, on peut ouvrir un TTF et générer à partir de celui-ci un autre fichier de font sous un autre format tel que OTF ou SVG (et vice versa).
Il permet aussi d’émuler une fenêtre comme si vous étiez sur Windows (via WEFT). Ainsi, vous pouvez tester sur votre environnement le rendu de votre police dans le monde Microsoft.

TTF2EOT

Cette application en ligne de commande permet à partir d’un fichier TTF de générer un EOT. C’est un logiciel libre, vous pouvez le télécharger sur google code.

Batik TTF2SVG

Cette application, également en ligne de commande permet de convertir vos TTF en SVG. Elle nécessite java et peut être télécharger librement.

Outils en ligne

Vous pouvez également utiliser des outils online, il faudra alors uploader votre ttf. La manipulation sera peut-être plus lente et limité en taille, mais ces outils ne nécessitent aucun logiciel installé sur votre machine.

Font Squirrel – font face convertor
Très bon outils qui permet la convertion en plusieurs format tel que TTF, EOT, WOFF, SVG et SVGZ. Le site possède aussi un annuaire de fonte qui est bien fourni et bien classé.

ttf2eot by Kirsle Convertisseur TTF vers EOT. Le style du site est totalement simpliste. Il y a une limite de taille de 1MB pour le fichier à convertir.

ttf2eot by sebastiankippe Outil qui permet la conversion TTF vers EOT avec une page web avec style épuré à la Google. Il semblerait que son créateur va ajouter un convertisseur vers OTF.

Il faut aussi savoir qu’à cette époque les connexions ADSL n’était réservé qu’aux plus chanceux d’entre nous. Par conséquent l’intégration d’une police de caractère à une page web était particulièrement pesante pour la bande passante. C’est certainement ces arguments qui ont poussé le W3C a ne pas inclure la propriété @font-face aux spécifications de CSS2.1.

Mais aujourd’hui les choses ont bougés et la propriété est désormais incluse dans CSS3. Tous les navigateurs supportent maintenant cette propriété.

Malheureusement les problèmes de format ne sont pas pour autant résolus. Il en existe 5 types différent que l’ont peut imbriquer dans une page web.

Format .TTF

TrueType est un format vectoriel développé par Apple à la fin des années 1980. Il est aujourd’hui le plus utilisé des formats de police de caractères. Il est présent sur tout les systèmes d’exploitation. Mais il n’est pas compressé et donc pas optimisé pour une intégration web. Cependant nous pouvons palier à ce problème en compressant le fichier avec apache avec mod_deflate ou mod_gzip.

Format .OTF

OpenType est un format propriétaire, développé conjointement par Microsoft et Adobe. Il est basé sur TrueType et est son successeur sur Windows.

Format .EOT

C’est une version de OpenType compressé, qui est utilisé pour l’imbrication dans une page web. Il faut utiliser le Web Embedding Fonts Tool de Microsoft pour pouvoir créer une font de ce format. Le W3C a refusé d’en faire un standard pour CSS3. Actuellement seul Internet Explorer le supporte.

Format .SVG

Scalable Vector Graphics est un standard libre basé sur la lecture d’un fichier XML qui définit une forme graphique de manière vectorielle.

Format .WOFF

Ce format, crée en 2009, est considéré comme la WebFont à utiliser car elle est recommandée par le W3C. Elle sera certainement utilisée comme futur standard. Elle est constituée d’un TrueType compressé et de méta données.

Compatibilité browser/format

Le tableau suivant permet de se rendre compte que la compatibilité entre navigateur et format de font rend difficile le choix d’un format sur l’autre.

Exemple d’utilisation de @font-face

Pour utiliser une fonte imbriquée et s’assurer de la compatibilité entre les navigateurs, je vous conseille de charger plusieurs fichiers de la même fonte en précisant le format. Il est donc nécessaire de la déclarer de la manière suivante.

@font-face{  
	font-family: "Ma Jolie Font"; 
	font-style: normal;
	font-weight: normal;
	src: 	url('majoliefont.ttf')  format('truetype'), 
        	url('majoliefont.otf')  format('opentype') ,
        	url('majoliefont.eot')  format('opentype') ,
         	url('majoliefont.woff')  format('woff');
}

Pour utiliser la fonte nouvellement imbriquée, il suffit maintenant d’utiliser l’attribut font-family avec son nom.

html {
	font-family:"Ma Jolie Font";
}

Si vous voulez avec une écriture grasse, il faudra aussi importer un fichier de fonte correspondant à celle-ci. Dans ce cas, dans la déclaration de @font-face, il faudra le préciser grâce à l’attribut font-weight.

@font-face{  
	font-family: "Ma Jolie Font"; 
	font-style: normal;
	font-weight: bold;
	src: 	url('majoliefont-bold.ttf')  format('truetype'), 
        	url('majoliefont-bold.otf')  format('opentype') ,
        	url('majoliefont-bold.eot')  format('opentype') ,
         	url('majoliefont-bold.woff')  format('woff');
}

Dans le cas d’une écriture en italic, il faudra le préciser de la même manière grâce à l’attribut font-style:italic

La propriété CSS text-3d n’existe pas en soit. Mais on peut créer l’effet 3D en superposant plusieurs ombres de texte (text-shadow).

La propriété text-shadow permet de créer l’ombre d’un texte avec un décalage en x et en y.
La couleur de l’ombre, ainsi que la diffusion de celle-ci peut être choisie.

text-shadow: position_x position_y diffusion couleur;

.texte_au_soleil{
    text-shadow: 2px 3px 5px #CFB565;
}

La superposition des ombres est très simple à mettre en place, il suffit d’ajouter d’autres ombres à la propriété text-shadow de la manière suivante.

.texte_3D{
    text-shadow: 
        1px 1px 1px #CFB565,
        1px 2px 1px #CFB565,
        1px 3px 1px #CFB565,
        1px 4px 1px #CFB565,
        1px 5px 1px #CFB565,
        1px 6px 1px #CFB565,
        1px 7px 1px #CFB565;
}

On peut donner plus de réalisme à l’effet 3D en ajoutant un jeu de lumière grâce à une ombre plus diffuse.

.texte_3D{
    text-shadow: 
        1px 1px 1px #CFB565,
        1px 2px 1px #CFB565,
        1px 3px 1px #CFB565,
        1px 4px 1px #CFB565,
        1px 5px 1px #CFB565,
        1px 6px 1px #CFB565,
        1px 7px 1px #CFB565,
        0 1px 1px rgba(68,68,68,.3),
        0 5px 3px rgba(68,68,68,.2),
        0 10px 4px rgba(68,68,68,.2),
        0 15px 8px rgba(68,68,68,.2),
        0 30px 10px rgba(68,68,68,.1);
}

L’utilisation de PHP5, enfin l’utilisation de la programmation objet dans ce langage peut parfois s’avérer déstabilisant. Un développeur PHP ne doit jamais oublier que la notion objet est en réalité un patch appliqué au langage et qui n’était donc pas prévu dans les premières versions.

J’ai été récemment confronté à un problème qui m’a laissé relativement dubitatif. Il s’agissait d’élucider le mystère de l’aberrant résultat issu de mes lignes de code PHP, qui dans une certaine situation, me retournait un objet vide mais ayant tout de même une valeur.
Dit de cette manière, je sais que ce n’est pas très clair. Je vais donc, plutôt illustrer mon problème avec une synthèse de ces quelques lignes :

$objA = new ObjA() ;
$objA->attr = "42" ;
$var = $objA->attr ;
var_dump($objA->attr) ;               
var_dump(!empty($objA->attr)) ; 
var_dump(isset($objA->attr)) ; 
var_dump(isset($var)) ; 
 
// retourne
// string '42' (length=2)
// boolean false
// boolean false
// boolean true

Donc, voilà mon problème comment l’attribut attr de l’objet objA peut-il être vide, et en même temps retourner la valeur 42.

Ca ne parait pas logique, mais bon, après tout, ça ne serait pas la première réalité qui m’échapperait. Si le temps et l’espace est à l’origine une même chose, alors pourquoi le néant et le concret ne seraient-ils pas aussi confondus ?

Au lieu de chercher ma réponse à l’origne des temps (ou de l’espace je ne sais plus trop), essayons de remonter à la racine de mon code source.

La classe ObjA est la suivante :

class ObjA {
    private $attr;
 
    public function __get($att){
        return $this->$att;
    }
 
    public function __set($att,$val){
        $this->$att = $val;
        return $this->$att;
    }
}

La seule spécificité de cette classe est qu’elle possède des magic getters et setters qui permettent d’accéder à ses tous ses attributs comme s’ils étaient publics de la manière suivante :

$objA = new ObjA();
$objA->attr = "42" ; // appel de __set
echo $objA->attr ; // appel de __get

Si on change l’attribut de la classe ObjA en public et que l’on relance le test, on obtient le surprenant résultat suivant :

$objA = new ObjA() ;
$objA->attr = "42" ;
$var = $objA->attr ;
var_dump($objA->attr) ;               
var_dump(!empty($objA->attr)) ; 
var_dump(isset($objA->attr)) ; 
var_dump(isset($var)) ; 
 
// retourne
// string '42' (length=2)
// boolean true
// boolean true
// boolean true

L’attribut $objA->attr possède toujours la valeur «42» et ne semble cette fois ne plus être vide. Le PHP Big Bang aurait-il enfin eu lieu ? Le néant et le concret se seraient-ils séparés ?

Rien n’est encore sur, mais on peut affirmé que le problème survient lorsque l’on essaie d’accéder à un attribut à partir d’une classe dont nous n’avons pas la visibilité (sur un attribut private ou protected).

Essayons de décortiquer ce qu’il s’est passé :

isset($objA->attr) ;

$objA->attr est catché par le magic getter de ObjA qui est censé retourner la valeur de l’attribut $this->attr .

Ce qu’il fait car echo $objA->attr retourne bien la valeur.

En toute logique la fonction isset devrait analyser ce que nous lui fournissons en paramètre, soit la valeur retourné par le getter, mais il n’en est rien, pour une raison inconnue elle semble introspecter l’objet $objA.

Un petit coup d’œil dans la documentation de la fonction isset de php permet d’y voir un peu plus clair.

Note:

When using isset() on inaccessible object properties, the __isset overloading method will be called, if declared.

Pour contrer le Big Bang, il suffirait de surcharger le comportement de la magic method __isset d’un object lors de l’appel de la méthode isset sur son attribut.

En simple, la classe ObjA doit ressemblé à ça :

class ObjA {
    private $attr;
 
    public function __get($att){
        return $this->$att;
    }
 
    public function __set($att,$val){
        $this->$att = $val;
        return $this->$att;
    }
 
    public function __isset($key) {
        return isset($this->$key);
    }

Encore plus incroyable, après avoir tester, le Big Bang ne se produirait pas sur Windows. En tout cas pas avec la version 5.2.5 de PHP.

Il est recommandé de sécuriser au maximum l’accès à son blog. Surtout lors de l’utilisation de CMS tel que Worpress, qui sont soumis à des attaques génériques.

Parmis les précautions que l’on peut prendre, il est possible d’encrypter via SSL ses communications avec les pages d’administations de votre blog.

Pour celà, il suffit de changer le protocol réseau dans le fichier le fichier de configuration de WordPress.

Ouvrez le fichier wp-config.php et insérer la ligne suivante :

define("FORCE_SSL_ADMIN", true);

Il sera également nécéssaire de configurer apache pour activer SSL sur le port 443.
Pour celà vous pouvez vous inspirez de la conf suivante :

<VirtualHost *:443>
    ServerName www.monblog.com
 
    SSLEngine On
    SSLCertificateFile    /chemin/vers/fichier/cert
    SSLCertificateKeyFile /chemin/vers/fichier/pem
    SetEnvIf User-Agent ".*MSIE.*" nokeepalive ssl-unclean-shutdown
 
    DocumentRoot /var/www/monblog
 
    <IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteRule !^/wp-admin/(.*) - [C]
        RewriteRule ^/(.*) http://www.monblog.com/$1 [QSA,L]
    </IfModule>
 
</VirtualHost>

Vous pouvez également ajouté une règle de réécriture pour forcer l’utilisation de https lors de la saisie d’une URL de l’admin :

<VirtualHost *:80>
    ServerName www.monblog.com
    DocumentRoot /var/www/monblog
 
    <Directory /var/www/monblog >
        <IfModule mod_rewrite.c>
            RewriteEngine On
            RewriteBase /
            RewriteCond %{REQUEST_FILENAME} -f [OR]
            RewriteCond %{REQUEST_FILENAME} -d
            RewriteRule ^wp-admin/(.*) https://www.mysite.com/wp-admin/$1 [C]
            RewriteRule ^.*$ - [S=40]
        </IfModule>
    </Directory>
</VirtualHost>

Et voila le tour est joué, il suffit désormais d’accéder à l’admin via l’addresse suivante :

https://votre-blog.com/wp-admin

Il est également possible de passer par un plugin Admin SSL. Mais il n’est malheureusement compatible qu’avec les anciennes versions de WordPress. Et puis bon, pour une ligne à ajouter dans la config, je vois pas l’intérêt d’installer un plugin qui a de grande chance de ralentir votre wordpress.

source: http://codex.wordpress.org/Administration_Over_SSL