Outweb

Sample Page

Fri, 07 Jan 2022 22:56:22 +0000

This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:

Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)

Sécurité informatique : quel est l'impact de la pandémie ?

Thu, 26 Aug 2021 14:45:37 +0000

Les entreprises ont dû mettre en place une nouvelle organisation pour poursuivre leur activité malgré la pandémie. Le télétravail a ainsi explosé depuis la crise sanitaire mondiale. Bien que cette transformation numérique leur ait permis de ne pas sombrer, les problèmes liés à la cybersécurité restent une préoccupation essentielle. Prévoir des solutions informatiques sécurisées est donc devenu une priorité.

Une augmentation des cyberattaques

Le télétravail a connu un essor important depuis le début de la crise sanitaire. La transformation numérique était donc incontournable pour de nombreuses entreprises, tous secteurs d’activité confondus.

Internet : comment bien référencer son site ?

Fri, 20 Aug 2021 08:26:24 +0000

Si vous désirez faire connaître votre site, le rendre plus visible et augmenter le trafic, il est important de bien le référencer. La question du référencement d’un site est en effet cruciale, aussi bien pour une grande entreprise que pour une PME ou même un particulier. Alors, comment bien référencer son site ? Voici quelques conseils et astuces pour mener à bien votre mission et vous faire davantage connaître des internautes.

Monter un caisson réseau à la maison

Tue, 15 Sep 2020 16:01:03 +0000

Je viens d’emménager dans une nouvelle maison dans laquelle il n’y avait pas du tout de réseau filaire. Comme on avait pas mal de travaux de décoration à faire j’ai fait poser des prises réseaux dans les pièces principales de la maison.

Avant de commencer les travaux j’ai donc fait venir des électriciens pour mettre le réseau électrique en sécurité et tirer des câbles réseau dans la plupart des pièces de la maison. Pensez bien à le faire avant de commencer les travaux de rénovation car, pour faire propre, il faut faire des saignées et des trous un peu partout.

Les articles récents

Wed, 08 Apr 2020 13:06:51 +0000

A propos

Wed, 08 Apr 2020 13:06:49 +0000

Blog tenu par Arnaud LAHAXE

Ce blog est tenu par Arnaud LAHAXE.

CV: https://lahaxe.fr

Comment fonctionne l'e-reputation ?

Tue, 10 Dec 2019 08:42:00 +0000

Lancer une activité ou créer votre société n’est pas toujours facile. En effet, outre sa création, il est aussi essentiel de maintenir la réputation et la notoriété de votre société. Cela permettra de vous faire connaître davantage afin d’attirer plus de clients. Depuis quelque temps, les outils digitaux ne cessent de connaître des évolutions si bien que les notions de notoriété et de réputation d’une entreprise se propagent aussi dans le monde virtuel. Alors, comment cela fonctionne et pourquoi est-ce si important ?

Développer rapidement votre activité grâce au webmarketing

Wed, 24 Jul 2019 09:56:11 +0000

Le développement de votre activité est votre finalité. Créer votre entreprise a été assez facile, mais pour la faire grandir le chemin se révèle compliqué. Faire évoluer votre business plus rapidement nécessite ainsi des plans d’action bien pensés. Je vais donc attirer votre attention sur le webmarketing aujourd’hui, un outil indispensable au fleurissement de votre boîte.

La visibilité sur internet, un levier de croissance à ne pas négliger

Pour faire grandir votre activité à Bordeaux, vous devez être visible et connu. Internet peut vous aider à atteindre cet objectif. D’où le webmarketing. Ce dernier regroupe tous les dispositifs mis en œuvre pour faire la promotion en ligne de votre activité. Pour booster la réussite de votre entreprise, vous devrez penser à vous faire accompagner par une agence de référencement naturel de votre ville, que vous trouverez par exemple sur https://www.adf-referencement-bordeaux.com/ .

Filtrer vos requêtes DNS sur votre réseau local

Mon, 21 Jan 2019 09:00:45 +0000

Pi-hole est un projet open-source prévu pour tourner sur un raspberry pi, qui permet de filtrer les requêtes DNS dans le but de bloquer les publicités et le tracking. L’idée est de faire ce filtrage au niveau du réseau afin de pouvoir bloquer aussi les publicités dans les applications et sur les navigateurs mobiles qui n’ont pas forcement d’Adblock.

