firefox 3.6

21 janvier 2010 | programmation | 0 commentaire

mon firefox

Yes ! il est là !
http://www.generation-nt.com/telecharger-firefox-navigateur-mozilla-actualite-947551.html
La good news c’est le « shift + pomme + F » enfin du fullscreen sur firefox mac !
ps : Cet article est écrit spécialement pour ma mère qui me demande toujours c’est pour quand la version stable de Firefox 3.6 !

panthère et bisounours

20 janvier 2010 | graphisme, vrac | 0 commentaire

C’est fou cette photo ! Et ce logo « lorie carrefour je positive attitude bisounours ».
source
ou en vidéo

inspiration

20 janvier 2010 | graphisme | 0 commentaire

J’aime beaucoup les sites web en une page, ça donne un petit goût d’interactivité sauce Flash ou ça pousse vers une lecture (adaptée ?) écran différente, en général je trouve ça pratique mais je suppose qu’en bas débit ce n’est pas mieux que du flash :) je vous laisse méditer sur cette sélection :
http://webdesignledger.com/inspiration/40-inspiring-single-page-websites
J’ai aussi un showcase de blog minimaliste sous le coude, c’est la fête du html !
http://spyrestudios.com/40-killer-minimalist-blog-designs/

les ultimes affreux

20 janvier 2010 | graphisme | 0 commentaire

À mi-chemin entre l’Eurovision et jeux sans frontières
voici une sélection mondiale incroyable des sites des gouvernements : http://www.noupe.com/showcases/the-ultimate-ugly-showcase-of-current-government-websites.html. La France est dedans mais ce n’est pas la page d’accueil http://www.gouvernement.fr/ encore plus douteuse.

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 »…

logorama

19 janvier 2010 | graphisme | 1 commentaire

Vu à la galerie Anatome – Je ne suis pas sure qu’il soit sur vimeo avec l’accord de h5… so enjoy ;¬)

guitar geek

19 janvier 2010 | vrac | 0 commentaire

Vu chez Korben, c’est tactile et tendance et pourtant j’y vois un keytar ou un truc à la jean-michel jarre (ça me rappelle aussi ringo et son grand corbeau noir)…
Plus d’informations sur ce contrôleur midi (pour midinette ?) http://www.misadigital.com/

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 :)