Bienvenue sur le portail web présentant mes réalisations ainsi que mes compétences.
Ouvrez chaque onglet en arrêtant votre souris dessus.
Présentation
Bienvenue sur le portail d'un développeur web sur Annecy et réalisé dans les règles de l'art.
Ici exit l'empilement de « table » à n'en plus finir, les balises et attributs qui usurpent le travail du CSS ou encore les morceaux de JavaScript en plein milieu de la sémantique.
Nos amis s'appellent HTML5, CSS3, jQuery, AJAX, Node.js, PHP, .NET, LINQ et j'en passe ! Ils oeuvrent pour deux choses communes :
Être au service du référencement et de l'ergonomie pour que le contenu soit trouvable et accessible quel que soit la plateforme d'affichage ou les mécanismes d'animations.
Être au service de la maintenabilité et de la lisibilité pour garder un site actualisable et aux normes du web dans un souci de productivité, sécurité et d'efficacité.
Visite guidé
Ce portail présente avant tous les projets dans lesquels je me suis investi hors de mon cadre professionnel en tant qu'autodidacte.
Ce sont eux qui m'ont permis d'acquérir des connaissances sur le web ancestral et d'étudier les erreurs qu'il ne faut pas faire.
Ce portail présente également celui que je suis devenu après 5 ans d'études supérieures et plus de 4 ans d'expériences professionnelles m'ayant donné les clés de l'ergonomie, du référencement, des bonnes pratiques, de la gestion de projet et du développement web.
Vous trouverez de quoi me suivre moi et mes projets dans « À propos de moi » ainsi que tout ce qu'il faut savoir sur les développements Haeresis dans « Besoin d'un site ? ».
Si vous rencontrez un quelconque problème contactez-moi via mon adresse email en la générant en cliquant ici.
À propos de moi
Envie de partager avec moi ou d'obtenir mon CV, c'est par ici !
Réseaux :
Description
Développeur web spécialisé Front-End sur Annecy, je vis chaque jour ma passion nageant parmi les techniques actuelles et d'avenir en matière de client-side. C'est pourquoi tous les jours au petit déjeuner (mais pas seulement), je prépare de quoi satisfaire ma faim de Responsive Web Design, de performances web, de respect des standards, de bonnes pratiques, de POC HTML5/CSS3, d'accessibilité web, de factorisation, d'automatisation, de partage, de casse-tête en tout genre et ce à travers des projets et prototypes toujours plus appétissants. Dernière idée en date ? Le Framework Haeresis !
Mon Curriculum Vitae
Logo de LinkedIn
Consultez mon CV à jour et mes avancées professionnelles en rejoignant le réseau LinkedIn. Vous pouvez également me le demander par email.
Mes passions et mes envies
Logo de Google+
Encerclez +Bruno Lesieur sur le réseau social Google+ pour en savoir plus sur qui je suis, ce qui me fait vibrer et partager avec moi.
Mes travaux et la Webosphère
Logo de Twitter
Suivez moi et suivez l'actualité de mes projets et les actus web, PCs, mobiles, sociales et mes coups de coeur avec @HaeresisDotFr.
Me contacter par Email
Si vous souhaitez me contacter par email, vous pouvez le faire via mon adresse personnelle en la générant en cliquant ici.
Mes compétences
Un tour d'horizon des technos et techniques que j'utilises !
A savoir
La liste des mots-clés ci-dessous vous permet de connaître les aspects de chaque technologie mise en oeuvre sur mes projets ou au quotidien.
Il faut garder à l'esprit que plus une compétence/technique est basse dans cette liste, plus ma veille technologique sur l'évolution de cette technique est espacée dans le temps.
Ainsi je suis totalement à jour sur l'aspect Frond-End des sites Internet d'aujourd'hui et opérationnel pour travailler sur les autres points cités.
Client-Side
HTML5 / xHTML - Sémantique
Rendu dynamique : Moteur de Template PHP, ASP.NET
Interopérabilité : DocType, Classes CSS conditionnelles, Jeu de charactère, Hack CSS
IIS6 et 7 : Pool, Integrated/Classic Mode, Rewrite Module, Virtual Directory, Application
Mon métier
Au delà de l'Intégrateur HTML5 et CSS3 il y a le Développeur Front-End !
Explications par ici !
Qu'est-ce que le Front-End
La partie cliente (ou Front-End) d'un site web fait le pont entre l'utilisateur et le serveur web. C'est la page web visible à l'écran et également les éléments la constituant avec lesquels vous interagissez :
le design,
les médias affichés,
les animations,
la saisie de formulaire,
le contrôle des erreurs,
les mises à jour après chargement de page...
Naissance d'un métier
Les balbutiements
La réalisation de la partie Front-End était initialement faite :
soit par le Webdesigner qui touchait sa bille sur FrontPage ou Dreamweaver,
soit par le Développeur Back-End qui avait (web exige) des notions en rendu HTML.
Dans les deux cas, la connaissance des standards n'était pas de mise et le chargé Front-End ou Client-Side bricolait du mieux possible en empilant des <table> et en vérifiant que cela fonctionnait dans IE6.
Les Intégrateurs Web
Puis l'essor de CSS et des multiples navigateurs ont fait naître une spécialité parmi les métiers du web : celle d'Intégrateur Web ou Intégrateur HTML/CSS.
Il convenait à cette personne, généralement un développeur Back-End à cheval sur le Webdesign (ou inversement) :
de créer une structure aux normes du W3C,
indexable dans les moteurs de recherche et maintenable
(le design d'un site pouvant changer du tout au tout) avec du JavaScript récupéré de-ci de-là sur EditeurJavascript.
Nous en sommes alors au stade des développeurs Back-End qui ont de fortes proportions aux développements et mécanismes Front-End.
Les Développeurs Front-End
Pour finir, avec l'arrivée :
de technologies comme HTML5, CSS3
des librairies comme jQuery,
des requêtes asynchrones,
des recommandations en performances web pointus
sur tous les navigateurs,
toutes les versions de navigateur,
tous les périphériques (Responsive Design),
les bonnes pratiques pour le référencement naturel...
l'intégration web est devenue une affaire de spécialistes.
La nécessité absolue d'avoir des connaissances sur l'architecture complète et les fonctionnements d'un site Internet
ainsi que la connaissance poussée du JavaScript pour réaliser des interfaces riches font qu'à présent
les experts actuels sont des développeurs Front-end qui ont de fortes proportions au développement et mécanismes Back-End.
Des compétences de professionnels
C'est donc avec l'essor d'Internet que les développeurs client-side sont devenus indispensables :
Référencement et SEO : le développeur Front-End transforme un visuel en balise sémantique HTML5 créant une structure "avec du sens" permettant une meilleure compréhension des moteurs de recherche ainsi qu'une meilleure hierarchisation de l'information au sein des pages pour une visibilité accrue.
Ergonomie visuelle : le développeur Front-End s'occupe de l'habillage visuel du site d'après des maquettes et guide de style ainsi que de l'animation des éléments grâce au CSS3.
Ergonomie fonctionnelle : le développeur Front-End s'occupe des animations au passage/clique de la souris, des interactions avec le clavier, ou même au rapatriement de nouvelles informations après chargement grâce à AJAX.
Interopérabilité et accessibilité : Il est indispensable que le développeur Front-End respecte les normes du W3C ainsi que les préconisations d'accessibilités du projet OpQuaSt et reste en veille des techniques de demain comme le Responsive Web Design. Respecter cela est le meilleur moyen d'assurer : le bon fonctionnement, la maintenabilité et l'évolutivité du site sur le maximum de périphériques et de navigateurs.
Au final la Qualité Globale d'un site web passe avant tout par le travail du développeur Front-End qui veille à l'ergonomie du site pour l'utilisateur ainsi qu'à la compatibilité du site sur le terminal utilisé et ceci dans un souci de rapidité d'exécution et de performance au chargement.
Gallus est un graphiste indépendant doté d’une forte expérience en agence de communication et marketing. Ce petit caméléon met son savoir-faire et ses connaissances au service des entreprises ayant besoin d’une nouvelle image afin d’amplifier leur communication.
Petite création light ; elle a été l'occasion de faire quelque remplacement Javascript par du CSS3 et de revenir aux sources avec un site complètement consultable sans Javascript. Le site est bien entendu Cross-Browser et Cross-Plateform !
Relooking Annecy est le futur site vitrine du Centre minceur Relooking qui est spécialisé en amincissement, remodelage de la silhouette, anti-cellulite, épilation radicale et soins anti-âge. Il va également mettre en avant la partie institut de beauté puisque Relooking propose également des soins pour le visage et des modelages pour le corps à base de produits naturels.
Ce site est l'occasion de mettre à profit mon Framework dans un contexte de vitrine et de mettre en place la partie édition de contenu à même le site sans Back Office. Version de démo ici.
Quelques #ID et beaucoup de .CLASS est mon blog personnel dans lequel je parle de développement front-end, expose mes plugins et réalisations web mais aussi ou parfois je parle pour ne rien dire... ...sur le développement web.
Ce blog fait office de plateforme de test d'ergonomie sur écran HD. Sans toutefois me donner entièrement satisfaction (couleurs discutables, pas mal de zone de lecture, etc...) il me permet de dégager quelques bonnes idées et c'est le principal. J'espère bien qu'au terme de son développement j'aurais fait de lui un outil aussi utilisable qu'atypique.
Compilation of Final Fantasy VII est un site communautaire autour de l'univers de Final Fantasy VII.
Ce site regroupe des masses de textes et d'informations sur la Compilation of Final Fantasy VII, directement depuis le Japon et en français.
Comme tout site communautaire, il dispose d'un Forum et d'un Chat. Il dispose également d'un Espace Membres où tous les membres peuvent participer eux-mêmes à l'apport de contenu au site. Si toi aussi tu aimes Final Fantasy VII, l'inscription est gratuite et rapide.
Communauté Avatar est une plateforme communautaire à mi-chemin entre un site web et un forum.
Elle permet d'échanger autour de l'univers Avatar de James Cameron.
Plus qu'un simple espace de discussion entre fan, il se veut à terme être l'encyclopédie francophone (ou Pandorapedia) la plus complète sur l'univers Avatar ; car plus qu'un film, Avatar est un univers ou science et fiction n'ont jamais été aussi près de se rejoindre !
Scara Aviation est le site présentant le Syndicat des Compagnies AéRiennes Autonomes
qui regroupe 17 compagnies aériennes françaises et deux écoles de formation aux métiers de l'aérien.
Bien qu'il soit délicat de respecter les standards et les performances web avec des technologies ASP, ce site est assez léger au final. Il est éditable en ligne et est propulsé par une architecture web développée pour permettre de faire du multidesign, multiplateforme et multiculture le tout avec un accès aux base de données LINQ.
Haeresis Web est un site de partage autour du développement web qui me permet de concrétiser sous forme d'article les connaissances que j'acquière durant mes différents projets.
Partant du principe que ma connaissance n'est ni absolue, ni exempte de toutes contre-vérités, le site est basé sur le CMS MediaWiki de la Wiki Foundation.
Les articles sont ainsi à la disposition de tout un chacun, ce qui permet de les tenir à jour en les complétant de manière à ce qu'il ne soit jamais obsolète.
Provence Pays Arles est un site spécialisé dans la vente de prestations touristiques dans la commune d'Arles et ses alentours.
Je suis intervenu sur ce site en tant qu'intégrateur de deux sites en un en Cross-Domain et charteur de CSS Drupal utilisé dans les 2deuxsites.
La vitrine du site est réalisée avec Drupal mais le mécanisme de réservation est en ASP.NET/C#.
Les deux systèmes fonctionnent donc ensemble au sein d'un même rendu et communique entre eux par JavaScript.
Printemps Voyages est le spécialiste des voyages sur mesure et voyages de noces. Ce site est la déclinaison voyage du site Printemps.com.
Je suis intervenu sur ce site sur 3 points : pour l'animation de la page Destination, l'intégration de Cufon.js fourni par Printemps.com et pour intégrer une visioneuse d'image créer sur mesure en jQuery (voir une fiche produit).
Objectif France construit un univers totalement dédié au voyage de découverte de la France.
Mon intervention sur ce site s'est résumée à intégrer un prototype visuel xHTML/CSS en HTML5 dans un environnement ASP.NET/C#. J'ai également pu inclure du JavaScript de-ci de-là pour la compatibilité inter-navigateur et quelques visionneuses. Cependant, seule la version PHP a été retenue.
BigBang Incentive est spécialisé dans la préparation d'évènement et séjour en vous proposant des choix d'activité Team Building, de Restaurant, d'Hôtel et de Diner de Gala.
Je suis intervenu sur ce site sur la fiche produit avec : la réalisation d'une visionneuse sur mesure pour faire défiler des images, l'intégration de multi-lieu avec les API Google Maps en relation avec la fiche ainsi que l'habillage d'une version imprimable de la page.
Tao Asia est une application web permettant de créer soit même son voyage sur mesure. Au fil des étapes, l'intégralité du voyage ce prépare jusqu'au paiement.
Je suis intervenu sur ce process pour refaire la charte graphique d'après des visuels fournis par le client avec du CSS. J'ai également intégré la carte Bing avec les API Microsoft dans la liste de choix possibles.
Besoin d'un site ?
Besoin de conseil ?
Besoin d'animation ?
Besoin d'une solution web complète ?
Un site pour petit et grand
Ecran HD, Portable, Notebook, Smartphone ou Tablette ? Plus besoin de choisir ou de faire plusieurs sites, je vous propose d'adapter les dimensions ou le design de votre site pour tous les supports qu'il soit standard ou plus petit !
"C'est une autre culture"
Même si vous êtes attaché à la langue de Molière, il est parfois nécessaire de permettre à d'autres cultures et pays de consulter vos pages. J'offre la possibilité de partager la même page en plusieurs langues : par exemple une version française et une version anglaise et bien d'autres !
Faire bonne impression
Parce qu'un rendu sur écran n'est pas la même chose qu'un rendu sur papier, je propose sur chaque page une feuille de style dédiée à l'impression pour ne conserver que la partie utile du contenu afin d'imprimer un document clair et concis.
Ecrire ce qui nous chante
Grâce au système ergonomique couplé à l'outil ckeditor du Framework Haeresis, vous pouvez éditer n'importe quelle zone de texte établis comme « éditable » sur n'importe quelle page !
Il vous suffit de passer une page en mode d'édition et d'éditer les zones souhaitées pour qu'elle actualise les fichiers de langues ou base de données associée.
Je vous laisse éditer cette page !
Et bien plus !
Les sites Web Haeresis sont capables d'encore bien plus de prouesse grâce à un Framework Haeresis pensé maintenabilité et réutilisabilité. Cela offre un développement rapide des fonctionnalités suivantes :
Référencement / Réécriture d'url
N'importe quelle arborescence et extension de fichier est possible pour la navigation.
Tous les contenus sont référencés par langue et indexable par tous les moteurs de recherche.
Une génération automatique de plan de site est possible.
Ergonomie / Design
L'intégralité du design est séparé du code de développement ainsi un webdesigner ou le client peut fournir ces maquettes HTML5 / CSS3.
Une même page peut avoir : une apparence différente, des couleurs différentes, des animations différentes (ou les trois !) par utilisateur, appareil, période de l'année, etc...
Les mails envoyés ou les versions imprimés des pages sont designables.
Multilingue / Données
Les mentions « en-gb », « english » ou d'autres dans les urls ne sont pas obligatoires.
Les textes de l'application sont rassemblés par langues dans des fichiers éditables par le client.
Une base de données par langue ou un préfixe de table sur une même base est possible.
Maintenabilité / Performance
Fait sur une architecture MVC2, les sites sont très perméables aux changements et évolutions !
Séparation très précises des rôles du HTML5, CSS3, JavaScript et PHP 5.4/.NET 4.0.
Rangement des fichiers ordonnés et architecture logique pour un travail à plusieurs et un temps d'accès sans égale.
Facilement portable si changement de serveurs.
Type de site réalisable
Site vitrine présentant une personne, entreprise, association, etc...
Application web à la demande aux process complexes sur cahier des charges fournis ou à concevoir.
Site vitrine couplé avec application web distante en Cross-Domain.
Tout ce que vous êtes capable d'imaginer !
Mon blog
Blog en construction mais tout de même consultable.
Blog en construction
Mon blog est actuellement en construction, n'hésitez pas à faire des retours constructifs.
14 mars 2013 à 12h12. Développement Web / Internet Explorer / Navigateurs / Outils / Ressources
Mon labo
Protos et trucs sympas ou inutiles en pagaille !
Boîte à bonnes et moins bonnes idées
Divers prototypes, brouillons, Proof of Concept, tests, bidouilles que j'ai pu réaliser son exposés ici. C'est l'endroit ou les bonnes idées et l'inutile se côtoient.
Proof of Concept. Utilisation de l'effet parallax pour page de contenu (recharger page).
Démonstration
Contenu adapté à l'écran
Adaptable
Fixe HD
Affiche le site dans sa version adaptable en fonction de la taille de la fenêtre et/ou de l'écran. Plus l'espace est petit, moins il y a d'informations affichées.
Impose l'affichage du site au format standard quel que soit le périphérique. Redimentionnez la fenêtre, le site dépassera. Cela permet d'avoir accès à toutes les fonctionnalités, même sur mobile.
Modification et export
Mode Édition
Impression
Activer les outils de modification du contenu dynamiquement. Cela vous permet de modifier les textes sur la page d'un simple clic.
Affiche le site dans sa version imprimable. Cela vous permet de l'exporter sur support papier ou électronique (format PDF par exemple).
Site international
Français
Anglais
Affiche le site dans sa version originale française.
Affiche le site dans sa version internationale anglaise.
Outils
Mode Test
Ne charge que le contenu interne au site (plus de Google Maps, Réseaux sociaux) pour tester les performances réelles du site.
Mini-jeux
Easter eggs
Shoot Mots-clés
Tire sur les mots-clés qui s'affichent derrière le site et fait le plus grand score ! (Uniquement pour grand écran sur : IE9+, Chrome, Firefox, Opera et Safari).
Me contacter
Par ici, c'est rapide !
Projet ? Idée ? Infos ? Écrivez moi !
Vous pouvez me contacter via le formulaire sur http://www.haeresis.fr/.
C'est quoi votre nom ?
Sans email, je ne peux pas vous répondre !
Il est bizarre votre email.
Mais vous n'avez rien dit...
Votre message m'a bien été envoyé.
Une copie va également être envoyé à votre adresse. Si vous ne recevez pas votre email, il y a de fortes chances que moi non plus car votre adresse email aura peut-être été erronée.
Pour se rencontrer
Tracer un itinéraire
Mon adresse
Bruno Lesieur
Rue des Charmilles
74960 Cran-Gevrier
France
Pour accéder tout de même au site, cliquez sur la croix. Cela vous permettra :
De jouer à Shoot Mot-Clé en cliquant sur les mots clés qui s'affichent en arrière plan.
De consulter les archives du site, de mon ancien blog, et de mes anciennes réalisations.
A venir...https://www.haeresis.frdefaultfrFRLes modifications effectuées ont été sauvegardées temporairement. Cette version de démo reprendra son contenu initial au rechargement de cette page.Les modifications effectuées ne seront pas enregistrées. Continuer quand même ?Version anglaiseVersion mobileVersion éditableVersion imprimableVous pouvez empècher l'onglet de se refermer quand votre souris sort en cliquant sur le cadena.Revenir au siteRetourPlus d'infosportail-haeresisa-propos-de-moimes-competencesmon-metierrealisations-web-completesintegrations-web-partiellesbesoin-d-un-siteme-contacterdemonstrationmini-jeuxmon-blogmon-labo
