Aujourd'hui en navigant sur différents sites, j'ai fini par craquer.

Moi aussi il me faut le Back to Top, célèbre bouton en bas de page des sites internet qui apparaît lorsque l'on scroll et qui vous remet de façon smooth en haut de la page.

Je suis rapidement tombé sur un site qui mettait à disposition un script jQuery et je m'en suis inspiré pour l'intégrer à Gen3sis.

Principe

Le script est relativement simple. Tout tient en deux points.

Recalage en haut de la page

Il est permit grâce au à la fonction animate

$("html, body").animate({scrollTop: 0}, "fast");

Affichage du bouton à partir d'un certain seuil

Ce qui rend le Back to Top plus agréable, c'est le fait qu'il n'apparaisse qu'au bout de 4 tours de mollettes. Pour cela, il suffit d'utiliser l'observateur d’événement scroll

$(window).scroll(function(){
    ($(this).scrollTop() > 300) ? $back_to_top.addClass('visible') : $back_to_top.removeClass('visible');
});

Design

Pour le design, on a besoin de 2 composants principalement:

• le positionnement absolu pour que le bouton reste toujours dans le coin bas à droite.
• l'icône en forme de flèche, pur laquelle j'ai utilisé une icone Font Awesome

En utilisant la propriété CSS3 transition et en ajoutant un peu d'opacité et de d'ombré ça donne ça

/** back-to-top **/
#back_to_top {
    display: inline-block;
    height: 50px;
    width: 50px;
    position: fixed;
    bottom: 20px; 
    right: 20px;
    background-color: #4E4D4A;
    opacity: 0;
    visibility: hidden;
    border-radius: 35px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    text-align: center;
    transition: all 0.3s ease;
}

#back_to_top.visible { opacity: 0.7; visibility: visible; }

#back_to_top:hover { opacity: 1; }

#back_to_top i { line-height: 45px; font-size: 30px; color: white; }

J'ai retravaillé le design de la page d'un post de blog pour qu'il soit responsive.

L'article que j'ai lu sur les patterns de layout responsive m'a permit de clarifier comment on organise une page.

L'important dans la conception c'est de savoir à quel moment un bloc flottant va stacker

L'image montre le shéma de principe des différents écrans en fonction des devices

Je suis tombé par hasard sur cette étude qui m'a conforté sur une impression personnelle: le web mobile est lent.

La navigation sur mobile dépasse souvent le seuil de frustration et j'abandonne fréquemment la consultation d'un site par manque de patiente.

Le problème est qu'avec le développement de la 4G, les sites mobiles se sont lâchés. Les appareils mobiles aux résolutions hallucinantes permettent d'afficher des images HQ, et les différents sites se sont lancés dans une bataille effrénée au Rich User Interface avec de plus en plus de données à télécharger pour afficher une page et du javascript côté client de plus en plus lourd à faire tourner.

Seulement voilà, comme la majorité de la population, je suis toujours en 3G. Et très sincèrement, même en étant sur le réseau n°1 de France, il m'arrive plus que souvent de passer en Hedge.

Certes les nouveaux sites sont plus beaux, ça bouge de partout avec des animations très plaisantes, et à ce titre, Apple et l'iPhone ont fait beaucoup de biens au soin apporté à la conception graphique.

Mais finalement, je me retrouve à rêver de mes bonnes vielles pages en HTML, simples, mais efficaces.

J'ai rien à dire, mais je vais le dire à tout le monde !

Je me suis remis un peu au référencement. J'ai créé mon compte Google Analytics et j'ai ajouté un Sitemap automatique à mon code.

En fait le sitemap.xml redirige vers une page PHP qui va générer les urls automatiquement en fonction du menu. C'est certes un peu léger comme crawling mais c'est ce que je peux faire de mieux via le générateur de code source.

En customisant un peu, je pourrais rajouter dynamiquement les catégories de produits ou les catégories de blog. Je pense que mettre tout le site n'a pas vraiment d'intérêt, surtout que ça fait perdre en priorité au liens référencés.

Tuto Sitemap

Pour référencer votre sitemap sur Google (90% de part de marché en France) il faut se rendre sur le Webmaster Tools

