2 décembre 2010 | graphisme | 3 commentaires
Après de nombreuses expérimentations xhtml, css et javascript, voici mon portfolio. Techniquement, xhtml w3c valide, le logo est en css, les icônes sont sur un sprite, le site semble compatible FOIE (Firefox, Opera, Internet Explorer 8), Chrome et Safari — il fonctionne (mais rame) sous iPad mais n’a pas été testé sur minitel.
http://jaiunsite.com
17 mai 2010 | programmation | 2 commentaires
Script du jour :
Avec Mootools et l’extension Slide/Scroll, voici un petit script qui déplie une liste (oooh) et fait glisser le contenu correspondant (aaah) – truc en plus : ça marche aussi avec les flèches du clavier haut et bas :-)
aperçu / source
Quelques règles :
Structure à conserver (liste de liste xhtml valide w3c) :
<ul><li> <h3 class="item">Linéales</h3> <ul> <li><a href="#">Helvetica</a></li> <li><a href="#">Futura</a></li> <li><a href="#">Myriad</a></li> <li><a href="#">Univers</a></li> </ul></li>
et autant de sous lien que de div dans slide (
<div id="slide"> ... </div>
)
enjoY !
8 avril 2010 | graphisme, tutorials | 0 commentaire
Petit script bonbon du jour : highlight !
Prérequis :
faire un xhtml
ajouter une ligne pour charger mootools (lastMoo.js dans mon exemple)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>high</title> <script type="text/javascript" src="lastMoo.js"></script> <script type="text/javascript"> <!-- on va travailler cette partie --> </script> <style type="text/css"> <!-- <!-- on va travailler cette partie --> --> </style> </head> <body> <!-- on va travailler cette partie --> </body> </html>
1re étape :
Remplir de blocs carrés notre page.
Un peu de maths : je veux n carrés de 50 px de large dans une window (une page) de 1005 px de large.
20 blocs, ça passe, 21 ça dépasse (1050 px)…
Techniquement en xhtml/css on laissera donc déborder le 21e bloc en ajoutant un conteneur de 1050 px de large pour nos n blocs et en masquant l’overflow (les barres de scrolling).
Tout ça c’est bien mais on va le faire automatiquement pour la largueur et la hauteur et pour n’importe quelle largeur de window.
Pour les débutants on pourrait copier/coller 500 fois «
mais ce n’est pas beaucoup plus difficile de le faire via Mootools.
En CSS ceci suffit :
<style type="text/css">
<!--
body{
margin:0;
overflow: hidden;
}
.bloc{
float:left;
background: #eee;
}
-->
</style>
Pour le javascript
var squareSize=50; var winx=((window.getSize().x)/squareSize).toInt()+1; var winy=((window.getSize().y)/squareSize).toInt()+1;
La première ligne définit la taille de mon bloc (ici 50 sur 50 px).
La deuxième calcule le nombre de bloc qui rentre + 1
en détaillant
(la largueur de mon navigateur / taille du bloc)
.toInt( ) pour arrondir en dessous (20,9).toInt()=20 et j’ajoute 1.
La troisième s’occupe de la hauteur.
Pour continuer, il faut créer un conteneur pour mettre mes N blocs, celui-ci sera plus large que ma page mais l’overflow du body est masqué. Je le nomme full
<body> <div id="full"> <!-- ici on injectera nos div--> </div> </body>
Je continue mon javascript :)
Je vais mettre ma div full à la taille calculée :
var squareSize=40;
var winx=((window.getSize().x)/squareSize).toInt()+1;
var winy=((window.getSize().y)/squareSize).toInt()+1;
$('full').setStyle('width',winx*squareSize);
$('full').setStyle('height',winy*squareSize);
J’ai besoin d’injecter mon bloc dans full
new Element('div', {
'class':'bloc',
'styles': {
'width':squareSize+'px',
'height':squareSize+'px'
}
}).inject($('full'));
et de le faire plusieurs fois (exactement, le nombre de bloc par ligne x le nombre par colonne)
for(var i=0;i<(winx*winy);i++){
new Element('div', {
'class':'bloc',
'styles': {
'width':squareSize+'px',
'height':squareSize+'px'
}
}).inject($('full'));
}
voici maintenant l’étape Frankestein, via motools l’effet highlight tient en une ligne
$('.bloc').highlight('#aaa','#fff');
ici je l’applique au premier bloc en classe ‘.bloc’ et il nous manque une technique pour lui dire à quel moment ou comment doit-il se déclencher, sinon il sera en highlight dès le lancement.
On peut ajouter un paramètre en mouseover
el=$('.bloc');
el.addEvent('mouseover', function () {
var color1=('rgb('+$random(0,255)+','+$random(0,5)+','+$random(0,255)+')').rgbToHex();
el.highlight(color1,'#fff');
});
ci-dessus, j’ai ajouté une variable el mais ça ne change pas beaucoup et color1, qui nous donnera une couleur en hexa aléatoire (#——–) avec très peu de vert via $random(0,5).
Il manque une technique pour le faire sur tous les blocs !
$$('.bloc').each(function (el) {
el.addEvent('mouseover', function () {
var color1=('rgb('+$random(0,255)+','+$random(0,5)+','+$random(0,255)+')').rgbToHex();
el.highlight(color1,'#fff');
});
});
ce n’est pas forcement clair pour les débutants mais ça donne une idée ?
Dernière ligne mais qui sera notre début, on charge tous ça à la fin du chargement du dom html :
window.addEvent('domready', function(){
/* notre script */
)};
Version complète
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>high</title>
<script type="text/javascript" src="lastMoo.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var squareSize=40;
var winx=((window.getSize().x)/squareSize).toInt()+1;
var winy=((window.getSize().y)/squareSize).toInt()+1;
$('full').setStyle('width',winx*squareSize);
$('full').setStyle('height',winy*squareSize);
for(var i=0;i<(winx*winy);i++){
new Element('div', {
'class':'bloc',
'styles': {
'width':squareSize+'px',
'height':squareSize+'px'
}
}).inject($('full'));
}
$$('.bloc').each(function (el) {
el.addEvent('mouseover', function () {
var color1=('rgb('+$random(0,255)+','+$random(0,5)+','+$random(0,255)+')').rgbToHex();
el.highlight(color1,'#fff');
});
});
}) //
</script>
<style type="text/css">
<!--
body{
margin:0;
overflow: hidden;
}
.bloc{
float:left;
background: #eee;
}
-->
</style>
</head>
<body>
<div id="full">
<!-- ici on injecte nos div-->
</div>
</body>
</html>
ci besoin :
mon lastmoo mootools.js
ou ici : http://mootools.net/download
23 mars 2010 | programmation | 3 commentaires
Petit exercice pour la forme, créer* et déplacer un carré rouge avec quelques lignes de code.
Dans mes exemples j’utilise le modulo :
359 modulo 360 = 359
360 modulo 360 = 0
361 modulo 360 = 1
on code avec un signe « % » comme ex : 359%360=359
* sauf pour After Effects
en actionscript 2 :
this.createEmptyMovieClip("square_mc", 1);
square_mc.beginFill(0xFF0000);
square_mc.moveTo(0, 0);
square_mc.lineTo(100, 0);
square_mc.lineTo(100, 100);
square_mc.lineTo(0, 100);
square_mc.lineTo(0, 0);
square_mc.endFill();
square_mc._x=0;
square_mc._y=150;
onEnterFrame=function(){
square_mc._x=square_mc._x%550+10;
}
en actionscript 3 :
var square:Sprite = new Sprite();
addChild(square);
square.graphics.beginFill(0xFF0000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = 0;
square.y = stage.stageHeight/2-square.height/2;
square.addEventListener(Event.ENTER_FRAME, bouge);
function bouge(e:Event):void{
square.x=square.x%550+1;
//square.rotation=square.x;
}
en processing :
int x = 0;
void setup(){
size(500,500);
background(255);
smooth();
frameRate(25);
}
void draw(){
background(255);
noStroke();
x = x%550 + 10;
rect(x-50,200,100,100);
fill(255,0,0);
}
en JavaScript avec la librairie Mootools :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>bouge</title>
<script type="text/javascript" src="lastMoo.js"></script>
<!--<script type="text/javascript" src="lastPlug.js"></script>-->
<script type="text/javascript">
window.addEvent('domready', function(){
var monSquare = new Element('div', {
'id':'square',
'styles': {
'position':'absolute',
'top':'100px',
'left':'0',
'width':'100px',
'height':'100px',
'background-color':'#f00'
},
});
monSquare.inject($(document.body));
var i=0;
var begin = function() {
i=i%window.getWidth()+5;
$('square').setStyle('left',i);
}.periodical(1000/25);
})
</script>
<style type="text/css">
<!--
/* rien */
-->
</style>
</head>
<body>
<!-- ici on injecte notre div-->
</body>
</html>
en expression pour After Effects sur la position d’un comp (pour le fun ^-^) :
[(-thisComp.width), (thisComp.height/2)] + [(900*time)%1000,0]
si vous excellez dans un de ces langages, n’hésitez pas à commenter ;¬)
4 janvier 2010 | graphisme, programmation | 2 commentaires
Bonne année 2010 à tous !
( xhtml + css + mootols + php ) x ( time )
+ ( trop de temps libre ) x pi x R² = 2010
23 décembre 2009 | programmation | 1 commentaire
Du nouveau (que j’annonce avec deux semaines de retard) chez mootools avec la centralisation des plugins sur le site officiel : http://mootools.net/forge/.
13 décembre 2009 | programmation | 0 commentaire
Quelques lignes de javascript pour les mootools fanboy. Rien de révolutionnaire, c’est juste une amélioration du chargement de plusieurs images, ici en cas d’erreur (un mauvais nom, un bug, une image sur un serveur en panne) on passe l’éponge et on charge la suivante…
(à la base j’avais un problème d’ordre d’images chargées selon le cache d’où le nom OrderAsset)
window.addEvent('domready', function(){
var Slide=$("slide"); //la div qui accueille les img
var myImages=['image1.jpg','image2.jpg','image3.png'];
var OrderAsset = function(myImage,i){
var AssImg = new Asset.image(myImage, {
'id': 'myImg'+i, //ça pourra servir
'class':'x',
'onload': function(){
this.inject(Slide);
i++;
if (myImages[i]) OrderAsset(myImages[i],i) // un tour :)
},
'onerror':function(){
i++;
if (myImages[i]) OrderAsset(myImages[i],i)
}
});//asset
};
OrderAsset(myImages[0],0); // ini
});//end domready
10 juin 2008 | programmation | 1 commentaire
Mon framework javascript préféré revient avec une nouvelle version et un nouveau site !
en attendant les démos ;¬)
http://mootools.net/