Un livre en HTML

Bonjour,

http://www.spinoza.webou.net/

Ce sont mes premières pages !
Il y en a seulement 2 :
- page 1 l'accueil qui va me servir à gérer les corrections
- page 2 tout un livre, plein de renvois !

Rien de sensationnel, mais comme je débute j'aimerai avoir votre avis, surtout au niveau du code, mais aussi de la présentation, des balises META pour le référencement... Google ne le voit pas encore ?

Mais j'aimerai surtout avoir votre avis sur la suite :

C'est à dire le cheminement transversal, je suis à court d'idée technique. Avec les calques c'est lourd, dépassé, pas agréable.., avec les menus déroulants en CSS / JS, il faut gérer les différents navigateurs presque comme autant de cas particuliers...

Le plus convivial serait :

- Une fonction qui créerai une petite fenêtre flottante (modale) toujours au premier plan.

- Passer les codifications, d'un nœud choisi, en paramètre à la fonction.

- Cette fenêtre afficherai les codifications des éléments appelés et/ou appelants sous forme d'hyperliens (une dizaine par nœud en moyenne).

- En cliquant sur un lien dans la fenêtre flottante, le texte dans la fenêtre principale se positionnerait sur l'élément choisi.

A ce jour je n'ai pas vu une telle fonctionnalité sur le net et ne sais même pas si elle est réalisable. Enfin en HTML, XHTML, PHP, JavaScript.... pas en C++ bien sûr !

Au pire, j'ouvrirai un menu déroulant par nœud... Mais c'est pas de la tarte !

Donc si vous avez des idées, des infos... ne serait-ce qu'un lien vers un site qui fait quelque chose de semblable, je suis preneur.

D'avance MERCI.
Modifié par dmganges (08 Oct 2011 - 16:20)

Salut,

Je déplace dans le forum général, car ça ne correspond pas au salon "Ergonomie et esthétique générale", et que je n'ai pas trop compris ce que tu cherche à faire.

Sinon petit truc, il serait pas mal de limiter la largeur du texte dans ta page, car en grande résolution c'est dur à lire à cause des retours à la ligne qui obligent un long cheminement oculaire, et la recherche de la bonne ligne suivante.

Bonjour,

Pour le code : 184 Erreurs, 1 avertissement à corriger ! L'utilisation de multiples <br> pour symboliser des paragraphes n'est pas optimale, il y a <p> pour faire cela. En bref, le code, c'est pas au point.

Pour la présentation : Rien de bien sensationel, ça ressemble à une page du tout début de l'Internet avec une image de fond... Les lignes deviennent effectivement illissibles à grande résolution. Le minimum, même sans se pencher sur la conception d'un design, serait d'agrandir l'espacement des lignes (line-height) et de réduire leur longueur (en mettant un conteneur de taille fixe, ou fluide avec une largeur max).

