Loading Video...
Hide Video Now you see me

Now you see me

Play Video

La bande annonce de Now you see me (« insaisissables » en VF) m’avait vraiment donné envie. Le casting surtout : Jesse Eisenberg, Morgan Freeman, Michael Caine, et même José Garcia (Petite apparition mais quand même).

Beaucoup de détails sont trop gros pour être possibles mais le style est là : Un mélange entre Ocean’s 11, 12 ou 13 pour le côté « braquage de banque en mode sans violence » et Usual Suspect pour l’intrigue. Pas un grand film mais un bon divertissement à voir au ciné pour profiter pleinement du spectacle (on a d’ailleurs l’impression d’assister à un spectacle plus qu’à un film).

Allez le voir et dites moi ce que vous en avez pensé !

Installer Apache / PHP / MySQL sur OsX Mountain Lion

Il existe plusieurs façons d’installer le combo Apache + PHP + MySQL sur votre Mac et je vais vous expliquer ici 2 solutions : Via MAMP ou en natif.

La facilité : MAMP

MAMP (pour Mac Apache MySQL PHP) est une application vous permettant de mettre en place et de gérer un serveur local sur votre mac en quelques clics. Il vous suffira donc d’aller sur le site de MAMP et de choisir la version qui vous conviendra. La version gratuite permet simplement d’exécuter Apache + MySQL + PHP, tandis que la version pro va un peu plus loin en vous donnant accès aux configurations de ceux-ci (hôtes, modules PHP, etc …). A vous de voir selon vos besoins, j’ai utilisé pendant très longtemps la version gratuite qui m’était suffisante et suis ensuite passé à la version pro lorsque j’ai eu des besoins plus spécifiques, et l’ai supprimé dernièrement pour avoir une installation native. Je ne vais pas m’attarder sur la configuration poussée de MAMP, ce n’est pas le but de cet article, et son installation est très simple, vous devriez vous en sortir seul :)

Installer Apache

Vous venez donc d’apprendre  à mettre en place un serveur avec MAMP, mais vous aurez peut être envie / besoin à un certain moment d’avoir un serveur qui tournera en natif sur votre Mac (sans MAMP donc). Je ne sais pas si on peut parler d’installation pour Apache puisqu’avec Mountain Lion, il est installé avec votre machine, je vais juste vous donner les commandes qui vous permettront de le démarrer, arrêter, etc … via le Terminal :

Démarrer Apache

sudo apachectl start

Arrêter Apache

sudo apachectl stop

Redémarrer Apache

sudo apachectl restart

Connaitre la version d’Apache

httpd -v

Pour vérifier si Apache est bien exécuté, il vous suffira de taper « http://localhost » comme URL dans votre navigateur, et vous devriez voir apparaitre un beau « It works! » o/

Définir un dossier pour votre site

Nous savons maintenant exécuter un serveur Apache et afficher la page web par défaut, mais comment la personnaliser, et surtout, où vais-devoir déposer les fichiers de mon / mes site(s) ?

Par défaut, le dossier contenant la page Apache s’affichant sur « http://localhost » se situe dans le dossier :

/Library/WebServer/Documents/

Pour y accéder rapidement, ouvrez votre Finder, et cliquez sur Aller puis Aller au dossier … dans la barre de menu supérieure. Copiez-y le chemin ci-dessus dans la fenêtre qui se sera ouverte.

Mais vous n’utiliserez pas ce dossier pour vos sites, vous devrez créer un dossier « Sites » à la racine de votre dossier utilisateur sur votre mac (pour accéder à la racine, faites comme précédemment : Aller > Aller au dossier … et entre simplement « / » (sans les guillemets)). C’est dans ce nouveau dossier que vous pourrez déposer vos fichiers et les exécuter depuis votre navigateur. Si vous venez d’une version précédente d’OsX que vous avez mise à jour vers Mountain Lion, normalement ce dossier existe déjà.

Nous allons vérifier maintenant que vous avez bien accès à ce dossier depuis le navigateur. Ouvrez le terminal et entre :

cd /etc/apache2/users
sudo nano votrenomutilisateur.conf

(remplacez votrenomutilisateur par votre nom d’utilisateur OsX)

