Aller au contenu | Aller au menu | Aller à la recherche

Consultant référencement naturel et design : voir et être vu sur le web, par José da Silva, alias Jori Avlis

Marine

Design

Le design graphique selon Jori: travaux graphiques, webdesign, multimedia, print... C'est ici que vous trouverez les thèmes et templates pour dotclear, wordpress...

Fil des billets - Fil des commentaires

Thème pour bbPress en français : bb Liquid Card

Et hop, une déclinaison de plus du design Liquid Card. Cette fois, c'est un petit thème pour bbPress. Un thème de plus ne peut pas faire de mal!

Pour le télécharger, c'est par ici : http://e-jori.com/etc/bb-darkliquidcard.zip

Il suffira de le dézipper dans votre repertoire "my-templates" de votre install bbPress et l'activer via l'admin, comme pour n'importe quel autre thème.

Pour voir une démo (bien modifiée) supportant AdSense, rendez-vous sur le Forum du Crédit, tout nouveau tout beau. D'ailleurs si vous avez des questions sur l'argent, le crédit, les emprunts, c'est un bon forum pour vous!



Est ce qu'avoir des images sur un site, c'est bon pour le référencement?

Cette question a au moins le mérite d'être posée. En tant que designer graphique de formation et référenceur de métier, je peux dire qu'il y a certains soupçons qui iraient en ce sens.

En effet, on sait que Google privilégie les sites qui ont été créés en pensant aux utilisateurs. Un site avec pas mal d'images est à mon avis un bon point en référencement : les internautes, les humains, sont des êtres "visuels". Si on dit que beaucoup de texte est très bon pour le référencement, on peut aussi dire que si il y a une illustration, c'est encore mieux. On peut lire entre les lignes quelque part dans les guidelines qu'un bon visuel a un bon impact chez Google. Les images qui égayent et illustrent un article vont sincèrement dans ce sens.

Ce calcul, je le fais, et ça ne m'étonnerait pas que l'algo ne le fasse pas non plus. Alors c'est sûrement mineur comme impact, sauf, bien sûr, sur les requêtes hyper concurrentielles (en gros, celles qui rapportent de l'argent). Mais c'est toujours de ça qu'on parle, les grosses requêtes, pas les requêtes dont tout le monde s'en fout (aucune fierté à être premier sur une toute petite requête avec très peu de concurrence).

Si on pousse un peu plus loin le raisonnement, toutes les images ne sont pas bonnes à prendre, bien sûr! Mais Google étant partiellement aveugle, comment ferait-il pour savoir ce qui est bon de ce qui est mauvais? Le mot clé à retenir ici, c'est ce "partiellement". Google reconnait de plus en plus les photos, et c'est une certitude, est sûrement capable de connaître une compression dégueulasse sur une image. Si c'est le cas pour vous, je pense que vous ne remonterez pas aussi bien que prévu :D

Pour finir, le contenu alternatif des images permet à un référenceur de jouer sur les variations orthographiques d'un mot. A bon entendeur...

oui, je n'ai pas mis d'image pour cet article, je sais <_< ... hs: vous trouvez normal que mon profil Google ne soit toujours pas indexé? Allez, encore un petit lien dessus : José da Silva


Logo pour WC

Notre entreprise avait un besoin urgent et de premier ordre, que je me suis attaché à résoudre le mieux possible, à la demande générale d'au moins une personne. Il était clair pour tous que c'était invivable et que la situation ne pouvait pas tenir plus longtemps.

Les WCs n'avaient que des pauvres post-its en guise de logo!

Vous comprendrez l'immense désarroi au sein du salariat et de ses bienveillants patrons face à un tel bricolage fait à la va-vite, qui durait depuis le mois de Septembre dernier, lors de notre déménagement. Ce soir, je suis fier de vous l'annoncer, nous avons des toilettes dignes. Le visuel est dérivé de ce que j'avais fait en d'autres occasions, notre "dotman", sorte de bonhomme en fil de fer représentant le web 2.0 (concept désormais vieillot, mais tant pis). Je n'ai fait que transformer le bonhomme en poulet, afin de coller plus fidèlement à notre bien aimé serveur nommé avec amour "poulet".


