Dator Blog

Aujourd’hui je vous propose une liste des éléments non valide au W3C. Lorsque nous réalisons un site web, il est intéressant d’utiliser les éléments valides et non pas les éléments déprécié ou qui sont en prévu à être déprécié !

Attributs proposés à être déprécié :

body[background], table[background], td[background], th[background],
input[border], table[border]
table[cellpadding],
table[cellspacing],
object[codebase],
img[height], object[height], table[height],
a[name], form[name], img[name], object[name],
a[target], area[target],
td[valign], th[valign],
img[width], object[width], table[width]

Attributs dépréciés

applet[align], caption[align], div[align], h1[align], h2[align], h3[align], h4[align], h5[align], h6[align], hr[align], iframe[align], img[align], input[align], legend[align], object[align], p[align], table[align],
body[alink],
applet[alt],
applet[archive],
body[background],
body[bgcolor], td[bgcolor], tr[bgcolor], table[bgcolor],
img[border], object[border],
br[clear],
applet[code],
applet[codebase],
basefont[color], font[color],
dir[compact], dl[compact], menu[compact], ol[compact], ul[compact],
basefont[face], font[face],
applet[height], td[height], th[height],
applet[hspace], img[hspace], object[hspace],
script[language],
body[link],
applet[name],
hr[noshade],
td[nowrap], th[nowrap],
applet[object],
isindex[prompt],
hr[size], font[size], basefont[size],
ol[start],
body[text],
li[type], ol[type], ul[type],
html[version],
body[vlink],
li[value],
applet[vspace], img[vspace], object[vspace],
hr[width], td[width], th[width], applet[width], pre[width]

Attributs ne faisant plus partie de la norme W3C

body[bgproperties],
*[bordercolor], *[bordercolordark], *[bordercolorlight],
body[topmargin], body[rightmargin], body[bottommargin], body[leftmargin],
table[frame]

Éléments proposés à être dépréciés

input[type="button"], input[type="reset"], input[type="submit"], tt, big, small

Éléments dépréciés

applet, basefont, center, dir, font, isindex, menu, s, strike, u,
listing, plaintext, xmp

Eléments bannis du W3C

audioscope, bgsound, blink, bq, comment, embed, fn, ilayer, /*image,*/ keygen, layer, limittext, marquee, multicol, nobr, noembed, nolayer, nosmartquotes, rt, ruby, server, sidebar, spacer, wbr, xml, blackface, shadow

Eléments dépréciés à la validation W3C XHTML 1.0 Strict

a[name], applet[name], form[name], frame[name], iframe[name], img[name], map[name]

Interdictions de l'XHTML 1.0 Strict

a > a,
pre > img, pre > object, pre > big, pre > small, pre > sub, pre > sup,
button > input, button > select, button > textarea, button > label, button > button, button > form, button > fieldset, button > iframe, button > isindex,
label > label,
form > form

Si tu as apprécié l'article, tu peux rejoindre le groupe sur Google Code !

• 7 commentaires

Le premier screencast de Dator.fr est arrivé ! Je vais vous expliquer comment utiliser Prototype, Scriptaculous, PHP et une base de données pour réaliser un moteur de recherche en Ajax !

Tout est expliqué dans la vidéo que je viens de finir, je vous explique comment paramétrer le javascript afin de pouvoir envoyer des requêtes AJAX.

La vidéo est ici !

Je vous laisse me dire si ce screencast est réussi … ou pas. Si vous préférez les tutoriaux écrits plutôt que vidéos ? enfin tout ce que vous voulez !

Bonne vidéo et bon développement à tous !

• 21 commentaires

Mardi 22 janvier le W3C (World Wide Web Consortium) a publié un working draft sur les nouveautés apportées par cette nouvelle mouture HTML que vous pouvez trouvé ici : http://www.w3.org/html/wg/html5/.

Lors de la conférence Paris Web, en novembre dernier, Daniel Glazman, écrivain de plusieurs livre sur les conventions xHTML et CSS (une référence dans le monde du développement), nous explique avec un certain humour les différentes étapes du HTML (et en parallèle le xHTML). Il nous explique en plus comment le xHTML est entrain de couler . Je vous conseille de voir cette vidéo très intéressante si vous êtes passionné par la réalisation de page internet
Revenons a nos moutons, voici les nouveautés tant attendu par ce HTML 5.0 !

