Lancement de la boutique ItsTeaTime, vente de thé en ligne

Bonjour 🙂

Je suis fier de vous annoncer que la première boutique de vente de thé, créée pas Stéphanie et conçu par Pascal Isman est accessible depuis le 12/12 à 12:12 !! C’est  pour nous un bel évènement  puisque c’est l’achèvement de plusieurs mois de travail, et c’est aussi le vrai début de l’aventure !!

J’ai développé ce site avec Prestashop, qui est leader des solutions de commerce en ligne en France. Avec le système de module on peut monter une boutique en ligne de manière extrêmement efficace.

Ce site s’adresse à tous, aux amateurs de thé, comme à ceux qui ont moins l’habitude, jusqu’au plus newbies d’entre nous qui avons envie de découvrir ce monde fabuleux.

Vous pouvez le découvrir à l’adresse itsteatime.fr et sur facebook.com/itsteatime.fr

Bonne dégustation de thé 🙂

Encore du drag and drop !

Et oui, j’ai pas encore fini  car après la recherche documentaire et la « remise à niveau » j’ai pu passer au codage proprement dis. À cette occasion j’ai essayé d’utiliser un logiciel de gestion de versions décentralisé pour garder trace de mes différentes étapes de développement.

Page d'accueil du site pour FlowChem

La plus grosse difficulté que j’ai eu au niveau de la programmation est au niveau de la gestion des évènements et de leur ordre pour réaliser le système d’ajout, de déplacement et de suppression des icônes en fonction de leur origine et de leur destination.

Pour le design c’est pas du définitif, ce n’est qu’une première version, mais le gros du travail est sur les icônes qui doivent être à la fois graphique, et évidente pour des chimistes.

Et puis la surprise de dernière minute c’est l’adaptation du site à une résolution de 800×600 en plus de la version plus standard pour 1024×748 et plus.

Voici les deux versions :

Je prend volontiers les retours sur le comportement de cette petite application sur votre terminal ! 🙂

Drag and Drop dans une OnePage

Je continue les recherches pour faire le fameux jeu de présentation en glisser/déposer et du coup je découvre plein de choses interressantes, la première c’est que jquery permet de faire ça simplement. Et puis plein de tuto au résultat vraiment sympa :

Et puis en marge de cette magnifique découverte (pour moi … ) j’ai trouvé des scripts qui peuvent être super intéressant pour optimiser son site, à savoir headjs pour les scripts et bLazy (ou Be Lazy) pour le chargement progressif des images.

Code du script jquery miniaturisé
Code du script jquery miniaturisé

La mise en place du drag&drop dans une one page n’est pas si évidente que ça ! Il faut arriver à concilier les deux bibliothèques javascript et leur css respective !

Mais c’est faisable quand même ^^ Voici un exemple de drag and drop.

 

OnePage Dynamic

Ok, aujourd’hui je commence le développement d’un page de présentation d’un nouveau procédé de production chimique. La commande est simple, une one page avec un petit jeu éducatif dedans, à savoir un jeu de glisser/déposer.

Première difficulté, reprendre contact avec la multitude de projet et bibliothèque qui pullulent sur le web pour faire ce genre de chose et faire le tri entre le bon grain et livrais.

Exemple de ce qui est possible de faire en jeux one page :

Un tuto intéressant pour refaire ses armes avec JQuery : http://www.snoupix.com/slideshow-jquery-accessible_tutorial_28.html

Deux projets super interressant !!

Le premier test de la journée : http://lascapi.fr/flowchem/one-page-dynamic-20140106/

Et pour finir le wireframe pas du tout définitif du projet.

Wireframe du site en one page

Référencement : importance des mots

(résultat vérifié le lundi 14 mars 2011 à 9h30)
Parfois un mot fait la différence :

Résultat pour ‘concepteur multimédia’ -> page 4
Résultat pour ‘concepteur en multimédia’ -> page 1, fin de page, juste avant les résultats vidéos.

Et j’ai même pas mis les guillemets pour faire une recherche sur l’expression exacte !!

Tiens d’ailleurs faisons le test :

Résultat pour « concepteur multimédia » -> page 6
Résultat pour « concepteur en multimédia » -> page 1, les deux premières places sont prises par mon site pour la page d’accueil et le C.V.

