sviluppo sito in orizzontale

mapoboss · 21-01-2007, 21:55

Salve a tutti, descrivo un po' la mia situazione: con macromedia dreamweaver, creo una pagina html, inserisco un tag Div e noto che questo si adatta subito alla larghezza della finestra; inserisco una 20ina di righe di testo per fare una prova. Se ora salvo la pagina e la provo su un browser noto che ridimensionando la finestra del browser non appare lo scroll orizzontale e il testo si distribuisce in verticale in modo automatico e fluido. Credo sia una situazione ideale per chi sviluppa pagine in verticale.

A me inceve interesserebbe sviluppare la pagina in orizzontale, cioè, se ridimensiono la finestra, appaia solo lo scroll orizzontale. E' possibile ?

andbin · 22-01-2007, 10:50

Quote:

Originariamente inviato da mapoboss

Salve a tutti, descrivo un po' la mia situazione: con macromedia dreamweaver, creo una pagina html, inserisco un tag Div e noto che questo si adatta subito alla larghezza della finestra; inserisco una 20ina di righe di testo per fare una prova. Se ora salvo la pagina e la provo su un browser noto che ridimensionando la finestra del browser non appare lo scroll orizzontale e il testo si distribuisce in verticale in modo automatico e fluido. Credo sia una situazione ideale per chi sviluppa pagine in verticale.

A me inceve interesserebbe sviluppare la pagina in orizzontale, cioè, se ridimensiono la finestra, appaia solo lo scroll orizzontale. E' possibile ?

La questione principale è che il testo "fluisce" lungo la pagina e viene spezzato nei punti dove è possibile (gli spazi ad esempio).

Prendiamo la situazione che hai descritto:

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prova</title>
<style type="text/css">
<!--
#testo {  }
-->
</style>
</head>
<body>

<div id="testo">
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
</div>

</body>
</html>

Ora metti nello stile per #testo questo:

#testo { white-space:nowrap; }

Vedrai ora che il testo è tutto su una linea e che se non ci sta tutto nella pagina (presumibile) viene visualizzata la scrollbar orizzontale.

Un'altra possibilità sarebbe quella di impostare un width per il div in modo che sia molto più largo della finestra (o comunque ad una certa dimensione che a te va bene). Così anche senza white-space:nowrap, il testo va fino alla fine del div e poi fluisce.

mapoboss · 22-01-2007, 18:38

Grazie per l'appunto (non conoscevo ancora in dettaglio il parametro white-space) ma forse è bene che mi spieghi meglio.

Considero un solo tag Div, diciamo abbastanza grande, tipo con width: 1000px e height: 700px. La dimensione non è fissa ma è per ipotesi dovuta a del testo all'interno dello stesso tag. Se prendiamo una risoluzione del tipo 1280x800 non apparire (almeno dovrebbe visto ho il firefox con barre di plugin che mi occupano un po' di schermo

) alcun scroll se invece la risoluzione è 800x600 sicuramente apparirebbero le scroll sia verticale che orizzontale.

Ora mi piacerebbe sapere se è possibile fare in modo che il testo, formattato come paragrafo (cioè con capo-riga volontati e quelli dovuti alla mancanza di spazio nel tag), è possibile ridurlo in modo automatico da per esempio 10 righe a 6 righe così ridurrne l'altezza e aumentarne la larghezza. In questo chi avrà uno schermo con risoluzioni grandi (e quindi ottimali) vedrà la pagina con la formattazione originale, mentre chi avrà una risoluzione minore si troverà il sito allungato maggiormente in orizzontale ma lo scorrimento (anche per l'uso della rotellina del mouse) sarà lineare poichè con al max lo scroll orrizzontale.
Se provate ad usare la rotellina del mouse con siti che hanno entrambi gli scrolls vedrete che la pagina si muoverà in diagonale! Per cui se riesco ad evitare lo scroll verticale sarebbe ideale.

In alternativa potrei fare in modo che il tag (e tutto ciò che ci sta dentro) venga rimpicciolito o ingrandito mantenendo le proporzioni a seconda soltanto delle esigenze in altezza, cioè che si adatti automaticamente all'altezza (mentre per la larghezza potrà anche eccedere) della finestra del browser senza che appaia alcun scroll verticale.

E' possibile ricorrendo a qualche stile oppure devo proprio buttar giù un javascript?

tomminno · 22-01-2007, 22:07

Quote:

Originariamente inviato da mapoboss

Grazie per l'appunto (non conoscevo ancora in dettaglio il parametro white-space) ma forse è bene che mi spieghi meglio.

Considero un solo tag Div, diciamo abbastanza grande, tipo con width: 1000px e height: 700px. La dimensione non è fissa ma è per ipotesi dovuta a del testo all'interno dello stesso tag. Se prendiamo una risoluzione del tipo 1280x800 non apparire (almeno dovrebbe visto ho il firefox con barre di plugin che mi occupano un po' di schermo

) alcun scroll se invece la risoluzione è 800x600 sicuramente apparirebbero le scroll sia verticale che orizzontale.

