Mistero risolto: si tratta di un problema di adattamento dell'immagine di sfondo che riceve proporzioni differenti a secondo della misura dello schermo.

In effetti, un monitor di 1280x1024 px ha un rapporto x/y=1.25

Mentre un monitor di 1280x800 px ha un rapporto x/y=1.6

Quindi una stessa immagine adattata a riempire i due schermi rimane inevitabilmente sproporzionata sull'altro schermo.

Per risolvere il problema io ho preso per buona la misura dello schermo minore (il notebook, 1280x800). Ho fatto qualche prova e ricavato con metodo empirico che la misura utile della finestra del browser era di 1280x680 px.

Dunque ho ridimensionato le mie immagini di sfondo per le varie pagine da 1280x804 px a 680 px di altezza mantenendo inalterate le proporzioni; questo mi ha portato ad avere delle immagini di 1083x680 px.

A questo punto ho creato una nuova immagine vuota di 1280x680 px che ho riempito con un colore azzurro e al centro ho incollato per trascinamento l'immagine precedentemente modificata.

Ho salvato il tutto in formato .jpg ed ecco pronta la mia nuova immagina di sfondo ottimizzata per lo schermo del notebook.

Ho inserito l'immagine nel progetto attivando l'opzione di adattamento automatico e fine dei giochi.

Pro: sono riuscito ad avere uno sfondo che si adatta a due schermi di differenti rapporti x/y

Contro: L'immagine di sfondo nel monitor del desktop viene visualizzata senza subire alterazioni di alcun tipo (ed è ottima), ma nello schermo del pc subisce un evidente schiacciamento non soltanto l'immagine di sfondo ma anche tutte le celle (sempre rispetto al notebook). Questo comporta un insolvibile problema di impaginazione delle celle e rispettivi contenuti, come si può notare dagli screenshot che vado ad allegare, perchè o si rispettano le proporzioni di uno schermo o si rispettano quelle dell'altro; io ho optato per quelle del più piccolo cercando il miglio compromesso di impaginazione empiricamente lavorando coi due computers simultaneamente per controllare gli effetti delle varie modifiche.

Possibile che questo problema non abbia dei precedenti???

...ecco il secondo screenshot:

Rettifico: lo schiacciamento è dello sfondo rispetto ai contenuti, non delle celle e contenuti.

E' aggiornato il sito?

Perché (se sì) vedere il contenuto che va in su e in giù con quel tipo di immagine non mi sembra una bella cosa... ma io non sono né web designer né web master, quindi ignora questo mio intervento.

_______ oltre il 5° step ________

http://www.unofficialwsx5.com

___ questa sera: CIAMBELLE! ___

... sicuramente è questione di aspetto RAZIONALE da rispettare a priorità di un allineamento...

... qualcosa si dovrà pur tagliare, come il fatto di inserire fotografie in una cornice prefissata...

... questi esempi rendono l'idea, pur esendo le immagini ridimensionabili in base alla finestra hanno, l'una la priorità A/S e l'altra priorità C/C:

http://www.zspace.it/kolasim/miei_files/swzonecom/component_resize_K/ridimensionaK_F.html

http://www.zspace.it/kolasim/miei_files/swzonecom/component_resize_K/ridimensionaK_T.html

http://www.zspace.it/kolasim/miei_files/swzonecom/component_resize_K/slider_componenteKSM3.html

http://www.zspace.it/kolasim/wsx5_v8/sfondoresizeSuperK/pagina_1.html

... a maggior ragione, ci saranno dei tagli o sbordature con immagini fisse...

... da un esempio postato da Mirko B. per lo sfondo, ho visto che adesso anche con jQuery è possibile ottenere stessi risultati...

bye

Questo è il design del sito che ho voluto. Forse i tuoi gusti ti fanno preferire uno sfondo mobile che sale insieme ai contenuti della pagina, ma allora non avrei potuto mettere una immagine di sfondo, avrei dovuto mettere un pattern.

Oppure fare un template frammentato con i fogli di stile che regolano l'estensione delle parti come fa Incomedia, ma non sono ancora capace.

Ciao Kol; sì hai ragione. Il problema grave che rimane da risolvere non è il taglio che da qualche parte bisogna fare all'immagine, è la differenza di visualizzazione dei contenuti nei diversi formati di monitor che ci sono in circolazione. Che senso ha continuare a produrre monitors di misura diversa che creano problemi di compatibilità? Questo è il punto.

Oppure ogni modello di monitor deve avere la sua versione specifica di un sito web con l'impaginazione dei contenuti studiata ad hoc?