Vous devriez voir apparaitre un éditeur. Si celui-ci est vide (si il ne l’est pas, vérifiez les informations), copiez / collez les lignes suivantes :

<Directory "/Users/votrenomutilisateur/Sites/">
Options Indexes MultiViews
AllowOverride All
Order allow,deny
Allow from all
</Directory>

Comme précédemment, veillez à bien changer votrenomutilisateur par votre nom d’utilisateur Mac.

Changez maintenant les permissions du fichier :

sudo chmod 644 username.conf

et redémarrez Apache :

sudo apachectl restart

That’s all :)

Installer PHP

On a notre serveur, on sait où déposer nos fichiers, attaquons nous maintenant à PHP. PHP 5.3.13 est installé par défaut sur votre Mac, mais pas activé. Nous allons donc éditer le fichier de configuration. Dans le terminal, copiez / collez :

sudo nano /etc/apache2/httpd.conf

Vous devriez voir apparaitre le contenu du fichier de configuration (à éditer avec prudence). Tapez « ctrl + W » et cherchez « php ». Vous devriez atteindre la ligne suivante :

LoadModule php5_module libexec/apache2/libphp5.so

qu’il vous faut dé-commenter en retirant le « # » devant. Sauvegardez et quittez (« ctrl + o » puis « ctrl + x »).

Redémarrez Apache :

sudo apachectl restart

et vérifiez que PHP fonctionne en créant un nouveau fichier dans le répertoire « Sites » créé précédemment et que l’on nommera phpinfo.php. Copiez-y la ligne suivante :

 <?php phpinfo(); ?>

et enregistrez. Pour y accédez, allez à l’adresse suivante dans votre navigateur : http://localhost/~votrenomutilisateur/phpinfo.php

Installer MySQL

On arrive au bout :) MySQL, lui, n’est pas installé du tout sur votre machine, il vous faudra donc le télécharger sur le site de MySQL. Prenez la version Mac OS X ver. 10.6 (x86, 64-bit), DMG Archive (vous n’êtes pas obligé de vous enregistrez, cliquez simplement sur « » No thanks, just take me to the downloads!« ). Ouvrez le .dmg téléchargé et installez les 3 packages. MySQL est maintenant installé et prêt à être utilisé. Normalement il se lancera automatiquement à chaque démarrage. Pour le lancer ou l’arrêter, vous n’aurez qu’à aller dans vos préférences système, et cliquer sur l’icône MySQL en bas. Un bouton vous permettra de le démarrer / arrêter.

Par défaut, MySQL n’a pas de mot de passe (pas cool). Voici donc la commande à entrer dans votre navigateur pour définir votre nouveau mot de passe :

/usr/local/mysql/bin/mysqladmin -u root password 'votremotdepasse'

Remplacez bienévidemment votremotdepasse par celui désiré, en prenant bien soin par contre de le laissé entouré des quotes simples.

MySQL est maintenant installé et configuré (basiquement mais comme je disais, le but de cet article n’est pas d’aller plus loin pour le moment). Pour ma part, je gère ensuite mes bases de données avec SequelPro qui est une app gratuite et puissante.

Comme je l’ai dit dans mes articles précédents, je ne suis pas un admin système, je reporte ici des infos que j’ai testé et approuvé. Si vous avez de meilleures méthodes ou améliorations, n’hésitez pas à les indiquer en commentaire :)

Source

 

Envoyer des emails à faible coût avec Mailjet

Lorsque j’ai commencé à développer et vouloir lancer mon précédent projet Chala.la, la première des choses à faire était de recueillir des emails afin d’avertir mes potentiels utilisateurs du lancement de celui-ci. Un petit script PHP qui enregistre dans une base de données MySQL ne vous prendra que quelques minutes pour récolter ces emails. Mais venu au moment tant attendu, le lancement, nous avons parfois des surprises, comme cela a été le cas pour moi.

