Les ressources de design de Facebook

facebook-design-resources

Assez fan des « mockups », au grand dam de Ludo, pour illustrer mes articles plutôt que de plates copies d’écran et toujours la recherche de nouvelles images, je suis tombé par hasard sur le site « Facebook Design Resources ».

facebook-designer-resources

Cette page regroupe une large collection de ressources conçues (et on suppose utilisées) par les designers chez Facebook. Excellente surprise : tous les éléments proposés le sont aux formats Photoshop et Sketch. La deuxième bonne nouvelle, pour les allergiques à Facebook comme moi, c’est que ces éléments ne sont pas spécifiques au réseau social au point de coller des bouts d’interface ou de logo Facebook partout. Yay !

Du iOS 9, des mains et des appareils

iOS 9

Dans la section « iOS 9 GUI« , on retrouve près de 50 écrans génériques d’iOS 9 et une palanquée d’icônes et de boutons en tous genres qui constituent un excellent complément aux fameuses ressources Sketch de Meng To.

facebook-ios9-gui

L’archive DMG contient même une mini-application pour ajouter tout ça au templates de Sketch !

facebook-ios-gui-sketch

Deux mains en noir et blanc

Du côté de « Hands Kit« , des mains à assembler façon Ikea avec des smartphones divers et variés et des mains déclinées en politiquement correct avec tantôt une main noire et une main blanche. Mais alors pourquoi pas d’iPhone noir ?!

facebook-hands-kit

Mac, iPhone, PC, Android

Enfin dans « Devices« , tout un tas d’écrans et de machines que ce soit de chez Apple, Dell ou des plus grands fabricants de smartphones Android. La liste est longue et variée et les fichiers très complets : l’appareil en PNG (avec et sans ombrage) d’une part et le fichier Sketch bien décomposé de l’autre.

facebook-devices-gui

Question de licence ?

Connaissant Facebook on peut s’attendre à tout concernant la licence d’utilisation mais en fait… non. On peut les utiliser pour des projets numériques ou non à condition de ne pas les intégrer dans des logiciels…. Ça tombe bien, le mockup c’est souvent utile AVANT de finaliser le site ou l’application pour illustrer les projets clients ou des articles. Enfin bref.

Pour le coup : merci FB ! Ahem. Notez bien, je ne le dis pas souvent.

Apple TV 2015 Mockup

La nouvelle Apple TV est arrivée et pour illustrer, je préfère nettement les copies d’écran « en situation ». Devant créer des images pour là-bas je me suis attelé de bon matin à créer un « mockup » pour l’Apple TV 2015.

Le mockup c’est ce fichier Photoshop avec un « smart object » qui permet d’intégrer une image dans l’image en deux clics.

Je fournis donc un fichier Photoshop qui, une fois ouvert, fonctionne comme suit…

  1. Double-cliquer sur la vignette du calque « TV Screen (click me) ».

mockup1

  1. Un nouveau fichier avec l’écran bleu s’ouvre.

mockup2

  1. Il suffit d’y glisser l’image de votre choix ou de faire le montage désiré. Puis d’enregistrer et fermer. Afin de faciliter les intégrations, j’ai respecté le format HDTV de 1920×1080 pixels.

mockup3

  1. Vous revenez au fichier « monté » avec votre Apple et l’écran que vous vouliez lui donner.

mockup4

Il ne vous reste plus qu’à exporter cette image ou l’utiliser dans vos montages.

Autre exemple :

mockup5

mockup6

Télécharger le fichier Apple TV 2015 Mockup

Récupérer un site WordPress hacké

Les attaques de sites se multiplient et la rançon du succès planétaire de WordPress expose d’autant plus ses utilisateurs.

Je l’ai déjà dit, commencez par utiliser des thèmes et extensions de qualité et qui sont maintenus dans le temps. Si une extension est trop ancienne, cherchez une alternative rapidement pour limiter les risques.

Ce n’est pas la taille qui compte

Mais venons-en à l’objet de ce billet : le site d’un client d’un ami qui s’est ramassé une attaque en bonne et due forme avec à la clé la perte des données. Et bien entendu pas de sauvegarde car chez OVH, on vous vend de l’espace disque qui ne sert pas à grand chose et des accélérateurs bien inutiles quand les données sont perdues plutôt qu’une vraie solution de sauvegarde.

L’offre de MonArobase est tarifée dans les mêmes eaux mais propose de vrais outils pour sauvegarder et restaurer son site en cas de problème. Voilà pourquoi il faut arrêter de regarder les chiffres et s’attacher au service fourni par son hébergeur.

Retrouver ses données

