Suite a l'article d'hier sur les nouveautés du HTML 5, nous allons passer en revue les balises et les attributs qui ont subit des changement plus ou moins radical et ceux qui ont totalement disparu.

Certes pour les adeptes de la validation au W3C il va falloir attendre pour modifier les doctypes mais les résultats obtenu en valent la peine.

Plusieurs attributs de HTML 4 s'appliquent maintenant à tous les éléments. Ils sont appelés attributs globaux : class, dir, id, lang, style, tabindex et title.

Il y a aussi plusieurs nouveaux attributs globaux :

• L'attribut contenteditable indique que l'élement est une zone éditable. L'utilisateur peut en changer le contenu et manipuler le balisage.
• L'attribut contextmenu peut être utilisé pour pointer un menu contextuel fourni par l'éditeur.
• L'attribut draggable peut être utilisé conjointement avec la nouvelle API « glisser-déposer ».
• L'attribut irrelevant indique qu'un élément n'est pas encore, ou n'est plus, pertinent.
• Les attributs globaux ref, registrationmark et template sont complémentaires de la fonctionnalité de gabarit de données.
• La collection d'attributs data-* définis par l'éditeur. Les éditeurs peuvent définir tous les attributs qu'ils veulent tant qu'ils les préfixent avec data- pour éviter des conflits avec de futures versions de HTML. La seule obligation pour ces attributs est qu'ils ne soient pas utilisés pour des extensions d'agent utilisateur.

Ce qui suit, ce sont les attributs pour le modèle de répétition. Ce sont des attributs globaux et, en tant que tels, peuvent être utilisés sur tous les éléments HTML, ou sur tout élément dans tout autre espace de nom, dont les attributs sont dans l'espace de nom http://www.w3.org/1999/xhtml :

• repeat
• repeat-start
• repeat-min
• repeat-max

HTML 5 fait aussi de tous les attributs gestionnaires d'événements de HTML 4 qui prennent la forme onnom de l'événement des attributs globaux et en ajoute plusieurs nouveaux pour de nouveaux événements qu'il définit, tels que l'attribut onmessage, qui peut être utilisé avec le nouvel élément event-source et l'API de messagerie de documents multiples.

Balises mises à jour

Ces éléments ont une signification légèrement modifiée en HTML 5 pour mieux refléter la manière dont ils sont utilisés sur le Web ou pour les rendre plus utiles :

• L'élément a sans attribut href représente maintenant un « lien fictif ».

• L'élément address est maintenant porté par le nouveau concept de sectionnement.

• L'élément b représente maintenant une portée de texte à déporter stylistiquement de la prose normale sans transmettre d'importance en plus, telle que les mots clés dans un résumé de document, des noms de produits dans un article, ou d'autres portées de texte dont la présentation typographique typique est en gras.

• L'élément hr représente maintenant une coupure thématique au niveau du paragraphe.

• L'élément i représente maintenant une portée de texte dans une voix ou un mode alterné, ou à défaut déportée de la prose normale, telle qu'une désignation taxonomique, un terme technique, une expression idiomatique d'une autre langue, une pensée, un nom de navire, ou une autre prose dont la présentation typographique typique est en italique. L'usage varie largement selon la langue.

• Pour l'élément label, le navigateur ne devrait plus déplacer la cible de l'étiquette vers le champ de contrôle, à moins qu'un tel comportement ne soit standard pour l'interface utilisateur de la plateforme de base.

• L'élément menu est redéfini pour être utile à de vrais menus.

• L'élément small représente maintenant un petit caractère (pour des commentaires secondaires et des mentions légales).

• L'élément strong représente maintenant l'importance plutôt que la forte emphase.

• Les signes de ponctuation de citation pour l'élément q doivent maintenant être fournis par l'éditeur plutôt que par l'agent utilisateur.

Balises obsoletes a ne plus utiliser

Les éléments mentionnés dans cette section ne sont pas à utiliser par les éditeurs. Les agents utilisateurs devront, pourtant, les supporter et HTML 5 obtiendra une section d'affichage en temps voulu qui dira exactement comment. (L'élément isindex, par exemple, est déjà supporté par l'analyseur.)

Les éléments suivants ne figurent pas en HTML 5 parce que leur effet est de pure présentation et, par conséquent, mieux pris en charge par CSS :

• basefont
• big
• center
• font
• s
• strike
• tt
• u

Les éléments suivants ne figurent pas en HTML 5 parce que leur usage affectait négativement l'utilisabilité et l'accessibilité pour l'utilisateur final :

