Omega Solutions

Javascript – Presentation & Slideshow

joe — Sat, 25 Jun 2011 10:54:21 +0000

Aujourd’hui je vais vous parler d’une librairie javascript Fathom.js qui va vous permettre de mettre en place des sideshow sous forme de présentation très facilement et très rapidement.

1. Tour d horizon des fonctionnalites

La librairie propose pas mal de mode et vous permet de l’implémenter partout où vous le souhaitez. Vous pourrez ainsi :

Avoir le choix entre le mode timeline ou une par page pour afficher les diapos
Afficher les diapos en pleine page ou en mode embarqué
Synchroniser votre diapo avec une vidéo (non testé)
Appelez des fonctions de callback lors du slide
Binder des évènements personnalisés pour déclencher le changement de diapo
…

Bref, vous aurez de quoi faire ! Il faut noter la prise en charge des navigateurs mobiles. La librairie utilise JQuery Mobile pour capturer les évènements tels que le swip à deux doigts etc… Le rendu n’est pas mal du tout et vous pourrez en avoir un aperçu sur le site du développeur.

2. Utilisation de la librairie

L’utilisation de la librairie est ultra-simple voilà comment s’y prendre.

Pour votre code html :

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="presentation">
<div class="slide">
<h1>Slide 1 - Ma Presentation</h1>
</div>
<div class="slide">
<h2>Slide 2 - Titre 1</h2>
<ul>
<li>Premier point</li>
<li>Deuxième point</li>
<li>Troisième point</li>
</ul>
</div>
</div>

Pour votre code JS :

1	$('#presentation').fathom();

Quant à votre CSS, eh bien il ne tient qu’à vous de le mettre en place. Démo et source ici :

MYSQL Date Tip !

admin — Tue, 03 Aug 2010 18:21:49 +0000

Voilà une petite astuce bien utile quand on utilise les dates sur MYSQL. Il s’agit de la fonction « date_add ».

Un petit exemple…

1 2	SELECT titre, url, description FROM articles WHERE poste_le >= DATE_ADD(NOW(), INTERVAL -1 DAY) // yesterday!

Avec cette requête, vous sélectionnez tous les articles datant de la veille. Libre à vous d’utiliser d’autres intervalles négatifs ou positifs pour obtenir des dates dans le futur.

Pour plus d’informations sur la fonction, rendez-vous sur le site de mysql.

JQuery Horloge Meteo style HTC

admin — Thu, 22 Jul 2010 12:42:15 +0000

Voilà une petite librairie sympathique qui vous permettra de styliser votre horloge à la mode HTC.

Horloge numérique HTC HERO style

Pour l’utiliser rien de plus simple :

Tout d’abord on importe les librairies javascripts et les CSS utiles dans la partie head:

1
2
3

Ensuite on appel la méthode jdigiclock sur un élément du DOM :

1
2
3
4
5
6

$(document).ready(function() {
$('#digiclock').jdigiclock({
// Les options de configuration viennent ici
weatherLocationCode :"EUR|FR|FR012|PARIS"
});
});

Vous pourrez trouver toutes les options de configuration et la librairie à l’adresse : radoslavdimov
Il ne vous reste plus qu’à personnaliser vos options et à modifier le javascript pour traduire les éléments de texte.

Demo

JQuery Srollable Select

admin — Mon, 12 Jul 2010 06:43:38 +0000

Voici une petite librairie basée sur JQuery qui vous permettra de customizer vos balises select et de les rendre beaucoup plus attractives.

Jquery UI - SELECT - COMBO BOX

Pour cela rien de plus simple, ajouter simplement le script et le style à votre page.

1	<script src="jquery.scrollablecombo.js" type="text/javascript"></script>

et appliquez la fonction javascript sur votre élément :

1
2
3

Pour votre html rien de plus simple :

1	<select id="mon_select"> <option selected="selected" value="A">Option 1</option> <option value="B">Option 2</option> <option value="C">Option 3</option> </select>

Vous pourrez télécharger l’ensemble de l’archive avec style et javascript ici.

CSS Hack IE6 / IE7 / IE8

admin — Tue, 25 May 2010 21:14:27 +0000

Voilà un article qui permet d’utiliser des propriétés CSS spécifiquement pour IE6 / IE7 / IE8 sans créer de feuille de style supplémentaire !

Pour cela rien de plus simple ! Même si cette méthode est soumise à précaution puisqu’à tout moment une mise à jour de Chrome de Firefox peut interférer avec ces hacks.

Pour que seul ie6 interprète la propriété :

1
2
3
4
5
6
7

body {

color: red; /* tous les navigateurs */
color : green\9 ; /* IE8 et inférieurs */
*color : yellow ; /* IE7et inférieurs*/
_color : orange ; /* IE6 uniquement*/
}

On récapitule donc :

pour ie8 : il faut rajouter ‘\9′ juste avant le point-virgule
pour ie7 : on rajoute une étoile avant la déclaration de la propriété
pour ie6 : un underescore avant la déclaration de la propriété

Le plus propre restant de déclarer des css conditionnels grâce aux hacks habituels de type :

1
2
3
4
5
6
7

Jquery Speedometer

admin — Mon, 10 May 2010 22:15:37 +0000

Cette petite libraire vous permettra d’afficher un un compteur sous forme de graphique grâce à JQuery.

Jquery - Speedometer

Pour l’utiliser rien de plus simple : il vous suffira d’appeler la fonction