Pour le référencement : Les balises META ne sont pas utilisées pour le réfenrencement, la seule qui soit utilisée par les moteurs est la balise description, mais elle est uniquement utilisée pour afficher une description du lien dans les pages de recherche. Par contre, bien qu'elle ne joue pas un rôle dans le référencement d'un site, cette balise (tout comme la balise title) peut être utile pour attirer le visiteur, il est donc préférable de rendre cette balise attirante (sexy quoi). Ce n'est pas le cas de ta description actuelle que ne donne pas d'information supplémentaire par rapport au title (le nom du traducteur, mais c'est pas hyper important). Une brève explication de ce qu'est l'éthide de Spinoza serait bien plus intéressante.

Et en bonus, pour l'accessibilité : utiliser des unité de taille relative pour les polices de caractères (em ou % à la place des px).

Merci Mikachu,

D'abord pour cette réponse rapide !

Ensuite pour la remarque concernant le cheminement oculaire, j'en prend bonne note.
J'en avais bien un peu conscience mais je l'attribuais à mon grand âge...
Je pense que j'opterai pour un interligne plus haut, afin de conserver toute la largeur de la page...

En gros, je voudrais faire en HTML, ce qui se fait un peu dans la fonction "Recherche" (CTRL F) de IE par exemple, ou dans un correcteur orthographique... :

- en cliquant sur un lien de la fenêtre "Parent" (le livre) ouvrir une petite fenêtre.

- cette petite fenêtre, flottante resterait au premier plan, on pourrait la déplacer si elle masque une partie du texte que l'on souhaite voir en dessous.

- dans cette petite fenêtre une liste de liens qui correspondent a des liens de la page "Parent" (en fait le livre en dessous).

- en cliquant sur un lien de la petite fenêtre flottante, faire défiler le texte du livre en dessous, afin de le positionner au bon endroit, c'est à dire à la valeur du lien sélectionné.


Bon c'est osé, peut-être irréalisable, mais ça serait SUPER !

Déjà MERCI d'avoir répondu et placé ma prose au bon endroit !

Merci Laurie-Anne, pour le temps que tu as consacré au débutant que je suis.

J'ai du pain sur la planche !
Je ne connaissais pas cet outil de vérification.
Je reviendrai lorsque j'aurai corrigé tout çà.

Entre temps si quelqu'un a une idée pour faire défiler le texte du livre comme je l'explique ci-dessus, j'apprécierai beaucoup...

A bientôt, enfin qq jours

Ok j'ai mieux saisi ce que tu cherche à faire.

En gros, on clique sur un lien, ça ouvre une popup qui propose des liens, on clique sur un lien, et ca envoie dans la fenêtre principale à l'endroit défini par le lien.

Je pense que ça doit être possible avec du javascript. Mes connaissances maigres en la matière
sont malheureusement trop maigres pour que je puisse te le confirmer.

Oui! Mikachu, c'est exactement çà !

Au départ ça me semblait naturel, tellement cette fonctionnalité est inhérente à la consultation de gros document...

Ben non, il va encore falloir faire une usine à gaz...
Heureusement ça occupe

Bon merci d'avoir pris la peine de me répondre !
@+ ... quand j'aurai trouvé

dmganges a écrit :
balises META pour le référencement...

La principale balise META qui te sera utile pour le référencement, c'est la META description. Pour en savoir plus, il y a un article sur le sujet sur Alsacréations.

Le principal problème de ce site pour le référencement, c'est d'avoir placé tout le contenu dans une page unique. Le potentiel d'indexation par les moteurs de recherche est beaucoup plus faible que si tu avais découpé au moins par parties ou chapitres.

S'il y a des chapitres ou découpages thématiques dans cet ouvrage, faire autant de pages serait une bonne approche.

dmganges a écrit :
Google ne le voit pas encore ?

Tu as des liens vers ce site depuis d'autres sites déjà bien référencés?

À vue de nez, Google a indexé uniquement la première page:
http://www.google.fr/search?q=site%3Ahttp%3A%2F%2Fdmspin.free.fr%2F

Il faut dire que, sur cette page, les liens pour aller plus loins sont intitulés «Ici», «Là» ou «4T63R53».

Il serait préférable d'avoir en homepage quelque chose comme ceci:
- Un paragraphe d'introduction: pourquoi ce site, quel contenu. (C'est quoi les «noeuds»? C'est pour dire que l'oeuvre de Spinoza est tordue, ou bien?)
- Une table des matières avec des liens vers les différentes pages/parties.
- Des liens vers des pages hors-ouvrage où tu placerais tes contenus annexes, comme le suivi des corrections.

Une telle configuration serait bénéfique à la fois pour les moteurs de recherche et pour les utilisateurs. S'il faut privilégier un public, on privilégiera d'ailleurs les utilisateurs, car il ne sert à rien d'avoir un site visible sur les moteurs de recherche mais inutile pour le public cible; par ailleurs, un site plaisant et d'utilisation agréable c'est un bon moyen de favoriser la création spontanée de liens vers le site (les internautes recommandent ce qu'ils aiment).

dmganges a écrit :
- Une fonction qui créerai une petite fenêtre flottante (modale) toujours au premier plan.
- Passer les codifications, d'un nœud choisi, en paramètre à la fonction.
- Cette fenêtre afficherai les codifications des éléments appelés et/ou appelants sous forme d'hyperliens (une dizaine par nœud en moyenne).
- En cliquant sur un lien dans la fenêtre flottante, le texte dans la fenêtre principale se positionnerait sur l'élément choisi.

Belle usine à gaz.

