Étiquette : web Page 1 of 2

Temps de lecture : < 1 minute

JQPlot est un plugin JQuery qui permet de dessiner des graphiques dans vos pages HTML. Si vous faites des pages de statistiques sur vos pages Internet vous comprendrez rapidement quelles sont les applications et surtout en quoi il vous simplifie les choses. En effet, il vous suffit de lui donner les données et de décider quel type de graphique vous voulez obtenir en sortie et le tour est joué ! On peut facilement imager une fonction PHP (ou autre) qui va générer les données qu’il faut mettre en entrée de JQPlot à partir de votre base de données.

Voici quelques exemples de graphiques que l’on peut obtenir grâce à ce plugin:

Framework JQuery mobile

de arnaud

On août 16, 2011

dans Framework, JQuery

Temps de lecture : 2 minutes

Tous ceux qui ont déjà utilisé le dernier né de JQuery, à savoir JQuery mobile vont vraiment apprécier JqmPhp. En effet JqmPhp permet de simplifier une syntaxe assez lourde et surtout de fournir un code optimisé.

Travaillant actuellement sur une application web pour smartphone, je me suis fortement intéressé à ce framework pour rendre mon code plus clair.

Une fois que vous avez téléchargé le framework vous devez le configurer. A savoir que la version actuelle de JQuery mobile est la Alpha 4 mais que Jqmphpest conçu pour la Alpha 3. C’est pourquoi il est possible que certaines des nouvelles fonctionnalités de JQuery Mobile ne soient pas encore prises en charge.

Pour la configuration rendez-vous dans le fichier /lib/jqmphp.php

Les valeurs suivantes sont à changer par les liens vers les nouvelles versions de JQuery Mobile (en local ou sur un serveur distant).

/**
 * Sets the jQuery path.
 * @var JQMPHP_JQ
 */
define('JQMPHP_JQ', 'http://code.jquery.com/jquery-1.5.min.js', true);

/**
 * Sets the jQuery Mobile path.
 * @var JQMPHP_JQM
 */