J’avais commencé par utiliser Google Apps pour envoyer mes mails depuis Chala.la et en ai subi les frais. Le but était d’appuyer sur un bouton pour que les 200 emails récoltés soient envoyés d’un coup pour inviter les pré-inscris à la beta à s’enregistrer. Sauf que Google Apps a ses limites. Autant le service est excellent comme messagerie professionnelle (c’est exactement comme Gmail, mais avec votre nom de domaine). Google Apps a donc suspendu très rapidement mon compte utilisateur que j’avais créé pour envoyer mes invitations, pensant que j’étais un spammeur. Je me doutais bien que cela arriverait, mais pas aussi vite ! (le lancement a été fait dans la précipitation, la veille du LeWeb11′). Panique donc lorsque je me rend compte que mes emails ne sont plus envoyés (ce qui veut dire aussi que les mails de notification d’enregistrement ou d’activité ne l’étaient plus non plus), surtout le jour où je suis censé faire une belle démo de mon projet …

Un service pas cher

Heureusement les amis et les réseaux sociaux sont de bons conseils, et j’ai vite été redirigé vers Mailjet que je ne connaissais pas, et qui était encore très jeune à l’époque (il me semble qu’ils venaient de se lancer). Un petit tour dans les tarifs, et là, surprise, il se trouvent qu’ils étaient bien moins cher que les gros acteurs déjà présents tels que Mailchimp, Postmark ou Campaign monitor. Comme beaucoup de services SAAS (Software As A Service), ils ont opté pour le modèle freemium, ce qui vous permet de tester gratuitement et sans engagement Mailjet, et de passer à l’offre payante si vous en êtes satisfaits.

Une installation rapide

Mailjet me semblait tout désigné pour être LA solution à mes problèmes. Je vais donc jeter un oeil dans la documentation, avec un peu la peur du débutant, n’y connaissant rien en envoi d’emails de masse. Et là, re-surprise. La documentation est super simple, et l’intégration se fait en quelques lignes si vous avez utilisé comme moi la fonction mail() de PHP. Nous étions le matin, je venais d’arriver au LeWeb, et en quelques minutes mon problème a été résolu. Heureux.

Une délivrabilité des emails à 99,99%

20% des emails n’atteint jamais la boîte de réception

C’est ce qu’on peut lire sur leur home, et en effet, c’est en général un soucis de taille. Rien de pire que d’attendre un email de récupération de mot de passe et de ne pas le recevoir, tout simplement parce qu’il est tombé dans les spams. Et c’est pareil pour nos newsletters, qui ont un coût et doivent avoir un ROI intéressant.

Pour vérifier si Mailjet est efficace, ce service vous met à disposition des statistiques en temps réel sur vos envois avec le nombre d’emails envoyés, d’ouvertures, de « non délivrés » (rares :) ), etc … Et on se rend compte que sa simplicité d’utilisation cache une belle puissance, il en a sous le capot.

Une belle équipe

En me baladant dans les allées du LeWeb, j’aperçois un t-shirt Mailjet. Comme quoi, le monde est petit. J’ai pu ainsi rencontrer l’équipe de Mailjet, qui de plus est française (basée à Paris) et à qui j’ai fait remonter un bug que j’avais rencontré. Celui-ci avait été corrigé dans l’heure (et encore, un peu moins). Sympas, réactifs, excellent rapport qualité prix, et français. Que demander de plus ? Un café ? Ils vous l’offriront certainement volontier si vous leur rendez une petite visite.

Depuis, je m’empresse de recommander Mailjet autour de moi dès que je vois un collègue qui n’arrive pas à envoyer correctement ses emails transactionnels et à s’assurer de leur bonne réception. Jamais entendu aucun retour négatif. Un des meilleurs services de 2012 pour sûr (Vous m’en voulez pas les gars, je garde 2013 pour Cozeus bien sûr ^^).

En savoir plus sur Mailjet

Développement rapide avec Codeigniter

Lorsque nous commençons le développement d’un nouveau site, pour un client ou nous-même, il y a des tâches qui sont très souvent les mêmes : Gérer les messages d’erreur, établir une connexion avec la base de données, envoyer des emails, créer et traiter un formulaire, etc … Beaucoup de développeurs utilisent des frameworks (des ensembles de classes) complets mais pas toujours simples à prendre en main tels que Symfony ou Zend. Codeigniter, lui, est simple et léger, tout en offrant une bonne base pour votre développement.