Pour mon installation j’ai ressorti un vieux raspberry 1 b+ et j’ai utilisé l’installation recommandé sur le site:

Test des solutions serverless

Mon, 14 Jan 2019 09:00:49 +0000

Il existe plusieurs solutions open sources ou hébergées pour monter sa propre architecture serverless. J’ai choisi de tester les deux solutions open sources plus populaires, ainsi que deux des plus gros acteurs actuellement sur le marché afin de me faire une idée du fonctionnement de chaque solution. Je vais déployer un simple hello world sur l’ensemble des outils afin de tester l’utilisation et les temps de réponses.

Je ne connais aucunes des solutions, mais je vais me faire mon analyse autour des 5 points suivants :

C'est quoi le serverless ?

Mon, 07 Jan 2019 09:00:28 +0000

Le serverless, je ne connais pas du tout. L’idée est de faire une série d’articles découvertes sur cette architecture. L’idée est d’aller jusqu’à la création d’une petite application.

Depuis deux ans on parle de plus en plus de serverless mais il n’est pas toujours simple de voir exactement de ce que cela implique pour une application d’être serverless. Autre point, est-ce qu’être serverless implique qu’il n’y ait pas de serveur du tout ?

Monter un registry docker privé

Mon, 31 Dec 2018 09:00:18 +0000

Si vous n’avez pas de compte payant sur docker hub mais que vous ne voulez pas publier publiquement une image docker il va falloir trouver des solutions pour pouvoir héberger vos images docker. Par exemple en montant un registry docker privé pour héberger vos images docker.

Dans cet article nous allons voir comment monter un registry docker et comment y accéder en HTTPs sans avoir à déployer de certificat.

Pour cet exemple je vais utiliser un petit serveur START1-S chez scaleway à moins de 2 euros par mois.

Gérer ses tunnels SSH avec Mole

Mon, 24 Dec 2018 13:00:35 +0000

Mole est une application en ligne de commande qui permet de simplifier la création de tunnels SSH.

Il est parfois utile de monter un tunnel pour accéder à un service qui n’est pas ouvert sur le WEB. Par exemple si votre serveur MYSQL, n’est accessible que depuis votre serveur web ou votre serveur de backup. Ou encore pour contourner un firewall qui bloquerait un port en particulier.

Sur cet exemple le serveur bleu ne peut pas accéder au port 80 (application web) du serveur rouge car un firewall le bloque. Mais le port 22 (ssh) est accessible. Il est donc possible de créer un tunnel qui forward le port 80 sur serveur rouge sur le port 8080 du serveur bleu. Une fois le tunnel mis en place il sera possible d’accéder à l’application web du serveur rouge via l’url: http://blue:8080.

Explorer vos json dans le terminal avec fx

Mon, 17 Dec 2018 09:00:39 +0000

Fx est une application node installable via npm ou yarn qui permet de visualiser et d’interagir avec un json directement dans le terminal.

Ce qui est intéressant c’est qu’il est possible d’explorer le json en précisant un path à afficher.

Voici un exemple sur un fichier package.json :

Il est même possible d’aller un peu plus loin et de lui donner une ou plusieurs fonctions anonymes en paramètre.

Un petit outil sympa qui va vous éviter de copier/ coller votre json dans un IDE pour le remettre en forme et naviguer dedans.

Monter un cluster swarm avec des Raspberry pi et HypriotOS

Mon, 10 Dec 2018 09:00:20 +0000

HypriotOs est une version de raspbian dans laquelle docker, et docker swarm sont pré installés. La particularité est que HypriotOs tourne sur des architectures ARM telles que les Raspberry, le Nvidia shield et quelques autres cartes comme les ODROID C2.

Dans cet article, nous allons voir comment monter un petit cluster swarm avec trois noeuds (1 manager et 2 workers). Une fois la partie serveur montée, nous ferons tourner des services dessus à la fois en lignes de commandes et via une interface graphique.

Analyse de code statique avec phpstan

Mon, 03 Dec 2018 09:00:25 +0000

Phpstan est un outil en ligne de commande qui va vous permettre de détecter automatiquement les erreurs les plus simples en scannant l’intégralité de votre projet.

De base, l’outil va analyser une application PHP sans tenir compte des spécificités des différents frameworks et librairies. C’est pourquoi il existe des extensions comme PHPstan Symfony pour affiner l’analyse.

