Le résultat est un site contenu dans une seule page HTML, séparée en sections. La navigation entre les sections peut se faire via un menu fixe, des boutons ou la barre de scrolling. Les transitions sont fluides et diverses animations donnent un effet de perspectives aux illustrations.

Visitez les « Rendez-vous Services » par Citroën

Les résultats parlent d’eux-mêmes mettant en valeur la galaxie homogène de Romandie Network. Le site web a été créé sous WordPress, bien que ça ne se voit pas, et nous a permis d’inclure les produits de la régie dans un format « blog », permettant au client de gérer son portfolio d’offres très facilement.

Adobe arrive avec son nouveau Photoshop CS6 avec 62% de nouvelles fonctions par rapport à la CS5.5, une nouvelle interface et un nouveau moteur graphique: le Mercury Engine.

Adobe précise que près de 65 améliorations proviennent directement des feedbacks utilisateurs laissés sur le Forum Photoshop Feedback.

Voici un bref récapitulatif de ce qui vous attend dans cette nouvelle version.

Aperçu des nouvelles fonctionnalités

——————————————————————————————————–

- Les contours sur les formes: on retrouve les mêmes options que sur illustrator,  par exemple, le réglage de la taille des espacements pour les contours pointillés, quel bonheur !

- Les styles de caractères et paragraphes: qui n’a jamais rêvé dans ses maquettes photoshop de changer en un clic le style de tous les titres de ses pages, ou encore le style de tous les paragraphes… Cette option de CS6 nous fait déjà saliver.

- Les outils brushes: un contrôle plus précis de la position, des angles et de la pression des brushes, la possibilité de créer ses sets de brushes avec des paramètres bien définis. Les brushes ne sont plus statiques, désormais leur caractère dynamique permet d’incliner, de jouer avec les angles, la profondeur des brushes en temps réel.

- Amélioration du rendu de l’outil Patch qui permet de supprimer un élément d’une image ou de dupliquer une zone avec meilleur rendu. Souvenez-vous parfois l’outil patch ne marche pas très bien et génère du flou ou des incohérences graphiques sur les bords de la zone sélectionnée. Désormais l’option « content-aware » fixe la zone que vous souhaitez répéter pour un meilleur lissage.

- Plage des couleurs: détection automatique des couleurs de peau, ajouter à cela la détection des visages sur les photos.

- La correction des angles de vue pour les photos prises avec un grand angle ou un fisheye.

- Les flous: ajout de 3 nouveaux types de flou. Le plus intéressant est la sélection de plusieurs zones sur la même image avec différentes intensités de flou.

- Oil paint: un filtre permettant de reproduire les peintures à l’huile respectant les petits détails sur les images.

- Camera Raw: réorganisation des menus et amélioration du traitement de l’image avec le changement de la balance des blancs ainsi que la réduction du bruit.

- Video: nouvelles fonctionnalités, montage, découpage de séquences… des fonctionnalités de base bien pratiques pour les amateurs de petits montages video.

- Gestion de la 3D: meilleur gestion et meilleure performance de rendu des objets 3D.

- L’outil de recadrage a été amélioré avec des préreglages, des changements de rotation de l’image…

- Les styles sur les groupes de calques: on peut désormais appliquer les styles sur un groupe et superposer sur la même image plusieurs styles de calques.

Et d’autres fonctionnalités comme l’add-on des palettes Kuler directement intégré dans photoshop…

Ce qu’on aime
——————————————————————————————————–

- La nouvelle interface sombre.

- Les styles de caractère et paragraphe, l’option indispensable qui manquait à photoshop.

- Une très bonne gestion des flous.

- L’application de style de calque sur un groupe.

- L’insertion en direct du lorem ipsum.

- La sauvegarde automatique de son travail.

- L’outil de recherche de calques (bien pratique, à condition d’avoir bien nommé ses calques)

——————————————————————————————————–

Ce que l’on aime moins
——————————————————————————————————–

- Le fait que ce nouveau photoshop propose un nouvel outil de retouche video au dépit de nouvelles fonctionnalités au service du webdesign.

- Le filtre Oil paint, un autre filtre parmi tant d’autres.

——————————————————————————————————–

Télécharger Adobe photoshop CS6 beta gratuitement : http://labs.adobe.com/technologies/photoshopcs6/

N’hésitez pas à nous soumettre vos commentaires et vos attentes pour cette nouvelle version.

Designer: Atipus

License: Free

Type: Display face

Format: TTF Mac/PC font

Télécharger la police Blanch: http://www.atipus.com/tipoblanch.zip

