Web Design – Kodono

Get color_id from a Google Calendar using API [PHP]

Aymeric — Mon, 18 Apr 2016 07:50:13 +0000

For a project I needed to get the events from a Google Calendar, as well as the colors from it.

It’s been a pain, but after a couple of days I’ve been able to create a PHP page to do so. It will use the server-to-server auth mechanism.

I’ll try to provide the different steps (please note that my Google Console is in French so I tried to translate) :

Go to https://console.developers.google.com/apis/api/calendar/overview and Activate the Calendar API (or create first a project if required)
Once the API is activated you should be invited to go to the Identification part ; make sure you choose “Account Service Key” for the identification mode
Then pick “New Service” and complete the fields (choose JSON for the file format)
Download the JSON file and save it where your PHP file will stand on your web server
Open the JSON file and search for the client_email
Go to https://calendar.google.com/ and in the sharing parameters : make sure that you share your calendar in editing with the client_email address found in the previous step (the editing mode is required to get the Colors)
Now you need to install the PHP library from Google … in my case I don’t have a console access on the server, so I transfered the files from Github to the web server, in the same directory as our PHP file will be (so I got a folder called google-api-php-client-1.1.7)

Create your PHP file with the below content :

setApplicationName("Google Calendar");
$data = json_decode(file_get_contents('YourKeyFile-xxxxx.json'));
$client_id = $data->client_id;
$client_email = $data->client_email;
$cred = new Google_Auth_AssertionCredentials(
  $client_email,
  array(Google_Service_Calendar::CALENDAR),
  $data->private_key
);

// Remember to cache the access token locally if making multiple calls
// and don't just use this function for each request!
$client->getAuth()->refreshTokenWithAssertion($cred);
$service = new Google_Service_Calendar($client);
$optParams = array(
  "calendarId"   => "TheGoogleAccountForTheCalendar@gmail.com",
  "singleEvents" => true,
  "timeZone"     => "Europe/Paris",
  "maxResults"   => 250,
  "timeMin"      => date("c", strtotime("midnight")), /* to get events from today... */
  "timeMax"      => date("c",strtotime('+3 day')), /* ...to the 3 next days */
  "orderBy"      => "startTime"
);
$events = $service->events->listEvents('TheGoogleAccountForTheCalendar@gmail.com', $optParams);
?>


  
    
    
    
    
  
  
getItems() as $event) {
      $endTime = new DateTime($event->getEnd()->getDateTime());
      echo $event->getSummary() ." [".$event->getColorId()."] (".$endTime->format('Y-m-d').")
";
    }
    $pageToken = $events->getNextPageToken();
    if ($pageToken) {
      $optParams['pageToken'] = $pageToken;
      $events = $service->events->listEvents('lgpmontpellier@gmail.com', $optParams);
    } else {
      break;
    }
  }
?>

Finally you can refer to the Google Calendar API.

FYI I retrieved the below colorId for the below available colors:

    // same order as the image above
    switch ($event->getColorId()) {
      case 9: $color="#5484ED"; break;
      case 1: $color="#A4BDFC"; break;
      case 7: $color="#46D6DB"; break;
      case 2: $color="#7AE7BF"; break;
      case 10: $color="#51B749"; break;
      case 5: $color="#FBD75B"; break;
      case 6: $color="#FFB878"; break;
      case 4: $color="#FF887C"; break;
      case 11: $color="#DC2127"; break;
      case 3: $color="#DBADFF"; break;
      case 8: $color="#E1E1E1"; break;
      default: $color="#AC725E"; // the first one in the picture, the one that is checked
    }

Autosize a text to fit into a div in pure/native JavaScript

Aymeric — Thu, 12 Mar 2015 08:44:38 +0000

I was looking for a very tiny and light solution to fit a text inside a box. The box’ height and width are fixed. I only found some great solutions like BigText but I didn’t want to have jQuery loaded.

Finally I found some code on StackOverflow and also at Coderwall. I created my own solution that could only work with my own HTML code… but I share it here, maybe that could help someone else.

The HTML code:

  
    This is my text !

The related CSS code:

.ribbon-front { overflow:hidden }

And the JavaScript code:

var autoSizeText = function(selector) {
  "use strict";
  var el, elements, i, len, style, fontSize, IEoffsetHeight;
  elements = document.querySelectorAll(selector);
  if (elements.length <= 0) return;
  
  for (i=0, len = elements.length; i < len; i++) {
    el = elements[i];

    // we start from 0px and we grow by 0.5 until the content is too large
    fontSize=0;
    el.style.fontSize = "0px";
    // fix for all IE : I cache the offsetHeight, and if it becomes really bigger than the previous value, then we stop!
    IEoffsetHeight = el.offsetHeight;
    // check if our content is out its box
    while (el.scrollHeight===0 || el.scrollHeight >= el.offsetHeight) {
      fontSize += 0.5;
      el.style.fontSize = fontSize + 'px';

      if (el.offsetHeight - IEoffsetHeight > 10) break;
      IEoffsetHeight = el.offsetHeight;
    }
    el.style.fontSize = (fontSize - 0.5) + 'px';
  }
};
autoSizeText('.ribbon-front > span');

It works for IE8-IE10 and with all modern browsers.

You can see a demo at codepen.

Gérer les évènements touch sur mobile [JavaScript]

Aymeric — Mon, 23 Feb 2015 18:09:47 +0000

J’ai un projet sur lequel j’ai deux évènements “mouseenter” et “mouseleave” gérés par jQuery (pour faire le “hover”), et je voulais un comportement similaire sur mobile. Pour ce faire, je voulais qu’un “tap” affiche ce que le “hover” affiche avec la souris, puis qu’un second “tap” permette d’accéder au contenu (comme un “clic”). La solution était assez simple, mais j’ai été ensuite confronté au problème du “scroll”…. en effet il confondait le “scroll” avec un “tap”.

Pour empêcher ce comportement, il faut tester si on effectue un “scroll” en s’aidant de $(window).scrollTop():

var scrollPos=0;
$('#elem').on('mouseenter', function() {
  // affiche quelque chose quand la souris est sur la zone
  $(this).addClass('hover');
}).on('mouseleave', function() {
  // cache le contenu lorsque la souris n'est plus dans la zone
  $(this).removeClass('hover');
}).on('touchstart', function(event) {
  // lorsqu'on tape avec son doigt on doit récupérer la position dans la page
  scrollPos=$(window).scrollTop();
}).on('touchend', function(event) {
  event.preventDefault();
  // puis ici on vérifie que ce n'est pas un scroll
  if(Math.abs(scrollPos - $(window).scrollTop()) < 3){
    // si on entre là dedans c'est qu'on a bien effectué un simple "tap"
    var $this=$(this);
    if ($this.hasClass('hover')) {
      // effectue l'action de clic liée à ce bloc ... c'est donc le second "tap"
    } else {
      // effectue la même opération que lorsque la souris est dans la zone
      $this.addClass('hover');
    }
  }
});

Extraire une image d’un PDF [Astuce]

Aymeric — Wed, 11 Feb 2015 14:01:11 +0000

Pour extraire une image d’un PDF vous pouvez utiliser Photoshop…. ou Gimp ! Ce logiciel gratuit permet également d’extraire une image d’un PDF. Il suffit d’ouvrir le document PDF avec Gimp et il va vous proposer de choisir l’image à extraire.

Simple et efficace.

Dynamically inject a CSS code into the page [JavaScript]

Aymeric — Wed, 28 May 2014 13:28:09 +0000

Mozilla created a function that permits to inject some CSS into the document: addStylesheetRules()

But if you use jQuery you may want to use this function:

function injectCSS(rule) {
  $("head").append('')
}

// example
injectCSS("div { padding:5px }")

Simple Org Chart in HTML/CSS/JS for Sharepoint

Aymeric — Wed, 30 Oct 2013 16:11:18 +0000

In my job I’ve had to create an organizational chart on our Sharepoint.

Find more on the Github Repository I opened for this little project: OrgChart-JS-Sharepoint

Obtenir une couleur plus sombre ou plus claire pour CSS [javascript]

