Newsgroup: it.lavoro.professioni.webmaster
Titolo: Layout a colonne e dimensioni foto

Ciao a tutti,
  premetto che non sono un webmaster professionista (pero' sono italiano
e lavoro, quindi sarei IT al 50% ;-p ) ma spero che sarete gentili e mi
aiuterete lo stesso. =8-)
  Il mio dubbio e' legato alle immagini inserite in un layout a tot
colonne; il caso pratico e' il modulo news di un CMS (xoops) per
l'inserimento di articoli nel sito: supponiamo dunque di avere tre
colonne, la sx e la dx con width fissa e la centrale libera.
  Se nella colonna centrale inserisco una immagine troppo ampia, la
colonna dx viene (direi ovviamente) "spinta fuori". La cosa non mi piace
e vorrei risolverla, ma le soluzioni che ho pensato non mi sembrano il
massimo. Ve le giro:
1) definire via css 'width: 90%; height: auto;' che sgrana le foto
piccole e non permette di inserire immagini di dimensioni diverse;
2) limitare la larghezza massima della foto secondo una risoluzione
standard (es 800x600 che, a conti fatti, darebbe nel mio caso una foto
larga al massimo 450px). In questo caso, pero', se l'utente ha un
monitor molto ampio, la foto tende a perdersi e il tutto sembra miserino;
3) agire via php con un controllo delle dimensioni della foto e fare un
ridimensionamento solo nel caso in cui siano eccessive rispetto alla
finestra del browser. Questa cosa pero' richiede di modificare il codice
del modulo;
4) Insegnare all'utente a dimensionare le foto grandi in percentuale e
le foto piccole in px nel momento in cui le inserisce nell'articolo.
  Premesso che la (4) e' improponibile e la (3) preferirei evitarla,
secondo voi ci sono soluzioni che permettano di aver la botte piena e
la moglie ubriaca? E se no, quale scelta sarebbe la migliore? A naso
penserei alla (2) ma mi piacerebbe una vostra opinione. :-)
  Un saluto e grazie,
-- 
Gianfranco Bertozzi
Linux User #183585


<cut>
Fissa una dimensione minima: es. 1024x768;  valuta quanto � la larghezza 
centrale in pixel (teoricamente 1024 - widthcolsx - widthcoldx e fissa 
questa dimensione per le tue foto; dopodich� fai in modo che la foto appaia 
centrata alla colonna centrale.
In questo modo alla risoluzione di 1024x768 vedrai bene; a risoluzioni pi� 
alte si vedr� centrata e alle risoluzioni pi� basse (800x600 ad esempio) 
apparir� la barra di scorrimento; ma quest'ultima risoluzione � quasi 
scomparsa.
-- 
http://www.blueware.it
bluewarewebstudio (skype) 

   Premesso che la (4) e' improponibile
ah ecco, mi sembrava.

 massimo. Ve le giro:
Una cosa su cui sto rimuginando da tempo anche io, e c'e` una "soluzione" 
che mi piacerebbe provare a implementare prima o poi.
In pratica lato server (PHP) ho la possibilita` di ridimensionare le 
immagini caricate alla bisogna, e di cacharle sul server.
Da codice passi una thumbnail abbastanza piccola (diciamo adatta a 
schermi 320x480 da smartphone), che stretchi via css perche` appaia delle 
dimensioni corrette.
Lato client, caricata la pagina, verifichi quanto larga e` la colonna 
centrale, e richiedi (via AJA[XJH]) la stessa immagine per la risoluzione 
corretta.
Non serve fare migliaia di immagini, ma, per esempio, mandi l'immagine da 
320xY subito. Se la sua dimensione finale sara` meno di 320xY lasci 
quella e la scali via css, per dire, a 200xY. Se la sua dimensione 
dovesse essere di 400xY, generi la versione 640xY, la passi al client e 
la ridimensioni, sempre via css, a 400xY. Se l'utente allarga la 
finestra, l'immagine si ridimensiona da sola fino a 640xY, e quando lo 
supera, il tuo JS richiede la nuova dimensione (diciamo 800xY) e la scala 
via css.
In questo modo hai comunque un "effetto preview" sull'immagine, che 
magari appare sgranata all'inizio (se la apri a 1920x1200, per esempio) 
ma poi, appena il JS ha caricato la versione superiore, appare bene.
Hai solo downscaling (tranne che per qualche secondo ogni tanto) delle 
immagini, e di solito gli algoritmi dei browser non fanno cosi` schifo 
come nell'upscaling.
E, infine, la versione "base" del sito e` comunque piu` leggera e veloce 
a caricarsi.
Non so se mi sono spiegato, spero di si`. :)
Bye.

 ha scritto nel messaggio 
news:7us1op...@mid.individual.net...

Chiarissimo, ma non ha molto senso.
Intanto perché la cosa funziona all'inizio quando viene caricata la pagina; 
ma quando le dimensioni del browser vengono modificate (parlo di altezza e 
larghezza della finestra del browser) il contenuto della pagina dovrebbe 
automaticamente aggiornarsi; il che richiederebbe il ricaricamento della 
pagina.
L'utente finale N variazioni di dimensioni della finestra comportano N 
caricamenti di pagina; l'utente in questo caso si dimostra più veloce 
rispetto al caricamento della pagina e l'effetto sarebbe pressochè 
disgustoso.
Le uniche soluzioni rimangono: o un layout a larghezza fissa come suggerito 
da lbo, oppure se una delle colonne è in percentuale e le altre a dimensione 
fissa dimensionare le immagini per la risoluzione di base prevista e poi se 
l'utente allarga o stringe la finestra l'immagine risulterà centrata alla 
colonna in percentuale.


 ricaricamento della pagina.
