TreeGarden

Liste au p�re no�l.

Cher papa no�l du W3C, je veux �a impl�ment� dans tous les navigateurs pour noielle. Tu sais, j'ai �t� tr�s sage. Merci !

Choosing a default color palette for OOo charts

Choosing a color palette for OOo is quite a tough challenge, 12 shades of gray is a lot, 7/8 is the limit of what you can distinguish "easily". So I tried a pragmatic approach, with shades of gray from 25% to 90%, a first row of 6 colors sticking to 10 multiples, and a second one with multiples of 5. Then setting saturation to 100% (assuming vibrant colors are the best to draw charts), there's only the hue left to play with. So aesthetically speaking, it's, hum, perfectible. Slight gradient to darker colors somehow improve the results.

Anyway, IMO, the best way to make colors stand-out on any background are outlines (I like thick rounded outlines, but it gives a cartoonesque look which might be inappropriate). Inverse video is also very efficient, but not always nice to the eyes. Yet another solution is to associate two colors, one for the fill and another one for the outline so your chances of confusion are lowered (2 hints instead of 1). Or to associate motifs to colors (stripes, bubbles, stars), but this does not work for lines.

Anyway, here's a first try

Visualiser tous les liens rel=nofollow

En tant que webmestre, il peut �tre int�ressant de voir d'un seul coup d'oeil si un back link a l'attribut rel="nofollow". Firefox, ses s�lecteurs CSS avanc�s et son fichier userContent.css rendent cel� tr�s facile.

Le fichier userContent.css se situe dans votre profil firefox, par exemple chez moi: C:\Documents and Settings\<MON NOM>\Application Data\Mozilla\Firefox\Profiles\<MON PROFIL>\chrome. Renommez donc le fichier userContent-example.css en userContent.css. Les r�gles CSS contenues dans ce fichier sont applliqu�es � toutes les pages affich�es par firefox. Profitons donc de ses s�lecteurs avanc� pour cr�er une r�gle s�cifique aux liens ayant un attribut rel="nofollow":

a[rel ="nofollow"]:after {
	color: gray;
	font-size:80%;
	content: "\0000a0∅";		
}

Cette r�gle ajoute le symbole ∅ en gris � la suite de tous les liens rel=nofollow. Sauvegardez, relancez firefox, et visitez un page contenant de tels liens…

Set your feed on fire

http://feeds.feedburner.com/treegarden

Technorati claim

Technorati Profile

Palette switching script for Illustrator

Already had to convert vectors made in CMYK ignorant programs, like, say, inkscape and wanted to print them with a predefined and fixed palette ? Illustrator scripting capabilities saves you hours of repetitive work.

First of all, credits where credits are due, this script is based on Randomize Colors, by John Wundes .

This script works on solid fills and strokes, on gradients and on vectorized text (could not succeed to make it work on regular text, any hint is welcome). It changes predefined CMYK values to other ones. The match on the predefined value has a certain tolerance (default 1%). A color which is not matched is turned to a highly visible red, letting you know where something went wrong. This complete javascript documentation for illustrator unveils of the secrets of the internal form of illustrator, and in many ways it's cleaner than the clumsy Illustrator GUI.

There are 3 parts in this script:

2 arrays containning the source palette and the destination palette. Colors with identical indexes will be swapped.
An internal form walker, working on the current selection, and calling itself recursively while walking the internal form. When we reach the final colors, the swap is realized.
2 Functions to find the destination color from object color and the correspondance tables.

And now, here is the script:

//Stick to CMYK Palette
//JS code modifications (c) Aubanel MONNIER
//http://un.regne.net
//Original was:
//Randomize Colors
//JS code (c) by John Wundes 
// johnwun@aol.com
// www.wundes.com
//////////////////////////////////////////////////////////////////

len = app.activeDocument.selection.length;
gradAlert = 0;
strokes = false;
epsilon = 1; //1% of error margin
palette=[
        0, 0, 0, 0,  //blanc
        87.06, 19.61, 0, 0, //Bleu electrique
        23.92, 3.53, 1.18, 0, //Bleu Ciel
        94.90,60.78,34.90,29.019,//P�trole
        1.96, 59.60, 89.01, 0, //Orange tricycle
        1.96, 29.8, 41.57, 0, //Peche
        28.62, 67.84, 94.11, 16.07,//Fruit Pourri
        58.03, 3.13, 100, 0.39, //Vert Tendre        
        20.39, 0, 52.54, 0, //Vert Tilleul
        72.54, 29.01, 99.21, 13.72, //Vert Sapin
        37.64,25.09,0,0, //Mauve
        10.59,5.49,1.57,0, //Lavande
        83.92,66.27,0,0, //Nuit
        5.88, 17.64, 27.45, 0.78, //Chene
        23.52, 43.92, 78.82, 9.80, //Beige
        43.92, 65.49, 94.90, 57.25, //Chocolat
        2.35,13.72,92.54,0.39, //Jaune d'or
        3.52,3.92,41.96,0, //Jaune pale
        39.99,39.99,97.64,26.66, //Caca d'oie
        1.17, 96.07, 84.70, 0,  //Rouge Camion
        2.35, 14.50, 1.96, 0, //Rose pale
        37.25, 83.92, 92.54, 36.07,//Bordeaux
        9.41, 6.27, 4.71, 0.39, //Gris10  
        18.82,12.94,10.2,1.18, //Gris20
        27.06, 19.22, 16.08, 3.14, //Gris30
        35.29,25.49,22.35,6.67, //Gris40
        42.75,31.37, 28.63,12.94, //Gris50
        49.02,36.47,34.51,21.96, //Gris60
        56.08,42.35,41.57,32.94, //Gris70
        62.35,48.63,48.63,47.84, //Gris80
        68.63,54.9,56.08, 69.41, //Gris90
        0, 0, 0, 100, //Noir
        ];
