Quelques liens utiles

[Asumbaa]

Webmasters débutants ou confirmés, néophytes perdus dans des ressources de tous âges, ci-dessous sont recensées des ressources de référence pour vous aider.
Ceci est un récapitulatif d'un précédent sujet ; merci à Benoît qui l'avait initié et à Omnisilver qui avait rafraîchi et organisé le tout.

N'hésitez pas à proposer vos liens à la suite !


Spécifications

• Toutes les traductions françaises des spécifications du W3C dont CSS 2 et (X)HTML.
• Cascading Style Sheets : L'ensemble des propriétés CSS décrites par mediabox.

Sites proposant des articles de qualité concernant le (X)HTML et les CSS

• Openweb, site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C.
• Alsacréations, communauté dédiée à la conception web aux normes, et notamment aux standards W3C, aux feuilles de style CSS, aux langages HTML et XHTML, ainsi qu'à l'accessibilité du Web en général.
• Pompage-CSS, qui traduit les articles anglophones traitant des CSS afin d'établir une base de connaissances conséquente en français.
• Tutoriels de l'Opera Web Standards Curriculum (en anglais)
• A List Apart, avec deux grands articles chaque mois (en anglais) sur les métiers du Web.

Tutoriaux pour apprendre le XHTML et les CSS

• Tutoriel XHTML et introduction des CSS à la fois simple et clair. Recommandé pour débuter.
• Pour les débutants toujours, deux cours très complets pour HTML et CSS
• Apprenez à créer votre site web ! sur le site des zéros. Sa devise : Ici, on apprend tout, à partir de zéro ...
• CSS débutant sur mammouthland.
• CSS : Premiers pas : Introduction aux CSS et exemples de fonctionnalités CSS fonctionnant sous Mozilla (mais pas forcément supportées par tous les navigateurs).
• CSS : on reprend tout à zéro ! : un tutorial en 15 articles reprenant point par point tout ce qu'il faut savoir sur les CSS, et comment les utiliser.
• Tutoriel feuilles de styles de Webmaster-Hub
• SELFHTML, un site pour faire vos pages HTML tout seul
• HTML Dog (en), des guides HTML (attention, ils mélangent HTML et XHTML sans en avoir l'air) et CSS pour divers niveaux et des références des balises HTML et propriétés CSS
• Ressources sur l'accessibilité (fr).

Ressources plus pointues

• Opquast, qui propose une liste de bonnes pratiques et les outils nécessaires pour évaluer vos sites et les faire progresser.
• Zone Webmasters
• Position is Everything : pour aller plus loin en CSS et comprendre les différences de rendus suivant les navigateurs.
• QuirksMode (en) recense un bon nombre de bug des divers navigateurs du marché, et pas mal d'autres choses intéressantes et pas forcément très connues (mais l'auteur semble tout de même ignorer pas mal de choses...)
• Web browser standards support (en) : une page recensant le support des standards par différents navigateurs actuels. Tout est recensé, HTML, XHTML, CSS 2 et 3... un outil à utiliser sans modération !
• CSS browser support recence les sélecteurs et propriétés CSS et leur support par divers navigateurs du marché (attention, ce n'est pas 100% à jour, et la liste est un peu tolérante sur le "buggué", on en arriverait par exemple à croire que IE supporte très bien le "height" ce qui est faux) mais c'est déjà une bonne idée)
• Float, clear et contextes de formatage
• Cours de manipulation du DOM et DHTML
• Comprendre Unicode et les jeux de caractères
• Manuel PHP

Validateurs

