aide pour rendu de page

[da capo]

bonjour,
je ne viens pas souvent sur ce forum de développement web et lorsque j'ai cherché le fil qui présentait les sites persos, ben... non je ne l'ai pas trouvé.

bref, il ne s'agit pas tant de présenter un site que d'essayer de trouver une solution car j'ai du reprendre un site complètement dans l'urgence lundi pour lui redonner une certaine jeunesse (?), intégrer des nouveautés etc et comme j'ai un bon vieux imac G5, pas question d'évaluer les rendus en local. Alors j'utilise les services de browsershots.org et d'un autre pour prévisualiser certaines pages.

Or, alors que tout se passe plutôt bien (validité xhtml 1.0 strict ok sur toutes les pages et css 2.1), j'ai des pépins avec IE 6 : lorsque je passe par browsershots, mes pages sont rendues de façon satisfaisante mais quand j'ai pris un IE6 ici au boulot... aïe, aïe : tout reste bloqué sur la page "théma" : oui, oui, elle est lourde je sais (mais elle sera divisée d'ici peu... l'urgence etc, etc)

Alors, je ne comprends pas trop.

J'ai déjà du mettre au rencart un paquet de voeux pieux (ah les float:left et le doublement des marges etc...), faire une feuille de style avec des commentaires conditionnels pour rattraper leslimites de IE et utiliser des tableaux pour sécuriser les rendus. Mais là je ne comprends pas.


Bref, si vous pouviez m'aider à dépasser ce pépin en jetant un oeil à : http://www.kinomini.info/thema.php

Bien sûr, tous les conseils sont les bienvenus.

Merci par avance pour votre aide.

 

[Anonyme]

Heu... Pourquoi le mode tableau? Et la syntaxe html est bizarre... Et sur Firefox windows, j'ai le contenu mais parfois c'est pas tout à fait ça. Je regarde ce midi et je te dis quoi...

 

[Anonyme]