Aymeric — Tue, 22 May 2012 12:40:18 +0000

EDIT du 22/05/2012 : il existe un site qui permet de trouver plusieurs dégradés à partir d'une couleur, et ça se passe sur http://0to255.com/
EDIT du 20/09/2012 : et voilà encore un autre site un peu plus intéressant que le précédent http://sassme.arc90.com/
EDIT du 25/09/2012 : une autre fonction/méthode plus légère est disponible tout en bas du billet

Voici un petit outil en ligne qui permet d'avoir une couleur plus claire ou plus sombre en se basant sur une couleur CSS et en demandant un pourcentage (exprimé entre 0 et 1) à appliquer :

Couleur CSS:
Pourcentage à appliquer:

Résultat:

Cette fonction vient directement de stackoverflow.com :

var pad = function(num, totalChars) {
    var pad = '0';
    num = num + '';
    while (num.length < totalChars) {
        num = pad + num;
    }
    return num;
};

// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
    // Trim trailing/leading whitespace
    color = color.replace(/^\s*|\s*$/, '');

    // Expand three-digit hex
    color = color.replace(
        /^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,
        '#$1$1$2$2$3$3'
    );

    // Calculate ratio
    var difference = Math.round(ratio * 256) * (darker ? -1 : 1),
        // Determine if input is RGB(A)
        rgb = color.match(new RegExp('^rgba?\\(\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '\\s*,\\s*' +
            '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
            '(?:\\s*,\\s*' +
            '(0|1|0?\\.\\d+))?' +
            '\\s*\\)$'
        , 'i')),
        alpha = !!rgb && rgb[4] != null ? rgb[4] : null,

        // Convert hex to decimal
        decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(
            /^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,
            function() {
                return parseInt(arguments[1], 16) + ',' +
                    parseInt(arguments[2], 16) + ',' +
                    parseInt(arguments[3], 16);
            }
        ).split(/,/),
        returnValue;

    // Return RGB(A)
    return !!rgb ?
        'rgb' + (alpha !== null ? 'a' : '') + '(' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ) + ', ' +
            Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ) +
            (alpha !== null ? ', ' + alpha : '') +
            ')' :
        // Return hex
        [
            '#',
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[0], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[1], 10) + difference, darker ? 0 : 255
            ).toString(16), 2),
            pad(Math[darker ? 'max' : 'min'](
                parseInt(decimal[2], 10) + difference, darker ? 0 : 255
            ).toString(16), 2)
        ].join('');
};
var lighterColor = function(color, ratio) {
    return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
    return changeColor(color, ratio, true);
};

// Use
var darker = darkerColor('rgba(80, 75, 52, .5)', .2);
var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);

Une autre méthode, plus légère, inspirée par stackoverflow:

function LightenDarkenColor(col,amt,usePound,num,f,h,r,b,g) {
  if (col[0]=="#") {
    col = col.slice(1);
    usePound = (usePound==undefined?true:usePound)
  }

  num = parseInt(col,16);
  f=function(n) { return n>255?255:(n<0?0:n) }
  h=function(n) { return n.length<2?"0"+n:n }
  
  r = h(f((num >> 16) + amt).toString(16));
  b = h(f(((num >> 8) & 0x00FF) + amt).toString(16));
  g = h(f((num & 0x0000FF) + amt).toString(16));

  return (usePound?"#":"") + r + b + g;
}

LightenDarkenColor("#FAB787",10);
LightenDarkenColor("#FAB787",-15);
LightenDarkenColor("FAB787",5,true);

Datepicker pour Bootstrap [Javascript]

Aymeric — Mon, 02 Apr 2012 15:29:29 +0000

Edit 5/04/2012 : d’autres personnes ont fait comme moi, et vous pouvez trouver leur repository sur https://github.com/eternicode/bootstrap-datepicker — ils ont corrigé les mêmes bugs visiblement et ont ajouté quelques petites choses comme le support i18n (internationalisation du format de la date)

J’ai découvert un datepicker qui utilise l’excellent Bootstrap de Twitter (vous savez c’est un ensemble de CSS qu’on peut utiliser pour des effets très réussis), et qui rend comme ça :