Si comme moi vous voulez l’utiliser sur un projet qui a beaucoup de legacy (plus de 10 ans) vous allez avoir un rapport gigantesque. Il faut trouver des solutions pour réduire le rapport à la pull request (merge request) que l’on doit relire.

Comment vérifier le contenu d'une image docker

Mon, 26 Nov 2018 09:00:49 +0000

Au travail nous avons pour politique de builder et de maintenir nos propres images docker. Mais pour un projet perso j’utilise des images docker publiques. Je m’efforce d’utiliser au maximum des images officielles mais certaines contributions de la communauté sont parfaites pour mes besoins. Le problème est de savoir avec certitude ce que contient un image. Une image téléchargée sur un hub est une boîte noire qu’il faut inspecter avant de l’utiliser.

Intervention à Epitech Nancy

Mon, 19 Nov 2018 09:00:12 +0000

Avec le boulot, on a décidé de partager notre expérience dans les écoles et événements autour du WEB sur la région Nancéienne . Il n’est pas exclu, par la suite, de participer à des événements plus grands comme le forum PHP, le PHP Tour, le blendmix web ou autres événements du genre. Mais comme nous ne sommes pas très habitués à ce genre d’événements autant commencer plus modestement. Depuis des années nous assistons aux conférences, mais passer de l’autre côté du pupitre n’est pas une chose que l’on improvise.

Symfony Messenger et rabbitmq

Mon, 12 Nov 2018 15:00:54 +0000

Symfony 4 apporte un nouveau composant qui va nous permettre de brancher notre application sur un, ou des, brokers de messages. Grâce à ce composant, on va pouvoir accélérer notre application en traitant de façon asynchrone tout ce qui n’est pas strictement nécessaire à l’affichage de nos pages. Ce module maintenu par la Core Team Symfony va à terme remplacer les bundles existants.

Use case

Un exemple couramment utilisé pour expliquer pourquoi c’est nécessaire d’utiliser ce genre de technique est le suivant:

Du machine learning dans mes cocktails

Thu, 08 Nov 2018 07:37:00 +0000

Dans cet article, nous allons parler Mojitos, machine learning et PHP, trois sujets que l’on mélange assez rarement, mais qui dans le cas du site Cocktailand sont rassemblés.

Use case

Je souhaite afficher la recette de cocktail qui ressemble le plus à celle que le visiteur est en train de lire. Comme je suis finalement quelqu’un d’assez fainéant, je n’ai pas envie de maintenir des listes de cocktails associés manuellement. Il faut donc trouver un moyen de calculer automatiquement cette liste pour les quelques 600 recettes et que cette liste soit mise à jour automatiquement pour intégrer les nouvelles recettes.

Cocktailand - Gérer ses images sous symfony

Tue, 05 Jun 2018 05:54:45 +0000

La page d’accueil de cocktailand affiche en moyenne 35 images. Dans sa première version, je n’avais pas pris la peine de soigner la gestion des images. J’avais pour objectif de sortir le produit minimum viable, je me suis donc attardé sur les fonctionnalités principales:

L’ajout des recettes de cocktail
L’affichage des recettes de cocktails
La catégorisation
Le moteur de recherche

Cette méthodologie permet de sortir rapidement un site de base et de l’enrichir de façon successive.

Cocktailand - Ajouter du cache HTTP dans mon symfony

Fri, 01 Jun 2018 05:45:42 +0000

C’est quoi un ESI ?

Les ESI ou Edge Side Includes sont un balisage supporté par Varnish qui permet de gérer des temps de cache différents pour des blocs de la même page.

Dans le cadre de Cocktailand, certains blocs sont actualisés régulièrement comme le “Cocktail du jour” mais d’autres ne changent quasiment jamais comme la liste des catégories.

Voici donc le découpage que j’ai fait sur la page principale. Pour la barre de menu, c’est bien évidemment le contenu du méga menu que j’ai voulu mettre en évidence.

Cocktailand - La stack technique

Fri, 25 May 2018 05:24:04 +0000

A la vue de cet article, on me dira surement que la stack technique du site Cocktailand est overkill.

Ma réponse est simple: " Ouaip carrément !"

Au-delà du plaisir de travailler sur la thématique des cocktails, je travaille sur ce projet aussi pour me faire plaisir techniquement et pour tester des technologies ou des services en mode SAS.

Comme j’ai toujours la flemme de documenter mes sides projects, cet article fera office de documentation “technique”.