Sa prise en main, elle aussi, est très simple. Vous n’aurez qu’à copier / coller sur votre serveur l’ensemble des fichiers que vous aurez téléchargé et à configurer les différents éléments (la documentation est très bien expliquée), et vous serez prêts en quelques lignes à attaquer le développement de votre nouveau site, sans prise de tête, et d’une manière peut être nouvelle pour vous, le shéma MVC.

Un framework MVC

Le MVC, pour Model View Controller, et une méthode d’organisation assez répandue dans le monde des frameworks et permet de garder un code lisible et maintenable. Le modèle traite les données (algorithmes, requêtes vers la base de données, …), la vue affiche le résultat de la requête (en général le HTML), et le contrôleur sert d’interface entre les deux. Vous en saurez un peu plus sur Wikipedia.

De nombreuses bibliothèques

Codeigniter dispose d’une communauté active et est lui-même souvent mis à jour par l’équipe créatrice Elislab. Un des avantages de ce framework est que l’on peu facilement lui ajouter de nouvelles « fonctions » (des libraries) développées par d’autres développeurs. Pour ma part, je trouve très souvent mon bonheur sur Github en cherchant avec les bons mots clefs.

Sa simplicité peut néanmoins devenir un frein pour certains développeurs qui en veulent plus et se dirigeront en général vers Symfony qui lui est très complet.

Et vous, vous connaissiez Codeigniter ? Vous l’utilisez souvent ?

Accéder au site de Codeigniter

En manque d’inspirations ? Dribbblez !

Je suis très souvent surpris lorsque des amis webdesigners me disent ne pas connaitre Dribbble. Impossible ! Et pourtant … Si vous ne connaissez pas Dribbble (avec 3 b), je vais vous faire découvrir ici une pépite, un site que vous consulterez désormais tous les jours. C’est ma petite dose de fraicheur de la journée, mon inspiration devant une page blanche, et surtout un très bon moyen pour moi d’avoir des retours sur mon travail (même si je ne suis membre officiel que depuis peu et que je n’ai pas eu le temps d’y déposer mon travail. Business Before Pleasure).

Dribbble, qu’est-ce que c’est ?

C’est une communauté dédiée aux artistes graphiques du monde entier, ayant pour particularité d’être une sorte de club privé : Vous devez être parrainé pour pouvoir y participer. Vous pouvez, dès maintenant, vous enregistrer sur Dribbble, mais vos actions seront limitées et vous ne pourrez pas y proposer votre travail. Commence alors une longue frustration (1 an 1/2 pour ma part il me semble), à cherche « le précieux », une invitation à devenir membre.

Comment devenir membre ?

Il vous faudra vous munir de patience et surtout de talent, car Dribbble ne cherche pas la quantité, mais la qualité, et c’est ce qui en fait sa force ! Avant de pouvoir côtoyer les plus grands de ce monde, il vous faudra montrer pâte blanche auprès de l’un d’eux. Il arrive que des membres du site reçoivent une invitation Dribbble à distribuer (très rare). Ceux-ci proposent alors des sortes de « Contests » sur un thème de leur choix, où le meilleur des artistes se verra attribuer le précieux. Une petite recherche sur Twitter devrait vous aider. Avec un peu de chance, votre ami lui aussi webdesigner (ou autre hein) aura à sa disposition une invitation à distribuer, mais vous devrez là encore lui prouver que vous la méritez, que vous êtes le meilleur. (préparez un beau petit portfolio, ça aide toujours ^^)

A qui est-il destiné ?

Je le disais plus haut, Dribbble est une communauté d’artistes de différents métiers de l’art, et pas seulement du digital. On y retrouve donc des webdesigners, des dessinateurs, des illustrateurs, des photographes, des designers, des peintres, etc … Et tout ce petit monde cohabite dans la joie et le partage. Le but étant d’exposer son travail afin qu’il soit critiqué et apprécié, mais aussi découvrir le travail d’autres artistes qui ont un style similaire au votre. A la manière de Twitter, vous pourrez, sans avoir besoin d’être un contributeur, suivre vos artistes préférés et découvrir leurs derniers travaux lorsqu’ils seront ajoutés sur Dribbble.

J’ai une invitation, et maintenant ?

