S'adapter

Au début on avait pas énormément d'appareils exotiques en dehors du desktop. On voyait souvent un sous-domaine dédié à l'affichage d'un site sous iPhone, avec un thème propre. D'un point de vue conception on était tranquille, le thème mobile était indépendant du thème principal, et on connaissait les contraintes de l'iPhone. Mais maintenant on a beaucoup plus de smartphones et même des tablettes, chaque appareil possédant sa propre résolution. Et là on se rend compte que faire un thème dédié pour chacun de ces appareils est une idée complètement idiote. Donc le site web doit s'adapter.

Bonjour media query

Vous les avez déjà utilisées. Mais si, media="print" pour avoir un CSS dédié à l'impression par exemple. C'est pas nouveau, ça date de la norme CSS 2.1. Ce qui est nouveau se sont les ajouts de la norme CSS3. Des ajouts nous permettant de tester la résolution de l'écran, le type de device etc.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css"/>

Si l'appareil à une résolution inférieure ou égale à 480px en largeur, le fichier mobile.css sera lu. L'attribut @media du CSS permet de faire la même chose sans avoir à le faire dans la balise <link>.

Par exemple sur ce site quand la résolution devient petite, j'enlève la sidebar sur la gauche pour la placer en dessous du contenu. C'est ce que permettent de faire les media queries. On peut imaginer faire disparaître certains éléments qui n'auraient par leur place sur un petit écran, avec un display:none; par exemple.

Les media queries de ce type ne fonctionnent que sur les navigateurs récents et sur la plupart des navigateurs mobiles (webkit, opera). Il y a donc un script js que j'utilise pour certains navigateurs (Oh hai, Internet Explorer). Vous pouvez le trouver sur cette page.

Responsive Grid

Pour me faciliter le travail j'ai utilisé une Grid CSS réactive. Construite sur les media queries, les différents blocs peuvent se ré-agencer suivant la taille de l'écran. Voici une liste non-exhaustive

• Less Framework 4
• Less+ Framework
• Skeleton
• 320 and up

FitText

FitText.js est un plugin jQuery permettant de rendre les tailles de polices flexibles. Je l'utilise pour certains headers. Ce plugin va les redimensionner par rapport à la taille du conteneur. Pratique.

Thème Phollow

Je met en ligne la source du thème WordPress actuel sur Github pour les personnes intéressées. Vous pouvez le trouver sur cette adresse. Les forks sont fortement encouragés.

Pour moi il est maintenant obligatoire de travailler sur des sites qui fonctionnent sur n'importe quelles resolutions que sur des sites qui fonctionnent sur les résolutions des appareils actuels.

Mais si possible vivants.. Pour tester l'application iPhone que j'ai développé. Concrètement il s'agit d'une extension mobile du blog, avec la possibilité de voir tous les billets, de poster un commentaire, de partager.. de la manière la plus simple possible (du moins je le crois).

L'application du blog a été un prétexte ou plutôt un entrainement pour apprendre l'Objective-C. Je me sens maintenant à l'aise avec ce type de programmation, et rien de mieux que la pratique pour apprendre.

Ce que je vous propose, c'est de tester cette application avant que je la soumette à l'Apple Store. Donc si ça vous intéresse, envoyez moi un mail avec votre matos + version d'iOS (iPhone, iPad, iPod, peu importe..). Et moi je vous envoi les accès :)

Bref ayant un autre serveur sous les bras, j'ai décidé de balancer phollow sur le FreeBSD. Et comme ça j'en aurais plus qu'un seul à administrer.

Ça m'a permis de me familiariser avec le système FreeBSD, que je trouve vraiment sympa. J'en ai profité pour lâcher Apache 2 au profit de lighttpd. J'ai d'ailleurs trouvé une config bien cool pour faire tourner les WordPress d'une manière assez optimisé. Je pourrais vous parler de FreeBSD, lighttpd etc. si ça vous intéresse.

Ah et deuxième bonne nouvelle, j'ai réussi à remettre la main sur mon laptop Arch Linux et à réparer l'alim. Du coup après 2 go d'updates et de recompilations en tout genre, je vais pouvoir me remettre à la config de Windows Manager ;)

Stay tuned les amis.

On commence par installer bind9 et les outils nécessaires :

apt-get install bind9 dnsutils

Ensuite on commence par éditer le fichier /etc/bind/named.conf.options :

options {
        directory "/var/cache/bind";
 
        forwarders {
                213.251.188.140;  # Serveur DNS d'OVH, notre serveur secondaire (sdns1.ovh.net)
        };
 
        auth-nxdomain no;    # conform to RFC1035
        listen-on-v6 { ::1; };
        listen-on { any; };
        allow-recursion { 127.0.0.1; 213.251.188.140;};
        notify yes;
};

On rajoute ensuite une nouvelle zone, dans ce tuto je vais prendre l'exemple de mon nom de domaine. Il faut créer le fichier /etc/bind/db.phollow.fr :

$ttl 86400
phollow.fr.     IN      SOA     r24041.ovh.net. votre.adresse.mail.com. (
                                2009052218    #un id unique qu'il faut changer après chaque modif du fichier, généralement la date
                                21600
                                3600
                                604800
                                86400 )
phollow.fr.     IN      NS      r24041.ovh.net.    # Mon serveur (qui fera le DNS primaire)
phollow.fr.     IN      NS      sdns1.ovh.net.      # DNS secondaire
phollow.fr.     IN      A       87.98.162.48        # l'IP de mon serveur en tant qu'alias
www             IN      CNAME   r24041.ovh.net.  # pour www.phollow.fr
mail            IN      CNAME   r24041.ovh.net. # pour mail.phollow.fr etc.