Dommage que personne ne fasse les recherches sur les expressions exactes par défaut ! ^^

Et une peu de lecture sur le sujet des mots de liaison. Bonne lecture.

Programmer pour téléphone portable Symbian, le jeu de Go TinyGo

rapport d'expérience sur le développement opensource : 

Recherche d’un projet

J’ai enfin trouvé un jeu de Go pour mobile qui me satisfait, il s’agit de TinyGo. Le jeu est opensource, je vais pouvoir télécharger les sources, faire des modifications et pourquoi pas les redistribuer. La grosse limitation pour la recherche, c’est que je voulais un jeu pour portable fonctionnant avec Symbian s40, ce fut difficile !!

Récupérer les sources

Voici donc la première étape, récupérer les sources. Le projet est hébergé par SourceForge, un site très bien fait, on trouve tout de suite la ligne de commande pour télécharger les sources :

svn co https://tinygo.svn.sourceforge.net/svnroot/tinygo tinygo

Cette ligne de commande est très simple, elle fait une copie du dossier distant sur le dossier local ./tinygo ( pour plus de détails allez voir svnbook.red-bean.com, un bouquin libre sur Subversion ).

Et voila, je me retrouve donc avec une version de travail de TinyGo sur mon disque dur. Maintenant il va falloir aller voir ce code et essayer d’en tirer quelque chose. Pour aujourd’hui si j’arrive à trouver où sont codés les menus et les traductions de l’application puis à la compiler ça sera bien.

Organisation de l’environnement de développement

Bon, je suis obligé de passer de MacOs X à Windows pour avoir toutes les librairies pour la compilation, ça ne va pas être facile de passer d’un environnement à l’autre. J’ai déjà pu commencer à comprendre la structure du code, des classes et des fonctions. Le code n’est pas très commenté, mais il est bien écrit.

Comme je ne sais pas programmer en java, j’y apprends des choses, comme l’existence des interfaces (voir aussi jdnet ) par exemple.

J’ai quand même réussi à trouver où sont codés les menus de l’application. Par contre je n’ai pas encore compris le système de traduction. D’ailleurs à ce propos, on va voir si le développeur de l’application est toujours vivant, je lui est laissé un message sur le forum du projet, on verra s’il y répond.

Conclusion provisoire

En cette fin de journée consacrée, entre autres, au développement, j’ai utilisé Subversion, installé des bibliothèques, analysé du code, contacté le développeur principal de l’application, et puis j’ai communiqué sur cette expérience de développement d’un projet opensource. Alors bien sur, cela ne fait pas une grande expérience, mais je compte bien faire la traduction de cette application.

Rendez-vous d’ici peu pour la suite de « l’aventure ».

L’ETPA à la Novela 2010, à Toulouse, en France

Bonjour, alors voilà ! Ce samedi la Novela commence et devinez quoi : j’expose mon projet, réalisé avec mes collègues à l’occasion de la troisième année de Multimédia 3D temps réel à l’ETPA.
En quoi consiste ce projet ? C’est un jeu vidéo qui utilise la réalité augmentée … En fait j’ai bien envie de laisser le suspense pour tous ceux qui viendrons ^^Donc si vous voulez en savoir d’avantage, rendez-vous du 2 au 6 otc. au Centre de Congrès Pierre Baudis, îlot 4, de 11h à 20h

A bientôt j’espère 🙂

Reflexion à propos du blog

Ça fait maintenant quelques mois que mon blog est en ligne, et c’est le moment pour moi de faire le point.

Mises à jour

Les faits sont là : j’ai eu deux-trois mois à vide, aucune mise à jour, pourtant ce n’était pas la matière qui me manquait. J’aurais pu communiquer sur mon projet d’étude en 3D temps réel et sur la réalité augmentée, ou bien sur le site internet que j’ai réalisé pour une association durant le début de l’année, ou encore sur les dessins et les photos que j’ai fait durant cette période. Mais je crois que je suis pas fait pour ça … Le système de blog est puissant mais demande un investissement que je ne peux pas donner.

La puissance des réseaux