Créer une application Facebook

La première étape consiste à créer une application Facebook. Allez sur l’espace développeurs de Facebook (https://developers.facebook.com) et cliquez sur le menu Apps en haut :

Dans la page de gestion de vos applications, cliquez sur le bouton Create New App :

Renseignez les champs App Name et App Namespace puis cliquez sur le bouton Continue :

Remplissez le captcha avant de cliquer sur le bouton Submit :

Cliquez sur la section Website en bas de la page des paramètres basiques de l’application et saississez l’url de votre site :

Sauvegardez les changements. Ça y est, vous avez créé votre application Facebook !!!

Autoriser votre application à publier

Pour publier des actions sur le mur des utilisateurs Facebook, il faut que ceux ci autorisent votre application à le faire. Le moyen le plus simple est d’intégrer le bouton de login Facebook dans une page HTML et de préciser la permission publish_actions.

Voici l’exemple de la page index.html à déposer à la racine de l’application sur le serveur :

<html xmlns= »http://www.w3.org/1999/xhtml » dir= »ltr » lang= »en-US » xmlns:fb= »https://www.facebook.com/2008/fbml »>
<head>
<title>Drive those cars</title>
</head>
<body>
<div id= »fb-root »></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘[YOUR_APP_ID]‘,
status : true, cookie : true, xfbml : true
});
};

(function(d){
var js, id = ‘facebook-jssdk’; if (d.getElementById(id)) {return;}
js = d.createElement(‘script’); js.id = id; js.async = true;
js.src = « //connect.facebook.net/en_US/all.js »;
d.getElementsByTagName(‘head’)[0].appendChild(js);
}(document));
</script>

<h1>Drive those cars</h1>

<fb:login-button show-faces= »true » scope= »publish_actions »></fb:login-button>

</body>
</html>

Remplacez simplement [YOUR_APP_ID] par l’identifiant de votre application :

Rendez-vous sur la page web et cliquez sur le bouton Log In. Dans la fenêtre qui s’ouvre, connectez-vous en cliquant sur le bouton Log In with Facebook :

Le plugin Facebook de la page principale se rafraîchit et indique le message suivant :

Définition du schéma Open Graph

Il est temps de passer à la définition du schéma Open Graph. Celui-ci va nous permettre de définir une action et un objet lié. Pour cet exemple, nous allons définir l’action de conduire un objet voiture.

Dans les propriétés de l’application, cliquez sur le menu Open Graph :

Vous serez dirigé automatiquement vers la section Getting Started. Saisissez l’action drive et l’objet car dans la page puis cliquez sur le bouton Get Started pour commencer la configuration:

La première étape de définition du schéma consiste à définir l’action. Vous pouvez laisser les paramètres par défaut et cliquer sur le bouton Save Changes and Next pour accéder à la seconde étape qui est la définition de l’objet.

Vous pouvez définir des propriétés personnalisée pour votre objet. Pour notre exemple, nous allons ajouter la propriété Horsepower à la définition de l’objet car.

Cliquez sur le bouton Add Another Property:

Définissez la propriété comme de la manière suivante:

L’aperçu vous permet de vous rendre compte de l’affichage de l’objet dans le flux de l’utilisateur:

Cliquez ensuite sur le bouton Save Changes and Next en bas de page pour passer à l’étape suivante.

La dernière étape de la configuration vous permet de définir la manière dont les données de votre application seront rassemblées dans la timeline des utilisateurs. Pour le moment, nous choisissons Drive pour le champ Data to Display et Gallery pour le champ Layout Style. Nous gardons les valeur par défaut pour les autres propriétés:

Cliquez sur le bouton Save and Finish pour valider votre schéma. Vous êtes alors rediriger vers la page de gestion des schémas Open Graph de votre application. Vous remarquerez qu’à coté de l’action Drive, apparaît un lien Submit :

Il permet d’envoyer votre action pour approbation aux équipes de Facebook afin de vérifier qu’il s’agit d’une action « politiquement correcte ». Vous êtes obligé d’en passer par là si vous souhaitez que votre application puisse être rendue publique.

Publier des actions dans la timeline

Pour publier les actions dans la timeline de l’utilisateur, la première étape est de créer une page produit. En voici un exemple:

