Pablo Prieto - Blog - Conception HTML et CSS

Se passer de maquette Photoshop?

Pab. — Thu, 26 Jun 2008 12:13:00 +0200

J'aime bien 37 signals, et j'aime assez souvent leur prises de position assez radicales sur la manière de travailler un site web. Dans cet article en l'occurrence, ils expliquent qu'ils se passent totalement de maquette Photoshop lorsqu'ils designent une interface, et passent directement du crayon et de la feuille de papier au prototype HTML/CSS.... Lire Se passer de maquette Photoshop?

Internet Explorer 8 : standard par défaut

Pab. — Tue, 04 Mar 2008 14:08:00 +0100

C'est la petite surprise du jour, Microsoft vient en effet d'annoncer aujourd'hui qu'Internet Explorer 8 adoptera le mode de rendu standard par défaut. En effet, on savait déjà que la prochaine version du navigateur de Redmond possèderait 2 moteurs de rendu : un tout neuf supportant (enfin) les derniers standards HTML, XHTML et CSS (et... Lire Internet Explorer 8 : standard par défaut

13 règles pour accélérer son site web

Pab. — Wed, 01 Aug 2007 11:24:00 +0200

Yahoo nous propose sur cette page 13 règles pour optimiser et accélérer l'affichage de son site. En résumé et en français : Minimiser le nombre de requêtes HTTP Utiliser un réseau de diffusion de contenu ("Content Delivery Network") Configurer un en-tête d'expiration pour tous les composants images, scripts et styles Utiliser la... Lire 13 règles pour accélérer son site web

Le rendu des polices sous Mac et PC

Pab. — Fri, 15 Jun 2007 12:18:00 +0200

Un article très intéressant qui explique les philosophies bien distinctes que suivent Apple et Microsoft sur la manière d'afficher et de lisser les polices sur nos écrans. En resumé, Apple respecte au mieux la forme de la police, mais en donnant alors une impression de flou, alors que Microsoft, avec sa technologie ClearType, obtient un... Lire Le rendu des polices sous Mac et PC

Pourquoi ai-je un rendu différent entre Firefox Windows et Firefox Mac ?

Pab. — Wed, 13 Jun 2007 14:18:00 +0200

Vous l'avez peut-être déjà constaté, il arrive parfois que le rendu d'une page soit différent entre Firefox sous Windows et son homologue sous Mac. Certains en concluent un peu trop vite à un bug du moteur gecko ou encore que celui-ci serait différent entre les 2 plates-formes. Heureusement il n'en est rien, il s'agit bel et bien du même moteur. Alors d'ou vient cette différence ?

Voici un exemple extrêmement simple, un paragraphe de texte de 300 pixels de large : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head>... Lire Pourquoi ai-je un rendu différent entre Firefox Windows et Firefox Mac ?

Safari sous Windows (suite et fin)

Pab. — Mon, 11 Jun 2007 21:08:00 +0200

C'est chose faite :) Attention, Webkit est également à jour, on passe à la version 522.10.1 Edit : Pour info, sous Mac, la beta remplace la version actuelle (mais on peut la désinstaller pour retrouver Safari 2) Edit 2 : D'après les premiers échos, ça bug pas mal sous Windows encore... Lire Safari sous Windows (suite et fin)

Firebug sans Firefox

Pab. — Wed, 16 May 2007 10:28:00 +0200

Utiliser la console de Firebug sur tous les navigateurs c'est possible grâce à Firebug Lite, la version allegée de Firebug. Ça se présente sous la forme d'un fichier javascript à inclure, puis la console s'affiche en appuyant sur F12 (Ctrl+F12 sous Mac, sinon ça lance Dashboard...)... Lire Firebug sans Firefox

Développement Web sur mac : Coda

Pab. — Tue, 24 Apr 2007 12:29:00 +0200

L'éditeur Panic, déjà à l'origine du client FTP Transmit bien connu sur Mac, vient de sortir un tout nouveau logiciel dénommé Coda. Coda est un logiciel "tout en un" pour les développeurs web : éditeur (HTML, CSS, Javascript et PHP entre autres), client FTP, navigateur pour la prévisualisation directe, gestionnaire de sites et même... Lire Développement Web sur mac : Coda

Apollo, WebKit et Windows

Pab. — Mon, 19 Mar 2007 17:37:00 +0100

Apollo vient de sortir aujourd'hui en version alpha sur le labs d'Adobe. En très bref, Apollo permet de créer des applications Internet riches (RIA) multi-plateformes en mixant Flash, HTML, CSS et JavaScript. Une bonne nouvelle c'est que Apollo utilise WebKit pour le rendu HTML/CSS, c'est à dire le même moteur de rendu que Safari. Apollo... Lire Apollo, WebKit et Windows

Comparer deux fichiers sous Mac OS X

Pab. — Wed, 17 Jan 2007 17:34:00 +0100

Fournie avec XCode, FileMerge est une petite appli qui peut se réveler très pratique puisqu'elle sert à comparer 2 fichiers entre eux, et eventuellement les fusionner. L'outil idéal pour comparer deux versions d'un fichier CSS ou HTML par exemple ;) Le téléchargement de XCode se fait sur le site Developer Connection d'Apple, et nécessite... Lire Comparer deux fichiers sous Mac OS X

Elements en ligne et marges internes

Pab. — Mon, 18 Dec 2006 13:59:00 +0100

Ou comment bien appréhender la mise en forme des éléments en ligne et créer de jolis boutons...

La gestion des marges internes Voici le code html qui va nous servir d'exemple : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"... Lire Elements en ligne et marges internes

Les bugs d'IE7

Pab. — Mon, 06 Nov 2006 10:05:00 +0100

Il n'aura pas fallu longtemps avant de découvrir qu'IE7 avait lui aussi quelques petits problèmes d'interprétation, notamment en matière de DOM et CSS... plusieurs sites recensent déjà les bugs spécifiques à cette version :http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/ http://css-discuss.incutio.com/?page=IE7... Lire Les bugs d'IE7

Activer la console Javascript sous Safari

Pab. — Wed, 18 Oct 2006 19:09:00 +0200

Grâce à ce formidable programme, on peut d'un simple clic activer le débugger Javscript sous Safari : Safari Enhancer Le menu debug de Safari est en effet bien présent mais "caché" par défaut, Safari Enhancer permet donc (entre autre) de rendre ce menu visible et d'accéder à la console Javascript :... Lire Activer la console Javascript sous Safari

La fusion des marges, partie 2

Pab. — Thu, 12 Oct 2006 11:45:00 +0200

La suite logique de la première partie, consacrée cette-fois au cas des blocs flottants

Le cas des blocs flottants Les blocs flottants (float:left ou float:right) ne fusionnent jamais leur marges avec aucun autre bloc. Ainsi l'exemple suivant illustre ce principe (les paragraphes ont une marge haut et bas par défaut de 1em) : <div id="conteneur"> <p id="flottant">Lorem ipsum dolor sit... Lire La fusion des marges, partie 2

De l'art d'insérer une animation Flash

Pab. — Wed, 20 Sep 2006 12:03:00 +0200

Détection du plugin, contenu alternatif, "Active Content"... vouloir simplement mais proprement insérer une animation Flash dans sa page relève aujourd'hui du parcours du combattant...

La méthode "classique" Voici le code que nous propose Flash lorsque il génère une page html pour contenir notre animation : <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550"... Lire De l'art d'insérer une animation Flash

Les nouveautés d'IE7

Pab. — Wed, 23 Aug 2006 18:15:00 +0200

Finalement, la IE team de chez Microsoft vient de publier la liste complète des améliorations et corrections du prochain IE7. Ils reconnaissent eux-même qu'il reste pas mal de boulot mais la longueur de la liste fait tout de même plaisir ;)... Lire Les nouveautés d'IE7

La fusion des marges, partie 1

Pab. — Thu, 17 Aug 2006 11:55:00 +0200

La règle de fusion des marges en CSS, souvent mal connue, est la source de beaucoup d'incompréhensions de la part des concepteurs web. Pourtant, bien maîtriser cette notion permet avant tout de bien comprendre et maîtriser le résultat de son design CSS.

La règle de base de la fusion des marges est la suivante : 2 marges consécutives fusionnent si aucune marge interne (padding) ou bordure (border) ne s'interpose entre les deux. Il faut noter que cette règle ne concerne que les marges verticales (haut et bas donc) et en aucun cas les marges horizontales. Pour la partie théorique, je... Lire La fusion des marges, partie 1

Motif de conception : le fil d'Ariane

Pab. — Wed, 09 Aug 2006 13:59:00 +0200

Le fil d'Ariane (ou en anglais breadcrumbs trail) est un outil de navigation constitué d'une suite de liens hiérarchisée. Le fil d'Ariane représente le chemin de navigation et permet à l'internaute de se repérer dans le site et de remonter aux rubriques principales.

Plaçons-nous maintenant à la place du concepteur html, quelle est la "sémantique" HTML la plus appropriée pour cet élément ?

En parcourant un peu le web, on constate plusieurs manières de coder un fil d'Ariane, plus ou moins compliquées : La version minimum, une suite de liens : <a href="#">Accueil</a> > <a href="#">Rubrique</a> > Page en cours La liste, ordonnée ou non : <ul... Lire Motif de conception : le fil d'Ariane

Safari sur Windows (ou presque)

Pab. — Tue, 08 Aug 2006 12:35:00 +0200

Swift est un navigateur pour Windows basé sur le WebKit d'Apple, le moteur de rendu de Safari C'est encore en version alpha, mais ça va intéresser tous les concepteurs qui bossent sur Windows et qui doivent tester leur rendu sur Safari. Bon moi j'aurais préféré le moteur d'IE6 Windows sur mac ;) C'est ici : http://www.getwebkit.org/... Lire Safari sur Windows (ou presque)

Les outils du webdesigner sous Mac

Pab. — Tue, 08 Aug 2006 10:29:00 +0200

Tu viens de commander un Macbook tout neuf ? Tu es exaspéré par la lenteur de Dreamweaver ? Voici un petit tour d'horizon des principaux outils de développement web quand on travaille sur Mac.

Textmate, l'éditeur à tout faire Textmate est un éditeur de code comme il en existe sur toutes les plateformes, mais il a l'avantage d'être vraiment complet , léger et rapide. Il possède tout ce qu'on est en droit d'attendre d'un logiciel de ce genre : Le support d'un très grand nombre de langages (HTML, CSS, PHP, Actionscript, Ruby,... Lire Les outils du webdesigner sous Mac