1
2
3
4
5
6
7
8
9
10
11

1	$('#test').speedometer();

Permet de placer le speedometer dans le sélecteur : test.
Le reste permettant simplement de récupérer la valeur de l’input et d’utiliser la valeur pour le speedometer

Les paramètres en plus en plus de cette petite librairie sont :

ANIMATE: (BOOLEAN, DEFAULT: TRUE) pour animer le speedometer
SUFFIX: (STRING, DEFAULT ‘ %’) l’unité à utiliser.

Au final, on obtient une petite librairie qui peut s’avérer très utile pour les tableaux de stats en temps réel puisqu’en couplant la librairie à un AJAX, on peut obtenir un rafraichissement du speedometer en temps réel….

Partage de fichier en ligne gratuite

admin — Tue, 04 May 2010 22:57:51 +0000

file2u

Aujourd’hui les technologies et les machines sont capables de traiter et de générer de très gros fichiers (*.AVI, *.PSD,…) la mauvaise nouvelle étant que le partage de fichier quant à lui est souvent limité !

2 solutions s’offrent alors à vous :

l’emailing ou le partage de fichier via espace d’hébergement. Tout en étant très pratique, l’email est souvent limité par le fournisseur de service à plus ou moins 10Mo au maximum…
les espaces d’hébergement quant à eux ont pour limite leur sécurité. En effet, toute personne qui connait le lien du fichier peut en théorie directement télécharger le fichier.

Je vous propose donc aujourd’hui un web service qui vous permet de partager des fichiers en ligne gratuitement. FILE2U est illimité et permet un bon niveau de sécurité grâce à un tracking number et un pin unique à chaque fichier. De plus, toute l’application repose sur un applet java qui permet si cela est possible d’augmenter le débit de download et de vous prévenir par mail si un téléchargement du fichier est effectuée.

Technologies File2U

Creer une boite de dialogue qui disparait seule avec JQuery

admin — Wed, 28 Apr 2010 19:19:41 +0000

Voilà un petit tutorial pour créer une une boite de dialogue qui apparait avec la page et qui disparait au bout d’un certain temps.

Définissons tout d’abord le contenu de notre box :

Votre session est expirée

Maintenant que notre box est définie, ajoutons lui un peu de style :

.messageBox {
	width:150px;
	padding:10px;
	border:1px solid #666;
	position:fixed; right:2%;top:2%;
	z-index:999;
	-webkit-border-radius: 6px; -moz-border-radius: 6px;
}

Le CSS est plutôt explicite mais détaillons un peu :

la largeur, le padding et le border ne sont qu’affaire de goût. Ils permettent de mettre en valeur la box et d’avoir un message clair séparé du reste de l’information.
il est important que la position soit définie comme fixed. Nous plaçons donc la fenêtre à 2% du haut et 2% de la droite.
z-index qui permet de positionner cette fenêtre par dessus tout le reste des éléments de la fenêtre.
et enfin, un tout petit effet CSS3 qui fonctionne partout excepter sur… IE ! et qui permet d’avoir des angles arrondis.

Définissons maintenant le plus important : le javascript !

On inclut d’abord la dernière version de jquery

ce petit bout de javascript permet simplement d’utiliser la fonction fadeout sur la div de la box au bout de 1000 millisecondes. Jquery dispose d’autres effets de transition, n’hésitez pas à en user.

Generation de watermark gratuite et facile pour vos images

admin — Mon, 19 Apr 2010 10:45:53 +0000

Watermark Tool vous permettra d’apposer votre signature sur toutes les images dont vous voulez garder la propriété.

Watermark Tool

L’outil est intuitif facile d’utilisation. Vous pourrez à travers diverses options régler la position, la taille, la police ainsi que la couleur du texte…

Paramètres Watermark Tool

L’outil est gratuit mais propose un abonnement supplémentaire pour ceux qui auraient des besoins supplémentaires :

Feature	Free	WMT Plus!
Upload Size (per file)	200KB	10MB
Image Watermarks	No	Yes
Download Files as Zip	No	Yes
Saved Settings	No	Yes
Priority Support	No	Yes
Cost	Free	$4.95/month or $49.95/year

Vous pourrez avoir un aperçu avant / après et le téléchargement de l’image modifié se fait par un simple Enregistrer l’image…

Un outil à garder sous la main pour les bloggers avertis…

Image watermaked (Avant / Après)

OPEN VIDEO PLAYER

admin — Sat, 17 Apr 2010 16:22:23 +0000

Voici le lecteur que nous avons utilisé pour un site de vidéo à la demande : Open Video Player.

- Open Video Player -

Il s’agit en fait d’une initiative des grands du web comme Adobe, Microsoft, 247 Real Media dans le but d’améliorer l’utilisation des standards et d’établir une nouvelle méthodologie de travail avec les applications liées au streaming.

Vous aurez le choix entre un lecteur Flash et un lecteur Silverlight tout deux entièrement paramétrables (boutons, backgrounds..) Pour vous aider, vous pourrez utiliser un service de configuration en ligne qui vous permettra d’embarquer très rapidement votre lecteur.

Le plus c’est que beaucoup de formats sont pris en compte notamment les live streaming (rtmp) et les autres flux plus traditionnels comme le flv et le mp4.

Même si vous n’en n’avez pas l’utilité tout de suite, ce projet est à conserver sous la main puisque le développement d’un lecteur pour iphone est dans les cartons.