Antoine Guiral : apprenti du web 2.0

Partage d’expériences sur le web

Posts Tagged ‘xhtml’

[tuto jQuery] navigation en ajax non-intrusif (1/2)

Posted by Guiral antoine sur avril 20, 2008

Ce tutoriel est disponible sur mon nouveau blog : http://antoine.guiral.info

Posted in tutoriel, web 2.0 | Tagué: , , , , , , , | Leave a Comment »

[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (2/2)

Posted by Guiral antoine sur mars 9, 2008

Ce tutoriel est disponible sur mon nouveau blog (lien direct). Afin d’eviter le duplicate content je vais tronquer une partie de l’article…

Posted in tutoriel, web 2.0 | Tagué: , , , , , , , , | 26 Comments »

[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (1/2)

Posted by Guiral antoine sur février 24, 2008

Ce tutoriel est disponible sur mon nouveau blog : http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/

Posted in tutoriel, web 2.0 | Tagué: , , , , , , , , , , | 13 Comments »

De la bonne utilisation des tableaux

Posted by Guiral antoine sur janvier 31, 2008

C’est un débat qui revient souvent sur les différents forums : tableau vs div. Pour ma part ce débat n’a pas lieu d’être… Nous allons voir pourquoi.

Je viens d’avoir une surprise en rédigeant ce billet…Les divs existent depuis HTML 3.2 (1995) et CSS 1 depuis 1996. Et oui je ne le savais pas…faut dire que je n’avais que 10 ans pour la sortie de CSS1! Je vous laisse calculer mon âge pour la sortie d’ HTML 3.2 :p.

Donc pour ceux qui ne le savaient pas (comme moi…) l’origine du « battle » n’est pas due à un oubli du w3c dans les spécifs d’HTML et de CSS. Bon si ce n’est pas le langage il nous reste…les développeurs (vous et moi quoi même si il y a dix ans le web était un peu moins ouvert…) et les navigateurs. A qui la faute? Eh bien sûrement un peu aux deux. Mais pas forcement en même temps.

Tableau Vs DIV

  • La guerre des navigateur

              1) Le commencement…

En cette fin de millénaire un guerre faisait rage sur la planète w3dot…Le seigneur netscape menait la rébellion face au tyran puissant internet explorer. Les batailles avaient lieux aux quatre coins du monde. Netscape en gagna beaucoup mais ne fût jamais en mesure de faire plier IE (aka internet explorer). Comment netscape arrivait il à s’infiltrer sur les terre de son rival? En respectant au maximum les règles du dieu W3C. Ce dieu étant jeune, les deux seigneurs de guerre se proclamèrent dieux vivant et reprirent à leurs compte ses lois. Netscape était plutôt fidèle au W3C tandis que IE n’en faisait qu’à sa tête…Comme un surfeur sachant surfer doit savoir surfer sans son surf, ils devaient s’adapter aux deux navigateurs qui régissaient les eaux de w3dot, et devaient trouver un outils leurs permettant de faire ce qu’ils voulaient aussi bien sur les eaux de netscape que sur celle du terrible puissant tyran ?????? (mettez ce que vous voulez ici) IE. La solution qu’ils trouvèrent fût : les tableaux.

              2) Le roi est mort, vive le roi

Cette guerre était faite pour durer. Les timestamps défilaient, jusqu’au jour où netscape fit une alliance avec le seigneur AOL. Ce dernier ne pensait qu’à s’enrichir. Les eaux de W3dot connurent une période plus calme au dépend des avancées technologique. En effet IE ne craignait plus grand chose d’un netscape moribond. Sauf que le village mozilla et ses irréductibles surfeurs ne pouvaient se satisfaire de cela. Et leur chef du nom de FireFox mena une nouvelle rébellion!Son cheval de bataille fut celui de nescape à la grande époque : être meilleur prophète du W3C que ne l’était IE. Les créateurs de surf se convertirent massivement. IE n’avait qu’à bien se tenir et devait réagir très rapidement. Il renouvela son armée pour la 7ème et 8ème fois très rapidement. Nous vivions l’aube d’une nouvelle ère.

IE vs FF

  • Et dieu créa l’accessibilité

              1) C’est la lutte…

Les surfeurs subissaient la guerre depuis ses débuts. ils devaient s’adapter, évoluer, apprendre constamment. Et ce, uniquement pour répondre aux exigence de leurs dieux vivants. Mais ils étaient de plus en plus nombreux. Et les différences entre eux se multipliaient au même rythme que W3dot se polluait. Cela nécessitait des efforts supplémentaire mais indispensable pour que la cohabitation entre surfeurs soit conservé. Les accords de Sémantique et d’Accessibilité étaient signés. W3dot allait elle être sauvée?

              2) Tous pour un, chacun ma gueule