Cocktailand - Monitorer les performances d'un site web

Sun, 06 May 2018 05:34:25 +0000

Les outils

Monitorer les performances WEB d’un site web est vraiment indispensable, mais ce n’est pas simple de le faire gratuitement. Il existe des outils en ligne comme SpeedCurve mais c’est relativement cher.

L’idée ici est d’avoir un suivi, certes plus simple, mais de façon gratuite. Il se trouve que j’ai déjà une stack graphite/grafana qui tourne en production. Si ce n’est pas votre cas et que vous avez un serveur avec docker qui tourne dessus vous pouvez toujours démarrer un container avec l’image docker-grafana-graphite pour tester la suite de cet article. Une fois que votre graphite est en ligne on va pouvoir commencer à pousser des metrics dedans. Un outil est très connu pour obtenir des metrics de performance sur un site web. Webpagetest, dont j’ai déjà parlé dans un billet précédent sur la mise en place de varnish et des ESIs. Il se trouve que webpagetest fournie une api.

Booster votre wordpress

Tue, 05 Nov 2013 21:28:38 +0000

Augmenter les performance pour diminuer le temps de réponse de son site devrait être la préoccupation de tout webmaster, afin d’améliorer au maximum l’expérience utilisateur mais aussi pour être mieux référencé sur Google. Nous allons voir dans cet article comment optimiser Wordpress pour obtenir un temps de réponse minimal.

Il existe une kyrielle de plugins Wordpress qui permettent de réduire le temps de réponse de Wordpress. Un des plus connus est w3 Total Cache car il possède énormément de fonctionnalités.

Configurer shorewall sous debian

Tue, 06 Nov 2012 05:55:01 +0000

Le tuto fonctionne aussi sous Ubuntu 12.04 (oui c’est article qui date)

Le pare-feu “Shoreline Firewall”, plus communément appelé “Shorewall”, est un outil qui permet de configurer plus facilement Netfilter (IpTable).

Shorewall est un outil qui permet de configurer Netfilter, son travail est fini.

L’avantage de Shorewall est qu’il est très flexible, une fois que l’on a compris la syntaxe.

Si vous avez d’autres firewalls il faut les désinstaller avant de commencer (ex: firestarter)

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

Faire un audit de sécurité

Fri, 12 Aug 2011 08:00:24 +0000

Hacker Target est un site Internet qui vous propose de tester les vulnérabilités de votre application web.
Le site vous propose plusieurs types de tests selon votre site Internet.

Voici la liste complète des tests proposés gratuitement par le site (limité à 4/jours) :

les injections SQL
les CMS Drupal, Joomla et WordPress
les ports de votre serveur
les vulnérabilités de vos services
les problèmes de configuration ou de scripts
faire du fingerprint (déterminer les versions de vos librairies et logiciels)
en savoir plus sur votre domaine par le biais de whois par exemples
obtenir des infos sur vos CMS, fameworks, serveur, emplacement géographique…Etc

Nous allons ici détailler le test concernant WordPress car c’est celui que je viens de réaliser sur localhost:8080.

Charger vos scripts en asynchrone

Wed, 10 Aug 2011 08:00:22 +0000

Le chargement de vos fichiers Javascript ralentit le chargement de page. Ceci est logique car le navigateur doit télécharger les fichiers avant de faire l’affichage. Grâce à Require.js vous allez pouvoir charger vos JavaScript en asynchrone. C’est-à-dire charger le texte, les images, les styles puis seulement une fois que la page est affichée correctement, et que le lecteur peut commencer à lire le contenu, le JavaScript. Require.js permet aussi de détecter les fichiers qui ont déjà été chargés afin de ne pas les recharger.

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.

Rendre votre CSS compatible sur tous les navigateurs

Mon, 08 Aug 2011 08:00:13 +0000

Prefixr est un outil, en version alpha, qui vas vous aider dans le développement de vos designs. En effet, le site vous propose de prendre n’importe quel code CSS et de vous en ressortir un code CSS compatible sur tous les navigateurs.

Voici un exemple d’utilisation :

Vous avez écrit :

.example {
 border: 10px solid #000000;
 width: 500px;
 height: 500px;
 -moz-border-radius: 10px 200px 200px 10px;
}

Malheureusement -moz-border-radius ne fonctionne pas sur tous les navigateurs… On vas donc passer le code dans Prefixr pour le rendre compatible.

Les extensions Wordpress