En tant qu'utilisateur confronté à ce type d'interface, je serais complètement perdu. Pour deux raisons:
- J'ai pas la moindre idée de ce que sont ces «noeuds». Si c'est un concept utilisé dans une discipline particulière, mettre en évidence cette discipline (sur la page d'accueil, dans le titre de page et le texte introductif) est indispensable. Si c'est un concept propre au site, même chose mais en plus il faut expliquer le concept.
- J'aime les interfaces simples et les conventions. LA convention du Web, ce sont les liens hypertexte. Un découpage en plusieurs pages (cinq, vingt, cent?), une table des matières (avec liens hypertextes), un glossaire ou autre contenu périphérique et des liens entre ces éléments, ça ne serait pas suffisant? Qui à besoin d'une fausse pop-up mise à jour dynamiquement? (Réponse: personne. )

Recommandations:
- S'imaginer utilisateur égaré débarquant sur une page du site (pas forcément l'accueil...).
- Faire simple.
- Découper, expliquer.
- Être bref dans les explications, efficace dans la découpe.
- Lier les parties entre elles.
- Ne pas abuser des liens dans tous les sens. Ce n'est pas parce qu'on peut qu'on doit le faire. Penser à la lisibilité du parcours entre les différentes pages.
- Savoir quelle est la cible.
- Trouver deux-trois utilisateurs correspondant à la cible. Leur faire tester le site en leur donnant deux-trois objectifs plausibles pour un utilisateur appartenant à la cible (scénario). Voir comment ils s'en sortent (ou ne s'en sortent pas).
- Écouter les avis reçus, en tenir compte, mais s'en méfier aussi. Surtout les avis «dans l'absolu» qui ne correspondent pas à un cas d'usage. Si un ami conseille un mécanisme de navigation super tip-top, mais qu'il ne répond à aucun scénario d'utilisation plausible ou fait doublon par rapport aux fonctionnalités existantes... c'est sans doute un mauvais conseil. La bonne volonté ne suffit pas (enfer pavé, etc.).

Pour la petite histoire, le premier site que j'ai réalisé (en ignorant deux essais jamais publiés en ligne) était la transcription au format web d'un livre:
http://docs.covertprestige.net/piraterie/

Bonjour,

ce post pour revenir sur une chose que j'ai lu plusieurs fois sur le forum et notamment dans ce sujet :

a écrit :
La principale balise META qui te sera utile pour le référencement, c'est la META description.

Non, la balise meta description ne sert plus au référencement, en tout cas pour google. (car il semblerait que yahoo, lui, l'utilise...)

lien ici

et ici

je cite l'article 1 :

a écrit :
Alors que l'utilisation d'une balise meta description est facultative et n'aura aucun effet sur votre classement.

D'autres articles en parlent à vous de chercher ...

Par contre, cela a déjà été dit, elle sert à créer une sorte "d'accroche" pour le lecteur dans les résultats des moteurs de recherches, il est donc intéressant de la rendre "sexy".
Elle n'est donc pas inutile... sauf en terme de référencement sur google.

Le titre de vos pages, le contenu de vos pages, les balises alt des images, les mots clés dans les H1, H2 etc... Tout cela sert bien plus au référencement...

Ben un GRAND MERCI à tout le monde !

Je n'aurai pas le temps de répondre à chacun individuellement...
J'essaie un peu, pour mieux vous remercier !

Déjà à Laurie-Anne et Mikachu, je n'ai pas oublié vos conseils, je m'aperçois qu'il me faudra laisser mes 2 pages encore quelque temps en l'état car elles sont déjà pas mal accédées. Je vais juste rendre un peu mieux lisible...

@Florent V. et Jonny

Oui je me suis aperçu vite fait que les balises META c'est plutôt la jungle des moteurs de recherche, et pour ne citer que google en interrogeant sur : ethique spinoza texte

ma modeste contribution se trouve sur la 3ème page, ce qui n'est pas mal :
Ethique de Spinoza
22 sep 2009 ... Ethique de Spinoza traduite par Charles Appuhn. ... d'avoir une bonne fois pour toute la possibilité de référencer chaque élément du texte. ...
http://www.spinoza.webou.net/ - En cache - Pages similaires

Donc c'est volontairement que j'ai ajouté quelques mots sexy au début, mais quasiment la même chose que dans la balise DESCRIPTION puisque les moteurs ne l'utilisent pas :
Spinoza maître de liberté. Spinozisme philosophie de la Joie, de l'Amour, de la Perfection.
Si çà c'est pas sexy

Mais bon, maintenant qu'il est vu, ça m'importe peu, je croyais qu'il était tellement pourri que google n'en voulait pas. Ce n'est pas le cas, ça me suffit.

C'est vrai j'ai fait une page d'accueil de cochon, c'est même la première chose que je dis.
Je ne cherche pas a draguer l'internaute, vu le sujet
Je sais que la page d'accueil ne sera pas lue, mis à part par celles et ceux qui voudront participer aux corrections... Bon quand j'aurais un moment je l'améliorerai ! Elle en a bien besoin !

Oui le reste est sur une seule page, et je veux qu'il en soit ainsi.
C'est un bouquin, austère oui... ce n'est pas un arbre de noël...
Ce texte ne m'appartient pas, je n'ai pas le droit d'en faire n'importe quoi, donc il ressemble comme deux gouttes d'eau au livre dans la traduction de Charles Appuhun et que l'on trouve en poche chez GF Flammarion.
Une seule page, ça permet, une fois chargée :
- de naviguer sans perte de temps,
- de pomper le code pour le mettre sur son PC perso, sans faire appel à des aspirateurs de site
...

a écrit :
Recommandations:
- S'imaginer utilisateur égaré débarquant sur une page du site (pas forcément l'accueil...).
- Faire simple.
- Découper, expliquer.
- Être bref dans les explications, efficace dans la découpe.
- Lier les parties entre elles.
- Ne pas abuser des liens dans tous les sens. Ce n'est pas parce qu'on peut qu'on doit le faire. Penser à la lisibilité du parcours entre les différentes pages.
- Savoir quelle est la cible.

