Posts tagged ‘html5’

Faire du HTML et du CSS est assez rébarbatif : toujours les mêmes balises, recopier les balises de fin, écrire des attributs class ou id… bref, un peu tout le temps la même chose en plusieurs exemplaires. C’est là que ZenCoding intervient !

Zen Coding, c’est quoi ?

Zend Coding est un plugin d’aide à la saisie pour votre HTML et votre CSS.

Concrètement, ça accélère la saisie, confère l’exemple ci-dessous !

Voici ce que l’on souhaite écrire comme code :

  1. <div id="content">
  2.   <ul class="list">
  3.     <li></li>
  4.     <li></li>
  5.     <li></li>
  6.   </ul>
  7. </div>

Et voici comment on va taper ça sur notre clavier :

div#content>ul.list>li*3 <Commande magique qui dépend de l'éditeur>

Fonctionnement

D’une manière plus générale, Zen Coding va interprété ce que vous venez d’écrire pour le transformer en code.

Dans notre exemple, nous avons utiliser une notation très proche du CSS pour écrire de l’HTML sans effort !

Mais ça marche aussi avec le CSS, notamment pour les attributs un peu long à écrire (ou à faire auto-compléter par l’éditeur), voire pour les valeurs. Il est en effet plus rapide de taper d:n<TAB> que display: none; avec la majorité des outils d’autocomplete.

Compatibilité

Le plugin est compatible avec énormément d’IDE, tels que Eclipse ou Vim (pour mon utilisation personnelle).

Plus d’informations sur le site de Zen Coding (hosté sur google code).

Posted by Cyril on 23 octobre 2012 at 20:02 under web.
Tags: , , ,
Commentaires fermés sur Zen Coding : pour éditer du HTML et du CSS rapidement.

Les développeurs HTML le savent bien : impossible de faire des styles uniformes sous tous les navigateurs ! Chacun a ses particularités : chrome et ses webkit-, safari qui n’en met pas et firefox qui -moz ifie un peu tout… et IE qui ne fait rien !

La solution pour IE : PIE.htc

La solution proposée ici a été développée pour supporter le CSS 3 sur Internet Explorer. Pour ce faire, on utilise une particularité CSS de Internet Explorer pour exécuter du JavaScript, qui va recréer le style CSS 3.

Voir la démo sur css3pie.com

Mise en place

Il suffit de rajouter une ligne CSS au style des éléments qui ont du CSS3.

  1. <style type="text/css">
  2. .rounded-corner5
  3. {
  4.   -webkit-border-radius: 5px; /* Chrome */
  5.   border-radius: 5px; /* CSS3 */
  6.   -moz-border-radius: 5px; /* Mozilla */
  7.   behavior: url(PIE.htc); /* Internet Explorer */
  8. }
  9. </style>

Exemple d’utilisation

Ceci est un div en exemple, avec des bords arrondis

Dépannage : quelques règles à respecter tout de même…

Il y a principalement deux problèmes qui peuvent être rencontrés :

  1. Mime-type : par défaut sous linux, le fichier .htc est reconnu comme étant du type text/html, mais doit être du type text/x-component pour que ça fonctionne. Plusieurs solutions, en fonction de ce que vous pouvez faire : modifier la configuration du serveur /etc/mime.types pour rajouter ce champ, rajouter la ligne AddType text/x-component .htc à votre configuration apache ou .htaccess, ou enfin créer un fichier de script du type PHP en utilisant le code header('Content-type: text/x-component') pour spécifier le type contenu.
  2. Domaine, répertoire et droits : le CSS ne va fonctionner que si le fichier .htc est sur le même domaine que le site qui sert le HTML : impossible donc d’utiliser la traditionnelle et non moins nécessaire segmentation des contenus dynamiques/statiques. Du coup, les rendu CSS3 utilisant des url() risquent d’être mal considérées si le chemin est relatif.

