Css | jaiunblog.com | j'ai un blog - graphisme, design, programmation

j’ai un blog et un site

2 décembre 2010 | graphisme | 3 commentaires

Après de nombreuses expérimentations xhtml, css et javascript, voici mon portfolio. Techniquement, xhtml w3c valide, le logo est en css, les icônes sont sur un sprite, le site semble compatible FOIE (Firefox, Opera, Internet Explorer 8), Chrome et Safari — il fonctionne (mais rame) sous iPad mais n’a pas été testé sur minitel.
http://jaiunsite.com

google api font !

22 mai 2010 | graphisme | 0 commentaire

Basé sur @font-face, Google débarque dans le monde de la typo avec une liste de fontes à mettre en lien via sa feuille de style. On code donc ainsi (exemple en html 5).

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

Au passage <link finit par > et pas /> en restant valide w3c (les deux passent) !
La liste des polices est là : http://code.google.com/webfonts
la documentation : http://code.google.com/intl/fr/apis/webfonts/

double slide

17 mai 2010 | programmation | 2 commentaires

Script du jour :
Avec Mootools et l’extension Slide/Scroll, voici un petit script qui déplie une liste (oooh) et fait glisser le contenu correspondant (aaah) – truc en plus : ça marche aussi avec les flèches du clavier haut et bas :-)
aperçu / source
Quelques règles :
Structure à conserver (liste de liste xhtml valide w3c) :

<ul><li>
		<h3 class="item">Linéales</h3>
		<ul>
			<li><a href="#">Helvetica</a></li>
			<li><a href="#">Futura</a></li>
			<li><a href="#">Myriad</a></li>
			<li><a href="#">Univers</a></li>

		</ul></li>

et autant de sous lien que de div dans slide (

<div id="slide"> ... </div>

)

enjoY !

@font-fa©e !

12 novembre 2009 | graphisme, programmation | 2 commentaires

fontface

Voici la technique la plus facile pour choisir (enfin) une police en html, le @font-face !
Magique ?

/* Graublau Sans Web (www.fonts.info) */
@font-face {
font-family: Graublau Sans Web;
src: url(GraublauWeb.otf) format(« opentype »);
}
body {
font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}

L’exemple vient de cette page (que je vous invite à lire) :
http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
Mais si on RTFM un peu :) et qu’on connait le monde de la typo (des bisounours ?), la magie a ses limites ; ici GraublauWeb.otf est distribué gratuitement et son auteur autorise l’encapsulage (embed) web, donc si vous voulez mettre une police commerciale comme l’helvetica Neue, c’est facile mais c’est pas bien !
Rapidement, avec les bases du html et css, n’importe qui peut télécharger le fichier de la typo.
Comme je suis sympa, voici l’exemple (piquer là encore) à suivre pour utiliser l’helvetica neue si elle présente chez l’utilisateur (mais là, je ne vois plus l’intérêt du font-face !)

/* MgOpen Moderna */
/* http://www.zvr.gr/typo/mgopen/index */

@font-face {
font-family: MyHelvetica;
src: local(« Helvetica Neue »),
local(« HelveticaNeue »),
url(MgOpenModernaRegular.ttf);
}

@font-face {
font-family: MyHelvetica;
src: local(« Helvetica Neue Bold »),
local(« HelveticaNeue-Bold »),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}

body { font-family: MyHelvetica, sans-serif; }

On va terminer sur une note d’espoir avec des typos embedables légalement.
http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/
http://opentype.info/demo/webfontdemo.html

javascript dans ie

8 juillet 2008 | programmation | 0 commentaire

Pas facile de trouver les bugs javascript avec internet explorer !
Erreur ligne 128, dans un fichier qui regroupe cinq fichiers externes… c’est insignifiant.
Deux outils à votre secours : Script Debugger for Windows NT 4.0 and Later (scd10en.exe) ou sur le site de microsoft et en complément une debug barre pour ie !
Pour scd10en ^^ un réglage des outils/options internet pour sur cette image :

Article (english) en complément