• La balise section : délimite la structure d’un document et peut s’utiliser avec les balises h1 à h6.
• La balise article : délimite un élément indépendant du document (article etc …)
• La balise aside : délimite un contenu contextuel au document.
• La balise header : délimite l’en-tête d’un document. (enfin !)
• La balise footer : délimite le pied d’un document. (enfin !)
• La balise nav : délimite les éléments de navigation du document.
• La balise dialog : délimite un dialogue avec les balises dt et dd.
• La balise figure : délimite un contenu média avec sa légende et son titre par exemple.
• Les balises audio et video : permettent d’ouvrir un format de média avec les programmes par défaut de l’utilisateur.(on va voir de la musique sur tout les sites..super)
• La balise embed : sert à insérer un contenu provenant d’un plugin.(enfin normalisée !)
• La balise m : délimite un texte marqué.(encore flou au yeux du W3C)
• La balise meter : indique une mesure (métrique, informatique, etc.).
• La balise time : indique une date ou une indication de temps.
• La balise canvas : affiche un graphique dynamique (existe déjà sous Firefox).
• La balise command : indique une commande que l’utilisateur peut appeller.
• La balise datagrid : représente une arborescence ou des données tabulaires(enfin!)
• La balise details : affiche une information ou des contrôles que l’utilisateur peut actionner à la demande (comme en javascript avec le plus et le moins).
• Les balises datatemplate, rule et nest : permettent une utilisation de gabarits(templates).
• La balise event-source : capte les évenements de l’utilisateur.
• La balise output : affiche une valeur de sortie (total, somme, résultat, etc …)
• La balise progress : affiche une barre de progression (dont les attributs sont encore un peu flou).

A mon avis, le HTML 5.0 va vraiment être un plus ,dans une approche sémantique, du développement de page web.

• 0 commentaire

Voici une question que je me suis toujours posé : Comment savoir si la personne a le javascript activé sur son navigateur ?

Aujourd’hui, en farfouillant dans les balises HTML que mon éditeur de code me propose, je suis tombé sur la balise noscript et elle correspond parfaitement à mes (vos) attentes.

En effet, cette simple balise html permet de contenir du code (x)HTML qui ne sera vu que si l’internaute utilise un navigateur ne prenant pas en charge le javascript . Pas mal non?

Encore plus fort, vous voulez rediriger la personne qui n’a pas de javascript sur son navigateur (ouh !!) sur une page internet l’informant que son navigateur est corrompu . Rien de plus simple, il suffit de mettre ce petit bout de code dans les balises noscript :

Néanmoins ce système n’est pas valide xHTML. Pour qu’il soit valide, il faut déclarer la balise <noscript> dans le body et par exemple afficher un paragraphe qui précise que votre site fonctionne avec du javascript.

Et voila !

• 6 commentaires

Je pense que vous avez le même soucis que moi … comment faire des conteneurs CSS avec les coins arrondis ? non ?

Bon si c’est oui ! J’ai la solution ! Et la solution c’est la propriété moz !

Voici les propriétées CSS :

#content{
 	-moz-border-radius-topright: 20px;
 	-moz-border-radius-bottomright: 20px;
 	-moz-border-radius-bottomleft: 20px;
 	-moz-border-radius-topleft: 20px;
 	width:100px;
 	background-color:#FDD99B;
 	border-color:#D9BB7A;
 	border-style:solid;
 	border-width:1px 5px 5px 1px;
 	padding:1ex 1ex 1ex 1ex;
 	text-align:justify;
 	vertical-align:middle;
 }

Télécharger la source

Et voila, un joli petit effet à la Ubuntu !

Attention cette propriété est uniquement compatible avec Firefox (ou autre navigateur qui respecte les normes w3c )

• 5 commentaires

Un article retrouvé de mon ancien blog.

Bon, je viens de me rendre compte qu’une propriété CSS nommée focus existait … je sais je suis en retard mais bon mais je me suis souvent demandé comment faisait certains sites pour changer le style de leurs balises CSS au moment ou le focus etait dessus…

input:focus, select:focus, textarea:focus

Même pas besoin de javascript ! Tout ce fait tout seul ! MAGIE

Exemple

Style.css

 input, select, textarea {
        border-top:1px solid #666;
        border-left:1px solid #666;
        border-bottom:1px solid #ccc;
        border-right:1px solid #ccc;
}
input:focus, select:focus, textarea:focus {
        background-color: #cddefd;
        border:1px solid #248;
         color:#000;
}

Télécharger la source

Et voila !
Si c’est pas beau ça !

• 2 commentaires