Je vous présente dans ce billet le projet CreaResto.fr qui est sorti en version beta en début de semaine et dont le but est de fournir une plateforme de création de sites web (ou plutôt de mini-sites) pour les restaurateurs qui n’en ont pas encore.

Genèse du projet

Le projet a commencé en mars 2010 lorsque je cherchais des idées de sites Internet. L’idée m’est naturellement venue de privilégier des domaines connexes au guide de restaurants aviresto.com afin de ne pas trop me diversifier et surtout pour avoir la possibilité d’utiliser le guide aviresto.com comme moyen de promotion. Le plus dur, comme d’habitude, a été de trouver le nom de domaine qui va bien, surtout que le temps m’était compté car je souhaitais utiliser les fameux noms de domaines Gandi gratuits.

Développement

Le développement repose sur une architecture entièrement faite maison et pensée exclusivement pour ce projet, contrairement à d’autres projets où je suis reparti de frameworks ou d’outils de CMS tel que WordPress.

Modèle économique

Le modèle économique principal de CreaResto.fr repose sur l’insertion de publicités dans les mini-sites web générés pour les restaurants. La création de sites Internet pour les restaurateurs est par conséquent un service gratuit.

Cependant, certaines fonctionnalités seront présentées comme des options payantes (suppression de la publicité, gestion de noms de domaines personnalisés…).

Suite du projet

Le projet n’en est actuellement qu’à ses débuts et beaucoup de développements restent à faire. Ceux-ci seront fait au fil du temps et également selon les demandes des premiers utilisateurs de l’application. Le design de l’application sera aussi revu réalisé dans les prochaines semaines.

Liens

Site internet du produit : Création de sites Internet pour restaurants avec http://www.crearesto.fr

Site de démonstration du produit : Site Internet de restaurant avec http://demo.crearesto.fr

N’hésitez pas à me laisser vos avis

En savoir plus :

1. Nouvelles fonctionnalités pour CreaResto.fr : blog et statistiques Le service de création de sites Internet pour restaurants CreaResto.fr...
2. aviresto.com : votre guide restaurant communautaire Il est grand temps pour moi de vous présenter le...
3. .Net adapté pour les sites Internet personnels ? C’est la question que je me suis récemment posée et...

1. Bring me to the right page : les publicités doivent envoyer sur des pages profondes en rapport avec l’encart pour ne pas perdre le visiteur.
2. Make your homepage useful : le design de la page d’accueil doit permettre d’identifier directement le nom de l’entreprise, le but du site, les promotions en cours…
3. Help me navigate : la navigation du site doit être claire et intuitive.
4. Give me the right results when I search : faciliter et optimiser la recherche.
5. Display groups of products clearly : permettre la comparaison de produits.
6. Give me the product details I need : faciliter l’affichage des détails d’un produit.
7. Make registration optional : rendre l’enregistrement facultatif et limiter les contraintes « administratives ».
8. Make it easy to buy or enquire : faciliter l’acte d’achat.
9. Reassure me : rassurer l’utilisateur.
10. Find this useful? Let me help! : testez tout ça…

Il ne vous reste plus qu’à mettre en pratique, ou plutôt à vérifier que votre site respecte ses principes de bases.

Le guide est ecrit en anglais mais est très facile à comprendre.

Source : [PDF] Make your site work

En savoir plus :

1. 5 étapes pour une vente facile Je ne me suis pas foulé et je reprends tel...
2. Mythes et malentendus sur le référencement Google Voici une présentation fort sympathique sur le référencement Google et...
3. Thèmes WordPress E-Commerce Pour rester dans la continuité de mon dernier billet vous...

Il s’agit d’un moteur de recherche de tweets (donc de messages pour le désormais célèbre Twitter), mais plus que le fond, c’est surtout la forme qui importe ici. Toutes les conventions de présentation du web y sont cassées car le designer a laissé libre cours à son imagination, comme le montre la capture ci-dessous.

J’ai mis quelques secondes avant de comprendre comment fonctionner ce site. J’ai d’abord cru qu’il y avait une erreur, car aucun résultat ne s’affichait et j’ai fini par comprendre que chaque oiseau (en origami) apportait un résultat et il suffit de passer la souris dessus pour le découvrir.

