Blog Dreaminvasion - développement et administration réseaux - Dev: xHTML / CSS / Javascript

Javascript : Faites clignoter un élément

Gerald Lonlas — Thu, 07 Feb 2008 17:37:00 +0100

Une demande qui m’a été faite, était de faire clignoter un élément sur une page web.

Bien entendu la balise <blink> existe mais elle n’est pas prise en compte par tous les navigateurs. Je me suis donc penché sur une fonction Javascript utilisant les effets visuels de script.aculo.us.

Je vous présente ma fonction Blink() qui permet de faire clignoter presque n’importe quel élément sur votre page

Par défaut elle s’applique sur les balises : <div>, <p>, <a>, mais fonctionne aussi sur tous les autres éléments HTML présents sur une page (Modification de la fonction Blink() obligatoire).

Démo

Voici un exemple de la fonction sur un bloc DIV.

Utilisation

Téléchargez l’archive contenant la fonction Blink, Prototype, Scrip.aculo.us
Placez les fichiers dans un dossier de votre site (par exemple : /js/)
Insérez les balises suivantes dans le Head de votre page.

<script type="text/javascript" src="http://blog.dreaminvasion.com/post/js/prototype.js"></script>
<script type="text/javascript" src="http://blog.dreaminvasion.com/post/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://blog.dreaminvasion.com/post/js/blink.js"></script>

Maintenant ajoutez l’attribut rel=’’blink’’ aux éléments à faire clignoter

<div rel="blink">
<h1>Texte qui clignote</h1>
<img src="http://blog.dreaminvasion.com/post/blink.jpg" alt="Image qui clignote" title="Image qui clignote" />
</div>

Pour ceux qui le remarqueront l’utilisation de l’attribut rel sur des balises comme DIV, P, … n'est pas reconnu comme valide.

Aussi si vous avez une solution je suis preneur et je modifierais ce script.

Intégration du formulaire de paiement Paypal

Gerald Lonlas — Mon, 10 Dec 2007 14:38:00 +0100

FreelanceSwitch nous propose un petit tutoriel (en anglais) pour intégrer le formulaire de paiement de Paypal.

Le formulaire de paypal n’est vraiment pas compliqué à mettre en place sur un site Internet.
Vous pouvez suivre ce tutoriel en anglais, que je trouve simple et bien détaillé (J’essayerai de vous en faire un en français).

Pour plus d’informations sur intégration de Paypal sur votre site web, je vous recommande vivement de lire les documentations de Paypal.

N’hésitez pas à vous créer un compte sur Sandbox Paypal pour tester le fonctionnement de votre script.

Programmation Orientée Objet en Javascript

Gerald Lonlas — Sun, 28 Oct 2007 18:27:00 +0100

Suite à la demande d’un ami sur la programmation orientée objet en Javascript, je vous partage le résultat de mes recherches sur le net.

Et plus particulièrement mes recherches sur ce qui est pour moi la bible des sites sur la programmation : Developpez.com

Thierry Templier nous propose un dossier en 3 parties sur la programmation Orientée objet en Javascript.

Programmation orientée objet avec JavaScript (1ère partie)

L'objectif de cet article, premier article de la série Programmation orientée objet avec JavaScript, est de décrire les mécanismes de base mis à disposition par JavaScript afin de mettre en oeuvre la programmation orientée objet par prototype.
La connaissance de ces mécanismes permet de "mieux" développer avec le langage JavaScript afin de réaliser des traitements plus modulaires, maintenables et évolutifs. Elle permet également de pouvoir appréhender plus facilement les diverses bibliothèques JavaScript disponibles sur Internet telles que Prototype, jQuery, script.aculo.us et Dojo.

Programmation orientée objet avec JavaScript (2ème partie)

Ce second volet de la série Programmation orientée objet avec JavaScript a pour objectif de décrire les mécanismes avancés de JavaScript relatif à la mise en oeuvre de la programmation orientée objet par prototype, à savoir l'héritage et la détermination du type.
Il détaille également la résolution d'un problème classique dû au référencement puis à l'exécution de méthodes d'objet et quelques patrons de conception.

Programmation orientée objet avec JavaScript (3ème partie)

Ce troisième et dernier volet de la série Programmation orientée objet avec JavaScript a pour objectif de décrire la résolution de problèmes classiques liés à la mise en oeuvre de ce paradigme avec le langage JavaScript. Ces problèmes sont inhérents à la variante de ce paradigme à savoir la programmation orientée objet par prototype.
Il détaille également dans un second temps quelques patrons de conception fondés sur les mécanismes abordés dans les précédents articles de la série afin de rendre vos traitements JavaScript plus modulaires, maintenables et évolutifs.