Noter bien les points après chaque nom de domaine, ils sont importants.

Ensuite il faut rajouter cette zone dans le /etc/bind/named.conf :

include "/etc/bind/named.conf.options";
 
// prime the server with knowledge of the root servers
zone "." {
        type hint;
        file "/etc/bind/db.root";
};
 
// be authoritative for the localhost forward and reverse zones, and for
// broadcast zones as per RFC 1912
 
zone "localhost" {
        type master;
        file "/etc/bind/db.local";
};
 
zone "127.in-addr.arpa" {
        type master;
        file "/etc/bind/db.127";
};
 
zone "0.in-addr.arpa" {
        type master;
        file "/etc/bind/db.0";
};
 
zone "255.in-addr.arpa" {
        type master;
        file "/etc/bind/db.255";
};
 
zone "phollow.fr" {
        type master;
        file "/etc/bind/db.phollow.fr";
};

Après ça devrait être bon, vous pouvez vérifier la syntaxe de vos fichiers de configuration avec la commande :

named-checkconf -z

Si il n'y a pas d'erreur, alors on redémarre le démon bind :

/ect/init.d/bind9 restart

Ensuite il reste seulement à indiquer à votre fournisseur de noms de domaine que les DNS primaires et secondaires sont respectivement r24041.ovh.net et sdns1.ovh.net (dans mon cas).

Le thème des plasmas est celui par défaut de KDE 4.3. J'utilise Qtcurve pour les styles et décorations de fenêtres des applis Qt et Gtk. De cette manière toutes mes applis sont homogènes. J'utilise les couleurs Milky Air. Le fond d'écran peut être téléchargé à cet endroit.

En tout cas c'est déjà assez joli à la base :)))

Wallpaper

Openbox

Un petit retour vers Openbox, après avoir testé les tiling WMs. Et je joue avec conky en ce moment, on peut faire des trucs sympas.

Le thème Dyne (openbox + GTK) de Lyrae collait parfaitement à ce magnifique fond d'écran que vous pouvez trouver ici. La configuration du pypanel a été empruntée à Azieth. Le thème d'icônes peut être trouvé ici. Enfin la configuration du conky est ici.

Le conky a été rendu légérement transparent avec transset-df, plus d'infos sur cet article.

Enjoy!

Aujourd'hui nous allons attaquer l'installation d'un environnement LAMP, c'est à dire avec Apache, MySQL et PHP. Ces explications pourront egalement s'appliquer à une Ubuntu, il ne devrais pas y avoir trop de changement.

Apache

Il y a deux modèles pour utiliser PHP au sein d'Apache. La méthode classique consiste à l'embarquer à l'intérieur d'Apache en tant que module, c'est cette méthode que nous verrons dans ce billet. Ou alors on peut utiliser FastCGI dans lequel PHP et Apache sont deux processus distincts, j'héberge ce blog de cette façon mais cette méthode est plus compliquée et plus longue à mettre en place, j'en parlerai donc dans un autre billet en présentant les avantages de cette autre méthode.

Logguez vous sur votre beau serveur tout neuf en root, on va mettre la base de données des paquets à jour :

apt-get update

Et ensuite on va mettre à jour les paquets installés :

apt-get upgrade

Histoire de bien partir. Maintenant nous allons pouvoir installer Apache 2 et PHP5 :

apt-get install apache2 php5 libapache2-mod-php5

Apache se lancera automatiquement après l'installation, on peut tout de suite tester si PHP fonctionne, en créant un fichier dans /var/www/phpinfo.php avec comme contenu :

Ouvrez le navigateur et pointez l'url sur http://ip.de.votre.serveur/phpinfo.php pour vérifier que PHP est interprété.

MySQL

MySQL 5 s'installe facilement aussi :

apt-get install mysql-server mysql-client php5-mysql

La création du mot de passe root (le root de mysql) vous sera demandée lors de l'installation. Nous allons maintenant vérifier que notre base de données fonctionne bien avec phpmyadmin.

Phpmyadmin

apt-get install phpmyadmin

Il vous demandera quel serveur vous voulez automatiquement configurer, nous devons répondre dans notre cas apache2.

On peut maintenant aller sur http://ip.de.votre.serveur/phpmyadmin et se logguer avec les identifiants crées lors de l'installation de Mysql. Une fois à l'intérieur de phpmyadmin, on peut rajouter des bases de données et des utilisateurs.

Ah suivre..

L'installation de votre nom de domaine et de votre serveur DNS. Ensuite viendront l'installation d'un serveur FTP, l'installation des VirtualHosts et bien d'autres choses.

Stay tuned !

Ps: Si vous avez des remarques pouvant améliorer cette partie, n'hésitez surtout pas ;)

La première capture et donc un environnement sous Gnome avec compiz-fusion et le gestionnaire de fenêtres Emerald.

Le fond d'écran (miam) a été fait par Manicho, un artiste de DeviantArt. Le thème est une suite appelée spot fait par aMADme. J'utilise le plugin gnome-global-menu pour que le menu des mes applications apparaissent sur le panel du haut. Sinon le reste est assez classique.

La deuxième capture est sous Openbox. En fait au départ j'ai commencé par faire le panel tint2 en voulant quelquechose de simple et de blanc. J'ai ensuite pris un thème Gtk et Openbox qui allait bien avec. Le thème Gtk est celui de la très belle suite Heaven, et le thème Openbox est Purgatory. Vous pouvez choper le fond d'écran ici, il a été fait par Ether.

Le dernier est une capture de mon eeePC sous evilwm. Le fond d'écran est parmi ceux de mon pack de 100 wallpapers. Et le conkyrc est ici.

Let's go !

Gtk : MGT

Emerald : Bump

Icônes : area 0.43

Wallpaper