tutorials | jaiunblog.com | j'ai un blog - graphisme, design, programmation

Archives Under "tutorials" (RSS)

mootools + css + highlight

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

désactiver un plugin wordpress sur une page

28 février 2010 | programmation, tutorials | 0 commentaire

Problématique du jour, j’ai installé un plugin pour mettre automatiquement les vidéos de youtube, vimeo et autres à la largueur de mon site : http://wordpress.org/extend/plugins/flash-video-resizer/.
Mais voilà malgré les options proposées dans l’administration du plugin, impossible de spécifier la suppression du resize sur une page précise…
Dans le monde merveilleux de wordpress, il existe les filtres !
Le plugin ci-dessus applique un filter au content, dans les sources de celui-ci on lira

add_filter('the_content', 'fvr_resizeMarkup');

il suffit donc de faire l’inverse !
L’avantage c’est qu’on garde les autres filters !

<?php /*
Template Name: Anti Resize !
*/ ?>

<?php
remove_filter('the_content', 'fvr_resizeMarkup'); // on le désactive !
?>
<?php
get_header(); ?>
// la boucle + le pied (...)

comment bloquer un visiteur sur votre site

26 février 2010 | programmation, tutorials | 0 commentaire

Pré-requis, sur internet ou dans un réseau chaque machine possède une ip, une sorte de plaque d’immatriculation de votre connexion qui ressemble à ceci 234.232.264.129 ; quatre chiffres entre 0 et 255.
La votre actuellement est http://www.mon-ip.com/ (en rouge sur ce site).

Si je connais votre IP et que je n’ai pas envi de vous sur mon site, je peux vous bannir en créant un fichier .htaccess à la racine de mon site, avec ceci dedans — le nom commence par un point ce qui complique un peu l’opération…
On fera un htaccess.txt puis on le renommera avec le logiciel de FTP .htacces [facile ?].

RewriteEngine on
RewriteCond %{REMOTE_ADDR} ^90.xxx.xxx.xxx
RewriteRule .*    http://www.perdu.com/

Ici je bloque 90.xxx.xxx.xxx à vous de mettre l’IP à bloquer 90.123.123.123 par exemple ou 123.90.123.123.

Bonus, si vous voulez bloquer un ~~ami~~ ~~crétin~~ boulet…
Avec un message de son email vous pouvez retrouver son IP !
Sur hotmail -> clic droit sur l’email dans la boite aux lettres -> afficher la source du message -> puis chercher
X-Originating-IP: [xxx.xxx.xxx.xxx]
Sur Thunderbird ctrl + U ou pomme + U et chercher :
Received: from xxx.xxx.xxx.xxx

construisez votre thème wordpress

2 février 2010 | programmation, tutorials | 5 commentaires

Ambiance chic et classe façon altaya ou del prado !
Cette semaine le n°1, ses fichiers php, son png et sa feuille de style, pour moins de 2 euros comme chez carglass !

L’objectif de ce tutorial est de faire un thème portfolio imitant la simplicité et l’ergonomie des indexhibit afin de comprendre les bases de la création de thème pour WordPress.
Petite précision : je ne connais pas l’interface d’administration d’indexhibit et j’ai aucun avis sur celle-ci :¬) mais j’aime beaucoup de le travail de Daniel Eatock.

Je vais supposer que l’administration de wordpress n’est plus un mystère (c’est en français et assez ergonomique ?).
Prérequis, wordpress propose d’écrire des pages ou des articles, les articles sont affichés de manière antéchronologique (bizarrement comme un blog) et les pages de manière statique. Ici je détourne un peu l’usage de wordpress mais il s’agit d’un exercice pour simplifier cette première approche, notre thème n’affichera que des pages, sachant qu’on pourra toujours afficher des articles avec quelques modifications supplémentaires.

1re étape Ajouter quelques pages : en principe une page existe déjà sous le nom de « à propos », ci-dessous j’ai quatre pages, idéalement avec une image et un petit texte (lorem ipsum) pour ne pas travailler à l’aveuglette.