swapTo=[
        0, 0, 0, 0,  //blanc
        91, 43, 0, 0,//Bleu electrique
        25, 10, 0, 0, //Bleu Ciel
        91,43,0,70,//P�trole
        0, 60, 94, 0, //Orange tricycle
        0, 30, 50, 0, //Peche
        0, 60, 100, 40,//Fruit Pourri
        40,0,100,30, //Vert Tendre        
        20,0,50,0, //Vert Tilleul  
        40, 0, 100, 60, //Vert Sapin  
        34,30.5,0,6, //Mauve
        11.5,8.5,0,0, //Lavande
        69,65,0,30.5, //Nuit        
        0, 15, 30.5, 6, //Chene
        0, 24, 76, 30.5, //Beige
        0, 51, 100, 76, //Chocolat
        0,15,94,0,//Jaune d'or
        0,5,43,0, //Jaune pale
        0,18.5,100,56, //Caca d'oie
        0, 100, 91, 0,  //Rouge Camion
        0, 15, 6, 0, //Rose pale
        0, 76, 76, 60,//Bordeaux
        0, 0, 0, 10, //Gris10
        0, 0, 0, 20, //Gris20
        0, 0, 0, 30, //Gris30
        0, 0, 0, 40, //Gris40
        0, 0, 0, 50, //Gris50
        0, 0, 0, 60, //Gris60
        0, 0, 0, 70, //Gris70
        0, 0, 0, 80, //Gris80
        0, 0, 0, 90, //Gris90
        0, 0, 0, 100, //Noir
        ];
        
defaultColor=0,100,100,0;
log='';        
if (len == 0) {
	alert("Please select one or more objects. Grouped objects will not be affected.");
} else if(app.activeDocument.documentColorSpace == "DocumentColorSpace.RGB") {
  alert("Document is in RGB Mode ! Switch it to CMYK.");
} else {
	ob = app.activeDocument.selection;
	
       
	for (j=0; j<len; j++) { 

                changeObjectPalette(obj);

        
        
	} 
if (log =='') log='Done !'
alert (log);
}
function changeObjectPalette(obj){
//uncomment to debug
                //alert(obj.typename);
                
//only owrks on vectorized text                
                
if (obj.typename=='CMYKColor'){

//a cmyk color, find the best replacement
  swapColorToNearest(obj);
}

if (obj.typename=='GroupItem'){
//a group, recursive call on all page items
for (l=0; l <obj.pageItems.length; l++ ) {
  changeObjectPalette(obj.pageItemsl);
}
}
if (obj.typename=='TextFrame') {
//Mmmh ,some text
//recurse on the text Range
  //changeObjectPalette(obj.textRange);
changeObjectPalette(obj.textPath);
  //alert(introspect(obj));
}
if (obj.typename=='TextPath') {
  changeObjectPalette(obj.fillColor);
}
if (obj.typename=='TextRange') {
//A text range. Get all the inner character style (style pere char)and the  paragraph styles
for (m=0; m <obj.characterStyles.length; m++ ) {
  changeObjectPalette(obj.characterStylesm);
}
for (m=0; m <obj.paragraphStyles.length; m++ ) {
  changeObjectPalette(obj.paragraphStylesm);
}

}
if (obj.typename=='CharacterStyle') {
//recurse on character attributes
  changeObjectPalette(obj.characterAttributes);
}
if (obj.typename=='ParagraphStyle') {
//recurse on character attributes 
  changeObjectPalette(obj.characterAttributes);
}
if (obj.typename=='CharacterAttributes') {
//get colors

  changeObjectPalette(obj.fillColor);
  changeObjectPalette(obj.strokeColor);
}


if (obj.typename=='GradientColor') {
changeObjectPalette(obj.gradient);       
          }
if (obj.typename=='Gradient') {   
nbStops= obj.gradientStops.length;
            for (k=0; k<nbStops; k++) {
          changeObjectPalette(obj.gradientStopsk);
        } 
}
if (obj.typename=='GradientStop') {
changeObjectPalette(obj.color);       
}
          
if (obj.filled == true) {
changeObjectPalette(obj.fillColor);
}
if (obj.stroked == true) {
        changeObjectPalette(obj.strokeColor);
}

if (obj.typename=='CompoundPathItem') {
for (m=0; m <obj.pathItems.length; m++ ) {
  changeObjectPalette(obj.pathItemsm);
}
}

}

