Exporter un document inDesign en HTML

Exporter un document inDesign en HTML-1

Exporter un document inDesing en HTML est une fonction peu connue car beaucoup d’utilisateurs se sont heurtés à la question suivante : mais pourquoi il n’y a que des balises <p> dans mon fichier HTML ?

 1. Le formatage du texte

Tout le secret réside dans le formatage du texte. En effet, par défaut, inDesign formate tout le texte comme du paragraphe. C’est pour cette raison qu’à l’export il y est cette multitude de balises <p></p>.

Dans l’exemple ci-dessous, se trouvent deux titres. L’objectif est de formater le premier en tant que titre de niveau 1 et le second en un titre de niveau 2 avec une class nommée « toto » :

Titre de niveau 1

Titre de niveau 2

Sélectionnez le titre de niveau 1, puis allez dans Fenêtre -> Style -> styles de paragraphe (ou F11) pour faire apparaitre la palette ci-dessous.

Exporter un document inDesign en HTML Par défaut, elle ne contient que le style paragraphe standard. Cliquez sur le bouton Créer un nouveau style (à droite du bouton corbeille). Un nouveau style appelé Style de paragraphe 1 est créé. Faite un double-clique dessus.

Dans la boîte de dialogue Option de style de paragraphe, rendez-vous à présent dans l’onglet Exportation du balisage (le dernier de la liste), puis renommez le style. Dans cet exemple ça sera H1.

Dans le menu déroulant Balise sélectionnez h1. Cliquer sur OK pour valider.

Sélectionnez à présent le titre de niveau 2, puis créer lui un nouveau style. Dans le menu déroulant Balise sélectionnez h2 et dans le champ Class tapez toto. Cliquer sur OK pour valider.

2. L’export pour le Web

Allez dans le menu Fichier -> Exporter… et dans le menu déroulant Type, sélectionnez HTML. Cliquer sur Enregistrer pour valider.

Une nouvelle boite de dialogue appelé Option d’exportation XHTML propose une série de paramètres. Dans notre exemple, il faut juste s’assurer que dans l’onglet Avancé soit bien coché CSS incorporé, sans cela, inDesign se contente d’exporter notre document avec les balises H1 et H2 sans prendre en considération la mise en forme telle que la couleur et la taille du texte ainsi que les class.

Nota : si des images figures dans votre document et qu’elles doivent être elles aussi exportées dans le fichier HTML, allez dans l’onglet Image et changez la résolution qui doit être de 150ppp à 75ppp. Pour le Web 75ppp est amplement suffisant.

Changer l’opacité d’une image grâce aux CSS.

transparence cssIl faut d’abord prévoir des images au format et j’ai totalement pack sachant qu’ensuite on pourra appliquer la propriété CSS opacity pour ajuster la transparence directement sur ces mêmes images. Ainsi plus besoin de prévoir différentes images format PSG en fonction des pages il suffira d’appliquer une règle CSS pour pouvoir changer l’opacité d’une image.

Ce qu’on fait avant tout c’est gagner du temps. Car au-delà de bien de temps on peut en plus faire varier le degré de transparence de façon extrêmement précises en jouant sur les états : hover, : focus, :active sans avoir à créer un bon nombre d’images, ce qui allège évidemment la page, et permet donc de gagner en chargement, en vitesse et donc en référencement de cette page. On sait que le référencement d’un page Google se fait sur ce critère et que l’optimisation du temps de chargement des images et primordiale.

Ainsi, il suffira d’appliquer l’image de base et avec les différents applicatifs ajustés avec opacity, le gain de temps est évident.

La condition pour que cela se voit, c’est évidement de travailler sur une image en png, car une image en jpeg, verra l’application de la règle CSS sur l’ensemble de l’image alors que le png n’aura pas de fond. Ce balisage fonctionne également pour le format gif.

Un conseil rapide cependant, préférer une exportation de votre image en png 24, la qualité en sera bien meilleure.

Faire une ombre sur une image en CSS3 avec boxshadow

CSS3 : Alléger ses images pour diminuer le poids de ses images.

ombre-en-css3L’objectif du CSS3 est d’éviter l’intégration d’images éditées avec Photoshop, permettant ainsi d’alléger le poids d’une page, ce qui a des conséquences directes avec le référencement on le sait.

C’est pourquoi la maîtrise du CSS3 a toute son importance et présente de nombreux avantages.

Je vois encore aujourd’hui beaucoup trop de textes intégrés sous forme d’images alors que la création d’une ombre peut être faite directement en css.
Si à l’époque il était nécessaire passer par la création d’une image, désormais, quelques lignes vous permettront de créer une ombre pour les images de votre site internet. Plus besoin donc de maîtriser Photoshop lorsqu’on est webmaster, mais en revanche, il est devenu nécessaire aux spécialistes de savoir créer en CSS3 au delà de la simple création graphique.

Boxshadow est la propriété qui permet de créer un effet d’ombre sur un objet. Pour cet exemple nous choisirons une image.

img { box-shadow: 8px 8px 0px #aaa; }

En posant ce code en propriété CSS de cette image, vous intégrer autour de l’image l’ombre voulu avec dans l’ordre:

  • Le premier “8 px”, intègre la valeur horizontal de l’ombre.
  • La deuxième intègre la valeur vertical
  • Et la troisième détaille l’estampage pour estamper votre ombre. A 0px d’estampage comme dans l’exemple, l’ombre est net. entre 8 et 15 permet d’avoir un vrai effet d’ombre.
  • Le dernier paramètre, vous l’aurez deviner permet de régler la couleur.

Cette propriété est du CSS3, ce qui implique que les anciens navigateurs ne peuvent pas le lire. Il faut au moins les dernières versions de début 2012.

 

 

Google impose les formes simples et discrètes dans la PAO, au service du SEO.

Google pose les règles sur l’importance graphique d’un site Web.

Jusque là, Google suivait la mode et n’imposait rien en matière de graphisme. On pouvait d’ailleurs trouver Google un peu en retard sur les bases qu’étaient les couleurs pastelles, les formes estompées etc…
C’est l’annonce de Google Now qui pose de nouvelles bases puisque pour la première fois on voit une réelle modification dans le style de Google en amont du projet.

Rappelons nous de ce qu’était Google il y a moins de deux ans : Les mêmes couleurs vives, des formes rondes avec des dégradés intégrés, et surtout une bonne vieille police soutenu par des liens hypertextes en bleu pétrole criant.

Bref, Google était à la pointe de la techno mais posait la question graphique en deuxième position, loin derrière le code. Une qualité exigée pour le fond et la construction qui désormais est également là pour la forme et on voit même que le célèbre moteur de recherche fait des emplettes et propose une qualité incroyable dans le graphisme exploité sur les téléphones portables et les tablettes graphiques.

Google sait et comprend que le graphisme d’un site web est étroitement lié à son efficacité et au sérieux de son propriétaire.
En contrôlant le poids des images de pages web et la construction des sites, Google indique d’ailleurs qu’à défaut de pouvoir contrôler la qualité graphique, il y a des règles de base à respecter.

Le design doit donc être travaillé dans les plus grandes finesses et Photoshop reste la solution pour cela. Si les contours de certaines formes et la mise en place d’effets peut être fait par le Css, il faudra encore compter sur Photoshop pour assurer la base de la création, qui répond aux besoins de l’utilisateur d’un site web. C’est donc par Photoshop que l’on optimisera son taux de rebond, au service in fine, des positions sur Google.