WebDesignerWall propose un tutoriel que je vous invite à découvrir permettant de créer rapidement des coins arrondis sur des images grâce à jQuery à la manière de CSS3 (rounded corners).

Cette solution permet de contourner les problèmes de compatibilités rencontrés avec certains navigateur comme Firefox.

Le code jQuery ajoute automatiquement le code HTML réalisant les coins arrondis aux images portant une certaines classe, de plus, il gère automatiquement l’ombre et masque l’image originale afin d’en empêcher la copie !

Un script que je vous recommande car très léger et très pratique !

En savoir plus…

La fonctionnalité de multitâche (multitasking) est nativement désactivée dans l’iOS 4 pour les modèles 3G d’iPhone pour des raisons de performances. En revanche, la fonctionnalité est bel et bien présente au sein de l’OS et vous pouvez facilement l’activer.

Le multitâche permet de lancer plusieurs applications simultanément et de passer d’une application à l’autre sans ralentir l’appareil (avec cependant un petit bémol pour les modèles 3G !)

Pour activer le multitâche sur votre iPhone 3G, suivez la procédure suivante :

1. Connectez-vous via SSH à votre appareil
2. Éditer le fichier N82AP.plist qui se situe dans root/System/Library/CoreService/SpringBoard.app/
3. Cherchez la ligne <key>multitasking</key> et remplacez la balise <false/> située juste au dessous par <true/>
4. Sauvegardez le fichier, déconnectez votre iPhone puis redémarrez le.
5. Le multitâche est activé, vous pouvez afficher le volet en double cliquant sur le bouton home

1stwebdesigner propose un tutoriel permettant de créer une ombre portée dynamique à base de CSS / Spriting / jQuery sur les éléments d’une page web en fonction d’une source lumineuse placée sur la page.

Ce n’est pas clair ? Je vous invite tout d’abord à jet un œil à cette page de démonstration exceptionnelle (n’oubliez de faire glisser l’ampoule après l’avoir allumée !).

Comme vous avez pu le constater, le script adapte l’angle ainsi que la profondeur de l’ombre portée en fonction de la position de la source lumineuse sur la page !

Tout simplement awesome ! Pour ceux qui désirent comprendre pas-à-pas comment réaliser ce type d’effet, je vous invite à consulter le tutoriel !

Voici une astuce publiée sur le forum de CodeIgniter qui permet de définir le timezone à utiliser par la base de données un seule fois pour tous les modèles de l’application.

Pour réaliser cette tâche, l’auteur à simplement dérivé la classe Model de CodeIgniter afin d’exécuter la requête SQL modifiant le timezone à la construction de l’objet. Ainsi, comme lorsqu’on utilise ACICRUD, les modèles de l’application doivent étendre la classe mère au lieu de la classe Model.

Voici l’exemple de code proposé par flaky :

class Master_model extends Model{
    public function __construct(){
        parent::__construct();
 
        $this->set_timezone();
    }
 
    public function set_timezone(){
        $this->db->query("SET time_zone='+0:00'");
    }
}
 
class Some_model extends Master_model{
    public function __construct(){
        parent::__construct();
    }
}

Voir le post original.

Présentation de Flattr

Flattr est un nouveau système de « digg-like social » permettant de valoriser et de monétiser la création de contenu sur le web. Le service offre en outre un moyen simple et innovant de rémunérer les auteurs tels que les blogueurs. Veuillez toutefois noter qu’à l’heure ou j’écris ce billet, Flattr est toujours en beta privée.

Si vous lisez ce tutoriel, j’imagine donc que vous disposez déjà d’un compte Flattr et que vous avez en votre possession votre User ID (affiché sur votre Dashboard Flattr).

Intégration d’un bouton Flattr à votre thème WordPress

Premièrement, il vas falloir installer le plugin Flattr pour WordPress disponible ici. L’installation est classique et ne nécessite aucune procédure particulière, utilisez simplement le gestionnaire de plugins de WordPress.

