Aller au menu - Aller au contenu

Voici le blog de : nicofrand

Breizhogeek

Blog de nicofrand (Frandeboeuf Nicolas) sur les aspects, interfaces et technologies web, apparentés ou non au web sémantique ; le logiciel libre et mes contributions à ceux-ci ; le graphisme et la typographie ou encore sur des projets personnels.

Adobe sort son service cloud : la Creative Suite à 50€ par mois

On a toujours regretté les prix exorbitants de la suite Adobe comme Photoshop, Illustrator et compagnie. Mais c’est bientôt fini : Adobe vient de présenter son futur service, répondant au nom de “Adobe Creative Cloud”, promettant un prix de 49,99$ par mois, et ce pour 2 machines.

adobe creative cloud

Disponible à partir de la prochaine version (à savoir la 6) de la Creative Suite, vous pourrez en effet exécuter en local, le “Cloud” se limite ici à quelques petites applications et services (notamment pour les tablettes), les applications bien-connues et aimées telles Photoshop, Illustrator, After Effects ou Premiere Pro pour la modique somme d’environ 50€ par mois (selon les taxes européennes), dont les licences seront valables pour 2 machines. Le mieux dans tout ça c’est que ces logiciels seront constamment mis à jour sans surplus financier et vous permettront donc de bénéficier des dernières mises à jour, sans payer plus cher mais aussi de façon immédiate, sans attendre la version ultérieure de la creative suite.

Pour la comparaison des prix, je ne la ferai pas ici, un article assez détaillé en ayant déjà été fait par Mattrunks.

Alors, heureux ?

webP : transparence et compression sans perte

Il y a quelques temps je vous présentais le webP, un nouveau format d’image qui permettrait une meilleure compression des images, avec perte, que le jpeg. Depuis de nouvelles possibilités se sont greffées sur ce format, et il est donc temps de faire une petite mise au point.

webP: transparence avec perte

Parmi ces nouvelles possibilités nous avons donc :

  • la gestion des metadata XMP
  • la gestion des profils ICC
  • l’animation
  • la compression sans perte
  • la transparence

La compression sans perte

Il est désormais possible d’appliquer une compression sans perte, dite lossless à l’instar du PNG. Ce nouveau mode de compression permet d’optimiser tout de même les images puisqu’il permet une réduction de 45% du poids du fichier si on se base sur un fichier PNG basique et de 25% sur la base d’un PNG optimisé via pngcrush ou pngOptimizer, comme vu sur mon article : Images pour le web: compression et optimisation.

La transparence

Cela fait un moment que certains sont à la recherche d’un format d’image qui permette à la fois la transparence et un poids de fichier relativement mineur, ainsi qu’une qualité acceptable bien sûr (donc on oublie le GIF). C’est désormais possible avec le webP puisque celui-ci permet d’encoder une image avec canal alpha ! Là encore, si vous jugez la perte de qualité trop importante, vous pourrez toujours vous rabattre sur la compression lossless du webP. La compression avec transparence sera légèrement plus gourmande puisque le canal alpha correspondra à une hausse de 22% du poids du fichier comparé à une image compressée avec perte de qualité “90”.

Des comparaisons sont disponibles en image à l’adresse suivante : http://code.google.com/intl/fr/spee….

Et maintenant ?