L'histoire ne dis pas si tout le monde comprendra que ce sont des toilettes, mais nous sommes au moins très fiers de la mise en place de ces superbes logos en aluminium imprimés quelque part dans le quartier. Il a fallu pas moins de trois consultants seniors, un balai ainsi qu'un iPhone (et son niveau à bulles) pour permettre cet exploit. Je pense que la petite finition géniale, que vous n'aurez sans doute pas la chance d'apprécier dans toute sa splendeur sur ces photos, c'est la légère inclinaison de la plaque d'aluminium de monsieur Poulet : grâce à cette inclinaison novatrice, la poussière a 23,4% de chances en moins d'adhérer sur le haut de la plaque. Génial.


Non, il n'y avait pas eu de franche rigolade lors de la pose, ce qui aurait pu provoquer un dérapage expliquant le fait que le logo de la porte des chiottes messieurs soit tordu, mauvaises langues <_< ...

WordPress theme : Vie Parisienne, urban style and design theme for WordPress

> Download Vie Parisienne WordPress theme <


''I'm sorry to write this blog post in english, but I must. I will explain later. And sorry for my crappy English! :) '' I'm presenting you today my new WordPress theme (and soon DotClear theme), Vie Parisienne. It's in fact the evolution of my "Vie Urbaine", for my Blog de Paris, where you can see a demo of it (personalized, the actual theme don't have the Eiffel Tower). So it's a city scape featured design, as you can see in the header, quite simple. It was designed for a 3 columns blog style : 2 columns for content, plus the sidebar. This fluid design has to be in three columns because of this fluid feature : in the content, I reserved one column for pictures, and the other one for text. This was the only solution I found to have many pictures in a fluid design, without the posts beeing ugly.

To use this extra column for images, just wrap them in <div class="postimgs">. The stylesheet have the extra class which formats this div reserved for images. Yeah I know, I'm getting technical.  Just put your pics between this code : <div class="postimgs"> and this one : </div>, in HTML mode in WordPress when you are writing your blog post.

I optimized this template design for Adsense and Ads in general, but without being aggressive for our dear readers : ads should complement the content, not be THE content. I also internationalized (i18n) the theme, no more French words in an English WordPress theme, or vice versa. Just put your .po file corresponding to the language you want, and voila! You have a nice theme for WordPress in any possible language. .po files can be found at WordPress website.

Why I can't find "Vie Parisienne" theme (formerly "Vie Urbaine") in the themes directory of WordPress?

That's a good question. When they released the 2.7 version of WordPress (which is very good), they suspended all of my themes. They weren't up to date. Ok, no prob. But they also changed completely their politics in regard of sponsored themes. No more themes with sponsored links in the footer. That's a really questionable decision. But what's really a sponsored link, and what isn't?
I sent to Wordpress guys an email with those questions, explaining my point of view on the subject : the free open web should not be afraid of sponsors, it's a good thing. Even Leonardo and all of the Renaissance artists had maecenas, that's why they could create such beautiful things. I had no response. They must argue that a lot of webdesigners out there do freely the themes for WordPress. I must say here that they are mostly students or webdesigners seeking for a job and recognition. Maybe some amateurs, who decided to give away an old design for their personal blog. I know, I was one of them : a webdesigner student looking for a job, and giving away the design of my blog, LiquidCard, seeking for a bit of recognition.

But I would understand anyway that they just don't want sponsored links in themes displayed in theme directory, ok. No reward. Ok. Not direct money reward. Ok. Why?

What I don't understand, it's the criteria. I submitted some days ago this new theme of mine. I think it's not an ugly theme, and it is not sponsored. Or at least, I would not consider that the link in the footer pointing to my Blog de Paris it's a sponsored link. If so, everyone else is in that case at the theme directory. So why my theme is not on the directory? Ask them. I saw themes accepted after my submission to WordPress, some of them quite ugly. I saw themes with blatant sponsored link in it ("this theme was brought to you by ~ insert company ~").

On a side note, I asked to the DotClear community if I could let in my DotClear themes a link to my sponsor. I must precise that all of my themes are GPL licensed, and everyone can, if he want, remove the link if they want. The response of DotClear community was clear : no problem, since it's GPL.

Vive DotClear!

Nouveaux thèmes DotClear, sur le voyage et les vacances