Sat, 06 Aug 2011 08:00:38 +0000

Wordpress est un des CMS les plus utilisés dans le monde. Il permet de créer rapidement et très simplement un blog, mais aussi des sites Internet en tous genres. Avec les bonnes extensions, vous pouvez même en faire un site de e-commerce. Son avantage est principalement son optimisation pour le référencement. En effet, si vous avez du contenu intéressant, il sera facilement et rapidement indexé sur les moteurs de recherche. Un des autres avantages de Wordpress est sa grande flexibilité. Vous pouvez réussir à faire énormément de choses juste en ajoutant des extensions. Voici donc une liste des extensions que vous pourrez directement installer depuis votre interface administrateur. Pour installer une extension, rendez-vous dans Extensions>Ajouter.

Système de tag d'images avec JQuery image annotate

Fri, 05 Aug 2011 19:07:40 +0000

Vous souhaitez mettre en place un système de tag d’image comme sur Flickr ou Facebook, mais vous ne savez même pas par où commencer. jQuery Image Annotation Plugin, couplé à Jquery et JQuery UI, vous permet de faire ceci sans aucune difficulté.

Le plugin permet d’ajouter, de modifier, et de supprimer des annotations sur l’image. J’ai fait le test avec la dernière version 3.2 et le résultat obtenu est plutôt soigné. Voici le code HTML / JavaScript nécessaire pour utiliser cette librairie.

Faire un indexof travaillé avec H5AI

Thu, 04 Aug 2011 08:00:17 +0000

H5AI est un projet développé avec HTML5 qui a pour but de remplacer la page indexof par défaut de apache. C’est dans cette optique que H5AI propose plusieurs types de vue, un moteur de recherche interne ou encore un bandeau cliquable nous indiquant notre position dans l’arborescence de fichiers, depuis le root du dossier où H5AI est mis en place.

Voici un exemple en images du type de rendu que vous pouvez avoir sur un dossier contenant plusieurs types de fichiers différents. Vous pouvez remarquer que le projet détecte le type de chacun des fichiers afin d’afficher la bonne icône.

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.

Galerie de photos élégante

Tue, 02 Aug 2011 08:00:44 +0000

Vous êtes photographe, amateur ou professionnel et vous vous demandez comment mettre en valeur vos photos sur votre site web ?

3D Wall Gallery vous permet de les mettre en page sous forme d’un slider plutôt attractif.

Voici comment les images se présentent dans votre navigateur. La barre sur le dessus de la page vous permet de faire glisser la “pellicule” afin de voir d’autres images.

Sur le bas de la page, vous avez un widget qui vous permet de prévisualiser vos images et ainsi de choisir directement celle qui vous intéresse.

Une aide au débogage javascript : blackbird

Sat, 30 Jul 2011 18:04:59 +0000

BlackBird est une librairie Javascript qui permet de générer un système de log visuel.
Grâce à cet outil, plus besoin de faire des alertes toutes les 5 lignes de code pour trouver la source de vos bogues.
La librairie permet de chronométrer vos applications afin d’en trouver les parties lentes.

Voici les principales fonctions de la librairie :

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );

// pour le profilage

log.profile( 'generate test string' );

var testContent = '';
for ( var i = 0; i < 3000; i++ ) {
 testContent += '-';
}

log.profile( 'generate test string' );

Et voici le résultat obtenu dans la petite fenêtre de débogage :

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.

Sortie de Symfony 2

Fri, 29 Jul 2011 05:22:59 +0000

La nouvelle mouture tant attendue de Symfony 2 est sortie hier matin en version stable. Après de nombreux mois de tests, de versions releases, beta et RC, la version stable et définitive est enfin accessible.

Au programme, énormément de changements et une simplification apparente du framework. Les bundles font leur apparition, ils vont vous permettre d’insérer dans votre site Internet des modules que vous pouvez télécharger avec composer. Il existe déjà un grand nombre de bundles tout faits et prêts à l’emploi, comme un forum ou une gestion des membres par exemple. Le but est réellement à court terme de fournir tous les codes de base pour un site Internet, afin de se focaliser seulement sur le coeur de votre application.

Présenter votre site Internet à vos utilisateurs

Thu, 28 Jul 2011 08:00:44 +0000

Si votre site possède une partie un peu complexe, comme une zone membre avec des menus et des zones d’informations, vous souhaitez peut-être expliquer à vos utilisateurs la logique et le fonctionnement de tout cela. Habituellement, vous faites une vidéo ou un tutoriel expliquant à l’aide d’images votre projet.