define('JQMPHP_JQM', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js', true);

/**
 * Sets the jQuery Mobile CSS path.
 * @var JQMPHP_CSS
 */
define('JQMPHP_CSS', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css', true);

Maintenant que le framework est configuré on va pouvoir créer notre première page.

<?php   
//  Creation de l'objet jqmphp
$j = new jqmPhp();  

// ajout du titre au header
$j->head()->title('Menu principal');

// Création d'une page ( il peu en avoir plusieurs par jqmphp )
$p = new jqmPage('Menu Principal');

// choix du theme et ajout du titre à la page
$p->theme('c')->title('Menu Principal');

// choix du theme pour le header de la page
$p->header()->theme('c');

// ajout de text HTML dans la page
$p->addContent('Bienvenue sur ma belle page');

// Exemple de création de liste ( courant dans JQuery mobile)
$gm = new jqmListviem();

// création et ajout d'un item à la liste
$ann = $gm->addBasic('Lien 1', 'page1.php','',true);

$cal = $gm->addBasic('Lien 2', 'index.php?action=3');

// ajout de la liste à la page
$p->addContent($gm);

// ajout de la page à l'objet
$j->addPage($p);

// affichage de la page
echo $j;

?>

Comme on peut le remarquer le code est assez simple, mais qu’en est-il du résultat ?

Ceci est un exemple très simple mais vous trouverez sur le site du projet des exemples complexes avec des formulaires, des listes à icônes…

En conclusion : Bien que le framework soit très récent il promet d’être très utile aux développeurs web soucieux des utilisateurs de smartphone.

Nous sommes dans l’attente d’une version qui sera sûrement adaptée à la version beta de JQuery mobile qui sortira prochainement.

Menu contextuel en JavaScript

de arnaud

On août 8, 2011

dans JQuery

Temps de lecture : < 1 minute

Le plugin JQuery contextMenu vous permet de faire des menus contextuels sur des images, du texte ou tout autre contenu. L’utilisation de contextMenu peut être utile pour permettre de partager un contenu sur les réseaux sociaux, pour gérer du contenu dynamique ou simplement pour afficher des informations à l’utilisateur.

Voici un exemple de menu contextuel généré par le plugin :

Pour obtenir ce genre de résultat voici comment appeler le plugin :

$.contextMenu({selector: '#id_de_votre_objet_html', items: {
	edit: {name: "Edit", icon: "edit", callback: $.noop},
	cut: {name: "Cut", icon: "cut", callback: $.noop},
	copy: {name: "Copy", icon: "copy", callback: $.noop},
	paste: {name: "Paste", icon: "paste", callback: $.noop},
	"delete": {name: "Delete", icon: "delete", callback: $.noop},
	sep1: "---------",
	quit: {name: "Quit", icon: "quit", callback: $.noop}
}});

Comme vous pouvez le voir son utilisation est très simple.

Sécurité PHP

de arnaud

On août 2, 2011

dans Sécurité

Temps de lecture : 3 minutes

Les informations de cet article datent

L’actualité étant chargée niveau hack, il est temps de sortir un petit article présentant différentes méthodes de sécurisation d’une application PHP.
Je vais donc brièvement vous présenter différentes librairies ou classes PHP orientées sécurité.

PHPIDS
Un monitoring complet des actions de l’utilisateur avec évaluation de la dangerosité de chaque requête, et de la session. L’outil indispensable pour détecter les recherches de failles.
Input filter
Cette librairie permet de filtrer les tableaux $_GET, $_POST, $_REQUEST pour y detecter le PHP, JavaScript et HTML.
Anti csrf
Permet d’ajouter un token dans ses formulaires afin de ne pas se les faire détourner. Le but étant que chaque formulaire ne soit soumis qu’une seule fois.

L’utilisation des librairies précédentes est un complément mais elles ne constituent pas une sécurité optimale à elles seules.

Voici donc une liste de bonnes pratiques niveau sécurité :

Ne jamais insérer des données dans une requête SQL sans un minimum de traitement. ( mysql_real_escape_string ou mieux PDO::prepare() et PDOStatment::bindValue() )
Ne jamais faire passer en paramètre une page à inclure
exemple : include $_GET[« ma_page »]; préférez une solution du type : switch($_GET[« ma_page »]){ case « home » : include « home.php »; break; case « forum » : include « forum.php »; break; default : inclue « error.php » break; }
Avoir un fichier index.html dans chaque dossier du projet, contenant <html> <head></head> <body> <h1>Accés interdit</h1> </body> </html>
Sécuriser ses session_start contre le vol de session. $ip = !empty( $_SERVER[‘HTTP_X_FORWARDED_FOR’] ) ? $_SERVER[‘HTTP_X_FORWARDED_FOR’] : $_SERVER[‘REMOTE_ADDR’]; $securite = $ip.’_’.$_SERVER[‘HTTP_USER_AGENT’]; if(empty($_SESSION)) { session_start(); $_SESSION[‘securite’] = $securite; } elseif($_SESSION[‘securite’] != $securite) { session_regenerate_id(); $_SESSION = array(); } Voici donc une technique qui permet simplement de tester si une session est bien utilisée par le même navigateur sur la même machine.
Crypter les données sensibles de votre base (email,pseudo par exemple ).
J’ai mis au point cette classe : Crypage. Elle n’est certes pas extrêmement puissante mais elle permet de se protéger contre une injection SQL. Pensez bien sûr à changer la clef 😛 .

Le cryptage des mots de passe est une base de la sécurité. Pour cela utilisez une fonction comme celle-ci : protected function crypteMotPasse($mot){ $salt = « !123 GRAIN DE SEL# »; return sha1(strrev(ucfirst($mot).$salt)); } Ceci est une idée le but est d’éviter que les mots de passe soient facilement lisibles en cas de piratage de notre base de données. Tout en sachant que des rainbow table existent pour inverser un md5 ou un sha1.
Vous pouvez aussi définir un salt par user. Pour cela, au moment de la création du compte, vous générez une chaîne de caractères le plus aléatoirement possible, que vous stockez dans votre table user. Pour la connexion de l’utilisateur, il faudra dans un premier temps aller chercher le salt dans la base. Puis utilisez la fonction ci-dessus comme suit : protected function crypteMotPasse($mot,$saltuser){ $salt = « !123 SALT FIXE# ».$saltuser; return sha1(strrev(ucfirst($mot).$salt)); } Comme le rappelle Simon dans son commentaire : En effet, l’attaquant, pour obtenir l’ensemble des données de la base doit :
– avec la fonction crypteMotPasse (salt à l’intérieur de la fonction) : regénérer une rainbow table
– avec une fonction qui prend un salt différent par utilisateur : regénérer autant de rainbow table que d’utilisateurs
Empêcher un accès direct à vos fichiers PHP. Dans votre/vos fichier(s) d’entrée(s) (index.php par exemple) faites un : define(« _BASE_URL »,TRUE); Puis commencez tous vos autres fichiers PHP par : <?php if(!defined(‘_BASE_URL’)) die(« Erreur, la page est indisponible »);
Ajoutez la ligne suivante dans votre/vos fichier(s) d’entrée(s) afin d’activer les logs d’erreur PHP. Ceci est très utile pour débugger votre application lors de la phase de développement. Il faut cepandant penser à enlever cette ligne au moment de la mise en production. <?php error_reporting(E_ALL); ?>
Ne stockez que le minimum vital dans les cookies (voire rien si possible), réduisez la durée de vie de vos cookies, et cryptez les données qui sont dedans.

Pour les utilisateurs de CodeIgniter, activez le stockage de la session en base de données.
Documentation allez à « Saving Session Data to a Database »

Faire des popups non intrusives avec Fancybox

de arnaud

On juillet 30, 2011

dans JQuery

Temps de lecture : < 1 minute

Aujourd’hui, je vais vous présenter un plugin JQuery très connu mais qui est un des meilleurs dans son style. Fancybox permet de faire des popups non-intrusives avec un design à la MAC OS. Vous l’aurez compris, le design est épuré et sans couleur.
Du fait de sa simplicité apparente, on peut facilement l’intégrer sur nos sites Internet, elle ne choquera pas comme pourrait le faire lightbox avec ses bordures épaisses.

Je serai relativement court sur cette présentation, car la documentation est très fournie sur le site suivant Fancybox. Vous y trouverez aussi une suite d’exemples qui pourront vous convaincre d’utiliser ce plugin plutôt qu’un autre.

Comme je vous l’ai dit précédemment, on peut voir que les bordures sont très fines et que seul le bouton « fermer » ressort. Cependant, pour fermer la fancybox, vous pouvez aussi cliquer à côté.

Spriter

de arnaud

On juillet 27, 2011

dans Optimisation

Temps de lecture : 2 minutes

Pour faire suite à l’article sur l’optimisation, voici comment gagner du temps sur le chargement des images de vos pages web.

En général, les développeurs débutants, ou peu soucieux du temps de chargement de la page, utilisent un nombre conséquent d’images différentes. Chaque image est donc téléchargée une à une lors de l’affichage de la page web. Donc s’il y a 100 images sur la page il faudra 100 requêtes HTTP pour toutes les afficher.

Maintenant, il y a une solution alternative, le spriter, qui permet d’afficher les 100 images simultanément et en une seule requête. La page en question s’affiche donc très rapidement. Les grands sites Internet comme Google, Facebook, Amazon, … utilisent cette technique.

Voici par exemple le spriter de Google

La solution, c’est de réunir toutes les images en une seule grande et de n’afficher que la portion dont nous avons besoin grâce au css.

Voici un exemple simple de spriter

Source: https://www.pixelcrea.com/blog/sprites-css/

Nous allons utiliser cette image pour afficher seulement une icône à la fois.

Ici, je vous présente un exemple simple d’utilisation de spriter. Seulement les quatre icônes sélectionnées sont affichées, elles apparaissent toutes en même temps.

Différents sites Internet vous permettent de fusionner et de récupérer les coordonnées des icônes dans le spriter : Spritemapper , spritegen ou spritecow

Des tooltips élégants avec tipTip

de arnaud

On juillet 26, 2011

dans JQuery

Temps de lecture : < 1 minute

Quand vous souhaitez donner des informations à la volée, vous utilisez sûrement l’attribut title sur vos liens. Cependant, le rendu ne sera pas le même d’un navigateur à l’autre. De plus, les infos bulles basiques du navigateur ou du système d’exploitation sont rarement belles. Mais grâce au plugin JQuery tipTip vous allez pouvoir mettre en place des tooltips élégants. TipTip est fourni avec un CSS par défaut noir, mais libre à vous de le changer car il n’est pas très complexe.

Pour l’utiliser c’est très simple, pour le mot où vous souhaitez ajouter un tooltip il faut faire :

   <a class="tiptip" href="#" title="message tooltip">mot</a>

Et côté JavaScript, vous avez juste à faire appel au plugin sur votre classe tipTip :

    $(function(){
	$(".tiptip").tipTip();
    });

Voici un exemple en images, avec un contenu assez long dans la tooltip :

Modèle de page « en maintenance »

de arnaud

On juillet 22, 2011

dans JQuery

Temps de lecture : < 1 minute

Si vous avez une mise à jour à faire qui risque de provoquer des erreurs, de type 404 ou autre, pendant le temps de la mise en place, il vaux mieux afficher une page d’avertissement expliquant brièvement la situation à l’utilisateur.

Grâce au plugin JQuery lwtCountdown, vous pouvez très simplement ajouter un compte à rebours propre et animé, afin d’éviter la page toute simple et moche. Bien sûr, il vous faudra connaître au préalable la date de retour en ligne. Pensez à prévoir toujours un peu plus que nécessaire. 🙂

Voici un exemple de page faite avec lwtCountdown :

Pour lancer le compte à rebours à partir d’une date, il vous suffit de faire appel au plugin de la manière suivante :

jQuery(document).ready(function() {
				$('#countdown_dashboard').countDown({
					targetDate: {
						'day': 		21,
						'month': 	12,
						'year': 	2012,
						'hour': 	11,
						'min': 		0,
						'sec': 		0
					}
				});
			});

Quand la date butoir est atteinte, le compteur reste à 0, pas de chiffre négatif comme on peut parfois le voir.

Améliorer le référencement d’un site Internet

de arnaud

On juillet 15, 2011

dans Référencement

Temps de lecture : 4 minutes

Sur Internet, faire un lien d’une page A vers une ressource B, c’est y faire référence et donc référencer la ressource B depuis la page A. Par vulgarisation, l’action générique d’inscription dans les moteurs de recherche s’est vue appelée référencement. Aujourd’hui sa pratique s’articule autour des outils de recherche, plus particulièrement des moteurs et des annuaires de recherche, en tentant d’améliorer le positionnement d’un site (et donc sa visibilité) dans leurs pages de résultats.
Wikipédia, Référencement

Les moteurs de recherche

Si vous venez de mettre en ligne un nouveau site Internet, il va falloir le soumettre aux moteurs de recherche afin qu’il sache que vous êtes là. Sinon, cela risque de prendre du temps.
Voici comment faire :

Proposer votre site Internet aux principaux moteurs de recherche lors de sa mise en ligne : Google, Bing, Yahoo
Mettre en place un sitemap à la racine de votre site, vous pouvez utiliser un générateur pour le créer
Rendez-vous sur Google webmaster tool pour le soumettre, il permettra une indexation plus simple pour le bot et donc plus rapide. Au passage, cet outil est une mine d’informations, il vous indique toutes les pages où le bot à rencontré des erreurs d’exploration, votre positionnement dans les recherches Google selon les mots clés saisis…
Après le post d’un article ou d’une nouvelle page, envoyez un ping vers les moteurs de recherche afin qu’ils viennent faire un tour sur la nouvelle page. Des outils comme pingomatic permettent de le faire rapidement

Le référencement naturel

En théorie le référencement naturel est une chose simple, il suffit d’être patient. Cependant il existe un certain nombre de techniques permettant d’augmenter la rapidité du référencement naturel. Le référencement naturel se fait par l’exploration de votre site Internet par des bots. Les bots sont bêtes et méchants, ils suivent les liens pour trouver d’autres pages à explorer. Voici quelques points qui leurs permettent d’explorer rapidement tout votre site Internet.

Un site qui bénéficiera d’un bon référencement est un site où pratiquement toutes les pages sont accessibles depuis la page d’accueil. Par conséquent, utilisez votre footer comme usine à liens internes. Si vous avez un blog, ajoutez un nuage de tags, et faites des liens entre vos articles.
Les balises méta ne sont pas à négliger, elles sont encore très aimées des robots.
Vous pouvez utiliser un générateur si vous ne connaissez pas exactement quelles balises existent. A savoir que la balise meta description doit changer pour chaque page de votre site, elle décrit la page et non le site.
Il y a quelques bonnes pratiques à respecter côté HTML pour aider à votre référencement :
- Un title différent par page, ni trop long, ni trop court
- Une balise h1 par page
- L’attribut ALT pour les images est indispensable
- Les 100 premiers mots de votre contenu doivent contenir les mots clefs importants de votre page, car c’est en moyenne la partie visible sans scroll.
Les URLs sont un point central du référencement, c’est la fin des URLs du type http://domaine.com/index.php?page=1533, Il vaut mieux travailler avec des URIs segment, du type https://outweb.eu/category/optimisation/.

Le référencement manuel

Nous allons parler ici des techniques qui existent pour avoir des backlinks (le nerf de la guerre en référencement). Un backlink c’est un lien vers votre site depuis un autre site. Pour en obtenir il y a plusieurs méthodes ; la plus simple est d’attendre que notre contenu soit remarqué par d’autres personnes et qu’il partage le lien vers la page, ou de le faire par nous-mêmes :p.

Les réseaux sociaux

Les réseaux sociaux attirent énormément de monde et ce sont de très bons backlinkers. Il faut donc à chaque nouvelle publication (pour un blog) ou chaque mise à jour (pour les autres) poster sur un maximum de réseaux le lien vers la page en question. Les réseaux les plus simples à utiliser sont Twitter, Facebook, Digg, Delicious, Identi.ca… L’idéal est de pouvoir poster partout en une seule fois, pour cela il faut regarder du côté de onlywire par exemple.

Les forums

Rendez-vous sur des forums traitant de la même thématique que la vôtre et trouvez, s’il y en a une, une partie présentation. Maintenant, rien de plus simple, vous allez créer un topic/ une discussion pour présenter votre site Internet, pensez à mettre 4 ou 5 liens vers différentes pages de celui-ci. (accueil, nouveautés, RSS, contact). En plus du référencement, vous allez attirer quelques visiteurs.

Pensez à mettre une bannière dans votre signature, comme cela à chaque post vous vous faites un peu de publicité.

Les annuaires

Contrairement à la croyance populaire, les annuaires ne sont plus à la joie. Google, par exemple, n’aime pas tomber sur ce type de page car il y a trop de liens pour peu de contenu. Evitez donc la plupart des annuaires de mauvaise qualité. Mieux vaux éviter les mauvais backlinks.

Les commentaires

Rendez-vous sur les sites ayant une bonne notoriété et traitant d’un thème proche du vôtre.
Rendez-vous section commentaire. Et là c’est un peu plus technique, il va falloir regarder dans le code source si les liens vers les sites persos des personnes qui ont commenté ont un attribut rel différent de nofollow. Si c’est le cas, à chaque post, vous obtiendrez un backlink de qualité. Le but n’est pas de spammer le site, mais juste de se faire quelques liens vers son site.

Le partenariat

Le partenariat, ou échange de liens, est un système gagnant-gagnant ou chacune des deux parties met sur son site, un lien ou une bannière vers l’autre site. L’idéal est dans une sidebarre, car elle est visible des utilisateurs. Le plus dur est de trouver des partenaires ayant un référencement au moins aussi bon que le vôtre.

Bien sûr si vous utilisez un CMS beaucoup de ces techniques seront déjà intégrées dedans ou des extensions sont disponibles pour le faire simplement.

Ajuster la taille de vos textareas en fonction du contenu

de arnaud

On juillet 14, 2011

dans JQuery

Temps de lecture : < 1 minute

AutoResize est un plugin JQuery qui permet de faire un textarea extensible en fonction du contenu, comme le fait actuellement Facebook pour les commentaires. Ceci évite les pages de formulaire où un textarea fait 15cm sur 8, le truc pas esthétique quoi…

Voici comment appliquer le plugin sur un textarea ayant pour id « comment ».
Après, libre à vous de changer le sélecteur pour l’appliquer à tous vos textareas, ou juste à ceux d’une classe précise.

$().ready(function(){
$('#comment').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});
});

Vous l’aurez compris, ce plugin s’adresse aux développeurs soucieux de l’ergonomie de leur site Internet et qui en ont marre de voir des barres de scroll apparaître dans leurs textareas.