La faute aux navigateurs bien sûr. Seules les dernières versions intègrent les propriétés de ces 2 nouvelles normes.

FindMeByIP liste donc les propriétés HTML5 et CSS3 et précise si elles sont interprétées par les principaux navigateurs du marché (et leurs principales versions) et ce sur les plateformes MAC et Windows :

Ce qui donne par exemple pour quelques propriétés CSS3:

et pour le HTML5 :

Y’a du progrès… à faire.

Lien :

• CSS3 and HTML5 on findmebyip.com

Un effet « Bubble ».

Rien que le nom ça vous donne envie non ?

Mais ce nom se cache un simple effet qui vous permet de faire apparaitre un message (ou autre chose) au survol d’un lien.

Le tutorial est simple mais utilise jQuery donc ça me plait

La mécanique :

A l’interieur de la balise lien <a>, on place un bloc (ici un <em>) qui par défaut est caché (ie en display:none;)

En javascript, on détecte le survol de ce lien et on fait apparaitre cette balise.

Lien :

• Create a jQuery Popup Bubble

Un formulaire commence tout d’abord par sa structure XHTML.

Les différentes points importants à noter ici sont :

• la propriété tabindex sur les différents éléments de saisie qui permet une navigation contrôlable par le clavier et ceci respectant un ordre « logique »,
• voir même la propriété accesskey sur le premier élément afin de favoriser une navigation par clavier.
• la propriété for sur les labels qui permet de donner un intitulé sur l’élément de saisie dont il fait référence avec en plus l’interaction suivante : un clic sur le label donne le focus sur l’élément en question.
• n’hésitez pas à utiliser la balise fieldset afin de regrouper une partie des éléments formulaire pour une meilleure compréhension de celui-ci

Ce qui donne :

<form action="" id="form-id" method="post">
    <fieldset>
        <legend>Informations</legend>
        <p>
            <label for="nom" accesskey="n">Nom <sup>(obligatoire)</sup> :</label>
            <input class="text" id="nom" name="nom" tabindex="1" type="text" value="" />
        </p>
        <p>
            <label for="prenom">Prénom <sup>(obligatoire)</sup> :</label>
            <input class="text" id="prenom" name="prenom" tabindex="2" type="text" value="" />
        </p>
        <p>
            <label for="email">Email :</label>
            <input class="text" id="email" name="email" tabindex="3" type="text" value="" />
        </p>
    </fieldset>

    <fieldset>
        <legend>Message</legend>
        <p>
            <label for="message">Message <sup>(obligatoire)</sup> :</label>
            <textarea cols="20" id="message" name="message" rows="5" tabindex="4"></textarea>
        </p>
    </fieldset>

    <div>
        <input class="submit" tabindex="5" type="submit" value="Valider" />
    </div>
</form>

Nos zones de saisie sont donc correctement liées à nos labels. Et Il est possible d’accéder au premier élément du formulaire à l’aide de la touche « n » du clavier et de naviger par la suite grâce aux différents tabindex.

Cependant, attention à l’écriture des balises !

Par exemple pour un élement de type radio sur lequel vous voulez qu’elle soit coché par défaut, préféré l’écriture :

<input checked="checked" name="choix" type="radio" value="1" />

à

<input checked name="choix" type="radio" value="1" />

Un formulaire accessible de par son traitement

Un bon formulaire est un formulaire vérifié 2 fois

L’explication la voici :

Le formulaire est bien évidemment vérifié côté serveur (en PHP) :

if( isset( $_POST["nom"] ) && isset( $_POST["prenom"] ) && isset( $_POST["email"] ) && isset( $_POST["message"] ) )
{
    // ok les 3 élements de formulaire ont été envoyé

    $nom = trim($_POST["nom"]);
    $prenom = trim($_POST["prenom"]);
    $email = trim($_POST["email"]);
    $message = trim($_POST["message"]);

    if( !empty( $nom ) && !empty( $prenom ) && !empty( $message) )
    {
        // ok les champs obligatoires ont été remplis
        // ...
    }
}

Mais il devrait également être vérifié côté client (autrement dit en javascript)

Pour ce faire, je vous renvoi ici à l’article Vérification de formulaire avec jQuery.

• dans la barre d’adresse à coté de votre URL,
• dans vos favoris
• dans les onglets

Les formats d’images généralement utilisés sont :

• ico
• gif
• png

Pour intégrer votre favicon dans votre page HTML, c’est entre les balises <head>…</head> que ça se passe avec cette ligne :

<link href="/path_to_favicon/favicon.png" rel="icon" type="image/png" />

Des précisions supplémentaires sont à apporter :

• Internet Explorer (6 et 7) ne reconnaît que les formats ICO
• Certains navigateurs modernes (Firefox, Google Chrome, …) vont utiliser par défaut un fichier favicon.ico présent à la racine du site, et ce sans présence du code HTML préciser ci-dessus.
  

Source :

• howto-favicon sur w3.org

Des générateurs en ligne :

• favicon.cc
• html-kit.com/favicon/
• pagerankhotel.com/generateur_favicon.php
• revue-hebergement-web.com/generateur-favicon/

Accessibilité :

L’accessibilité du Web est la problématique de l’accès aux services et contenus en ligne pour les handicapés et les seniors.

Source : Wikipédia.

Voici ci-dessous une liste (certes succincte) de quelques règles de bonnes pratiques de développement web permettant de réaliser des sites web « accessibles ».

• Utiliser la propriété alt (alternative textuelle) sur les images (surtout sur les images porteuse d’information),
• Utiliser la propriété tabindex (sur les liens mais surtout sur les éléments de formulaire) afin de permettre une navigation contrôlable par le clavier. Et ceci respectant un ordre « logique »,
• Permettre le redimensionnement du texte en utilisant des unités relatives (em),
• Le contenu de vos pages web restent-elles présentes lorsque l’on désactive les feuilles de style CSS ?,
• …

Cette liste est bien sur non exhaustive. Je vous invite à consulter le site d’accessiweb et notamment ses fiches pratiques.

Liens :

• accessiweb.org,
• Guide accessiweb.