Bootstro va vous permet de faire une suite d’infobulles, expliquant étape par étape, directement dans la page web, le fonctionnement de votre site. Ceci offre une multitude d’avantages. Le simple fait que l’utilisateur puisse à tout moment, sans quitter la page, accéder à l’aide, est déjà beaucoup.

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.

Détecter des visages avec JQuery

Sun, 24 Jul 2011 08:00:14 +0000

Vous souhaitez mettre en place un système d’avatar sur votre site Internet, et vous souhaitez que l’utilisateur puisse envoyer sa photo, puis puisse la recadrer selon son désir ? Le problème réside dans la détection du visage. Comment faire pour pré-cadrer le ou les visages ?

Face Detection est un plugin JQuery qui vous permettra de récupérer les coordonnées des visages présents sur la photo, et ainsi permettre de recadrer celle-ci.

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

Rendre votre HTML5 compatible sur tous les navigateurs

Wed, 20 Jul 2011 08:00:54 +0000

Comme vous le savez, le HTML5 est assez récent et donc pas encore pris en charge par tous les navigateurs. Cependant, il permet de faire des choses assez intéressantes sans y passer des heures, et le code est plus ordonné. Bref, je ne vais pas faire la présentation complète de HTML5, ce n’est pas le sujet de cet article. Mais voilà, même si le HTML5 a l’air génial, on ne peut pas l’utiliser tant que l’on n’est pas sûr que l’utilisateur pourra avoir le résultat voulu.

Personnaliser vos menus déroulants avec DropKick

Mon, 18 Jul 2011 10:00:01 +0000

Vous trouvez que vos menus select sont trop simples ? Le plugin JQuery DropKick vous permet de faire des menus déroulants élégants sans perdre de temps à changer le css, et à travailler sur la compatibilité.

Si les thèmes par défaut ne vous conviennent pas, vous avez la possibilité de vous faire le vôtre assez simplement.

De tels plugins rendent plus attirants des formulaires qui d’habitude rebutent un peu les utilisateurs.

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.

Créer un site Internet pour mobile avec JQuery mobile

Tue, 12 Jul 2011 19:46:24 +0000

Avez-vous déjà pensé à faire une application mobile, ou une version mobile de votre site Internet ?
Si oui, vous avez dû vous confronter à des centaines de problèmes de compatibilité entre les navigateurs mobile.

L’article va vous montrer comment faire des pages HTML compatibles sur tous les téléphones et tablettes.

Afin de bien comprendre l’article, il vous faudra connaître les bases du HTML ainsi que JQuery.

Dans un premier temps, il va falloir télécharger la libraire JQuery mobile. Donc rendez-vous à la page suivante : Télécharger.

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.

Zoomer sur des images avec Cloud Zoom

Sun, 03 Jul 2011 09:46:30 +0000

Cloud Zoom est un plugin JQuery qui permet de faire simplement des zooms sur des images. En plus de son style soigné, il propose plusieurs types de zooms, selon l’intégration que vous voulez faire de celui-ci.

Voici l’exemple le plus basique, mais aussi le plus commun :

Et pour metttre en place cet effet, il vous suffit d’inclure le fichier javascript cloud-zoom.1.0.2.js (dans le dossier images).

Puis pour chacune des images où vous voulez ajouter un zoom, vous devez définir les paramètres pour le zoom :

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 ?

Gestionnaire de fichiers en ligne : elFinder

Tue, 28 Jun 2011 13:16:26 +0000

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.

Fenêtres de dialogue JavaScript avec Modialog

Mon, 27 Jun 2011 17:42:41 +0000

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.

Générer QRCODE avec JQuery

Fri, 24 Jun 2011 13:01:33 +0000

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.

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

Système de pagination sous CodeIgniter

Wed, 08 Jun 2011 09:45:58 +0000

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.

Nous allons créer la base de donnée de l’article : Installation et Configuration de CodeIgniter .

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

}

Puis nous allons créer notre contrôleur.

Installation et Configuration de CodeIgniter

Sat, 04 Jun 2011 12:32:39 +0000

Pré requis

Un serveur Apache ( lamp, wamp, easy php, mamp, … )
Un SGBD mysql

La Base de données

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

Peity

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

Faites vos graphiques avec JQuery