Si vous avez déjà développé un chat, un livre d’or ou tout autre type de moyen de feedback, vous avez été confronté au problème de l’affichage de la date de publication du message. Comment faire pour qu’elle soit affichée sans avoir une date classique et barbante comme : 29/06/2011 15h26 mais plutôt quelque chose du style : « il y a moins d’une minute », comme le font Twitter ou Facebook par exemple ?
On imagine déjà du parsage, des algos… Eh bien en fait oui, mais pas besoin de le faire vous-mêmes, timeago peut le faire à votre place.
On pourra apprécier la simplicité d’utilisation du plugin, pour un résultat assez simple mais correct.
Voici l’utilisation la plus utile que l’on peut faire du plugin.
Vous remarquerez au passage l’utilisation de différents types de format de date.
Afin d’avoir le résultat en français j’ai traduit les quelques mots clés contenu dans la librairie. L’archive que je propose contient donc la version française.
La petite particularité est l’option :
jQuery.timeago.settings.allowFuture = true;
Qui permet de faire une sorte de décompte pour un évènement. Je n’ai pas encore trouvé d’application pertinente mais il y a de l’idée 😛
Si d’une manière ou d’une autre vous êtes amené à partager un espace d’échange de fichiers avec plusieurs personnes via une interface web, mais que vous n’avez pas envie d’avoir la simple vue « Index of » par défaut, voici un projet très complet de gestion de documents en ligne.
ElFinder permet de parcourir les dossiers à partir d’un racine bien définie (coté PHP ou Python), de télécharger, de visualiser et de modifier des fichiers distants sans avoir à les télécharger pour la plupart.
Plusieurs modes sont disponibles : dans une « fenêtre » simulée à l’aide de JQuery UI par le biais d’un widget, ou le mode classique. Par conséquent, vous l’aurez compris, le plugin nécessite d’utiliser JQuery UI en plus de JQuery.
ElFinder permet une gestion des droits que l’on attribue aux utilisateurs anonymes par le biais d’un fichier de configuration PHP ou Python ( connector.php ou connector.py). Vous trouverez toutes les informations relatives aux options sur le site de elFinder. Pour ce type de plugin mieux vaux être sûr de sa config, à mon avis même si les risques se limitent aux fichiers présents dans le dossier file/ (qui peut être positionné n’importe où).
J’ai volontairement retiré les droits d’écriture et de suppression à tout le monde pour éviter les mauvaises surprises. Si vous ne voulez plus avoir cette limitation il vous suffit de télécharger l’archive et de la décompresser dans votre serveur web.
Voici un aperçu rapide de l’interface de l’application une fois qu’il y a quelques fichiers dedans :
Modialog est un plugin JQuery qui permet de faire des popups « à la twitter » (la transparence en moins) très simplement. N’importe quel évènement peut être le déclencheur (click ou mouseover par exemple). La popup peut contenir tous types de contenus images, boutons, formulaire… On pourrait très bien imaginer y mettre un formulaire de contact par exemple.
Le style de base de la popup est soigné et très sobre à la fois, il peut donc s’adapter à beaucoup de designs, mais s’il ne vous convient pas, vous avez la liberté de le changer et/ou de l’améliorer simplement.
Voici un exemple basique d’utilisation de la librairie :
Si vous souhaitez un exemple un peu plus complet : Demo
Voici des exemples en images du rendu de base. Tout en sachant que je n’ai pas du tout personnalisé le CSS. Imaginez-les avec le CSS de votre site Internet 😛
Il s’agit donc ici d’un plugin qui va très vite s’imposer dans mes applications web.
Le code QR est un code-barres à deux dimensions. Destiné à être lu par un lecteur de code-barres QR ou un smartphone, il a l’avantage de pouvoir stocker plus d’informations qu’un code à barres simple , et surtout des données directement reconnues par des applications. Ainsi le QR permet par exemple d’ouvrir un navigateur à une page prédéfinie, de lancer une application ou encore décoder un message. JQuery Qrcode est un plugin JQuery qui permet de générer des code QR simplement.
Tous les développeurs qui ont déjà travaillé sur des sites Internet qui doivent être visibles depuis plusieurs types de supports (comme une tablette ou un smartphone) ont déjà eu le problème des lignes de textes qui se superposent quand la résolution devient trop petite. fitText est justement pensé pour ne plus avoir ce type de problème.
Il sait adapter la taille de la police en fonction de la résolution de l’écran. Un peu comme le fait JQuery mobile.
Pour l’utiliser, après avoir inclus le plugin dans votre code il vous suffit de faire un simple appel javascript.
$("#monElement").fitText(0.8);
monElement doit avoir une largeur extensible : exprimé en % afin que le plugin fonctionne. Ici 0,8 est le taux d’agressivité de la police.
fitText va très vite devenir un plugin indispensable à tout site Internet.
Et voila, adieu les problèmes de superposition de texte !
Google tient maintenant compte de la vitesse de chargement des pages pour leur moteur de recherche. Les pages rapides ont tendances remonter dans la liste des résultats, tandis que les autres se perdent dans les fins fonds des listes de résultats… 😛
Tout d’abord, revenons aux fondamentaux. Une page web c’est un texte structuré qui est compris et afficher d’une certaine manière par notre navigateur. Le visiteur demande une page, par le biais de requête HTTP et le serveur construit la page et l’envoie au client. On remarque que nous pouvons agir sur la construction de la page, en optimisant nos codes PHP, JSP ou autre et sur le temps de transfert de la page au client. En effet le temps de transfert de la page et dépend entre autre taille de celle-ci, donc au nombre de caractères qu’elle contient. Nous allons donc mener une chasse aux caractères 😛
Minification de code
Pour réduire la taille de nos pages nous pouvons minifier nos codes CSS et JavaScript (faites une sauvegarde avant). Pour cela nous pouvons utiliser le minifieur de css suivant. Celui-ci enlèvera tous les commentaires et les retours la ligne. Ceux-ci ne sont utiles qu’aux développeurs. De mme pour le JavaScript grâce au compresseur JavaScript/ (cocher Shrink variables, mais pas base62 encode). En moyenne, nous avons gagner 40 50% sur la taille de nos fichiers tout en ayant le mme comportement.
Regroupement du code
Afin de limiter le nombre d’accès des fichiers différents pour afficher une page, il est préférable, dans la limite du possible de limiter le nombre de fichier JavaScript et CSS quitte avoir de plus gros fichiers.
Les images
Tout d’abord, il ne faut jamais redimensionner une image lors de son affichage. Ceci ralentit le temps d’affichage et peu nuire la qualité de celle-ci. Il vaut mieux stocker l’image sous la taille voulue, quitte la stocker plusieurs fois sous plusieurs tailles différentes.
Pour toutes les images que vous utilisez plusieurs fois par pages, le mieux est de créer une classe CSS du type :
.icone-nomimage{
background:url(images/monimage.png) center right no-repeat;
padding:0 16px 0 0;
white-space:nowrap;
}
Pour appliquer l’icone votre span, div ,a il suffit de lui ajouter la classe css icone-nomimage. Contrairement la balise img le css ne chargera qu’une seule fois l’image depuis le fichier, par conséquent tous les éléments de la classe icone-nomimage verront leur image s’afficher au mme moment et non les un aprs les autres. Au niveau de l’interface graphique, de plus en plus d’images sont utilises. Le rendu est beau mais plus lent charger. Le logiciel suivant : caesium/ (uniquement pour windows pour le moment) permet de les compresser jusqu’à 80% sans perte visible de qualité. Méfiance toutefois sur la gestion de la transparence. Voici un exemple sur une photographie :
23kb
Le gain sur une interface complète peut être assez intéressant. Et enfin voici une des nouvelles librairies donc nous avons parlé en début d’article. jQuery image Preloader Plus Callbacks est un plugin JQuery qui permet de faire du pres-caching des images de l’application. Son fonctionnement est simple comprendre; Une fois que le visiteur a entièrement chargé la page qu’il visite on va commencer charger les images présentes sur les autres pages du site sans les afficher. Cette action permet de mettre les images dans le cache du navigateur et de les afficher instantanément quand le visiteur en aura besoin. Pour les images hors css il faut préciser lesquelles on veux charger, pour celle du css une fonction permet de toutes les charger.
Chargement différé du JavaScript
Lors du chargement d’une page web les fichiers javascript sont chargés en mme temps que le code HTML, dans l’ordre d’apparition. Par conséquent si vous avez énormément de code JavaScript dans votre header la page va rester blanche pendant un petit moment. La librairie Head js permet de pallier au problème en chargeant le JavaScript en différé, comme une image. Cela permet d’afficher la page avec le style css, et donc de faire croire l’utilisateur que le site est prêt, alors qu’il ne le sera réellement que quelques secondes aprs. (mentir c’est mal :P) Vous pourrez la tester par vous mme l’adresse suivante http://headjs.com/test/script.html. Pour avoir des résultats concluant actualisez en faisant ctrl+F5 (vide le cache avant d’actualiser).
Compression des pages la volée
Afin de gagner encore un peu sur la taille de vos pages web, si vous utilisez PHP vous pouvez ajouter au début de votre/vos point(s) d’entre la ligne suivante :
ob_start("ob_gzhandler");
Ceci permet de compresser entre 15 et 30% votre page web. Malheureusement IE 6 sous windows XP SP1 ne comprendra rien, mais bon comme le support est fini on peut imaginer qu’il tend disparaitre
Avec Codigniter vous pouvez mettre en place simplement un système de pagination pour afficher vos informations par paquets. Tout cela sans se prendre la tête et se noyer dans des dizaines de lignes de code.
Dans un premier temps il créer le model. Pour cela nous allons utiliser la classe active record de CodeIgniter.
class model extends CI_Model {
function __construct()
{
// Call the Model constructor
parent::__construct();
}
public function getAll($debut=0) {
return $this->db->select('*')->from('message')->order_by("id", "desc")->limit(30, $debut)->get()->result();
}
public function count($where = array()) {
return (int) $this->db->where($where)->count_all_results('message');
}
}
// A vous de mettre en page vos messages
var_dump($messages);
// pour afficher vos lien de paginations
echo $pages;
Vous aurez un beau système de pagination. Si jamais vous devez toujours passer des paramètres en plus à votre contrôleur vous devez changer quelques lignes :
function liste($param1,$param2,$nb=0) {
...
$config['base_url'] = base_url() . "/index.php/controlleur/liste/$param1/$param2/"; // ajout des params
...
$config['uri_segment'] = 5; // 3+ le nombre de param
...
}
Dans un premier temps voici un exemple de petite base de données. Par exemple la base de données suivante
CREATE DATABASE `tuto` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `tuto`;
CREATE TABLE IF NOT EXISTS `message` (
`id` int(8) NOT NULL AUTO_INCREMENT,
`sujet` varchar(255) NOT NULL,
`message` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Maintenant que la base est prête nous alors configurer CodeIgniter pour qu’il puisse s’y connecter.
Rendez-vous dans le fichier : application/config/database.php
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'VOTRE LOGIN MYSQL';
$db['default']['password'] = 'VOTRE MOT DE PASSE MYSQL';
$db['default']['database'] = 'tuto';
$db['default']['dbdriver'] = 'mysql';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE; // à passer à FALSE une fois le dev fini
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;
Maintenant le framework peut en théorie se connecter à votre base.
Les configurations systèmes
Pour un fonctionnement optimal de CodeIgniter il y a plusieurs configurations à faire.
Pour les config suivantes rendez-vous dans le fichier /application/config/config.php. Et là beaucoup de choses à changer.
//ligne 17
$config['base_url'] = 'http://localhost/outweb/';
//ligne 60
$config['url_suffix'] = '.html';
//ligne 72
$config['language'] = 'french'; // si vous changez cette valeur il faudra aller chercher les traduction, si vous avez la flemmes ne faites rien ici
//ligne 227
$config['encryption_key'] = 'UN TRUC BIEN COMPLIQUE AVEC DES 1233 ET des !#?$_-éà@';
//ligne 282
$config['global_xss_filtering'] = TRUE;
D’autres paramètres de sécurité sont disponibles mais je les expliquerai dans un autre post.
Les autoloads
Codeigniter permet l’utilisation de librairies, helpers, et de fichiers de config perso.
On peut charger dans le code directement chacun des fichiers de configuration de l’application mais certains d’entre eux sont indispensables sur chacunes de nos pages. Autant dire à CodeIgniter de les charger automatiquement.
Voici selon moi le minimum indipensable.
Dans un premier temps il va falloir télécharger le fameux framework. Le mieux étant de prendre la dernière mouture. Téléchargement du framework.
Dezipper l’archive et copier le dossier qui est dedans à la racine de votre répertoire www.
Pour plus de simplicité nous allons le renommer outweb.
Supprimer le dossier user_guide qui contient une copie de la documentation en ligne de CodeIgniter.
Configuration
Il y a trois grandes parties à configurer dans CodeIgniter :
Une fois les quelques configs précédentes effectuées votre CodeIgniter est prêt.
Si vous vous rendez à l’adresse http://localhost/outweb/ vous aurez le message de bienvenue de CodeIgniter
Nous allons donc pouvoir commencer notre application.
Comme vous le savez surement CodeIgniter est basé sur un model MVC. Par conséquent il est préfèrable de garder cette approche tout au long du développement.
Peity est un petit plugin JQuery ( 2ko ) qui permet de réaliser des graphiques sous forme de fromages, de lignes, ou de simplement barres .
Après avoir inclus votre fichier javascript dans votre page après JQuery, vous pouvez générer vos graphiques.
Pour un graphique en barre :
Dans votre code HTML :
5,3,9,6,5,9,7,3,5,2
Dans le span vous avez toutes les valeurs de votre graphique
Dans votre code Javascript :
$(« .bar »).peity(« bar »);
Voici le type de graphique obtenu :
A savoir que pour chaque type de graphique des options comme width, height ou radius permettent d’ajuster la taille des graphiques à vos attentes.
Si vous êtes un habitué à JQuery cette syntaxe ne vous choquera pas sinon reportez-vous à la page suivante pour voir les sélecteurs possibles en JQuery : Liste des selecteurs