Ora mi piacerebbe sapere se è possibile fare in modo che il testo, formattato come paragrafo (cioè con capo-riga volontati e quelli dovuti alla mancanza di spazio nel tag), è possibile ridurlo in modo automatico da per esempio 10 righe a 6 righe così ridurrne l'altezza e aumentarne la larghezza. In questo chi avrà uno schermo con risoluzioni grandi (e quindi ottimali) vedrà la pagina con la formattazione originale, mentre chi avrà una risoluzione minore si troverà il sito allungato maggiormente in orizzontale ma lo scorrimento (anche per l'uso della rotellina del mouse) sarà lineare poichè con al max lo scroll orrizzontale.
Se provate ad usare la rotellina del mouse con siti che hanno entrambi gli scrolls vedrete che la pagina si muoverà in diagonale! Per cui se riesco ad evitare lo scroll verticale sarebbe ideale.

In alternativa potrei fare in modo che il tag (e tutto ciò che ci sta dentro) venga rimpicciolito o ingrandito mantenendo le proporzioni a seconda soltanto delle esigenze in altezza, cioè che si adatti automaticamente all'altezza (mentre per la larghezza potrà anche eccedere) della finestra del browser senza che appaia alcun scroll verticale.

E' possibile ricorrendo a qualche stile oppure devo proprio buttar giù un javascript?

Non so per quale motivo tu voglia estendere un sito principalmente in orizzontale, ma questo va a scapito dell'usabilità.
Primo non tutti hanno i monitor 16:9 (immagino che tu abbia un monitor di questo tipo altrimenti non ti porresti il problema).
Secondo la lettura è meno faticosa se la riga è corta, diciamo sulla 80ina di caratteri sarebbe l'ideale.
Per questo sostengo che i monitor da 16:9 farebbero bene a rimanere confinati nei salotti

mapoboss · 23-01-2007, 21:33

Quote:

Originariamente inviato da tomminno

Non so per quale motivo tu voglia estendere un sito principalmente in orizzontale, ma questo va a scapito dell'usabilità.
Primo non tutti hanno i monitor 16:9 (immagino che tu abbia un monitor di questo tipo altrimenti non ti porresti il problema).
Secondo la lettura è meno faticosa se la riga è corta, diciamo sulla 80ina di caratteri sarebbe l'ideale.
Per questo sostengo che i monitor da 16:9 farebbero bene a rimanere confinati nei salotti

ho intenzione di progettare il sito per schermi principalmente 4:3 poi se chi lo vedrà ha il monitor come il mio meglio per lui. Comunque mi preoccupo anche per chi ha una risoluzione 800x600: ecco perchè mi sto facendo in 2 per cercare di autoadattare il sito per qualunque risoluzione.
Non credo che l'usabilità sia castigata per il fine che ho progettato poichè farò il sito in un'unica pagina html statica di presentazione con foto, un modulo di contatto, un qualche controllo javascript per scorrere il sito in orizzontale e
niente più. Altrimenti se volevo fare qualcosa di più complesso avrei preso un CMS e avrei sviluppato il sito in verticale come tutti.

La presentazione sarà formattata su 3 o 4 colonne con altrettante colonne per ciascuna foto. Un sito d'esempio per l'idea di navigazione ma che però ha solo immagini è QUESTO. In più di questo però vorrei che i div che contengono le immagini e l'eventuale testo siano scalabili a seconda della risoluzione, cioè che a seconda della risoluzione avvenga un ipotetico "zoom in" o "zoom out" della pagina mantenendo la stessa struttura.

Ci siamo??

Avete quindi qualche asso nella manica per il mio problema?

mapoboss · 24-01-2007, 16:16

alcune domande:

1) se nello stile del body si trova scritto height:100% e/o width:100%, rispetto a cosa si riferiscono le percentuali?

2) se un'immagine ha height:100% e/o width:100% è rispetto al body o cosa?

3) è possibile assegnare allo stile di una immagine una funzione javascript che ne determini il valore per esempio dell'altezza e/o della larghezza anzichè inserire la dimesione fissa in px o la % ?
cioè:
<img id="pincopallino" src="pincopallino.jpg" height=funzionealtezza() />
oppure
pincopallino.height=funzioneheight();

NB: la funzione dovrà riportare come valore di output la dimensione fissa in pixel o in % rispetto al parametro d'altezza/larghezza della finestra del browser.

Siccome non ho mai programmato in javascript mi piacerebbe, prima di cercare e perdermi in uno dei manuali in internet, qualche opinione da chi conosce questo linguaggio. Perchè se proprio non c'è la possibilità per un linguaggio javascript di modificare i parametri degli oggetti di una pagina web allora è meglio che cambi soluzione.