Thème Nuit d'Eté Je travaille actuellement sur le blog séjour et vacances de Thomas Cook, ou, devrais-je dire, les blogs de Thomas Cook. Il en existe un en WordPress, et un autre en DotClear. Dans ce cadre, j'ai créé plusieurs thèmes, 8 au total, pour les deux plateformes de blog. Cet article sert de support complémentaire pour ceux qui auraient des questions ou des difficultés à installer leur nouveau visuel, en plus de l'aide qu'ils pourront trouver sur les blogs de support officiels des plateformes respectives :

Les 8 thèmes en rapport avec les vacances sont basés sur les 4 saisons de l'année, avec une variante jour / nuit. De quoi avoir un choix assez vaste ed thèmes, vous en trouverez au moins un qui correspondra au temps qu'il fait dehors :) De plus, j'ai mis à disposition de tout le monde les fichiers PSD que vous retrouverez sur les blogs de support. Plus aucune difficulté pour personnaliser son thème WordPress ou DotClear! Si vous voulez télécharger Nuit d'Eté, ça se passe sur la page du thème Nuit d'Eté chez Dotaddict ;)


Parisii.fr, le blog de Paris et son thème wordpress, "Vie Urbaine"

Je vous parlais de mon nouveau template pour WordPress dans mon dernier billet. Il est désormais terminé. Vous pouvez pouviez le télécharger sur WordPress :)

C'est un template urbain, comme le nom l'indique. Il me sert en fait pour mon nouveau blog, le Blog de Paris, Parisii.fr, où vous trouverez plusieurs articles sur la ville lumière. Un peu dans la même veine que Lusitanie.fr donc. Paris raconté par des habitants de paris, tout simplement, sans formules tape à l'oeil ou de plans foireux de sortie où tout le monde va, et qui sont bien évidemment archi bondés. Vous aurez plutôt des articles du genre : "miam, aujourd'hui j'ai mangé un super sandwitch à la boulangerie du coin". Bref, pas un truc de touristes.

Sur le thème WordPress "Vie Urbaine", vous ne trouverez pas la Tour Eiffel, qui me sert de logo pour Parisii.fr : c'est à tout un chacun de personnaliser son thème de blog, volontairement simple à cet effet. Je le retoucherais sans doute plus tard.

J'en ferais évidemment une adaptation Dotclear.

le Blog de Paris

Au sujet du blog de Paris, si vous vous sentez l'âme d'un écrivain parisien, pourquoi pas ne pas contribuer pour le blog? Ou avec un dessin ;)


Futur template wordpress et dotclear : Fluctuat Nec Mergitur

Juste un petit aperçu de ce que sera le header d'un futur nouveau blog sur Paris. J'adapterais ensuite son design à un template générique distribué librement avec les licences de creative commons habituelles.

template wordpress

J'aime bien faire ce genre de design "urbain", avec la ville en fond, j'avais déjà fait quelque chose d'approchant pour feu mangastyl avec des persos à la place des bâtiments il y a quelques années, pour dotclear.


Azulejo Portugais, thème pour Wordpress

Mon nouveau site sur le Portugal et la culture lusophone, Lusitanie.fr; repose sur le thème spécialement créé pour lui, "Azulejo Portugais". Ce thème a pour base graphique les carrelages typiques que l'on voit un peu partout au Portugal, les "azulejos" (sur des maisons de particuliers, sur des églises, sur des mairies, des boutiques... partout). Majoritairement bleu et blanc, un design qui s'adapte à la résolution de l'écran, et qui se veut porteur d'un certain concept portugais de l'esthétisme.

Header du Template Azulejo de Portugal Cette image ci-contre correspond au header - la partie supérieure - du template pour Wordpress. Vous pouvez télécharger le thème pour Wordpress ici : http://e-jori.com/etc/wp-azulejo.zip et l'installer normalement pour votre blog Wordpress : il est compatible avec les widgets, et la barre latérale est sur la gauche. Le template a également été optimisé pour le référencement naturel, qui de toute façon est déjà très bon par défaut sur Wordpress.

Avant que quelqu'un ne le demande, oui, je prépare une version pour Dotclear =) !

Au sujet de Lusitanie.fr : c'est un blog sur lequel je parlerais du Portugal et des cultures héritières, les pays lusophones (Brésil, Angola, Cap-Vert...). Différents aspects de la culture seront abordés, de la musique à la gastronomie, en passant par les monuments ou les coutumes locales. Dans mon premier post, je vous parle de Fado, la musique de la Saudade.

