Pourquoi ?

Je voulais un endroit pour stocker de belles images alors j’ai essayé Pinterest mais rien que l’obligation de préciser une description à chaque image m’a vite gavé. Je voulais aussi pouvoir ajouter une image juste en renseignant son URL pour piller efficacement l’Internet. J’ai donc développé mon propre thème WordPress. A noter qu’aucune image n’a été utilisé dans ce thème. Pure CSS, frak yeah ! Le thème est simple mais ne me satisfait pas totalement pour l’instant, j’y reviendrai de façon itérative.

J’ai pu tester ma méthodologie de déploiement sur mon nouveau serveur Kimsufi, le bien nommé piouf. Un petit « deploy dubeaujeu » dans le terminal et le depôt git sur la prod pull la dernière version depuis github.

Web app ?

Même si j’ai du mal à qualifier dubeauj.eu d’application, j’en ai profité pour tester les possibilités qu’offrent les systèmes d’exploitations mobiles aux web apps. Étonnamment, iOS est bien plus accueillant qu’Android. Une fois le favori web ajouté au menu d’accueil, difficile de différencier une application native d’une web app sur iPhone : c’est le même système pour l’icône et on peut enlever à loisir la barre d’adresse pour afficher la web app en plein écran. Le futur Firefox OS va encore plus loin en accueillant les web apps dans son Firefox marketplace, pour cela, il ne suffit que d’une icône et d’un fichier xml : le manifest.webapp. Finalement, Android déçoit et freine totalement le développement des web apps. Il faut deux étapes pour ajouter une web app sur l’écran d’accueil et impossible de se défaire de l’icône immonde de favori.

dubeauj.eu

Elle est accessible à l’adresse css.thenew.fr.

Réalisée en HTML, CSS et JS, vous pouvez la récupérer sur Gihtub.

Cette charte regroupe des règles piochées dans diverses références (Raphaël Goetter, idiomatic-css, Darklg, …) et éprouvées depuis plus d’un an comme Front-End Developer chez Colorz.

Ce document n’est bien évidemment que ma proposition, des règles comme le choix de l’indentation sont purement subjectives, le plus important est de trouver des standards approuvés par toute l’équipe. Le but premier de cette publication est d’apporter débats et réflexions.

Avec mon collègue @JeanBaptisteSo, nous avons monté l’équipe Junior. Lui, au développement PHP et moi, chargé de la conception graphique et de l’intégration. Passant plus de temps à tester les animations et les mediaqueries CSS qu’à réaliser des mock-up, en faux wedesigner que je suis.

GG

Je vous recommande de regarder la présentation, ce ne sera pas long, pour faire un tour du projet :

Présentation GG

Nous avons donc rendu un site web fonctionnel, amputé de nombreuses fonctionnalités évidemment, mais qui permet d’ajouter des bons plans, de s’inscrire, de commenter.
La web app en ligne, n’oubliez pas de redimensionner votre navigateur pour tester en version mobile :

gg.remybarthez.com

Quelques enseignements du projet

- La création des logos (Junior et GG) me plaît toujours mais je n’ai pas encore trouvé ma méthode idéale pour la conception des maquettes du site. Je trouve que le design dans le navigateur m’entraîne vers un graphisme trop vide et strict.
- Le design du site en version tablette nous a paru avoir le cul entre le téléphone et le bureau. Difficile de voir la tablette en paysage autrement que comme un petit écran d’ordi et pareil pour le mode portrait comme un gros mobile. Est-il vraiment nécessaire de penser à une mise en page pour les tablettes ? Je pense que pour certains projets bien spécifiques, cela peut-être intéressant mais pour le reste du temps les design mobiles et ordi s’adaptent bien à cette appareil hybride.

Si vous avez créer votre dépôt avec un client Subversion 1.7 comme TortoiseSVN, une erreur s’affichera sous Netbeans indiquant que le plugin intégré au logiciel utilise une ancienne version et n’est pas compatible avec votre installation.

org.tigris.subversion.javahl.ClientException: Unsupported working copy format This client is too old to work with working copy ‘C:\PATH\TO\REPO’.
You need to get a newer Subversion client, or to downgrade this working copy. See http://subversion.tigris.org/faq.html#working-copy-format-change for details.
Nous vous recommandons chaudement d’installer un client Subversion plus récent ou de mettre à jour votre copie de travail vers une version plus ancienne.
Toute modification locale peut corrompre votre copie de travail et certaines opérations sur les fichiers telles que copie, renommage et suppression ne fonctionneront pas correctement.

Pour corriger cette erreur, nous allons télécharger un client SVN utilisable en ligne de commande :

Étape 1 :
Télécharger et installer CollabNet Subversion Client (actuellement version 1.6)
http://www.open.collab.net/downloads/netbeans (une inscription est nécessaire)