J'ai choisit de vérifier ma propriété du site via une entrée DNS de type TXT sur ovh, c'est plus propre et assez facile à mettre en place quand on connait, mais d'autres solutions existent.

Ensuite il suffit de communiquer à google le lien du sitemap dans Exploration > Sitemap.

A noter que le sitemap doit se trouver à la racine du site, sinon il ne pourra pas référencer les pages contenues dans un autre répertoire.

Ex: si le sitemap est www.monsite.fr/public/sitemap.xml, alors il ne pourra référencer que les urls au delà de www.monsite.fr/public, ce qui est assez fâcheux.

Ca m'avait posé pas mal de problème chez manolo à cause du multilingue. L'astuce avait été de créer un sitemap à la racine qui redirige vers 2 autres sitemaps, un sur /fr/sitemap.xml et l'autre sur /en/sitemap.xml.

la genèse

Back in the time, avant manolosanctis j'avais entrepris un projet générateur de code dénommé Genesis.

L'idée m'était venue de ma mission à la Sogé où nous utilisions un générateur pour toutes les tâches récurentes. Cela permettait de s'assurer du respect des Best Practices, des conventions de nommage et d'éviter les erreurs de typo.

Principes

Framework VS Générateur de code

Vous me direz, et à juste titre, qu'un framwork comme Hibernate peut très bien répondre au besoin. Je suis personnellement assez mal à l'aise avec les frameworks de persistance objet. En effet, l'utilisateur de ce type de framwork fait aveuglément confiance à la gestion automatisée des recherches/sauvegardes en base de données et cela peut conduire à de gros problèmes de performances.

Je suis assez partisan du Lazy loading et, en règle générale, de la maîtrise de l'accès à la base de données. En particulier, je trouve dangereux de faire appel à la bdd dans une vue (c'est peut-être un traumatisme d'un bug de ce type rencontré sur un de mes projets)

De plus, et je pense que c'est l'argument clé, les frameworks couvrent un large champ d'action et nécessitent de parcourir tous les cas de figure à chaque exécution d'un script. En terme de performance on a vu mieux. Je préfère traiter les différents cas dans un générateur de code et sauvegarder la configuration optimale qui tournera donc plus vite.

Pour finir, la génération de code permet de modifier aisément le résultat si jamais il ne correspond pas exactement au besoin. On gagne en souplesse pour la résolution des cas complexes.

Approche multiple

Ceci étant dit, je ne suis pas un fanatique du générateur de code source. Je pense qu'il faut avoir plusieurs outils dans sa boîte de développeur.

• Framwork: Un framwork peut être très intéressant, du moment qu'il concerne des traitements génériques. J'utilise principalement mon framework pour gérer la couche MVC + Formulaires.
• Code Generator: Lorsque intervient de la logique métier, je préfère utiliser un générateur de code car ce sont des données propres à l'application.
• Bootstrap: Si le problème à traiter est trop complexe, il peut être utile tout de même d'avoir un fichier de bootstrap qui va jetter les grand principes sur le papier. Une simple copie de fichier modèle suffit dans le cas présent. On se met ensuite à coder intégralement, mais on a gagné du temps sur les bases.

Le Projet

Je me suis mis récemment à travailler sur de multiples projets. Genesis v1 ne me permettait pas de switcher facilement d'un projet à l'autre.

Par ailleurs, les configurations étaient enregistrées dans un fichier XML par objet à traiter. La sélection du fichier source étant pénible sur le long terme.

Genesis ayant été avant tout développé pour m'aider à avancer rapidement sur mon code, je n'avais pas pris le soin de correctement l'architecturer et il devenait difficile de le faire évoluer. En particulier

• impossibilité de générer une partie du code uniquement
• ajout de nouveaux cas de figures assez complexes à gérer.
• pas d'updates automatique de la bdd
• pas de possibilité de synchroniser des fichiers 'types' sur plusieurs projets.

Je m'explique. En travaillant sur plusieurs projets, j'ai commencé à faire évoluer l'architecture des layouts des pages afin de systématiser la gestion du menu et des feuilles de style. En parallèle, j'ai implémenté Bootstrap sur mon projet Track et je n'avais pas envi de faire du CTR+C/CTRL+V sur les autres projets. Il me fallait donc trouver un moyen de pouvoir coder dans un environnement 'type', puis de synchroniser les fichiers avec le projet cible en question.