marco.r · 24-01-2007, 17:24

Piccolo OT:
quando ho letto "sviluppo sito in orizzontale" ho pensato a questo:

non me ne vogliate...

21-01-2007, 21:55	#1
mapoboss Member Iscritto dal: Feb 2006 Messaggi: 112	sviluppo sito in orizzontale Salve a tutti, descrivo un po' la mia situazione: con macromedia dreamweaver, creo una pagina html, inserisco un tag Div e noto che questo si adatta subito alla larghezza della finestra; inserisco una 20ina di righe di testo per fare una prova. Se ora salvo la pagina e la provo su un browser noto che ridimensionando la finestra del browser non appare lo scroll orizzontale e il testo si distribuisce in verticale in modo automatico e fluido. Credo sia una situazione ideale per chi sviluppa pagine in verticale. A me inceve interesserebbe sviluppare la pagina in orizzontale, cioè, se ridimensiono la finestra, appaia solo lo scroll orizzontale. E' possibile ?

24-01-2007, 17:24	#7
marco.r Senior Member Iscritto dal: Dec 2005 Città: Istanbul Messaggi: 1817	Piccolo OT: quando ho letto "sviluppo sito in orizzontale" ho pensato a questo: non me ne vogliate... __________________ One of the conclusions that we reached was that the "object" need not be a primitive notion in a programming language; one can build objects and their behaviour from little more than assignable value cells and good old lambda expressions. —Guy Steele

22-01-2007, 18:38	#3
mapoboss Member Iscritto dal: Feb 2006 Messaggi: 112	Grazie per l'appunto (non conoscevo ancora in dettaglio il parametro white-space) ma forse è bene che mi spieghi meglio. Considero un solo tag Div, diciamo abbastanza grande, tipo con width: 1000px e height: 700px. La dimensione non è fissa ma è per ipotesi dovuta a del testo all'interno dello stesso tag. Se prendiamo una risoluzione del tipo 1280x800 non apparire (almeno dovrebbe visto ho il firefox con barre di plugin che mi occupano un po' di schermo ) alcun scroll se invece la risoluzione è 800x600 sicuramente apparirebbero le scroll sia verticale che orizzontale. Ora mi piacerebbe sapere se è possibile fare in modo che il testo, formattato come paragrafo (cioè con capo-riga volontati e quelli dovuti alla mancanza di spazio nel tag), è possibile ridurlo in modo automatico da per esempio 10 righe a 6 righe così ridurrne l'altezza e aumentarne la larghezza. In questo chi avrà uno schermo con risoluzioni grandi (e quindi ottimali) vedrà la pagina con la formattazione originale, mentre chi avrà una risoluzione minore si troverà il sito allungato maggiormente in orizzontale ma lo scorrimento (anche per l'uso della rotellina del mouse) sarà lineare poichè con al max lo scroll orrizzontale. Se provate ad usare la rotellina del mouse con siti che hanno entrambi gli scrolls vedrete che la pagina si muoverà in diagonale! Per cui se riesco ad evitare lo scroll verticale sarebbe ideale. In alternativa potrei fare in modo che il tag (e tutto ciò che ci sta dentro) venga rimpicciolito o ingrandito mantenendo le proporzioni a seconda soltanto delle esigenze in altezza, cioè che si adatti automaticamente all'altezza (mentre per la larghezza potrà anche eccedere) della finestra del browser senza che appaia alcun scroll verticale. E' possibile ricorrendo a qualche stile oppure devo proprio buttar giù un javascript?

24-01-2007, 16:16	#6
mapoboss Member Iscritto dal: Feb 2006 Messaggi: 112	alcune domande: 1) se nello stile del body si trova scritto height:100% e/o width:100%, rispetto a cosa si riferiscono le percentuali? 2) se un'immagine ha height:100% e/o width:100% è rispetto al body o cosa? 3) è possibile assegnare allo stile di una immagine una funzione javascript che ne determini il valore per esempio dell'altezza e/o della larghezza anzichè inserire la dimesione fissa in px o la % ? cioè: <img id="pincopallino" src="pincopallino.jpg" height=funzionealtezza() /> oppure pincopallino.height=funzioneheight(); NB: la funzione dovrà riportare come valore di output la dimensione fissa in pixel o in % rispetto al parametro d'altezza/larghezza della finestra del browser. Siccome non ho mai programmato in javascript mi piacerebbe, prima di cercare e perdermi in uno dei manuali in internet, qualche opinione da chi conosce questo linguaggio. Perchè se proprio non c'è la possibilità per un linguaggio javascript di modificare i parametri degli oggetti di una pagina web allora è meglio che cambi soluzione.

Strumenti
Mostra una versione stampabile Invia questa pagina per email