• Validateur W3C (en) : En ligne, par upload, dans une zone de saisie
• Validateur schneegans (en) : En ligne, par upload, dans une zone de saisie
• Validateur WDG (fr) : En ligne, par lots, par upload, dans une zone de saisie (Seule l'interface est en français, pas les commentaires)
• Validateur validome (fr) : En ligne ou par upload
• Validateur yansanmo (fr) : En ligne, par upload, dans une zone de saisie : C'est une reprise intégrale du validateur W3C mais en PHP et en français. Il est basé sur les mêmes tables d'erreurs, mais en plus, il permet un certain nombre de choses que le validateur W3C ne permet pas, comme par exemple de trier les erreurs d'une page par types d'erreurs.
• Validateur HTML/XHTML du W3Québec (fr) : En ligne, par upload, dans une zone de saisie
• Validateur W3C Multipages (fr) : permet de valider un site web entier d'un seul coup.
• Validateur CSS du W3C
• Validateur CSS du WDG
• Validateur d'hyperliens du W3C (en)
• Validateur d'hyperliens du WDG (en)
• Vérification des règles d'accessibilité (fr)

Outils pour Firefox

• Webdevelopper : une extension rajoutant une barre d'outil proposant de nombreuses fonctionnalités comme la désactivation des CSS, du cache, des cookies, la validation des liens, des CSS, du HTML (passe par les validateurs du W3C), ... À noter que cette barre prenant de la place, il suffit d'ajouter le bouton WebDevelopper dans la barre d'outil et de cliquer dessus pour la faire apparaître/disparaître, ou d'utiliser le menu contextuel.
• HTML validator : une extension pour Firefox permettant de vérifier la validité des pages HTML visitées. Cette vérification est faite en local par l'extension.
• LinkChecker : permet de vérifier la validité des liens de la page (via clic droit > Vérifier les liens de la page ou un bouton à rajouter dans la barre d'outils).
• Firebug, extension ultra-complète pour décortiquer vos pages et leurs éventuels bugs
• Console² pour une meilleure lisibilité de la console Javascript de Firefox
• Colour Contrats Analyzer, une extension pour évaluer les contrastes de couleurs sur un site.
• WCAG Contrast Checker, une extension qui permet de tester les contrastes d'une page selon les critères d'accessibilité
• Colorzilla, une extension permettant de récupérer les codes des couleurs d'une page et de mesurer des distances en pixels
• Live HTTP Headers, pour connaître les entêtes HTTP envoyées par votre serveur
• Rainbow Color Tools, une boîte à outils pour les couleurs

Listes et groupes de discussions

• La liste pompeurs-CSS permet de discuter de tous les sujets touchant à la publication sur le web

Ils l'ont (bien) fait pour vous

• Dotclear, logiciel libre de publication (moteur de blog)
• Wordpress, logiciel libre de publication (moteur de blog) et le logiciel de forum associé
• CMS Made Simple, outil de gestion de contenu
• Joomla, outil de gestion de contenu
• Drupal, outil de gestion de contenu
• PunBB, un logiciel de forums respectant les standards
• FluxBB, fork de PunBB
• Formulaire sécurisé d'envoi de mails

Divers

• Browser Shots, pour vérifier le rendu de vos pages dans différents navigateurs
• Multiple IEs, pour avoir plusieurs versions d'IE et pouvoir tester vos sites.
• Réseau d’Hébergeurs Indépendants et ENgagés
• Smush It, pour optimiser vos images.
• Vous trouverez une liste importante de ressources francophones et anglophones sur les CSS dans ce message, rédigé par l'auteur du livre CSS2 Pratique du design web.
• Page de ressources de validation de dmoz
• Page de ressources de validation du WDG
• Outils de développement de UITest

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Portable Firefox/3.0.6

[Asumbaa]

À la suite de ces liens utiles, voici quelques pistes pour reconnaître, ce coup-ci, une mauvaise ressource :

• HTML : ne pas faire confiance à un site détaillant les éléments dépréciés ou propriétaires (font, center, big, small, bgsound, etc)
• CSS : ne pas faire confiance à un site suggérant des tonnes de hacks pour gérer les différents navigateurs
• Javascript : ne pas faire confiance à un script qui commence par détecter le navigateur
• Javascript : ne pas faire confiance à un script dans lequel traînent soit plein de document.all soit plein de document.layers (ils datent de la première guerre des navigateurs, quand IE affrontait Netscape, soit la fin du XXème siècle)

[pascale-mammouthland]

Bonjour Asumbaa,

Je suis très honorée de voir mon site (CSS Débutant -Mammouthland) figurer dans cette liste de sites de référence
Merci !

Cela dit, une petite erreur d'url : il n'est plus hébergé par free, l'adresse est donc http://css.mammouthland.net/ . Il y a une redirection, mais elle ne sera pas éternelle...
D'autre part, pour la liste de discussion pompeurs-CSS, même remarque que précédemment, d'autant qu'il est peut-être judicieux de mettre directement l'adresse de yahoo : http://fr.groups.yahoo.com/group/pompeurs/

Voilà, merci encore !

(il n'est sans doute pas utile de laisser ce message après que les corrections aient été effectuées...)


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

[pascale-mammouthland]

Ah oui, et une autre suggestion aussi : http://fr.html.net/, qui a été traduit par JJ Solari, un traducteur de spec. du W3C (les normes CSS2 entre autres...)

Parfait pour des grands débutants.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

[Asumbaa]

Salut,

Bonjour Asumbaa,

Je suis très honorée de voir mon site (CSS Débutant -Mammouthland) figurer dans cette liste de sites de référence
Merci !

Ce n'est pas moi qu'il faut remercier, j'ai repris un topic existant

Cela dit, une petite erreur d'url : il n'est plus hébergé par free, l'adresse est donc http://css.mammouthland.net/ . Il y a une redirection, mais elle ne sera pas éternelle...
D'autre part, pour la liste de discussion pompeurs-CSS, même remarque que précédemment, d'autant qu'il est peut-être judicieux de mettre directement l'adresse de yahoo : http://fr.groups.yahoo.com/group/pompeurs/

C'est corrigé pour les deux, merci beaucoup.

Ah oui, et une autre suggestion aussi : http://fr.html.net/, qui a été traduit par JJ Solari, un traducteur de spec. du W3C (les normes CSS2 entre autres...)
Parfait pour des grands débutants.

Ajouté !

Merci à toi pour cet apport

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Portable Firefox/3.0.6

[teoli2003]

Firebug a un système d'extensions. En voici une qui peut être très utile:

FirefontFamily, qui met en évidence la police sélectionnée. Plus de détails: http://harthur.wordpress.com/2010/03/28 ... r-firebug/

[teoli2003]

Une autre extension pour développement web qui n'est pas listé dans le message initial: Rainbow, pratique pour les couleurs. (Assez similaire à l'antique Colorzilla qu'il a remplacé chez moi)

[Bobe]

suggestion : ajouter fluxbb dans la section "Ils l'ont (bien) fait pour vous" (voir même retirer punbb, mais j'ai pas trop suivi les dissensions qui ont amené au fork)

edit : ouh, l’extension rainbow, c’est très pratique ce truc ! hop hop, installé.

[Asumbaa]

suggestion : ajouter fluxbb dans la section "Ils l'ont (bien) fait pour vous" (voir même retirer punbb, mais j'ai pas trop suivi les dissensions qui ont amené au fork)

PunBB appartient désormais à Informer mais reste sous licence GPL, à ce que j'ai vu.
Mais on peut ajouter FluxBB en effet, d'autant que le lien "PunBB" plus haut renvoie sur le site de FluxBB ^^
Je mets à jour.

[calimo]

En recherchant le meilleur équivalent au clavier de onclick pour exécuter une action sur un lien (onkeypress, onkeydown, ou encore un autre?), je suis tombé sur le site WebAIM (Web Accessibility In Mind) qui présente des articles sur l'accessibilité. Ils sont très bien faits, clairs et exemplifiés. On trouve une traduction de tous ces documents sur ideose.eu Je ne peux qu'en recommander la lecture à tous !

Revenant à ma question, j'ai découvert que l'évènement onclick est exécuté si l'on suit un lien, même au clavier !

[Asumbaa]

Revenant à ma question, j'ai découvert que l'évènement onclick est exécuté si l'on suit un lien, même au clavier !

Ben oui
Sur les éléments de formulaires idem (enfin, les boutons)
C'est précisément pour cela qu'il faut toujours placer des interactions sur des éléments faits pour ça : les liens et les boutons.

[amdec]

Excellent merci bcp pour ce travail fourni.

[Pop-up]

Une petite suggestion :
Même si la qualité n'est pas extraordinaire, le site du zéro offre une première vue agréable pour les débutants, que ce soit en Php ou en Xhtml.
Non ?

[Asumbaa]

Tout à fait, il est d'ailleurs référencé Dans la partie Tutoriaux pour apprendre le XHTML et les CSS

[goldynet]

Tous les liens ne marche pas ? est-ce possible de faire une mise à jour ?
Votre Navigateur : Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:50.0) Gecko/20100101 Firefox/50.0