Tout ceci m'a finalement conduit à me lancer dans Gen2sis, générateur de code et gestion d'application PHP.

Fonctionnalités

Gen2sis permet actuellement de gérer plusieurs composants

Application

Une application est le point central de Gen2sis. Elle permet de

• gérer la bdd attenante
• gérer plusieurs fichiers de configuration (LOCAL, DEV, PROD)
• bootstraper l'application pour commencer avec une base
  • index: page d'accueil
  • error: gestion des erreurs 500 et 404 - Not found
  • user: création d'utilisateurs et module d'authentification
• gérer le menu de l'application
• gérer le theme de l'application (couleurs des liens, du menu, police des titres, etc...)

Entité

C'est le nom que je donne à un objet métier. Une entié peut être par exemple:

• un post de blog
• une produit d'un site d'e-commerce
• un commentaire
• ...

Une entité peut avoir:

Attributs

Des Attributs de plusieurs type:

• texte
• date
• booléen
• numérique
• date
• image
• email/url

Références

Des Références à d'autres entités.

Exemple: une entité Album possède une référence à l'entité Utilisateur en tant qu'auteur de l'album.

Dictionnaires

Des Dictionnaires d'Entités ou "listes" d'entités.

Exemple: un Post de blog peut avoir plusieurs Commentaires

Pour chacun de ces 3 types, Gen2sis génère

• le modèle objet associé
• le controller en mode CRUD
• les vues nécessaires
• le formulaire de création
• la couche d'accès aux données
• la couche de logique métier
• le SQL permettant de mettre à jour la base de donée en fonction de son état préalable.

La suite

Pour l'instant Gen2sis n'est utilisable qu'en LOCAL. Il y a encore trop de configuration en 'dur' et le développement depuis un serveur distant n'est pas vraiment aisé. Mais il faut avouer que je suis parfois frustré de ne pas pouvoir coder parce que je n'ai pas mon PC sur moi. Mon idéal serait d'avoir Gen2sis sur le web et de pouvoir enfin coder depuis mon iPhone !

Until my dreams comes true ...

-- Confucius

Nouvelle version du blog avec possiblitié d'uploader une image. Ca n'a pas l'air très compliqué dit comme ça, mais je voulais absolument que cette évolution soit gérée par mon générateur de code source. C'était donc un poil plus compliqué.

J'étais sur le point de laisser tomber mon vieux parser de texte qui me sert à mettre en forme les posts de ce blog pour migrer vers un tinymce aux possibilités plus grandes, quand je suis allé faire un tour sur Coding Horror

Ce site c'est un peu une référence pour moi. Startuper et Philosophe du web, Jeff Atwood est le créateur de Stackoverflow et il a souvent des réflexions très pertinentes sur l'informatique et le développement.

A ma grande surprise, il n'a pas développé son blog mais il utilise Ghost Blogging. J'ai farfouillé un peu pour voir quelle type de mise en forme ce site proposait car les posts m'ont toujours paru très sobres et clairs.

Je vous le donne dans le mille, leur key feature c'est le MARKDOW ! C'est à dire la possibilité de taper du texte avec des * et des _ qui seront ensuite mis en forme automatiquement.

Un peu d'histoire

En creusant un peu, le Markdown (je suppose en référence au Hyper Text Markup Language aka HTML) est un langage de balisage léger créé par John Gruber. Il a été initialement développé en Perl, mais on trouve facilement des projets de portage en PHP.

La syntaxe est prévue pour être compréhensible, même si elle n'est pas interprétée. Par exemple:

# Header

- list item
- list item
- list item