Si le site n’est pas trop récent il y a de bonnes chances que le cache de Google et que les « snapshots » d’Archive.org soient d’un grand secours.

En effet, dans le cas qui m’intéresse ici, nous avions bien un export du site (fait via WordPress en XML) datant de quelques semaines mais rien d’autre. Et contrairement à ce que vous pensez, cela ne suffit pas. C’est la sauvegarde de la base de données qui compte véritablement !

L’export WordPress contient tous les contenus saisis mais comment récupérer les personnalisations du thème, les « sliders » programmés dans les extensions, etc ?

Après avoir réinstallé un WordPress, rétabli le thème et les extensions et importé les données XML il manque le retour de quelques textes récents, des styles personnalisés et quelques éléments comme les « sliders ».

Récupérer avec style(s)

Un petit tour sur Archive.org et je retrouve un instantané du site quelques jours avant l’attaque. Je lorgne la source HTML de cette « copie » et ne tarde pas à y découvrir plein de choses intéressantes : les ajouts à la feuille de styles (en vrac) et les « sliders » (en code brut).

recuperation-styles

Copier. Collé. Les styles sont de retour dans la personnalisation du thème utilisé.

Surf and sliders

Pour les « sliders » (ici l’extension LayserSlider), l’opération est moins marrante mais tout à fait faisable. On retrouve le code détaillé qui permet d’identifier les diapos, leur contenu et le paramétrage.

sliders

Un peu de nettoyage pour identifier les éléments, un peu de logique et on peut vite retrouver les informations importantes pour les réintégrer.

recuperation-slide

parametrage-slider

Textes à cache-cache

Les derniers textes qui ne sont pas dans la sauvegarde peuvent être retrouvés dans le cache Google si le site a été indexé et que le hack est récent.

Une recherche avec l’opérateur « site: » suivi du nom de domaine liste les pages. Il suffit ensuite d’afficher le cache et recopier les contenus.

Plus compliqué qu’une sauvegarde

Ce billet ne vise pas à détailler toutes les opérations menées (parfois assez techniques) mais à donner quelques idées pour retrouver ses données.

Reste que mettre en place, en amont, une stratégie de sauvegarde, manuelle ou automatique, est bien plus pratique !

Si vous voulez sauvegarder vos données à la main, pensez au minimum à télécharger le contenu de votre FTP et à réaliser un export de la base de données. Seule véritable sauvegarde intégrale. Mais par principe, pensez à aller dans les options du thème et celles extensions majeures pour réaliser un export des données correspondantes.

Si vous souhaitez automatiser les sauvegardes vous pouvez envisager BackWPup ou WordPress Backup to DropBox.

La solution la plus pratique reste une sauvegarde au niveau du serveur telle que celle que propose MonArobase sur ses offres d’hébergement, quel que soit l’outil utilisé (WordPress, Magento, etc).

WordPress, traduction de thèmes et extensions

Malheureusement, ce n’est pas parce que l’on achète ses thèmes et extensions WordPress plutôt que de les voler récupérer sur des sites peu fréquentables que l’on obtient une version francisée du module.

Pour mes besoins personnels et ceux de clients,je me suis donc lancé dans la traduction de quelques thèmes et extensions dont voici la liste et le « changelog ».
Les futures mises à jour seront publiées ici.

Thème Meteor pour WordPress

Commercialisé par Der Design sur ThemeForest, le thème Meteor pour WordPress est élégant et dispose d’un système de mise en page original.

Meteor en français

Les fichiers de traduction « fr_FR.mo » et « fr_FR.po » sont à déposer dans le dossier « wp-content/plugins/meteor/includes/languages ».

Télécharger les fichiers de traduction

Extension WordPress Table Rates pour WooCommerce

Si vous avez une boutique en ligne qui fonctionne à l’aide WooCommerce, l’extension Table Rates for WooCommerce créée par Ryan Fletcher permet de définir des tables de frais de livraison en fonction du montant du panier.

La traduction fait partie intégrante de l’extension disponible sur WordPress.org.

Thème Jupiter pour WordPress

Parmi les thèmes les plus téléchargés et les plus complets en termes de fonctionnalités, le thème Jupiter pour WordPress est remarquable pour son interface de composition des pages et sa grande simplicité.

Jupiter en français

Les fichiers de traduction « fr_FR.mo » et « fr_FR.po » sont à déposer dans le dossier « wp-content/plugins/jupiter/languages ». À thème complet, traduction longue… La traduction est donc incomplète et encore en cours (notamment en ce qui concerne les forums).

Télécharger les fichiers de traduction

Complétez ces traductions

Si vous notez des erreurs ou si vous complétez ces fichiers, n’hésitez pas à m’envoyer vos mises à jour !