English version : CSS3 for Internet Explorer with PIE.htc

Posted by Cyril on 10 juillet 2011 at 16:53 under web, Windows et IE.
Tags: , , , ,
Commentaires fermés sur Le CSS3 pour tous, même pour Internet Explorer !.

Le CSS évolue. Une des principales innovations dans ce standard est l’ajout des animations. En voici un aperçu.

Démo : opacité et rotation

Un peu de code

Principe de fonctionnement

Le principe des animations est simple :

  1. Vous ajouter des styles à vos objets : style normal, et style modifié sur un évènement, par exemple avec :hover. Par exemple, on définit opacity: 0.5; dans le cas normal et opacity: 1; dans le :hover.
  2. On rajoute un style normal qui s’intitule -webkit-transition et dans lequel on va programmer la transition : type de propriété à animer, courbe de vitesse. Par exemple, si on veut animer l’opacité avec une vitesse rapide, en rendant l’arrêt plus fluide : -webkit-transition: -webkit-transform 1000ms ease-out 40ms ;

Source de l’exemple

  1. <style>
  2. .p416_animated {
  3.    opacity:.5;
  4.   -webkit-transition: -webkit-transform 1000ms ease-out 40ms, opacity 1000ms ease-out 40ms;
  5.   -moz-transition: -moz-transform 1000ms ease-out 40ms, opacity 1000ms ease-out 40ms;
  6. }
  7. .p416_animated:hover {
  8.   opacity:1;
  9.   -webkit-transform: rotate(360deg);
  10.   -moz-transform: rotate(360deg);
  11. }
  12. </style>
  13.  
  14. <img decoding="async" class="p416_animated" src="http://blog.cyril.me/wp-content/uploads/2010/09/firefox-150x150.png" alt="" />

Compatibilité

Le grand problème des évolutions de langage, c’est qu’il faut attendre l’évolution des navigateurs. Parmi les navigateurs compatibles disponibles à ce jour, nous avons Firefox 4, Chrome et Safari.

Cependant, le manque de compatibilité, dans certains cas (opacité par exemple), ne rendra pas votre site incompatible, mais seulement moins fini.

Pour aller plus loin : la référence du w3 sur les transitions CSS3.

Posted by Cyril on 7 septembre 2010 at 08:14 under web.
Tags: , , , , ,
Commentaires fermés sur CSS3 : Transitions et animations.

Envie d’avoir les notifications sous Firefox comme sous Chrome ? C’est désormais possible avec l’extension qui va bien.

Elle n’est pas encore tout à fait finie, mais c’est assez pour pouvoir s’en servir.

La page de l’extension : https://addons.mozilla.org/fr/firefox/addon/221523/
Site officiel : http://code.google.com/p/ff-html5notifications/

Posted by Cyril on 30 août 2010 at 08:31 under Firefox HTML5 Notifications.
Tags: , , , ,
13 Comments.

Consécutivement à l’article sur les notifications HTML 5, voici un article qui donne un exemple de fonctionnement des notifications.

La démo

Avant de pouvoir afficher une notification, vous devez autoriser le site à vous en présenter :
Il y a parfois des limitations qui empêchent le site de lancer une autorisation au chargement de la page : vous êtes parfois obligé de faire cliquer l’utilisateur sur un bouton pour voir apparaître l’avertissement d’autorisation.

Ensuite, vous pouvez afficher des notifications (avec ou sans bouton) :

Programmer une notification dans 3 secondes

Sources de l’exemple

Code HTML :

  1. <button onclick="showNotification()">Afficher la notification</button>
  2. <button onclick="p297_showNotification()">Afficher la notification</button>
  3. <a onclick="window.setTimeout(showNotification, 3000);" href="javascript:;">Programmer une notification dans 3 secondes</a>