function introspect(obj){
property_list='';
for (prop in obj) 
  property_list += prop +"\n";
return property_list;
}

function swapColorToNearest(c){
  swap = findNearColor(c);
  c.cyan = swap0;
  c.magenta = swap1;
  c.yellow = swap2;
  c.black = swap3;

}

function findNearColor(c){

for (i=0; i < palette.length ; i++) {
 if 
   (nearColor(c.cyan,c.magenta,c.yellow,c.black,palettei0, palettei1, palettei2, palettei3)
   ||
   nearColor(c.cyan,c.magenta,c.yellow,c.black,swapToi0, swapToi1, swapToi2, swapToi3)
 )
 {
 return swapToi;
 }    
}
log+='No match for C '+c.cyan+' M '+c.magenta+' Y '+c.yellow+' K '+c.black+"\n";
   
     return defaultColor;
}

function e(s,r){
return (s >= (r-epsilon)) && (s <= (r+epsilon));
}

function nearColor(cs, ms, ys, ks, cr, mr, yr, kr){
  return e(cs, cr) && e(ms, mr) && e(ys, yr) && e (ks, kr);

}

To install it, drop it in the C:\Program Files\Adobe\Illustrator CS\Param�tres pr�d�finis\Scripts directory, it is available from the File->Scripts menu.

UPDATE: modified the funtion findNearColor to make the colors already in the destination palette not beeing swapped.

How is an adsense made ? How can I affect their display ?

Let's observe the beast. The usefull tools are Firefox; equiped with the webdev toolbar. Adding addsenses in a page is inserting a call to the http://pagead2.googlesyndication.com/pagead/show_ads.js script. This script is obfuscted, so normal humans have difficulites to understand its behaviour. What we can see is the result of this script, executed upon the loading of the page. Select the Adsense without clicking it, right click->view selected source. You should see something like that:

<script type="text/javascript"><!--
google_ad_client = "pub-8315147201128023";
...
google_color_url = "54724A";
google_color_text = "2F2005";
//--></script>

This javascript snipet prepositions variables used by the show_ads.js script

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

This is the call to the script acting onload. You actually pasted these few lines in your HTML code, so it is normal to see those here.

<iframe name="google_ads_frame" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-8315147201128023&amp;dt=1147..." marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" height="125" scrolling="no" width="125"></iframe>

This iframe was inserted by the javascript and sources a page on the googlesyndication.com server. The long list of parameters are used by the server to display a targeted add.

The content of an iframe does not uses the CSS from the source page. But it isaccessible via the DOM: details are on QuirksMode

The first way we can try to modify the way its displayed is playing with the iframe itself, provided you do not have other iframes on your page; e.g. to have a fixed add in the top right left add the following statements in your CSS file:

iframe { position:fixed; top:0; right:0; }

If you have several adds on the same page, they'll pile up, and that's bad.

Adsenses ? Why ?

I just added adsenses to this blog. Not that I am willing to make money from it, with 6K visits a month, I highly doubt I will hit the 100$ required to receive the first check.

The reason is twofold:

In my professional life, I am an anouncer, using Adwords to reach visitors searching about DO-178B and IEC 61508 code generators. I just wanted to know how the other side of the system was working. My first impression is: wow, how easy it is !
I want ot experiment of what it is possible to do with Adsenses and CSS, and maybe a bit of javascript.

As a user, I am a bit disapointed, having always thought Ads are bad, I find myself clicking on adds, not for earning money (I'm sure google has the means to remove my clicks), but because the adds actually interest me. Their algorythm to find targetted Ads seems pretty good, so lets play a bit and see the results.

NB: should I ever receive a check from google, the first one will be for regne.net which hosts me freely.

Cyrillic enters the D�jaVu Fonts

From inkscape to illustrator

What should you avoid in inkscape to have neat illustrator imports of the svg:

Text using transparency. Use path->Object To Path on such text if really needed.
Gradients using transparency. If it is applied ont top of an uniform surface, its easy to flatten, compute the right colors with the pick color tool.
Images in inkscape are translated in two objects in illustrator: the image itself, which appears scaled down, and an invisble rectangle with the correct size. Resize the image to fit the invisible rectangle.

I am sure i'll find more and will udate this list to track possible solutions ...