**strong** ou _italic_ ou [lien web](http://example.com)

Mais surtout le gros avantage pour moi est que la syntaxe permet de faire facilement du formating directement au clavier. De façon plus efficace donc, surtout pour la prise de note. Ceci a aussi le gros avantage de laisser le soin de la mise en page au css et de donner un rendu propre et cohérent.

Il faut croire que le markdown a eu beaucoup de succès, car des sites comme Github l'utilisent. A tel point que c'est devenu une sorte de norme.

Et nous dans tout ça ?

A partir de là je n'avais pas beaucoup d'options. Comme j'ai la volonté un jour de releaser mon code source, ça ne servait à rien de réinventer mon propre language. J'ai donc opté pour la lib Parsedown que j'ai intégrée à mon framework. Bon j'ai pas pu m'empêcher de modifier un peu le code pour passer les classes en static histoire de gagner un peu en perf Ma seule déception, c'est que le language ne gère pas le underline :( Mais au final je gagne pas mal de possibilités par rapport à mon parser, surtout celle de formater du code source.

-- Mathdown

Je viens de développer une nouvelle fonction qui m’a bien amusée.

J’étais un peu navré à chaque fois que mon parser HTML ne trouvait pas d’image et que le site affichait mon image grise toute moche par défaut. Souvent je passais du temps à refaire des vignettes pour les re-uploader sur le site et le rendre plus joli. Mais pour les sites de dev, c’est pas toujours évident car il n’y a souvent que du texte.

Du coup je me suis inspiré du graphisme de YOU CAN’T DO SIMPLE MATHS UNDER PRESSURE pour générer une image à base de texte. L’idée c’est de faire matcher les mots dans le carré de façon à ce qu’ils occupent le plus d’espace possible. Les textes sont donc rendus dans différentes taille en fonction de la longueur des mots. Le résultat ressemble un peu au Manifesto, où du moins c’était le but recherché.

J’ai un peu tweaké le code pour ne pas faire qu’un seul mot par ligne, mais agglomérer les mots si ils étaient courts. Le résultat a été plus probant lorsque je suis parti du principe que les mots de la langue anglaise font 4.5 caractères en moyenne, ce qui m’aide à déterminer une longueur de ligne maximale en dessous de laquelle j’agglomère les mots.

Bon il me reste un problème de typo. PHP me donne la taille du texte avec les coordonnées x et y, mais les lettres ne comment pas toutes au 0,0. Le M par exemple est en retrait par rapport au A. Ce qui fait que les mots ne sont pas très bien centrés en fonction de la première lettre du mot. Idem en hauteur pour les accents qui biaisent mes calculs.

Petite démo ici

Je ne sais pas si je passerais encore du temps à améliorer l’algo, car il a déjà un bon rendu pour ce que je veux en faire et je suis un peu à court d’idée il faut dire.

LOVE WHAT YOU DO, DO WHAT YOU LOVE

Je viens de découvrir les nouveaux éléments de formulaire HTML 5.

J'ai implémenté les nouveaux champs email et url qui possèdent un validateur intégré. Par contre, leur validateur n'est pas terrible, il faut continuer à garder un validateur côté PHP pour s'assurer que l'url ou le mail est bien valide, mais ça évite déjà certaines erreurs de saisie.

J'ai ajouté également à mon Framework PHP la gestion de l'attribut required qui empêche la validation du formulaire si le champ n'est pas saisi. Idem que précédemment, cela n'affranchit pas de faire le test côté PHP. Surtout qu'un individu mal intentionné peut toujours essayer de contourner le problème en appelant directement la page de sauvegarde en "POST". Néanmoins ça fait toujours du traitement en moins côté serveur pour des cas simples. A noté que le champ n'est pas compatible avec tous les navigateurs, ce qui rend d'autant plus nécessaire la validation PHP.

Je trouve dommage cependant que l'on ne puisse pas saisir son propre commentaire en cas de saisie non valide.

Dans la liste des déceptions, l'élément qui permet de faire du suggest field. Encore une fois, la méthode permet de pré-remplir un champ texte, alors que le comportement qui m'intéresse c'est l'affichage du mot, mais la récupération de l'id côté serveur. Il va falloir continuer de faire ça en js.

Pour finir, j'ai mis en place l'attribut placeHolder sur certains champs qui donne une indication de saisie à l'intérieur du champ de formulaire. Ca ne marche pas non plus avec tous les navigateurs, mais ça rend l'utilisation plus agréable sur navigateurs récents, et ça évite d'encombrer la page avec du Javascript pour simuler le comportement.

En tout cas je suis heureux de constater que ça évolue au niveau du support HTML en natif. Ça allège le code, ça prend moins de ressource côté serveur et ça améliore l'expérience utilisateur.

Vivement la suite.

Ce WE je me suis lancé un nouveau challenge : rendre le site responsive !

En effet ça commençais à devenir pénible d'utilisation sur iPhone.

La partie la plus compliquée c'est surement le menu qui se regroupe en un seul bouton quand la taille devient trop petite. J'avais envie d'une solution "100% CSS". C'est possible, mais il faut se rendre à l'évidence, ce n'est pas très pratique. Le problème principal vient d'utilisation de la pseudo class css hover pour afficher le menu au survol du bouton. Mais sur smartphone, le comportement est hasardeux et le menu reste affiché une fois qu'on l'a activé.

Au final, j'ai choisit d'implémenter **Bootstrap C'était pas évident parce que le framework redéfinit beaucoup de classe que j'avais déjà moi-même implémenter (comme les listes, le breadcrumb, la pagination). Il redéfinit aussi la taille de base des polices, ce qui m'a mit tout mon design en vrac. Gros boulot en somme, mais finalement le résultat en valait la peine.

J'ai tout de même réécrit une classe pour la sidebar. La gestion par colonne est intéressante, mais je voulais garder une largeur fixe pour ma sidebar.

.main,.sidebar{
    position:relative;
    min-height:1px;
    padding-right:15px;
    padding-left:15px;
}
@media(min-width:768px){
    .main,.sidebar{ float:left; }
    .main{ border-right:1px solid #d2d2d2; }
}
@media(min-width:768px){.main{ width:67%; }.sidebar{ width:33%; }}
@media(min-width:992px){.main{ width:74%; }.sidebar{ width:26%; }}
@media(min-width:1200px){.main{ width:80%; }.sidebar{ width:20%; }}

En règle générale, cela manque encore aujourd'hui au framework. Je ne sais pas si c'est juste une philosophie à adopter pour être full responsive, mais j'ai du mal à m'habituer aux largeurs flottantes. Je préfère avoir une colonne fixe, et le main qui prend la place restante.

En conclusion, Bootstrap règle qq problèmes (certes assez pénible à implémenter), mais il faut continuer à coder un peu par soi-même pour l'adapter à son besoin.

Bonne trouvaille tout de même.

En espérant que le framework continuera d'évoluer et que je puisse en bénéficier à long terme.

A vos iPhones !!!

V0.1.5

J'ai bossé ces derniers jours sur le parser de lien (le formulaire dans la barre de menu) afin d'améliorer la reconnaissance des sites. En plus des tags facebook, je regarde toutes les images du site. J'ai adapté un code que j'ai trouvé là http://github.com/maparrar/linkparser en suivant un lien du post d'origine ici http://redsunsoft.com/2011/01/parse-link-like-facebook-with-jquery-and-php/

L'idée intéressante du code est de filtrer toutes les images dont le ratio ne respecte pas au moins 1/3 entre hauteur et largeur, ou qui n'ont pas au moins 200px de large. En fait ça filtre toutes les bannières de pub avec un format adhoc et toutes les images qui ne sont pas dignes d'être partagées. Pour l'instant mes tests sont assez satisfaisants, le résultat est assez probant.

J'ai du me remettre au javascript également pour faire le mini slideshow qui permet de faire défiler la liste des images et qui met à jour le formulaire avec la bonne url d'image.

Vous pouvez essayer avec cette url : http://www.tripadvisor.fr/LocationPhotos-g187497-Barcelona_Catalonia.html

Je suis assez satisfait du résultat. Et vous, vous en pensez quoi ?

Bon ceci étant dit il faudrait que je trouve un moyen de déterminer automatiquement une catégorie pour enlever de la friction. Et je dois aussi mettre en place un système de reconnaissance qui évite de créer deux fois un produit à partir d'une même url ou d'un url ressemblante

PS: bon forcément faut pas retourner le site, il y a toujours des cas qui plantent.

Le démon du code m'a rattrappé. On a beau lutter, quand on est staruper, on a ça dans le sang.

Loin de moi l'idée de me lancer dans la création d'une nouvelle entreprise. Mais j'avais une petite idée dans la tête depuis un certain temps et le php commençait à me démanger.

J'ai donc ressorti Notepad ++ et me voici. Je commence le dev par ce blog pour pouvoir partager avec vous mes réflexions et pourquoi pas les enrichir avec vos idées.

Bonnec lecture, bonne visite