C’était sans compter sur les surfeurs conservateurs. Ceux qui quelques années auparavant avaient construit leur réputations grâce aux tableaux. Les tableaux étaient la base de leur activité…Or les accords de S&A étaient clair : les tableaux ne doivent être utilisés QUE pour les données tabulaires. Toutes autre utilisations est à proscrire, il ne fallait plus compter décorer sa planche avec un tableau : les divs étaient la pour nous simplifier la vie. Une guerre civile éclata…D’un coté les conservateurs et leurs tableaux non conforme avec les accords S&A et de l’autre les « Amis de W3dot » qui prônaient les nouvelles règles.

Accessibilité

FIN

Bon je vais résumer mon point de vue : au début il n’était pas possible de coder pour tout les navigateurs avec des divs. Les tableaux étaient donc indispensables. Cependant avec les dernières générations il est possible de coder propre et sémantiques. Parfois en rusant un peu pour faire correspondre certain détails entre IE et FF mais C’EST POSSIBLE. Or on voit trop souvent des codes utilisant des tableaux pour autres choses que des données tabulaires (traditionnellement du design). La limite entre données tabulaires ou non peut varier un peu à mon avis. Mais on ne construit pas un design avec des tableaux. Cela ne signifie rien sémantiquement parlant et ce n’est pas accessible. Pensez à un lecteur d’écran qui va devoir lire vos 15 tableaux imbriqués… Et si ces deux arguments ne vous conviennent pas pensez à la maintenabilité de votre code…Bref, même si cela peut vous demander un petit effort au début vous gagnerez en productivité (il paraît qu’il n’y a plus que ça qui compte aujourd’hui) mais aussi en accessibilité.

Pour en parler j’ai créé un groupe facebook : « les tableaux pour les données tabulaires ». Rejoignez nous!

Si vous voyez des phottes fautes, ou si (et surtout) si vous souhaitez réagir surtout n’hésitez pas! Un blog c’est avant tout un endroit pour partager et réagir.

PS : cette histoire n’a aucune connotation religieuse dans la vraie vie!! Bref pas de sujet polémique la dessus quoi lol

Posted in aide mémoire, Ma vision | Tagué: , , , | 2 Comments »

Nouveau projet : gestion d’une équipe de rugby

Posted by Guiral antoine sur janvier 26, 2008

Je commence un nouveau projet! En plus de ceux en cours…mon cv, ma seconde version de gestion de cave à vin en ligne, ce blog enfin bref des journées à rallonges quoi! Cependant cela va me permettre d’expliquer au fur et à mesure comment j’organise mon travail. Ça pourra peut être vous servir ou peut être aurez vous des suggestions à me faire!

Ce sera l’occasion pour moi de faire quelques tutoriel sur ma façon de faire de l’ajax, ou sur les drag’n drop avec JQuery. Plein de choses intéressantes!

  • Le projet Gest’XV

L’origine du projet est simple : je joue au rugby et comme je suis capitaine il m’arrive d’assister à la composition des équipes. Et quelle fût ma surprise en voyant que ces composition étaient faites sur excel. Donc pas très pratiques pour faire des stats sur les différents matchs ou encore quand il s’agit de retaper les noms des joueurs. J’ai donc proposer à mon coach de lui faire un outil qui lui permettra de créer ses feuilles de matchs très rapidement. Après quelques discussions d’autres besoins sont apparus : présence aux entraînements, fiche de joueur détaillé, historique des temps de jeu, plusieurs « rôles » au niveau de l’administration afin de pouvoir déléguer certaines tâches…Bref un projet relativement complet et intéressant.

J’ai réalisé un premier jet sur la composition de l’équipe. J’ai utilisé JQuery pour faire les drag’n drop et je vous expliquerais très prochainement comment j’ai fait.

  • Comment?

Pour réaliser Gest’XV (oui c’est le ptit nom que je lui donne pour le moment lol) je vais utiliser XHTML 1.1, PHP, MySQL, Javascript avec JQuery et les CSS. Je vais essayer de créer un design sympa avec photoshop. MEs objectifs sont presque tout le temps les mêmes quand je commence un projet : aller vite, faire du code valide, faire du code maintenable et apprendre des technologies (par exemple faire de l’ajax avec JQuery j’ai jamais fait :D). Je reviendrais sur le XHTML 1.1 parce que HTML 5 vient de sortir et j’aurais pu faire ce choix là.

  • Conclusion

Tout ça pour exprimer mon enthousiasme!  C’est mon premier projet qui associe mes 2 passions : le rugby et le développement web. Je vous ferais suivre l’évolution du site ! N’hésitez surtout pas à me faire des suggestions d’améliorations!

Vous aussi vous avez des projets en cours? Je serais ravi d’en parler sur ce blog! A bientôt!

Posted in découverte, projet | Tagué: , , , , , , , , , , , , , | Leave a Comment »