Créer une page internet assez complexe

[fantassin-06]

merci Dylav pour les conseils !

[ricou33]

Excuse-moi, Ricou, d'avoir squatté chez toi...

Ce n'est pas trop grave, ça m'est aussi utile Ce qui m'embête plus c'est de ne pas avoir de réponse à mes questions 1 et 3.

 

Fantassin, j'ai bien rajouté l'image avec l'url comme tu l'as dit mais on ne voit rien, c'est vraiment minuscule, il vaut mieux mettre un p'tit dessin qu'une photo.

Et j'espacerai mon texte à l'occasion, j'ai vu que j'ai compris le principe de l'html et j'ai envie de passer au php, donc pas de temps à perdre, je finirai cette page plus tard, et puis il faudra aussi que je rétrécisse les photos agrandies, j'ai vu que ça faisait vraiment trop gros pour être affiché dans un explorateur.

[Dylav]

Promis, je vais relire ton message #7, pour voir si je peux quelque chose pour toi. J'ai déjà sorti le code de ta page, mais ne l'ai pas encore lu... un peu de flemme, ce soir, après une journée de boulot assez speed.

 

Juste un mot à propos de photos. Tu sembles dire que tu les présentes plus grandes que nature. Ce que j'ai eu l'occasion de constater personnellement, c'est que les agrandissements effectués par le navigateur diminuent toujours sensiblement le rendu d'une photo, même pour de faibles zooms genre 110 ou 120%.

 

Toute la littérature sur le sujet converge vers la recommandation de demander au navigateur d'afficher les photos en taille réelle. Donc de les retailler au préalable aux dimensions qu'on souhaite leur voir réellement occuper. Il suffit pour cela d'utiliser n'importe quel produit manipulateur de photos, comme Microsoft Office Picture Manager, livré en standard avec Windows XP (?), ou PhotoFiltre, excellent freeware téléchargeable sur Zébulon. Il est en outre préférable de préciser leurs dimensions au navigateur (width, height) : même s'il sait les retrouver, c'est autant de travail en moins dans le calcul de sa mise en page, affichée ainsi plus rapidement.

[fantassin-06]

Salut Ricou33,

 

j'ai bien rajouté l'image avec l'url comme tu l'as dit mais on ne voit rien, c'est vraiment minuscule

 

J'avais prévenu Il faut effectivement quelques chose de basique sinon on y voit rien....

 

Sinon en marge des explications du site du zéro, je suis tombé sur des tutos interressants ici et entre autre sur des gabarits de mise en page disponible ici (ça peu servir pour les mises en pages ) . Je m'en suis inspiré pour l'insertion de vidéos en les "scrollant" dans un "div" en haut de page. Je trouve que ça permet de travailler sur la surcharge visuelle de la page et dans ton cas, de retravailler le fond de ta page.

 

J'ai mis dans le fichier ".css" un:

 

.frame

{

margin-top: 50px;

width: auto;

height: 300px;

background-image: url("le_chemin_du_fond_du _site"); /* ça peut être une couleur */

background-attachment: fixed;

background-repeat: repeat;

overflow: auto;

}

 

et sur la page, j'ai codé en:

 

<div class="frame"><center>

 

