Discussione:
Layout a colonne e dimensioni foto
(troppo vecchio per rispondere)
Gianfranco
2010-02-26 22:07:23 UTC
Permalink
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
Cooper
2010-02-26 22:43:42 UTC
Permalink
Post by Gianfranco
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
<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)
l***@email.it
2010-02-27 02:40:35 UTC
Permalink
Post by Gianfranco
1) definire via css 'width: 90%; height: auto;' che sgrana le foto
piccole e non permette di inserire immagini di dimensioni diverse;
no no.
Post by Gianfranco
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;
credo sia davvero meglio impostare un layout a larghezza fissa. se ne
è parlato qualche giorno fa. ormai tutti hanno monitor larghi minimo
1024px, anche i netbook.

molti hanno anche monitor assai più larghi, e un layout fluido, che un
tempo aveva senso, ormai non l'ha più, perché stirare contenuti in un
monitor da 1440 (o quel che è) è controproducente per la loro
leggibilità.

potrebbe interessarti dare un'occhiata qui:

http://960.gs/
Post by Gianfranco
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;
credo che php non si possa accorgere della larghezza del monitor,
semmai se ne può accorgere javascript. potresti dare un'occhiata a
qualche plugin jquery che faccia ridimensionamento.
Post by Gianfranco
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.
seee, vabbè...
Post by Gianfranco
  Premesso che la (4) e' improponibile
ah ecco, mi sembrava.
Gianfranco
2010-02-27 10:55:59 UTC
Permalink
On Fri, 26 Feb 2010 18:40:35 -0800 (PST), ***@email.it wrote:


Ciao,

e grazie a ttutti per la risposta, che vedo suppergiu' coincidere.
Il thread sulla larghezza fissa l'avevo seguito ma non son riuscito a
collegare il cervello per capire che conteneva la risposta alla mia
domanda. :-/

Grazie anche ad Alessandro, l'idea e' molto carina e mi piace molto.
Non sapevo che si potesse fare una cosa del genere, ero convinto (sono
un principiante, ormai s'e' capito) che JS inviasse le dimensioni della
finestra una volta sola. Io infatti avrei preso le dimensioni della
finestra, fatto lavorare il php per ridimensionare l'immagine e poi
stop. Come dici tu e' molto piu' simpatico. :-)
Post by l***@email.it
credo sia davvero meglio impostare un layout a larghezza fissa. se ne
è parlato qualche giorno fa. ormai tutti hanno monitor larghi minimo
1024px, anche i netbook.
Grazie. Quindi mi conviene impostare un layout a tre colonne tipo
150px + 650px + 150px o giu' di li'... pero' la finestra del browser
la lascio stare, no? O devo forzarla alle dimensioni che mi servono?
Ridimensionare le finestre e' una cosa che odio, a dir la verita'. :-/
Post by l***@email.it
http://960.gs/
Ora ho poca banda, appena posso lo guardo. :-)
Post by l***@email.it
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,
--
Gianfranco Bertozzi
Linux User #183585
Alessandro Pellizzari
2010-02-27 08:00:27 UTC
Permalink
Post by Gianfranco
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
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.
Cooper
2010-02-27 09:42:15 UTC
Permalink
Post by Alessandro Pellizzari
Post by Gianfranco
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
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.
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.
--
http://www.blueware.it
bluewarewebstudio (skype)
Alessandro Pellizzari
2010-02-27 09:52:47 UTC
Permalink
Post by Cooper
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.
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.
Cooper
2010-02-27 12:05:38 UTC
Permalink
Post by Alessandro Pellizzari
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.
Ok, ma elimini l'effetto neve dovuto al ricaricamento dell'immagine?
--
http://www.blueware.it
bluewarewebstudio (skype)
Alessandro Pellizzari
2010-02-27 12:59:55 UTC
Permalink
Post by Cooper
Post by Alessandro Pellizzari
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.
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.
Cooper
2010-02-27 13:46:50 UTC
Permalink
Post by Alessandro Pellizzari
Post by Cooper
Post by Alessandro Pellizzari
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.
Ok, ma elimini l'effetto neve dovuto al ricaricamento dell'immagine?
Effetto neve?
Si lo sfarfallio, ovvero quando una immagine è caricata più volte in un
lasso di tempo relativamente breve.
Post by Alessandro Pellizzari
Fai il preload fuori dallo schermo, e al termine, quando sai che
l'immagine e` in cache, sostituisce il src.
Non puoi fare il preload di una infinità di varianti.
--
http://www.blueware.it
bluewarewebstudio (skype)
Alessandro Pellizzari
2010-02-27 14:20:27 UTC
Permalink
Post by Cooper
Post by Alessandro Pellizzari
Fai il preload fuori dallo schermo, e al termine, quando sai che
l'immagine e` in cache, sostituisce il src.
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...
Cooper
2010-02-27 15:23:34 UTC
Permalink
Post by Alessandro Pellizzari
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.
--
http://www.blueware.it
bluewarewebstudio (skype)
Gianfranco
2010-02-28 10:46:09 UTC
Permalink
On 27 Feb 2010 09:52:47 GMT, Alessandro Pellizzari wrote:


Ciao,
Post by Alessandro Pellizzari
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.
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
Leonardo Serni
2010-02-28 12:45:01 UTC
Permalink
On Sun, 28 Feb 2010 10:46:09 +0000 (UTC), Gianfranco
Post by Gianfranco
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?
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.
Gianfranco
2010-03-01 10:23:57 UTC
Permalink
On Sun, 28 Feb 2010 13:45:01 +0100, Leonardo Serni wrote:


Ciao,
Post by Leonardo Serni
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.
Quindi nel css ci sarebbe una cosa tipo { width: 75%; height: auto; }
o immagino male?
Post by Leonardo Serni
Dato che il CSS non supporta - credo - il LOD, la decisione su "quale"
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
Alessandro Pellizzari
2010-03-01 11:06:50 UTC
Permalink
Post by Gianfranco
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? ;-)
Presumo il Load On Demand. No, non lo supporta. :)

Bye.
Leonardo Serni
2010-03-01 12:28:39 UTC
Permalink
Post by Gianfranco
Post by Leonardo Serni
Dato che il CSS non supporta - credo - il LOD, la decisione su "quale"
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? ;-)
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.

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.
Continua a leggere su narkive:
Loading...