<html xmlns= »http://www.w3.org/1999/xhtml » dir= »ltr » lang= »en-US » xmlns:fb= »https://www.facebook.com/2008/fbml »>
<head prefix= »og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# [YOUR_APP_NAMESPACE]: http://ogp.me/ns/fb/[YOUR_APP_NAMESPACE]# »>
<meta property= »fb:app_id » content= »[YOUR_APP_ID] » />
<meta property= »og:type » content= »[YOUR_APP_NAMESPACE]:car » />
<meta property= »og:url » content= »Put Your Own URL Here » />
<meta property= »og:title » content= »Sample Car » />
<meta property= »og:description » content= »Some Arbitrary String » />
<meta property= »og:image » content= »https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png » />
<meta property= »[YOUR_APP_NAMESPACE]:horsepower » content= »125″ />

<title>Drive those cars</title>
<script type= »text/javascript »>
function iDriveIt()
{
FB.api(
‘/me/[YOUR_APP_NAMESPACE]:drive?car=http://fb.hugon.ws/drive-cars/ds3racing.html’,
‘post’,
function(response) {
if (!response || response.error) {
alert(‘Error occured’);
} else {
alert(‘Drive was successfully published with ID : ‘ + response.id);
}
});
}
</script>
</head>
<body>
<div id= »fb-root »></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘[YOUR_APP_ID]‘,
status : true, cookie : true, xfbml : true
});
};

(function(d){
var js, id = ‘facebook-jssdk’; if (d.getElementById(id)) {return;}
js = d.createElement(‘script’); js.id = id; js.async = true;
js.src = « //connect.facebook.net/en_US/all.js »;
d.getElementsByTagName(‘head’)[0].appendChild(js);
}(document));
</script>

<h1>Drive those cars</h1>
<h2>DS3 Racing</h2>
<p>
<img title= »DS3 Racing » src= »http://fb.hugon.ws/drive-cars/img/ds3racing.jpg » width= »320″/>
</p>

<form>
<input type= »button » value= »I drive it » onclick= »iDriveIt() » />
</form>
</body>
</html>

Remplacez simplement [YOUR_APP_ID] par l’identifiant de votre application et [YOUR_APP_NAMESPACE] par l’espace de nom de votre application.

La balise Head de cette page contient la définition des espaces de noms et des propriétés Open Graph. Vous pouvez en obtenir facilement la base en cliquant sur le lien Get Code à coté de l’objet Car:

C’est la fonction javascript iDriveIt qui permet de poster sur le mur de l’utilisateur l’action. Cela consiste à utiliser l’API Facebook, après l’espace de nom de l’application apparaît l’action (drive) puis en valeur du paramètre pour l’objet (car),  on associe l’URL qui contient le schéma avec les valeurs de l’objet. Cette URL peut être différente de la page qui réalise la publication de l’action:

/me/ns-drive-cars:drive?car=http://fb.hugon.ws/drive-cars/ds3racing.html

L’application est désormais prête à être utilisée !

Détails de l’affichage des actions

Rendez-vous sur la page de votre site et cliquez sur le bouton I drive it :

Si tout c’est bien déroulé, vous devriez voir le message de confirmation javascript :

Et sur votre timeline devrait apparaître une nouvelle activité :

Si vous faîtes plusieurs actions, elles vont être mises en forme suivant les paramètres définis :

Personnaliser l’affichage d’un objet dans la timeline

Vous remarquerez que l’information sur la propriété Horsepower n’apparaît pas sur la timeline Facebook. Pour faire apparaître cette information, il faut modifier les paramètre d’aggrégation de l’action. Dans l’aggrégation Drive, modifier la propriété Caption Lines avec la valeur Horsepower : {car.horsepower} :

Facebook remplace les informations entre crochets par la valeur de l’objet lors de l’affichage. Vous remarquerez lors de la saisie de ce champ que Facebook propose une liste de champ possible à insérer :

En rafraîchissant votre timeline, vous pourrez voir que l’affichage tiens désormais compte de la propriété Horsepower :

Conclusion

Vous avez désormais une bonne base pour débuter la publication de contenu sur la timeline des utilisateurs à partir de votre site. Pour aller plus loin, la fonctionnalité de traduction de l’application intégrée dans Facebook pourra vous aider à internationnaliser votre application.

Designer: Apostrophic Labs

License: Free

Type: Sans Serif

Format: TTF Mac/PC font

Télécharger la police Lane: http://www.fontsquirrel.com/fonts/Lane

www.fruute.com

Designer: Tyler Finck

License: Freeware

Type: Sans Serif

Format: TTF Mac/PC font

Télécharger la police Ostrich: http://www.theleagueofmoveabletype.com/ostrich-sans