ajouter pages

2e étape spécifiquement pour ce thème, il faut mettre une page statique en accueil :
Dans Réglages > Lecture (cliquer sur l’image pour zoomer).

Les choses sérieuses commencent :-)
Si vous aimiez ou aimez jouer au Lego© et bien ça n’a rien à voir ! enfin si un peu. Un thème est composé de multiples fichiers, des morceaux de php, une ou plusieurs feuilles de styles, des images et pour être propre un screenshot.png…
selon votre machine les fichiers seront à mettre dans un dossier plus ou moins comme ceci
mac : file:///Applications/MAMP/htdocs/wordpress/wp-content/themes/–le nom de votre thème –/
pc : c:/wamp/www/wordpress/wp-content/themes/–le nom de votre thème –/
ftp : www/wordpress/wp-content/themes/–le nom de votre thème –/

obligatoire : index.php, style.css
obligatoire pour notre exemple : head.php, page.php
Curieusement index.php peut-être vide (ici comme l’accueil est sur une page, notre index.php sera vide) mais son absence empêcherait la validité du thème !
Toutes les informations sur notre thème seront dans l’entête de la feuille de style.

Voici un début pour style.css, j’y ajoute tout de suite un RESET (8 lignes qui améliorent les styles par défaut de nos navigateurs), je n’ai rien inventé le reset css vient d’ici et l’entête est une modification/adaptation de celui par défaut.

/*
Theme Name: PageOnly Alpha Turbo
Theme URI: http://wordpress.org/
Description: Un thème à la indexhibit
Version: II
Author: Ben Jaiunblog
Author URI:http://jaiunblog.com
Tags: 

PageOnly Alpha Turbo II

*/

/* Begin  */
/*  RESET   */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
q:before,q:after{content:''}
fieldset,img,abbr,acronym{border:0}
/* la suite */
/* bientôt */

en image :

La tête dans… la page ? le header.php
Nos pages vont s’afficher grâce au fichier page.php, c’est une moulinette de wordpress qui pour simplifier dit que si on affiche une page statique, celle-ci se construit selon page.php. Page.php commence par une fonction php get_header(); qui va chercher et afficher header.php, on a donc un morceau de tête qui s’intercale…
On pourrait faire un collage rapide copier/coller de tout le header.php dans page.php mais l’intérêt ici est de pouvoir récupérer l’header dans d’autres pages comme dans l’index.php (pour bien comprendre, il faudrait regarder le thème par défaut de wordpress car ici notre thème n’exploite pas cette avantage).
header.php

<?php
	/**
 	* @package PageOnly
	*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
	<div id="page">
	    <div id="col">
			<div id="header">
			<h1><a href="<?php bloginfo('home'); ?>"><?php bloginfo('name'); ?></a></h1>
			</div><!--fin de div header-->
<ul><?php wp_list_pages('title_li=<h2>Pages</h2>'); ?></ul>
		</div><!--fin de la div col-->

page.php

<?php
/**
 * @package WordPress
 */
get_header(); //ceci charge le fichier header.php
?>

	<div id="content">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p>Read the rest of this page &raquo;</p>'); ?>
				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
			</div>
		</div>
		<?php endwhile; endif; ?>
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
	</div><!--fin de content-->
</div><!--fin de page-->
</body>
</html>

Dans header.php une ligne php nous intéresse particulièrement :

<ul><?php wp_list_pages('title_li=<h2>Pages</h2>'); ?></ul>

Le php va produire du html en communicant avec la base de données, ici il va faire une liste des pages que l’on a ajouté dans wordpress avec les liens.

en version simplifiée

<ul>
<li><a href="page01">page 01</a></li>
<li><a href="page02">page 02</a></li>
</ul>

en version moulinette WordPress avec les options classiques (voir la documentation de wp_list_pages)

