Coder dans Chrome / Workspace

24 septembre 2013 | programmation | 0 commentaire

Depuis peu Chrome permet de coder directement dans le navigateur.
Première étape, activer cette fonction expérimentale à cette adresse :
chrome://flags/#enable-devtools-experiments (à copier/coller dans la barre d’adresse de Chrome, puis cliquer sur Activer)
Redémarrer Chrome.


Deuxième étape, lancer les outils de développement (pomme+alt+i sur Mac) puis cliquer sur l’icône de setting en bas à droite (l’engrenage).

chromedevtool


Ajouter vos dossiers à votre espace de travail :
workspace-chrome
Pour terminer, aller à l’onglet Sources, à gauche un menu s’ouvre via le petit triangle « show navigator ».

open

Vous pouvez désormais ouvrir les fichiers (locaux), les modifier et les sauvegarder !

via

reset, html5, processing 2 beta, 6 ans

4 septembre 2012 | programmation | 0 commentaire


Voilà 6 ans que ce blog (que j’utilise plutôt comme un carnet de liens) existe, merci à vous et à WordPress !
Pour fêter ça, quelques liens à ajouter à votre/ce bookmark :)

Un article comparant reset de Meyer, Yahoo et le normalize des CSS.
http://blog.sixzero.me/2012/02/25/reset-vs-normalize/ avec les démonstrations : Normalize css, Eric Meyer’s reset css, Yahoo reset css.

Une alternative à la méthode du reset avec un mini framework très choux http://www.knacss.com/.

Un validateur HTML5 avec quelques fonctions pratiques.

Et pour finir, une bonne nouvelle Processing 2 est sorti hier en version beta (revisions.txt).

toolbox

26 mai 2012 | programmation | 0 commentaire

toolbox

Très pratique cette boîte à outils : http://www.thetoolbox.cc/

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 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