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

Facebox est une autre plugin pour jQuery de type Lightbox qui permet d’afficher vos images, du HTML pur ou du HTML récupéré par Ajax. Facebox est enfaite l’implémentation de la boite modale présente sur Facebook et je l’a trouve très réussi !

Vous pouvez la télécharger ici et voir des petites démonstrations sur cette page.

• 4 commentaires

Parfois, on se demande pourquoi on a des marges sur des conteneurs CSS.

Pour régler ce problème il existe un fichier CSS nommé reset qui permet d’avoir une page complètement vierge en CSS.

Il suffit de créer un fichier CSS nommé reset.css et de mettre ces propriétés suivant :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Pour conclure, un reset CSS n’est pas une solution en soit dans la conception de ces CSS mais juste une petit plus dans le commencement de ses styles.

• 0 commentaire

Bonjour à tous !

Le second screencast de Dator.fr est déjà là ! Grâce à celui-ci vous aller apprendre à créer une pagination en ajax en utilisant Prototype, PHP, SQL et Ajax !

La vidéo se trouve ici

N’hesitez pas à me dire ce que vous en pensez et surtout me dire si vous n’avez pas compris quelque chose, les commentaires sont la !

Bon « visionnage»  de vidéos !

PS : Je crois que le son n’est pas super bon…

Edit : Voici les sources complètes

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