(Les caractéristiques des vidéos) [J'ai rajouté entre les vidéos le conseil de Dylav dans un ".separe { margin-top: 10px; margin-bottom: 5px; }" dans le ".css" (voir le code source de la page) pour les aérer ]

 

</center></div>

 

résultat de la manip ici.

 

qu'en penses tu ?

Modifié le 20 décembre 2006 par fantassin-06

[Dylav]

Attention, Fantassin, la balise <center> est dépréciée,

et doit être remplacée par la clause de style text-align:center; dans ta classe frame.

 

Je ne t'oublie pas, Ricou...

[Dylav]

J'ai mis le premier chapitre en double car j'ai utilisé 2 méthodes différentes et je ne sais pas laquelle est la mieux.

En fait, aucune n'est satisfaisante.

La première, parce que tu détournes l'usage naturel des tableaux pour en faire un artifice de mise en page, qu'il faut déconseiller : les dispositifs de description vocale de l'écran destinés aux non ou mal-voyants vont raconter un peu n'importe quoi.

La seconde, parce que, comme tu l'as repéré toi-même, tout ça ne flotte pas et sera fastidieux à réajuster en cas de mise à jour. D'autant plus que la présentation risque d'être surprenante pour des résolutions d'écran différentes du 1024x768.

Je te propose une piste plus simple et plus souple à la fois, qui est une mise en page en deux colonnes. Mais, au lieu de le faire à l'aide d'un tableau, tu le fais avec deux <div> qui s'adossent l'une à l'autre.

 

#col_gauche {float:left;width:640;}
#col_droite {float:left;width:350;} /* ça laisse un peu de place pour l'ascenseur */

Ensuite, tu remplis chacune de tes colonnes comme tu l'entends. Il restera à ajuster les hauteurs pour les rendre à peu près égales.

 

Est-ce que c'est possible d'aligner les 3 dernières photos par rapport la photo flottante avec des marges entre chaque ?

Très facile, tu les sépares par des <br>, et tu peux leur affecter, par une classe, des marges qui les espaceront (pas de marge pour la dernière).

 

.image {margin-bottom:20px;}

Dans le <body>

 

<div id="col_gauche">
... texte et vidéos 
</div>
<div id="col_droite">
<img class="image" src="adresse-1" alt="image-1" title="image-1">
<br>
<img class="image" src="adresse-2" alt="image-2" title="image-2">
...
<img			   src="adresse-n" alt="image-n" title="image-n">
</div>

Après, il te restera des tas de petits réglages, mais les bases sont probablement posées.

[ricou33]

Ah mon cher Dylav, je ne peux t'en vouloir si à cause de Fantassin tu n'as plus de temps à me consacrer , surtout que tes conseils valent le coup d'attendre.

 

Malheureusement je m'absente pour quelques jours, noel oblige. Mais j'emporte tout mon p'tit boulot et tes conseils avec moi, sans oublier bien sur les cours du site du zéro. J'espère que j'aurai un peu de temps pour voir tout ça. Surtout que j'aimerai bien finir le php, j'attaque le 3ème chapitre sur 5, faut que je me dépêche de finir pendant que j'ai pas trop de boulot.

 

Je vous tiendrai au courant, et bon noel à tous !

[Dylav]

Détends-toi, Ricou, c'est la trêve des confiseurs, comme on dit !

Je vais moi-même disparaître demain matin pour une bonne semaine.

 

Joyeux Noël et bonne année.

Rendez-vous l'an prochain !

[ricou33]

Je viens faire le point.

D'abord j'ai fait la mise en page comme tu me l'as conseillé Dylav, à un détail prêt, pour définir les marges des images je n'ai pas fait une "class=image" mais j'ai inscrit dans le css "#col_droite img", pour lui dire d'affecter la marge à toutes les images dans cette <div>.

 

Ensuite, j'ai finis les cours sur le php, c'est déjà plus compliqué que le html, il y a encore des choses que je n'ai pas complètement assimilées mais je pense y arriver en faisant un site.

Je vais donc commencer de faire ce dont je parle dans le premier message, un site sur les citations, pensées et un peu toutes les sortes d'humour.

J'ai commencé de me pencher sur la base de données mais j'aurais besoin d'avis, voici les colonnes que je pensais faire :

1 : id

2 : Texte

3 : Auteur

4 : Type (citations ; pensées, maxime ; épitaphes ; proverbes ; calembours, combles ; blagues ; images ; autres)

5 : Thème (hommes/femmes ; famille ; animaux ; argent ; politique ; patrons/travail ; amitié ; amour ; age ; poids(ou aspect physique) ; militaire/guerre ; religion, paradis/enfer ; intelligence/bêtise ; musique ; humour noir ; autres

6 : Note (je pensais mettre une note que tous les visiteurs pourraient choisir avec un classement par moyenne)

7 : je ne sais pas si c'est utile : des commentaires, que les visiteurs pourraient laisser pour chaque citation

 

Les types et thèmes ne sont pas libre, il faudra choisir dans un de ceux cités pour chaque citation.

Les notes et les commentaires je ne sais pas faire, faut-il une deuxième table pour les inscrire ?

Pensez-vous que d'autres colonnes seraient nécessaires ?

Modifié le 11 janvier 2007 par ricou33

[Dylav]

En matière de structure des données, tu auras nécessairement au moins deux tables. La première avec tes rubriques 1 à 5, puisque chaque citation possède une seule valeur de chacune de ces rubriques. La seconde, pour stocker les notes et/ou commentaires de tes visteurs, aurait pour rubriques,

• id de la citation,
  
• identifiant du visiteur (si tu l'obliges à s'identifier, ce qui permet en outre de stocker pour lui une note et/ou un commentaire unique(s), premier ou dernier, au choix. Dans le cas contraire, cette table peut ne pas avoir de clef unique),
  
• note, (et/ou)
  
• commentaire.
  

Si tu souhaites pouvoir classer une citation dans plusieurs thèmes, la rubrique thème sort de la première table, et tu construis une table citation/thèmes, avec les rubriques,

• id de la citation,
  
• id du thème.
  

Tu as évidemment besoin de deux tables nomenclatures,

• les types (id et/ou intitulé court, intitulé long),
  
• les thèmes (id et/ou intitulé court, intitulé long),
  

et tu utilises, dans la table des citations, l'id ou l'intitulé court en tant qu'identifiant de la classification concernée.

Comme il s'agit de nomenclatures, tu ne remplis ces rubriques, dans la table des citations, que par le biais d'un choix dans la nomenclature (par exemple dans une liste déroulante).

 

Je te conseille aussi de doter tout rang de toute table d'un timestamp (date/heure) de dernière mise à jour, initialisé lors de la création du rang. Tu peux même conserver le timestamp de création et celui de dernière mise à jour (c'est luxe).

 

Tu pourrais aussi mettre, dans la table des citations, un compteur de lectures pour chaque citation, qui te permettrait de réaliser un hit parade de popularité des citations ! Mais il nécessite une réécriture systématique du rang de table à chaque lecture (pour le +1 dans le compteur).

 

N'est-ce pas un bon début, tout ça ?