URL rewriting avec un .htaccess – initiation par un exemple simple

L'URL rewriting est une technique incontournable pour permettre un bon référencement et qui permet d'améliorer la lisibilité des liens vers vos pages.

Exemple simple

Créez un fichier .htaccess à la racine de votre site contenant :

Options +FollowSymlinks
RewriteEngine on
RewriteRule ^page/([_a-z0-9]*).html$  index.php?param=$1 [L]

Maintenant, si vous allez sur http://www.monsite.ext/page/exemple.html ce sera la page http://www.monsite.ext/index.php?param=exemple qui sera affichée.

Pour aller plus loin

Je vous conseille l'excellent article de Webrankinfo qui expliquer clairement les différentes méthodes autorisées.

Partager cet article : Autres

script PHP de sauvegarde de site internet – MySQL dump et création d’une archive ZIP des fichiers du serveur

Ce script permet de sauvegarder très rapidement votre site internet. Vous allez avec votre navigateur sur la page du script PHP et celui-ci va effectuer automatiquement les actions suivantes

  1. dump de votre base de donnée MySQL
  2. création d'une archive de la BDD dans le répertoire que vous aurez choisi
  3. création de la liste des fichiers à sauver (vous pouvez demander à sauver touts vos fichiers accessibles en FTP)
  4. création d'une archive ZIP de ces fichiers qui inclue l'archive de la BDD préalablement sauvée
  5. affichage d'un lien permettant de télécharger l'archive ZIP

Ce script est entièrement fonctionnel, mais il mériterai d'être amélioré (affichage de la liste des archives, permettre de les supprimer, …).

N'hésitez pas à me suggérer des améliorations.

Téléchargements

Pastel Backup v1.0

Utilisation

  • Sur votre serveur, créez les répertoires suivants (par exemple) :
    • /sauvegardes
    • /sauvegardes/MySQL
    • /sauvegardes/completes
  • Vérifiez les droits pour qu'ils soient accessibles en écriture
  • Téléchargez et dézippez Pastel Backup
  • Ouvrez les 3 fichiers avec un éditeur en UTF-8 :
    • pastel-backup.php : personnalisez les variables après //PARAMÈTRES
    • .htaccess : donnez le chemin de .htpasswd
    • .htpasswd : paramétrez votre login et mot de passe (génération sur ce site par exemple)
  • Uploadez ces fichiers dans /sauvegardes
  • Testez en lançant le fichier /sauvegardes/pastel-backup.php !
Partager cet article : Autres

Appliquer des attributs CSS seulement à un navigateur et/ou une version

Il existe de nombreuses possibilités pour cibler un navigateur avec CSS :

HTML

<!--[if IE 5.0]> pour IE 5.0 <![endif]-->
<!--[if IE 5.5000]> pour IE 5.5 <![endif]-->
<!--[if IE 6]> pour IE 6.0 <![endif]-->
<!--[if IE 7]> pour IE 7.0 <![endif]-->
<!--[if IE 8]> pour IE 8.0 <![endif]-->
<!--[if gte IE 7]> pour IE 7 et supérieur <![endif]-->
<!--[if lt IE 7]> pour IE inférieur à IE 7 <![endif]-->
<!--[if lte IE 6]> pour IE 5.0, IE 5.5 et IE 6.0 mais pas IE7.0 <![endif]-->

On peut alors charger un fichier CSS dans une de ces conditions.

Mais ça ne fonctionne que pour Internet Explorer.

Javascript

Avec jQuery, la fonction jQuery.browser permet de cibler un navigateur et une version.

Par exemple, on peut l'utiliser ainsi :

if (jQuery.browser.msie && parseInt(jQuery.browser.version) < 7) $('body').addClass('msieLte6');

Mais jQuery.browser est voué à disparaitre dans quelques années.

PHP

C'est la solution la plus sûre et qui marche avec tous les navigateurs.

Voici le code que je met pour la balise <body> :