• frame
• frameset
• noframes

Les éléments suivants ne sont pas inclus parce qu'ils n'ont pas été souvent utilisés, ont créé de la confusion ou peuvent être pris en charge par d'autres éléments :

• acronym n'est pas inclus parce qu'il a créé beaucoup de confusions. Les éditeurs doivent utiliser abbr pour les abréviations.
• applet a été rendu obsolète au profit d'object.
• L'usage d'isindex peut être remplacé par celui de champs de contrôle de formulaire.
• dir a été rendu obsolète au profit d'ul.

Finalement, le noscript n'est conforme qu'à la syntaxe HTML. Il n'est pas inclus dans la syntaxe XML, comme son usage se fie à un analyseur HTML.

Attributs obsoletes a ne plus utiliser

Quelques attributs de HTML 4 ne sont plus autorisés en HTML 5. S'ils ont besoin d'avoir un impact sur les agents utilisateurs pour des raisons de compatibilité, la manière dont ils devraient fonctionner dans ces scénarios est définie.

• L'attribut accesskey dans a, area, button, input, label, legend et textarea.
• Les attributs rev et charset dans link et a.
• Les attributs shape et coords dans a.
• L'attribut longdesc dans img et iframe.
• L'attribut target dans link.
• L'attribut nohref dans area.
• L'attribut profile dans head.
• L'attribut version dans html.
• L'attribut name dans img, form et a (à la place, utilisez id).
• L'attribut scheme dans meta.
• Les attributs archive, classid, codebase, codetype, declare et standby dans object.
• Les attributs valuetype et type dans param.
• L' attribut language dans script.
• L'attribut summary dans table.
• Les attributs axis et abbr dans td et th.
• L'attribut scope dans td.
• L'attribut headers dans th.

Les attributs suivants sont compltement detruits puisque desormais le CSS les prend mieux en charges :

• L'attribut align dans caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead et tr.
• Les attributs alink, link, text et vlink dans body.
• L'attribut background dans body.
• L'attribut bgcolor dans table, tr, td, th et body.
• L'attribut border dans table, img et object.
• Les attributs cellpadding et cellspacing dans table.
• Les attributs char et charoff dans col, colgroup, tbody, td, tfoot, th, thead et tr.
• L'attribut clear dans br.
• L'attribut compact dans dl, menu, ol et ul.
• L'attribut frame dans table.
• L'attribut frameborder dans iframe.
• L'attribut height dans td et th.
• Les attributs hspace et vspace dans img et object.
• Les attributs marginheight et marginwidth dans iframe.
• L'attribut noshade dans hr.
• L'attribut nowrap dans td et th.
• L'attribut rules dans table.
• L'attribut scrolling dans iframe.
• L'attribut size dans hr, input et select.
• L'attribut type dans li, ol et ul.
• L'attribut valign dans col, colgroup, tbody, td, tfoot, th, thead et tr.
• L'attribut width dans hr, table, td, th, col, colgroup et pre.

Les dernieres videos de buzz

Attendu depuis assez longtemps HTML 5 commence a pointer le bout de son nez sur nos écrans, mais qu'est que l'HTML 5 , je n'ai pas l'intention de vous faire un cours rébarbatif de 12 pages (en tout cas pas tout de suite). Mais plutôt un tour d'horizon des nouvelles balises ajoutées et des balises dépréciées.

Sachez tout de même que LA grande nouveauté apporté par le HTML5 (couplé avec CSS3) c'est l'animation de pages web comme le montre de nombreux sites dédié tel que :

Microsoft avec : http://ie.microsoft.com/testdrive/

Apple avec : http://www.apple.com/html5/

Mozzilla avec : http://people.mozilla.com/~prouget/demos/

On commence par les nouvelles balises apportés avec cette fraiche version :

• section représente la section d'un document générique ou d'une application. Il peut être utilisé avec h1-h6 pour indiquer la structure du document.

• article représente un bout de contenu indépendant d'un document, tel qu'une entrée d'un blog ou d'un article de journal.

• aside représente un bout de contenu qui n'est qu'en léger rapport avec le reste de la page.

• header représente l'en-tête d'une section.

• footer représente un pied de page pour une section et peut contenir des renseignements sur l'éditeur, sur les droits d'auteur, etc.

• nav représente une section du document à l'intention de la navigation.