Nouveau thème

En relançant le blog via WordPress.com, j’avais choisi le thème « Château » d’Ignacio Ricci. Je l’ai conservé en passant le blog sur mes propres serveurs, mais son manque d’évolution commençait à me peser.

Je comptais repartir sur un « mod » du thème Twenty Eleven jusqu’à ce que je découvre la feuille de style « Hum » mise à disposition par Daryl Koopersmith.

Minimaliste à souhait. Responsive. Rapidement personnalisé via la création d’un « thème enfant« .

A suivre !

Nike, un monde meilleur en HTML 5

nike

Si Google fait la promotion de Google Chrome en cherchant le buzz grâce à une vidéo virale et une surexploitation des possibilités du langage, Nike utilise HTML 5 pour servir son design, accompagner ses propos de façon sobre et extrêmement efficace : bienvenue dans un monde meilleur.

nikebetterworld.com

Un site à démonter méticuleusement

Le travail délivré pour la création graphique, éditoriale et technique de ce mini-site est tel qu’il vaut le coup d’être analysé sous toutes les coutures et démonté dans les moindres détails.

Richard Sheperd s’y est longuement attelé et nous livre une vue complète de la conception de ce site, à lire autant en temps que designer que développeur…

Et en bonus…

Trouvée hier, cette publicité Nike reflète, à l’instar du site cité ci-dessus, les méthodes de communication de la marque où l’on ne cherche pas toujours à mettre en avant le produit et ses caractéristiques mais un état d’esprit, une philosophie et des valeurs.

Cette voix caverneuse et le message qu’elle livre donne des frissons…

Sources : nikebetterworld.com via Richard Sheperd pour Smashing Magazine.

Ok Go…ogle

Découvert au début des années 2000 avec le titre « You’re so damn hot » qui nous servait de « power song » pour motiver le staff chaque matin avant l’ouverture de l’Apple Expo, le groupe OK Go a depuis souvent fait l’actualité pour ses clips musicaux originaux.

Apple et Nike les ont ramenés sur le devant de la scène en 2006 avec la pub Nike + iPod « Tune your run » terminée par le single « Here it goes again« .

C’est ce fameux titre, mis en vidéo autour d’une chorégraphie sur tapis roulants, qui a rendu les 4 membres du groupe populaires, créant un buzz massif en 2007 (50 millions de vues) et remportant au passage un Grammy Award.

Réaction en chaîne, la machine infernale

Depuis, le groupe a continué dans la lignée des clips délirants avec « This too shall pass » et la réaction en chaîne qui accompagne toute la chanson.

Ok Go , tout n’est pas perdu

Si aujourd’hui on reparle du groupe c’est parce que leur dernier clip accompagne une démonstration technologique du HTML5 pour le compte de Google et surtout la promotion du navigateur Google Chrome.

Réalisée conjointement avec la compagnie de danse Pilobolus, la vidéo est un kaléidoscope humain très ludique et complété par les animations en HTML5 proposées au sein du navigateur.

Le buzz autour du clip, présenté comme une « démo HTML5″ via le mini-site allisnotlo.st (lire : All is not lost – tout n’est pas perdu), s’apparente beaucoup plus à un excellent coup de pub pour Google Chrome. Voici le message que vous découvrirez en ouvrant la page avec un autre navigateur :

We’re sorry, but this content was designed with the browser Google Chrome in mind.
As a result, it may not work properly in your current browser. We recommend using Google Chrome.
Please download from here.

Au moins la curiosité poussera le plus grand nombre à donner une chance au navigateur de se retrouver sur leur disque dur… et c’est tout ce qui compte pour Google !

Dans la pratique, l’habillage HTML5 du clip n’apporte aucun intérêt hormis peut-être le message personnalisé affiché à la toute fin…
Enfin, je doute fortement que le long temps de chargement souligné par le message « ce film est très gourmand en ressources processeur, merci de fermer les autres programmes et onglets inutiles » soit une excellente pub pour la technologie qui se veut l’alternative à Flash et ses contraintes techniques !

Facebook : les adresses personnalisées

Voilà, depuis 6H00 ce matin Facebook vous permet d’enregistrer un seul et unique nom d’utilisateur afin d’avoir une adresse plus simple à communiquer à vos amis ou à intégrer sur un CV !

Pour ceux qui ont un patronyme plutôt commun, dépêchez-vous : cela part très vite !

Dernière petite chose : le choix est unique, ferme et définitif… D’ailleurs, certains se sont apparemment amusés à usurper des noms connus !

Pour ma part, j’ai fait simple : comme pour mes comptes Twitter et Flickr.