Footer du Template Azulejo de Portugal L'image de gauche correspond ici au footer de "Azulejo de Portugal". Chaque fin de post est ponctué d'un coquillage. L'utilisation de la police de caractères "monotype corsiva" pour le titrage est assez "osée", parce que ce n'est pas une police habituelle, mais pourtant ! Il semblerait qu'elle soit disponible dans plus de 80% des systèmes Windows, ce qui en ferait une police encore plus répandue que Times New Roman. Pourquoi s'en priver, surtout qu'elle correspond plus ou moins à la police que je cherchais pour ce design... Il faut savoir qu'au départ, je voulais utiliser sIFR pour ce template, afin d'inclure la police de mon choix. Après avoir réussi à installer sIFR, j'ai été forcé de constater que cette technologie avait trop de désavantages : de nombreux petits bugs, comme le non affichage pur et simple des titres une fois sur deux, une difficulté à configurer et personnaliser la police m'ont donc fait préférer une inclusion classique en CSS de la police de caractères actuelle. J'ai fait le même type de pari pour la police en général du template, "Palatino Linotype" : très répandue également sur les systèmes windows, l'écrasante majorité des lecteurs des blogs utilisant ce thème pour wordpress (et prochainement dotclear) devraient le voir conformément à l'original.


Un logo pour Artofruits, futur site des amoureux de belles images

logo Artofruits Depuis quelques temps, je travaille sur un projet nommé Artofruits, à titre perso. Ce sera un site qui servira de porte d'entrée à d'autres sites qui seront créés ou qui sont déjà créés ayant rapport avec l'Art. Comme à chaque fois que je commence un nouveau design, la première étape consiste à élaborer un cahier des charges, même très basique : une ou deux lignes générales suffisent pour avoir une idée directrice. Et quelles sont ces lignes générales? Et bien pour le savoir, il faut avant tout savoir quel public Artofruits aura. Est ce que c'est pour les enfants, ou est ce que c'est pour les retraités? Est ce que c'est pour ceux qui veulent s'amuser, ou est ce que c'est pour les accros junkies du dessin?

Artofruits est en fait assez généraliste et hétéroclite, ça n'arrange pas nos affaires. Mais ce qui est sûr, c'est qu'il faut un minimum de personnes attirées par la simplicité mais aussi la rigueur du design, qui donne l'impression qu'ici, nous pourrons parler d'Art et dessin tranquillement.

Lire la suite...


Une petite animation flash

Une petite animation en flash, ou plutot trois: à l'arrêt, la marche et la course (plutôt un petit footing :) ). L'avantage de flash pour ce genre d'animations sur le web est évident: le fichier ne pèse que 40 ko, et on a un grand confort pour modifier ce qu'on veut. C'est toute la puissance du design vectoriel!

Vous pouvez également voir le début d'une autre animation que je suis en train de faire ici: http://www.deviantart.com/view/33144161/

:)


Mozaik, pour dotclear

J'ai fini l'adaptation en thème dotclear d'un ancien design que j'avais fait pour PHPBB, Mozaïk. J'éspère qu'il vous plaira, il est liquide (adaptable à toute résolution) et facilement personnalisable.

Pour l'installer: installeur

Les fichiers archivés si l'installeur ne fonctionne pas: archives

Et enfin deux petites prévisualisations: visualiser header et visualiser bottom

À propos, le dessin utilisé pour le header est Flores Latinas, que vous pouvez voir sur deviantART dans son intégralité : deviantART, libre à vous de remplacer cette illustration par votre header personnalisé ;)


Thème LiquidCard

J'ai enfin fini l'adaptation du thème de mon petit site :) Le design s'adapte à votre résolution, ainsi, quelque soit votre résolution, le site ne paraitra jamais minuscule :p (bon en dessous de 800*600 avec Internet Explorer, ça bugue un peu à cause du calendrier...). Un LiquidCard simplifié, sans flash, mais en revanche un header liquide aussi, comme le reste des éléments qui composent ce thème.

A vous de le personaliser ;)

Lire la suite...


le redesign d'e-Jori

Le besoin de faire un site personnel qui soit facilement updatable, et qui valorise plus les contenus m’ont poussé à refaire e-Jori à partir du zéro. Ou presque. Dans ce billet, j’explique comment j’ai procédé, c’est assez révélateur de ma façon de travailler.

Lire la suite...