<ul>
<li class="pagenav">
<h2>Pages</h2>
<ul>
<li class="page_item page-item-24"><a href="http://localhost/wordpress/01/" title="01">01</a></li>
<li class="page_item page-item-25"><a href="http://localhost/wordpress/02/" title="02">02</a></li>
<li class="page_item page-item-26"><a href="http://localhost/wordpress/03/" title="03">03</a></li>
<li class="page_item page-item-27"><a href="http://localhost/wordpress/04/" title="04">04</a></li>
</ul>
</li>
</ul>

Pour le reste dans page.php, en simplifiant, ça affiche le titre, le contenu de notre page et un bouton « éditer » si la personne qui visite le site est autorisée à modifier la page.

...
<h2><?php the_title(); ?></h2>
...
<?php the_content('<p>Read the rest of this page &raquo;</p>'); ?>
...
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

Voici le code en html produit par tout ce php :

<body class="page page-id-24 logged-in">
	<div id="page">
	    <div id="col">
			<div id="header">
			<h1><a href="http://localhost:8888/wordpress">*****</a></h1>
			</div><!--fin de header-->
			<ul><li class="pagenav"><h2>Pages</h2><ul><li class="page_item page-item-24 current_page_item"><a href="http://localhost:8888/wordpress/01/" title="01">01</a></li>
			<li class="page_item page-item-25"><a href="http://localhost:8888/wordpress/02/" title="02">02</a></li>
			<li class="page_item page-item-26"><a href="http://localhost:8888/wordpress/03/" title="03">03</a></li>
			<li class="page_item page-item-27"><a href="http://localhost:8888/wordpress/04/" title="04">04</a></li>
			</ul></li></ul>
		</div><!--fin de la colonne-->
	<div id="content">
		<div class="post" id="post-24">
		<h2>01</h2>
			<div class="entry">LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM !</div>
		</div>
		<p><a class="post-edit-link" href="http://localhost:8888/wordpress/wp-admin/page.php?action=edit&amp;post=24" title="Modifier l&rsquo;article">Edit this entry.</a></p>	</div><!--fin de content-->
</div><!--fin de page-->
</body>

Fin des choses sérieuses :-) on passe à la suite et donc au CSS… une remarque pertinente serait de constater un peu trop d’emballage de div inutiles qui n’auront pas besoin de CSS, on pourrait les supprimer (libre à vous) sauf si vous voulez mettre plusieurs images en background et faire des sous-blocs… je suis parti du thème par défaut qui emballe beaucoup :-).

En lisant le html et avec un peu d’intuition les blocs à css-ifier sont #page, #header, #col, #content, body, p, ul, li, a…
C’est l’heure de faire un schéma de nos blocs et de leurs places pour éclaircir la situation !

~~Fin de l’épisode 1.~~
En attendant que je peaufine mon CSS, un peu de techniques CSS et gabarits proches de notre résultat.

Les fichiers nécessaires seront ajoutés d’ici peu !
Pour aller plus loin, chez francis : http://www.fran6art.com/wordpress/creez-votre-theme-wordpress-de-a-a-z/

suite et fin
/* fichier css avec le maximum de commentaires ! */

/*
Theme Name: PageOnly Alpha Turbo
Theme URI: http://wordpress.org/
Description: Un thème à page à la indexhibit
Version: II
Author: Ben Jaiunblog
Author URI:http://jaiunblog.com
Tags: 

PageOnly Alpha Turbo II

*/

/* Begin  */
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
q:before,q:after{content:''}
fieldset,img,abbr,acronym{border:0}

/* Start */
/* mise en page */
body {
	font-size:62.5%; /* Resets 1em to 10px */
	font-family:'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Sans-Serif;
	background:#fff url(img/fond.gif) repeat-y top left;
	color:#333;
}

#col {
	width:100px; /*largeur de ma colonne */
	float:left; /* utile pour que #content soit au top */
}

#header {
	width:100px; /* décoration de la page */
	height:100px;
	background:transparent url(img/head.png) no-repeat top left;
}