• dialog peut être utilisé pour baliser une conversation comme suit :

  <dialog>
  <dt>Costello<dd> Regarde, tu dois être le premier joueur ?   
  <dt>Abbott<dd> Certainement.   
  <dt>Costello<dd> Qui joue en premier ?  
  <dt>Abbott<dd> C'est exact.  
  <dt>Costello<dd> Quand tu rembourses chaque mois le premier joueur, qui ramasse l'argent ?  
  <dt>Abbott<dd> Chaque dollar pour ça.   
  </dialog>

• figure peut être utilisé pour associer une légende à un contenu imbriqué, tel qu'un graphique ou une vidéo :

  <figure>
     <video src=ogg>?</video>
     <legend>Exemple</legend>
    </figure>

• audio et video pour du contenu multimédia. Les deux éléments fournissent une API pour que les éditeurs d'application puissent coder leur propre interface utilisateur ; mais, il y a aussi une manière de déclencher une interface utilisateur fournie par l'agent utilisateur. Les éléments source sont utilisés avec ces éléments s'il y a de multiples flux disponibles de différents types.

• embed est utilisé pour du contenu d'un plug-in.

• mark représente une série de texte marqué.

• meter représente une mesure, telle que l'espace de disque.

• time représente une date et/ou une heure.

• canvas est utilisé pour afficher des graphiques bitmap dynamiques sur le moment, tels que des graphes, des jeux, etc.

• command représente une commande que l'utilisateur peut invoquer.

• datagrid représente une représentation interactive d'une liste arborescente ou de données tabulaires.

• details représente des renseignements supplémentaires ou des contrôles que l'utilisateur peut obtenir sur demande.

• datalist, avec le nouvel attribut list d'input, est utilisé pour créer des boîtes combinées :

  <input list=browsers>  
  <datalist id=browsers>   
  <option value="Safari">   
  <option value="Internet Explorer">   
  <option value="Opera">   
  <option value="Firefox">  
  </datalist>

• Les éléments datatemplate, rule et nest fournissent un mécanisme de gabarit pour le HTML.

• event-source est utilisé pour « capturer » des événements envoyés par le serveur.

• output représente un type de sortie, telle que celle d'un calcul fait au moyen d'un script.

• progress représente une progression de tâche, telle que le téléchargement ou quand une série d'opérations lourdes est exécutée.

• Les éléments ruby, rt et rb sont prévus pour baliser des annotations Ruby.

L'attribut type de l'élément input a maintenant les nouvelles valeurs suivantes :

• datetime-local
• date
• month
• week
• time
• number
• range
• email
• url

Cette nouvelle mouture de notre Hyper Text Markup Langage apporte aussi son lot d'attributs pour ces nouvelles balises

• Les éléments a et area ont maintenant un attribut media en cohérence avec l'élément link. C'est purement à titre indicatif.

• Les éléments a et area ont un nouvel attribut appelé ping qui spécifie une liste d'URIs séparées par une espace qui doivent être épinglées quand l'hyperlien est suivi. Actuellement, le suivi de l'utilisateur est essentiellement effectué au moyen de redirections. Cet attribut permet à l'agent utilisateur d'informer les utilisateurs des URIs qui vont être épinglées, en plus de donner aux utilisateurs soucieux de confidentialité une manière de le désactiver.

• L'élément area, par cohérence, a maintenant les attributs hreflang et rel.

• L'élément base peut maintenant avoir un attribut target, aussi bien principalement par cohérence avec l'élément a que parce qu'il était déjà largement supporté. Aussi, l'attribut target pour les éléments a et area n'est-il plus désapprouvé, comme il est utile dans des applications Web, par exemple conjointement avec iframe.

• L'attribut value pour l'élément li n'est plus désapprouvé, comme il n'est pas un attribut de présentation. Il en va de même pour l'attribut start de l'élément ol.

• L'élément meta a maintenant un attribut charset, comme il était déjà supporté et qu'il fournit une façon plus sympathique de spécifier le codage des caractères du document.