Tu as de la chance jeune padawan ! Tu fais désormais partie d’un cercle très fermé et tu vas pouvoir le dire à tout le monde (ça fait toujours bien de mettre un lien vers son profil Dribbble sur son portfolio). La première des choses à faire est une sorte de coutume : Envoyer un « shot » de remerciement à destination de celui qui vous a invité (le mien est ici). A vous ensuite de sélectionner vos meilleures compositions afin de les proposer à la communauté. Plus votre travail sera apprécié, plus vous aurez des chances que celui-ci soit mis en avant auprès des « shots » populaires, le sacre !

Je vous conseille donc de vous inscrire sur Dribbble et d’y retourner un petit peu tous les jours pour perfectionner votre style en vous inspirant des meilleurs … N’hésitez pas à me mettre un lien vers votre profil en commentaire afin que je vous suive. Le mien est Dribbble.com/hugo.

Accéder à Dribbble

Optimiser le chargement des pages de mon site avec Cloudflare

J’ai découvert Cloudflare dès ses débuts et ne l’ai plus quitté. Cloudflare est un service freemium (une version de base gratuite et des versions payantes avec plus d’options) qui agit à différent niveaux afin de rendre le chargement des pages de votre site beaucoup plus rapide en quelques clics seulement et sans connaissances techniques requises (il vous suffira juste de savoir comment changer les DNS de votre serveur).

Un CDN efficace

Beaucoup de gros médias utilisent des CDN (Content Delivery Network) afin de permettre un accès plus rapide à leurs ressources statiques. Un CDN s’occupe de dupliquer le contenu le plus demandé (CSS, JS et images de votre thème) sur différents serveurs à travers le monde afin de le fournir à vos visiteurs depuis le point le plus proche de chez eux. Cela permet entre autre d’avoir, comme moi, des serveurs aux US, mais ne pas me soucier du chargement des éléments importants. Cloudflare peut paraitre très/trop simple pour un utilisateur expérimenté, mais est déjà un très bon début pour un blog ou un site de petite ou moyenne taille. Il va mettre dans le cache de ses 23 datacenters un certain nombre des ressources les plus utilisées par les pages de votre site (la quantité dépend de votre offre). En savoir plus sur le CDN Cloudflare.

Minimifiez automatiquement vos ressources

La minification consiste à supprimer les espaces des fichiers CSS , HTML ou Javascript. Il est souvent très fastidieux de le faire sois-même, et peut demander quelques connaissances en développement pour le faire automatiquement. Heureusement, Cloudflare peut le faire pour vous, en 1 clic seulement (l’option est à activer dans l’administration de votre site sur Cloudflare). Cloudflare identifiera alors vos fichiers HTML, CSS et javascript et les distribuera minimifiés à vos visiteurs, sans les modifier sur votre serveur. Ce qui veut dire que vous pourrez laisser vos HTML, CSS et javascript lisibles sur votre serveur pour les éditer comme vous voulez, sans vous souciez de la minification lors de la mise en production. Plutôt cool et efficace :)

Sécurisez votre site internet

Ah, la sécurité ! Je ne suis pas administrateur système et n’y connais donc pas grand chose en sécurité, mais après plusieurs mois d’utilisation de Cloudflare, il semble avoir une réelle importance à ce niveau. Vous pouvez choisir différents niveaux plus ou moins stricts qui permettront d’identifier d’éventuelles attaques. Si une attaque est détectée, l’attaquant se retrouve face à une page spéciale (que vous pourrez éditer) où il devra renseigner un captcha (ce petit code à écrire pour vérifier que vous n’êtes pas un robot) pour pouvoir continuer sur la page demandée. A partir de ce moment, cet utilisateur aura accès librement à votre site pendant une certaine durée avant de retrouver de nouveau devant un Captcha pour pouvoir continuer. Je n’ai pour le moment pas eu de gènes à ce niveau et Cloudflare semble réellement savoir identifier un hacker d’un visiteur normal.

Statistiques d’optimisation

En plus de nous offrir un service efficace et simple, Cloudflare nous donne des statistiques sur son efficacité sur votre site. On pourra ainsi connaitre la bande passante économisée grace au CDN, la fréquence des crawls des moteurs de recherche, mais aussi le nombre d’attaques stopées grâce à cloudflare et quelques informations sur celles-ci tel que leur origine, leur importance, etc … Ces statistiques nous permettent de nous rendre compte de la réelle utilité de Cloudflare.