#content {
	padding:17px 20px; /* blanc tournant */
	margin-left:100px; /* placement à gauche de la colonne de 100 px */
}

/* lien */
a {
	color:#bbbbbb; /*tous les liens du site */
	text-decoration:none;
}

/* lien dans la navigation*/
.pagenav ul {
	margin-right:27px; /* ajustement calage visuel */
	float:right; /* fer du bloc ul à droite */
}

.pagenav a:hover {
	color:black; /* au passage de la souris */
}

.pagenav a {
	padding-left:18px; /* pour l'ajout d'une puce bitmap */
	height:17px; /* fixe la hauteur */
	line-height:17px; /* centre le texte sur la verticale */
	display:block; /* pour fixer la hauteur */
	outline-style:none; /* suppr le cadre */
}

li .current_page_item a,li .page_item .page_item.current_page_item a {
	color:#555;
	background:transparent url(img/puce.png) no-repeat center left; /* une puce sur la page current */
}

/* typo */

h2 {
	/* titre h2 utilisé dans content */
	font-size:2em; /* 2 x 10px = 20px */
	color:#cccccc;
	border-bottom:solid 1px #ddd; /* filet */
	margin-bottom:20px;
}

#content p {
	width:400px; /* largueur maximum des textes */
	margin-bottom:20px; /* à améliorer pour la grille typo */
}

/* typo hors champ */
#col h2 {
	line-height:5px; /* pour gagner quelques pixels */
	text-indent:-9999px;
	border:none;
}

#header h1 {
	text-indent:-9999px;
}

Le résultat :) avec trois images en plus (un dégradé pour l’ombrage, un g entête et une puce).

Les fichiers : exhib.zip

php et programmation

20 janvier 2010 | programmation, tutorials | 2 commentaires

Voici un petit article pour démystifier la programmation et comprendre par l’exemple le php (pas forcement en détail mais au moins donner une idée de son usage et son rôle).
la programmation
Pour simplifier, on peut dire que la programmation sert à fuir les opérations répétitives en demandant à un ordinateur de s’en charger, le but est souvent de trouver une astuce pour faire en 5 minutes plus ou moins intenses une opération qui devrait prendre plus de 5 minutes, la gymnastique intellectuelle étant parfois amusante, on pourra aussi passer plusieurs journées pour finalement gagner que quelques minutes mais tomber sur des erreurs intéressantes (graphiquement). On utilise un ou plusieurs langages qui demandent des connaissances spécifiques selon les environnements, les envies, les contraintes mais dans la plupart des cas on trouvera les ressources indispensables ou utiles sur le net ou dans des livres !

exemple avec le php
Voici un exemple de script php (définition wikipedia) facile à appliquer et pratique (pour les graphistes).
J’ai trouvé ce bout de php ici, il affiche la liste des fichiers php présents dans un dossier

foreach (glob("*.php") as $file) echo "$file\n";

en français ça donnerait : pour chaque élément (de cette liste contenant (« des fichiers php ») tu en prends un) tu affiches « le nom de celui-ci »
en détail il y a trois fonctions :
glob() va chercher la liste des fichiers (comme un spotlight)
foreach ($machin as $truc) décompose $machin en $truc et applique en boucle à un $truc la ligne suivante (si $machin à dix $truc, j’aurais dix boucles)
echo « un truc » affiche un truc
(si c’est trop abstrait google -> glob, foreach, echo)

On va partir de la même base pour en faire une liste d’images, le php s’intègrera dans le html, mais il faut anticiper le résultat voulu, je voudrais avoir ce html :

<img src="image1.png" alt="image1.png"/> <img src="image2.png" alt="image2.png"/> <img src="image3.png" alt="image3.png"/>

Première retouche :

foreach (glob("*.png") as $file) echo "$file\n";

ceci affiche les noms des png dans le dossier
Deuxième retouche :

foreach (glob("*.png") as $file) echo "<img src=’$file’ alt=’$file’ />";

ceci affiche les images png.

