Haeresis, Bruno Lesieur

« Quelques #ID et beaucoup de .CLASS »

Le portail Haeresis

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 ? ».

Technos utilisées

HTML5, CSS3, JavaScript, jQuery, Cross Domain, AJAX, JSON, Canvas, SQL, PHP 5.4, .NET 4.0, LINQ

Un problème technique ?

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

Mes passions et mes envies

Mes travaux et la Webosphère

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

  • Référencement : Balise sémantique, Microdata, Lien canonique, Géolocalisation, Sitemap, Flux xml

  • iFrame : Cross-Domain, Autosize

  • Canvas : Police, Animation

CSS3 / CSS2.1 - Design

  • Guide de style : Typographie, Couleurs, Iconographie, Grille, Médias, Interaction

  • Positionnement : Block, Inline, Float, Relatif, Absolute, Fixed, Table, Flex, Grid

  • Police embarquée : @font-face, Propriété text-shadow

  • Animation : CSS Sprite, Propriété transform, Propriété transition

  • Portabilité : Responsive Web Design, Media Query, Meta viewport, Propriété box-sizing, CSS dynamique

  • Client/Web Mail : Style en ligne, Balise style, Feuille de style

JavaScript - Développement / Animation

  • Interface riche : jQuery, Support HTML5 (vieux navigateurs), Manipulation CSS / DOM, Animation, Expressions régulières, fallback, Modernizr.js, Responsive.js, Relocate.js, Intro.js, Impress.js, AngularJS

  • CrossDomain : cookie/session, postMessage/hash/window.name Transport, JSONP, xmlHttpRequest2, XDoc, Contrat P3P

  • Action assynchrone : AJAX, Socket.IO, JSON/XML, CallBack

Outils - Conception / Debug

  • Code : Notepad++, IE/Firefox/Chrome/Opera/Safari (Developper Tools / Firebug / Firebug Lite)

  • Media : Photoshop CS, Paint .NET, Audition CS, Audacity

  • Gestion : Trello, Harvest

  • Clavier : Bépo

  • Autre : Filezilla, TortoiseSVN, TortoiseGIT, Interface OVH

Référencement / Performance

  • SEO : Réécriture d'Url, Redirection serveur, AJAX/escaped_fragment, Réseaux Sociaux

  • Compression : gzip/deflate, file minified, CSS Sprite

  • Chargement : Prioriser/Différer/Paralléliser CSS/JavaScript/Image

  • Outils : Validator W3C, OpQuaSt Reporting, Google PageSpeed, Google Analytics, htmlLint, cssLint, jsLint

Server-Side

Node.js

  • Usage : Express, Socket.IO, EJS, commander, mongoose, jQuery, require/exports/module, NodeAtlas, JSON, npm

  • Architecture MVC2 : Model / View / Controller / Rewriting

  • NoSql : MongoDB, Redis

  • IDE : Sublim Text 3, Cloud9

PHP 5.4 (4)

  • Usage : POO, Namespace, Traits, webconfig.xml

  • Architecture MVC2 : Model / View / Controller / Rewriting

  • IDE : NetBean, Eclipse

ASP.NET avec C# 4.5 (4.0, 3.5, 2.0)

  • Usage : LifeCycle, ViewState, POO, LINQ, Héritage, Polymorphisme, Interface, Générique, Scriptlet, Web.config, UpdatePanel

  • Architecture 3 Tiers avec Url Rewriting : UserInterface / BussinessObject / DataAccess

  • IDE : Visual Studio 2005, Visual Studio 2008, Visual Studio 2010, Visual Studio 2012

SQL

  • Usage : Clé primaire, Index, Clé étrangère (Update/Delete, Cascade/Restrict), Jointure (Inner/Outer left/right), Recherche (Like/Regexp), Procédure Stokée

  • Variante : MySQL, SQL Server

  • UI : phpMyAdmin, SQL Server Management Studio

Framework / Librairie / API / CMS

  • CSS : CSS Reset, KNACSS, Bootstrap, LESS, SASS

  • JavaScript : jQuery/UI/Plugin, ckEditor, Google Maps

  • ASP.NET C# : Linq

  • PHP : MediaWiki, WordPress, Joomla!, PHPBB3, Drupal