Ben oui j'ai pensé un peu à tout çà, vite fait :
- on ne s'égare pas par hasard sur Spinoza, sinon on fuit C.Q.F.D.
- Impossible de faire plus rudimentaire qu'une seule page
- les lecteurs de cet ouvrage n'ont pas besoin d'explications, c'est quand on a lu le bouquin 3 ou 4 fois qu'on commence à avoir envie de faire des recherches dans le texte, et là l'informatique devient utile
- il m'est tout à fait impossible de ne pas mettre de liens dans tous les sens, l'ouvrage est conçu ainsi, c'est sa beauté, sa force...
- la cible : quelques fadas de ce texte qui ne demande qu'un outil pour rechercher une expression, un mot, suivre le cheminement de la pensée de Spinoza...

Exemple tout Spinoziste sait à quoi correspond E3DA6
Cette codification est quasiment normalisée , elle correspond à : http://www.spinoza.webou.net/Ethique.php#E3DA6
Autre exemple, je fais <CTRL-F> parce je recherche une phrase qui contient "réalité et perfection", dans ma lucarne, j'ai pas plutôt tapé : "réalité et p" que je suis déjà là-dessus :

N132 - E2Def6 VI E2 Def6 N132
Par réalité et par perfection j'entends la même chose.
et dans la barre d'URL j'ai : http://www.spinoza.webou.net/Ethique.php#E2Def6
Tous les Spinozistes savent par cœur qu'il s'agit de la définition 6 de la 2ème partie de l'Ethique !

