Reset CSS: Tous les navigateurs au même niveau

Je vous fait part d’une petite découverte, mais qui m’a sortie d’un problème de décalage de 1px entre Firefox et le reste du monde des navigateurs.

Le reset CSS est un petit bout de code CSS qui permet de mettre tous les navigateurs sur la même base, et de réduire les erreurs de rendements.

Il en existe plusieurs, mais font tous la même chose. Vous pouvez le trouver ici.

Ensuite il suffit de faire un copier/coller de ce bout de code au début de votre fichier CSS.

Créer un site multilingue avec CodeIgniter

Version de CodeIgniter utilisé: 2.1.2

Les fonctionnalités souhaitées:

  • Affichage de la langue dans l’URL. Cela permet un meilleur référencement, avec un lien unique vers un contenu dans une langue donnée. (exemples: www.mondomaine.com/fr, www.mondomaine.com/en)
  • Détection de la langue du navigateur
  • Facilité d’évolution (ajouter une nouvelle langue)
  • Facilité d’utilisation pendant le développement

URI Language Identifier

Le vrai secret pour faire ce que l’on souhaite, est une extension de la bibliothèque Lang, disponible sur le wiki de CodeIgniter.

Cette extension permet d’afficher la langue dans l’URL et de modifier la config suivant cette langue. Si aucune langue n’est détectée, la langue par défaut est chargée.

Avec la fonctionnalité de base, on a déjà une bonne partie, mais nous n’avons toujours pas de détection de la langue du navigateur. Donc si la langue par défaut est l’anglais, qu’un utilisateur français accède à votre site sans langue spécifiée dans l’URL, il se retrouvera avec un site en anglais, alors que vous supportez aussi le français.

J’ai donc modifié cette extension afin qu’elle supporte la détection de la langue du navigateur lorsque aucune langue n’est précisée dans l’URL.

application/core/MY_lang.php

Voila, maintenant notre librairie répond parfaitement à nos attentes. Je vais maintenant vous expliquer comment la configurer, et comment l’utiliser sur votre site.

Configuration de la librairie

/application/config/config.php

$config[‘language’] représente la langue par défaut.

$config[‘language_abbr’] représente l’abréviation de la langue par défaut.

$config[‘lang_uri_abbr’] représente les langues acceptées par le site. Si vous souhaitez ajouter une nouvelle langue, c’est ici que ça se passe.

$config[‘lang_ignore’] permet de ne pas afficher la langue dans l’URL, et de seulement l’enregistrer dans un cookie. Ici cette fonctionnalité ne nous intéresse pas, donc FALSE.

application/config/routes.php

Maintenant il faut configurer les routes, puisque notre URL ressemble à ça : www.mondomaine.com/lang/controller/method/variables et ne correspond plus au modèle de fonctionnement de CodeIgniter: www.mondomaine.com/controller/method/variables.

Par contre, si vous souhaitez ajouter une nouvelle route, il faudra l’ajouter avant ces dernières et tenir compte de la langue. Exemple:

Voila maintenant tout est configuré et fonctionnel. Je vais maintenant vous comment utiliser tout cela.

Utilisation

Configuré c’est bien beau, mais comment je fais pour récupérer les bons textes suivant la langue ???

Tout se passe dans le répertoire application/language. Normalement vous avez un répertoire « english » qui est déjà créé. Il suffit de rajouter un nouveau répertoire pour chaque langue souhaitée.

Ensuite il faut créer un fichier de langue par répertoire de langue, ayant exactement le même nom et le suffixe « _lang ». Par exemple form_lang.php. Ce fichier de langue servira pour tous mes formulaires.

Ensuite le contenu de ce fichier est un simple tableau PHP.

application/language/francais/form_lang.php

application/language/english/form_lang.php

Maintenant il ne reste plus qu’à charger le bon fichier de langue dans le constructeur de votre contrôleur.

Pour l’utilisation, il suffit d’utiliser le helper présent dans l’extension de la librairie Lang:

Ensuite pour toutes les fonctions d’aide à la création d’URL (URL Helper), il faut utiliser base_url pour avoir l’URL du site (www.mondomaine.com), et site_url pour avoir l’URL avec la langue (www.mondomaine.com/fr).

Astuces

Pour les fichiers de langue en Français et autres, n’oubliez pas d’enregistrer en UTF-8 sans Bom afin d’éviter les erreurs.

Pensez à copier les fichiers de langue présents dans system/language/english vers vos nouveaux répertoires de langue afin d’avoir les erreurs affichées au moins en anglais.

Faire une recherche sur Geonames à partir de PHP

Geonames est une base de données géographiques sous licence Creative Commons qui contient plus de 8 millions d’éléments (villes, monument, parc, etc…).

