Je vous présente le dernier né de la famille, Arthur LESNIAK, notre 3ème enfant.

Le petit est né vendredi 14 juin 2013, et mesurait 46.5cm, pour 3.06 kg à la naissance.

Le petit, la maman, les 2 grands frères et le papa se portent tous très bien :)

Le HTML5 commence à envahir les sites, et c'est tant mieux ! Je vous propose ici de découvrir quelques trucs et astuces qui pourront vous aider à concevoir de belles pages en HTML5 (et aussi vous simplifier la vie ;))

Expressions régulières

Fini l'appel au javascript pour valider une saisie utilisateur ! Autoriser ou nom la soumission d'un formulaire n'a jamais été aussi facile grâce à l'attribut pattern des INPUT :

<input type="text" name="phone-number" pattern="\[0-9\]*" value=""/>

La ligne ci dessus n'autorise que les chiffres. Pas d'autres caractères superflus ! (mais cela ne vous empêche pas de valider la saisie côté serveur, en PHP par exemple)

Download

Avant, lorsque vous vouliez forcer le téléchargement d'un élément à partir d'une page (un PDF par exemple) vous n'aviez pas trop de solutions. Soit vous jouiez avec un .htaccess pour ce fichier en question, soit vous le serviez via PHP, pour modifier les headers de la page.

HTML5 vous permet de contourner ce problème. Il est désormais possible de forcer le téléchargement d'une ressource (et même de spécifier son nom) via l'attribut download de la base A :

<a href="http://www.eskuel.net/imgblog/2013/05/danoquette-coupable.jpg" download="danoquette.jpg">Télécharger ici la photo de danoquette</a>

Prefetch

Il est possible de dire au navigateur de charger automatiquement certains éléments qui ne sont pas présents sur la page grâve à prefetch.Imaginez sur un blog, vous pourriez charger automatiquement le dernier article en date, vos visiteurs ayant une très forte chance de vouloir le lire. Ainsi, en cliquant sur son lien, la page sera déjà chargée, et votre site aura l'air encore plus rapide !

<link rel="prefetch" href="http://www.eskuel.net/la-danoquette-quest-ce-que-cest-1508" />

A noter que pour Chrome, la manipulation est légèrement différente. Il faut non pas utiliser prefetch mais prerender, qui a pour but de préparer le rendu de la page en amont :

<link rel="prerender" href="http://www.eskuel.net/la-danoquette-quest-ce-que-cest-1508" />

DNS Prefetch

Par défaut, votre navigateur ne fait la résolution DNS que lorsque vous cliquez sur un lien, ou vous chargez une image. La résolution DNS peut prendre un peu de temps, surtout sur une connexion avec une forte latence (en 3G par exemple).

Le DNS prefetch marche un peu comme le prefetch ci-dessus, mais il ne charge pas de ressource. Il opère juste la résolution DNS en arrière plan, et met le résultat en cache. Ainsi lorsque la ressource située sur ce domaine devra être chargée, le lookup sera déjà fait, et la navigation fluidifiée.

<link rel="dns-prefetch" href="//www.google-analytics.com">

Datalist

Grâce aux Datalist, vous pouvez proposer sur un champ texte une suggestion de valeurs prédéfinies. Pas besoin de jQuery ou de requêtes en AJAX pour proposer la suggestion. Bien entendu, si votre liste est trop longue, il sera peut être plus judicieux de faire appel à un peu de javascript pour aller demander la liste à une base de données au fur et à mesure de la frappe.

<label for="choix_voiture">Indiquez la marque de votre voiture :</label>
<input list="liste-voitures" type="text" id="choix_voiture">
<datalist id="liste-voitures">
<option value="Peugeot">
<option value="Renault">
<option value="Citroën">
<option value="Danoquette">
</datalist>

Avec ça, vous êtes parés pour faire de superbes pages en HMTL5.

A vous de jouer !

Aujourd'hui, je vais vous parler d'un de mes nouveaux "jouets" : Sphinx Search

Sphinx, pour celles et ceux d'entre vous qui ne connaissent pas encore (bouuuu :p) est un moteur de recherche open source qui est utilisé sur des sites à forte fréquentation comme Craiglist, Joomla, Mysql.com, Scribd, et j'en passe.

Je ne vais pas vous expliquer comment installer et créer un index sous Sphinx, cet article ayant plutôt pour but de vous montrer comment exploiter les fonctionnalités de recherches géographiques du moteur.

En effet, en 2 temps, 3 mouvements, vous pourrez définir un index géographique, et l'utiliser pour récupérer les éléments de votre base de données situés à moins de X mètres d'un item donné.