Accès Web Server

  • Apache dans WAMP : mod_rewrite, Virtual Directory

  • Apache OVH : Administration web

  • 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.

Réalisations web

En savoir plus...

Gallus Création

Plus d'infos
Aperçu du site Gallus Création Aperçu du site Gallus Création
Aperçu du site Gallus Création

Adresse web

gallus.fr

Technos utilisées

HTML5, CSS3, PHP 5, Responsive, jQuery

Description

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

Plus d'infos
Aperçu du site Relooking Annecy Aperçu du site Relooking Annecy
Aperçu du site Relooking Annecy

Adresse web

Voir la QUAL

Technos utilisées

HTML5, CSS3, PHP 5, Responsive, jQuery

Description

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

Plus d'infos
Aperçu du site Quelques #ID et beaucoup de .CLASS Aperçu du site Quelques #ID et beaucoup de .CLASS
Aperçu du site Quelques #ID et beaucoup de .CLASS

Adresse web

blog.haeresis.fr

Technos utilisées

HTML5, CSS3, PHP 5, Responsive, jQuery

Description

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

Plus d'infos
Aperçu du site Compilation of FFVII Aperçu du site Compilation of FFVII
Aperçu du site Compilation of FFVII

Adresse web

compilation-of-ff7.com

Technos utilisées

HTML5, CSS3, PHP 4, Responsive, jQuery

Description

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

Plus d'infos
Aperçu du site Communauté Avatar Aperçu du site Communauté Avatar
Aperçu du site Communauté Avatar

Adresse web

communaute-avatar.fr

Technos utilisées

HTML5, CSS3, PHP 5, jQuery

Description

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

Plus d'infos
Aperçu du site SCARA Aviation Aperçu du site SCARA Aviation
Aperçu du site SCARA Aviation

Adresse web

scara-aviation.com

Technos utilisées

ASP/HTML5, CSS3, jQuery, C# 4.0, LINQ

Description

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.

Intégrations web

En savoir plus...

Haeresis Web

Plus d'infos
Aperçu du site Haeresis Web Aperçu du site Haeresis Web
Aperçu du site Haeresis Web

Adresse web

web.haeresis.fr

Technos utilisées

MediaWiki 1.19,
Responsive, jQuery

Description

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

Plus d'infos
Aperçu du site Provence Pays Arles Aperçu du site Provence Pays Arles
Aperçu du site Provence Pays Arles

Adresse web

provence-pays-arles.com

Technos utilisées

Drupal/C# 4.0
Cross-Domain, jQuery

Description

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

Plus d'infos
Aperçu du site Printemps Voyages Aperçu du site Printemps Voyages
Aperçu du site Printemps Voyages

Adresse web

printempsvoyages.com

Technos utilisées

ASP/HTML, CSS,
jQuery, C# 2.0

Description

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

Plus d'infos
Aperçu du site Objectif France Aperçu du site Objectif France
Aperçu du site Objectif France

Adresse web

objectif-france.travel

Technos utilisées

ASP/HTML, jQuery, C# 4.0

Description

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

Plus d'infos
Aperçu du site BigBang Incentive Aperçu du site BigBang Incentive
Aperçu du site BigBang Incentive

Adresse web

bigbang-incentive.com

Technos utilisées

ASP/HTML, CSS,
jQuery, C# 2.0

Description

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

Plus d'infos
Aperçu du site Tao Asia Aperçu du site Tao Asia
Aperçu du site Tao Asia

Adresse web

tao.asia.fr

Technos utilisées

ASP/HTML, CSS,
jQuery, C# 2.0

Description

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.

Derniers articles

Les bonnes pratiques JavaScript selon Google

  • 30 novembre 2013 à 11h53Bonnes pratiques / Développement Web / JavaScript / Node.js / Ressources / Traduction

Gérer plusieurs langues en HTML5 et CSS3

  • 31 octobre 2013 à 15h47CSS / CSS3 / Développement Web / Front-End / HTML / HTML5 / Localisation / Techniques de Dev / xHTML

Les balises h1 multiples autorisées en HTML5

  • 07 août 2013 à 13h25. Bonnes pratiques / Développement Web / Front-End / HTML / HTML5 / SEO / Techniques de Dev / xHTML