<body class="<?php
class Browser
{
    private $props    = array("Version" => "unknown",
                                "Name" => "unknown",
                                "Agent" => "unknown") ;
    public function __Construct()
    {
        $browsers = array("firefox", "msie", "opera", "chrome", "safari",
                            "mozilla", "seamonkey", "konqueror", "netscape",
                            "gecko", "navigator", "mosaic", "lynx", "amaya",
                            "omniweb", "avant", "camino", "flock", "aol");
        $this->Agent = strtolower($_SERVER['HTTP_USER_AGENT']);
        foreach($browsers as $browser)
        {
            if (preg_match("#($browser)[/ ]?([0-9.]*)#", $this->Agent, $match))
            {
                $this->Name = $match[1] ;
                $this->Version = $match[2] ;
                break ;
            }
        }
    }
    public function __Get($name)
    {
        return $this->props[$name] ;
    }
}
$browser = new Browser ;
echo 'browserName-'.$browser->Name.' browserVersion-'.intval($browser->Version) ;
?>">

Ensuite, en CSS, je cible de cette manière :

.browserName-msie.browserVersion-6 #elementId {
    attribut: 'valeur';
}

Partager cet article : Autres

Comment tester un site sur la majorité des navigateurs ?

En fonction des navigateurs, des versions de ceux-ci et du système d'exploitation, un site peu s'afficher différemment.

Donc avant publication de celui-ci, il convient de le tester dans la majorité des situations.

Pour ce faire, il faut :

1- avoir un Mac

Car un même navigateur s'affichera différemment suivant le système d'exploitation, et le Mac OS X n'est pas virtualisable à ma connaissance.

2- un logiciel de virtualisation pour tester sur Linux et Windows

Pour éviter d'avoir plusieurs ordinateurs.

Par exemple, Virtualbox est gratuit et fait très bien l'affaire.

3- avoir Windows Vista ou Seven

Pour pouvoir le virtualiser et installer internet explorer 9.

4- installer les principaux navigateurs avec les principales versions

Aujourd'hui, je teste sur :

  • Firefox 3.0 et 3.6
  • Chrome dernière version
  • Safari dernière version
  • Opera dernière version
  • Internet explorer 7, 8 et 9

Et internet explorer 6 ?
J'ajoute le bandeau ie6nomore pour expliquer que, comme facebook et beaucoup d'autres, j'arrête le support de ce navigateur obsolète.