On remarque aisément avec ce type de site au design complètement libre que nous avons tous été conditionnés par rapport à la lecture et à l’analyse d’une page web. Dès qu’un site s’en éloigne trop, on devient vite perdu et il faut s’adapter, mais cela permet de découvrir de superbes créations.

Pour la petite anecdote technique, toute la conception du site Tory’s Eye est faite à base de Javascript et il n’y a aucun recours à une animation Flash… Ca aussi, c’est asssez bluffant !

Voilà, je vous laisse découvrir le site Tory’s Eye. N’hésitez pas à laisser un commentaire.

Et vous, connaissez-vous d’autres sites où vous avez eu besoin d’un certain temps d’adaptation ?

En savoir plus :

1. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
2. Comment réaliser un design web 2.0 ? Je me permets de relayer ici un article publié hier...
3. Le webmaster : le mouton à 5 pattes du web2.0 Voici un article intéressant que je voulais partager avec vous...

Voici donc la solution ultime pour vos applications et sites Web. Plus de 100 000 icones sur une seule et même page Web… c’est fou ! Par contre, forcément, la page met un peu de temps à se charger.

Source : http://www.iconfinder.net/ultimate

En savoir plus :

1. Le SP2 (service pack 2) de Windows Vista enfin disponible Encore un billet qui s’éloigne du web et du webmastering,...
2. Le plein d’icones Web 2.0 pour vos sites Voici juste un petit billet pour vous présenter deux ressources...
3. Thèmes WordPress E-Commerce Pour rester dans la continuité de mon dernier billet vous...

E-commerce ? Oui, vous avez bien lu ! WordPress est avant tout un outil de gestion de blog, mais aussi un outil de CMS au sens large. Et grâce à la communauté qui s’agite autour de WordPress, il est même devenu un outil de e-commerce à part entière, cette prouesse étant rendu possible en le couplant à des outils de e-commerce tels que OS Commerce et aux nombreux plugins disponibles.

Personnellement, je n’ai jamais utilisé WordPress dans un tel contexte, mais les retours qu’on peut lire sur la toile sont plutôt positifs.

Je vous laisse maintenant découvrir la sélection de thèmes WordPress e-commerce.

En savoir plus :

1. Encore une sélection de thèmes WordPress Bon, je sais, il y a beaucoup d’articles consacrés à...
2. Thèmes WordPress Et voilà une nouvelle ressource pour vos thèmes WordPress. Le...
3. Générateur de thèmes WordPress Vous ne savez pas par où débuter pour créer un...

Si je vous signale ce site, ce n’est pas pour car j’ai acheté des actions WooThemes, mais plus car il existe tout de même certains thèmes gratuits dont le thème Snapshot idéal pour présenter ses billets sous forme de galeries photos :

Thème WordPress Snapshot

Je vous laisse découvrir le site WooThemes, qui vaut tout de même le détour.

En savoir plus :

1. Encore une sélection de thèmes WordPress Bon, je sais, il y a beaucoup d’articles consacrés à...
2. Thèmes WordPress E-Commerce Pour rester dans la continuité de mon dernier billet vous...
3. Générateur de thèmes WordPress Vous ne savez pas par où débuter pour créer un...

Je vous dévoilerai le projet ultérieurement, mais il s’agit d’un site Internet dont le développement sera fini d’ici là fin de semaine. La phase de test pourra donc commencer à ce moment.

L’expérience vous fait peur ? Ne craigniez rien, je n’attends de vous qu’une petite revue du site et de son ergonomie, qu’un petit test des fonctionnalités et si possible un petit rapport sur les points à ajouter et à améliorer.

Si vous voulez participer à ce test, merci de laisser un commentaire à ce sujet avec un email valide et je vous recontacterai rapidement. Le nombre de places est limité, alors dépêchez-vous…

En savoir plus :

1. La règle des 7 liens de navigation Ca fait quelques mois que je traine l’idée de cet...
2. Bing, moteur de recherche de Microsoft, en version beta Initialement annoncé pour le 2 juin, Bing, le nouveau et...
3. Appcelerator, Iphone, Aviresto et bonne année 2 mois et demi sans article… j’en suis profondément désolé...

Dom Inspector (version 2.0.3)

Dom Inspector est une extension qui vous permettra de voir le contenu de votre page sous forme d’arbre HTML comme le montre l’exemple suivant.