Je me suis empressé de l’utiliser dans un projet, jusqu’à ce que je me rende compte qu’il ne fonctionne pas avec Bootstrap v2.0.2, et ni avec IE7+ …. Du coup j’ai modifié le code d’origine pour outrepasser ces divers problèmes (plus d’autres petites choses). J’aurais proposé mon patch au créateur s’il utilisait GitHub, mais ce n’est pas le cas, donc j’ai créé un repository pour ce projet là : https://github.com/Aymkdn/Datepicker-for-Bootstrap

Il ressemble en tout point à la version d’origine, sauf qu’il fonctionne maintenant pour IE et pour la dernière version de Bootstrap. Il permet aussi d’avoir la date du jour comme date par défaut (au lieu du 1/1/1970 ….), et évite d’avoir une date sélectionnée automatiquement lorsqu’on ne fait que passer par le champ en utilisant la touche TAB.

Et bien sûr il y a la démo.

CSS3 PIE pour créer un border-radius sur IE [webdesign]

Aymeric — Thu, 09 Feb 2012 10:52:47 +0000

Si vous cherchez à faire un border-radius sur un vieux IE vous avez dû vous rendre compte que cela ne fonctionne pas… mais heureusement il existe CSS3 PIE qui est un “petit” fichier qui va permettre de créer l’effet désiré !

A noter cependant que je rencontre un problème : lorsque j’applique le fichier htc avec behavior alors j’ai ma couleur de fond (background-color) qui devient invisible / disparait. Ce problème peut-être résolu en appliquant la règle CSS suivante (solution trouvée sur leur forum):

* { position:relative }

Grâce à ça tout fonctionne sous IE

Réduire la taille d’une web font et bien plus encore…. [bookmark]

Aymeric — Thu, 01 Dec 2011 21:00:42 +0000

Le site FontSquirrel propose un outil très puissant qui va vous transformer votre font en tous les formats (woff, eot, ttf, svg, …), mais il vous propose aussi de réduire la taille de votre font pour une utilisation Web (ce qu’on nomme le “subsetting”). Par exemple si vous n’allez avoir besoin que des chiffres, il est dommage de télécharger une font de 500ko qui contient tous les caractères de tous les alphabets, alors qu’en ne conservant que les chiffres on pourrait tomber à 10ko.

Un outil à utiliser de toute urgence si vous devez traiter avec des web fonts !

Simple effet highlight sur un element avec jQuery [javascript]

Aymeric — Tue, 19 Jul 2011 15:48:59 +0000

[niveau: intermédiaire]

Si vous souhaitez créer un effet highlight sur un élément (en passant le background en jaune par exemple), voici comment il faut s’y prendre :

jQuery.prototype.highlight = function() { 
  jQuery(this).css("background-color","yellow").fadeTo('slow', 0.1, function() {
    jQuery(this).fadeTo('slow', 1.0, function() {
      jQuery(this).css("background-color","white");
    });
  });
};

jQuery('#mon-element').highlight();

Les widgets de la sidebar WordPress ne se sauvegardent pas [WordPress]

Aymeric — Sat, 19 Feb 2011 11:20:16 +0000

[niveau: intermédiaire]

Vous utilisez WordPress et avez choisi un des nombreux thèmes gratuits qu’on trouve sur le Net. Et puis vous souhaitez utiliser la barre latérale (“sidebar”) pour afficher dynamiquement des widgets comme WordPress le permet ? Cependant vous remarquez que même en cliquant sur “Save”, les widgets ajoutés ne se sauvegardent jamais…

Tout d’abord vous devez aller vérifier le fichier sidebar.php (“Barre latérale”) dans l’éditeur de votre thème.
Voici un exemple de ce que vous devriez avoir:



 
  About
  This is my blog.
 
 
  Links
  
   Example

C’est le code par défaut qui fonctionne pour que la sidebar s’affiche correctement. Vous devriez donc d’abord tester en insérant ce code là. On notera que s’il n’y a pas de widgets, alors la barre affichera les deux éléments définis par défaut (ici “About” et “Links”).

