http://www.jarodxxx.com/index.php? Jarod xxx, développeur web 2.0 et être humain - Tutoriels, actu , web2.0, CSS, xhml, javascript : référencement ressources pour webmasters veille du web ! fr Fri, 03 Sep 2010 10:17:41 +0200 Jarod xxx 2009 http://blogs.law.harvard.edu/tech/rss Dotclear http://www.jarodxxx.com/index.php?post/2010/09/03/HTML-5-met-%C3%A0-jour-ses-balises-de-la-version-4 urn:md5:5d9cfd9785b0e83f9304f852f449fb19 Fri, 03 Sep 2010 09:30:00 +0200 JarodxXx HTML 5 / CSS 3 html 5 <p><img src="http://www.jarodxxx.com/public/logos/html5-logo1.jpg" alt="html 5" style="float: left; margin: 0 1em 1em 0; width: 84px; height: 84px;" title="html 5, sept. 2010" />Suite a l'article d'hier sur <a href="http://www.jarodxxx.com/index.php?post/2010/09/02/Voici-venu-le-temps-de-l-HTML5">les nouveautés du HTML 5</a>, 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.</p> <p>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.</p> <p>Plusieurs attributs de HTML 4 s'appliquent maintenant à tous les éléments. Ils sont appelés attributs globaux : <strong>class</strong>, <strong>dir</strong>, <strong>id</strong>, <strong>lang</strong>, <strong>style</strong>, <strong>tabindex</strong> et <strong>title</strong>.</p> <p>Il y a aussi plusieurs nouveaux attributs globaux :</p> <ul> <li>L'attribut <strong>contenteditable</strong> indique que l'élement est une zone éditable. L'utilisateur peut en changer le contenu et manipuler le balisage.</li> <li>L'attribut <strong>contextmenu</strong> peut être utilisé pour pointer un menu contextuel fourni par l'éditeur.</li> <li>L'attribut <strong>draggable</strong> peut être utilisé conjointement avec la nouvelle API « glisser-déposer ».</li> <li>L'attribut <strong>irrelevant</strong> indique qu'un élément n'est pas encore, ou n'est plus, pertinent.</li> <li>Les attributs <strong>globaux</strong> ref, registrationmark et template sont complémentaires de la fonctionnalité de gabarit de données.</li> <li>La collection d'attributs <strong>data-*</strong> définis par l'éditeur. Les éditeurs peuvent définir tous les attributs qu'ils veulent tant qu'ils les préfixent avec <strong>data-</strong> 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.</li> </ul> <p>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 :</p> <ul> <li>repeat</li> <li>repeat-start</li> <li>repeat-min</li> <li>repeat-max</li> </ul> <p>HTML 5 fait aussi de tous les attributs gestionnaires d'événements de HTML 4 qui prennent la forme <span xml:lang="en" lang="en">on</span>nom 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.</p> <h3>Balises mises à jour</h3> <p>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 :</p> <ul> <li> <p>L'élément <strong>a</strong> sans attribut <strong>href</strong> représente maintenant un « lien fictif ».</p> </li> <li> <p>L'élément <strong>address</strong> est maintenant porté par le nouveau concept de sectionnement.</p> </li> <li> <p>L'élément <strong>b</strong> 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.</p> </li> <li> <p>L'élément <strong>hr</strong> représente maintenant une coupure thématique au niveau du paragraphe.</p> </li> <li> <p>L'élément <strong>i</strong> 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.</p> </li> <li> <p>Pour l'élément <strong>label</strong>, 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.</p> </li> <li> <p>L'élément <strong>menu</strong> est redéfini pour être utile à de vrais menus.</p> </li> <li> <p>L'élément <strong>small</strong> représente maintenant un petit caractère (pour des commentaires secondaires et des mentions légales).</p> </li> <li> <p>L'élément <strong>strong</strong> représente maintenant l'importance plutôt que la forte emphase.</p> </li> <li> <p>Les signes de ponctuation de citation pour l'élément <strong>q</strong> doivent maintenant être fournis par l'éditeur plutôt que par l'agent utilisateur.</p> </li> </ul> <h3>Balises obsoletes a ne plus utiliser</h3> <p>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.)</p> <p>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 :</p> <ul> <li>basefont</li> <li>big</li> <li>center</li> <li>font</li> <li>s</li> <li>strike</li> <li>tt</li> <li>u</li> </ul> <p>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 :</p> <ul> <li>frame</li> <li>frameset</li> <li>noframes</li> </ul> <p>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 :</p> <ul> <li>acronym n'est pas inclus parce qu'il a créé beaucoup de confusions. Les éditeurs doivent utiliser abbr pour les abréviations.</li> <li>applet a été rendu obsolète au profit d'object.</li> <li>L'usage d'isindex peut être remplacé par celui de champs de contrôle de formulaire.</li> <li>dir a été rendu obsolète au profit d'ul.</li> </ul> <p>Finalement, le <strong>noscript</strong> n'est conforme qu'à la syntaxe HTML. Il n'est pas inclus dans la syntaxe XML, comme son usage se fie à un analyseur HTML.</p> <h3 > Attributs obsoletes a ne plus utiliser</h3> <p>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.</p> <ul> <li>L'attribut <strong>accesskey</strong> dans <strong>a</strong>, <strong>area</strong>, <strong>button</strong>, <strong>input</strong>, <strong>label</strong>, <strong>legend</strong> et <strong>textarea</strong>.</li> <li>Les attributs <strong>rev</strong> et <strong>charset</strong> dans <strong>link</strong> et <strong>a</strong>.</li> <li>Les attributs <strong>shape</strong> et <strong>coords</strong> dans <strong>a</strong>.</li> <li>L'attribut <strong>longdesc</strong> dans <strong>img</strong> et <strong>iframe</strong>.</li> <li>L'attribut <strong>target</strong> dans <strong>link</strong>.</li> <li>L'attribut <strong>nohref</strong> dans <strong>area</strong>.</li> <li>L'attribut <strong>profile</strong> dans <strong>head</strong>.</li> <li>L'attribut <strong>version</strong> dans <strong>html</strong>.</li> <li>L'attribut <strong>name</strong> dans <strong>img</strong>, <strong>form</strong> et <strong>a</strong> (à la place, utilisez<strong> id</strong>).</li> <li>L'attribut <strong>scheme</strong> dans <strong>meta</strong>.</li> <li>Les attributs <strong>archive</strong>, <strong>classid</strong>, <strong>codebase</strong>, <strong>codetype</strong>, <strong>declare</strong> et <strong>standby</strong> dans <strong>object</strong>.</li> <li>Les attributs <strong>valuetype</strong> et <strong>type</strong> dans <strong>param</strong>.</li> <li>L' attribut <strong>language</strong> dans <strong>script</strong>.</li> <li>L'attribut <strong>summary</strong> dans <strong>table</strong>.</li> <li>Les attributs <strong>axis</strong> et <strong>abbr</strong> dans <strong>td</strong> et <strong>th</strong>.</li> <li>L'attribut <strong>scope</strong> dans <strong>td</strong>.</li> <li>L'attribut <strong>headers</strong> dans <strong>th</strong>.</li> </ul> <p>Les attributs suivants sont compltement detruits puisque desormais le CSS les prend mieux en charges :</p> <ul> <li>L'attribut <strong>align</strong> dans <strong>caption</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>input</strong>, <strong>object</strong>, <strong>legend</strong>, <strong>table</strong>, <strong>hr</strong>, <strong>div</strong>, <strong>h1</strong>, <strong>h2</strong>, <strong>h3</strong>, <strong>h4</strong>, <strong>h5</strong>, <strong>h6</strong>, <strong>p</strong>, <strong>col</strong>, <strong>colgroup</strong>, <strong>tbody</strong>, <strong>td</strong>, <strong>tfoot</strong>, <strong>th</strong>, <strong>thead</strong> et <strong>tr</strong>.</li> <li>Les attributs <strong>alink</strong>, <strong>link</strong>, <strong>text</strong> et <strong>vlink</strong> dans <strong>body</strong>.</li> <li>L'attribut <strong>background</strong> dans <strong>body</strong>.</li> <li>L'attribut <strong>bgcolor</strong> dans <strong>table</strong>, <strong>tr</strong>, <strong>td</strong>, <strong>th</strong> et <strong>body</strong>.</li> <li>L'attribut <strong>border</strong> dans <strong>table</strong>, <strong>img</strong> et <strong>object</strong>.</li> <li>Les attributs <strong>cellpadding</strong> et <strong>cellspacing</strong> dans <strong>table</strong>.</li> <li>Les attributs <strong>char</strong> et <strong>charoff</strong> dans <strong>col</strong>, <strong>colgroup</strong>, <strong>tbody</strong>, <strong>td</strong>, <strong>tfoot</strong>, <strong>th</strong>, <strong>thead</strong> et <strong>tr</strong>.</li> <li>L'attribut <strong>clear</strong> dans <strong>br</strong>.</li> <li>L'attribut <strong>compact</strong> dans <strong>dl</strong>, <strong>menu</strong>, <strong>ol</strong> et <strong>ul</strong>.</li> <li>L'attribut <strong>frame</strong> dans <strong>table</strong>.</li> <li>L'attribut <strong>frameborder</strong> dans <strong>iframe</strong>.</li> <li>L'attribut <strong>height</strong> dans <strong>td</strong> et <strong>th</strong>.</li> <li>Les attributs <strong>hspace</strong> et <strong>vspace</strong> dans <strong>img</strong> et <strong>object</strong>.</li> <li>Les attributs <strong>marginheight</strong> et <strong>marginwidth</strong> dans <strong>iframe</strong>.</li> <li>L'attribut <strong>noshade</strong> dans <strong>hr</strong>.</li> <li>L'attribut <strong>nowrap</strong> dans <strong>td</strong> et <strong>th</strong>.</li> <li>L'attribut <strong>rules</strong> dans <strong>table</strong>.</li> <li>L'attribut <strong>scrolling</strong> dans <strong>iframe</strong>.</li> <li>L'attribut <strong>size</strong> dans <strong>hr</strong>, <strong>input</strong> et <strong>select</strong>.</li> <li>L'attribut <strong>type</strong> dans <strong>li</strong>, <strong>ol</strong> et <strong>ul</strong>.</li> <li>L'attribut <strong>valign</strong> dans <strong>col</strong>, <strong>colgroup</strong>, <strong>tbody</strong>, <strong>td</strong>, <strong>tfoot</strong>, <strong>th</strong>, <strong>thead</strong> et <strong>tr</strong>.</li> <li>L'attribut <strong>width</strong> dans <strong>hr</strong>, <strong>table</strong>, <strong>td</strong>, <strong>th</strong>, <strong>col</strong>, <strong>colgroup</strong> et <strong>pre</strong>.</li> </ul> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/09/03/HTML-5-met-%C3%A0-jour-ses-balises-de-la-version-4#comment-form http://www.jarodxxx.com/index.php?post/2010/09/03/HTML-5-met-%C3%A0-jour-ses-balises-de-la-version-4#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/562 http://www.jarodxxx.com/index.php?post/2010/09/02/Voici-venu-le-temps-de-l-HTML5 urn:md5:00569dab447662e54190d7296fdbdb36 Thu, 02 Sep 2010 15:44:00 +0200 JarodxXx HTML 5 / CSS 3 html 5 <p><img title="html 5, sept. 2010" style="float: left; margin: 0 1em 1em 0; width: 156px; height: 156px;" alt="html 5" src="http://www.jarodxxx.com/public/logos/html5-logo1.jpg" />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.</p> <p>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 : </p> <p><strong>Microsoft avec :</strong> <a href="http://ie.microsoft.com/testdrive/">http://ie.microsoft.com/testdrive/</a></p> <p><strong>Apple avec :</strong> <a href="http://www.apple.com/html5/">http://www.apple.com/html5/</a></p> <p><strong>Mozzilla avec :</strong> <a href="http://people.mozilla.com/%7Eprouget/demos/">http://people.mozilla.com/~prouget/demos/</a></p> <h3>On commence par les nouvelles balises apportés avec cette fraiche version :</h3> <ul> <li> <p><strong>section </strong>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.</p> </li> <li> <p><strong>article </strong>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.</p> </li> <li> <p><strong>aside </strong>représente un bout de contenu qui n'est qu'en léger rapport avec le reste de la page.</p> </li> <li> <p><strong>header </strong>représente l'en-tête d'une section.</p> </li> <li> <p><strong>footer </strong>représente un pied de page pour une section et peut contenir des renseignements sur l'éditeur, sur les droits d'auteur, etc.</p> </li> <li> <p><strong>nav </strong>représente une section du document à l'intention de la navigation.</p> </li> <li> <p><strong>dialog </strong>peut être utilisé pour baliser une conversation comme suit&nbsp;:</p> <pre>&lt;dialog&gt;<br />&lt;dt&gt;Costello&lt;dd&gt; Regarde, tu dois être le premier joueur ? <br />&lt;dt&gt;Abbott&lt;dd&gt; Certainement. <br />&lt;dt&gt;Costello&lt;dd&gt; Qui joue en premier ? <br />&lt;dt&gt;Abbott&lt;dd&gt; C'est exact. <br />&lt;dt&gt;Costello&lt;dd&gt; Quand tu rembourses chaque mois le premier joueur, qui ramasse l'argent ? <br />&lt;dt&gt;Abbott&lt;dd&gt; Chaque dollar pour ça. <br />&lt;/dialog&gt;</pre> </li> <li> <p><strong>figure </strong>peut être utilisé pour associer une légende à un contenu imbriqué, tel qu'un graphique ou une vidéo&nbsp;:</p> <pre>&lt;figure&gt;<br /> &lt;video src=ogg&gt;…&lt;/video&gt;<br /> &lt;legend&gt;Exemple&lt;/legend&gt;<br /> &lt;/figure&gt;</pre> </li> <li> <p>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&nbsp;; 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.</p> </li> <li> <p><strong>embed </strong>est utilisé pour du contenu d'un plug-in.</p> </li> <li> <p><strong>mark </strong>représente une série de texte marqué.</p> </li> <li> <p><strong>meter </strong>représente une mesure, telle que l'espace de disque.</p> </li> <li> <p><strong>time </strong>représente une date et/ou une heure.</p> </li> <li> <p><strong>canvas </strong>est utilisé pour afficher des graphiques bitmap dynamiques sur le moment, tels que des graphes, des jeux, etc.</p> </li> <li> <p><strong>command </strong>représente une commande que l'utilisateur peut invoquer.</p> </li> <li> <p><strong>datagrid </strong>représente une représentation interactive d'une liste arborescente ou de données tabulaires.</p> </li> <li> <p><strong>details </strong>représente des renseignements supplémentaires ou des contrôles que l'utilisateur peut obtenir sur demande.</p> </li> <li> <p><strong>datalist</strong>, avec le nouvel attribut <strong>list </strong>d'input, est utilisé pour créer des boîtes combinées&nbsp;:</p> <pre>&lt;input list=browsers&gt; <br />&lt;datalist id=browsers&gt; <br />&lt;option value="Safari"&gt; <br />&lt;option value="Internet Explorer"&gt; <br />&lt;option value="Opera"&gt; <br />&lt;option value="Firefox"&gt; <br />&lt;/datalist&gt;</pre> </li> <li> <p>Les éléments <strong>datatemplate</strong>, <strong>rule </strong>et <strong> nest </strong>fournissent un mécanisme de gabarit pour le HTML.</p> </li> <li> <p><strong>event-source</strong> est utilisé pour «&nbsp;capturer&nbsp;» des événements envoyés par le serveur.</p> </li> <li> <p><strong>output </strong>représente un type de sortie, telle que celle d'un calcul fait au moyen d'un script.</p> </li> <li> <p><strong>progress </strong>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.</p> </li> <li> <p>Les éléments <strong>ruby</strong>, <strong>rt </strong>et <strong>rb </strong>sont prévus pour baliser des annotations Ruby.</p> </li> </ul> <br /><p>L'attribut <strong>type</strong> de l'élément <strong>input</strong> a maintenant les nouvelles valeurs suivantes&nbsp;:</p> <ul> <li>datetime-local</li> <li>date</li> <li>month</li> <li>week</li> <li>time</li> <li>number</li> <li>range</li> <li>email</li> <li>url</li> </ul> <h3>Cette nouvelle mouture de notre Hyper Text Markup Langage apporte aussi son lot d'attributs pour ces nouvelles balises <img src="/themes/default/smilies/smile.png" alt=":)" class="smiley" /></h3> <ul> <li> <p>Les éléments <strong>a</strong> et <strong>area</strong> ont maintenant un attribut <strong>media</strong> en cohérence avec l'élément <strong>link</strong>. C'est purement à titre indicatif.</p> </li> <li> <p>Les éléments <strong>a</strong> et <strong>area</strong> ont un nouvel attribut appelé <strong>ping</strong> 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.</p> </li> <li> <p>L'élément <strong>area</strong>, par cohérence, a maintenant les attributs <strong>hreflang</strong> et <strong>rel</strong>.</p> </li> <li> <p>L'élément <strong>base</strong> peut maintenant avoir un attribut <strong>target</strong>, aussi bien principalement par cohérence avec l'élément a que parce qu'il était déjà largement supporté. Aussi, l'attribut <strong>target</strong> pour les éléments <strong>a</strong> et <strong>area</strong> n'est-il plus désapprouvé, comme il est utile dans des applications Web, par exemple conjointement avec <strong>iframe</strong>.</p> </li> <li> <p>L'attribut <strong>value</strong> pour l'élément <strong>li</strong> 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 <strong>ol</strong>.</p> </li> <li> <p>L'élément <strong>meta</strong> a maintenant un attribut <strong>charset</strong>, comme il était déjà supporté et qu'il fournit une façon plus sympathique de spécifier le <a href="http://w3c.britoweb.net/html5-diff/2008-06-10.html#character-encoding">codage des caractères</a> du document.</p> </li> <li> <p>Un nouvel attribut <strong>autofocus</strong> peut être spécifié dans les éléments <strong>input</strong> (sauf quand l'attribut <strong>type</strong> est <strong>hidden</strong>), <strong>select</strong>, <strong>textarea</strong> et <strong>button</strong>. 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.</p> </li> <li> <p>Le nouvel attribut <strong>form</strong> des élements <strong>input</strong>, <strong>output</strong>, <strong>select</strong>, <strong>textarea</strong>, <strong>button</strong> et <strong>fieldset</strong> permet aux champs de contrôle d'être associés à plus d'un formulaire.</p> </li> <li> <p>Les éléments <strong>input</strong>, <strong>button</strong> et <strong>form</strong> ont un nouvel attribut <strong>replace</strong>, qui affecte ce qui sera fait du document après qu'un formulaire a été soumis.</p> </li> <li> <p>Les éléments <strong>form</strong> et <strong>select</strong> (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 <strong>form</strong>, ou du champ de contrôle de formulaire, dans le cas de select et de <strong>datalist</strong>, avec des données provenant du serveur.</p> </li> <li> <p>Le nouvel attribut required s'applique à <strong>input</strong> (sauf quand l'attribut <strong>type</strong> est <strong>hidden</strong>, <strong>image</strong> ou un type de bouton tel que <strong>submit</strong>) et à <strong>textarea</strong>. Il indique que l'utilisateur doit renseigner une valeur afin de soumettre le formulaire.</p> </li> <li> <p>Les éléments <strong>input</strong> et <strong>textarea</strong> ont un nouvel attribut appelé <strong>inputmode</strong>, qui laisse entendre à l'interface utilisateur quel genre de saisie est attendu.</p> </li> <li> <p>Vous pouvez maintenant désactiver un <strong>fieldset</strong> entier en y utilisant l'attribut <strong>disabled</strong>. Ce n'était pas possible auparavant.</p> </li> <li> <p>L'élément <strong>input</strong> a plusieurs nouveaux attributs pour spécifier des contraintes&nbsp;: <strong>autocomplete</strong>, <strong>min</strong>, <strong>max</strong>, <strong>pattern</strong> et <strong>step</strong>. Comme mentionné auparavant, il a aussi un nouvel attribut <strong>list</strong>, qui peut être utilisé avec les éléments <strong>datalist</strong> et <strong>select</strong>.</p> </li> <li> <p><strong>input</strong> et <strong>button</strong> ont aussi un nouvel attribut <strong>template</strong>, qui peut être utilisé pour des gabarits de répétition.</p> </li> <li> <p>L'élément <strong>menu</strong> a trois nouveaux attributs&nbsp;: <strong>type</strong>, <strong>label</strong> et <strong>autosubmit</strong>. 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 <strong>global contextmenu</strong>.</p> </li> <li> <p>L'élément <strong>style</strong> a un nouvel attribut <strong>scoped</strong>, 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.</p> </li> <li> <p>L'élément <strong>script</strong> a un nouvel attribut appelé <strong>async</strong>, qui influe sur le chargement et l'exécution du script.</p> </li> <li> <p>L'élément <strong>html</strong> a un nouvel attribut appelé <strong>manifest</strong>, qui pointe une liste de cache d'application utilisée conjointement avec l'API pour des applications Web hors connexion.</p> </li> <li> <p>L'élément <strong>link</strong> a un nouvel attribut appelé <strong>sizes</strong>. 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.</p> </li> <li> <p>L'élément <strong>ol</strong> a un nouvel attribut appelé <strong>reversed</strong> pour indiquer que la liste est en ordre décroissant quand il est présent.</p> </li> <li> <p>L'élément <strong>iframe</strong> a deux nouveaux attributs appelés <strong>seamless</strong> et <strong>sandbox</strong> qui sont prévus pour du contenu en bac à sable, par exemple les commentaires de blog.</p> </li> </ul> Des demain nous verrons les balises et les attributs ayant subit des mises a jour ou ayant été dépréciées<br /> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/09/02/Voici-venu-le-temps-de-l-HTML5#comment-form http://www.jarodxxx.com/index.php?post/2010/09/02/Voici-venu-le-temps-de-l-HTML5#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/561 http://www.jarodxxx.com/index.php?post/2010/07/24/Les-meilleurs-casques-de-motos urn:md5:c996ef8c5cb24a5ac8ada179374d2bba Sat, 24 Jul 2010 23:03:00 +0200 JarodxXx Design <p><a title="cool_helmets007.jpg" href="http://www.jarodxxx.com/public/casques/cool_helmets007.jpg"><img title="cool_helmets007.jpg, juil. 2010" style="margin: 0 auto; display: block;" alt="cool_helmets007.jpg" src="http://www.jarodxxx.com/public/casques/.cool_helmets007_m.jpg" /></a></p> <p><a title="cool_helmets008.jpg" href="http://www.jarodxxx.com/public/casques/cool_helmets008.jpg"><img title="cool_helmets008.jpg, juil. 2010" style="margin: 0 auto; display: block;" alt="cool_helmets008.jpg" src="http://www.jarodxxx.com/public/casques/.cool_helmets008_m.jpg" /></a></p> <p><a title="cool_helmets006.jpg" href="http://www.jarodxxx.com/public/casques/cool_helmets006.jpg"><img title="cool_helmets006.jpg, juil. 2010" style="margin: 0 auto; display: block;" alt="cool_helmets006.jpg" src="http://www.jarodxxx.com/public/casques/.cool_helmets006_m.jpg" /></a></p> <p><a title="cool_helmets004.jpg" href="http://www.jarodxxx.com/public/casques/cool_helmets004.jpg"><img title="cool_helmets004.jpg, juil. 2010" style="margin: 0 auto; display: block;" alt="cool_helmets004.jpg" src="http://www.jarodxxx.com/public/casques/.cool_helmets004_m.jpg" /></a></p> <p><a title="cool_helmets002.jpg" href="http://www.jarodxxx.com/public/casques/cool_helmets002.jpg"><img title="cool_helmets002.jpg, juil. 2010" style="margin: 0 auto; display: block;" alt="cool_helmets002.jpg" src="http://www.jarodxxx.com/public/casques/.cool_helmets002_m.jpg" /></a></p> <p><a title="cool_helmets009.jpg" href="http://www.jarodxxx.com/public/casques/cool_helmets009.jpg"><img title="cool_helmets009.jpg, juil. 2010" style="margin: 0 auto; display: block;" alt="cool_helmets009.jpg" src="http://www.jarodxxx.com/public/casques/.cool_helmets009_m.jpg" /></a></p> <p><a title="cool_helmets005.jpg" href="http://www.jarodxxx.com/public/casques/cool_helmets005.jpg"><img title="cool_helmets005.jpg, juil. 2010" style="margin: 0 auto; display: block;" alt="cool_helmets005.jpg" src="http://www.jarodxxx.com/public/casques/.cool_helmets005_m.jpg" /></a></p> <p><a title="cool_helmets003.jpg" href="http://www.jarodxxx.com/public/casques/cool_helmets003.jpg"><img title="cool_helmets003.jpg, juil. 2010" style="margin: 0 auto; display: block;" alt="cool_helmets003.jpg" src="http://www.jarodxxx.com/public/casques/.cool_helmets003_m.jpg" /></a></p> <p><a title="cool_helmets001.jpg" href="http://www.jarodxxx.com/public/casques/cool_helmets001.jpg"><img title="cool_helmets001.jpg, juil. 2010" style="margin: 0 auto; display: block;" alt="cool_helmets001.jpg" src="http://www.jarodxxx.com/public/casques/.cool_helmets001_m.jpg" /></a></p> <p>Trouvé chez <a href="http://www.pingoo.com/2010/07/23/des-casques-moto-cool/cool_helmets009/">pingoo </a></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/07/24/Les-meilleurs-casques-de-motos#comment-form http://www.jarodxxx.com/index.php?post/2010/07/24/Les-meilleurs-casques-de-motos#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/560 http://www.jarodxxx.com/index.php?post/2010/07/15/Optimiser-ses-metas-title%2C-description-et-keywords urn:md5:2dc90d4aee8ab94ee447bc929b9731ad Thu, 15 Jul 2010 16:08:00 +0200 JarodxXx Référencement <p>Ce tutoriel sans prétentions présente les valeurs optimales a utiliser pour vos balises metas :</p> <br /><h2>Balise titre </h2> <p>Entre 10 et 70 caractères (espace, point et autres compris)<br /><strong>Note </strong>: Eviter toute ponctuation dites agressive tel que les point d’exclamation, les&nbsp; Deux point&nbsp; ect … <br /><ins><strong><em>IMPACT : TRES FORT</em></strong></ins></p> <h2>Balise description </h2> <p>Entre 70 et 160 caractères (espace, point et autres compris)<br /><strong>Note </strong>: Expression libre tout caractère autorisé.<br /><ins><strong><em>IMPACT : Faible</em></strong></ins></p> <h2>Balise keywords </h2> <p>Entre 1 et 10 Mot clé (désigné par séparation de virgule, soit 9 virgules)<br /><strong>Note </strong>: Eviter toute ponctuation dites agressive tel que les point d’exclamation, les&nbsp; Deux point&nbsp; ect … <br /><ins><strong><em>IMPACT : Faible</em></strong></ins><br /><br /></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/07/15/Optimiser-ses-metas-title%2C-description-et-keywords#comment-form http://www.jarodxxx.com/index.php?post/2010/07/15/Optimiser-ses-metas-title%2C-description-et-keywords#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/559 http://www.jarodxxx.com/index.php?post/2010/06/15/La-photo-boobs-du-mois-de-juin-2 urn:md5:b7d99dbdbdf88702a9a3082b29623011 Tue, 15 Jun 2010 16:24:00 +0200 JarodxXx sexy <p><a href="http://www.jarodxxx.com/public/sexy/lucy_pinder_naked-46.jpg"><img title="hot sexy, mai 2010" style="margin: 0 auto; display: block;" alt="" src="http://www.jarodxxx.com/public/sexy/.lucy_pinder_naked-46_m.jpg" /></a></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/06/15/La-photo-boobs-du-mois-de-juin-2#comment-form http://www.jarodxxx.com/index.php?post/2010/06/15/La-photo-boobs-du-mois-de-juin-2#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/550 http://www.jarodxxx.com/index.php?post/2010/06/03/Le-porno-domine-le-web urn:md5:d05eb3c9a9ab84127548cf1f00876f64 Thu, 03 Jun 2010 23:50:00 +0200 JarodxXx sexy pornosexy <p><a href="http://www.jarodxxx.com/public/illustations/Porno-Statistiques.jpg"><img title="porno stats, juin 2010" style="margin: 0 auto; display: block; width: 537px; height: 2170px;" alt="" src="http://www.jarodxxx.com/public/illustations/Porno-Statistiques.jpg" /></a></p> <p>En mode texte cela donnerait :</p> <p>12% des sites web sont dédiés au porno ( soit 24 644 172 site</p> <p>3 075 64 $ sont dépensés pour le porno dans le web</p> <p>Un tiers des visiteurs sont des femmes et 70% d'entre eux ont entre 18 et 24 ans</p> <p>Le porno 4.9 milliard dans le monde dont 2?84 milliard aux états unis par an.</p> <p>2,5 milliards d'emails porno sont envoyé chaque jour.</p> <p>35% des téléchargements sont des DL Porno</p> <p>...</p> <p>Via : <a href="http://www.vincentabry.com/porno-internet-statistiques-industrie-adulte-9073?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed%3A+abry+%28VincentAbry.com%29">Vincentabry</a></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/06/03/Le-porno-domine-le-web#comment-form http://www.jarodxxx.com/index.php?post/2010/06/03/Le-porno-domine-le-web#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/558 http://www.jarodxxx.com/index.php?post/2010/06/01/La-photo-boobs-du-mois-de-juin-1 urn:md5:99bd7c5ea4316b6623bd8e97999f3796 Tue, 01 Jun 2010 10:20:00 +0200 JarodxXx sexy <p>Silicone , hélium, je ne sais pas , mais c'est drôlement gonflé&nbsp;</p> <p><img title="boobs 02, mai 2010" style="margin: 0 auto; display: block;" alt="" src="http://www.jarodxxx.com/public/sexy/fake-tits.jpg" /></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/06/01/La-photo-boobs-du-mois-de-juin-1#comment-form http://www.jarodxxx.com/index.php?post/2010/06/01/La-photo-boobs-du-mois-de-juin-1#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/549 http://www.jarodxxx.com/index.php?post/2010/05/26/Ne-faites-pas-confiances-aux-clowns urn:md5:f7ae8abf612fdc00178ccff71af1ab79 Wed, 26 May 2010 16:02:00 +0200 JarodxXx Veille du web tboks <p>Tboks , vous met en garde , les clowns peuvent être dangereux. <a href="http://www.tboks.com/">tboks </a>peut vous éviter ce genre de désagréments</p> <p> <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/vf5eeVPJST8&hl=fr_FR&fs=1&color1=0xcc2550&color2=0xe87a9f"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/vf5eeVPJST8&hl=fr_FR&fs=1&color1=0xcc2550&color2=0xe87a9f" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> </p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/05/26/Ne-faites-pas-confiances-aux-clowns#comment-form http://www.jarodxxx.com/index.php?post/2010/05/26/Ne-faites-pas-confiances-aux-clowns#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/557 http://www.jarodxxx.com/index.php?post/2010/05/15/La-photo-coquine-du-mois-de-mai-2 urn:md5:200cf4f2851ff2742fd3cc3580c034d3 Sat, 15 May 2010 10:07:00 +0200 JarodxXx sexy <p><a href="http://www.jarodxxx.com/public/sexy/big-boobs-asian-pantyhose-girl.jpg"><img title="asian big boobs, mai 2010" style="margin: 0 auto; display: block;" alt="" src="http://www.jarodxxx.com/public/sexy/.big-boobs-asian-pantyhose-girl_m.jpg" /></a></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/05/15/La-photo-coquine-du-mois-de-mai-2#comment-form http://www.jarodxxx.com/index.php?post/2010/05/15/La-photo-coquine-du-mois-de-mai-2#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/548 http://www.jarodxxx.com/index.php?post/2010/05/13/Progressia.net-fait-peau-neuve urn:md5:964beae1ef4173f99dbf10f2702908d6 Thu, 13 May 2010 09:51:00 +0200 JarodxXx Mises à jour <p><a href="http://www.progressia.net/"><img title="progressia, mai 2010" style="margin: 0 auto; display: block;" alt="" src="http://www.jarodxxx.com/public/logos/Capture_d_ecran_2010-05-09_a_00.43.13.png" /></a></p> <p>Depuis 1997 , <a href="http://www.progressia.net/">progressia</a> 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 ... </p> <p>si vous ne connaissez pas encore <a href="http://www.progressia.net/">Progressia</a>, c'est le moment <img src="/themes/default/smilies/smile.png" alt=":)" class="smiley" /></p> <p>Pour info, le nouveau site est propulsé par Zend <img src="/themes/default/smilies/wink.png" alt=";)" class="smiley" /></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/05/13/Progressia.net-fait-peau-neuve#comment-form http://www.jarodxxx.com/index.php?post/2010/05/13/Progressia.net-fait-peau-neuve#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/556 http://www.jarodxxx.com/index.php?post/2010/05/12/Tout-ce-qui-buzz-sur-le-net-par-tooskibuzz urn:md5:9288ea981a39c09c5cd10ad5dc8e1748 Wed, 12 May 2010 10:40:00 +0200 JarodxXx Veille du web buzz <p><a href="http://www.tooskibuzz.fr/"><img title="tooskibuzz, mai 2010" style="margin: 0 auto; display: block;" alt="tooskibuzz" src="http://www.jarodxxx.com/public/logos/Capture_d_ecran_2010-05-09_a_00.30.09.png" /></a></p> <p>Parceque vous aimez bien partager tout et n'importe quoi sur fabebook, mais vous arrivez a rater le vrai buzz, <a href="http://www.tooskibuzz.fr/">tooskibuzz</a> répertorie le meilleurs buzz ...</p> <p>Étant donné que je viens d'intégrer la page de <a href="http://www.tooskibuzz.fr/">tooskibuzz</a> je me suis dis que partager ce site n'était pas peine perdue <img src="/themes/default/smilies/smile.png" alt=":)" class="smiley" /></p> <p>Voila vous pouvez maintenant suivre les buzz mais en dehors des heures de travail je vous prie</p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/05/12/Tout-ce-qui-buzz-sur-le-net-par-tooskibuzz#comment-form http://www.jarodxxx.com/index.php?post/2010/05/12/Tout-ce-qui-buzz-sur-le-net-par-tooskibuzz#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/555 http://www.jarodxxx.com/index.php?post/2010/05/11/Zen-coding%2C-integrez-vos-sites-en-mode-xPath urn:md5:6ce6fe572770ce60d91914c68797f1cb Tue, 11 May 2010 09:06:00 +0200 JarodxXx Webmasters <p><img title="zen codin, mai 2010" style="margin: 0 auto; display: block;" alt="" src="http://www.jarodxxx.com/public/illustations/zen-code.jpg" /></p> <p><a href="http://code.google.com/p/zen-coding/">zen coding</a> 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.</p> <p>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.</p> <p>Petite demo sous notepad++ par exemple, saisissez : </p> <p><code>div#page&gt;div.logo+ul#navigation&gt;li*5&gt;a</code></p> <p>faites un CTRL+E, vous obtiendrez :</p> <p><code>&lt;div id="page"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="logo"&gt;&lt;/div&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul id="navigation"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://www.jarodxxx.com/index.php?post/2010/05/11/"&gt;&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://www.jarodxxx.com/index.php?post/2010/05/11/"&gt;&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://www.jarodxxx.com/index.php?post/2010/05/11/"&gt;&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://www.jarodxxx.com/index.php?post/2010/05/11/"&gt;&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://www.jarodxxx.com/index.php?post/2010/05/11/"&gt;&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&lt;/div&gt;</code></p> <object width="400" height="275"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=7405114&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=7405114&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="275"></embed></object><p><a href="http://vimeo.com/7405114">Zen Coding v0.5</a> from <a href="http://vimeo.com/user2060676">Sergey Chikuyonok</a> on <a href="http://vimeo.com">Vimeo</a>.</p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/05/11/Zen-coding%2C-integrez-vos-sites-en-mode-xPath#comment-form http://www.jarodxxx.com/index.php?post/2010/05/11/Zen-coding%2C-integrez-vos-sites-en-mode-xPath#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/554 http://www.jarodxxx.com/index.php?post/2010/05/10/Un-diaporama-jquery-original-%3A-Popey-2.0 urn:md5:75bf1b674d18875d1814db653cfcc719 Mon, 10 May 2010 09:14:00 +0200 JarodxXx Web 2.0 , Ajax ajaxjquerylightbox <p><img title="Popey jquey, mai 2010" style="margin: 0 auto; display: block;" alt="popey jQuery" src="http://www.jarodxxx.com/index.php?post/2010/05/10/../public/illustations/popey.jpg" /></p> <p><a href="http://dev.herr-schuessler.de/jquery/popeye/demo.html">Popey 2.0</a> 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.</p> <p>Le code n'est pas sortie d'une usine a gaz et reste toutefois très maniable, petite demo:</p> <code>&lt;<span class="start-tag">script</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/javascript"</span>&gt;<br /> $(document).ready(function () {<br /> var options = {<br /> caption: false,<br /> navigation: 'permanent',<br /> direction: 'left'<br /> }<br /> $('#ppy2').popeye(options);<br /> });<br />&lt;/<span class="end-tag">script</span>&gt;</code> <p>Vous aussi , ca vous fait froid dans le dos de reussir a faire si bien et si simple ?</p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/05/10/Un-diaporama-jquery-original-%3A-Popey-2.0#comment-form http://www.jarodxxx.com/index.php?post/2010/05/10/Un-diaporama-jquery-original-%3A-Popey-2.0#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/552 http://www.jarodxxx.com/index.php?post/2010/05/07/Quel-est-la-difference-entre-Android-et-Iphone urn:md5:3ff4824a0dce7e2e90d6910f03eccd35 Fri, 07 May 2010 16:34:00 +0200 JarodxXx Apple / Mac iphone <p><img title="andoid vs iphone, mai 2010" style="margin: 0 auto; display: block; width: 538px; height: 422px;" alt="iphone vs andoid" src="http://www.jarodxxx.com/index.php?post/2010/05/07/../public/illustations/7.jpg" /></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/05/07/Quel-est-la-difference-entre-Android-et-Iphone#comment-form http://www.jarodxxx.com/index.php?post/2010/05/07/Quel-est-la-difference-entre-Android-et-Iphone#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/553 http://www.jarodxxx.com/index.php?post/2010/05/07/Google-Chrome-5-le-navigateur-le-plus-rapide-au-monde urn:md5:68dd7c70636c6b74d9e5c891158934b4 Fri, 07 May 2010 00:00:00 +0200 JarodxXx Logiciels GoogleGoogle chrome <p><img title="Google chrome, mai 2010" style="margin: 0 auto; display: block;" alt="google chrome" src="http://www.jarodxxx.com/public/illustations/googlechrome.png" /></p> <p>Google lance la 5 version de son navigateur <a href="http://www.google.ch/chrome?hl=fr">Google chrome</a> (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 <img src="/themes/default/smilies/smile.png" alt=":)" class="smiley" /></p> <object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/nCgQDjiotG0&hl=fr_FR&fs=1&color1=0xcc2550&color2=0xe87a9f"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/nCgQDjiotG0&hl=fr_FR&fs=1&color1=0xcc2550&color2=0xe87a9f" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/05/07/Google-Chrome-5-le-navigateur-le-plus-rapide-au-monde#comment-form http://www.jarodxxx.com/index.php?post/2010/05/07/Google-Chrome-5-le-navigateur-le-plus-rapide-au-monde#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/551 http://www.jarodxxx.com/index.php?post/2010/05/04/La-photo-coquine-du-mois-d-avril-1 urn:md5:f26c936dd8d94017cd6eeff14fb62edf Tue, 04 May 2010 16:06:00 +0200 JarodxXx sexy <p>Désormais tous les quinze jours vous aurez le droit a une photo coquine, en respectant les limites du raisonnable évidement ...</p> <p><img title="boobs01, mai 2010" style="margin: 0 auto; display: block;" alt="sexy" src="http://www.jarodxxx.com/public/sexy/maes_natal-sexy-mulher.jpg" /></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/05/04/La-photo-coquine-du-mois-d-avril-1#comment-form http://www.jarodxxx.com/index.php?post/2010/05/04/La-photo-coquine-du-mois-d-avril-1#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/547 http://www.jarodxxx.com/index.php?post/2010/04/30/Cr%C3%A9er-un-bouton-de-Payement-Paypal-s%C3%A9curis%C3%A9 urn:md5:aeea6a40beda0d27cbf3f4a4a4659159 Fri, 30 Apr 2010 13:59:00 +0200 steuf PHP paypalSSLsécurité <p><img title="Paypal, avr. 2010" style="float: left; margin: 0 1em 1em 0; width: 194px; height: 194px;" alt="paypal" src="http://www.jarodxxx.com/public/crbst_paypal.gif" />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.</p> <p>Comme il existe peu de tutoriels sur cette méthode je vous invite donc à lire celui que j'ai fait sur <a href="http://www.exinsidephp.com/">EXinsidePHP</a> à ce sujet en espérant que cela vous sera utile. Cela se passe ici : <a href="http://www.exinsidephp.com/2010/04/30/creer-dynamiquement-un-bouton-paypal-securise/" rel="bookmark" title="Lien Permanent: Créer dynamiquement un bouton Paypal sécurisé">Créer dynamiquement un bouton Paypal sécurisé.</a></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/04/30/Cr%C3%A9er-un-bouton-de-Payement-Paypal-s%C3%A9curis%C3%A9#comment-form http://www.jarodxxx.com/index.php?post/2010/04/30/Cr%C3%A9er-un-bouton-de-Payement-Paypal-s%C3%A9curis%C3%A9#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/546 http://www.jarodxxx.com/index.php?post/2010/04/16/Google-Webmaster-Tools-s-enrichit... urn:md5:0f08576ff20e081d18ed4d15ecc350bf Fri, 16 Apr 2010 10:59:00 +0200 steuf Référencement GoogleSEO <p><img title="google, août 2007" style="float: left; margin: 0 1em 1em 0;" alt="google" src="http://www.jarodxxx.com/public/logos/google.jpg" />Hier, Google a mis à jour son outil <strong>Webmaster Tools</strong> 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.</p> <p>Retrouvez des informations plus complètes sur cette mise à jour sur <a hreflang="fr" href="http://www.exinsidephp.com/2010/04/15/maj-google-webmaster-tools-statistiques-detaillees/">EXinsidePHP</a>.</p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/04/16/Google-Webmaster-Tools-s-enrichit...#comment-form http://www.jarodxxx.com/index.php?post/2010/04/16/Google-Webmaster-Tools-s-enrichit...#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/545 http://www.jarodxxx.com/index.php?post/2010/04/09/Geek-booster-ouvre-son-blog-et-m-offre-la-primeur urn:md5:c42ad3a9c317d168ffb38de8773468d8 Fri, 09 Apr 2010 12:06:00 +0200 JarodxXx Webmasters geek booster <p><a href="http://blog.widgetbooster.com/geek/interview-davi-teboul-de-jarodxxx-com"><img title="geekBooster, avr. 2010" style="margin: 0 auto; display: block;" alt="geekbooster" src="http://www.jarodxxx.com/public/illustations/GeekBooster.jpg" /></a></p> <p>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 <a href="http://blog.widgetbooster.com">blog </a>et me font l'honneur d'inaugurer celui par le billet d'une <a href="http://blog.widgetbooster.com/geek/interview-davi-teboul-de-jarodxxx-com">interview</a>.</p> <p>Pour rappel <a href="http://geekbooster.com/">Geek booster</a> 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.</p> <p>Leur algorithme est basé sur un 100% win win , vous envoyé 1 visiteur , vous récupérez 1 visite , 10envoie , 10 retours ect ...</p> <p>L'interface admin (qui viens d'être remis a neuf, pour plus de clarté) vous permets d'accéder a vos statistiques...</p> <p><a href="http://www.jarodxxx.com/public/screen/screenshoot-geekbooster.jpg"><img title="screen -geek booster, avr. 2010" style="margin: 0 auto; display: block;" alt="geek booster" src="http://www.jarodxxx.com/public/screen/.screenshoot-geekbooster_m.jpg" /></a></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/04/09/Geek-booster-ouvre-son-blog-et-m-offre-la-primeur#comment-form http://www.jarodxxx.com/index.php?post/2010/04/09/Geek-booster-ouvre-son-blog-et-m-offre-la-primeur#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/544 http://www.jarodxxx.com/index.php?post/2010/03/12/Le-webdesign-moderne%2C-%C3%A7a-se-passe-comme-%C3%A7a... urn:md5:2f61928b1d7be113ecc94708a1e0dd0f Fri, 12 Mar 2010 11:28:00 +0100 Doobie Webmasters <p><img title="website design, mar. 2010" style="margin: 0 auto; display: block;" alt="web design" src="http://www.jarodxxx.com/public/Doobie/time_breakdown_of_modern_web_design.png" /></p> <p>Pour mon premier billet chez Jarodxxx je partage une petite perle...</p> <p>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 <img src="/themes/default/smilies/wink.png" alt=";-)" class="smiley" /></p> <h1><a href="http://www.jarodxxx.com/#p00">Les dernieres videos de buzz </a></h1> <a href="http://www.jarodxxx.com/#p00">Voir les dernieres videos </a> http://www.jarodxxx.com/index.php?post/2010/03/12/Le-webdesign-moderne%2C-%C3%A7a-se-passe-comme-%C3%A7a...#comment-form http://www.jarodxxx.com/index.php?post/2010/03/12/Le-webdesign-moderne%2C-%C3%A7a-se-passe-comme-%C3%A7a...#comment-form http://www.jarodxxx.com/index.php?feed/atom/comments/543