Outweb

Étiquette : HTML

Afficher des graphiques avec JQPlot

de

On août 16, 2011

dans JQuery

Temps de lecture : < 1 minute

JQPlot est un plugin JQuery qui permet de dessiner des graphiques dans vos pages HTML. Si vous faites des pages de statistiques sur vos pages Internet vous comprendrez rapidement quelles sont les applications et surtout en quoi il vous simplifie les choses. En effet, il vous suffit de lui donner les données et de décider quel type de graphique vous voulez obtenir en sortie et le tour est joué ! On peut facilement imager une fonction PHP (ou autre) qui va générer les données qu’il faut mettre en entrée de JQPlot à partir de votre base de données.

Voici quelques exemples de graphiques que l’on peut obtenir grâce à ce plugin:

Des tooltips élégants avec tipTip

de

On juillet 26, 2011

dans JQuery

Temps de lecture : < 1 minute

Quand vous souhaitez donner des informations à la volée, vous utilisez sûrement l’attribut title sur vos liens. Cependant, le rendu ne sera pas le même d’un navigateur à l’autre. De plus, les infos bulles basiques du navigateur ou du système d’exploitation sont rarement belles. Mais grâce au plugin JQuery tipTip vous allez pouvoir mettre en place des tooltips élégants. TipTip est fourni avec un CSS par défaut noir, mais libre à vous de le changer car il n’est pas très complexe.

Pour l’utiliser c’est très simple, pour le mot où vous souhaitez ajouter un tooltip il faut faire :

   <a class="tiptip" href="#" title="message tooltip">mot</a>

Et côté JavaScript, vous avez juste à faire appel au plugin sur votre classe tipTip :

    $(function(){
	$(".tiptip").tipTip();
    });

Voici un exemple en images, avec un contenu assez long dans la tooltip :

Rendre votre HTML5 compatible sur tous les navigateurs

de

On juillet 20, 2011

dans JQuery

Temps de lecture : < 1 minute

Comme vous le savez, le HTML5 est assez récent et donc pas encore pris en charge par tous les navigateurs. Cependant, il permet de faire des choses assez intéressantes sans y passer des heures, et le code est plus ordonné. Bref, je ne vais pas faire la présentation complète de HTML5, ce n’est pas le sujet de cet article. Mais voilà, même si le HTML5 a l’air génial, on ne peut pas l’utiliser tant que l’on n’est pas sûr que l’utilisateur pourra avoir le résultat voulu.

C’est pourquoi beaucoup de développeurs attendent pour se lancer dans cette aventure.

Mais voilà HTML5Replace  , qui est un script JQuery vous permet, par sa simple inclusion dans votre page, de détecter la prise en charge ou non du HTML5, et en cas de non prise en charge de remplacer les balises HTML5 par du HTML normal.

Afin de pouvoir adapter simplement votre css, les balises &lt;header&gt;, par exemple, sont remplacées par &lt;div class= »header »&gt;. De même pour toutes les autres balises HTML5.

Voilà de quoi encourager les réticents à se lancer dans l’aventure du HTML5, et enfin contribuer encore un peu plus à la fin du Flash :p

Convertir des formules Latex en HTML

de

On juillet 1, 2011

dans Autre

Temps de lecture : < 1 minute

Le Latex est à mis chemin entre le langage de programmation et le traitement de texte. Il permet de rédiger des documents officiels sans avoir à mettre en forme manuellement le texte. En effet, avec de simples instructions, on peut ajouter des paragraphes, des titres ou des chapitres avec une mise en forme automatique.
Le point fort de Latex est qu’il permet d’insérer des formules mathématiques complexes.
C’est d’ailleurs pour cela que la plupart des mathématiciens l’utilisent régulièrement dans leurs articles ou leurs rapports.

Tout ceci est très intéressant, mais comment faire pour insérer une telle formule mathématique dans une page HTML ?
Eh bien, jusqu’à présent on écrivait nos formules en Latex puis on faisait une capture d’écran…

Mais la librairie mathjax vous permet, à partir de votre code Latex, d’afficher en HTML votre formule comme vous l’auriez eue sur un document pdf.

Vous pourrez trouver une démonstration complète de cette librairie à l’adresse suivante http://www.mathjax.org/demos/tex-samples/.

Je trouve le résultat assez impressionnant !

Voici une image montrant la qualité du résultat obtenu.

Fièrement propulsé par WordPress & Thème par Anders Norén