Cette fonctionnalité s’avère pratique mais pas autant que celle nommée « Display Element Information » présente au sein de l’extension Web Developper détaillée juste après.

Web Developer (version 1.1.6)

Je pense qu’il s’agit de l’extension la plus intéressante de ce panel. Elle permet de retrouver des références à des images cassées, de désactiver une ou plusieurs feuilles de style CSS, la gestion des cookies, l’exécution de Javascript.

Il est également possible d’éditer une feuille de style directement depuis le navigateur pour tester rapidement des changement ou bien de retrouver facilement les styles d’un élément particulier avec l’option « Display Element Information » depuis le menu « Information ». Une autre fonctionnalité intéressante est la retaille de la fenêtre aux dimensions standards (800×600, 1024×768….) pour vérifier la compatibilité de votre site.

Firebug (version 1.33)

Firebug possède certaines fonctionnalités similaires au plugin Web Developper, mais la fonctionnalité la plus intéressante est sans aucun doute la console permettant d’analyser tous les appels HTTP effectués depuis une page. Cela permet de débugger très facilement toute intégration d’AJAX au sein de votre site web.

Cette extension permet aussi d’analyser les temps de chargement de vos ressources externes (scripts javascript, feuilles de style, images…).

IE Tab (version1.5.2)

Comme je vous l’avais dit dans un précédent post, ce plugin est utile et vous permettra la navigation de votre site internet sous Internet Explorer tout en restant dans un onglet Firefox. Quel avantage par rapport à un Internet Explorer standard ? Juste un clic sur le plugin et le rendu de la page courante s’opère avec Firefox… imaginez un peu le temps gagné !

Téléchargement des extensions

• Dom Inspector
• Web Developer
• Firebug
• IE Tab

Vous avez des plugins à conseiller ? Laissez un commentaire sur cet article et dites-nous tous vos secrets…

En savoir plus :

1. Outils de tests multi-navigateurs Suite à un article paru récemment sur ce blog concernant...
2. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
3. WordPress comme outil de CMS Voici un article intéressant glané au passage sur le site...

En tout cas, moi j’aime ! Je trouve que ça a tendance à alléger le design tout en s’intégrant bien et surtout cela améliore l’ergonomie.
En voici un bel exemple d’utilisation, capturé sur le site maville.com, où en plus de la bonne intégration, la popup est bien travaillée et complète.

En plus, du point de vue du développement, ces popups modales s’intègrent en général très facilement et il existe de nombreuses ressources adaptées à différents cas d’utilisation :

• LightBox : il s’agit sûrement du plus connu de ces systèmes. Il ne permet cependant d’afficher que des images. L’avantage de ce script est qu’il bénéficie d’un nombre important d’effets de chargement et de transition entre images…
• ThickBox : ThickBox est une « version étendue de LightBox » qui permet pour sa part d’afficher de façon modale des formulaires, des iframes….
• il en existe encore de nombreux autres tels que : HighSlide JS, SlimBox, Sexy Lightbox, ClearBox, VideoBox, ModalBox, Lightview…

Pour finir, je vous laisse cet article intéressant qui recense 8 de ces systèmes, tous basés sur du Javascript : 8 popups modales en Javascript

Liens :
8 popups modales en Javascript
MaVille.com

En savoir plus :

1. Le webmaster : le mouton à 5 pattes du web2.0 Voici un article intéressant que je voulais partager avec vous...
2. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
3. Exécution Javascript sur le chargement d’une page Comment exécuter plusieurs scripts Javascript au chargement d’une page ?...

La présentation qui suit recense quelques-unes des bonnes pratiques à mettre en oeuvre. Il n’y a pas grand choses d’autres à ajouter et je vous laisse découvrir ces bonnes pratiques résumées dans la présentation ci-dessous (un peu déjantée parfois).

Si, j’allais oublié, je rajouterai dans les bonnes pratiques du web design léger de ne pas utiliser le langage .Net, très verbeux et qui ne respecte que peu de standards dans le code généré.

Article original : beewareblog.com

En savoir plus :

1. Bonnes pratiques jQuery Voici un article très intéressant retraçant les bonnes pratiques du...
2. Ressources, tutoriels et guides WordPress en français Grâce à cet article paru sur le blog Presse-Citron.net, WordPress...
3. 5 étapes pour une vente facile Je ne me suis pas foulé et je reprends tel...