Eh bien la firme de Mountain View a pris le problème à l’envers. Au lieu de s’attaquer à Facebook directement sur son terrain  de prédilection, les médias sociaux, ils l’ont fait d’une manière détournée en intégrant Google+ à son moteur de recherche, le cœur du business de Google. Cette fonctionnalité appelée Search Plus Your World intègre ainsi directement les contenus de Google+ dans son moteur de recherche. Présentation:

• Résultats personnalisées

Fait remonter en priorité les contenus publiés par vos cercles. Les contenus issus de vos cercles sont dissociés par une petite icône

• Profils dans la recherche

Affichage du nom et du profil des internautes faisant partie de vos amis directement dans Suggest, le module d’autocomplétion du moteur de recherche.

• Personnes et Pages Google+

Pour certaines requêtes génériques (musique, football etc.), le moteur propose, sur la droite de l’écran, des profils Google+ de personnes ayant un rapport direct avec cette thématique.

Search Plus Your World n’est pour l’heure disponible qu’aux Etats-Unis mais devrait prochainement arrivée dans nos contrées. Sachez que la désactivation de Search Plus Your World n’est prise en compte que lors de la session de recherche. Toute nouvelle session entraînera une réactivation automatique de la fonction!

Le forcing de Google

Alors, quel impact cela va-t-il avoir sur votre Business? C’est en fait tout votre SEO qui doit être repensé. Vous ne souhaitiez pas vous mettre à Google+? C’est désormais une obligation si vous ne voulez pas voir vos concurrents vous passer devant dans les résultats de recherche dit sociaux. En plus des résultats naturels, les résultats sociaux sont un nouveau terrain de chasse à conquérir.

Plus qu’un réseau social, Google+ se positionne maintenant comme levier d’acquisition de trafic qui se substituera à vos résultats naturels déclassés. L’impact sur les taux de clic devrait être positif, compte-tenu de la surface en pixels plus importante du résultat. Avec cette intégration, Google+ est résolument en train de s’imposer (aux forceps) comme une plateforme sociale de référence, au même titre que Facebook ou Twitter.

Des changements encore à venir

Et Google n’a pas fini d’imposer son réseau social. Les pages entreprises, très en retard pour l’heure sur Facebook devraient bientôt offrir un service digne de Google. Google+ n’affecte pour l’instant que le moteur de recherche mais devrait bientôt se déployer sur Analytics et sûrement procéder à de nombreux changements sur Adwords.

Dans le même esprit, Google a annoncé le 24 janvier dernier une refonte des conditions d’utilisation de ses services dans un objectif de simplification et de lisibilité, selon les termes du géant américain. Concrètement, à partir du 1er mars, Google va regrouper les informations d’un utilisateur, qui auparavant provenaient des différents outils Google.

En d’autres termes, l’ouverture d’un compte de messagerie électronique Gmail impliquera par exemple la création de facto d’un profil Google+. Google disposera ainsi d’une mine d’informations nettement plus précises et désormais recoupées.

Un changement de conditions d’utilisation qui est loin d’être anodin lorsqu’il est remis dans le contexte de l’accélération du développement de Google+ et de son imbrication étroite avec le moteur de recherche.

«Comprenez Google+ ou partez»

Critiqué par la blogosphère qui juge que Google impose Google+ au détriment des autres réseaux sociaux (Facebook, Twitter etc.), Google n’est pourtant pas près de revoir sa stratégie si l’on en croit  Larry Page, PDG et fondateur de Google. Ce dernier dit lors d’un meeting avec ses ingénieurs «comprenez Google+ ou partez», une phrase qui en dit long sur la volonté de Google de faire de sa nouvelle plateforme social un succès.

Le danger pour Google pourrait se situer là; que les internautes ne comprennent plus Google et qu’il le quitte. En favorisant ses produits, Google s’éloigne de ses fondamentaux et de ce qui a fait son succès. Ce succès, Google l’a bâti sur sa capacité à toujours se préoccuper de livrer l’information la plus adéquate à la demande formulée par l’internaute. Autrement dit, le moteur ne doit en aucun cas favoriser tel ou tel contenu selon des critères subjectifs, mais au contraire selon des paramètres sophistiqués. Ce n’est plus vraiment le cas avec Google+.

Le slogan de Google don’t be evil (ne soyez pas malveillants) n’a jamais aussi mal porté son nom.

Alors, seriez-vous prêt à quitter Google pour un moteur de recherche indépendant?

Designer: Rene Bieder

License: Freeware

Type: New gothic Sans Serif

Format: OTF Mac/PC font

Télécharger la police RBN02: http://fontfabric.com/downloadfont/RBNo2.zip