• Un nouvel attribut autofocus peut être spécifié dans les éléments input (sauf quand l'attribut type est hidden), select, textarea et button. Il fournit une manière déclarative de cibler un champ de contrôle de formulaire durant le chargement de la page. L'utilisation de cette caractéristique devrait augmenter l'expérience de l'utilisateur, comme ce dernier peut le désactiver s'il ne l'aime pas, par exemple.

• Le nouvel attribut form des élements input, output, select, textarea, button et fieldset permet aux champs de contrôle d'être associés à plus d'un formulaire.

• Les éléments input, button et form ont un nouvel attribut replace, qui affecte ce qui sera fait du document après qu'un formulaire a été soumis.

• Les éléments form et select (ainsi que l'élément datalist) ont un attribut data, qui tient compte du préremplissage automatique des champs de contrôle de formulaire, dans le cas de form, ou du champ de contrôle de formulaire, dans le cas de select et de datalist, avec des données provenant du serveur.

• Le nouvel attribut required s'applique à input (sauf quand l'attribut type est hidden, image ou un type de bouton tel que submit) et à textarea. Il indique que l'utilisateur doit renseigner une valeur afin de soumettre le formulaire.

• Les éléments input et textarea ont un nouvel attribut appelé inputmode, qui laisse entendre à l'interface utilisateur quel genre de saisie est attendu.

• Vous pouvez maintenant désactiver un fieldset entier en y utilisant l'attribut disabled. Ce n'était pas possible auparavant.

• L'élément input a plusieurs nouveaux attributs pour spécifier des contraintes : autocomplete, min, max, pattern et step. Comme mentionné auparavant, il a aussi un nouvel attribut list, qui peut être utilisé avec les éléments datalist et select.

• input et button ont aussi un nouvel attribut template, qui peut être utilisé pour des gabarits de répétition.

• L'élément menu a trois nouveaux attributs : type, label et autosubmit. Ils permettent à l'élément de se transformer en un menu tel qu'il est trouvé dans des interfaces utilisateur typiques, ainsi que de pourvoir à des menus contextuels conjointement avec l'attribut global contextmenu.

• L'élément style a un nouvel attribut scoped, qui peut être utilisé pour activer des feuilles de style portées. Les règles de style dans un tel élément style ne s'appliquent qu'à l'arborescence locale.

• L'élément script a un nouvel attribut appelé async, qui influe sur le chargement et l'exécution du script.

• L'élément html a un nouvel attribut appelé manifest, qui pointe une liste de cache d'application utilisée conjointement avec l'API pour des applications Web hors connexion.

• L'élément link a un nouvel attribut appelé sizes. Il peut être utilisé conjointement avec la relation icon (définie au moyen de l'attribut rel) pour indiquer la taille de l'icône référencée.

• L'élément ol a un nouvel attribut appelé reversed pour indiquer que la liste est en ordre décroissant quand il est présent.

• L'élément iframe a deux nouveaux attributs appelés seamless et sandbox qui sont prévus pour du contenu en bac à sable, par exemple les commentaires de blog.

Les dernieres videos de buzz

Trouvé chez pingoo

Les dernieres videos de buzz

Ce tutoriel sans prétentions présente les valeurs optimales a utiliser pour vos balises metas :

Balise titre

Entre 10 et 70 caractères (espace, point et autres compris)
Note : Eviter toute ponctuation dites agressive tel que les point d?exclamation, les  Deux point  ect ?
IMPACT : TRES FORT

Balise description

Entre 70 et 160 caractères (espace, point et autres compris)
Note : Expression libre tout caractère autorisé.
IMPACT : Faible

Balise keywords

Entre 1 et 10 Mot clé (désigné par séparation de virgule, soit 9 virgules)
Note : Eviter toute ponctuation dites agressive tel que les point d?exclamation, les  Deux point  ect ?
IMPACT : Faible

Les dernieres videos de buzz

Les dernieres videos de buzz

En mode texte cela donnerait :