Code javascript :

  1. <script type="text/javascript">
  2. /** Demande la permission d’afficher des notifications */
  3. function allowNotification()
  4. {
  5.   if("webkitNotifications" in window)
  6.   {
  7.     // Demande la permission. En cas de succès, afficher la notification
  8.     webkitNotifications.requestPermission(p297_showNotification);
  9.   }
  10. }
  11.  
  12. /** Affiche la notification */
  13. function showNotification()
  14. {
  15.   if("webkitNotifications" in window)
  16.   {
  17.     // Crée une notification à partir d’une image, d’un titre
  18.     // et d’une description (pas d’HTML possible).
  19.     // Pour créer une notification avec de l’HTML
  20.     // (pour le formatage), utiliser createHTMLNotification()
  21.     var notification = webkitNotifications.createNotification(
  22.       "http://www.google.fr/favicon.ico",
  23.       "Titre : cyril.me",
  24.       "Ceci est une notification"
  25.     );
  26.     // Afficher la notification
  27.     notification.show();
  28.     // N’afficher la notification que 5 secondes
  29.     window.setTimeout(function() {notification.cancel();}, 5000);
  30.   }
  31. }
  32. </script>

Posted by Cyril on 22 juin 2010 at 23:40 under web.
Tags: , , , , ,
3 Comments.

Parce qu’on n’a pas toujours le document au format qui nous convient, ou parce qu’on a parfois besoin de repasser par des chaînes de caractères pour passer des arguments ou stocker des variables, différents outils de conversion sont mis à disposition du développeur.

Conversion en passant par JSON

Certains types peuvent être convertis en passant par JSON : le texte, les objets, les tableaux, les nombres…

Du type javascript au texte : il faut utiliser JSON.stringify
Exemple : JSON.stringify([1,2,3]) => « [1,2,3] »

Du texte vers un type javascript : il faut utiliser JSON.parse
Exemple : JSON.parse(« [1,2,3] ») => [1,2,3] (où 1, 2 et 3 sont des entiers)

Conversion d’un document DOMDocument ou XMLDocument

Deux outils sont à disposition : XMLSerializer (du document vers string) et DOMParser (de string vers un document).

XMLSerializer : DOMDocument vers une chaîne de caractères
Exemple : s = new XMLSerializer(); var documentString = s.serializeToString(document);

DOMParser : Conversion d’une chaîne de caractères vers un objet DOMDocument
Exemple : p = new DOMParser(); var doc = p.parseFromString(‘<html><body>coucou</body></html>’, ‘text/xml’);

Compatibilité

Ces APIs sont compatibles avec, entre autres, Safari 4.0+, Chrome, Firefox 3.5+, et peut-être IE… 😉

Posted by Cyril on 11 mai 2010 at 21:22 under web.
Tags: , , , ,
Commentaires fermés sur Conversion javascript.

Il peut être parfois nécessaire d’utiliser une iframe, pour accéder par exemple à des cookies sur un autre site, se logguer, etc. Le problème est que si vous utilisez une iframe sur un domaine différent, le navigateur va vous renvoyer une erreur.

iframe et sécurité

Lorsque les domaine ou port diffèrent entre les deux frames, le navigateur va refuser la communication. En effet, imaginez que vous puissiez afficher une iframe cachée dans votre page, pour ensuite y récupérer des informations sensibles.

Exemple : dans mon site example.org, je mets une iframe vers mabanque.com et je récupère les informations bancaires de l’utilisateur de mon site (si celui-ci est déjà loggué sur le site de la banque).

La solution

Pour autoriser la communication entre les frames, il faut utiliser le protocole de communication entre les fenêtres.

Cette communication se fait par évènement : une fenêtre envoie à l’autre un objet1, qui le reçoit en ajoutant un handler sur l’évènement « message ».

Exemple

Dans notre exemple, l’iframe enverra un message à la fenêtre principale.

