Blog Pastel.Pro - Solutions Web

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

Marc Farré — Sun, 16 Jan 2011 09:41:39 +0000

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.

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

Marc Farré — Tue, 07 Dec 2010 09:14:29 +0000

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

dump de votre base de donnée MySQL
création d'une archive de la BDD dans le répertoire que vous aurez choisi
création de la liste des fichiers à sauver (vous pouvez demander à sauver touts vos fichiers accessibles en FTP)
création d'une archive ZIP de ces fichiers qui inclue l'archive de la BDD préalablement sauvée
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 !

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

Marc Farré — Mon, 04 Oct 2010 14:23:21 +0000

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

HTML

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 :

"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'; }

Comment tester un site sur la majorité des navigateurs ?

Marc Farré — Mon, 27 Sep 2010 14:28:31 +0000

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

Android : installer le SDK d'Android (cf tutoriel d'alsacréation).
Iphone : on peut installer sur Mac l'Iphone simulator de l'iOS SDK qui est le seul simulateur fidèle.
Opera mobile : il y a le site Opera mini simulator, ou mieux, l'opera mobile emulator à installer sur l'ordinateur.

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 :

Plugin jQuery d’alignement vertical sans tableau

Marc Farré — Tue, 21 Sep 2010 09:28:45 +0000

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('

');

	            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

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

Marc Farré — Sat, 21 Aug 2010 09:39:48 +0000

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

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)

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)

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

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

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

Marc Farré — Sun, 08 Aug 2010 20:36:46 +0000

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

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.

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

Marc Farré — Mon, 26 Jul 2010 08:11:55 +0000

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

Connectez-vous à votre profil Facebook
Allez à la page facebook permettant de créer votre page pro (ici)
Sélectionnez l'entreprise locale correspondant à votre activité
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

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

et rentrer ici le titre et le code HTML/CSS de la page
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 , 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 :

allez sur cette page
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

hyperarts.com
lorrainesiew.wordpress.com
fr.insidefacebook.com : cette page et celle-ci
blog.regionsjob.com
devblog.fr
facebook france
et surtout mon expérience !

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

Marc Farré — Wed, 14 Jul 2010 08:29:35 +0000

Comment afficher une vidéo sur une page internet en combinant les technologies HTML5 avec la balise 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 :

HTML5 MP4
HTML5 WebM
HTML5 OGG
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 :

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).
Faire une capture de la vidéo au format png, de la même taille que la vidéo.
Télécharger le script gratuit et open source videojs et le décompresser.
É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.
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 :

Un formulaire de recherche avec css et jquery

Marc Farré — Mon, 05 Jul 2010 08:24:23 +0000

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