Les réseaux sociaux sont des outils puissants qui apportent de l’audience. Ils sont la plupart du temps assez spécialisé, comme Flickr pour les photos. Ils sont aussi optimisé pour leur usage : Kontain est excellent pour partager des médias sous forme de galerie avec un texte d’accompagnement, Twitter est super pour partager des liens et discuter.

Convergence de réseaux

L’idée que j’ai eu cet été est de faire de mon site un lieu de convergence des réseaux que j’utilise comme Twitter, Flickr ou Kontain. Mais ça dépasse le cadre d’un simple blog, et je n’ai pas encore trouvé les outils pour le faire simplement avec WordPress. Disons qu’il existe plein d’outil pour afficher les dernières photos importées dans Flickr par exemple, mais pas moyen d’en faire un billet qui serait référencé, avec des tags, classé dans la bonne catégorie etc …D’ailleurs, si vous connaissez un moyen pour faire ça vous pouvez l’indiquer dans les commentaires.

Un site portfolio

Un des objectifs de ce site est de servir de portfolio. Actuellement ce n’est pas vraiment le cas. D’une part je n’ai pas mis beaucoup de travaux, ça c’est ma responsabilité, mais d’autre part il n’y a pas, à ma connaissance, de thème qui soit à la fois blog et galerie. Mon but étant de passer plus de temps sur des projets multimédia que sur mon site, il était nécessaire d’avoir une méthode flexible et assez paramétrable. Je n’ai pas trouvé cette méthode.

Projet pour l’année

Durant cette année je vais continuer à chercher une méthode simple à mettre en place et à utiliser pour pouvoir mettre à jour le site tout en utilisant au maximum les réseaux sociaux et leur avantage. Pour donner un exemple un post sur Posterous à été vu plus de 300 fois en une journée, alors que je n’ai ouvert un compte pour tester ce service que depuis trois jours. En comparaison, le billet « Nounours se prend pour E.T. » a été vu 42 fois en trois semaine et c’est le plus vu des articles.

Donc ce site va changer dans les semaines à venir, et devenir un lieu de convergence de flux et de réseaux, peut-être y aura-t-il moins d’interaction, mais je préfère quelques commentaires sur chacun des réseaux que quelque-uns sur ce site.

Dans l’idéal je partagerai mes découvertes allant dans ce sens, en espérant que ce soit utile au plus grand nombre.

Comment faire du beau code html

Tout le monde parle de la nouvelle balise video, mais la nouvelle spécification HTML5 ne s’arrête pas là.

Proposition pour html5, video
Proposition de recherche pour le terme html5 sur Google

En effet, cette norme introduit des nouveautés intéressantes qui vont nous permettre de rendre le code encore plus structuré, encore plus beau. Cependant, il ne faut pas oublier les anciennes pratiques. Il faudra toujours faire attention à la hiérarchie des titres, mettre un titre et un texte alternatif pour les balises images etc…

La balise article

Avec les nouvelles balises descriptives on peut délaisser les div avec des id et des class à répétition. A la place on utilisera par exemple la nouvelle balise article qui permet de définir une entité rédactionnelle indépendante du reste de la page, par exemple un article de blog, qui pourra être réutilisé dans d’autre contexte, comme un flux RSS, ou la page d’une catégorie.

Et à l’intérieure de celle-ci, on pourra utiliser les titres, bien sur, mais aussi hgroup qui représente un ensemble de titre, sous-titre et tag, et d’autre encore comme la balise footer.

La balise footer

Cette balise footer est intéressante, elle est utile pour le bas de page, mais aussi pour toute les parties qui ont besoin d’information : l’auteur, la date de rédaction ou encore les documents relatifs.

C’est important de comprendre qu’elle se rapporte à la section parente la plus proche, càd : article, aside, nav, section et pas seulement à la page globale. On pourra donc mettre autant de footer que de sections

Ouverture

En lisant la spécification du html5 on se rend compte que les changements sont bien plus important que l’ajout de video et de canvas ; aujourd’hui je me suis attardé sur les nouveautés qui auront un impact sur la structure d’une page html, et sur le code, mais il y a encore beaucoup à dire, sur CSS3, sur la géolocalisation, sur les applications offlines… Le domaine est vaste. Mais sans un beau code, ça sera vraiment beaucoup moins intéressant de développer des applications web et des sites internet.