Bon la page se charge sur IE6 (sans problème d'affichage) mais c'est très très lent par rapport à Firefox.

 

[da capo]

Merci pour cette vérification
Il se trouve que finalement (ici au boulot) la page s'est chargée mais en un temps énorme :/

Je me demande si ce ne sont pas le nombre d'images accessibles via une div masquée qui sont en cause. Ou les films...

Bref, je vais commencer par "distribuer" le contenu dans des pages plus légères et revoir mon menu en utilisant un système en accordéon pour continuer à afficher l'entrée "théma" mais révéler ensuite les entrées possibles.

Sinon, l'emploi de tableaux a été rendu nécessaire par des décalages très lourds à gérer dans IE6 : doublement des marges sur les éléments en float left, j'ai bien tenté de passer les éléments en display:inline (cf commentaires conditionnels) mais alors, je perdais l'alignement au top, pour un alignement standard sur la ligne de base.

bref, pas facile de faire ce qu'on veut quand on n'est pas vraiment du métier.

sinon, la feuille de style attachée est toujours en travaux et contient des monceaux d'entrées maintenant inutiles...

[autosatisfaction] Bon, en 8/10 de heures de taff pour tout reprendre... je ne suis pas trop déçu.[/autosatisfaction]

 

[fredmac75]

Salut,
ta page pèse 551 Ko dont 90 % d'images. C'est tout de même un poil lourd pour une page d'accueil.

Sinon, comme gloup-gloup, je ne vois pas ce qui justifierai l'utilisation de tableaux. La mise en page n'est pas d'une très grande complexité.

Un page en full css te permettrais d'alléger ton code ; ce qui est, compte tenu du poids de la page, une bonne démarche.


A la ["I]vista del naso"[/I] tu devrais pourvoir atteindre les 200/250 Ko en retravaillant ta page.

Enfin, j'attire ton attention sur le fait que la variable la plus importante dans le temps de chargement n'est pas le poids intrinsèque des fichiers mais leur nombres. Plus les fichiers sont nombreux, plus il y a d'appel serveurs et plus le temps de réponse est long.


Voilu

 

[da capo]

Salut,
ta page pèse 551 Ko dont 90 % d'images. C'est tout de même un poil lourd pour une page d'accueil.

Je le sais bien. Aussi, comme je le précisais, je mets en chantier un découpage en pages plus légères.

Sinon, comme gloup-gloup, je ne vois pas ce qui justifierai l'utilisation de tableaux. La mise en page n'est pas d'une très grande complexité.

Un page en full css te permettrais d'alléger ton code ; ce qui est, compte tenu du poids de la page, une bonne démarche.

Je pense aussi que cela allégerait un peu, surtout dans la lisibilité du code.
Mais je me suis heurté à des problèmes de positionnement qui m'ont contraint dans l'urgence d'utiliser des tableaux pour avoir une présentation comparable à celle que j'aurais eue en utilisant des sections en positionnement flottant sans avoir à pâtir des insuffisances de IE dans l'affichage.

Je ne savais pas trop comment dépasser ce problème double :
- IE gère mal les sections (padding)
- IE gère mal les sections flottantes : doublement des marges…

Tout cela amenait invariablement à un dépassement de l'espace offert par le conteneur et les sections venaient s'empiler visuellement plutôt que d'apparaître côte à côte.

A la ["I]vista del naso"[/I] tu devrais pourvoir atteindre les 200/250 Ko en retravaillant ta page.

Oui… en modifiant la présentation des galeries d'images ? en réduisant la taille des images ?

 

[fredmac75]

Pour la gestion du padding, je te suggère de regarder le model box ie... ce faisant tu pourras calculer la taille de tes boîtes aux petits oignons avec une css dédié à ie6 (ie 7 ayant partiellement adopté le modèle standard).

Pour le problème de double margin, tu trouveras une explication sur positioneverything

Maitenant tu n'as plus d'excuses .

 

[da capo]

Maitenant tu n'as plus d'excuses .

me voilà beau :/

Ah, au fait : le fait de passer inline, je l'ai essayé mais comment faire en sorte alors que les div soient alignées au top plutôt que sur la ligne de base. Je l'avais écrit dans un précédent message

bref, là j'intègre un joli petit menu en accordéon pour alléger la page théma.
je reviendrai sur le tableau, le positionnement full css et tout le tralala quand j'aurai réglé ça.

mais merci !

 

[fredmac75]

si tu pouvais nous faire un schéma avec un screenshot, nous comprendrions mieux ton problème et pourrions te suggérer une ou plusieurs solutions.

 

[da capo]

si tu pouvais nous faire un schéma avec un screenshot, nous comprendrions mieux ton problème et pourrions te suggérer une ou plusieurs solutions.

Je vous remercie.
Là, je termine péniblement la refonte de l'énorme page thema en 6 sous pages (avec menu accordéon etc…)

Je fais quelques essais et je passe à l'épuration du javascript si j'y arrive... D'habitude, je n'en utilise pas du tout, là j'en ai pour plus de 120ko…

Ces scripts se rechargent à chaque page ou passent-ils en cache automatiquement ?

 

[Anonyme]

Les scripts se mettent en cache

120 Ko cela me semble beaucoup. Voici un script avec jquery, le truc c'est de mettre le script dans un fichier externe et pas dans la page comme dans le tuto.

 

[fredmac75]

... là j'en ai pour plus de 120ko… ?

120 Ko... bizarre. Chez moi j'ai 59 Ko pour ton highslide-with-html.js...

Où vas tu chercher ces 120 Ko ?

 

[da capo]

ben… le menu accordéon… il a rajouté quelques ko

 

[da capo]

Voici un script avec jquery, le truc c'est de mettre le script dans un fichier externe et pas dans la page comme dans le tuto.

C'est ce que je fais
D'ailleurs, c'est l'exemple que j'utilise avec quelques modifications.

Sinon, mon pb, c'est en effet la quantité d'images…
Mais bon, ça devrait passer : je referai quelques essais en haut débit mini (512k) depuis le boulot demain.

Merci pour votre aide.

 

[Anonyme]

Je pensais à un truc : tu as bien pris la version compressée de jquery?

 

[da capo]

non, mais à la réflexion, j'imagine que les serveurs doivent être compatibles pour permettre d'utiliser des versions compressées, non ?
Je veux bien qu'on m'explique

Sinon, après répartition sur plusieurs pages du contenu de thema.php, il se trouve que :
- la vitesse de l'affichage est correcte sur la première mais continue à être très longue sur d'autres (pas forcément plus chargées)
- ces mêmes pages sont visibles quasi instantanément avec Safari et Firefox sur PC.

Dernière chose, j'ai ajouté le script disponible sur Alscréations qui appelle des fonctions jQuery.
Il est pleinement fonctionnel mais par contre, la validation renvoie une erreur que je ne comprends pas, est-ce bien une erreur d'ailleurs ou une mauvaise interprétation ?
je vais continuer à chercher.


ps : fred75, gloup, gloup je vous aurais volontiers accordé un petit coup de boule, mais vous avez eu tant ces derniers temps...

 

[Anonyme]

Il y a 3 versions de la libraire jquery :

1. Minified, sans espaces, sans tabulations, etc (conseillée en production, celle qu'il te faut)
2. Packed compressée gzip (ne fonctionne pas avec tous les navigateurs, je te laisse deviner lesquels )
3. Uncompressed avec un code source mis en forme, pour faire des tests ou modifier le code

 

[Anonyme]

Voilà un exemple de code pour appeler les fichiers js :

    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/accordeon.js"></script>

Si tu as bien le code pour l'accordéon dans un fichier à part...

 

[da capo]

Bien, donc, j'oublie la compression des scripts.

sinon, les scripts sont bien dans des fichiers externes.

MAIS, car il y a un mais... le script du menu déroulant s'incorpore au lieu de se lier :/
Je crois savoir pourquoi (une histoire d'include). Je vais corriger ça même si cette partie ne représente que quelques dizaines de caractères.

le script jQuery, les scripts "highslide" eux, sont bien liés.

 

[Anonyme]

Oui, tu peux laisser tomber la version gzippée... La version minified (celle à utiliser) ne fait déjà plus que 52Ko, par rapport à la version normale (94,5Ko) c'est déjà un gain important en poids.