Créez votre favicon à partir d'une image avec favikon.com
Par GNOUFF le 15/11/2007 dans la catégorie Web Dev
Commencons par un peu de vocabulaire :
"Une favicon est une icône mise à disposition par un site Web pour enjoliver, en particulier dans les navigateurs Web, les endroits où ce site est mentionné. Cette icône pourra être utilisée dans la barre d'adresses ou de titre, les favoris (le terme est d'ailleurs un mot-valise né de la contraction de "favorites" et "icon"), les onglets, ou autres raccourcis." [source : Wikipedia]
Concrètement il s'agit de la petite icône qui apparait dans la barre d'adresse de votre navigateur internet.
En général la favicon doit pouvoir représenter dans un format minimun l'image de votre site Internet .. pas évident.
Il existe une multitude de site, plus ou moins bien faits, qui vous permette de créer ou d'éditer votre favicon en ligne. L'un d'entre eux se distingue par sa simplicité et ses fonctionnalités, il s'agit de favikon.com [en]
En 3 clics, vous allez pouvoir créer l'icône que vous souhaitez.:
- 1. Vous indiquez l'url d'une l'image (ou vous l'uploadez), par exemple votre logo.
- 2. Vous rognez l'image (vous sélectionnez la partie de l'image qui vous intéresse).
- 3. Vous visualisez votre favicon et vous n'avez plus qu'à l'enregistrer.
Il ne vous reste plus qu'a placer l'icône à la racine de votre site internet et à insérer cette ligne de code dans les entêtes de votre page web (entre les balises <head> et </head>)
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Magique non ?
Tutorial CSS numéro 3 : gérer graphiquement les champs obigatoires
Par GNOUFF le 13/11/2007 dans la catégorie Web Dev
Dans un formulaire il y a toujours des champs qui sont obligatoires, ils ne sont pas toujours facile à repérer et après vérification une erreur de saisie n'est pas toujours mise en évidence.
Une solution simple et esthétique peut être envisagée en utilisant des styles.
Le principe est d'affecter une classe (un style) à chaque élément du formulaire.
Dans notre exemple :
class="bg_ko" si le champ n'a pas été renseigné ou si après contrôle il n'est pas valide
class="bg_ok" si la valeur du champ est correcte ou n' a pas besoin d'être connue.
C'est aussi simple que cela et cela donne un effet plutôt réussi. Bien sûr c'est à vous de l'adapter.
Le code HTML
Le CSS
Télécharger les images (*.GIF) :
Télécharge la soure (*.PSD) : bg.psd
Une solution simple et esthétique peut être envisagée en utilisant des styles.
Le principe est d'affecter une classe (un style) à chaque élément du formulaire.
Dans notre exemple :
class="bg_ko" si le champ n'a pas été renseigné ou si après contrôle il n'est pas valide
class="bg_ok" si la valeur du champ est correcte ou n' a pas besoin d'être connue.
C'est aussi simple que cela et cela donne un effet plutôt réussi. Bien sûr c'est à vous de l'adapter.
Le code HTML
<form>
<input type="text" class="input_ko" value="" id="nom" name="nom" />
Nom<br />
<input type="text" class="input_ok" size="22" value="" name="email" />
Mail (ne sera pas publié)<br />
<input type="text" class="input_ok" size="22" value="www.gnouff.com"
name="url" />
Website <br />
<textarea class="input_ko" style="height: 45px; width: 300px;"
name="comment">
</textarea>
<p>La saisie des champs
<input type="text" readonly="" class="input_ko" style="width: 10px;
name="fake" />
est obligatoire<br />par mesure de sécurité et
filtrage des
informations erronées. </p>
</form>
<input type="text" class="input_ko" value="" id="nom" name="nom" />
Nom<br />
<input type="text" class="input_ok" size="22" value="" name="email" />
Mail (ne sera pas publié)<br />
<input type="text" class="input_ok" size="22" value="www.gnouff.com"
name="url" />
Website <br />
<textarea class="input_ko" style="height: 45px; width: 300px;"
name="comment">
</textarea>
<p>La saisie des champs
<input type="text" readonly="" class="input_ko" style="width: 10px;
name="fake" />
est obligatoire<br />par mesure de sécurité et
filtrage des
informations erronées. </p>
</form>
Le CSS
.input_ko, .textarea_ko{
font-family: inherit;
font-size: inherit;
border: 1px solid #bfbfbf;
padding-right: 20px;
background-color:#FFFFFF;
background-image: url(bg_ko.gif);
background-repeat: no-repeat;
background-position: right top;
height:15px;
}
.input_ok, .textarea_ok{
font-family: inherit;
font-size: inherit;
border: 1px solid #bfbfbf;
padding-right: 20px;
background-color:#FFFFFF;
background-image: url(bg_ok.gif);
background-repeat: no-repeat;
background-position: right top;
height:15px;
}
font-family: inherit;
font-size: inherit;
border: 1px solid #bfbfbf;
padding-right: 20px;
background-color:#FFFFFF;
background-image: url(bg_ko.gif);
background-repeat: no-repeat;
background-position: right top;
height:15px;
}
.input_ok, .textarea_ok{
font-family: inherit;
font-size: inherit;
border: 1px solid #bfbfbf;
padding-right: 20px;
background-color:#FFFFFF;
background-image: url(bg_ok.gif);
background-repeat: no-repeat;
background-position: right top;
height:15px;
}
Télécharger les images (*.GIF) :
Télécharge la soure (*.PSD) : bg.psd
Créez un nuancier de couleurs à partir d'une image avec colr.org
Par GNOUFF le 23/10/2007 dans la catégorie Web Dev
colr.org est un site un service web qui vous propose d'extraire les couleurs principales d'une photo. Vous renseignez l'url de l'image et colr.org va en extraire les principales couleurs.
Vous obtenez ainsi un nuancier indispensable pour concevoir un design web.
Vous obtenez ainsi un nuancier indispensable pour concevoir un design web.
Html Playground
Par GNOUFF le 15/10/2007 dans la catégorie Web Dev
HtmlPlayground une application bien pratique pour apprendre ou réviser votre syntaxe XHTML/CSS.
Vous pouvez obtenir la définition et toutes les propriétés des balises XHTML ainsi que des attributs CSS. Toutes ces définitions sont associées à un exemple codé ainsi qu’un exemple visuel.
Donnez du style à vos photos
Par GNOUFF le 02/10/2007 dans la catégorie Web Dev
flauntR [en] est un service en ligne de retouche de photo. En un seul clic vous pouvez appliquer des effets, des filtres des distortions ... à vos images.
C'est ultra simple à utiliser et idéal pour les personnes qui ne possèdent pas d'outils de retouche d'images comme PhotoShop et qui souhaitent, ponctuellement donner un effet sympa à une photo.
La preuve en un clic !
C'est ultra simple à utiliser et idéal pour les personnes qui ne possèdent pas d'outils de retouche d'images comme PhotoShop et qui souhaitent, ponctuellement donner un effet sympa à une photo.
La preuve en un clic !
L'activité de votre site en temps réel
Par GNOUFF le 07/09/2007 dans la catégorie Web Dev
Je ne suis pas un grand fan mais cette fois ci, voici un widget simplissime à installer et en plus gratuit qui permet de visionner en temps réel l'activité de votre site ou de votre blog.
Vous pouvez connaitre en live les principales informations : origine géographique, nombre de connexion ...
Beaucoup le font déjà (notamment l'excellent Google Analytic) mais avec whos.amung c'est instantané.
Détails : whos.amung.us [en]
| 123votez est un service de sondage en ligne que vous pouvez très facilement intégrer à votre blog ou votre site sans aucune connaissance particulière. Conçu dans le même esprit que PollDaddy ce service Web 2.0 posséde néanmoins plus de fonctionnalités :
|
Flash photo browser
Par GNOUFF le 16/07/2007 dans la catégorie Web Dev
Flash photo browser est une application (Flash + Php) développée par Andrew Berg et téléchargeable gratuitement pour gérer un diaporama de photo.
Facile à installer, très simple à paramétrer.
Facile à installer, très simple à paramétrer.
 |
