Enfin, je devrais dire : j’ai une brute !
Venez l’affronter : http://zevinch.labrute.fr !!!
Et que le meilleur gagne !
Enfin, je devrais dire : j’ai une brute !
Venez l’affronter : http://zevinch.labrute.fr !!!
Et que le meilleur gagne !
Cela faisait un petit temps que je voulais tester -webkit-transform et -webkit-transition, deux propriétés CSS qui fonctionnent exclusivement avec Safari (et son moteur de rendu WebKit) mais qui augurent de bonnes choses pour l’avenir du Web.
![]()
Sans plus attendre, voyez l’exemple qui vous démontrera les extraordinaires capacités de ces deux propriétés CSS (je rappelle que ça ne fonctionne qu’avec les dernières versions de Safari).
La première propriété CSS utilisée est -webkit-transform. On peut la voir à l’oeuvre quand la souris passe sur la photo :
#kelly:hover {
-webkit-transform: scale(1.5) rotate(360deg) skew(10deg);
}
* scale permet de zoomer sur la photo. Ici, on zoome à 150%.
* rotate permet de faire une rotation sur l’image. Ici, on fait une rotation de 360°, c’est à dire un tour complet.
* skew permet de biaiser l’image et prend un angle en argument (10° ici). En chipotant un peu, cela pourrait servir à faire de la 3D…
Je ne l’ai pas fait ici mais il est également possible de faire des translations via translate.
-webkit-transition permet d’animer tout ça :
#kelly {
(...)
-webkit-transition: all 0.5s ease-in;
}
Elle nécessite trois arguments :
* la propriété sur laquelle porte la transition. Ici, la transition porte sur toutes les propriétés mais j’aurais très bien pu remplacer all par -webkit-transform.
* la durée de la transition en secondes.
* le type de transition (linear, ease-in, etc.)
Inspirations :
* CSS Transforms sur Surfin’ Safari
* CSS Animation sur Surfin’ Safari
J’avoue, il n y a pas encore si longtemps, j’étais le premier à m’extasier publiquement de mon PageRank, de mon classement Wikio et de bien d’autres choses futiles…
Aujourd’hui, j’en ai assez de voir ces blogs qui ne parlent finalement de rien sauf de blogs en général ou pire : du blog en question. Alors, rédacteur du blog n°549362, sache qu’on s’en fout de savoir que :
* Tu as perdu 17 followers dans Twitter
* Tu as perdu 2 points de PageRank
* Tu as 3478 abonnés FeedBurner
* Tu es premier au classement Wikio (dans la catégorie blog pourri ?)
* Tu as gagné 9 places au classement Criteo
* Tu as 4014 amis sur Facebook
* Tu as 917 connections sur LinkedIn
Donc, qu’on arrête ces conneries, pour le bien de la blogosphère !
Voilà, je sais que je vais me faire incendier dans les commentaires mais j’y suis préparé, tout ça n’est qu’un bon vieux troll après tout !
* WordPress pour iPhone. Tiens, ça me fait penser, j’ai toujours pas d’iPhone moi (frimeur que je suis).
* De jolis graphiques en JavaScript avec jQuery.
* FirePHP : extension de Firebug qui permer de faire du debug PHP (via NiKo).
* Des nichons pour la Belgique !
* Réalisez vous-même un effet de mouvement en faisant bouger le calque supérieur.
* Where We Do What We Do : un petit aperçu des lieux de travail de chacun.
* Design patterns du marketing viral ! Idéal pour revoir quelques classiques.
* Un petit outil pour écrire à l’envers !
* Les appels à propositions pour Paris Web 2008 sont ouverts. Si vous avez une idée sympa de présentation, n’hésitez pas !
* Fantastique calculatrice en ligne.
* Une liste de quelques sites Web pour apprendre Flash et ActionScript.
* Adobe à propos du référencement des fichiers SWF…
* Failbook : un pastiche de Facebook avec les politiques français.
* Très beau site avec quelques sympathiques effets en JavaScript.
* Vous faites quoi ce soir ? Et si vous diniez avec 5 personnes de votre âge ?
* Opera Web Standards Curriculum
* Une façon presque idéale de programmer : Spartan Programming.
* Diagramme des différents types de café qui existent.
* Très joli portfolio en Flash.
* Quelques secrets de Mac OS X.
* Cheat sheets pour le développeur Web.
* Questions à la con…
Tiens, c’est marrant, j’allais justement faire un post un de ces quatre sur mes conventions de programmation, histoire de vous demander votre avis et pour voir quelles sont les vôtres. Même si je n’ai pas été invité à la fête, cette chaîne initiée par Godefroy et relayée par Babozor tombe à point nommé et je la reprends !
Tout d’abord, allez jeter un coup d’oeil à cet exemple de code PHP que j’ai écrit pour le site Pikaboo.
Notations
J’utilise des notations relativement standard : UpperCamelCase pour les noms de classes et lowerCamelCase pour les noms de fonctions et méthodes. Par contre, pour les variables, j’écris tout en minuscules et je sépare les mots par le caractère underscore. Depuis peu, j’essaye également d’utiliser cette notation (minuscules + underscore) pour les class et id en HTML (afin de répercuter cette notation en CSS).
Indentation
J’indente uniquement par tabulation (de la taille de quatre espaces), aussi bien pour PHP et JavaScript que pour HTML et XML. Je trouve qu’il s’agit du truc le plus important pour obtenir un code lisible. Dans certains langages (Python par exemple), il est même obligatoire de travailler de cette façon.
Accolades
Ma façon de placer les accolades me vient de je ne sais où mais je la trouve efficace : je place l’accolade ouvrante à la fin de la ligne contenant la déclaration de fonction ou la structure de contrôle (if, while, foreach, etc.), précédée par un espace. Par exemple :
foreach (...) {
...
}
ou
function myFunction(...) {
...
}
Autre détail important : même si le contenu d’une condition ou d’une boucle comporte une seule instruction, j’utilise les accolades. Cela évite de les ajouter si on rajoute une instruction mais ça évite surtout des arrachages de cheveux futurs.
Espaces
La, c’est un peu freestyle. J’utilise parfois des espaces pour séparer les paramètres dans une fonction, séparer les instructions dans une boucle for, autour des opérateurs de comparaison mais pas toujours ! Ca doit dépendre de mon humeur du moment… Par contre, je place un espace après le nom des structures de contrôle pour ne pas les confondre avec des déclarations de fonction (voire les exemples plus haut).
Guillemets
J’utilise toujours les simple quotes sauf si je n’ai pas le choix : variable dans la chaîne, tabulation (\t), retour à la ligne (\n) ou retour chariot (\r), etc. Ce n’est pas seulement une convention, c’est plus performant de bosser comme ça (enfin, c’est ce qu’on m’a dit, je n’ai pas fait de benchmarks, j’avoue).
Commentaires
Je suis mauvais élève pour ça. J’écris peu de commentaires. Je me dis toujours que je commenterai comme un fou et que je générerai de la documentation avec phpDoc mais je le fais rarement (jamais en fait). Par contre, quand un client m’ennuie, je mets des insultes à son égard dans les commentaires (je déconne).
En gros, je suis assez pointilleux sur certains points mais pas du tout sur d’autres. Y a t-il de bonnes pratiques officielles à ce sujet ? Quoi qu’il en soit et je répète ce que j’ai déjà lu à de nombreux endroits : peu importe la convention qu’on utilise, l’important est d’en suivre une et de s’y tenir.
Je refile la chaîne à qui le veut.
Comme Xavier semble y tenir, voici un petit post à propos du t-shirt RestoTendances que j’ai reçu lors du dernier Yulbiz. C’est déjà le douzième !
Honnêtement, je ne suis pas fan du t-shirt… Par contre, je vous recommande d’aller voir le site ! La partie bouffe était déjà ma préférée sur BlogTendances, je trouve que c’est une excellente idée d’en avoir fait un site séparé !
Sur la photo ci-dessous, je n’ai pas l’air heureux mais c’est parce que je n’ai pas pu aller dans la piscine car il a fait dégueulasse ce week-end !
N’hésitez pas à m’envoyer vous aussi vos t-shirts ! Vous trouverez toutes les informations utiles sur ce billet.
Il s’agissait d’un questionnaire difficile (surtout la dernière question qui était une “attrape”) et seules seize personnes ont osés s’y mesurer. Cela veut dire qu’un seul participant seulement n’aura pas la chance de gagner un cadeau (vu qu’il y a quinze lots).
Premièrement, voyons les réponses :
Désolé pour la dernière, c’était fourbe !
La liste des heureux gagnants (nom/pseudo du gagnant – score – date d’envoi du mail) :
1. Mich – 5/5 – 8/7 21:54
2. Marin – 5/5 – 8/7 22:21
3. Chacsam – 5/5 – 8/7 22:54
4. Mathieu Bazelaire – 5/5 – 9/7 11:54
5. Lionel Cordier – 5/5 – 9/7 18:16
6. Adrien Noterdaem – 5/5 – 10/7 09:22
7. Stéphanie Dehavay – 5/5 – 10/7 19:37
8. Adrien Fonzé – 4/5 – 8/7 21:00
9. David Georges – 4/5 – 8/7 22:06
10. skycri – 4/5 – 8/7 22:11
11. Adrien Housiaux – 4/5 – 8/7 22:27
12. Xavier Dellaert – 4/5 – 8/7 22:58
13. Michael Hulet – 4/5 – 9/7 09:42
14. Julien Collin – 4/5 – 9/7 10:41
15. Vincent Binon – 4/5 – 10/7 09:53
Vous pouvez voir ce que vous avez gagné dans le précédent billet. Merci encore à Pumbby, Quatuor, Taskii et King Clothing pour ces beaux cadeaux ! Envoyez-moi vos adresses postales pour la livraison des lots sur vincent[dot]battaglia[at]gmail[dot]com.
Ceci clôt officiellement Yulbiz-Bruxelles #4. Place au prochain !
On est souvent impressionné par l’aspect graphique d’un site Web. C’est ce qu’on voit en premier et c’est donc naturel qu’il en soit ainsi. Je n’ai jamais vu quelqu’un être impressionné par l’intégration, l’optimisation sur les moteurs de recherche ou le développement d’un site Web au premier coup d’oeil…
Pourtant, sur certains sites, il est possible de voir directement que le travail de développement est colossal et, avec un sentiment de respect melé avec de la jalousie, la première question qu’on se pose est : « Comment ont-ils fait ? »
Aujourd’hui, j’ai décidé de vous présenter deux sites qui m’ont tapé dans l’oeil au niveau développement. Je vais tenter de vous montrer comment ils ont été réalisés, en supposant que la technologie utilisée côté serveur est PHP.
Le premier site est Is it Christmas?, un site qui va, via un calcul savant, vous dire si le jour courant est le jour de Noël ou pas. Si vous ne souhaitez pas revenir chaque jour sur le site pour vérifier, vous pouvez même suivre le flux RSS !
Voilà à quoi pourrait ressembler le code source de ce site :
<?php $today = getdate(); $answer = (($today['mday'] == 25) && ($today['mon'] == 12)) ? 'YES' : 'NO'; echo $answer; ?>
Tout d’abord, je récupère la date du jour avec la fonction getdate de PHP. Cette fonction me renvoie un tableau où se trouve toutes les informations du jour courant. Ensuite, je vérifie que le jour courant est le 25 décembre, jour de Noël. Pour ce faire, je regarde si le jour du mois courant est le 25 (via $today['mday']) et si le mois courant est 12 (via $today['mon']) c’est-à-dire décembre. Si nous sommes le 25/12, la variable $answer aura la valeur YES. Dans tous les autres cas, elle aura la valeur NO. J’ai écrit ce script en trois lignes mais il est sans doute possible de le faire intelligemment en une ligne. J’attends vos propositions.
Le second site impressionnant dont je vais vous faire le making of est Sometimes Red, Sometimes Blue, un chef d’oeuvre dont je vous avais déjà parlé par le passé. Le principe de ce site est le suivant : parfois il est rouge, parfois il est bleu.
Voilà à quoi pourrait ressembler le code source de ce site :
<?php
$color_list = array("#0000FF", "#FF0000");
$color = $color_list[rand(0,count($color_list)-1)];
?>
<html>
<body style="background:<?= $color ?>;"></body>
</html>
Nos deux couleurs sont stockées dans le tableau $color_list. La partie compliquée se trouve entre les crochets. On y génère un nombre aléatoire entre 0 et 1 (c’est-à-dire 0 ou 1) ce qui va nous permettre de récupérer une des deux couleurs stockées dans le tableau. Il reste enfin à afficher cette couleur en fond de la page. De nouveau, il est possible de faire plus concis. J’attends vos propositions.
Pourquoi ce billet ?
* Pour rire
* Pour montrer qu’on peut TOUT faire en PHP
* Pour montrer que deux lignes de code suffisent pour créer un buzz.
Pas plus tard qu’aujourd’hui, on m’a encore laché : « Ah oui,
title c’est l’attribut qu’il faut mettre sur les images pour avoir un tooltip
parce que alt, ça marche pas sur Firefox ! »
C’est une discussion qui a déjà eu lieu 100 fois sur le Web, mais autant le
répéter une 101ème fois : Firefox fonctionne très bien (en fait). Voici
l’explication…
alt est un attribut que l’on place sur une image (tag img, mais aussi
area) et qui permet de spécifier un contenu textuel
alternatif (d’où le nom) au cas où, par une raison ou un autre, l’image ne
s’afficherait pas.
title est un attribut applicable sur quasiment tous les tags HTML et qui sert
à donner une indication, une information complémentaire par
rapport à un contenu, quel qu’il soit. Dans les navigateurs visuels, cela se
présente sous la forme d’un tooltip qui apparait au passage de la souris sur
l’élément et qui disparait après quelques secondes.
Par exemple :
ce texte est
muni d’un title
Le truc emmerdant, c’est qu’Internet Explorer se comporte de la même façon
pour l’attribut alt des images. On s’est vite habitué à cet état de fait et
ça semble normal qu’il en soit ainsi. Malheureusement et comme souvent, je le
regrette, IE est encore à côté de la plaque. Il ne respecte
par les recommandations du W3C en transformant l’attribut alt sur les images
en tooltip. En effet, afficher l’image en même temps que son contenu de
remplacement n’est pas du tout pertinent. Si on a l’un, pas besoin de l’autre.
Dans un match de foot, on ne fait pas jouer les titulaires et les remplaçants
en même temps !
Cet
article explique très bien la problématique et la confusion, donc je ne
vais pas tout réexpliquer, retenez juste qu’alt et title n’ont pas le même
but et la même utilité et que l’utilité en question ne consiste pas uniquement
à afficher des tooltips !
Voilà enfin le quiz ! Désolé pour le retard, je pense que vous êtes tous au courant de mes soucis d’hébergement auxquels j’ai du consacrer tout mon temps libre ces derniers jours.
Pour rappel, les lots sont les suivants :
\#1 : iPod Nano offert par Pumbby
\#2 : FatBoy Outdoor offert par Quatuor
\#3 à \#6 : Chèques cadeaux Bongo offerts par Taskii
\#7 à \#15 : T-shirts Yulbiz offerts par King Clothing
Je précise que seules les personnes présentes au Yulbiz-Bruxelles #4 à l’Atomium peuvent prétendre à un lot…
Le plus rapide à répondre correctement aux cinq questions ci-dessous remporte l’iPod, le second le FatBoy et ainsi de suite jusqu’au quinzième !
1. L’Expo 58, c’était à Bruxelles, mais où a lieu l’Expo de cette année 2008 ?
2. En quelle année Ilya Prigogine a t-il été prix Nobel de chimie ?
3. Combien de chaînes sont disponibles sur Zattoo Belgique au 8 juillet 2008 ?
4. Pumbby est une entreprise née d’un projet d’études. En quelle année a eu lieu ce projet d’études ?
5. Laquelle de ces personnes était absente au dernier Yulbiz à l’Atomium : Denis Balencourt, Damien Van Achter ou François Lamotte ?
Envoyez-moi vos réponses par e-mail à vincent[dot]battaglia[at]gmail[dot]com avec comme sujet “Quiz Yulbiz-Bruxelles #4“. Bonne chance !
(J’en profiterai pour envoyer les posters des langages de programmation que certains d’entre vous ont remporté lors du dernier concours…)