Per esperienza personale conviene fare il sito sulla base della larghezza e sulla base dell'accessibiliá. Diciamo che la risoluzione minore é 1024x768 al momento (visto che non ritengo 800x600 una risoluzione ancora attiva), inoltre c'é uno studio sulla risoluzione ottimale per un sito ed pari a 960 pixel in larghezza. Come sfondo invece ti conviene farne uno sulla base di risoluzione e metterlo in alto al centro e magari con adatta alla finestra. Con lo sfondo poi fai delle prove tanto con photoshop ci metti pochi sec a cambiare risoluzione.

secondo me devi ascoltare i consigli di chi te li offre disinteressatamente invece di fare il permaloso, guarda questi allegati

altro

e questo

poi guarda questo sito e dimmi se è la stessa cosa 

http://www.siti.roma.it/

In effetti dagli allegati il sito ha qualche problema, la struttura del monitor dovrebbe venire estrapolata dal conesto per divenire un Header + content+ footer. Il contenuto del sito non potra mai adattarsi al monitor del tuo template. Conviene rifare il sito ^^

Davvero bello ^^ . Posso chiederti, se l'hai fatto tu, come hai realizzato il monitor ?

Giuro che non avevo nessuna intenzione di essere permaloso; mi hai frainteso. Stavo solo spiegando le ragioni della mia scelta, niente di più. Volevo dire che lo scorrimento dei contenuti non è accidentale ma voluto come necessario compromesso tra l'esigenza di mettere l'immagine che desideravo e insieme la possibilità di pubblicare una quantità di contenuti più grande di quelli immediatamente visibili nella pagina. Tutto qui.

Altrimenti non so come rendere lo spazio da riempire di contenuti svincolato dallo sfondo che deve restare sempre invariato davanti al visitatore.

Confermo che a livello estetico il mio lavoro non è neanche comparabile col tuo e ti faccio i complimenti, ma

1. non mi vergogno ad ammettere che uno sfondo così io ancora non lo so fare anche se mi piacerebbe e ben vengano sempre i consigli (specialmente quelli gratis)
2. io non so integrare in una gallery altro che delle immagini, mentre i contenuti delle pagine del sito sono vari (per esempio il modulo di contatto)

Secondo me come prima cosa dovresti prendere il monitor da parte e dentro mettere i contenuti o magari un mnu esterno orizzontale sopra  l'header. Se il monitor lo inserisci come Header+Content+Footer dovresti migliorare il lavoro di un po. Inoltre lo sfondo é sfocato si vede che non é un'immagine adatta. E poi ci sono troppe immagini casuali. Oltre al;a vista estetica dovresti controllare anche il caricamento XD

... ha l'ancoraggio A/C, ...ma a parer mio non è stato ponderato bene...

bye

Il "tocco di genio finale"...

Gira egregiamente pure con IE7 (provato al volo).

Sì, vorrei inserirlo come Header+content+footer, ma come si fa?

Devo solo tagliare i pezzi dall'immagine principale? E dopo? E le pagine che usano una variante?

Io non conosco il CSS per gestire i vari pezzi. E il caricamento XD?

Kol vedo che per il ridimensionamento automatico hai usato SwishMax; poi come hai fatto ad inserire l'swf come sfondo al posto di un immagine?

magari l'avessi fatto io!!  L' ha fatto la persona citata nel sito stesso, un mito...

Cos'è il PSD? Un plugin? Come faccio a sapere se ce l'ho, dove lo trovo?

... ci sono arrivato anni luce prima di jQuery, col quale neanche mi confronto, e col vantaggio per il momento ancora unico, di poter inserire VIDEO come sfondo...

... ho realizzato un mio "Componente", e per integrarlo in WSX5E ho sfruttato il  grande suggerimento dato da "Icm" (SteveR), nell'Avo di Answers, che mi ha aperto gli orizzonti, e che si può ancora scaricare qui:       http://forums.incomedia.info/websitex5/viewtopic.php?t=16229&sid=dfc76078a16e6cdeeb491c9c31c3ccfd

... in pratica consiste nel realizzare un DIV con z-index negativo, al quale far contenere il filmato SWF...

... altri esempi con la stessa matrice:       http://www.zspace.it/kolasim/wsx5_v8/sfondoresizeSuperK2/pagina_1.html     http://www.zspace.it/kolasim/wsx5_v8/carlino/      http://www.zspace.it/kolasim/website/neve/

... puntualizzo, che mai prima dei miei esperimenti si era visto niente del genere, sembrava impossibile, specialmente in Flash su HTML, ...ma ora c'è arrivato anche jQuery, anche se limitato per certi aspetti...

bye

P.S. ... per vedere cose realizzate veramente bene, e avanti più dei tempi, occorrerebbe  visitare "anche"  i lavori di Stefano Scozzese, ex mago del Flash, ed ancora più avanti...