Version finale avec le xHTML + CSS + reset du CSS + le nom du dossier
J’ai juste copié/collé deux ou trois trucs en plus…

<!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" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Liste des images jpg</title>
<style type= »text/css » media= »screen »>
/*reset du css */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
q:before,q:after{content: »}
fieldset,img,abbr,acronym{border:0}
/* mon css */
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: ‘Lucida Sans’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Arial, Sans-Serif;
background: grey;
color: white;
padding:10px;
}

h1{
font-size: 2em;
}
img{
display: block;
margin:10px 10px 0 0;
float:left;
}
</style>
</head>
<body>
<h1>liste des png du dossier : <?php echo dirname($_SERVER["PHP_SELF"]); ?></h1>
<?php
foreach (glob(« *.png ») as $file)
echo « <img src=’$file’ alt=’$file’/> »;
?>
</body>
</html>

Je vous laisse le zip du dossier à mettre dans le dossier htdocs ou www pour un test en localhost (en test local on lancera son serveur apache : mamp ou wamp ou lamp ou easyphp).

Télécharger les fichiers sources : list_png.zip avec une petite variante sur un « echo »…

image youtube

17 janvier 2010 | programmation, tutorials | 0 commentaire

Je viens de faire un petit plugin pour wordpress pour mettre les images de youtube dans mon flux (feed) RSS 2 sur ce blog.
C’est pour les articles qui passent dans certains lecteurs sans Flash.
Premier étape savoir que toutes les vidéos youtube ont une image de preview disponible ainsi :
http://www.youtube.com/watch?v=JWIoIOegZHE
à pour image ->
http://img.youtube.com/vi/JWIoIOegZHE/0.jpg

Deuxième étape connaitre le filtre pour le feed :

add_filter(‘the_content_feed’,'ma_fonction’);

Troisième étape l’expression régulière :
on va récupérer le JWIoIOegZHE sur le src après le embed et avant le &

$regex=’|<embed src.*?youtube.com/v/(.*?)&|’;

On finalise :

<?php

/*
Plugin Name: YoutubeImg
Plugin URI: http://jaiunblog.com
Description: affiche les images de youtube
Author: Ben
Version: 1.0
Author URI: http://jaiunblog.com
*/

$img= »;
function youtube($content) {
if(strstr($content, »youtube.com/v/ »)){
$regex=’|<embed src.*?youtube.com/v/(.*?)&|’;
preg_match_all($regex, $content, $result, PREG_PATTERN_ORDER);
$images = $result[1];
foreach($images AS $image){
$img= $img. »<a href=’http://www.youtube.com/watch?v=$image’><img src=’http://img.youtube.com/vi/$image/0.jpg’/></a> »;
}
$content=$img.$content;
return $content;
}

}
add_filter(‘the_content_feed’,'youtube’);

?>

Ce n’est pas parfait, les images sont au début de l’article mais je vous laisse peaufiner :)

les liens, wordpress et opml

29 septembre 2009 | programmation, tutorials | 0 commentaire

Je viens d’ajouter des liens ! http://jaiunblog.com/liens/
Voici une technique pour ajouter dans votre blog votre marque-page firefox en quelques clics via le format OPML ;¬)

1re étape : installer ceci : OPML Support for Firefox
2e étape : menu / marques-pages / organiser… : j’exporte mon bookmark en OPML (sauf astuce ? il faut tout sauvegarder)
3e étape : je charge l’éditeur d’OPML http://editor.opml.org/
4e étape : j’ouvre mon « gros » OPML, je copie/colle les branches souhaitées dans un nouveau fichier OPML, je sauvegarde !
5e étape : j’ouvre avec un éditeur texte (notepad++) et je passe l’encodage en ANSI (utf-8 ne marchait pas chez moi)
6e étape : dans WordPress / Outils / Importer / Liens – faire parcourir – choisir la catégorie – importer
7e étape : tester :-)

scriptographer

28 avril 2009 | tutorials | 3 commentaires