CSS et sémantique d'une Intégration HTML

  • 02 juillet 2013 à 18h02. CSS / Développement Web / Front-End / HTML / HTML5 / Techniques de Dev / xHTML

Classes, héritage, encapsulation vs Prototype en JS

  • 01 juin 2013 à 10h00. Back-end / Bonnes pratiques / Développement Web / Front-End / JavaScript / jQuery / JSON / Techniques de Dev

Les types en JavaScript : pour tout savoir !

  • 17 mai 2013 à 14h20. Développement Web / Front-End / JavaScript / Ressources / Spécifications / Techniques de Dev / Traduction

Une Callback pour vos fonctions JS asynchrones

  • 03 mai 2013 à 13h40. Astuces / Bonnes pratiques / Développement Web / Front-End / JavaScript / jQuery / JSON / Plugins / Techniques de Dev

Développer en JavaScript côté serveur avec Node.js

  • 24 avril 2013 à 14h09. Back-end / Développement Web / JavaScript / Node.js

jQuery 2.0 ne supporte plus IE6, IE7 et IE8

  • 20 avril 2013 à 11h49. Développement Web / Internet Explorer / jQuery / Navigateurs / Outils / Ressources / Vieux navigateurs

La navigation interne dans une page web

  • 19 avril 2013 à 16h49. Développement Web / Front-End / HTML / JavaScript / jQuery / Techniques de Dev

L'attribut HTML5 lang et la pseudo-class CSS3 :lang()

  • 26 mars 2013 à 12h31. CSS / CSS3 / Développement Web / Front-End / HTML / HTML5 / Techniques de Dev

Une alternative au Switch, c'est possible en JavaScript

  • 23 mars 2013 à 11h44. Astuces / Développement Web / Front-End / JavaScript / JSON / Techniques de Dev

L'animation et le survol souris avec CSS3 ou jQuery

  • 21 mars 2013 à 18h06. Astuces / CSS / CSS3 / Front-End / JavaScript / jQuery / Techniques de Dev

Tester la compatibilité IE7, IE8 et IE9 avec IE10

  • 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.

Mes tests

Test de navigation 3D dans Chrome/Firefox avec fallback

  • Prototype. Utilisation de impress.js pour de la navigation.

Test Responsive du format HD au format petit mobile

  • Prototype. Test d'interface en cours pour mon futur blog.

Test Responsive du format 1024px au format mobile

  • Prototype. Test de responsivité pour futur site client.

Plugin jQuery d'une visionneuse

  • Prototype. Test de préchargement, drag, zoom, responsive...

CV - Développeur Front-End en ligne à imprimer

  • Prototype. Faire une version en ligne et imprimable de mon CV.

Outil de devis dynamique à imprimer en ligne

  • Prototype. Changer en direct un devis pré-établie puis l'imprimer.

Déplacement d'un personnage dans navigateur

  • Proof of Concept. Déplacer un personnage, gérer des collisions, etc...

Vidéos responsive uniquement en CSS

  • Proof of Concept. Vérifier le plus ajouter par FitVids.js et autres.

Apparition d'image par partie

  • Proof of Concept. Test pour génération d'image par partie (recharger page).

Défilement d'image et texte sur plusieurs plan

  • 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

Première visite ? Ne partez pas !

Ca sera chargé dans quelques secondes...

Game Over

Félicitations ! Vous avez tenu bon jusqu'à la fin !

points

Les règles

Réalisez le plus haut score avant qu'il n'y ait trop de mots-clés à l'écran !

Ce site n'est plus à jour

Mon site perso à déménagé à l'adresse http://www.lesieur.name/. Le contenu affiché ici n'est donc plus à jour.

> Rejoindre la nouvelle version

> Visiter ce site en tant qu'archive

Pourquoi le site est encore en ligne alors ?

Pour accéder tout de même au site, cliquez sur la croix. Cela vous permettra :

A venir... http://www.haeresis.fr default fr FR Les 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 anglaise Version mobile Version éditable Version imprimable Vous pouvez empècher l'onglet de se refermer quand votre souris sort en cliquant sur le cadena. Revenir au site Retour Plus d'infos portail-haeresis a-propos-de-moi mes-competences mon-metier realisations-web-completes integrations-web-partielles besoin-d-un-site me-contacter demonstration mini-jeux mon-blog mon-labo