12% des sites web sont dédiés au porno ( soit 24 644 172 site

3 075 64 $ sont dépensés pour le porno dans le web

Un tiers des visiteurs sont des femmes et 70% d'entre eux ont entre 18 et 24 ans

Le porno 4.9 milliard dans le monde dont 2?84 milliard aux états unis par an.

2,5 milliards d'emails porno sont envoyé chaque jour.

35% des téléchargements sont des DL Porno

...

Via : Vincentabry

Les dernieres videos de buzz

Silicone , hélium, je ne sais pas , mais c'est drôlement gonflé 

Les dernieres videos de buzz

Tboks , vous met en garde , les clowns peuvent être dangereux. tboks peut vous éviter ce genre de désagréments

Les dernieres videos de buzz

Les dernieres videos de buzz

Depuis 1997 , progressia vous informe sur l'actualité musicale et comme notre nouveau doobie s'est chargé de la nouvelle version qui devenais necessaire, il était normal que j'en fasse un article ...

si vous ne connaissez pas encore Progressia, c'est le moment

Pour info, le nouveau site est propulsé par Zend

Les dernieres videos de buzz

Parceque vous aimez bien partager tout et n'importe quoi sur fabebook, mais vous arrivez a rater le vrai buzz, tooskibuzz répertorie le meilleurs buzz ...

Étant donné que je viens d'intégrer la page de tooskibuzz je me suis dis que partager ce site n'était pas peine perdue

Voila vous pouvez maintenant suivre les buzz mais en dehors des heures de travail je vous prie

Les dernieres videos de buzz

zen coding est une nouvelle façon de coder ( non pas en php) mais vos intégration HTML. La révolution c'est la saisie du coude sous forme de xPath comme en css par exemple et via une touche la commande se convertie en code HTML.

Le Petit plus c'est le pluggin pour intégrer cette solution a notepad++ ou dreamweaver CSx , malheureusement il n'existe pas encore de pluggin pour éclipse.

Petite demo sous notepad++ par exemple, saisissez :

div#page>div.logo+ul#navigation>li*5>a

faites un CTRL+E, vous obtiendrez :

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href="http://www.jarodxxx.com/index.php?post/2010/05/11/"></a></li>
                <li><a href="http://www.jarodxxx.com/index.php?post/2010/05/11/"></a></li>
                <li><a href="http://www.jarodxxx.com/index.php?post/2010/05/11/"></a></li>
                <li><a href="http://www.jarodxxx.com/index.php?post/2010/05/11/"></a></li>
                <li><a href="http://www.jarodxxx.com/index.php?post/2010/05/11/"></a></li>
        </ul>
</div>

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Les dernieres videos de buzz

Popey 2.0 est un vent frais sur les lightbox like, un pluggin jQuery qui intègre des fonction de Zoom , de navigation dans une bibliothèque d'image, et une éventuelle description de vos images, le choix de l'intégration est laissé au libre cours de votre imagination.

Le code n'est pas sortie d'une usine a gaz et reste toutefois très maniable, petite demo:

Vous aussi , ca vous fait froid dans le dos de reussir a faire si bien et si simple ?

Les dernieres videos de buzz

Les dernieres videos de buzz

Google lance la 5 version de son navigateur Google chrome (beta 5). Pour l'occasion Google nous offre une vidéo démontrant que Chrome pourrais être plus rapide que le vent , plus rapide que le son voire aussi rapide que la lumière, regardez donc la video dans la suite de ce billet

Les dernieres videos de buzz

Désormais tous les quinze jours vous aurez le droit a une photo coquine, en respectant les limites du raisonnable évidement ...

Les dernieres videos de buzz

Il existe une multitude de façon de créer un bouton de paiement Paypal. Mais suivant vos besoins, toutes les méthodes ne sont pas bonnes à utiliser, ainsi pour avoir une bonne flexibilité et un bouton "sécurisé" il vous faudra passer par une génération à la volée du bouton avec un cryptage SSL des informations.

Comme il existe peu de tutoriels sur cette méthode je vous invite donc à lire celui que j'ai fait sur EXinsidePHP à ce sujet en espérant que cela vous sera utile. Cela se passe ici : Créer dynamiquement un bouton Paypal sécurisé.

Les dernieres videos de buzz

Hier, Google a mis à jour son outil Webmaster Tools avec des statistiques plus détaillées que précédemment au sujet des requêtes les plus fréquentes de votre site. Au menu, classement de vos pages par rapport aux mots clés, nombre d'affichages de vos pages, nombre de clics et CTR.

Retrouvez des informations plus complètes sur cette mise à jour sur EXinsidePHP.

Les dernieres videos de buzz

GeekBooster le désormais (on peut le dire) célèbre système d'échange de trafic qui je l'avoue fonctionne au delà de mes espérances vient d'ouvrir les portes de son blog et me font l'honneur d'inaugurer celui par le billet d'une interview.

Pour rappel Geek booster est un système d'échange de trafic dont le concerte est relativement simple vous envoyer des visites a vos partenaire et vous gagnez des visites en retour.

Leur algorithme est basé sur un 100% win win , vous envoyé 1 visiteur , vous récupérez 1 visite , 10envoie , 10 retours ect ...

L'interface admin (qui viens d'être remis a neuf, pour plus de clarté) vous permets d'accéder a vos statistiques...

Les dernieres videos de buzz

Pour mon premier billet chez Jarodxxx je partage une petite perle...

La rubrique du haut parlera à tous les développeurs je pense... par contre, finir par abandonner CSS et utiliser des tableaux à la place, c'est moche

Les dernieres videos de buzz