Développeur Web RoR

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

mercredi 17 août 2011

Utiliser les caractères unicodes plutôt que des pictos bitmap

Bon voilà j'étais comme toujours en train de quémender des pictogrammes au graphiste quand soudain j'ai eu une idée ! Comme mes sites sont en utf-8 pourquoi ne pas utiliser les caractères unicodes. Plus besoin de faire des sprites css avec moulte picto dans tous les états (hover, visited, active).

Exemple : 

♔♕♖♗

Généralement le code html est &#XXXX;  XXXX étant le code hexa du caractère !

Evitez de mettre ça dans la balise title y parait que c'est spammy...

Voici les pages wikipedia à regarder pour trouver vos pictos :

http://en.wikipedia.org/wiki/Category:Unicode_charts

Symbole pour éditer copier coller : http://en.wikipedia.org/wiki/Template:Unicode_chart_Dingbats

Symbole de dominos : http://en.wikipedia.org/wiki/Template:Unicode_chart_Domino_Tiles

Symbole ordinaux et cardinaux : http://en.wikipedia.org/wiki/Template:Unicode_chart_Enclosed_Alphanumerics

Symbole d'opérateur mathématique : http://en.wikipedia.org/wiki/Template:Unicode_chart_Supplemental_Mathematical_Operators

Autres Symboles : http://en.wikipedia.org/wiki/Template:Unicode_chart_Spacing_Modifier_Letters

Formes géométriques : http://en.wikipedia.org/wiki/Template:Unicode_chart_Geometric_Shapes

Flèches : http://en.wikipedia.org/wiki/Template:Unicode_chart_Arrows

Jeu d'echec : http://en.wikipedia.org/wiki/Template:Unicode_chart_Chess_Symbols

Encore quelques uns : http://panmental.de/symbols/info.htm (il suffit de copier le caractère et de le coller dans votre IDE préféré)

mercredi 1 juin 2011

Les développeurs, graphistes et chefs de projets

Bon j'ai trouvé ça tellement bon faut que je partage !

Source : hteumeuleu.fr le blog d'un l'intégrateur web.

mardi 10 mai 2011

Un bon grand tutorial pour Gimp

Bon voilà je fais la promo du site du zero pour la bonne cause : l'adoption de Gimp par le grand public et les professionnels !

La version cible de ce grand tutorial de Gimp est la 2.6 donc la dernière stable, et puis comme la 2.8 tarde à sortir et que l'interface (enfin le menu) ne changera pas des masses, ça vaut le coup de le bouquiner.

Voici l'adresse du tuto gimp : http://www.siteduzero.com/tutoriel-3-462917-debuter-dans-l-infographie-avec-gimp.html

mardi 1 mars 2011

40 layouts html css

Voici une quantité astronomique de layouts de base pour faire des sites web. Ca laisse du choix et du temps plutôt que de ré-inventer la roue ! C'est gratuit profitez-en !

Le lien : http://blog.html.it/layoutgala/

jeudi 3 février 2011

Les vidéos Paris Web 2010 en ligne sur dailymotion

Bon vaut mieux tard que jamais, les vidéos de Paris Web 2010 sont en ligne sur dailymotion !

http://www.dailymotion.com/playlist/x1h18i_parisweb_paris-web-2010/1#videoId=xguqi5

Bon visionnage !

mardi 22 juin 2010

Cheatsheets CSS, JAVASCRIPT, HTML, PHP, WEB, DESIGN, SEO

Voici une bonne panoplie de cheatsheets CSS, JAVASCRIPT, HTML, PHP, WEB, DESIGN, SEO

http://spyrestudios.com/mega-collection-of-cheatsheets-for-designer-developers/

Régalez-vous !

mercredi 2 juin 2010

@font-face css3 - Des polices exotiques dans nos sites web compatible internet explorer - firefox - chrome - safari - opera

Oui on en a tous rêvé un jour ! Mettre notre police préférée sur notre site web ! Et bien c'est possible avec tous les navigateurs !

- Internet Explorer 4+
- Safari / Webkit 3.1+
- Firefox 3.5+
- Opera 10
- Chrome 4+

Le problème c'est que chaque navigateur ne gère pas tous les formats de font (otf, eot, ttf).
Et internet explorer ne gère que eot.
Voici le code à mettre dans votre css

/* Pour IE fichier eot */
@font-face {
font-family: "mapolice"; src: url("police.eot");
}
/* TTF pour les autres */
@font-face {
font-family: "mapolice"; src: url("police.ttf") format("TrueType?");
}

Ainsi dans votre Css vous pourrez faire :

.maclass{
font-family:"mapolice";
}

Et là vous aller me dire "AAAAAAAH" j'ai pas de fichier EOT pour internet explorer.
Et bien cerise sur le paquebot : il existe un utilitaire gratuit et open-source (linux/windows) pour générer un EOT à partir d'un TTF.

TTF2EOT à voir ici
http://code.google.com/p/ttf2eot/