Fenêtre principale :

  1. // On rajoute un handler d'évènement
  2. function onMessage(e)
  3. {
  4.   // Vous pouvez vérifier l'origine de la fenêtre avec e.origin
  5.   document.getElementById('div-test').innerHTML = "Réception du message " + JSON.stringify(e.data);
  6. }
  7. window.addEventListener("message", onMessage, true);

Fenêtre iframe

  1. var dstWindow = window.parent;
  2. // Vous pouvez choisir le domaine vers lequel vous acceptez d'envoyer un message (ici, tous les domaines)
  3. dstWindow.postMessage([1,2,3], '*');

div-test pour la réception du message


1 : en fonction du navigateur, vous ne pourrez passer que des chaînes de caractères (Firefox 3.6 par exemple – Chrome supportant les objets). Pour pallier ce défaut, vous pouvez utiliser JSON.stringify et JSON.parse pour passer des objets comme des chaines ou des variables. Pour tout ce qui est DOM, ce n’est pas possible de faire passer les handler d’évènement définis dans la fenêtre source.

Posted by Cyril on 11 mai 2010 at 08:07 under web.
Tags: , , , ,
2 Comments.

La question du jour : comment copier du texte en javascript.

En théorie

On va utiliser les objets suivants : la sélection DOM, et un Range.

La sélection DOM consiste en un objet, présent dans HTML5, qui permet de gérer les sélections de texte à l’intérieur d’un document.

Le range est un intervalle, qui permet de définir une zone continue dans un document.

En pratique, mis bout à bout

En pratique : on crée un range, on fait pointer la sélection dessus (en veillant à supprimer la sélection actuelle), et on exécute la commande « copy » pour copier la sélection dans le presse-papier.

  1. var r = document.createRange();
  2. r.selectNode(mon_element_a_selectionner);
  3. var s = window.getSelection();
  4. s.empty();
  5. s.addRange(r);
  6. document.execCommand('Copy');

Exemple : copier le code javascript (ne fonctionne qu’avec un navigateur compatible HTML5)

Posted by Cyril on 3 mai 2010 at 22:35 under web.
Tags: , , , ,
1 Comment.

Les notifications

Introduit parmi les nouvelles fonctionnalités de l’HTML5, les notifications permettent aux sites web (que vous autorisez) de vous informer d’une activité sur un site. C’est comme les notifications de MSN messenger, quand une fenêtre apparaît en bas à droite de l’écran.

L’API supporte deux fonctions pour créer des notifications : soit à partir d’une URL, soit à partir d’une icône, d’un titre et d’une description. Utiliser une URL d’un fichier HTML permet d’avoir beaucoup plus de possibilités, au niveau de l’interaction comme au niveau de l’affichage (gras, images, liens, etc).

Utilisation dans chrome

Pour l’instant, chrome est le seul navigateur à supporter ce standard (sous Linux, hein !).

Voici un petit exemple de script (plus de détails dans la doc de chrome) :

  1. function showNotification()
  2. {
  3.   // Création de l'objet, puis affichage
  4.   var notification = webkitNotifications.createHTMLNotification('http://monurldenotification.com/');
  5.   notification.show();
  6. }
  7.  
  8. function sendNotification()
  9. {
  10.   var auth = webkitNotifications.checkPermission();
  11.   if (auth == 0) showNotification(); // Autorisé
  12.   else if(auth == 1) webkitNotifications.requestPermission(sendNotification); // Demande la permission
  13.   else { } // Refusé
  14. }
  15.  

Les limites

Malheureusement, il n’est pas possible de faire tout ce qu’on veut . Voici quelques limitations encore valables à ce jour :

  • Impossible de dialoguer entre la desktop notification et le script qui l’a ouverte ;
  • Impossible de spécifier une adresse du type data:text/html,<h1>test</h1>

A améliorer donc, afin d’avoir une réelle possibilité d’intégration dans des applications (type chat, …).

Posted by Cyril on 3 mai 2010 at 21:54 under web.
Tags: , , , ,
1 Comment.