J’en avais parlé lors de sa sortie, WP Photo Sphere est un plugin pour WordPress que j’ai créé dans le but d’afficher des panoramas Photo Sphere sur un article ou une page posté(e) sur un blog. Il n’a pas fallu attendre longtemps avant d’avoir quelques retours d’utilisateurs et un certain nombre a réclamé la possibilité d’un chargement automatique pour les panoramas, c’est désormais chose faite !

Cette mise à jour est une mise à jour mineure dans le sens où elle n’intègre en réalité qu’une seule réelle nouveauté, à savoir ce chargement automatique que vous devez indiquer à chaque panorama qui doit être chargé automatiquement, via le nouvel attribut autoload qui ne requiert aucune valeur. Vous pouvez faire charger automatiquement un panorama dont les dimensions seront celles par défaut avec, par exemple [sphere 42 autoload]. De même, vous pouvez indiquer des dimensions spécifiques et toujours faire charger la chose automatiquement : [sphere 42 width="300" height="150" autoload].

À noter que le code a été amélioré. Pour commencer, je l’ai commenté, une chose que je n’avais pas faite auparavant tout simplement parce que j’ai la très mauvaise habitude de ne jamais le faire (mais je me soigne). De plus, vous pouvez maintenant spécifier les attributs dans n’importe quel ordre, ce qui n’était auparavant pas possible sans avoir un résultat… inattendu, on va dire ça comme ça. Ainsi, ce tag fonctionnera comme vous vous y attendez : [sphere 42 autoload height="500" width="100"].

On finira par une petite correction de bug qui est en fait une sorte de conflit qui arrive avec le plugin FancyBox. La solution à ce problème est d’ajouter le classe « nofancybox » au lien menant au panorama. Plutôt que de le faire simplement comme ça en prenant le risque d’avoir d’autres conflits, j’ai préféré rajouter une nouvelle option dans la page prévue à cet effet : la classe du lien. Si vous utilisez le plugin FancyBox, il vous suffit donc de remplir ce champ avec la classe « nofancybox » et le bug sera résolu.

Je sais que j’ai mis un peu de temps avant d’enfin terminer cette nouvelle version, mais j’ai en fait eu pas mal de soucis avec la gestion des attributs, des soucis qui sont venus s’ajouter à un manque de temps, bref, pas trop cool mais maintenant, tout est bon. Bien sûr, comme pour la version 1.0, n’hésitez pas à me proposer vos idées d’amélioration et à me faire part de vos retours !

Si vous n’avez pas encore installé WP Photo Sphere et que ce plugin vous intéresse, vous pouvez le trouver sur la petite page créée juste pour lui mais aussi sur WordPress.org ou bien encore sur GitHub.

Mise à jour : Il y avait un gros problème avec la version 1.1 en fait, dans le fichier readme plus précisément (et aussi dans cet article) : je ne sais pas vraiment ce qui m’a pris, j’ai mentionné un certain attribut autostart qui n’existe pas. Il faut en réalité utiliser l’attribut autoload, j’ai corrigé cette erreur dans une version 1.1.1.

Original post of Tasse de Café.Votez pour ce billet sur Planet Libre.

Récemment, j'ai eu besoin d'afficher le nombre de tables d'une base MySQL 5.X. Je voulais éviter de faire du Bash à outrance et extraire la donnée directement depuis MySQL... Même si le Bash, c'est bon, mangez-en.

Allez, on commence par la requête :

SELECT count(table_name) FROM INFORMATION_SCHEMA.TABLES WHERE table_schema = 'drupal';

mysql> SELECT count(table_name) FROM INFORMATION_SCHEMA.TABLES WHERE table_schema = 'drupal_4';
+-------------------+
| count(table_name) |
+-------------------+
|               143 |
+-------------------+
1 row in set (0.00 sec)

Maintenant, l'idée est d'obtenir l'information directement en Bash :

mysql -B -u Utilisateur -pMotdePasse information_schema -e "SELECT count(table_name) FROM INFORMATION_SCHEMA.TABLES WHERE table_schema = 'drupal';" | grep -E ^1

Résultat :

usr@srvmysql # mysql -B -u Utilisateur -pMotdePasse information_schema -e "SELECT count(table_name) FROM INFORMATION_SCHEMA.TABLES WHERE table_schema = 'drupal';" | grep -E ^1
143

Voilà !

Original post of Jeoffrey Bauvin.Votez pour ce billet sur Planet Libre.

« Googlelisez-moi, Googlelisez-moi. Oui, mais pas tout de suite, pas trop vite. Sachez me convoiter, me désirer, me captiver. » (Juliette Gréco)

Sources :