Autant dire que dans ces 3 articles vous aurez tout ce qu’il vous faut pour faire de la POO avec Javascript.

Polices : Conversion Pixels, Points, Ems, Pourcentages

Gerald Lonlas — Sun, 09 Sep 2007 16:00:00 +0200

Pour la création des sites web ou des feuilles de style de votre site, vous êtes souvent confronté au problèmes des tailles des polices, doit-on utiliser des pixels ? des points ?

Personnellement j’utilise les mesures en Pixels pour le rendu sur écran (ce qui me semble le plus approprié à nos jolis écrans d’ordinateur). Et les mesures en points pour les feuilles de style destinés à l’impression.

Afin de simplifier le travail de recherche de la bonne taille, voici un tableau de conversion de pixels, points, ems, et pourcentages.

Les valeurs sont approximatives, car elles dépendent du type de polices utilisé, du navigateur et du système d’exploitation.

Pixels	Points	Pourcentage	Ems
8px	6pt	50%	0.5em
9px	6.8pt	56.3%	0.56em
10px	7.5pt	62.5%	0.63em
11px	8.3pt	68.8%	0.69em
12px	9pt	75%	0.75em
13px	9.8pt	81.3%	0.81em
14px	10.5pt	87.5%	0.88em
15px	11.3pt	93.8%	0.94em
16px	12pt	100%	1em
17px	12.8pt	106.3%	1.06em
18px	13.5pt	112.5%	1.13em
19px	14.3pt	118.8%	1.19em
20px	15pt	125%	1.25em
21px	15.8pt	131.3%	1.31em
22px	16.5pt	137.5%	1.38em
23px	17.3pt	143.8%	1.44em
24px	18pt	150%	1.5em
25px	18.8pt	156.3%	1.56em
26px	19.5pt	162.5%	1.63em
27px	20.3pt	168.8%	1.69em
28px	21pt	175%	1.75em
29px	21.8pt	181.3%	1.81em
30px	22.5pt	187.5%	1.88em
31px	23.3pt	193.8%	1.94em
32px	24pt	200%	2em
33px	24.8pt	206.3%	2.06em
34px	25.5pt	212.5%	2.13em
35px	26.3pt	218.8%	2.19em
36px	27pt	225%	2.25em
37px	27.8pt	231.3%	2.31em
38px	28.5pt	237.5%	2.38em
39px	29.3pt	243.8%	2.44em
40px	30pt	250%	2.5em
41px	30.8pt	256.3%	2.56em
42px	31.5pt	262.5%	2.63em
43px	32.3pt	268.8%	2.69em
44px	33pt	275%	2.75em
45px	33.8pt	281.3%	2.81em
46px	34.5pt	287.5%	2.88em
47px	35.3pt	293.8%	2.94em
48px	36pt	300%	3em

Javascript : Fixer le problème de transparence des images PNG sur Internet Explorer.

Gerald Lonlas — Fri, 07 Sep 2007 13:01:00 +0200

Je suis tombé par hasard sur un script permettant de corriger le problème de la gestion de la transparence des fichiers PNG sous Internet Explorer 5.5 et 6.

Bien sur nous trouverons de moins en moins d’Internet Explorer en version 5.5 et 6, mais pour le moment ils sont encore présents sur le net. Il faut donc trouver une solution.

Jusqu'à présent j’utilisais le format GIF pour la transparence, mais ce format n’est vraiment pas génial, limité à 256 couleurs, ne permetant pas de transparence sur des couleurs ou des textures (exemple des dégradé), le GIF est un format trop restrictif à mon gout.

Au contraire le format PNG répond à toutes nos demandes, mais seul les navigateurs récents (Firefox, Opera, IE7, … ) gèrent correctement le PNG.

La solution ? Un javascript et trois lignes d’HTML dans vos pages.

Téléchargement du javascript.

Intégration du script dans vos pages :

L’itération HTML « <!--[if lt IE 7.]>” est un hack destiné à IE (exclusivement sous Windows) qui lui indique d’utiliser le script pngfix.js.

Pour plus d’information sur l’utilisation et le fonctionnement de ce script je vous invite à aller sur : http://homepage.ntlworld.com/bobosola/

Javascript : Script de rotation d’image

Gerald Lonlas — Tue, 04 Sep 2007 22:56:00 +0200

Des scripts de rotation d’image en javascript il en existe, il suffit de faire la recherche des mots clés « slideshow javascript » sur google pour le nombre de script prêt à l’emploi.

Et me voila en train d’ajouter ma contribution.

Je me permets de mettre à disposition un script que j’avais fais il y a quelques années pour le site E-tudiant.com, et que j’ai dépoussiéré très récemment pour DreamCommerce (le e-commerce que je développe actuellement).