Dois-je en faire en autre :
Je sais, groso modo que "la Joie est le passage d'une perfection moindre à une perfection plus grande"
Je recherche donc sur "passage"
et je tombe sur :
Les images des choses (comme nous l'avons montré dans la Prop. 19) qui posent l'existence de la chose aimée, secondent l'effort de l'Âme par lequel elle s'efforce d'imaginer cette chose. Mais la Joie pose l'existence de la chose joyeuse, et cela d'autant plus que l'affection de Joie est plus grande, car elle est (Scolie de la Prop. 11) un passage à une perfection plus grande ; donc l'image de la Joie de la chose aimée seconde dans l'amant l'effort de l'Âme, c'est-à-dire (Scolie de la Prop. 11) affecte l'amant de Joie, et cela d'autant plus que cette affection aura été plus grande dans la chose aimée.
qui correspond à E3P21D = la Démonstration de la Proposition 21 de la 3ème partie de l'Ethique.
Mais où est pioché cette affirmation ? : et bien on la trouve dans (Scolie de la Prop. 11) Autrement dit dans le Scolie de la Proposition 11 de la partie en cours c-à-d de la 3ème et on tombe sur http://www.spinoza.webou.net/Ethique.php#E3P11S. Voilà, voilà !



Bon vous comprenez, je sais que je m'adresse à un public très restreint...
Que j'aie encore du boulot à faire pour améliorer le confort du lecteur, j'en suis conscient...
Je n'ai pas besoin de dire que je débute en HTML, ça ce voit mais je suis quelqu'un qui est plus sensible aux fonctionnalités qu'au confort...
D'abord, égoïstement... pour moi... tout seul... j'ai besoin d'une popup, ou autre chose, mais ce serait l'idéal (les traitement de texte le font bien...). Pour faire défiler le texte dans tous les sens justement, et le plus rapidement possible, parce qu'à mon âge en une nano-seconde les neurones font une RAZ

MERCI pour ton lien Florent, je l'ai suivi. Je ne suis pas capable de dire si ce travail est bien ou pas, mais je suis tout à fait incapable d'en faire autant. Tu sembles ne plus l'aimer, moi je le trouve sympa ! mais je ne peux pas présenter l'Ethique sous cette forme, tu as vu le morceau !!!

Alors là :

a écrit :
S'il faut privilégier un public, on privilégiera d'ailleurs les utilisateurs, car il ne sert à rien d'avoir un site visible sur les moteurs de recherche mais inutile pour le public cible;

je suis bien d'accord !

MERCI pour vos liens Jonny concernant les balise META. Je n'ai pas encore tout lu bien sûr, mais c'est très clair. En résumé mis à part la balise DESCRIPTION, et ENCORE... pour mes 2 pages il vaut mieux que je compte sur le bouche à oreille... j'aurais plus besoin d'un "S" à oreilleS que d'une balise !


Pour terminer, j'insiste, et réitère ma question :

a écrit :
En gros, je voudrais faire en HTML, ce qui se fait un peu dans la fonction "Recherche" (CTRL F) de IE par exemple, ou dans un correcteur orthographique... :

- en cliquant sur un lien de la fenêtre "Parent" (le livre) ouvrir une petite fenêtre.

- cette petite fenêtre, flottante resterait au premier plan, on pourrait la déplacer si elle masque une partie du texte que l'on souhaite voir en dessous.

- dans cette petite fenêtre une liste de liens qui correspondent a des liens de la page "Parent" (en fait le livre en dessous).

- en cliquant sur un lien de la petite fenêtre flottante, faire défiler le texte du livre en dessous, afin de le positionner au bon endroit, c'est à dire à la valeur du lien sélectionné.

Je demande si c'est possible !
Ou quelque chose de semblable... avec quoi ? JavaScript ? JQuery...
Si ça a été fait, un lien et je me débrouillerai... Je contacterai le webmaster, lui offrirai une caisse de champagne...
Des menus accordéons en CSS, si vraiment on peut pas faire autrement, mais déjà là, ça ferait arbre de noël, et je veux éviter.

Encore MERCI pour toutes ces infos !
Modifié par dmganges (08 Oct 2011 - 16:20)

La nuit porte conseil

Après la mise en place d'un conteneur préconisé par Laurie-Anne, je n'ai plus besoin de Popup.
Cela devient évident, deux petits cadres qui s'ouvrent à la demande dans les marges.
A gauche pour les liens appelants, à droite pour les liens appelés.

Bon la mise en page n'est pas encore au point, il me faut la reprendre entièrement. Je devrais recevoir le bouquin CSS2 la semaine prochaine...

Sans rire, et par curiosité purement technique, elle est possible on non mon histoire de dingue de popup ?
Je ne lâche pas le morceau facilement !

MERCI de m'avoir mis sur la bonne voie !

jonny a écrit :
Non, la balise meta description ne sert plus au référencement, en tout cas pour google. (car il semblerait que yahoo, lui, l'utilise...)

Personne ici n'a prétendu que la META Description améliorait le positionnement ou y participait d'une manière ou d'une autre dans Google. Mais le référencement est une discipline qui ne se limite pas à l'optimisation du positionnement.

La META Description est utile pour obtenir du trafic depuis les pages de résultat des moteurs de recherche. Un site peut apparaitre en tête des SERP pour une requête mais obtenir proportionnellement peu de visites car le titre de la page et la description seront mauvaises.

Merci donc pour les précisions qui seront je pense utiles à dmganges et d'autres; par contre tu devrais revoir ta définition du référencement.

Par ailleurs je soulignais l'existence d'un article sur le sujet ici même sur Alsacréations. Je te laisse y jeter un oeil à l'occasion, et y relever des erreurs le cas échéant.

dmganges a écrit :
- de naviguer sans perte de temps

Objection. S'y retrouver dans une énorme page/livre est loin d'être évident. Je le constate régulièrement en comparant la facilité d'utilisation de la spécification HTML4 (plusieurs pages) et du brouillon de HTML5 (une page monolithique). Les versions plus abouties de HTML5 seront à priori publiées en plusieurs pages.

Je note par contre que pour une recherche dans le texte intégral, si le site ne propose pas un moteur de recherche, avoir une page monolithique et utiliser la recherche intégrée au navigateur peut être une solution. Je me demande cependant quelle proportion d'utilisateurs (appartenant à la cible) aura ce réflexe.

dmganges a écrit :
- de pomper le code pour le mettre sur son PC perso, sans faire appel à des aspirateurs de site

C'est pas faux. Proposer un Zip avec les différentes pages marcherait bien également (voire mieux?).

dmganges a écrit :
- on ne s'égare pas par hasard sur Spinoza, sinon on fuit C.Q.F.D.

Il n'y a pas de causalité entre la difficulté d'un texte et le type d'interface optimal pour le présenter. Les éditions papier des livres les plus ardus sont, lorsqu'elles sont de qualité, aussi lisible que celles de livres plus accessibles.

dmganges a écrit :
- Impossible de faire plus rudimentaire qu'une seule page

J'ai prôné la simplicité pour l'utilisateur. Un site rudimentaire, c'est une facilité pour le webmaster, pas nécessairement pour l'utilisateur.

dmganges a écrit :
- les lecteurs de cet ouvrage n'ont pas besoin d'explications, c'est quand on a lu le bouquin 3 ou 4 fois qu'on commence à avoir envie de faire des recherches dans le texte, et là l'informatique devient utile

Et les visiteurs qui vont arriver sur le site via les moteurs de recherche sur des requêtes autres que "ressource pour les connaisseurs de Spinoza qui ont lu l'Éthique trois ou quatre fois", on les avertit que ce site concerne un public bien particulier ou bien on les laisse se casser les dents dessus?

Le Web a ceci de particulier que l'on touche souvent des personnes au-delà ou à côté de la cible. Un site web d'accès public, et indexé par les moteurs de recherche, devrait toujours d'une manière ou d'une autre préciser de quoi il traite, et qui peut y trouver un intérêt.

dmganges a écrit :
En gros, je voudrais faire en HTML, ce qui se fait un peu dans la fonction "Recherche" (CTRL F) de IE par exemple, ou dans un correcteur orthographique... :

- en cliquant sur un lien de la fenêtre "Parent" (le livre) ouvrir une petite fenêtre.

- cette petite fenêtre, flottante resterait au premier plan, on pourrait la déplacer si elle masque une partie du texte que l'on souhaite voir en dessous.

- dans cette petite fenêtre une liste de liens qui correspondent a des liens de la page "Parent" (en fait le livre en dessous).

- en cliquant sur un lien de la petite fenêtre flottante, faire défiler le texte du livre en dessous, afin de le positionner au bon endroit, c'est à dire à la valeur du lien sélectionné.

La simple fonctionnalité qui consiste à faire défiler la page vers une référence, c'est celle des ancres en HTML. Il suffit donc de faire une liste de liens sous la forme <a href="#ABCDE">ABCDE</a>, et d'avoir des éléments dans le texte qui servent de marqueur, par exemple en utilisant l'attribut id sur un titre: <h3 id="ABCDE">Le titre en question (ref. ABCDE)</h3>.

Ensuite, pour en faire un élément qui reste en surimpression sur la page, on peut utiliser le positionnement fixe en CSS (position:fixed). Je le fais d'ailleurs pour le menu de gauche sur la version HTML du livre de Florent Latrive (à tester sur l'introduction ou un chapitre).

Pour l'afficher uniquement lorsque l'utilisateur clique sur un lien ou un bouton, on peut utiliser JavaScript pour afficher et masquer cet élément. Pour gérer une fonction de déplacement en «drag and drop», on peut le faire en JavaScript aussi, mais ça devient un peu plus compliqué (les bibliothèques JavaScript telles que jQuery facilitent grandement la tâche, mais si on ne connait rien à JavaScript ça reste ardu).
Modifié par Florent V. (25 Sep 2009 - 12:04)

Encore MERCI pour cette réponse détaillée Florent,

Toutes tes premières considérations valent au moins autant que les miennes, je ne reviendrai pas dessus.

Seulement une chose, qui n'excuse rien bien sûr : en premier lieu j'ai fait cet outil pour moi, pour combler un petit besoin. Petit car, naviguer selon les liens internes du bouquin je le fais moi même rarement...
Lorsque je l'ai mis en ligne, c'était avec l'idée que ce petit travail, de galérien quand même, qui demande pas mal de concentration... soit récupéré par un forum entièrement dédié à Spinoza... Manque de chance ça ne les intéresse pas... Je me retrouve avec mon bébé sur les bras... A moi de le faire évoluer...

Je vais le faire avec plaisir car je me rend compte qu'il est déjà pas mal accédé malgré sa mise en place récente.

Voici les contraintes que je me suis donné, elles restent arbitraires bien sûr :

- Rester au plus près de la présentation du livre de poche, voire des autres éditions. C'est un livre sans table des matières, hormis la division en 5 parties.
- Afficher quelque chose aussi dépouillé que possible. D'abord parce que je ne sais pas faire autrement et parce que je n'ai pas envie, voila deux conditions bien suffisantes. En laissant le code à disposition, d'autres pourront l'agrémenter à leur convenance.

Franchement circuler suivant les liens existants, je ne le fais pas souvent. Circuler de façon que j'appellerai "Transversale", c'est à dire en remontant par les liens appelants, je ne l'ai jamais fait, et pour cause l'outil ne le permet pas encore.

Ce que je veux faire reste proche de ce que tu as fait, à ceci près que je veux faire disparaitre les liens Appelants/Appelés lorsqu'on en à pas besoin, c'est à dire la plupart du temps, pour le confort visuel ; je veux aussi que dans le texte les liens soient le plus discrets possibles, afin qu'ils ne freinent pas la lecture, pour le moment ce n'est pas le cas pour le confort du développement.

Je ne veux pas faire apparaître la totalité des liens Appelés/Appelants, mais seulement ceux concernant un élément (un paragraphe qui contient des liens, que j'appelle nœud dans ce cas). Sinon ça sera le foutoir, on n'y verra plus rien.

Il me faut trouver le moyen de passer une petite liste de liens, une dizaine en moyenne, à une fonction qui m'afficherai çà pour naviguer "Transversalement" dans le texte...

La fonctionnalité des correcteurs orthographiques m'est dessuite venue à l'idée, d'où le popup... et mes premiers essais dans ce sens... c'était sans tenir compte de la gestion du focus !
J'ai l'habitude des langages du type C++, on y fait çà comme qui rigole...


J'ai recentré le texte dans un conteneur, j'ai maintenant des marges pour faire apparaître mes liens, Appelants à droite, Appelés à gauche...

Du peu que j'ai vu sur les menus déroulants et accordéons, je devrais pouvoir m'en tirer avec CSS, mais reste la gestion lourdingue des particularités des navigateurs... Il n'est donc pas question pour moi de faire autant de menus ou de <div> qu'il y a de nœuds a prendre en compte (environ 400 sur 920) !
D'où le besoin de la génération dynamique de l'astuce...

Je risque de m'y casser les dents, mais il faut bien qu'il me reste un petit intérêt technique
Une occasion pour me mettre à CSS, je n'y connais quasiment rien mais je n'ai pas trop de soucis avec les notions d'objet et d'héritage. Je verrai bien.

@+, mais dans quelques semaines... il me faut bosser maintenant !
Modifié par dmganges (25 Sep 2009 - 17:29)

Bonjour,
Je reviens avec mon livre, pardon de vous ennuyer encore pour un problème de base.

J'ai introduit le texte dans un conteneur, j'étais content, c'est effectivement beaucoup plus facile pour la lecture...

Mais depuis j'ai perdu la possibilité de naviguer dans le livre.

- je clique sur la photo --> je vais sur le sommaire
- je clique sur DEFINITIONS DES AFFECTIONS c'est OK
- je descends sur la définition III, je clique sur le lien DA3, la définition se positionne en haut de la page
Tout est OK
et si j'utilise les flèches de mon navigateur (FF3.2) je parcours le chemin inverse
C'est exactement ce que je veux.

Si je fais la même manip, ça se passe bien tant que je ne cherche pas à revenir en arrière avec les flèches du navigateur !

Est-ce normal ?
Ai-je encore oublier quelque chose ?

Ça fait un moment que je cherche sans succès, je m'en suis aperçu seulement lorsque j'ai introduit les deux conteneurs de part et d'autre du texte.
Bien sûr les liens dans LG sont bidons, mais ils fonctionnent, enfin à moitier puisqu'on ne peut pas revenir avec les flèches du navigateur.

J'espère qu'il y a un remède, si non ça me fout tout en l'air !

NB: je n'ai pas encore peaufiner la présentation, j'ai corrigé les erreurs les plus grossières, mais je veux avant de m'embarquer m'assurer de la faisabilité.

MERCI d'avance pour votre aide.
Bien sûr je suis preneur de tout autre méthode, pourvu qu'on puisse naviguer à fond la caisse dans le texte


Modifié par dmganges (05 Oct 2009 - 21:10)

Bonjour,

l'anomalie provenait d'un overflow: auto dans div#container

#container {
width: 55em;
height: 35em;
background: #EEFEFF;
text-align: left;
border: 1px solid #D5FFFF;
margin-left: auto;
margin-right: auto;
overflow: auto;
}


J'ai encore dû revoir la présentation :

http://www.spinoza.webou.net//Ethique.php
Les deux fichiers ne diffèrent que par la ligne overflow: auto;

Dommage, j'aimais bien cette disposition,
Mais la disposition s'adaptera aux besoins et non l'inverse !

Au passage :

Les œ sont corrects avec : http://www.spinoza.webou.net/ et :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ethique de Spinoza.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Validation Output: 6 Errors

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ethique de Spinoza.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />

Validation Output: 8 Errors

? Là aussi j'ai dû louper qqc
Pourtant j'ai le nez dessus p16-17
Mais je ne suis pas encore allé au delà ...
Modifié par dmganges (08 Oct 2011 - 16:25)

Salut,

dmganges a écrit :
Là aussi j'ai dû louper qqc

Oui : tu pourrais lire Comment bien déclarer l'encodage des caractères d'un document. Dans ton cas : tu enregistres ton document en iso-8859-1 alors que tu le déclares en iso-8859-15

MERCI Heyoan pour ta réponse.

Pardon mais je n'y arrive pas !

1 - mon éditeur de texte (KWrite) est bien paramétré pour encoder en 8859-15
Toutefois à l'intérieur les oe liés n'apparaissent pas correctement : nœuds.
Si je passe mon éditeur de texte en 8859-1, j'ai la même chose : nœuds.
(Bon là après un "Prévisualier" ils apparaissent normalement !! )

2 - j'ai fait la vérification http://web-sniffer.net/
Que mon éditeur soit en 8859-1 ou 8859-15, j'obtiens :
GET /ESS/index.php HTTP/1.1[CRLF]
Host: dmspin.free.fr[CRLF]
Connection: close[CRLF]
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; de; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9[CRLF]
Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7[CRLF]
Cache-Control: no[CRLF]
Accept-Language: de,en;q=0.7,en-us;q=0.3[CRLF]
Referer: http://web-sniffer.net/[CRLF]

Dans les deux configurations de mon éditeur de texte, le fichier sur le serveur est : Accept-Charset: ISO-8859-1

HTTP Status Code: HTTP/1.1 200 OK
Date: Sat, 03 Oct 2009 13:29:32 GMT
Server: Apache/ProXad [Aug 9 2008 02:45:09]
X-Powered-By: PHP/4.4.3-dev
Connection: close
Content-Type: text/html

a écrit :
On peut toutefois vérifier quelle information est envoyée par le serveur (surtout si vous soupçonnez un problème d'encodage des caractères) en consultant les en-tête HTTP, par exemple avec l'outil en ligne suivant : http://web-sniffer.net/ (surveiller la ligne « Content-Type » dans le tableau « HTTP Response Header »... si elle ne mentionne aucun « charset », c'est qu'aucun encodage n'est spécifié par le serveur)

Content-Type: text/html : Donc pas de « charset »

3 - Je transfère avec http://ftpperso.free.fr/ je ne peux rien vérifier et/ou KFtpGrabber
par contre KFtpGrabber permet de configurer l'encodage, après vérif il était en 8859-1
Je l'ai passé en 8859-15
J'ai refait le dernier transfert avec KFtpGrabber

Là ça va mieux, avec :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ethique de Spinoza.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">

Les œ de la page s'affichent correctement
D'ailleurs, avec ou sans

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Mais, avec ou sans la ligne précédente :
a) http://web-sniffer.net/ voit toujours Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7[CRLF]
b) http://validator.w3.org/check voit toujours : Validation Output: 6 Errors
Error Line 98, Column 56: non SGML character number 156
- <a href="./Ethique.php"><b>Ethique</b></a> sans les nœuds<br>