Imaginez donc que vous possédez une table, listant tout une liste de points d'intérêts, ou même de villes, et que vous avez, pour chacun de ces items leurs coordonnées latitude / longitude (en degrés)

Votre but est donc d'obtenir, pour une ville donnée, les villes situées dans un rayon de 5 km.

Commençons tout d'abord par définir une source cities dans Sphinx, comme suit :

source cities
{
type = mysql
sql_host = localhost
sql_user = root
sql_pass = XXX
sql_db = ma_db

sql_query = SELECT id country, zip, name, \
RADIANS(lat) AS latitude, RADIANS(lon) AS longitude \
FROM cities;
sql_attr_float = latitude
sql_attr_float = longitude

sql_query_info = SELECT name FROM cities WHERE id=$id
}

Vous définissez tout d'abord les informations de connexion à la base. Ensuite viens la requête qui va vous permettre d'indexer les données :

sql_query = SELECT id country, zip, name, \
RADIANS(lat) AS latitude, RADIANS(lon) AS longitude \
FROM cities;

Pour que Sphinx puisse travailler efficacement avec vos coordonnées, il faut les convertir via RADIANS(). C'est là la seule difficulté de ce tutorial :)

Viens à présent le moment de définir un index utilisant cette source :

index cities
{
source = cities
path = /var/lib/sphinxsearch/data/cities
docinfo = extern
mlock = 0
morphology = none
min_word_len = 1
charset_type = utf-8
charset_table = 0..9, A..Z->a..z, _, a..z, U+410..U+42F->U+430..U+44F, U+430..U+44F
ignore_chars = U+00AD
html_strip = 0
enable_star = 0
}

Si vous avez déjà créé un index sous Sphinx, rien de ce qui est ci-dessus ne doit vous sembler étranger :)

Il ne vous reste plus qu'à lancer l'indexation de votre nouvelle config :

indexer --rotate cities

A présent, le clou du spectacle : l'interrogation de la base :)

$search = new SphinxClient();
$search->SetServer('localhost', 9312);
$search->SetMatchMode(SPH_MATCH_ALL);
$search->SetArrayResult(true);
$search->SetGeoAnchor('latitude', 'longitude', (float) deg2rad($latitude), (float) deg2rad($longitude));
$search->SetSortMode ( SPH_SORT_EXTENDED, "@geodist asc");
$circle = (float) $radius;
$search->SetFilterFloatRange('@geodist', 0.0, $circle);

$result = $search->Query('', 'cities');

Les variables $latitude et $longitude étant les coordonnées de votre item de référence, et $radius le rayon en mètres dont lequel doivent se situer les résultats.

Vous remarquerez l'attribut @geodist dans le filtre de recherche et dans le critère de tri. Cet attribut fourni par Sphinx représente la distance en mètres de vos résultats de recherche.

Maintenant, vous avez toutes les clés en main pour monter un super système de POI autour de votre position ;)

On continue dans la conquête du monde avec Meteosun :)

A présent, disponible sur le site :

• La météo en Nouvelle Zélande
• La météo en Malaisie
• La météo au Danemark
• La météo en Slovaquie
• La météo en Pologne
• La météo en Hongrie
• La météo en Bulgarie
• La météo en Roumanie
• La météo en Albanie
• La météo en Andorre
• La météo en Biélorussie
• La météo en Slovénie
• La météo en Estonie
• La météo en Russie
• La météo en Lituanie
• La météo en Lettonie
• La météo au Luxembourg
• La météo en Macédoine
• La météo en Ukraine

Have fun ! :)

Cela faisait un moment que cette idée me trottait dans la tête, et j’ai enfin décidé de franchir le pas. Il est temps de se lancer dans le fabuleux monde de l’Arduino.

Tout d’abord, un Arduino, qu’est-ce que c’est ?

Arduino, c’est la rencontre des développeurs et des p’tits génies de l’électronique. Rajoutez à ça une couche d’Open Source, et vous obtenez ce fabuleux mélange.

En fait, l’Arduino est un petit circuit imprimé, dont les plans sont disponibles gratuitement et sous licence libre : libre à chacun de faire sa propre plaque, voir même de la commercialiser. La seule restriction se situe dans l’utilisation du nom.

Sur ce circuit, vous trouvez un microcontrôleur ATmega328 avec 32ko de mémoire pour stocker vos programmes. Vous pouvez interagir avec ce microcontrôleur par le biais de 14 broches d’entrées / sorties numériques (0 ou 1) et 6 broches analogiques (une tension de 0 à 5V)