Ces mises à jour sont importantes, car sous le format que je vous avais présenté, Mozilla refusait d’utiliser ce nouveau format (pour en savoir plus : http://muizelaar.blogspot.com/2011/…), lui reprochant de ne pas être si performant (depuis, de nouveaux tests ont été effectués par Google, rassurant Mozilla), de manquer de certaines choses existant déjà avec le JPEG: métadonnées XMP, profil ICC, mais également de ne rien apporter de nouveau comme par exemple le canal alpha. Les ingénieurs de Google ont donc répondu à ces attentes, on ne peut donc qu’espérer que Mozilla (mais aussi Safari et IE) acceptent enfin ce nouveau format et qu’on puisse enfin avancer (il existe cependant un polyfill pour Firefox)! Google n’a pas perdu espoir et a intégré le support du webP dans ses propres applications Picasa et Gmail.

De son côté, Opera (dans sa version 11.10) supporte le webP et fait même mieux : Opera Turbo s’en sert carrément pour améliorer la rapidité de téléchargement pour les petites connexions ! En attendant,

Source: http://blog.chromium.org/2011/11/lossless-and-transparency-encoding-in.html

Firefox 11 implémentera le protocole SPDY

Firefox 11 implémentera le protocole SPDY, mais pas par défaut.

spdy-firefox-11

Cette fois, c’est validé: SPDY sera disponible avec Firefox dans sa version 11 si on en croit le “RESOLVED FIXED” du bug 528288 sur le bugzilla de Mozilla. Cependant par défaut, il faudra suivre cette manip’:

  1. Saisir “about:config” dans la barre d’adresse
  2. Chercher “network.http.spdy.enabled”
  3. Mettre cette valeur à “true”

Et voilà ! En attendant, certains demandent déjà à ce que l’activation du protocole soit faite par défaut : https://bugzilla.mozilla.org/show_bug.cgi?id=698229

Par contre, toujours pas d’infos en ce qui concerne Opera et IE…

Un pangramme augmenté rigolo

Vous en avez marre de toujours utiliser les mêmes pangrammes (mais si, vous savez, ces courtes phrases reprenant chaque caractère de l’alphabet dont on se sert pour essayer les polices) ? Biz-Yod nous en a dégoté une, et augmentée s’il vous plaît !

pangramme quick brown fox

Les gars de chez Biz-Yod nous ont trouvé un pangramme augmenté, c’est à dire qu’il reprend bien sûr les caractères de base mais il y ajoute les caractères de ponctuation courants ainsi que les accents français et même des ligatures !

Saluez riches heureux ces pauvres en haillons, qui bossent pour vos yacht et vos stock-options, la fourrure de votre compagne, les « études » de vos lardons. Jamais pour vous ils ne céderont, ni la joie de leurs filles, ni l’envie de leurs garçons. Non ! Le souffle de leurs poumons est leur passe-droit : c’est grâce à lui qu’ils tiennent ici bas. Qu’il gonfle encore un peu, et une grève efficace sera votre fin.

À quand le waterloo du patronat ?

Merci à eux donc !

Yahoo : la fin du groupe ?

Tout le monde parle actuellement de la mort de Steve Jobs. C’est pas que je dénigre le personnage, il a fait sa part de bonnes choses (et de mauvaises amha), mais l’information est ressassée, son passé déformé, les propos des anti-apple exagérés ; bref ça ne m’intéresse pas d’en parler plus que ça, et je suis sûr que vous serez content de ne pas voir dans votre agrégateur un énième Steve Jobs est mort.

Par contre, certains imaginent déjà de grosses difficultés pour Apple. À mon avis, on a encore du temps devant nous. L’autre jour chez le coiffeur, j’ai entendu quelqu’un dire également que le 5 novembre, Facebook coulerait (suite à l’attaque prévue par Anonymous). C’est assez étonnant d’imaginer de si importantes sociétés sombrer aussi rapidement après un essor aussi magnifique. Et c’est d’ailleurs dans ce sujet que je vais vous parler d’une mort potentielle (mais pas si improbable) du groupe Yahoo! tel qu’on le connait.

yahoo

Les faits

  1. 11 février 2008 : Yahoo! refuse la proposition de rachat de Microsoft d’une hauteur de 44.6 milliards de dollars
  2. 6 septembre 2011 : Carol Bartz, PDG de Yahoo! est licenciée (vous en faites pas pour elle, elle gagnait bien sa vie
  3. 7 septembre 2011 : un employé déclare au Wall Street Journal que la compagnie est ouverte à toute offre de rachat intéressante [1]
  4. 4 octobre 2011 : Silver Lake, Alibaba Group Holding Ltd et Digital Sky Technologies discutent d’un potentiel rachat groupé de la société Yahoo!
  5. 7 octobre 2011 : une rumeur circule sur, à nouveau, l’intérêt de Microsoft pour la société Yahoo!

En effet, le groupe Chinois Alibaba (pourtant possédé par Yahoo! à hauteur de 40%, gérant Yahoo! China et alibaba.com, un des plus gros sites e-commerce chinois), le groupe russe Digital Sky Techonologies (DST) et l’américain Silver lake auraient contacté le groupe pour discuter d’un rachat. La discussion étant privée, aucune info ne fuit, et aucune somme n’est évoquée.
La valeur du groupe Yahoo! serait actuellement de entre 17 et 20 milliards de dollars (selon les sources et les jours, je vous laisse calculer vous-même selon la valeur de l’action si vous souhaitez plus de précisions). Cependant, malgré une baisse hier de l’action Yahoo!, la semaine a été plutôt correcte et l’action a remonté quelque peu. Elle est désormais à 15,47$ (je rappelle qu’en 2008 Microsoft proposait un rachat pour 33$ l’action !). Bref, le groupe compte à mon avis ses derniers jours ! Certains disent que finalement, Yahoo! ce n’est plus grand chose, sa place en tant que SE n’étant plus ce qu’elle était. C’est donc l’occasion de se rappeler quelques produits phares du groupe (sans compter yahoo! news, video, music, messenger, etc…).

Flickr

flickr-partage-photos
Bon, je ne présente pas le service, j’imagine que tout le monde le connaît. Ça reste quand même un des acteurs majeurs du service de partage de photos sur le web, permettant notamment des recherches assez précises en termes de chromatique, de droits (creative commons par exemple), de thématiques.

Kelkoo

kelkoo-comparateur-prix
Bon ok, ça ne fait plus partie de Yahoo! (ça appartient à Jamplant depuis novembre 2008) mais ça a quand même été un gros produit de Yahoo! ! Ce comparateur de prix européen acheté en mars 2004 pour la modique somme de 475 millions de dollars avait été rachetée pour une somme inférieure à 100 millions (source : http://archive.wikiwix.com/cache/?url=http://www.kelblog.com/2008/11/kelkoo-quitte-yahoo.html&title=Kelblog%3A%20Kelkoo%20quitte%20Yahoo!. La transaction laissait déjà présager une mauvaise gestion, mais on ne peut dénigrer l’importance du comparateur parmi les produits yahoo! !

Delicious

delicious-partage-bookmarks
Acheté en 2005 par Yahoo!, le service de partage de bookmarks (comme quoi facebook et google+ n’avaient réellement rien inventé avec leur “J’aime” et leurs “+1”) a depuis été racheté en avril 2011 par 2 fondateurs de Youtube via la société AVOS (source: http://www.avos.com/delicious-press-release/). Je n’ai pas les chiffres concernant ces rachats.

QA

yahoo-QA
Ce service appartient par contre toujours à Yahoo! et reste encore largement utilisé. Ce service de questions/réponses avec réponses humaines et système de mise en avant de la meilleure réponse est largement utilisé par des néophytes, permettant rapidité et simplicité.

Et toi ?

Est-ce que toi-même tu utilises des services de Yahoo! ? Si un rachat devait arriver, cela t’importunerait-il ?

Sources :

Notes

[1] An insider speaking to the Wall Street Journal put it more bluntly, however, saying the internet business is “open to selling itself to the right bidder” – signalling the end to a 17 year history that parallels the emergence of the internet.

SPDY et Firefox

Souvenez-vous, je vous parlais il y a peu de utilisé pour les connexions à Gmail, Gdocs et autres) , j’ai récemment appris que Patrick McManus travaillait à implémenter SPDY dans Firefox. Il explique d’ailleurs que SPDY est réellement bénéfique pour le web, et pas uniquement du fait du chargement plus rapide des pages. J’ai déjà évoqué les améliorations qu’apporte ce protocole, je vous laisserai donc voir de vous même ce qu’il en dit (lien en bas de page).

La question désormais est: Qu’en est-il de Safari, Opera et IE ?. Pour IE, il semblerait que le navigateur supporte l’installation de nouveaux protocoles, mais j’ignore comment se fait cette installation. Si c’est par le système de mise à jour de Windows, c’est pas forcément gagné.
Quelqu’un a des nouvelles en ce qui concerne Safari et Opera ?

Source : http://bitsup.blogspot.com/2011/09/spdy-what-i-like-about-you.html via http://twitter.com/#!/paulrouget/status/117135736393842688

HTTP est mort, vive HTTP !

Derrière ce titre un peu facile se cache en fait un possible futur du web, voire d’internet. En effet, HTTP date de 1990 (1997 pour la version 1.1) et est utilisé par tous, à grande ampleur. Cependant, d’autres protocoles voient le jour, promettant rapidité, nouvelles fonctionnalités, et stabilité. C’est le cas par exemple de SPDY, que je présente ici sommairement.

HTTP

Tout d’abord, je dois avouer que le titre, choisi car il est quelque peu racoleur, est en réalité faux. SPDY(prononcez SPeeDY) est en fait plus une extension de HTTP qu’un remplaçant de ce dernier puisqu’il utilise toujours HTTP pour certaines tâches et se situe même entre HTTP et SSL au niveau des couches :

SPDY entre HTTP et SSL

Qu’est-ce que SPDY ?

SPDY est un protocole développé par Google, basé également sur TCP pour la couche transport (ne nécessite donc pas de nouvelle infrastructure réseau) et qui ne requiert aucun changement sur les sites mais uniquement sur les clients web (navigateurs) et les applications de serveur. SPDY a pour but d’améliorer tous ces points :

  • réduire de 50% le temps de chargement d’une page (oui, rien que ça)
  • pouvoir exécuter plusieurs requêtes HTTP concurrentes sur une même session TCP. Aujourd’hui on utilise des pipelines et les navigateurs créent désormais jusqu’à 6 connexions afin de contourner ce problème, mais cela reste une solution limitée.
  • compresser les entêtes HTTP et enlever celles qui sont inutiles ou redondantes (notamment les entêtes User-Agent, Host et Accept* qui sont statiques et ne nécessitent pas d’être renvoyées à chaque requête.
  • réduire la complexité d’implémentantion de HTTP en définissant des messages plus faciles à parser
  • permettre au serveur d’envoyer des données au client lorsque c’est possible, sans que le client ait besoin de le demander. Il y a pour ça de entêtes disponibles ; X-Associated-Content et X-Subresources. Le premier envoie la ressource directement tandis que le second informe le client qu’il aura probablement besoin de la ressource suivante (ex: lors du premier chargement d’un site, plusieurs ressources seront nécessaires).
  • rendre obligatoire la compression des données (exemple: la compression gzip n’est pas appliquée partout et n’est même parfois pas disponible chez certains hébergeurs)
  • permettre une priorisation des requêtes : dans le cas où certaines se retrouvent bloquées (bande passante restreinte, etc.), il peut être intéressant pour le client de donner une priorité à certaines des requêtes
  • moins de perte de paquets



En pratique, cela donne quoi ?

Google affirme, après avoir téléchargé (avec une connexion basique) 10 fois 25 sites du TOP 100 et calculé le temps moyen pour chacun avoir ressenti une accélération de entre 27 et 60% pour ce qui est du temps de chargement d’une page et sans SSL et 39 à 55% avec SSL. Pour les plus curieux, un tableau détaillé est disponible sur le livre blanc du projet.

D’autres ont essayé

En effet, d’autres protocoles existent déjà tels que :

  • SCTP, un remplaçant de TCP assurant fiabilité et priorisation
  • SST, un protocole similaire à TCP asurant une certaine légéreté
  • MUX and SMUX, proposant aussi plusieurs flux sur une même connexion.

Cependant ces protocoles ne répondent pas à tous les besoins (priorisation, compression, plusieurs flux par connexion, etc.).

Et maintenant ?

Actuellement, le seul client gérant SPDY est une version modifiée de Chrome, disponible (il vous faudra cependant la compiler) ici : http://src.chromium.org/viewvc/chro…. Pour tester il vous faudra installer le module mod_spdy pour Apache ou attendre que Google propose en open-source leur logiciel serveur (ce qui ne saurait tarder).

En savoir plus

Briefingroom: testez vous avec des appels d'offre blancs

Briefingroom est un site web vous permettant de mettre à l’épreuve vos compétences, prix et arguments en participant à des appels d’offres fictifs.

Briefingroom

Se lancer sur le marché du travail en tant que graphiste n’est pas forcément évident : il faut à la fois estimer correctement le travail à effectuer, le prix de la prestation mais également affûter ses arguments pour vendre son travail. C’est afin d’aider les nouveaux à progresser au travers de ces contraintes que le site briefingroom propose des briefs (appels d’offre) pros pour vous faire les dents dessus.

Comment ça fonctionne ?

Régulièrement, des appels d’offres fictifs, rédigés par des professionnels, sont déposés sur le site. Vous pouvez dès alors choisir d’y répondre et ainsi analyser la demande, établir un devis et proposer une maquette graphique. Votre réponse sera ensuite évaluée par un jury de professionnels toujours, dont la liste est disponible ici : membres du jury de briefingroom.

Et ensuite ?

Une fois l’appel d’offre arrivé à termes et le gagnant sélectionné, aucun accord commercial n’est effectué puisque les réponses ne sont pas là pour être exploitées. Les participants restent bien sûr les uniques propriétaires de leurs créations.

Sinon, briefingroom fait partie de http://metiers-graphiques.fr/, qui recense aussi un livre pour les graphistes indépendants et un kit de survie du créatif.

Lorempixum, le lorem ipsum graphique

Tout le monde connait le Lorem ipsum, un faux-texte sans aucune valeur sémantique qui permet de combler des zones de texte sur des maquettes notamment afin d’avoir une idée du rendu final, avec un texte simulant un texte normal puisqu’il utilise des mots de longueur variable. Eh bien je vous présente aujourd’hui son cousin, Lorempixum. Lorempixum permet également de combler des zones mais cette fois-ci non pas de texte, mais d’image.

exemple lorempixum

Le fonctionnement de Lorempixum

Le site vous permet de choisir de façon très simple le format que vous souhaitez : soit vous utilisez les sliders sur [lorempixum.com |http://lorempixum.com/|en|Lorempixum], pratique mais qui ne permet pas aisément de changer d’image, soit vous effectuez directement une requête plus pointue comme ceci, de 465px sur 100px de haut :

http://lorempixum.com/465/100/

Ce qui donnera une nouvelle image à chaque nouveau chargement :

Attention, si vous souhaitez enregistrer l’image, il existe un bug avec Google Chrome : au lieu de vous donner l’image en cache, il effectue une nouvelle requête, ce qui a pour effet de vous délivrer une image différente de celle que vous avez en visu !

Lorempixum vous permet également d’être plus précis, en ne demandant que des images en niveaux de gris ou qui appartiennent à un thème spécifique (on s’éloigne donc ici du lorem ipsum sans aucune valeur sémantique).

http://lorempixum.com/g/465/100/

vous donnera une image de 465 pixels sur 100, en niveaux de gris

http://lorempixum.com/400/200/sports

correspond à une image de 400x200 pixels, apparentée au sport

http://lorempixum.com/400/200/abstract/Exemple/

renverra une image avec un texte (ici Exemple) inscrit sur le côté d’une image abstraite

http://lorempixum.com/400/200/sports/1

vous permet de sélectionner la 1ere image du thème (ce n’est donc plus aléatoire)

Les droits d’utilisation

Toutes les images sont sous la licence creative commons BY-SA et les auteurs peuvent être contactés/retrouvés à partir de l’onglet images CC en haut à droite.

D’ailleurs, l’image abstraite utilisée dans le chapô de cet article est l’œuvre de Steve Snodgrass !

Feed2img 1.0 : une signature pour votre blog

Ça va maintenant faire 2 ans et demi que j’ai créé la première version de feed2img, version que je pensais rapidement modifier pour la rendre configurable. Il m’aura fallu plus de 2 ans, mais voilà enfin cette nouvelle version : la 1.0. Pour rappel, feed2img permet de créer des images de signature pour emails ou forums, en récupérant les titres de vos derniers billets, comme ici :

feed2img_output.png

Quelles sont les nouveautés ?

Cette version 1.0 tient désormais compte correctement des titres accentués, en utilisant non plus imagestring() de la bibliothèque GD de PHP mais imagettftext(). Cette modification entrainait le choix d’une police par défaut pour l’écriture sur l’image, et souhaitant toujours proposer cette extension sous licence GPL, il m’a fallu trouver une police sous licence adéquate. J’ai donc opté pour la police Arimo Regular, car je la trouve lisible (notamment en petite taille) et plutôt belle. Il est possible de changer de police, en déposant un nouveau fichier ttf (seuls les polices de type TrueType sont supportées par imagettftext et par l’extension) dans votre dossier public (par exemple via le gestionnaire de médias).

L’extension est désormais traduite en français et en anglais, et ne demande qu’à se voir traduire dans d’autres langues si vous vous en sentez le courage (cela se fait à travers des fichier PO).

Comment on configure tout ça ?

On accède à la configuration de l’extension via les préférences utilisateurs : le lien “user:preferences” tout en bas de la section “Extensions” dans l’administration de Dotclear (extension apparue avec la 2.3.1 de Dotclear). On se retrouve alors devant plusieurs champs :

configuration feed2img

  1. Le premier champ, font, sert à définir le fichier de police (.ttf uniquement je rappelle) que vous voulez utiliser, dans le cas où la police Arimo vous déplait.
  2. Le second champ, image_output vous permet de définir le nom de l’image finale (par défaut feed2img_output.png), qui sera créée dans votre dossier “public”.
  3. image_source définit l’image à utiliser comme source (c’est à dire sur laquelle les titres seront inscrits), elle doit se trouver dans votre dossier “public”. Cette image source définit le type d’image en sortie : du jpg donnera du jpg (meilleure qualité possible), du png du png etc. et ce même si le nom d’image finale est différent (si image_source est un jpg et que image_output est image.png, l’extension sera bien .png mais l’image sera en fait en jpg.
  4. La préférence line_height définit l’interlignage entre chacun des titres de billets.
  5. max_chars_by_line, le nombre maximal de caractères autorisés sur une ligne. Au-delà de cette valeur, trois petits points (…) seront ajoutés au titre.
  6. number_of_posts définit comme son nom l’indique le nombre de billets qui doivent apparaître sur l’image.
  7. show_blog_title permet de montrer ou cacher le titre du blog. Par exemple, sur ma propre signature, j’ai voulu un effet spécial (2 couleurs pour le titre), donc j’ai créé cet effet directement sur l’image puis j’ai caché le titre pour qu’il ne soit pas inscrit par dessus.
  8. Les paramètres text_color et title_color définissent, en héxadécimal à la manière du CSS, la couleur du texte correspondant.
  9. Les paramètres font_size définissent la taille du texte correspondant, en points.
  10. Les valeurs x définissent la position du texte, en pixels, depuis la gauche tandis que y compte depuis le haut de l’image.

Pour regénérer l’image une fois ces paramètres modifiés, créez un nouveau billet ou modifiez-en un existant (un simple enregistrer sans modifier le contenu du billet suffit).

En espérant que cette extension vous permettra de créer des signatures personnalisées à votre goût !

Où télécharger feed2img ?

Cette fois, je ne fournis pas l’archive directement, vous pourrez l’installer de façon plus rapide et simple via dotaddict.org et l’installateur DotAddict pour ceux qui ont l’extension (bientôt inclue par défaut avec Dotclear).