4 réactions Le
31 octobre 2007 à
11:15 par
Céd'
Plantons le décors : vous développez un site web 2.0, et vous désirez proposer à vos visiteurs la possibilité d’utiliser un avatar pour afficher graphiquement leur identité lors de leurs interventions sur le site.
La façon la plus directe, à priori, consisterait à coder une méthode vous-meme. Mais les inconvénients sont de poids, surtout si vous désirez bien faire les choses :
- Nécessité d’utiliser des librairies lourdes (GD, ImageMagick);
- Proposer l’upload, le recadrage, etc. demande un temps considérable;
- Exige de l’espace disque, surtout si votre projet commence à etre connu;
- etc.
Un homme intelligent évite l’effort inutile
, un homme intelligent utilisera donc Gravatar.
Gravatar (Globally Recognized Avatar), est un service en ligne permettant de lier une adresse e-mail à un avatar. L’avatage principal est d’éviter aux gens de devoir re-télécharger leur avatar sur l’ensemble des sites auxquels ils souscrivent. Le secondaire est d’offrir une solution facile aux webmasters désirant proposer cette fonctionnalité sur leur site.
Le code permettant de récuperer cet avatar n’importe où est très simple :
-
$email = "email@domain.tld";
-
$default = "http://www.somewhere.com/homestar.jpg";
-
$size = 80;
-
$gravatar = "http://www.gravatar.com/avatar.php?gravatar_id="
-
.
md5($email).
"&default=".
urlencode($default).
"&size=".
$size;
- La variable $email contiendra l’adresse e-mail du membre dont on veut afficher le gravatar;
- La variable $default définira l’image par défaut, utilisée si aucun gravatar n’est attaché à l’adresse e-mail renseignée;
- La variable $size définira, en pixel, la taille du gravatar (maximum 80);
- Et enfin la variable $gravatar permettra l’affichage.
Pour afficher votre image ou vous le désirez, placez ce code dans votre page :
-
<img scr="<?php echo $gravatar ?>" />
Et voilà, j’espère que ça vous évitera des heures interminables de code!
25 réactions Le
30 octobre 2007 à
21:27 par
chris
Suite au concours de css de blogs francophones lancé il y a peu sur ce blog, voici le top 10 mis en place par un jury composer des rédacteurs de Smashing-Coding
Les critères de sélection étaient : l’apparence, la qualité du code, les astuces utilisées et la difficulté.
Chaque membre du jury a sélectionné selon les critères qu’ils jugeait les plus importants
1) Affinity-Web
Ce n’est pas tant la beauté du blog qui nous a plus, mais le travail d’intégration des divers élément et un style vraiment unique. Un travail très pro aussi bien au niveau design que code. Ce blog s’en est sortit sur tous les points important du Css-Design. Une référence. Affinity-web est de loin notre préféré.
2) le blog de Damien Alexandre
3) Webinventif / Kenny Blog
4) Bizet Family
5) CSS4Design
6) Pixnlov
7) Pixenjoy
8 Pilok
9) Buzz and People
10) Tux planet
8 réactions Le
à
12:06 par
spylberg
Hello à tous !
Voici une petite astuce rapide pour gérer facilement vos tailles de polices dans votre feuille de style CSS.
Plutôt que d’utiliser les unités em, pt ou bien px sur toute la feuille, vous allez spécifier une taille générale pour votre balise body, puis utiliser les pourcentages pour le reste de vos classes.
Exemple :
body {
font-family:Verdana, Arial, Helvetica, sans-serif; /* Familles de police */
font-size:12px; /* Taille générale de la police */
}
h1 { /* Titre H1 */
font-size:130%;
}
.petit { /* Une classe spécifiant une petite police */
font-size:85%;
}
En procédant ainsi, chaque élément enfant va adapter sa taille de police en fonction de l’élément parent qu’est la balise body.
Imaginons qu’un jour vous ayez envie de grossir la typo de votre site.
Ce sera très simple puisque vous n’aurez qu’à spécifier une taille de police plus grande à votre balise body, le reste des tailles spécifiées dans vos classes vont suivre.
C’est moins fastidieux que de devoir modifier chaque classe où l’on aurait spécifié des tailles en px ou em.
Voili voilou…
Des questions ? Des remarques ?
8 réactions Le
28 octobre 2007 à
19:49 par
micka39
Les lecteurs de vidéo en flash comme sur Youtube ou DailyMotion sont de plus en plus présents sur les sites web.
Dans ce tutorial nous allons utiliser le lecteur FLV de Jeroen Wijering .
Pour commencer vous devez tous d’abord télécharger le zip contenant tous les fichiers ici
- Dezippez le contenu
- Renommer le dossier en lecteur_flash
- Créer ensuite un nouveau fichier HTML
- Placer le à la racine de votre serveur
- Mettez y dedans le code qui suis
- Creer deux repertoires à la racine : videos et preview
- Glissez y les deux fichiers qui se trouvent dans le zip :video.flv et preview.jpg
- Ensuite testez votre fichier si vous utilisez Firefox et que l’animation ne se charge pas essayez avec IETab
-
-
<!– Inclusion du script du lecteur –>
-
<script src="lecteur_flash/swfobject.js" type="text/javascript"></script>
-
<p id=
"player"><a href=
"http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&Lang=French">Vous n
‘avez pas flash player, cliquez ici pour le télécharger !</a></p>
-
<script type="text/javascript">
-
var s1 = new SWFObject("lecteur_flash/flvplayer.swf","single","300","170","7");
-
// Autorise ou pas l’affichage pleine ecran
-
s1.addParam("allowfullscreen","true");
-
//L’emplacement de notre fichier
-
s1.addVariable("file","videos/video.flv");
-
//L’emplacement du fichier de pré visualisation
-
s1.addVariable("image","preview/preview.jpg");
-
// La taille
-
s1.addVariable("width","300");
-
// La hauteur
-
s1.addVariable("height","170");
-
// Uniquement pour une image voir sur wikipedia la définition s1.addVariable("kenburns","false");
-
// Pour afficher le player dans la div avec l’id nommé "player"
-
s1.write("player");
-
</script>
Ceci était un exemple de lecteur vidéo de type FLV
Maintenant passons à la lecture d’un fichier MP3 avec l’album en previsualisation
-
-
<script type="text/javascript">
-
var s1 = new SWFObject("lecteur_flash/flvplayer.swf","single","300","170","7");
-
// L’emplacement de notre fichier vous n’avez rien à modifier dans les types tous est détecté automatiquement
-
s1.addVariable("file","musique/Avril Lavigne - Girlfriend.mp3");
-
// L’emplacement du fichier de pré visualisation ici la pochette du single
-
s1.addVariable("image","preview/Avril Lavigne - Girlfriend.jpg");
-
s1.addVariable("width","300");
-
s1.addVariable("height","170");
-
// Pour afficher le player dans la div avec l’id nomme player
-
s1.write("player");
-
</script>
Il existe aussi une possibilité de créer une playlist .
Vous pouvez aussi afficher d’autre type de fichiers comme des jpg,swf,png ou encore gif
Acceder à la documentation de JW Players
14 réactions Le
27 octobre 2007 à
22:35 par
chris
Ce n’est un secret pour personne, Google prend en compte les mots clés se trouvant dans les urls des pages web, aussi, une url contenant le titre de la page est plutôt bien vue.
Ensuite, c’est toujours plus sympa de savoir de quoi parle une page avant de cliquer sur son url.
Voici comment procéder pour exploiter des urls type “mapage/10-le-smashing-coding” au lieu de “mapage/?id=10”
pour commencer , copier coller cette fonction dans dans la page PHP qui va générer l’url:
-
-
$replac =
utf8_decode( ‘AAAAAAaaaaaaOOOOOOooooooEEEEeeeeCcIIIIiiiiUUUUuuuuyNn’ );
-
-
$texte_pre_pre =
eregi_replace(‘[^a-zA-Z0-9_]’,
‘-’,
$texte_pre_pre_pre);
-
-
$texte_final =
substr($texte_pre,
‘0′,
‘128′);
-
$end =
substr($texte_final,
-1,
1);
-
if ($end ==
"-") $texte_final =
substr($texte_final,
0,
-1);
-
return $texte_final;
-
}
Comme vous pouvez le constater, cette fonction va convertir un texte genre “à l’école” en “a-l-ecole”.
Il peut être nécessaire d’adapter cette fonction selon votre type d’encodage de caractères.
Maintenant, imaginons que vous publiez une liste d’articles, vous utiliserez une requête Mysql de ce genre:
-
$req =
mysql_query("SELECT id, titre FROM malist WHERE category = ‘$cat’ ");
-
-
{
-
echo ‘<li><a href="mapage/’.
$data[‘id’] .
‘-’. pre_url
($data[‘titre’]).
‘">’.
$data[‘titre’] .
‘</a></li>’;
-
}
Bon ça c’est bien joli, mais ensuite, il faut lire les urls.
C’est pas compliqué avec la magie du .htaccess
dans un .htaccess se situant à la racine du site, vous placerez ces lignes:
-
Options +FollowSymlinks
-
RewriteEngine on
-
RewriteRule ^mapage/([0-9]+)-(.*)$ mapage/index.php?id=$1 [L]
Et voilà, c’est magique, vos urls seront bien plus jolies
9 réactions Le
23 octobre 2007 à
23:22 par
Tomtom
La fonction mail est très souvent utilisé sur un site pour des newsletters ou des confirmations d’inscription par exemple. Il se peut que l’on soit amené à l’utiliser relativement souvent lorsque que l’on développe une application web, c’est pourquoi plutôt que de récrire sans cesse le même code, il est préférable d’utiliser une librairie (on perd moins de temps du coup) ! D’autant plus qu’il faut respecter certains paramètres afin que les mails envoyés soient correctement formatés et qu’ils ne tombent pas directement dans le panier “Spams” des webmails.
Ce qu’il faut savoir, c’est qu’un email, c’est structuré. Et pour vous montrer visuellement ce que ça donne, je vous ai fait un petit schéma aux couleurs sympas!
Les deux premières parties sont obligatoires. On verra la prochaine fois que la partie texte peut être modulable. Je vais donc vous détailler dans ce billet comment faire la première partie : les entêtes
(lire la suite…)
5 réactions Le
à
20:32 par
Séverin
A partir du moment où on veut optimiser la vitesse d’affichage de pages, réduire les ressources utilisées, limiter les accès base de données, il faut se tourner vers les techniques de cache.
En version simplifiée, le cache est une version mémorisée du résultat d’une action qu’on utilise plutôt que de refaire cette action à chaque fois. On économise ainsi les ressources et le temps de l’action.
Par exemple, sur un digg-like, le code HTML de la page des dernières news peut être mémorisé dans un fichier. Ce fichier n’est recréé que quand une nouvelle news est ajoutée. Entre temps, les utilisateurs reçoivent donc instantanément le code HTML sans avoir à passer par la base de donnée.
Comme dans cet exemple, on peut stocker le code HTML afin de le renvoyer directement, mais on peut aussi cacher des données, par exemple le résultat de requêtes SQL. (lire la suite…)
56 réactions Le
à
20:16 par
chris
Pour le lancement de SmashingCoding , blog associatif sur le développement et le design, je désire lancer un petit concours sympa. Un concours des plus beaux CSS de blog.
C’est simple, vous avez juste a proposer votre blog en commentaire et l’équipe de SmashingCodin sélectionnera les plus beaux CSS originaux.
Comme d’habitude, je ne propose pas un concours pour gagner de l’argent ou des prix, non, simplement les plus jolis blogs seront présentés sur SmashingCoding, mon blog, TheFeedr, Blogasty et certainement sur d’autres blogs. Une façon de faire un peu mieux connaitre votre blog et la qualité de votre travail.
Les Portfolios sont acceptés.
9 réactions Le
à
19:03 par
Séverin
Ca peut paraitre basique comme tutoriel, mais si vous décidez d’utiliser des images pour les coins arrondis de votre interface graphique, autant le faire facilement, rapidement et proprement.
D’abord, il faut savoir que la technique de la sélection rectangulaire puis Sélection > Modifier > Lisser est une très mauvaise technique. Parce qu’on a pas le contrôle visuel sur la taille de l’arrondis et surtout parce que l’arrondi sera sans anti-aliasing. Pour rappel, l’anti-aliasing c’est le léger dégradé d’opacité sur le bord des objets qui évite l’impression de crènelage.
Après plusieurs tentatives, voilà la solution qui me parait proposer le meilleur résultat en peu de temps. (lire la suite…)
7 réactions Le
22 octobre 2007 à
19:19 par
Tom
Dans l’univers du tuning de sites Web, il y a beaucoup d’astuces, à commencer par celle de la sélection du texte.
Saviez-vous qu’il était possible de modifier la couleur (et le fond) du texte quand vous en faîtes la sélection…
Et bien, c’est possible et modifiable via les feuilles de style (CSS).
Attention, cette astuce ne fonctionne pas sous Internet Explorer 6 (IE6).
(lire la suite…)
