Guillaume Bizet | Blogging, Web2.0, Dotclear et Dotclear2

Aller au contenu | Aller au menu | Aller à la recherche

Bonjour et bienvenue sur mon blog.
Passionné depuis plusieurs années par l'informatique et encore plus par le web, ce blog est donc devenu au fil du temps un moyen pour moi de partager avec vous des informations qui me semblent intéressantes : actualité et services Web 2.0, actualité du net, astuces et thèmes Dotclear 1.2.x | Dotclear 2, logiciels on et offline, iPhone, iPhone 3G, en gros tout ce qui touche au domaine hight-tech.
Pour mieux me connaitre, je vous invite à venir découvrir Profil Ziki qui centralise mon "identité internet".

Balise - CSS

Fil des billets - Fil des commentaires

21/05/2008

21

mai 08

Devlisting : des centaines de ressources pour webdeveloppers

Catégorie : Webdesign  | 6 commentaires  | aucun rétrolien

Devlisting logo

Devlisting. com est un site qui liste des ressources pour webdeveloppers, webdesigners et autres webmaster.

Devlisting screenshot

Cliquez sur l'image pour la voir en grand

Ces ressources sont classées par catégories :

  • Images libres de droit
  • Inspiration
  • Plugins firefox
  • Nouveaux liens
  • Ruby
  • Ajax
  • Php
  • CSS
  • Traffic / SEO
  • Flash
  • ASP
  • Hébergement
  • Logiciels
  • Polices d'écriture
  • Javascript
  • ColorScheme
  • Outils online
  • Templates gratuits
  • Xhtml
  • Editions d'images
  • SQL
  • Cold Fusion
  • Outils pour la couleur
  • Java
  • CMS

Là où réside l'intérêt de Devlisting.com c'est le fait de pouvoir "sélectionner" les sources qui sont bonnes et celles sans intérêt.
Pour ce faire, à coté de chaque lien proposé vous pouvez voir une punaise. Par défaut elle est grisée car vous n'avez pas encore "voté". Cliquez une fois pour "approuver" le lien, une deuxième pour de "désapprouver" et une troisième pour revenir à l'état neutre (cf-image ci-dessous)

Devlisting action

Je trouve que ce genre de principe sur les listes de liens de ressources est une très bonne idée qui permet de filtrer au mieux les meilleures ressources à conserver

Bonne découverte

21/04/2008

21

avr. 08

Calculatrice em / px

Catégorie : Xhtml / CSS  | 2 commentaires  | aucun rétrolien

Logo Calculator

Dans la construction d'un site et d'une feuille de style, il est très important de faire attention aux unités employées pour la police d'écriture car cela impacte directement sur les propriétés css enfants de la balise parent.
Je m'explique :

body { font-size : 0.8em; }
p {font-size: 0.6em;}

Ainsi la police d'écriture du paragraphe p est directement liée à celle de body. Par contre il est difficile de savoir, quand on construit sa feuille de style, cmment convertir une police en pixels vers sont équivalent en unité em.

L'Em calculator va vous faciliter le travail. Elle vous permet de faire la conversion entre ces unités et de voir quels seront les conséquences d'un changement de taille au niveau de la balise parent.

Screenshots :
Em Calculator Em Calculator : fichier en construction

Cliquez sur les images pour les voir en grand

A vos calculettes ...

15/02/2008

15

fév. 08

Un effet gradient sur du texte en CSS

Catégorie : Xhtml / CSS  | 10 commentaires  | aucun rétrolien

Je trouve cette solution très ingénieuse pour pouvoir appliquer un effet de gradient sur du texte et en CSS.
Cela peut paraitre compliqué, et pourtant !!! C'est là que l'on voit la puissance des CSS

CSS gradient schéma

Voici comme le réaliser.
Code xhtml

<h1><span></span>CSS Gradient Text</h1>

et code CSS

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

la clé du succès se situe dans les paramètres h1 { position: relative } et h1 span { position: absolute }

Si vous le souhaitez vous pouvez très bien adapter ce système pour donner un effet web2.0 à tous vos titres.
Pour cela réalisez le png qui va bien ;)
CSS gradient web2.0

Les avantages de cette technique :

  • technique valide pour tous les navigateurs puisqu'elle n'intègre pas de javascript ou de flash
  • vous pouvez utiliser la police que vous souhaitez

Merci WebDesignerWall

02/02/2008

02

fév. 08

Vrak de blogs #11

Catégorie : Vrak de blogs  | 2 commentaires  | aucun rétrolien

Les "Vrak de blogs" sont pour moi l'occasion de partager avec vous les liens intéressant que j'ai pu trouver sur les différents blogs que je lis régulièrement.
Ces liens, pour la plupart, j'aurais pu en parler et faire un billet sur mon blog mais soit je n'ai pas eu le temps de le faire, soit l'information a été tellement diffusée qu'il n'y avait aucun intérêt à le faire une nouvelle fois.

Voici mon vrak de blog édition n°11

Enjoy, stay tuned et bonne fin de week-end :)

30/01/2008

30

janv. 08

Des centaines de ressources pour webdeveloppers

