• La technique dynamique : Utiliser une librairie PHP (au hasard, GD) qui permettrait de créer une nouvelle image dans laquelle coller une partie seulement de l’image originale. C’est compliqué, long, lourd et surtout, ça ne marche pas à tous les coups (pas de prise en compte des animations GIF, de la transparence PNG, etc …).
• La technique statique : Rien ne vaut le bon vieux HTML (ou pas), on renseigne la hauteur et la largeur est calculée automatiquement, ou alors on rentre les deux et l’image est toute déformée. Quel plaisir !
• La technique néandertalienne : On télécharge la photo sur son ordinateur, on ouvre Paint, on crop, et hop ! Mais il ne faut pas pousser mémé dans les orties, quand on a quelques dizaines de milliers de photos par jour à redimensionner, il faudrait alors un bon paquet de stagiaire pour en venir à bout.

Bien sûr, je ne peux pas tout lister, d’une part parce que je ne les connais pas toutes, d’autre part, parce que celles-ci évoluent tous les jours. Ainsi, je vais proposer, aux utilisateurs de smarty, un petit plugin de ma conception que j’utilise tous les jours. Le concept est très simple : un peu de php et un peu de CSS pour une image parfaitement adaptée et centrée sur tous les navigateurs web, que j’ai appelé, la cropbox.

Un peu de CSS

.cropbox {
overflow: hidden;
display: inline-block;
}

.cropbox img {
margin:auto;
}

Jusque là, pas vraiment besoins d’explication.

Un peu de PHP

Construisons notre plugin smarty (voir le tutoriel) ! Nous allons donc créer une fonction smarty que nous appellerons « crop » :

<?php
function smarty_function_crop($params, &amp;amp;amp;amp;$smarty) {

$info = @getimagesize($params['img']); // On récupère les informations liées à l'image

if(!$info): // Si l'image n'existe pas
return false;
endif;

// Définition des styles de la cropbox
if(isset($params['align'])): // On imite le paramètre HTML "align"
$style .= "float: ".$params['align'].";";
endif;

if(isset($params['border'])): // On définie la présence d'une bordure
$style .= "border: ".$params['border'].";";
endif;

if(isset($params['margin'])): // On défini les marges
$style .= "margin: ".$params['margin'].";";
endif;

// On calcules le format optimal de l'image ainsi que les marges associées

$img = $params['img'];
$alt  = $params['alt'];
$x_orig  = $info[0];
$y_orig = $info[1];
$x_crop = $params['width'];
$y_crop = $params['height'];
$margin_x = 0;
$margin_y = 0;
$ratio_orig = $y_orig/$x_orig;
$ratio_crop = $y_crop/$x_crop;
$ratio_x = $x_crop/$x_orig;
$ratio_y = $y_crop/$y_orig;

// On calcul les dimensions en se basant sur la hauteur fixe
$y_final  = $y_crop;
$x_final  = $x_orig * $ratio_y;
$margin_x = -($x_final - $x_crop)/2;
if($x_final < $x_crop): // Si ça ne colle pas
$y_final  = $y_orig * $ratio_x;
$x_final  = $x_crop;
$margin_y = -($y_final - $y_crop)/2;
$margin_x = 0;
endif;

return '<span style="width:'.$x_crop.'px; height:'.$y_crop.'px; '.$style.'">
<img src="'.$img.'" alt="'.$alt.'" width="'.$x_final.'" height="'.$y_final.'" style="margin-left:'.$margin_x.'px; margin-top:'.$margin_y.'px;" />
</span>';
} ?>

Ce qui donne

 {crop img="http://www.tiloweb.com/claramorgan.png" width="110" height="150"} 

Votre image sera parfaitement centrée dans le cadre aux bonnes dimensions.

Image 245x210 redimensionnée en 110x150 sans être déformée.

PS : Oui, j’ai choisi comme modèle Clara Morgan, simplement pour optimiser mon SEO : Sexy Engine Optimizer, histoire de fidéliser mes lecteurs masculins.

Le problème est simple : Comment savoir si l’index est présent dans un tableau associatif ?

Bien entendu, on peut faire de la manière suivante :

// Erreur javascript avec Titanium Appcelerator
if(array[key] != undefined) {
// ...
}

Oui mais voila, Titanium ne le prend pas en compte, ni même certains navigateurs. Comment faire alors ? Et bien la réponse est étonnamment simple, mais quand on ne la connait pas, on a du mal à l’inventer.

Rappelons-nous qu’en Javascript, un tableau, c’est avant tout un objet. L’index d’un tableau associatif est alors une propriété d’un objet. Ainsi, au lieu de faire notre recherche sur un index (ce qui provoque des erreurs), il suffit de faire une recherche sur la propriété.