Une fois le plugin installé, un nouvel onglet nommé Flattr est apparu dans le menu Réglages de WordPress. C’est à partir de ce module que vous devez configurer le plugin et en particulier renseigner votre Flattr user ID.

Etant donné que nous allons voir comment ajouter manuellement le bouton Flattr à votre blog, laissez décochée la case « Insert Flattr button automagically« .

Modification des fichiers de votre thème

Désormais le plugin Flattr est correctement installé et configuré sur votre blog. L’étape suivante consiste à modifier les fichiers de votre thème afin d’ajouter l’appel au bouton Flattr et d’ajouter les styles CSS qui afficherons le bouton en haut à droite de chaque article.

1 : Édition du fichier CSS : cherchez et ouvrez le fichier wordpress/wp-content/themes/<nom de votre thème>/style.css et ajoutez en fin de fichier le code ci-dessous :

.flattr-container { float: right; margin-left: 15px; }

2 : Édition des templates : nous allons devoir rajouter l’appel au bouton Flattr dans chaque fichier de votre thème servant à afficher un billet. Ainsi, nous allons pouvoir décider d’afficher ou non le bouton sur chaque page de votre blog.

Pour commencer, ouvrez le fichier wordpress/wp-content/themes/<nom de votre thème>/index.php et cherchez l’appel à la fonction the_content().

Afin d’afficher le bouton, il suffit de rajouter avant l’appel de cette fonction le code ci-dessous :

<div class="flattr-container">
	<?php the_flattr_permalink() ?>
</div>

Pour afficher le bouton sur la page affichant un billet, vous devez répéter l’opération sur le fichier single.php puis sur les fichiers archive.php, category.php et tag.php s’ils existent pour votre thème. Ainsi, le bouton devrait être affiché sur toutes les pages de votre blog.

Notez que dans ces derniers fichiers, l’appel à la fonction the_content() a pu être remplacé par l’appel à la fonction the_excerpt() qui affiche un résumé de l’article. De la même manière ajoutez simplement le code avant l’appel à cette fonction

En résumé, cette méthode permet de contrôler l’affichage du bouton sur chaque type de page de votre blog et permet également d’appliquer des styles CSS personnalisés si vous désirez un affichage différent de l’affichage par défaut proposé par le plugin Flattr.

A lire également : Flattr : Retour d’expérience après 2 mois d’utilisation….

Si vous utilisez l’outil Google Webmaster Tools et que vous rencontrez l’erreur suivante lorsque vous tentez de valider votre site :

We’ve detected that your 404 (file not found) error page returns a status of 200 (Success) in the header.

Cela signifie que le code HTTP renvoyé par votre serveur sur vos pages inexistantes n’est pas le bon.

Il existe un moyen simple de vérifier en testant une URL inexistante sur votre domaine via l’outil Web-Sniffer. Le code de réponse doit obligatoirement être un 404 file not found si la page n’existe pas au lieu d’un 200 Success.

Si vous recevez bien un code 200, alors vous devez appliquer les corrections nécessaires à votre application pour qu’elle renvoie bien un code 404 dans ce cas de figure.

Si votre application utilise CodeIgniter…

Si vous rencontrez cette erreur avec CodeIgniter <= 1.7.2, vérifiez simplement que le fichier system/application/errors/error_404.php comporte bien la ligne de code ci-dessous à la toute première ligne :

<?php header("HTTP/1.1 404 Not Found"); ?>

Tutoriel ACICRUD #5

Depuis la version 1.1, Acicrud est capable de se connecter à n’importe qu’elle base de données configurée dans le fichier system/application/database.php.

Veuillez noter que cette fonctionnalité est totalement facultative et que la librairie travaillera avec votre base de données par défaut si vous ne définissez aucune base de travail dans votre modèle.

Afin d’utiliser une base de données différente de votre base de données par défaut, il suffit de spécifier le group à utiliser au constructeur d’ACICRUD. Dans notre exemple il s’agiera d’une base de données nommée « rescue_database« .

<?php
 
class Exemple_Model extends Acicrud {
 
    //CONSTRUCTOR   
 
    public function __construct()
    {
        parent::__construct('table_name', 'rescue_database');
    }
 