Pour tester IE 7 et 8, pas besoin de les installer : sur IE 9, il suffit d'aller dans les "outils de développement", et cliquer sur "Mode de navigateur". Par contre, dans certains cas, il peut y avoir des différences entre le mode de compatibilité et le vrai IE7 ou 8 intégré avec le système d'exploitation (cf l'article de jpvincent). Donc je conseille de faire un ultime test sur des machines virtuelles contenant le vrai IE7 et IE8 avant de publier le site.

5- tester sur les smartphones

Et sans mac ou sans installer tous ces navigateurs ?

C'est quand même possible d'avoir des captures d'écran (mais ça ne permet pas de tester du code javascript par exemple) grâce à des sites internet :

Partager cet article : Autres

Plugin jQuery d’alignement vertical sans tableau

Il existe de nombreuses solutions sur le net pour compenser avec jQuery l'absence d'attribut CSS quand on n'utilise pas de tableau, mais toutes celles que j'ai trouvé on un bug dans certaines conditions : position: absolute risque de faire sortir le texte du cadre, margin-top fait descendre aussi le conteneur parent, problème avec le padding dans certaines configurations css, …

D'où pastel-vAlign, que j'ai testé dans de très nombreuses situations.

Le code du plugin jQuery

    $.fn.vAlign = function() {
        return this.each(function(i){
            $(this).children().wrapAll('<div class="pastel-vAlign" style="position:relative; margin: 0; padding: 0;"></div>');
            var jWrap = $(this).children('div.pastel-vAlign');
            var ph = $(this).innerHeight();
            var dh = jWrap.height();
            var mh = Math.round((ph - dh) / 2);
            jWrap.css('top', mh);
        });
    };

Utilisation

$('#element').vAlign();

#element doit avoir la hauteur de la zone dans laquelle on veut centrer l'élément enfant qui est dedans. L'élément enfant, lui, ne doit pas avoir de hauteur définie.

Donc le css doit être du type :

#element {height: 100px}

et pas "#element * {height: 100px}" par exemple

Demo

Voir la démo de pastel-vAlign

Partager cet article : Autres

Frameworks open source pour développer des applications fonctionnelles sur plusieurs os de smartphones (iphones, android, …)

Créer une appli pour smartphones compatible pour toutes les plateformes, sans avoir à apprendre le langage spécifique pour l'OS, c'est le rêve du développeur…

Mais ça devient de plus en plus possible pour des petites applications simples grâce aux nombreux frameworks disponibles. Ces applis sont développées avec des langages destinés au web (de plus en plus, html5 et javascript), mais fonctionnent offline.

Ces applications n'auront jamais la puissance d'une application native et les performances seront toujours en deçà, mais ça peut être très pratique dans de nombreuses situations.

J'ai sélectionné 3 frameworks qui sont, je pense, les plus aboutis aujourd'hui.

Tableau comparatif

Produit
 PhoneGap
 Titanium (Appcelerator)
 Rhodes (Rhomobile)
Licence
 Open-source (MIT License) Open-source (Apache Public v2.0) Open-source (MIT License)
Prix
 Gratuit Gratuit / $199 / $499 Gratuit / $1000
Smartphones
 iPhone, Android, BlackBerry, Symbian, Palm iPhone, Android iPhone, BlackBerry, Windows Mobile, Symbian et Android
Languages
 HTML, JavaScript, CSS HTML, JavaScript, CSS HTML, Ruby
Apparence native
 non oui oui
Déploiement
 manuel manuel RhoSync

PhoneGap

PhoneGap screenshot

Tableau des fonctionnalités des smartphones actuellement pris en charge :

rouge : pas possible pour cet appareil
jaune : en cours de dévelloppement
vert : fonctionnel

  iPhone Android Blackberry
(OS 4.5)		 Symbian Windows
Mobile

Palm
Geolocation





Accelerometer

OS 4.7
HTC only 
Camera





Vibration





Contacts API





SQLite Functionality





XMPP API





File system IO




Read only
Gesture / Multitouch
Android 2.0



SMS API





Telephone API





Copy / Paste





Sounds (Play)





Sounds (Record)





Bluetooth





Wifi Adhoc connection





Maps





Orientation change





Network availability





Magnetometer  3GS only




Storage





Source : http://wiki.phonegap.com/Roadmap

PhoneGap a été "conçu pour disparaître". En effet les APIs de PhonePap sont identiques aux API de HTML5 qui ne sont pas forcément encore implémentées dans les navigateurs mobiles.

Les applications ressemblent un peu à des pages web et PhoneGap est un peu apparenté à un navigateur.

Le projet jQuery Mobile sera compatible avec PhoneGap, ce qui permettra d'utiliser la puissance de jQuery en plus.

Titanium (Appcelerator)

Titanium screenshot

Fonctionnalités supportées : géolocation, accelérometre, vibration, son (enregistrement et playback), camera, SQLite, multitouch, copier/coller, téléphone, fichiers locaux incluant les contacts et les photos.

Les applis faites avec Titanium sont compilées pour l'OS de destination. Elles paraissent donc plus natives que celles développées avec PhoneGap et sont moins gourmandes en ressources.

Contrairement à PhoneGap, Titanium expose directement les API natives du smartphone en JavaScript. Il faut donc s’attendre à des différences plus importantes entre les différentes plateformes, PhoneGap proposant des API plus génériques et communes à l’ensemble des plateformes. Mais dans tous les cas il y a autant de projets que de cibles techniques.

Rhodes (Rhomobile)

Rhodes screenshot

Tableau des fonctionnalités des smartphones actuellement pris en charge :

Rhodes capabilities

A la différence de ces derniers le navigateur local est utilisé et c’est le code Ruby ou Java (et non JavaScript) qui permet d’accéder aux fonctionnalités natives de l’appareil.

Ce sont de vraies applications natives ayant donc accès aux fonctionnalités telles le GPS, PIM contacts et camera.

Conclusion

Le choix du framework dépendra entre autres :

  • de vos habitudes de programmation (javascript pour PhoneGap et Titanium, Ruby pour Rhodes)
  • de l'importance d'avoir une application qui paraisse native (pour PhoneGap, ce n'est pas le cas)
  • des OS que vous voulez toucher (par ex, Windows mobile n'est pas encore géré par PhoneGap et Titanium)

Je n'ai pas parlé de Sencha Touch (HTML5, CSS3 et JS) qui est très prometteur aussi, car il ne permet pas de faire une application native : ça reste une application web. Par contre, il peut être utiliser en tant que framework javascript dans une appli PhoneGap ou Titanium par exemple.

Pour une appli nécessitant des ressources importantes comme la 3D, le framework ne sera pas adapté.

Sources

Partager cet article : Autres

Pastel Whois – script de whois en ajax à intégrer dans votre site web

Principe

Ce script permet d'intégrer dans votre site internet un moteur de recherche de noms de domaine libres ou pas.

Réalisé en ajax, il évite de recharger la page à chaque recherche.

Affichage du whois pour les noms de domaines non disponibles.

Possibilité de rechercher jusqu'à 35 extensions à la fois, dont les françaises. Ces extensions sont définies dans le fichier whois-server-list.php, donc vous pouvez en modifier la liste.

Le script est gratuit, et libre à vous de vous le customiser. N'hésitez pas à poster ici vos éventuelles contributions.

Exemple d'intégration

whois.pastel.pro et www.pastel.pro

whois.pastel.pro

Téléchargement

Pastel Whois version 1.2

Utilisation

Téléchargez, décompressez et uploadez sur votre serveur.

Le fichier index.php est utilisable directement pour comprendre le fonctionnement.

N'hésitez pas à poster pour me demander ce que vous ne comprenez pas.

Partager cet article : Autres

Tutoriel : Créer une page facebook pour son entreprise et faire sa promotion

Il existe de nombreuses pages web expliquant comment créer sa page Facebook professionnelle, mais je n'en ai trouvé aucune qui permette d'y arriver sans bidouiller, d'où ce post illustré qui explique pas à pas comment créer sa page entreprise et personnaliser sa page d'accueil avec du HTML.

Le principe

Vous avez déjà un profil (qui correspond à une personne physique) et vous créez une page pro à partir de ce profil qui sera administrateur de cette page. Vous pourrez rajouter des profils qui seront administrateurs après.

Remarque : Si vous avez déjà fait votre page pro sur un profil perso et que vous avez déjà des fans, suivez ce tuto pour le convertir en pro.

Le tutoriel

Création de la page
  1. Connectez-vous à votre profil Facebook
  2. Allez à la page facebook permettant de créer votre page pro (ici)
  3. Sélectionnez l'entreprise locale correspondant à votre activité
  4. Vous vous retrouvez sur votre page.
Remarques
  • En mode admin, votre page peut être "affichée" ou "modifiée" : 2 états dans lesquels nous basculeront successivement dans la suite des explications grâce aux liens "Modifier : Page" et "<- Afficher la Page".
  • Si vous ne savez plus comment accéder à votre page, cliquez sur "compte" (en haut à droite) -> "Gérer les Pages" -> "Aller à la page"
Création d'une page d'accueil personnalisée en HTML

MISE À JOUR : FBML est en train d'être abandonné au profit de iframe

  1. dans "modifier page" -> "Applications" -> "Static FBML" (tout en bas) : cliquer sur "Ajouter l'application"
    Static-FBML
  2. Puis "Accéder à l'application" 

    et rentrer ici le titre et le code HTML/CSS de la page
  3. dans "<- Afficher la Page", réorganiser les onglets : en cliquant sur l'icône en forme de crayon pour en supprimer et en les glissant pour changer l'ordre (on ne peut pas déplacer "Mur" et "Infos").

Remarque (17/12/2010) : il n'est malheureusement plus possible de définir l'onglet qui va s'afficher par défaut : on arrive toujours sur le mur.

Ajouter des administrateurs

Dans "Modifier : Page" -> "Gérer les administrateurs" : ajouter l'adresse mail d'un profil facebook

La promotion de la page

Votre but : avoir un maximum de fan. C'est d'autant plus intéressant que sur la page du profil public de chaque fan est affiché un lien en dur vers votre page facebook (s'il ne l'a pas rendu privé).

Avoir un contenu intéressant et vivant
  • Créer des événements Facebook pour communiquer sur vos promotions en cours, …
  • Faire des pubs Facebook ciblées ("Social Ads" – payant)
  • Ajouter des sondages, concours, … pour faire participer les gens
Installer un bouton "j'aime" sur son site ou blog

Utilisez les codes fournis par facebook.

Ou suivez le tutoriel de goopple : simplement, au niveau du code "connect.facebook.net/en_US/all.js" qui est à mettre après le <body>, il faut remplacer en_US par fr_FR

Avoir une URL simplifiée

Quelque soit le nombre de fans, vous pouvez avoir une adresse simplifiée :

  1. allez sur cette page
  2. cliquez sur "Définissez un nom d'utilisateur pour vos Pages."

Exemples de pages Facebook pour sa société

La page de pastel.pro

Le site facebookshowcase.net qui permet de donner des idées


Sources

Partager cet article : Autres

Intégrer une vidéo dans un site web, compatible ie, firefox, safari, chrome, opera, iphone, ipad, android, …

Comment afficher une vidéo sur une page internet en combinant les technologies HTML5 avec la balise <video> et flash pour les navigateurs non compatibles ?

Avec un code HTML qui affiche les liens vers 3 formats de fichiers vidéo dans cet ordre :

  1. HTML5 MP4
  2. HTML5 WebM
  3. HTML5 OGG
  4. Flash MP4 (pas besoin de FLV depuis la version 9 rev 3 de flash)

Le navigateur sautera le format qu'il ne connait pas jusqu'à trouver celui qu'il sait lire.

Un script javascript permettra d'afficher les boutons de contrôle (plein écran, …).

Méthode :

  1. Encoder la video dans ces 3 formats : MP4, WebM (VP8) et Theora (Ogg/Ogv) avec le logiciel gratuit et open source mirovideoconverter (mac et windows).
  2. Faire une capture de la vidéo au format png, de la même taille que la vidéo.
  3. Télécharger le script gratuit et open source videojs et le décompresser.
  4. Éditer le fichier demo.html pour remplacer les fichiers "oceans-clip" par vos liens (attentions à changer .ogg par .ogv) et adaptez les "width" et "height" à ceux de votre vidéo.
  5. Charger les vidéos sur un serveur performant comme amazon s3 par ex.

Démo

Sources

Expliquent très bien le fonctionnement et donnent des détails qui peuvent être utiles – Anglais :

Partager cet article : Autres

Un formulaire de recherche avec css et jquery


Voir la démo

Télécharger

Le script jQuery permet :

  • de conserver le style du hover (ici fond bleu dégradé) une fois qu'on a pris le focus, même si la souris n'est plus au-dessus et de la libérer quand on perd le focus
  • d'effacer la valeur "Chercher …" quand on prend le focus, et de le réafficher si l'utilisateur a laissé le champ vide

Source remaniée

Partager cet article : Autres
Retourner au début

Blog Pastel.pro

Ce blog est destiné à partager notre expérience sur la conception de sites web (programmation, design, référencement, ...) aux webmasters. Chaque sujet présente l'essentiel, avec un minimum de texte.

Partager ce blog