Si vous aimez Illustrator et que savez lire, cet article est pour vous ! Je vais y aborder le plugin (ou module en français) assez étrange Scriptographer, celui-ci a la particularité de vous permettre de créer des outils ou des scripts et ainsi d’ouvrir de nouvelles expérimentations.
Si vous êtes ou pensez être incompétents en programmation, il est livré avec des scripts, si vous aimez l’aventure — let’s go !

première étape : télécharger et installer !
http://www.scriptographer.com/Download/
le logiciel est gratuit mac os x et windows, java est nécessaire et la dernière version est toujours la plus performante !
J’utilise celui sous Illustrator CS 2, la version scriptographer 2.0.023.

Une fois installé, on a deux outils dans la palette verticale // et ** (des pinceaux magiques) et des fenêtres en plus, les pinceaux magiques en regardant sur le site vous devriez découvrir leurs usages !

L’aide du site devrait vous aider à surmonter les difficultés d’installation.

On se lance !
Comme on peut le voir sur ma capture, les scripts sont des fichiers textes .js éditables par double clics. En bas de la fenêtre principale « scriptographer » , on trouve des pictos « play », « stop », « rafraichir », « nouveau », « console d’erreur et sortie », « // » et « ** ».
Faites « nouveau » et nommer le « coloriage.js » . Éditer-le (sur pc notepad ou mieux notepad++).

On va faire un script qui applique une liste de couleurs « rouge, violet, jaune , rose, bleu, vert » successivement sur les objets sélectionnés. Ça donne ceci ;¬)

scripto02

On commence par faire « var sel = activeDocument.getSelectedItems(); » qui récupère la sélection multiple…
Ensuite on définie notre palette de couleurs

var colorz = new Array();
colorz[0]=new RGBColor(0.5,0,1); // violet
colorz[1]=new RGBColor(1,0,0); //rouge
colorz[2]=new RGBColor(0,1,0); // vert
colorz[3]=new RGBColor(0,1,1); // bleu clair
colorz[4]=new RGBColor(1,1,0); // jaune
colorz[5]=new RGBColor(1,0,1); // rose

Les couleurs sont codées en RVB de 0 à 1 par couche et pas de 0 à 255.
J’ajoute un compteur « var count » afin d’appliquer la colorz 0, puis 1,2,3,4,5… puis 0,1,2,3… quand count sera plus grand que le nombre de couleurs dans colorz, il revient à 0.
Puis j’applique la couleur sur mes éléments selectionnés en faisant la différence entre les textes et les autres.
Attention, si la sélection contient des groupes, ça ne marche pas (mais on devrait pouvoir y remédier), on dégroupe le plus possible (crtl + maj + G).

version complète coloriage.js :

var sel = activeDocument.getSelectedItems();
var colorz = new Array();
colorz[0]=new RGBColor(0.5,0,1); // violet
colorz[1]=new RGBColor(1,0,0); // rouge
colorz[2]=new RGBColor(0,1,0); // vert
colorz[3]=new RGBColor(0,1,1); // bleu clair
colorz[4]=new RGBColor(1,1,0); // jaune
colorz[5]=new RGBColor(1,0,1); // rose

var count = -1;

for (var i = 0; i < sel.length; i++) { // on fait une boucle dans notre sélection
count++; // on gère le compteur
if(count >(colorz.length-1)){
var count = 0;
} //

art = sel[i]; // art est un élément vectoriel
if (art instanceof TextFrame) { // si c’est un texte
art.characterStyle.fill.color= colorz[count]; // on applique la couleur n° 0,1,2,3… selon count
} else { // sinon
art.style.fill.color= colorz[count]; // on applique la couleur n° 0,1,2,3… selon count
} // fin du si c’est un texte
} // fin de la boucle

On sélectionne les objets à colorier (on dégroupe le plus possible) puis « play » en bas de la fenêtre scriptographer !
Done !

« Précédent

J'ai un blog

Archives Under "tutorials" (RSS)