No. Si usa appunto AJAX per sostituire solo il contenuto dell'attributo 
src del tag img.
Tutto il resto (dimensioni dell'immagine, posizione, ecc) vengono decisi 
dai css, che sono gia` caricati.
Bye.

 credo che php non si possa accorgere della larghezza del monitor,
  No, infatti sarebbe da fare con JS o simili. Ci sto gia' spippolando
per altre cose e non sembra difficile. Solo che nel mio caso non vale la
pena di perderci tempo.
  Grazie ancora e un saluto,



Ok, ma elimini l'effetto neve dovuto al ricaricamento dell'immagine?


 Ok, ma elimini l'effetto neve dovuto al ricaricamento dell'immagine?
Effetto neve?
Fai il preload fuori dallo schermo, e al termine, quando sai che 
l'immagine e` in cache, sostituisce il src.
Bye.


Non puoi fare il preload di una infinità di varianti.


 Non puoi fare il preload di una infinità di varianti.
Cooper, onestamente, ogni tanto cerco di capire se lo fai apposta... :/
Rileggi il mio messaggio: lo fai solo se l'utente cambia la dimensione 
della finestra...


In un secondo, io posso allargare e stringere la finestra anche 10 volte se 
sei sufficientemente veloce; nessuno me lo impedisce di fare.
Inoltre, se la finestra ha larghezza 500 pixel e io la porto a larghezza 600 
pixel; da 500 a 600 pixel ha già subito 100 variazioni: 501, 502, 503..... 
598, 599, 600; dunque ti ritrovi a dover caricare l'immagine 100 volte; SE 
VUOI DARE UNA CONTINUITA' naturalmente; puoi fare un aggiornamento a ogni 
tot variazioni... questo si, attenui l'effetto neve ma avrai dei momenti in 
cui l'immagine è caricata (e dei momenti in cui l'immagine è scomparsa 
ovvero durante la variazione della dimensione della finestra, salvo poi 
apparire quando ti fermi di allargare o stringere la finestra.


 dai css, che sono gia` caricati.
  Sto scervellandomi per capire come funzionerebbe questa cosa e non ci
arrivo. Siccome vorrei imparare, se per favore mi spiegassi dove sta
l'errore nel mio ragionamento mi faresti una cortesia. :-)
  In pratica tu carichi la pagina che ha dentro una funzione aiax (che
non conosco) che "sente" (in real time o a intervalli di tempo?) le
dimensioni della finestra del browser e...? :-o
  Da quel che ho inteso, la stessa funzione "chiede" al server una
immagine di dimensioni adeguate alla finestra e sostituisce la vecchia
con la nuova senza ricaricare la pagina. :-o
  Se cosi' fosse, pero', non capisco il senso di dare via css le
dimensioni dell'immagine stessa a meno di darle in percentuale. Ma anche
se cosi' fosse, che senso avrebbe regolarle via css quando con questo
procedimento avresti sempre un'immagine delle dimensioni adeguate?
  Un saluto,
-- 
Gianfranco Bertozzi
aka 'duro come una pigna verde'
Linux User #183585

procedimento avresti sempre un'immagine delle dimensioni adeguate?
Per come l'ho capita io, tu hai appunto una immagine "delle dimensioni
adeguate", ma NON una immagine "delle dimensioni precise".
Diciamo che rimodelli la finestra da 400 a 800 pixel a passi di uno.
Da 400 a 512 non succede niente, e il CSS dice al browser d'effettuare
un resample dell'immagine originale che e' di, mettiamo, 256 pixel.
Chiaramente, verso i 512 l'immagine e' sgranata.
A quel punto, AJAX sostituisce l'immagine con quella da 512 pixel e lo
fa una volta sola (quando w==512). Questa immagine rimane uguale anche
per w=513, 520, 550, ... 700, 800, ed e' il CSS che la ricampiona.
Cosi', inizialmente carichi l'immagine piccola, e solo dopo arriva una
immagine grossa, e una soltanto.
Se poi strabecchi avanti e indietro da 800 a 400 e viceversa, ormai le
due immagini sono gia' in cache e non succede niente.
Dato che il CSS non supporta - credo - il LOD, la decisione su "quale"
immagine caricare la devi fare in Javascript.
Leonardo
-- 
The cock doth craw, the day doth daw,
the channerin' worm doth chide:
gin we be mist oot o' oor place,
a sair pain we maun bide.

 immagine caricare la devi fare in Javascript.
  Posso dirtelo io: il css non supporta il lod, ne sono certo. Ora che
ti ho chiarito questo dubbio tocca a te chiarirne uno a me: cos'e' il
lod? ;-)
  Un saluto,
-- 
Gianfranco Bertozzi
aka "l'ignorante"
Linux User #183585

 lod? ;-)
Presumo il Load On Demand. No, non lo supporta. :)
Bye.

lod? ;-)
Level Of Detail. E' un termine di VRML, non HTML :-)
http://www.cs.nps.navy.mil/people/faculty/capps/4473/projects/LOD/LODlong.html
...a dire il vero mi sembra che avrebbe molto senso se lo supportasse,
visto che e' semanticamente connesso agli attributi di stile... Voglio
dire, come c'e' "media:print", perche' non creare "media:width{a,b}"?
Anche se, come gia' detto, si puo' emularla in Javascript.