Maintenant, il suffit d’activer la sidebar dans le fichier “functions.php” de votre thème. Pour cela, voici le code que vous devriez avoir dans ce fichier :

C’est tout, seulement ces quatre lignes. Il dit à WordPress qu’il doit activer une sidebar. Maintenant, les widgets doivent pouvoir s’ajouter et se sauvegarder sans problème.

Supposons maintenant que vous ne voulez pas utiliser le code par défaut, mais que vous voulez une barre latérale un peu plus personnalisée.
Voici un exemple avec des div :



 
  About
  This is my blog.
 
 
  Links
  
   Example

Et le code associé à mettre dans le fichier functions.php :

 '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
    ));
?>

Maintenant vos widgets devraient s’enregistrer sans problème !

(Source: http://automattic.com/code/widgets/themes/)

Equivalent de ModalBox de okonet.ru en jQuery [javascript]

Aymeric — Wed, 16 Feb 2011 11:25:16 +0000

J’ai longuement cherché un équivalent en jQuery de ModalBox qui est, lui, basé sur PrototypeJS. Je voulais avoir cet effet MacOS X qu’il donne à ses fenêtres popup.

Après d’infructueuses recherches je suis finalement tombé sur SimpleModal qui propose exactement le même effet de popup basé sur un style MacOS X, et le tout pour jQuery !

J’espère que ce post servira à ceux qui cherchent comme moi un équivalent jQuery à ModalBox

Emuler Internet Explorer de Windows Mobile [Web Design]

Aymeric — Tue, 03 Aug 2010 17:48:28 +0000

[niveau: intermédiaire]

Pour tester la version mobile d’Internet Explorer il vous faut installer tout un attirail :
– Virtual PC 2007;
– Gestionnaire pour appareils Windows Mobile 6.1;
– 040C/Windows Mobile 6 Professional Images (FRA).msi (attention de bien prendre la version PROFESSIONAL).

Une fois tout cela installé, il faut procéder à plusieurs étapes :

Dans le menu Démarrer, choisissez Windows Mobile 6 SDK, puis Standalone Emulator Images, French et Professional; une fois lancé, cliquez sur File, Configure… puis Network et cochez la case “Enable NE2000 PCMCIA” et prenez votre connexion dans la liste déroulante.
Lancez maintenant Device Emulator Manager depuis le menu Démarrer de Windows; une fois lancé, dans l’arborescence, cliquez droit sur ce qui correspond à l’émulateur et prenez l’option “Cradle”.
Maintenant lancez le Gestionnaire pour appareil Windows Mobile depuis le menu Démarrer
Le gestionnaire devrait détecter votre émulateur et l’ajouter; de là vous pourrez configurer la connexion réseau en suivant cette image :
Maintenant vous devriez pouvoir lancer Internet Explorer sur votre émulateur et vous devriez avoir accès à Internet !

Convertir des ’em’ en ‘px’ (WebDesign)

Aymeric — Mon, 05 Oct 2009 10:13:15 +0000

[niveau intermédiaire]

Lorsqu’on crée des CSS, il arrive qu’on s’y perde un peu entre les px bien pratiques, et les em tout aussi pratiques mais bien moins parlant….

Le site http://pxtoem.com/ propose de convertir des pixels en em.

Tester son site sous plusieurs résolutions [Web Design]

Aymeric — Fri, 03 Jul 2009 05:59:46 +0000

[niveau: débutant]

Via Presse-Citron j’ai découvert le site View Like Us qui propose de voir à quoi ressemble un site web selon la résolution de l’écran, allant de l’iPhone à au 1920×1200, en passant par la Wii.

Rapide, gratuit et efficace.

Installer Linux dans Windows et tester ainsi les navigateurs Linux [Web Design]

Aymeric — Wed, 13 May 2009 10:18:48 +0000

[niveau: intermédiaire]

Linux est un système d’exploitation qui était réservé au geek, mais depuis plusieurs années les distributeurs font en sorte que cet OS soit plus facile à installer et à utiliser. Linux apparaît d’ailleurs de plus en plus comme une alternative à Windows.

Il y a donc plusieurs raisons qui pourraient vous pousser à installer Linux:
– tester pour voir à quoi ça ressemble
– regarder les applications disponibles
– comprendre comment il est configurable
– tester les navigateurs pour vos sites web

Pour entrer dans le monde merveilleux du Pingouin (qui en est la mascotte), vous avez principalement trois solutions:

l’installation pure et dure du système en parallèle de Windows, c’est-à-dire que vous choisissez l’un ou l’autre au démarrage de la machine
l’utilisation d’un LiveCD qui offre la possibilité de démarrer sur un CD (ou une clé USB) qui contient Linux et ainsi de le tester sans rien installer sur l’ordinateur
virtualiser Linux (à l’instar de ce que je vous ai montré l’autre fois pour tester les IE)

Je vais ici vous expliquer le dernier cas. En effet, je connais déjà bien Linux, et l’intérêt majeur pour moi de l’installer est de pouvoir tester Firefox, Epiphany, et autres navigateurs afin de m’assurer du design d’un site web.

Virtualiser Linux dans Windows est simple. Si la dernière fois nous avons utilisé VirtualPC c’est parce que Microsoft fournissait des images déjà prêtes pour leur logiciel. Mais cette fois-ci, nous allons plutôt utiliser VirtualBox. Pourquoi ? Parce que si vous installez Linux (et ici ce sera Ubuntu) dans VirtualPC, alors vous allez avoir une résolution d’écran de 800×600, ce qui n’est pas franchement pratique. Les démarches pour passer en une résolution supérieure sont compliquées et risquées, alors qu’avec VirtualBox il suffit de quelques commandes !

La première chose à faire est donc de télécharger VirtualBox (j’utilise dans cet exemple la version “VirtualBox 2.2.2 for Windows hosts”). Ensuite, il vous faut télécharger une distribution Linux. Il en existe des centaines de versions… Plusieurs sites essaient de vous guider, comme Comment ça marche. Pour notre cas pratique nous prendrons Ubuntu qui est l’une des plus utilisées.
Il vous faut récupérer l’image ISO d’Ubuntu (à l’heure où j’écris ces lignes le fichier est ftp://ftp.crihan.fr/releases/9.04/ubuntu-9.04-desktop-i386.iso).

Une fois téléchargé, ouvrez VirtualBox (que vous aurez déjà installé). Cliquez sur “Nouveau” :

Pour le nom inscrivez “Ubuntu”, et pour système d’exploitation prenez “Linux” et la version “Ubuntu” :

Continuez avec les options par défaut.

Une fois fini vous devriez avoir cela :

Maintenant cliquez sur “Lancer” afin d’activer l’assistant de premier lancement. Celui-ci vous demande ce que vous voulez installer. Choisissez “Disque Optique” et “Fichier Image” en sélectionnant le fichier iso que vous avez téléchargé précédemment (“ubuntu-9.04-desktop-i386.iso”) ;

L’écran d’installation d’Ubuntu va démarrer. Vous n’avez plus qu’à choisir “Français” (avec les flèches) puis de prendre “Installer Ubuntu” :

Laissez les options par défaut proposées. Après plusieurs clics et quelques minutes vous vous retrouvez sous Ubuntu ! Malheureusement vous remarquez que vous êtes en résolution 800×600… Voilà un problème de résolution d’écran qui est simple à régler.

Tout d’abord, vérifiez que vous n’avez aucune image CD chargée. Pour cela, votre bureau Ubuntu doit être vide de toute icône. Si vous voyez une icône en forme de CD avec un nom qui commence par Ubuntu, alors faites un clic droit dessus puis “Ejecter”. Une fois fait, sortez de la machine virtuelle (en appuyant sur la touche “Ctrl” de votre clavier, mais celle qui se trouve à droite), puis aller dans Périphériques > Installer les Additions invité… :

Devrait alors apparaitre une icône avec un CD sur le bureau :

(si ce n’est pas le cas, allez dans Machine > Redémarrage pour redémarrer la machine virtuelle)

Maintenant, dans Ubuntu, allez dans Applications > Accessoires > Terminal. Une fenêtre au fond blanc s’ouvre. Vous allez y taper les commandes suivants :
sudo su /* entrez votre password défini durant l'installation */ cd /media/cdrom0 ./VBoxLinuxAdditions-x86.run
Après quoi le système vous indique qu’il doit redémarrer. Ce qui doit donner :

Pour redémarrer, allez dans Machine > Redémarrage. Une fois le boot terminé, vous verrez Ubuntu avec une résolution d’écran équivalente à la vôtre !

Vous n’avez plus qu’à lancer Firefox pour découvrir le rendu de votre site, et vous pouvez installer d’autres navigateurs pour les tester.

Quelles polices de caractères utilisées sur le web ? [Web Design]

Aymeric — Tue, 12 May 2009 10:34:04 +0000

[niveau: intermédiaire]

Si vous n’êtes pas un webdesigner professionnel, vous vous demandez sans doute quelles polices de caractères sont utilisables sur le Web. Peut-on utiliser une fonte personnalisée? Quelles sont les principales familles de fontes génériques?

C’est ainsi qu’est introduit le billet d’Alsacreation qui vous explique parfaitement les polices disponibles pour la plupart des navigateurs.

Dans cet excellent billet, l’auteur nous propose plusieurs polices de caractères:

/* Polices à empattements (serif) */
font-family: Times, "Times New Roman", "Liberation Serif", FreeSerif, serif;
font-family: Georgia, "DejaVu Serif", Norasi, serif;

/* Polices sans empattements (sans-serif) */
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
font-family: Impact, "Arial Black", sans-serif;

/* Polices à chasse fixe (monospace) */
font-family: Courier, "Courier New", FreeMono, "Liberation Mono", monospace;
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;

Enfin vous pouvez retrouver un tableau très bien fait chez Dustin sur « Web safe and common fonts ».

Tester votre site dans Opera Mini [Web Design]

Aymeric — Tue, 05 May 2009 11:25:00 +0000

[niveau: expert]

Je vous ai déjà expliqué comment tester votre site sur IE6, IE7 et IE8, et maintenant je vous propose un émulateur pour voir le rendu de votre site sur Opera Mini. Pour cela il suffit d’aller sur http://www.opera.com/mini/demo/ qui offre une applet Java pour tester la version mobile du navigateur.

A noter que je n’ai réussi à voir l’émulateur qu’avec le navigateur Opera…

Adapter la taille des polices de caractères selon les navigateurs [Web Design]

Aymeric — Sun, 03 May 2009 10:43:01 +0000

[niveau: expert]

OpenWeb propose un excellent article nommé « Compatibilité multi-navigateurs des polices de caractères » où ils y expliquent les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web.

Pour résumer, il est conseillé de ne pas utiliser une unité absolue (comme le ‘px’, le ‘pt’, le ‘cm’, etc). Evitez donc de noter dans votre style CSS quelque chose comme:

body { font-size: 15px; } /* défini la taille par défaut de tout le texte */

A cela, préférez des unités relatives, et en l'occurrence l'utilisation de 'em' et de '%'.
Il suffit de définir la taille du texte par défaut en '%' au niveau du body, et d'utiliser 'em' au niveau du reste de vos conteneurs.

Mais comment savoir l'équivalent entre le % et le 'px' ? Pour cela OpenWeb nous propose un tableau d'équivalence :

Valeurs en %	Valeurs équivalentes en 'px'
57	9
65	10
71	11
77	12
82	13
88	14
96	15
103	16
109	17
115	18
121	19

Ainsi, notre CSS donnera :

body { font-size: 96%; } /* équivaut à 15px */

Grâce à cette méthode, votre texte s'adaptera très bien quelque soit le navigateur et la taille de l'écran de vos lecteurs.

Comment réaliser un bon formulaire HTML [à bookmarker]

Aymeric — Mon, 27 Apr 2009 12:38:45 +0000

[niveau: expert]

Je vous invite à lire ce billet consacré à “comment réaliser un bon formulaire HTML” qui donne de vrais bons conseils sur cet exercice plus compliqué qu’il n’y parait.

(via Alsacréations)

Tester un site sous IE6, IE7 et IE8 [Web Design]

Aymeric — Mon, 20 Apr 2009 05:30:55 +0000

[niveau: intermédiaire-expert]

Quand on crée un site Internet, il faut toujours s’assurer que le rendu est correct. L’exercice devient complexe lorsque l’on souhaite que tout fonctionne pour les différentes versions d’Internet Explorer. Vous n’êtes pas sans censés savoir que, en particulier IE6, les Internet Explorer sont une catastrophe et qu’il faut utiliser des astuces pour rendre ses sites web d’aussi bonne facture sur les autres navigateurs que sur les IE!

Comme il n’est pas possible d’installer plusieurs IE sur une même machine (ou alors en faisant preuves d’astuces plus ou moins réussies), il existe une solution beaucoup plus simple : installer des machines virtuelles faites exprès par Microsoft et qui embarquent différentes versions d’IE !

Pour cela, il suffit d’installer Virtual PC (gratuit). Ensuite, il faut se rendre sur cette page dédiée où on vous propose :
– Windows XP SP3 avec IE6
– Windows XP SP3 avec IE7
– Windows XP SP3 avec IE8
– Windows Vista avec IE7

Vous remarquez que ces images de Windows ont une durée de vie. Une fois la date expirée, vous devrez retourner sur le site pour télécharger une nouvelle image.

Pour installer une machine virtuelle, c’est rapide et simple. Lancez le .exe de l’image Windows téléchargée, et choisissez où vous désirez extraire votre disque dur virtuel. Puis lancez Virtual PC. Une console apparait alors dans laquelle vous cliquez sur “Nouveau”.
Un assistant s’ouvre. Sélectionnez la première option (“Créer un ordinateur virtuel”). Donnez un nom à l’ordinateur (par exemple “IE6 XPSP3”). Ensuite choisissez une configuration par défaut (ici “Windows XP”). A l’étape suivante vous pouvez modifier la quantité de mémoire (pour XP je mets 256Mo au lieu des 128Mo proposés).
Enfin, à l’étape suivante, utilisez un disque existant, et en l’occurrence celui que vous avez extrait du fichier téléchargé précédemment (dans mon exemple “XP SP3 with IE6 2008-Dec.vhd”).
Et voilà !

La console de Virtual PC vous offre alors Windows XP avec IE6. Cliquez sur Démarrer, et Windows va se lancer dans une nouvelle fenêtre. Vous n’aurez plus qu’à ouvrir IE6 et à vous balader sur votre site web pour considérer votre rendu.

Hello, I’m an example		Highlight
Total	31337	Highlight

Web Design – Kodono

Get color_id from a Google Calendar using API [PHP]

Autosize a text to fit into a div in pure/native JavaScript

Gérer les évènements touch sur mobile [JavaScript]

Extraire une image d’un PDF [Astuce]

Dynamically inject a CSS code into the page [JavaScript]

Simple Org Chart in HTML/CSS/JS for Sharepoint

Obtenir une couleur plus sombre ou plus claire pour CSS [javascript]

Datepicker pour Bootstrap [Javascript]

CSS3 PIE pour créer un border-radius sur IE [webdesign]

Réduire la taille d’une web font et bien plus encore…. [bookmark]

Simple effet highlight sur un element avec jQuery [javascript]

Les widgets de la sidebar WordPress ne se sauvegardent pas [WordPress]

About

Links

About

Links

', 'after_title' => '

Equivalent de ModalBox de okonet.ru en jQuery [javascript]

Emuler Internet Explorer de Windows Mobile [Web Design]

Convertir des ’em’ en ‘px’ (WebDesign)

Tester son site sous plusieurs résolutions [Web Design]

Installer Linux dans Windows et tester ainsi les navigateurs Linux [Web Design]

Quelles polices de caractères utilisées sur le web ? [Web Design]

Tester votre site dans Opera Mini [Web Design]

Adapter la taille des polices de caractères selon les navigateurs [Web Design]

Comment réaliser un bon formulaire HTML [à bookmarker]

Tester un site sous IE6, IE7 et IE8 [Web Design]