Le javascript

Voici l’ensemble du javascript, le mieux est de l’intégrer dans un fichier .js et l’inclure dans votre page HTML.

// variables
var imgList = new Array();
var zInterval = null;
var indice=0;

// Change Opacité de l'image
function setOpacity(objet)
{
if(objet.xOpacity>.99)
{
objet.xOpacity = .99;
return;
}

objet.style.opacity = objet.xOpacity;
objet.style.MozOpacity = objet.xOpacity;
objet.style.filter = 'alpha(opacity=' + (objet.xOpacity*100) + ')';
}

// Fonction de changement des images (rotation)
function rotation()
{
cOpacity = imgList[indice].xOpacity;
nIndex = imgList[indice + 1]? indice + 1 : 0;
nOpacity = imgList[nIndex].xOpacity;

cOpacity-=.05;
nOpacity+=.05;

imgList[nIndex].style.display = 'block';
imgList[indice].xOpacity = cOpacity;
imgList[nIndex].xOpacity = nOpacity;

setOpacity(imgList[indice]);
setOpacity(imgList[nIndex]);

if(cOpacity<=0)
{
imgList[indice].style.display = 'none';
indice = nIndex;
setTimeout(rotation, 3000);
}
else
{
setTimeout(rotation, 50);
}
}

// Initialisation du rotation
function rotationInit(elementId)
{
if(document.getElementById || document.createElement)
{
imgList = document.getElementById( elementId ).getElementsByTagName('img');

for(i=1;i<imgList.length;i++)
{ imgList[i].xOpacity = 0; }

imgList[0].style.display = 'block';
imgList[0].xOpacity = .99;

setTimeout(rotation, 3000);
};
}

Le xHTML

Pour ce qui est du xHTML il suffit de mettre vos images les unes derrières les autres dans un conteneur auquel vous donnerez un id.

<div id="galerie" class="rotation">

<a href="http://www.dreaminvasion.com/realisations/23-mbolabs.html"><img src="http://www.dreaminvasion.com/images/mini-mbolabs.jpg" alt="Mbolabs" title="Mbolabs" /></a>

<a href="http://www.dreaminvasion.com/realisations/21-4l-trophy-toulouse.html"><img src="http://www.dreaminvasion.com/images/mini-4l-trophy-toulouse.jpg" alt="4L Trophy Toulouse" title="4L Trophy Toulouse" /></a>

<a href="http://www.dreaminvasion.com/realisations/11-dreaminvasion-v2-0.html"><img src="http://www.dreaminvasion.com/images/mini-dreaminvasion.com-v2.jpg" alt="Dreaminvasion v2.0" title="Dreaminvasion v2.0" /></a>

</div>

Enfin lancer la rotation via la fonction rotationInit('galerie');

<script type="text/javascript">
rotationInit('galerie');
</script>

La feuille de style

La mise en page se fera via votre feuille de style (CSS), vous appliquerez un classe CSS au conteneur des photos.

La classe CSS devra comporter les attributs : width, height qui fixera la taille du conteneur à la dimension d’une image.
Les autres images seront simplement cachées.

.rotation {
    border: 1px solid #000;
    cursor: pointer;
    overflow: hidden;
    margin: 50px auto 10px;
    position: relative;
    width: 155px;
    height: 140px;
}

.rotation img {
    border: 0;
    cursor: pointer;
    width: 155px;
    height: 140px;

}

Cliquez ici pour télécharger le fichier rotation.js (1,6 Ko).

Optimisez vos applications Web pour l’iPhone

Gerald Lonlas — Sat, 14 Jul 2007 11:05:00 +0200

Avec la sortie de l’iPhone Apple vient de sortir un article intitulé "Optimizing Web Applications and Content for iPhone".

Vous trouverez dans cette article tout ce qu’il faut savoir pour que vos applications web soit totalement compatible avec l’iphone.

"Safari on iPhone uses the same Web Kit engine as Safari on the computer desktop. With the Safari Web Kit engine, you can develop sophisticated Web 2.0 sites and applications that will impress and delight iPhone users. To design a web application that shines on iPhone and ensures a great user experience, you’ll want to:

Understand the capabilities of iPhone

Follow established design practices for the web

Adopt iPhone-specific design principles

The following guidelines will help you prepare web content and design a website or web-based application for iPhone. If you are a seasoned web developer, there are probably just a few refinements you can make to ensure that your site looks great and works best on iPhone. You’ll need to read only those guidelines that are unique to iPhone. If you are fairly new to web development, you’ll want to make sure that you understand web standards and established web design best practices before following any iPhone-specific guidelines."