Catégorie : Webdesign  | 5 commentaires  | aucun rétrolien

Logo Web Developper's Field Guide

Web Developper's Field Guide est un site qui regroupe des centaines et des centaines de ressources afin d'accompagner les webdeveloppers dans leurs créations web.

Web Developper's Field Guide : screenshot

Cliquez sur l'image pour la voir en grand

J'avoue que ce site est une véritable mine d'or avec des ressources peu communes !!!

L'auteur les a triées par catégories :

  • Inspiration
  • Sites/blogs spécialisés dans le webdesign
  • Typographie
  • Polices
  • Couleurs : théories
  • Couleurs : outils
  • Color schemes, palettes
  • Color patterns
  • Sites/blogs spécialisés sur les CSS
  • CSS galleries & showcases
  • Templates CSS
  • Menus/Navigation CSS
  • Techniques CSS
  • CSS: Firefox & Extensions
  • CSS web tools & services
  • HTML web tools & services
  • Accessibilité
  • Vérificateurs d'accéssibilité
  • Outils divers
  • Ajax
  • Javascript
  • DOM
  • RSS
  • Logiciels pour CMS & Forums
  • Blogging
  • Ressources pour freelances
  • Photos libres de droits
  • Spécifications
  • Robots
  • Outils de SEO
  • Références pour le SEO

Si vous vous sentez à la hauteur du guide, il vous est même possible de proposer vos propres ressources.

A mon sens le Web Developper's Field Guide est un must have, vous ne croyez pas ?

18/01/2008

18

janv. 08

101 Techniques CSS

Catégorie : Xhtml / CSS  | un commentaire  | aucun rétrolien

Mémento CSS

Le blog noupe a regroupé dans un billet 101 techniques CSS qui méritent d'être mieux connues.
Elle sont classées par catégories :

  • CSS Sprites
  • Coins arrondis
  • Technique de remplacement d'images
  • Portes coulissantes
  • Technique d'encadrement d'une image par du texte
  • Colonnes de même taille
  • Transformer une liste en barre de navigation
  • Stylisation des titres
  • Ombres en CSS
  • Transparence CSS
  • Différentes techniques sur les liens

Vous trouverez tout sur ce billet ... en anglais ;)

Si avec ça vous avez pas des sites/blogs au cordeau !!!

19/12/2007

19

déc. 07

Validez html et css en même temps

Catégorie : Xhtml / CSS  | 4 commentaires  | aucun rétrolien

Xhtml CSS vlidator : logo

Vous connaissez bien sur les sites officiels pour faire valider la sémantique de votre site web :

et bien le site Xhtml CSS validator va vous faciliter la tâche puisqu'il fait les 2 validations en même temps.

Xhtml CSS vlidator : screenshot

Cliquez sur l'image pour la voir en grand

J'ai fait le test pour mon blog et voici le résultat

Xhtml CSS vlidator : résultat

Cliquez sur l'image pour la voir en grand

Au passage si quelqu'un peut m'expliquer cette erreur CSS qui me fait ch***, je serai ravi de comprendre d'où elle vient puisque je ne trouve pas cette ligne dans mes fichiers CSS !!!

Vous pourrez même trouver sur ce site une extension pour firefox appelée BeValid! spécialement développée pour vérifier la validité Xhtml et CSS de l'url dans la barre d'adresse.

Alors, pratique non ?

- page 2 de 6 -

Guillaume Bizet Vie du blog «Mise à jour vers dc2.1»
Guillaume Bizet Webdesign «Set d'icônes Milky»
Guillaume Bizet Web2.0 «Blendfu : des brushes, patterns et des formes personnalisées pour Photoshop et Gimp»
WeboniPhone.fr Actualité «Le Figaro version iPhone»
Guillaume Bizet Informatique / Techno «Un florilège de nouveautés dans les services de Google»
Guillaume Bizet Web2.0 «Des générateurs de fluxs RSS»
Guillaume Bizet Vrak de blogs «Vrak de blogs #45»
Guillaume Bizet Apple / iPhone «iScoop : un digg like spécial iPhone»
WeboniPhone.fr Actualité «France 24 adapté à l'iPhone»
WeboniPhone.fr Divers «Autodeclics.com sur iPhone»
Guillaume Bizet Webdesign «Icones sociales dessinées à la main»
Guillaume Bizet Apple / iPhone «Sur WebOniPhone cette semaine#2»
Guillaume Bizet Vrak de blogs «Vrak de blogs #44»
WeboniPhone.fr Web2.0 «PocketTweets : une WebApps twitter pour iPhone»
Guillaume Bizet Informatique / Techno «Windows 7 : des screenshots»
Guillaume Bizet Divers «Superbe video repésentant le traffic aérien mondial au cours d'une journée»
WeboniPhone.fr Vie Pratique «Cadremploi optimisé pour l'iPhone»
Guillaume Bizet Xhtml / CSS «La propriété CSS de texte à la loupe»
WeboniPhone.fr Internet «Exalead version iPhone»
Guillaume Bizet Dotclear 2 «Dotclear 2.1 en approche»
fermer