Avec un "bébeil" à la place de œ bien sûr !

Bon en tout état de cause ce n'est pas primordial puisque tant en 8859-1 qu'en 8859-15 ma page s'affiche correctement.
La correction du paramétrage de KFtpGrabber me permet d'être cohérent c'est à dire d'avoir un charset=ISO-8859-15 et un affichage correct.

Je ne comprends pas pourquoi les deux outils de validation voient le ficiher en iso-8859-1

Encore MERCI Heyoan, tu m'as permis de découvrir que KFtpGrabber pouvait convertir l'encodage !
Modifié par dmganges (05 Oct 2009 - 21:16)

Bjr,

Ça y est !
Globalement je fais ce que je veux !
Encore qq petits cadrages, les styles à imbriquer, un peu d'optimisation... et encore 2 mois ou 3 mois de saisie... c'est bon sur FF3.x, pour les autres je verrai peut-être, après...

J'ai donc respecté MON cahier des charges initial :
- une présentation dépouillée
- un cheminement du feu de dieu... (le dieu de Spinoza, bien sûr !)
- la possibilité de faire disparaître les nœuds lorsqu'on n'a pas besoin
...

RDV fin 2009, en attendant un aperçu, c'est déjà lisible :
http://www.spinoza.webou.net/Ethique.php

Enfin, nœuds appelants seulement les 3 premiers, nœuds applelés les 2 premiers, sachant qu'il y en à plus de 900 et à 10/jour, ça fait le compte

Et MERCI à celles et ceux qui ont pris la peine de me répondre !
Modifié par dmganges (08 Oct 2011 - 16:27)