Étape 2 :
CollabNet ne fait pas encore de mise à jour automatique vers la v1.7 (stable depuis le 23 Octobre 2011), il faut donc télécharger manuellement la 1.7RC3
https://ctf.open.collab.net/sf/frs/do/viewRelease/projects.csvn/frs.svn_release_candidates.windows

Étape 3 :
Décompresser l’archive dans le dossier « ProgramFiles\CollabNet\Subversion Client » et écraser les fichiers existants.

Étape 4 :
Un simple redémarrage de Netbeans pourrait suffire selon les cas.
L’erreur étant toujours présente chez moi, j’ai du ajouté à la fin de la cible du raccourci de Netbeans : 
-J-DsvnClientAdapterFactory=commandline

J’en ai profité pour changer la langue par défaut de l’IDE en anglais, ce qui donne au final :

« C:\Program Files\NetBeans 7.0\bin\netbeans.exe » –locale en_US -J-DsvnClientAdapterFactory=commandline

Netbeans supporte maintenant les dépôts SVN au format 1.7.

These Aren’t the Sites You’re Looking For:

Modern Web Applications

par Sam Dutton

Excellent tour d’horizon des bonnes pratiques pour réaliser une web app, que ce soit du design d’interface ou du développement, plus tourné javascript. Chaque sujet était brièvement abordé mais c’était très intéressant et condensé. Le processus de publication sur le Chrome Web store fut bien détaillé. Vous pouvez presque revivre la conf avec les excellentes slides, faites en pages web. C’est un plaisir de suivre une présentation avec un support de qualité.

Bleeding Edge HTML5

par Paul Kinlan

Encore autour des Web Apps, Paul Kinlan présentait quelques pistes d’expérimentations intéressantes sur les technos HTML5, Javascript. Notamment Web Intents qui ferait communiquer les services (par exemple entre une messagerie et un upload de photos) entre eux très facilement. Des APIs pour se libérer de Flash (Fullscreen, Audio, Webcam) sont aussi disponibles mais les résultats actuels donnent encore raison au format propriétaire d’Adobe.

La charte des slides web est décidément très harmonieuse : je vous conseille les Slides de la présentation.

Google+ APIs & Building Google+ Hangout apps

par Jonathan Beri et Chris Chabot

Présentation de Google+ et du chemin à suivre pour réaliser une app Google+ Hangout. C’était la fin de journée, nous étions fatigués et ce n’était pas le sujet le plus passionnant mais les deux orateurs ont réussi à nous maintenir en alerte pour finalement participer à une séance de Questions / Réponses très intéressantes. Nous avons appris que Google+ évoluerait très prochainement : pages entreprises/marques, plusieurs photos de profil (une par cercle), intégration dans Google Apps.

Excellence in the Android User Experience

par Nick Butcher

Pour déroger à la règle, j’ai suivi une conférence Android qui présentait les nouvelles règles d’Interface Utilisateur proposées par Google pour les périphériques tournant sous Android (téléphone, tablette).
Un point important était mis sur la différence entre l’interface d’une même application sur mobile et sur tablette. L’écran est plus large, mais les usages sont aussi différents. Rien que sur tablette, l’utilisateur agit différemment qu’il soit en mode paysage (navigation, galerie) ou en portrait (lecture).

Autres

Malheureusement, le Accelerated Beginner App Engine Workshop n’a pas pu se faire et j’ai raté le début de la présentation sur le web offline avec IndexedDB, FileSystem, AppCache, WebSQL, etc.
Mes collègues m’ont aussi fait part de leurs impressions après la conf sur les outils de développement Google Chrome (DevTools Tips and tricks) : pas assez poussé selon eux.

Google France a profité de l’événement pour lancer un concours sur le développement d’une web app de data visualisation concernant les élections présidentielles de 2012. Plus d’infos sur le site du concours qui se termine le 7 décembre.
J’ai aussi pu rapidement faire le tour d’un Chromebook, c’est décidément perturbant de retrouver une interface si simple (mais limitée) sur un ordinateur portable. A suivre.

Conclusion

Tous ses orateurs enthousiastes, ses séances passionnantes m’ont fait repartir avec plein d’idées et d’envies en tête.

Vous pouvez retrouver plus de photos dans mes photos Google+.

Un passage dans la zone jeu vidéo avant de partir pour essayer pour la première fois Kinect avec Child of Eden et tester From Dust. On trouvait aussi Limbo, Insanely Twisted Shadow Planet, … Excellent choix.

Des photos bien plus intéressantes du making of sur le blog d’Etienne Mineur.

Le book a été réalisé avec Illustrator ; j’ai mis de côté InDesign, pourtant très bon logiciel, pour utiliser un soft que je maîtrise mieux. Illustrator offre un système de pages très utile et efficace pour ce genre de projet.

Page xenon360

Page divers