A partir de là, c’est à vous de jouer, et de l’interfacer avec ce que vous voulez : LED, servo moteurs, capteurs de lumières, de température, d’inclinaison, voir dans les montages plus évolués, un écran LCD et même un GPS ! Au niveau de la programmation, rien de bien compliqué, tout est très accessible. Il suffit de connaître les rudiments du C pour vous en sortir. Vous installez l’IDE Arduino, et d’un clic vous transférez votre programme dans la mémoire du microcontroleur. Simple

Histoire de bien commencer, je vous ai préparé un petit tutoriel, basé sur ce superbe kit Arduino que j’ai eu la chance de recevoir de la part de RS Components France.

Dans ce kit, vous trouverez l’essentiel pour bien débuter, et acquérir les bases des interactions sur Arduino (LED, résistances, un « BreadBoard », des condensateurs, boutons poussoirs, etc)

Voici donc le contenu du kit :

La première partie du tutorial consistera juste à allumer jusqu’à 3 LEDs de couleurs. Il suffit de raccorder les 3 LEDs chacune à une résistance, pour ne pas les griller, et ensuite chacune à une broche de l’Arduino.

void setup()
{
pinMode(2, OUTPUT);
pinMode(3, OUTPUT);
pinMode(4, OUTPUT);

digitalWrite(2, HIGH);
digitalWrite(3, HIGH);
digitalWrite(4, HIGH);
}

void loop()
{
}

Simple non ?

Allez, on s’attaque à un peu plus compliqué à présent Nous allons utiliser un bouton poussoir, pour allumer les LEDs de manières cycliques (d’abord la verte, puis la jaune puis la rouge, et on recommence)

Le but ici est d’utiliser non plus les sorties de l’Arduino (que nous avons vu dans l’exemple ci-dessus) mais de s’attarder sur l’entrée logique reliée à l’interrupteur.

int offset;

void setup()
{
pinMode(2, OUTPUT);
pinMode(3, OUTPUT);
pinMode(4, OUTPUT);
pinMode(5, INPUT);

digitalWrite(2, LOW);
digitalWrite(3, LOW);
digitalWrite(4, LOW);

offset = 0;
}

void loop()
{
if ( digitalRead(5) == HIGH ) {
offset++;

if ( offset > 2 )
{
offset = 0;
}
delay(300);
}
if ( offset == 0 ) {
digitalWrite(2, HIGH);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
}
else if ( offset == 1 ) {
digitalWrite(2, LOW);
digitalWrite(3, HIGH);
digitalWrite(4, LOW);
}
else if ( offset == 2 ) {
digitalWrite(2, LOW);
digitalWrite(3, LOW);
digitalWrite(4, HIGH);
}
}

A chaque tour de boucle dans la procédure principale, nous regardons si le bouton a été pressé. Si tel est le cas, on éteint la LED allumée, et on allume la suivante. Alors, conquis par la simplicité de la chose ? Faites un tour sur la page Arduino de RS Components pour voir tous les kits / extensions possibles A vous de jouer !

Cette semaine, pas de grosses trouvailles, rien d'aussi exceptionnel que la semaine dernière. Mais tout de même

Semaine spéciale Nintendo

Mario Land 2, Wario Land et Mario Kart GBA : 6€ (et dire que le vendeur voulait pas les lacher à moins de 7€)

Le roi lion, sur Game Gear avec boîte plastique : 1€ (faudra que je mette la main sur la console un de ces quatre 5 jeux N64 ( Star Wars shadow of the Empire, Le monde ne suffit pas, Mario Kart 64, Pilot Wings 64, Ridge Racer 64)+ rumble pack : 2€ pièce

Metroïd Fusion GBA + notice : 3€

Un lot GBA transparente, avec coque supplémentaire, housse officielle, lampe, cable link, batterie, 5 jeux GBA (Dragon ball Z Taiketsu, Britney's dance beat, Harry Potter et la coupe de Feu, Driver 3, Les Sims 2), 2 jeux GBC (Dragon Ball Z les guerriers légendaires, Titeuf) pour 15€ négocié (au lieu de 20) car le cache pile tient mal

2 Prince of Persia Gamecube quasi neuf, 4€ chaque :

Mercs Megadrive, en loose, 2€

et, Last but not least, Castlevania GBA pour ...... 2€

Bon j'ai toujours pas trouvé ma Gameboy Classic, mais je ne désespère pas

Pour mon grand, un boite de Lego Creator, complète : 5€