// Marche sous Titanium Appcelerator ainsi que tous les navigateurs
if(array.hasOwnProperty(key)) {
//...
}

La méthode retourne une valeur booléenne, rien de plus simple. Je me sens ainsi bête d’y avoir passé autant de temps alors j’écris ces quelques lignes pour permettre à mes semblables perdus dans les méandres de google de trouver une réponse simple à un problème qui l’est tout autant.

Au programme de l’après-midi :

• Les fondamentaux du JS, présenté par Jean-Pierre Vincent. La génération actuelle de développeur (moi y compris) a de grosse lacune concernant les bases même de ce langage. Et j’ai été le premier étonné de voir, qu’au fond, comme beaucoup de monde, je ne maîtrisais pas les bases de ce langage qui est pourtant utilisable chez 99.5% des internautes (contre 95% pour flash). Très bonne présentation pour faire le point, donc, sur les namespaces, la Programmation Orientée Objet (POO), le SCOPE (domaine de portée  des variables et des fonctions).
• Les outils de Debug, par les très sympathiques David Rousset et David Cahute (expert en Troll Microsoft CHEZ Microsoft, un grand bravo), pour faire le tour des outils de développement d’Internet Explorer, de FireBug et de Chrome. C’est d’ailleurs avec une grande surprise que l’on a découvert des fonctionnalités trop peu connues d’IE (F12) comme le développement automatique de fichier JS compressé et le profiling.
• jQuery, par Aurélien Verla (Directeur technique de la société Wygwam, entreprise au palmarès impressionnant, tout autant que notre intervenant). Bien que mes connaissances sur ce framework de développement sont relativement déjà poussées, j’ai tout de même eu la chance d’apprendre les spécifications techniques me permettant maintenant de contribuer à ce projet, ce à quoi je ne manquerais pas (dans ce blog d’ailleurs). Merci également pour ce petit historique (passé et futur) ainsi que la présentation de son outil de sélecteur CSS Sizzle.
• Le choc des titans : Canvas VS SVG, par les deux survoltés David Rousset et David Cahute (encore !). La présentation était simple (mais complète). Entre Canvas et SVG, faites votre choix. Le miens est d’ailleurs fait grâce à vous ! SVG, bravo monsieur Rousset. En effet, le SVG reste accessible (et donc référençable), facile à écrire, facile à manipuler, compatible avec les spécifications du CSS3 (les animations notamment) et de nombreux outils de création existent sur le net !

Digital Dealer est la 1ère agence de communication online spécialisée pour la distribution Automobile en France.
Notre offre s’articule autour de 4 axes principaux :
Plateformes Web (sites, Intranet, boutique e-commerce…),
Plateformes mobiles (application Smartphones),
Plateformes réseaux sociaux (blogs, Facebook,…)
Services (web marketing).
Nous cherchons des collaborateurs passionnés par le Web et l’automobile !
Nous sommes aujourd’hui à la recherche d’un développeur web.

Missions principales :
- Développement et exploitation de sites internet
- Développement et exploitation d’un CMS dédié
- Développement et exploitation d’applications Facebook
- Développement et exploitation d’application iOS et Android en JavaScript (si si !)

Compétences absolument nécessaires :
- HTML/CSS/JS
- PHP/MySQL

Les connaissances du langage Smarty serait un réel plus ainsi qu’un usage courant de la langue anglaise.
Une expérience précédente (stage, alternance, CDD…) en agence Internet est nécessaire.
Sous les ordres de responsable technique et en équipe avec un autre développeur, vous serez également en relation directe avec d’autres membres de l’agence.
Des contacts ponctuels avec certains clients sont à prévoir.
Vous devrez donc avoir de réelles compétences techniques mais aussi un sens marqué du relationnel et de l’esprit de travail en équipe.

Rémunération : selon profil
Disponibilité : dès que possible
Poste basé à Paris

Envoyez votre CV et lettre de motivation à jobs@digitaldealer.fr

La société ECOPACK est, depuis 1995, spécialisée dans la distribution, la rénovation et l’intégration de systèmes de marquage industriels et vous propose des solutions efficaces pour vos différents besoins d’identification et de traçabilité.

Tiloweb vient de réaliser, pour le compte de la société ECOPACK, l’un de ses sites de vente Tête-thermique.fr. Véritable catalogue de tête-thermique, le site propose aux professionnels d’établir leur devis pour se procurer des produits de toutes les marques du secteur.

La prestation comprenait la création d’un nouveau design, d’une nouvelle architecture tout en respectant le désir d’optimisation du référencement (SEO) du site.