    //CUSTOM METHODS
 
}
 
?>

Lorsque pour une raison ou pour une autre vous n’avez plus accès à un utilisateur phpBB ayant le statut de fondateur sur votre installation phpBB, il devient alors difficile d’administrer pleinement votre forum. Il est également impossible de modifier le statut des administrateurs existants au rang de fondateur car seuls les fondateurs sont en mesure d’effectuer cette action !

Heureusement il existe un moyen radical qui consiste à modifier directement les données d’un utilisateur en base de données afin de lui octroyer le rang de fondateur.

Pour cela, rendez-vous sur l’interface d’administration de votre base de données.

Dans la plupart des cas, il s’agit de l’interface phpMyAdmin de votre hébergement.

Rendez-vous sur la table nommée phpbb_users (il se peut qu’elle porte un préfixe différent de phpbb_ si selon votre installation).

Cherchez ensuite la ligne correspondant à l’utilisateur a upgrader au rang de fondateur puis éditez la.

Il suffit dans un premier temps de modifier la valeur du champ user_type à 3 et de sauvegarder.

Grâce à cette opération votre utilisateur porte désormais le rang de fondateur mais il ne faut pas oublier de mettre à jour ses permissions afin qu’il puisse accéder pleinement au panneau d’administration de phpBB.

Afin de mettre à jour ses permissions, rendez sur le panneau d’administration de votre forum, puis dans l’onglet « Utilisateurs et Groupes » éditez votre propre compte. Vérifiez que le bouton radio fondateur est bien positionné sur « oui », puis envoyez le formulaire.

Et voilà ! Vos permissions ont été mises à jour et vous pouvez accéder pleinement à l’administration de votre forum phpBB

Savez-vous qu’il est très simplement possible de faire pivoter un site web selon un angle précis via du CSS et la propriété -moz-transform ?

La page web subiera une rotation dans sans totalité et le rendu sera fonctionnel au minimum sous le navigateur Firefox.

Voici le code permettant cette rotation, notez que vous devez adapter la valeur de la propriété width en fonction de la taille de votre page web.

body {
	-moz-transform:rotate(-30deg);
	height:auto;
	margin:10px auto;
	position:relative;
	width:1300px;
	z-index:1;
}

Démonstration

Cliquez-ici pour accéder à l’espace de démonstration de la rotation.

La problématique

Lorsque des animations Flash (SWF) utilisent des fichiers XML pour afficher du contenu dynamique et que ce même fichier XML est généré dynamiquement, il est classique que certains navigateurs gardent en cache l’un ou l’autre et n’affichent pas les modifications de contenu en temps réel.

Ce mécanisme de cache est tout à fait classique sur le web, en revanche il peut devenir problématique si les utilisateurs d’un Backoffice (par exemple) ne peuvent pas voir le rendu final de leurs modifications sans vider leur cache, surtout s’ils sont néophytes.

Heureusement il existe une directive Apache permettant d’interdire la mise en cache de certains types de fichiers. Cette détection, basée sur l’extension du fichier vas permettre d’envoyer des instructions (headers) au navigateur interdisant la mise en cache soit du fichier swf, soit du fichier xml, soit des deux. Ainsi, à chaque rafraichissement de la page, les deux fichiers seront re-téléchargés par le client.

Ce mécanisme garantit donc que les modifications du contenu de l’animation Flash sera systématiquement visible par le client.

Mise en place du code dans un fichier .htaccess

Les instructions Apache sont à placer dans un fichier .htaccess à la racine de votre serveur web. Vous pouvez ajouter ou supprimer des extensions à votre convenance, veillez simplement à les séparer par le caractère « |« .

Si vous n’avez pas de fichier htaccess à la racine de votre FTP, créez simplement un fichier nommé .htaccess à l’aide d’un éditeur de texte, puis transférez le via un logiciel FTP.

Voici le code à placer dans votre fichier

<FilesMatch "\.(swf|xml)$">
 ExpiresDefault A0
 Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
 Header set Pragma "no-cache"
</FilesMatch>