Un webservice est mis à disposition afin de pouvoir récupérer tout un tas d’information facilement. Pour y accéder il suffit de créer un compte ici, tout est gratuit. Il y a une limite qui est très haute: 30 000 crédits par jour et 2000 crédits par heure. La taille du crédit change suivant le type de service web appelé, mais pour une recherche, un crédit = une requête.

Donc dans l’exemple qui suit nous allons rechercher « tour eiffel » et nous allons récupérer les coordonnés géographiques, ainsi que la traduction en Anglais.

Nous récupérerons les informations dans un XML.

Voila avec ce simple PHP on peut récupérer des informations sur une ville ou autre très rapidement.

Jetez un oeil au XML afin de voir toutes les informations potentiellement utilisables.

Bannir les bots phpMyAdmin et w00tw00t avec Fail2ban

Très régulièrement dans mes rapports de Logwatch je me retrouve avec des dizaines d’erreurs 404 générés par des bots qui essaient de trouver une version de phpMyAdmin, ou tout simplement une faille sur le serveur web.

Voici un exemple de rapport quotidien:

Comme vous pouvez le voir, un bon nombre de version de phpMyAdmin sont testées. Afin d’alléger mes rapports Logwatch et de bloquer un peu plus ces bots, j’ai mis en place deux nouveaux filtres sur mon Fail2ban.

Si vous ne connaissez pas Fail2ban, je vous invite à le découvrir tout de suite. Un petit outil génial qui permet de bannir (crée une règle iptables) un attaquant lorsqu’il répond à une certaine règle (par exemple quand une personne essaie de se connecter plusieurs fois à votre serveur SSH).

Filtre phpMyAdmin

Création du nouveau filtre /etc/fail2ban/filter.d/apache-phpmyadmin.conf:

Activer la règle dans /etc/fail2ban/filter.d/apache-phpmyadmin.conf

/etc/fail2ban/jail.conf

Si vous avez une version de phpMyAdmin d’installée sur votre serveur, changer la valeur de « maxretry » pour éviter de vous auto-bannir en cas d’erreur d’url.

Filtre w00tw00t

Pareil que pour phpMyAdmin, on crée notre filtre /etc/fail2ban/filter.d/apache-w00tw00t.conf:

On active maintenant notre nouveau filtre anti-w00tw00t dans /etc/fail2ban/filter.d/apache-phpmyadmin.conf

Un petit restart de fail2ban et c’est parti, on est plus (moins) embêté par ces bots.

Tester les filtres

Si vous voulez tester vos nouveaux filtres avant de les mettre en service, vous pouvez utiliser une commande fournit par fail2ban qui est fail2ban-regex:

 

Source: Banning phpMyAdmin bots using fail2ban

Créer un dégradé en CSS

A ce jour, aucune propriété CSS pour créer un dégradé existe au niveau de la W3C , donc chaque navigateur y va de sa petite propriété personnelle.

Nous allons donc voir ici, comme créer un dégradé simplement pour Firefox, Chrome/Safari, Opéra, ainsi que Internet Explorer!!! Oui mais pour la version 10, ca reste IE…

Chaque navigateur possède sa propriété, mais elles se ressemblent toutes et fonctionnent de la même manière.

Linéaire

Il existe 2 formes de dégradé, et nous allons commencer par la forme linéaire:

Sur chaque propriété il faut définir la direction du dégradé (ici top), ensuite la première couleur (#000000) et la deuxième couleur (#00a9e0).

Ce qui donne:

Le premier exemple est un dégradé partant de « top », le second de « left » et le dernier du coin en haut a gauche, donc « top left ».

Note:Si vous ne voyez pas de dégradé ou pas de différence entre ces trois blocs, mettez votre navigateur ou changez-en. Merci pour l’internet mondial 🙂

Afin de rester compatible avec les navigateurs vieillissants, il suffit de rajouter un background-color en tout début de votre classe ou id, afin de ne pas court-circuiter les autres propriétés.

Radial

Maintenant nous allons voir la deuxième forme de dégradé, qui est « radial », donc en forme de rond. Ca fonctionne exactement de la manière que pour les dégradés linéaires: une direction, une couleur de départ et une couleur de fin:

Ce qui donne:

Afin d’avoir un dégradé qui part du centre, il suffit de mettre la direction « center ».

Bonus

Et oui, vous pouvez mettre plus de deux couleurs à vos dégradés afin de créer des trucs totalement psychédéliques!

Hello Internet!

Salut,

Ça faisait quelques temps que j’en avais envie, donc je me lance dans la grande aventure du blog !

Ce blog aura pour principaux sujets Linux, plus particulièrement Debian, le développement web, Python et dans un futur plutôt proche je commencerai des billets sur l’entrepreneuriat puisque je vais lancer une startup avec mon collaborateur/acolyte de B2F.

Au passage cela me permettra de garder des petits de souvenirs de ce que je fais, et si je peux aider d’autres personnes avec mes articles, tout le monde est gagnant !