|
|
Catégorie: (X)HTML/CSS
08/03/2012
16:30:06, Catégories: Web, Javascript, (X)HTML/CSS, Récapitulatif Web, Récapitulatif, 891 mots 
, bovino [Web] Personnalisez le menu contextuel avec Firefox
HTML5 redéfinit certains aspects et certaines balises du HTML.
Parmi les éléments qui retrouvent une nouvelle jeunesse figure la balise menu.
Bien sûr, évoquer cette balise ne présente que peu d'intérêt puisqu'elle n'est, à l'heure actuelle (et sauf erreur de ma part) reconnue par aucun navigateur...
Par aucun navigateur ? Vraiment ?
En fait, pas tout à fait : parmi les différentes utilisations de la balise menu, une est utilisable par Firefox depuis la version 8 : la personnalisation du menu contextuel lié à un élément de la page (ou de la page elle-même).
La syntaxe de la balise menu est la suivante :
<menu type="..." id="...">
où type correspond au comportement attendu pour le menu et id l'identifiant du menu.
Cette balise peut (dans le cadre du menu contextuel) contenir soit des sous-menus représentés par une nouvelle balise menu soit des éléments de menu représentés par des balises menuitem.
Bon, assez d'explications théoriques, passons à la pratique avec un exemple :
<menu type="context" id="developpez">
<menuitem label="Aller sur developpez.com" onclick="location.href='http://www.developpez.com'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menu label="Forums developpez.com">
<menuitem label="(X)HTML" onclick="location.href='http://www.developpez.net/forums/f39/webmasters-developpement-web/html-dhtml-xhtml/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="CSS" onclick="location.href='http://www.developpez.net/forums/f463/webmasters-developpement-web/css/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="JavaScript" onclick="location.href='http://www.developpez.net/forums/f23/webmasters-developpement-web/javascript/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="AJAX" onclick="location.href='http://www.developpez.net/forums/f458/webmasters-developpement-web/ajax/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
</menu>
</menu>
Dans cet exemple (relativement simple), nous ajoutons des liens vers developpez.com et différents forums du site.
Vous pouvez constater que le type de menu est context pour préciser qu'il s'agit de personnaliser le menu contextuel.
D'autre part, le sous-menu et les éléments des menus possèdent des attributs label indiquant le texte à afficher correspondant à chaque option.
Les éléments de menus possèdent quant à eux des attributs icon (image apposée à côté de l'élément) et onclick (action JavaScript à lancer au clic sur cet élément).
Pour autant, vous aurez beau ajouter cette portion de code dans votre page et faire des clics droits partout dans la page (sur Firefox bien entendu) pour tester, rien ne se passera !
En fait, nous avons oublié l'essentiel : déterminer à quel élément de la page le menu contextuel est associé.
Pour préciser cela, il suffit d'ajouter un attribut contextmenu à l'élément souhaité. La valeur de cet attribut doit correspondre à l'identifiant (attribut id) du menu.
Dans l'exemple suivant, nous posons cet attribut sur la balise body afin que le menu contextuel s'applique sur toute la page :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Menu contextuel</title>
<style>
html, body{
height: 100%
}
h1{
text-align: center;
}
</style>
</head>
<body contextmenu="developpez">
<h1>Exemple de menu contextuel personnalisé</h1>
<div>Faites un clic droit dans la page pour voir les options ajoutées au menu contextuel.</div>
<menu type="context" id="developpez">
<menuitem label="Aller sur developpez.com" onclick="location.href='http://www.developpez.com'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menu label="Forums developpez.com">
<menuitem label="(X)HTML" onclick="location.href='http://www.developpez.net/forums/f39/webmasters-developpement-web/html-dhtml-xhtml/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="CSS" onclick="location.href='http://www.developpez.net/forums/f463/webmasters-developpement-web/css/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="JavaScript" onclick="location.href='http://www.developpez.net/forums/f23/webmasters-developpement-web/javascript/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
<menuitem label="AJAX" onclick="location.href='http://www.developpez.net/forums/f458/webmasters-developpement-web/ajax/'" icon="http://www.developpez.com/template/favicon.ico"></menuitem>
</menu>
</menu>
</body>
</html>
Notre exemple est maintenant fonctionnel. Vous pouvez voir un exemple en ligne.
Vous devez être identifié pour poster un commentaire.
31/01/2012
21:58:20, Catégories: Web, Javascript, (X)HTML/CSS, Récapitulatif Web, Récapitulatif, 863 mots , bovino [Web] Comprendre la balise script
S'il est bien une balise qui est souvent mal utilisée en HTML, c'est la balise <script>.
Nous allons essayer dans ce billet de faire le point sur cette balise en comprenant pourquoi.
- La syntaxe
La syntaxe de base est relativement simple et ne pose pas de problème :
<script></script>
Il est toutefois important de noter que même si elle ne possède pas forcément de contenu, elle reste susceptible d'en avoir (le script en lui-même) ce qui fait que contrairement à une balise <link /> mais à l'instar d'une balise <style>, elle n'est pas autofermante et doit posséder une balise fermante.
- Les attributs
L'attribut src ne pose habituellement pas de gros soucis.
Cet attribut correspond à l'URL à laquelle se trouve le fichier correspondant. Attention toutefois, dans le cas d'une URL relative, de bien comprendre où se trouve le script en fonction de l'URL effective (celle affichée par le navigateur) qui appellera le script. Attention donc par exemple aux include en PHP.
En revanche, deux attributs sont assez souvent confondus, il s'agit des attributs language et type.
Il faut déjà savoir que le premier est deprecated depuis HTML 4 alors qu'au contraire, le second est required. Cela signifie qu'il faut bannir language.
La syntaxe correcte devient donc
<script type="text/javascript"></script>
Mais alors, si l'attribut language est à bannir, pourquoi le retrouve-t-on si souvent ?
D'abord, parce que malheureusement, plusieurs facteurs empêchent de l'éradiquer.
Déjà, de nombreux scripts usuels sont bien référencés et recopiés tels quels bien que très anciens. Du coup, l'attribut se propage facilement.
D'autre part, peut-être surtout, parce que beaucoup ignorent la signification de cet attribut.
A la base, il servait à indiquer le langage et la version du langage de script utilisé. Cependant, aucune norme n'a été trouvée pour savoir ce qu'il pouvait bien contenir, ce qui a donc amené à ce qu'il soit déprécié. De toute façon, le seul langage de script universellement reconnu par les navigateurs est JavaScript (quelle que soit sa déclinaison : ECMAScript, JScript, ...) donc l'information n'a que peu d'intérêt. De même, préciser une version à utiliser n'a pas vraiment de sens : JavaScript, pour des raisons de rétro-compatibilté ne perd pas de fonctionnalités, il ne fait qu'en accepter de nouvelles !
Note : en HTML5, l'attribut type n'est plus requis et dans cette version, la syntaxe
<script[ src="..."]></script>
est désormais suffisante.
- Le contenu
Pendant longtemps (et on retrouve encore couramment la syntaxe), les scripts étaient entourés soit de commentaires HTML soit d'entités CDATA :
<script type="text/javascript"><!--
// Code JavaScript
--></script>
<script type="text/javascript"><![CDATA[
// Code JavaScript
]]></script>
Là encore, la pratique remonte à un temps que les moins de 20 ans (voire plus !) n'ont pas connue !
Ces syntaxes, héritées du XML, servaient à l'origine à éviter que les navigateurs ne possédant pas d'interpréteur JavaScript (on ne parle pas de ceux qui ont JavaScript désactivé, bien de ceux pour lesquels JavaScript n'existe tout simplement pas !) n'essayent d'interpréter le contenu du script comme du HTML. De mémoire, on parle là de IE3 et de NS3. Il me semble que la part de marché de ces navigateurs atteint depuis longtemps un seuil qui rend cette technique quelque peu obsolète !
- Où placer les scripts ?
Plusieurs écoles s'affrontent à ce niveau.
Une chose est sure : il est demandé de séparer les différentes couches du document : le HTML pour le contenu, le CSS pour la mise en forme et le JavaScript pour l'ergonomie (ou le le comportement). Ainsi, insérer ses scripts en plein milieu du document est assez maladroit.
Pendant un temps, les bonnes pratiques recommandaient de placer les scripts entre les balises <head> et de les initialiser via l'événement onload de l'objet window.
Cette façon de procéder est plutôt satisfaisante mais l'événement onload implique que l'ensemble du contenu de la page soit chargé avant de lancer les scripts (donc y compris les éléments dits remplacés : images, iframes, object, etc.) et comme les pages Web deviennent de plus en plus gourmandes en ressources externes, cela fini par nuire à l'expérience utilisateur.
Différentes techniques existent pour pallier cela, entre autre, l'utilisation de l'événement DOMContentLoaded, mais qui n'est pas (encore) suffisamment universel pour être totalement satisfaisant.
La problématique est que pour pouvoir utiliser un script, il faut que les éléments du DOM qu'il va utiliser existent au moment où il est appelé. Une solution efficace est alors de placer les scripts juste avant la fermeture du document (avant la balise </body>), ce qui permet d'être sûr que les éléments du DOM ont été créés et de conserver la notion de séparation des couches.
Gardez toutefois à l'esprit que quelle que soit la solution choisie, elle aura une importance majeure lors de l'écriture de codes destinés à être réutilisés.
Vous devez être identifié pour poster un commentaire.
01/08/2008
[Web] Contribuez à l'épanouissement des rubriques (X)HTML et CSS
Bonjour,
Si vous êtes passionné par les technologies HTML/XHTML et CSS et désireux d'apporter votre contribution à la communauté, n'hésitez pas à nous contacter.
Quelle que soit votre disponibilité, toute aide est un atout avec des possibilités de contributions multiples :
- Rédaction de Questions/Réponses pour la F.A.Q (X)HTML/CSS ;
- Traduction d'articles existants en Anglais (par exemple) ;
- Le développement de nouvelles sources susceptibles d'être ajoutées à la Galerie CSS ;
- Modération sur les forums HTML/XHTML et CSS ;
- Critiques de livres.
Si l'expérience vous intéresse toujours, vous pouvez nous contacter via l'e-mail css[at]redaction-developpez.com afin de participer de près ou de loin à l'évolution de ces deux merveilleuses rubriques.
L'équipe (X)HTML/CSS.
Vous devez être identifié pour poster un commentaire.
23/01/2008
[Web] Le brouillon du HTML 5 publié !!!
Bonjour,
Pour votre information, le brouillon (draft) du HTML 5 a été publié hier par le W3C : http://www.w3.org/TR/html5/. La spécification a considérablement grossi. Elle définit toujours des balises et des attributs et la façon de les utiliser, mais également des API et le DOM. En attendant de vraiment se plonger dedans, on pourra consulter la page suivante qui indique les différences avec le HTML 4 : http://www.w3.org/TR/2008/WD-html5-diff-20080122/. Ce qui suit s'appuie largement sur ce document.
Vous devez être identifié pour poster un commentaire.
14/10/2007
[Web] Mise à jour de la page Outils (X)HTML
Un petit billet pour vous informez que la page outils (X)HTML a subi une mise à jour. Désormais, elle contient 45 outils tels que :
- Des éditeurs;
- Des extensions diverses;
- Des services en ligne;
- Des validateurs de code (X)HTML;
- etc.
Si vous utilisez d'autres outils que vous trouvez pratiques, utiles, n'hésitez pas à me les communiquer en commentaires ou dans le sondage Éditeur utilisé pour faire du HTML. Je me ferai un plaisir de les ajouter 
Enfin, je profite de ce billet pour vous annoncer la mise à jour de notre page Cours et Tutoriels, n'hésitez pas à la consulter.
Vous devez être identifié pour poster un commentaire.
18/07/2007
11:25:48, Catégories: PHP, Web, Javascript, Référencement, (X)HTML/CSS, EDI, Zend Framework, Sécurité, Conférences, Récapitulatif Web, Récapitulatif OpenSource, 80 mots , Yogui <g-rossolini@redaction-developpez.com [OpenSource][Web] Mise en ligne de la nouvelle page Cours PHP
J'ai finalement pris le temps de terminer la nouvelle mise en page des cours et tutoriels PHP. Les cours sont maintenant mieux répartis en catégories, donc plus faciles à retrouver. J'en ai profité pour mettre un peu à l'écart les cours obsolètes, mais vous pouvez toujours les consulter si vous le voulez.
Vous pouvez poster ici vos commentaires et consulter cette page si vous souhaitez rejoindre la Rédaction pour ajouter vos articles à la liste.
Vous devez être identifié pour poster un commentaire.
08/07/2007
20:28:40, Catégories: Web, (X)HTML/CSS, Récapitulatif Web, Récapitulatif OpenSource, 103 mots , Kerod [OpenSource][Web] La rubrique CSS ouvre sa galerie
En projet depuis bien longtemps déjà, la galerie CSS vient enfin de voir le jour.
Elle a pour but de mettre à votre disposition des sources prêtes à être intégrées dans tous vos développements Web.
Pour son ouverture, vous y trouverez un ensemble de menus (verticaux, horizontaux, etc) et quelques modèles de mise en page.
Vous y aurez également la possibilité de générer en ligne vos menus grâce aux générateurs qui sont mis à votre disposition, pour certains d'entres eux.
Si vous souhaitez que l'une de vos sources y soit intégrée, n'hésitez pas à nous la proposer dans le forum Contribuez.
L'équipe CSS
Vous devez être identifié pour poster un commentaire.
04/07/2007
[Web] Les meilleurs Outils CSS enfin répertoriés
Après la publication de la page Outils de sa rubrique jumelle, toute l'équipe CSS vous offre un récapitulatif des outils utiles à la réalisation de vos feuilles de style sous la forme de notre nouvelle page Outils.
En effet, vous y trouverez les éditeurs généralistes et/ou spécifiques CSS, les extensions, les services en ligne, etc. les plus utilisés.
Vous pourrez, également, vous faire une idée sur certains d'entres eux grâce aux critiques des membres de la rédaction.
Si un outil manque à l'appel ou si vous souhaitez y ajouter votre critique, n'hésitez pas à nous le faire savoir.
Vous devez être identifié pour poster un commentaire.
01/07/2007
[Web] Un outil d'épuration de code HTML : HTML Purifier
HTML Purifier est une bibliothèque, écrite en PHP, permettant de filtrer le code non conforme du HTML.
Cet outil enlèvera tout le code malveillant (XSS), mais s'assurera également que vos documents respectent les normes établies par le W3C
Il est également un éditeur WYSIWYG de grande qualité en plus d'être Open Source.
Vous le trouverez, en téléchargement libre, sur le site de l'éditeur : http://htmlpurifier.org/
Vous devez être identifié pour poster un commentaire.
12/04/2007
[Web] La page Outils (X)HTML enfin disponible
Toute l'équipe (X)HTML vous offre un récapitulatif des outils utiles à la conception (X)HTML sous la forme de notre nouvelle page Outils.
En effet, vous y trouverez les éditeurs, les extensions, les services en ligne, etc. les plus utilisés.
Vous pourrez également vous faire une idée de certains d'entre eux grâce aux critiques des membres de la rédaction.
Si vous souhaitez également l'étoffer, n'hésitez pas à nous contacter.
Vous devez être identifié pour poster un commentaire.
![[Valid RSS]](/img/valid-rss.png "Validate my RSS feed")
![[Valid Atom 1.0]](/img/valid-atom.png "Validate my Atom 1.0 feed")
Copyright © 2000-2012 - www.developpez.com