Per quanto riguarda il tuo template dovresti fare qualcosa del genere. Tieni conto che non é preciso perche l'ho fatto in due secondi. Ti basta prendere un monitor e poi adattarlo oppure rifarlo usando programmi di grafica. Il PSD é il file di Photoshop, di base il sito si crea con quello (o nel mio caso usando anche Corel Draw insieme) e successivamente lo adatti a website, oppure ritagli le parti che ti servono se lo fai in Codice. XD

Un'altra cosa che vorrei puntualizzare é che sulla musica, cosi coem immagini e font c'é il copyright percio meglio fare attenzione a qeullo che si usa XD

A me sembra perfetto, ma dopo come fai ad usarli?

Io sono andato a vedere nella cartella dei template di WSX5 e ho visto che per un template (ex.. Architecture) ci sonoo dentro due cartelle e un file xml.

Le due cartelle credo significhino "menù orizzontale/verticale".

Prendiamone una: dentro c'è un foglio di stile che gestisce i vari pezzi grafici nelle cartelle da 1 a 4. Nell'esempio che hai postato tu PSD non ha fabbricato alcun CSS; lo devo scrivere io?

Dove scegli il template, puoi cliccare per scegliere il template personalizzato e da li imposti i parametri e i file immagine da usare.

Nel caso il materiale che hai appena postato consenti a tutti di utilizzarlo oppure no?

Se vuoi usare i file non ho problemi, solo che essendo un lavoro fatto in 2 sec si vede che ha delle sbavature. Per il resto no problem XD

Ahhh...prima fabbrichi i pezzi e poi li inserisci separatamente come immagini di fondo per le varie parti? Tanto semplice da essere geniale. Ma allora il Css del template se lo sviluppa WSX5 non PSD di Photoshop come avevo capito io. E il file template CSS che i template preconfezionati di Incomedia hanno dentro serve solo a non farci riselezionare da capo i singoli pezzi dentro la cartella per ricavarlo ex novo?

Se io scelgo "template personalizzato" e poi vado a pescare i singoli pezzi nella cartella di un template, alla fine WSX5 mi ricava un file CSS del mio template con testo identico a quello di Incomedia?

I template di Incomedia sono preconfezionati e non modificabili (o quasi). Quelli predefiniti servono per generare un template tuo partendo da immagini separate, il programma genererá tutto il codice necessario. Photoshop é un programam di grafica non genera i CSS al massimo lo usi per tagliare e creare il sito graficamente.

Sì, infatti avevo frainteso quel PSD di cui parlavi (che ancora non so dove si trova se è una funzione studiata apposta per fabbricare i pezzi dei template cercherò bene!)

Kol il sito esempio che citi non lo posso vedere perchè è per la v8.

Comunque ho capito che non è roba per chi è a digiuno di html e css.

http://www.siti.roma.it/

...è il sito più bello che abbia mai visto è fatto da un genio dell'informatica !!!

...credevo che con la v.9 si potessero importare i progetti v.8, ...non posso dirti di più sul ZIP perchè non ho ancora PC e programmi... (...vampirimu ha colpit, ed alla grande...)

... comunque, ... non ti preoccupare, magari tu ne sai più di me di HTML e CSS...

... prendendo ad esempio quello degli AEREI, nel codice della pagina HTML noterai nella sezione di testa HEAD uno SCRIPT che crea virtualmente un DIV/Livello nominato "sfondoK":
SCRIPT
<div id="sfondoK" alt="" />
qui lo STYLE app
/SCRIPT

(...mancano le freccette </> nel TAG SCRIPT)

ed in fondo alla pagina troverai il DIV controllato da questo SCRIPT, che ovviamente ha lo stesso NOME/ID identificativo, ed è questo:
<div id="sfondoK" alt="" />
<object
...qui il codice del filmato SWF/Flash (fatto con SwishMax)
</object>
</div>

... guarda direttamente nella pagina, e farai prima...
...
... come vedi è semplice, puoi benissimo provare anche tu, magari per esercitarti incollando direttamente in post-editazione...

... provaci, ...provaci, ...e scoprirai un mondo nuovo... ed ancora grazie ad Icm...

bye

Certo...certo...ci proverò eccome...mi interessa!

Nel frattempo ringrazio tutti per gli utilissimi interventi che nell'insieme hanno trasformato questo post in un mini-tutorial completo per la produzione di template in WSX5.

Io nel frattempo ho seguito le indicazioni di Roberto:

ho appena finito di rifare completamente il sito e ora sì che mi piace; è tutto un'altra cosa rispetto a prima e in più FUNZIONA BENE su entrambi i monitor senza più sballare l'impaginazione delle celle!

Grazie tantissime; prossimamente mi divertirò a sperimentare le innovazioni di Kolasim.

.PSD = PHotoshopDesign ->formato proprio dei progetti del programma

Scusate il ritardo!!!

Con il "tocco di genio finale" mi riferivo all'ultima slide (se lo dice da solo ed ha ragione  ).

Una percentuale però è per il tuo gusto... a prescindere