• L’accord Google-presse ou l’arnaque intellectuelle du Gouvernement (Numerama)
• Aurélie Filippetti rappelle à Google ses obligations fiscales (Numerama)
• Qwant : un concurrent de Google « made in France » (Numerama)

Crédit : Simon Gee Giraudot (Creative Commons By-Sa)

Original post of Framablog.Votez pour ce billet sur Planet Libre.

En bêta depuis plusieurs mois, le client Steam est maintenant disponible officiellement au téléchargement. Même si le lancement a été un peu confus, le client Steam vient de faire son apparition officiellement. Vous pouvez donc le retrouver dès aujourd'hui dans la logithèque, que ce soit en 64bits ou 32bits. La version 32bits est annoncée comme compatible avec les versions 12.10,12.04,11.04,10.04 d'Ubuntu, tandis que la version 64bits est annoncée compatible seulement avec Ubuntu 12.10 et 12.04.     Ce lancement s'accompagne d'une campagne de promotion avec des annonces sur le site Steam encourageant les utilisateurs à installer Ubuntu. Il est également possible de profiter d'une grosse promotion de 50% à 80% jusqu'au 21 février sur un certains nombre de titres. Pour les joueurs de Steam Forteress, il sera possible d'obtenir un Tux comme objet pour son personnage dans le jeu. Toutefois, cette offre reste limitée et sera réservée aux joueurs les plus réguliers.     Actuellement, ce sont 60 jeux qui sont disponibles sous Steam. On retrouve beaucoup de jeux venant de studios indépendants, notamment un certain nombre déjà présent dans la logithèque Ubuntu. D'autres titres un peu plus orignaux ont fait leur apparition, comme Team fortress 2, Counter Strike 1.6, Counter Strike Source ou encore Half-Life premier du nom. D'autres devraient suivre dans le courant de l'année, notamment les jeux s'appuyant sur le moteur 3D Source de Valve Studio. Au niveau stabilité, il reste encore du travail et les testeurs rencontrent encore un certains nombre de problèmes. Mais là aussi, le rythme des mises à jours est rapide et les choses devraient s'améliorer durant l'année. Les bêta-testeurs sous Ubuntu représentent déjà 1.12% des utilisateurs et l'on espère que ce chiffre va continuer de progresser avec la sortie officielle. On attend également d'autres projets du côté de Valve : une console sous Linux cette année et la sortie d'une nouveau moteur 3D directement compatible avec Linux.

Original post of Lemarinel Sébastien.Votez pour ce billet sur Planet Libre.

Avec la généralisation des technologies JS, CSS3 et HTML5, il est aujourd'hui possible de faire des sites Web qui n'ont rien à envier aux interfaces des logiciels que l'on peut trouver sur nos machines. Le revers de la médaille est une complexité croissante qui nécessite de faire appel à des professionnels . Quand vous devez faire un site personnel ou pour une association, il est difficile, à moins de s'appeler Cresus, de passer par un Web designer.

Heureusement des frameworks libres permettent avec un minimum d'investissement et de connaissances de bâtir des sites Web dans les règles de l'art. Nous allons dans ce billet parler du plus médiatique d'entre eux: Bootstrap. L'idée n'est pas de traduire la documentation officielle qui est par ailleurs très bien faite, mais de partager avec-vous mes méthodes que je suis en train d'utiliser pour développer le prochain thème du Blog de Nicolargo qui sera, vous l'avez compris largement basé sur Bootstrap.

 Créer l'arborescence de son projet

Nous allons commencer par créer l'arborescence générale de notre site qui sera stocké, pour illustrer ce billet, dans le répertoire ~/projet de notre disque dur. On y télécharge&&décompresse la dernière version stable de Bootstrap.

mkdir ~/projet
cd ~/projet
wget http://twitter.github.com/bootstrap/assets/bootstrap.zip
unzip bootstrap.zip
rm bootstrap.zip

Note: Contrairement à la plupart des tutos que l'on peut trouver sur le net, je préfère conserver le répertoire bootstrap intact et utiliser d'autres répertoires pour stocker mes configurations spécifiques. Ainsi, la mise à jour de Bootstrap n'aura aucun impact sur mon site.

En plus de Bootstrap, j'ajoute également la dernière version du projet Font Awesome qui met à notre disposition un nombre important et varié d'icônes jusqu'à une résolution de 280 pixels.

cd ~/projet
git clone git://github.com/FortAwesome/Font-Awesome.git

Les données spécifiques à notre site seront stockées dans l'arborescence suivante (à adapter à vos besoins)

cd ~/projet
mkdir css img js
touch index.html css/style.css

On a donc l'arborescence suivante:

.
├── bootstrap
│   ├── css
│   │   ├── bootstrap.css
│   │   ├── bootstrap.min.css
│   │   ├── bootstrap-responsive.css
│   │   └── bootstrap-responsive.min.css
│   ├── img
│   │   ├── glyphicons-halflings.png
│   │   └── glyphicons-halflings-white.png
│   └── js
│       ├── bootstrap.js
│       └── bootstrap.min.js
├── css
│   └── style.css
├── Font-Awesome
│   ├── css
│       ├── font-awesome.css
│       └── ...
├── img
├── index.html
└── js

On peut ensuite commencer à éditer la premier page de son site en utilisant son éditeur de texte de prédilection (moi c'est geany ou vim selon les jours):

geany index.html

Voici le template que j'utilise:

    
        
        
        
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
        
        <link href="Font-Awesome/css/font-awesome.min.css" rel="stylesheet">
        
        <link href="css/style.css" rel="stylesheet" media="screen">
    
    
        
Hello Bootstrap !
    
    

Jusque là rien d’exceptionnel... Vous devriez voir s'afficher "Hello Bootstrap" en chargeant votre page dans un navigateur HTML. C'est à partir de maintenant que l'on va profiter de la puissance de Bootstrap !

 Définir vos grilles

Par défaut, Bootstrap utilise un système avec une grille de 12 colonnes (voir le site 960.gs pour une explication de cette dernière phrase). Votre fenêtre de navigateur est ainsi divisée en 12 sections de tailles équivalentes.  Vous pouvez l'adapter à votre besoin en gardant ce chiffre à l'esprit. Par exemple pour créer une page Web avec 2 colonnes, il suffit d'ajouter les lignes suivantes entre les balises ... de votre fichier HTML.

        

            
Article
            
Sidebar
        
    

Ce qui donne une première colonne de taille 8/12 de la taille de votre fenêtre et une autre de 4/12:

On utilise ici une disposition fluide (row-fluid) qui permet d'adapter dynamique la largeur de vos deux colonnes en fonctions de la taille de votre écran. Si vous voulez une taille de colonne fixe, il suffit de remplacer la classe container-fluid par container.

Bootstrap génère par défaut des espaces entre deux colonnes (environ 20 pixels pour une dic container). Il est  possible de générer des espaces supplémentaire avant ou entre vos colonnes en utilisant le paramètre de classe offset. Par exemple pour créer un espace de taille 1/12 d'écran entre vos deux colonnes, il suffit de modifier votre code de la manière suivante:

       

            
Article
            
Sidebar
       
    

On obtient:

Noter bien que la somme des span8 + offset1 + span3 est toujours égale à 12. Pour être tout à fait précis, la somme doit être égale à la taille de votre grille dans lequel votre balise row-fluid est imbriquée. Comme nous l'avons vu la grille par défaut à une valeur de 12. Mais il est possible d'utiliser une autre valeur en définissant une div chapeau.  Par exemple pour définir une grille de 6 et y créer deux colonnes de 4 et de 2, on doit utiliser le code suivant:

            

                
Article
                
Sidebar
            
        

On obtient alors:

 "Responsive design" en une ligne

Comme vous pouvez le voir il est possible d'imbriquer des grilles dans d'autres et ainsi découper facilement sa page sans se soucier des redimensionnements de fenêtres. En effet, tout le "responsive design" est géré par Bootstrap. Votre site sera donc automatiquement compatible avec les tablettes et les smartphones !

Le tableau suivant donne la liste des tags que l'on peut utiliser pour rendre son site compatible avec les différents supports:

Comment lire ce tableau ? C'est relativement simple. Prenons un exemple. Nous voulons dans notre premier exemple avec deux colonnes (article et sidebar) cacher automatiquement la sidebar quand notre site est consulté depuis un smartphone. Nous allons pour cela afficher la classe .hidden-phone de la manière suivante:

        

            
Article
            
Sidebar
        
    

Affichage sur un PC ou une tablette (ou un écran > à 767 pixels):

Affichage sur un smartphone (ou un écran de largeur <= à 767 pixels):

Magique non ?

 Passons aux contenues de vos pages

Nous avons maintenant une belle grille "responsive" qu'il va falloir remplir.

En plus des éléments de bases (texte, images, icônes, formulaire), Bootstrap propose des composants avancées (barre de navigation, menu, aperçu d'image, pagination, barre de progression) mais également un système de plugins avec des composants dynamiques en JavaScript (carrousel, popup, menu en accordéon, formulaire dynamique...). Je vous invite à consulter les liens données dans ce chapitre. Des idées pour votre prochain site viendront d'elles même.

Sources utilisées pour rédiger ce billet:

• La documentation officielle de Bootstrap
• Utilisation de Less avec Bootstrap

 

Cet article Bootstrap pas à pas est apparu en premier sur Le blog de NicoLargo.

Original post of Nicolargo.Votez pour ce billet sur Planet Libre.