Combien ça coûte ?

Comme je vous le disais plus haut, Cloudflare propose un service sur le modèle freemium. Vous avez donc de base une version gratuite (déjà très utile) et des offres payantes, avec une première à 20$/ mois, puis 5€/ mois par site supplémentaire. Autant vous dire que vu le service, le prix est imbattable. Clouflare nous explique aussi comment ils réussissent à proposer un service d’une telle qualité à ce prix :

From the beginning, we worked to minimize the costs of serving every byte. Wherever possible, we use our own custom-built systems that are designed for this purpose. We buy our bandwidth through the wholesale market, which means we’re paying for the size of our pipe, not for each byte we serve through it. We also peer with other networks wherever possible in order to drive the cost of bandwidth as close to zero as possible. We never charge for bandwidth and are committed to always offering a FREE version of CloudFlare with at least today’s feature set. CloudFlare offers additional plans and services which offer even better services at reasonable prices.

Vous l’aurez donc compris, Cloudflare est l’outil indispensable pour accélérer le chargement de votre site et donc satisfaire vos visiteurs mais aussi et surtout les moteurs de recherche tels que Google qui portent une réelle importance à ce facteur.

Accéder à Cloudflare

Vos typos avec Google Webfonts

Les typos système ne suffisent plus. Pour être toujours plus créatifs, il nous faut jouer avec les couleurs, la disposition des éléments sur une page, mais aussi la typographie, les Fonts !

Il y a encore peu de temps, intégrer de nouvelles typos dans des compositions web était très fastidieux. Il fallait convertir la font dans différents formats afin qu’elle soit compatible avec les différents navigateurs, utiliser un code CSS toujours compliqué à retenir, et un résultat pas toujours au rendez-vous. Google a pensé a nous et nous simplifie la vie avec son service gratuit Google Webfonts.

A quoi ça sert ?

Google Webfonts vous donne simplement un accès à des centaines de typographies que vous pourrez télécharger sur votre ordinateur pour les tester dans vos maquettes, puis les intégrer via un code CSS ou JS fournit par le service.

Comment ça marche ?

Rendez-vous sur Google.com/webfonts et parcourez les centaines de typographies mises à disposition dans le catalogue. Il vous sera possible de :

  • Changer la présentation de l’aperçu fonts (Word, Sentence, Paragraph, Poster)
  • Avoir un aperçu d’un mot ou d’un texte dans les différentes typos (avec changement de la taille possible)
  • Classer les typos (Serif, Sans-serif, …)
  • etc … (je vous laisserais découvrir toutes les autres fonctionnalités :) )

Une fois que vous avez trouvé une typo qui vous plait, vous pouvez alors l’ajouter à votre collection et continuer votre recherche. Une fois terminée, Google webfonts vous proposera alors de télécharger l’ensemble de la collection ou de l’utiliser sur votre site.

Utiliser une font sur mon site

Votre belle typo est maintenant sélectionnée, et vous allez simplement cliquer sur « Quick-use » (ou « Use this font » il me semble si vous avez créé une collection) et vous arriverez sur une page vous permettant de sélectionner l’épaisseur ainsi que l’encodage désiré. Une jauge vous indiquera aussi l’impact qu’aura la typo sur le chargement de votre page. A vous ensuite de sélectionner la méthode d’intégration que vous préférez :

  • CSS standard (via une balise <link> à intégrer dans votre header)
  • @import (à intégrer dans votre feuille de style CSS)
  • javascript (j’aime moins cette méthode car elle créé des décalages au niveau de l’affichage : Tant que la typo n’est pas chargée, la font système de remplacement est alors utilisée en attendant et est souvent très différente de la typo voulue. Une fois que la typo désirée s’affiche, la mise en page est modifiée ce qui donne un effet visuel peu sympathique)

Il ne vous reste plus donc qu’à copier / coller la méthode choisie à l’endroit voulu, et de l’utiliser comme une typo classique dans votre CSS. That’s all !

Utiliser Google Webfonts