Web on Outweb

Afficher des graphiques avec JQPlot

Tue, 16 Aug 2011 06:28:46 +0000

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.

Framework JQuery mobile

Tue, 16 Aug 2011 06:28:45 +0000

Jqmphp, framework JQuery mobile

Menu contextuel en JavaScript

Mon, 08 Aug 2011 19:21:24 +0000

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

Tue, 02 Aug 2011 18:21:33 +0000

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.

Faire des popups non intrusives avec Fancybox

Sat, 30 Jul 2011 08:00:38 +0000

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.

Spriter

Wed, 27 Jul 2011 17:14:51 +0000

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.

Des tooltips élégants avec tipTip

Tue, 26 Jul 2011 08:00:29 +0000

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.

Modèle de page "en maintenance"

Fri, 22 Jul 2011 08:00:14 +0000

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. :)

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

Fri, 15 Jul 2011 08:15:00 +0000

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.

Ajuster la taille de vos textareas en fonction du contenu

Thu, 14 Jul 2011 08:00:12 +0000

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.

Commencer un petit site Internet avec Instant Blueprint

Tue, 12 Jul 2011 08:00:48 +0000

Instant Blueprint est un service en ligne qui vous permet en quelques clics de mettre en place une architecture de base pour votre nouveau projet de site Internet. En effet, après avoir renseigné quelques informations, il va vous générer automatiquement le squelette de votre site Internet.

Pour utiliser cet outil, il vous faut renseigner :

Titre du projet
Le doctype désiré
Le framework javascript à inclure
Comment inclure le framework (local ou distant, compressé ou normal)
L’extension du fichier index (html, htm, php, asp)
Que mettre dans le dossier include (config.php et/ou fonction.php)
Centrer ou non le contenu du site
Les principales div de la page

Voici le squelette généré :

Google plus invitation

Mon, 11 Jul 2011 19:49:45 +0000

Google vient de mettre en ligne la nouvelle mouture de son réseau social Google+.

Très peu de personnes ont eu des invitations, cependant, j’ai eu la chance d’en faire partie.

J’apprécie tout particulièrement la gestion de la confidentialité de nos informations et les cercles de confidentialité en un simple clic.

En effet, on peut décider de divulguer un statut, une image ou une information personnelle à un ou plusieurs cercles. Les autres ne le verront pas. L’avantage c’est que l’on peut choisir au cas par cas.

Listes triées et animées avec Quicksand

Wed, 06 Jul 2011 13:26:21 +0000

Quicksand est un plugin JQuery qui peut être utile pour l’affichage un peu travaillé d’une liste d’images ou sur une boutique en ligne.
Le plugin vous permet de trier et filtrer des listes (d’images par exemple) selon des critères, le tout avec des effets de transition à la JQuery. Le résultat est assez agréable pour l’utilisateur mais il ne faut pas en abuser car cela peut vite devenir lourd.

Pour l’appliquer à une liste vous pouvez utiliser le code suivant :

Aider les webmasters avec UpgradeBrowsers

Mon, 04 Jul 2011 20:00:01 +0000

Vous en avez marre de devoir faire des designs pour des versions non mises à jour de navigateur ? Oui, moi aussi. Alors insérez le plugin UpgradeBrowsers dans votre site Internet, dans votre page d’accueil par exemple. Le plugin indiquera simplement à l’utilisateur que son navigateur n’est pas à jour en l’invitant à le mettre à jour. Les autres utilisateurs ne se douteront même pas de la présence du plugin sur votre site.
Voici les quelques lignes de code à insérer dans votre page pour mettre en place le plugin, avant la fermeture du body.

Convertir des formules Latex en HTML

Fri, 01 Jul 2011 12:49:07 +0000

Le Latex est à mis chemin entre le langage de programmation et le traitement de texte. Il permet de rédiger des documents officiels sans avoir à mettre en forme manuellement le texte. En effet, avec de simples instructions, on peut ajouter des paragraphes, des titres ou des chapitres avec une mise en forme automatique.

Le point fort de Latex est qu’il permet d’insérer des formules mathématiques complexes.

C’est d’ailleurs pour cela que la plupart des mathématiciens l’utilisent régulièrement dans leurs articles ou leurs rapports.

Calcul de temps à la Facebook ou Twitter

Thu, 30 Jun 2011 16:16:45 +0000

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 ?

Adapter sa taille de police à la résolution avec fitText

Fri, 24 Jun 2011 07:25:29 +0000

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.

Optimisation de pages web

Thu, 09 Jun 2011 22:00:29 +0000

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… :P

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 :P

Peity

Wed, 01 Jun 2011 22:00:39 +0000

Faites vos graphiques avec JQuery