Template adattabile

[delfina]

Buongiorno ragazzi,

mi scuso se questa non è la sezione adatta ma non sapevo dove postare la mia domanda e nè quale titolo mettere...

Allora, devo fare un sito che in apparenza sembrava semplice. Guardate un pò questo sito per esempio:

http://www.carlocarletti.com/

Come vedete sullo sfondo c'è una firma. Ridimensionando la finestra si ridimensiona anche la firma restando comunque sempre in basso alla finestra qualsiasi sia la risoluzione, grandezza dello schermo e della finestra su cui lo si vede. Inoltre, è adeguato anche per telefoni cellulari, ipad, iphone ecc

Vorrei sapere se sapete come poterlo riprodurre o se conoscete qualche template che io possa modificare per poter ottenere tale effetto.

Spero mi rispondiate.

Grazie mille

 

[Jonn]

Ciao,
di primo acchito credevo fosse un sito web creato con il metodo Responsive apro una parentesi:
Il responsive design identifica quei progetti che si adattano completamente (o perlomeno il più possibile) a tutte le risoluzioni grafiche (visto che alla fine di quelle si parla.

Il fatto sta nell'usare quasi tutte le div a dimensione variabile (questo significa impostare width ed height a valori percentuali) e oltre a questo utilizzare degli script (di altri linguaggi solitamente tipo PHP, JS... non so se anche HTML5 può farlo) che in base alla risoluzione omette determinati moduli oppure li ricompone in modo da rientrare in modo ordinato e creando meno scrollbar possibili (se non in verticale ovviamente).

Io non ho mai fatto lavori di questo tipo (Responsive), ma posso dirti che per lo sfondo basta impostare le dimensioni, i padding, i margin ed i posizionamenti tramite CSS, non serve altro.

Nel sito che hai linkato si può ridimensionare ma oltre un certo limite tutti i contenuti si sfasano, questo significa che con determinati dispositivi mobili che hanno risoluzione minore delle suddette dimensioni, il contenuto verrà mostrato in modo pessimo e disordinato.

Io ti consiglio di usare tutti div a dimensione percentuale.

Se vuoi ti posto un template completamente vuoto (a livello grafico) ma con la struttura ridimensionabile, questo significa che si può visualizzare correttamente (garantito!):
- Su computer (logicamente)
- Su Tablet
- Forse su alcuni telefoni
In cui ovviamente inserisco anche un'immagine di sfondo nello stesso modo che hai descritto tu.

Ma non so come aiutarti con gli script che riposizionano i moduli o li omettono perchè non ho mai nemmeno provato a crearne.

 

[delfina]

Ciao,
di primo acchito credevo fosse un sito web creato con il metodo Responsive apro una parentesi:
Il responsive design identifica quei progetti che si adattano completamente (o perlomeno il più possibile) a tutte le risoluzioni grafiche (visto che alla fine di quelle si parla.

Il fatto sta nell'usare quasi tutte le div a dimensione variabile (questo significa impostare width ed height a valori percentuali) e oltre a questo utilizzare degli script (di altri linguaggi solitamente tipo PHP, JS... non so se anche HTML5 può farlo) che in base alla risoluzione omette determinati moduli oppure li ricompone in modo da rientrare in modo ordinato e creando meno scrollbar possibili (se non in verticale ovviamente).

Io non ho mai fatto lavori di questo tipo (Responsive), ma posso dirti che per lo sfondo basta impostare le dimensioni, i padding, i margin ed i posizionamenti tramite CSS, non serve altro.

Nel sito che hai linkato si può ridimensionare ma oltre un certo limite tutti i contenuti si sfasano, questo significa che con determinati dispositivi mobili che hanno risoluzione minore delle suddette dimensioni, il contenuto verrà mostrato in modo pessimo e disordinato.

Io ti consiglio di usare tutti div a dimensione percentuale.

Se vuoi ti posto un template completamente vuoto (a livello grafico) ma con la struttura ridimensionabile, questo significa che si può visualizzare correttamente (garantito!):
- Su computer (logicamente)
- Su Tablet
- Forse su alcuni telefoni
In cui ovviamente inserisco anche un'immagine di sfondo nello stesso modo che hai descritto tu.

Ma non so come aiutarti con gli script che riposizionano i moduli o li omettono perchè non ho mai nemmeno provato a crearne.

Ciao,

grazie mille per la risposta. Sei stati veramente esaustivo... se me lo posteresti mi faresti un grande favore... magari comincio con l'elimonare un problema...

 

[Jonn]

Ok,
il template te l'ho fatto ma voglio specificare 2 cose:

1. L'immagine di sfondo è impostata tramite le proprietà del CSS in modo che sia "Stretchata" (passatemi il termine), questo significa che l'immagine non viene scalata tenendo in considerazione il rapporto tra width ed height (le proporzioni intendo), questo può comportare una visualizzazione pessima in base alla risoluzione del dispositivo sul quale viene visualizzata la pagina.

2. La struttura che ho inserito io è tutta basata su dimensioni espresse in PX, questo significa che rimpicciolendo o ingrandendo la finestra del browser, la struttura a div rimane identica e non viene quindi ridimensionata.

Il tutto rispettando a pieno gli standard W3C per:
- XHTML 1.0 Strict
- CSS3

E adesso i link:

- Download del Template
- Demo del Template

Nota per i Moderatori e gli Amministratori:
Ho provato a caricare il file che è di 180KB circa ma non posso qui sul forum perchè c'è il limite di 100KB a file, l'ho quindi caricato sul mio server, spero non ci siano problemi.

PS. spero si capisca il CSS perchè non uso per questo linguaggio l'indentazione standard ma quella che mi è più comoda.
PPS. (o PSS. non lo sò) Quando hai scaricato il file fammelo sapere almeno lo posso eliminare.

Ciao.

 

[delfina]

Ok,
il template te l'ho fatto ma voglio specificare 2 cose:

1. L'immagine di sfondo è impostata tramite le proprietà del CSS in modo che sia "Stretchata" (passatemi il termine), questo significa che l'immagine non viene scalata tenendo in considerazione il rapporto tra width ed height (le proporzioni intendo), questo può comportare una visualizzazione pessima in base alla risoluzione del dispositivo sul quale viene visualizzata la pagina.

2. La struttura che ho inserito io è tutta basata su dimensioni espresse in PX, questo significa che rimpicciolendo o ingrandendo la finestra del browser, la struttura a div rimane identica e non viene quindi ridimensionata.

Il tutto rispettando a pieno gli standard W3C per:
- XHTML 1.0 Strict
- CSS3

E adesso i link:

- Download del Template
- Demo del Template

Nota per i Moderatori e gli Amministratori:
Ho provato a caricare il file che è di 180KB circa ma non posso qui sul forum perchè c'è il limite di 100KB a file, l'ho quindi caricato sul mio server, spero non ci siano problemi.

PS. spero si capisca il CSS perchè non uso per questo linguaggio l'indentazione standard ma quella che mi è più comoda.
PPS. (o PSS. non lo sò) Quando hai scaricato il file fammelo sapere almeno lo posso eliminare.

Ciao.

uhm grazie mille per la disponibilità... non era proprio quello che volevo ma forse può essermi utile

 

[Jonn]

Allora prova a spiegare meglio cosa cerchi.

 

[delfina]

Allora prova a spiegare meglio cosa cerchi.

Ok... ci provo... hai notato lo sfondo che c'è in quel sito?
Tutto bianco con una firma in fondo... ora prova a ridimensionare la finestra... la firma si rimpicciolisce e ingrandisce a seconda se rimpicciolisci o ingrandisci la finestra.... questa è la prima cosa che vorrei...

E poi c'è che il template deve essere responsive... e quindi vedersi bene su pc, ipad, cellulari e così via...

Sono riuscita ad essere più chiara?

 

[Jonn]

Ok,
Allora:
- La firma era già risolta, bastava cambiare l'immagine dello sfondo (se avessi fatto qualche prova magari...).
- La struttura, adesso ha l'autoridimensionamento degli WIDTH in base alle dimensioni della finestra.

Links:
- Demo del Template
- Download del Template

(Sono gli stessi del post precedente, non si sa mai).

 

[WpStyle]

@delfina: il sito a cui fai riferimento esteticamente può far colpo ma a mio modesto parere gli intro in Flash sono roba passata.
Riguardo al ridimensionamento sia con Chrome che con Firefox la firma non si ridimensiona e nemmeno le foto che vengono tagliate (uso Linux come S.O.).

Il template di Jonn è senza dubbio una buona partenza poi se vuoi qualcosa di responsive, HTML5, CSS3 che faccia uso di media queries puoi provare Bootstrap, molto utilizzato e con un'ottima documentazione.
Altre alternative Html5boilerplate un po più ostico ma anche questo ben documentato oppure Initializr dove puoi trovare oltre ai primi 2 anche Responsive, un template basilare di Jonathan Verrecchia anche questo da provare.

Per aver esempi di template che utilizzano Bootstrap oltre a link Examples nel sito ufficiale puoi trovare su Bootswatch dei css alternativi oppure su Wrapbootstrap una carrellata di template a pagamento di vario genere.

 

[delfina]

Ok,
Allora:
- La firma era già risolta, bastava cambiare l'immagine dello sfondo (se avessi fatto qualche prova magari...).
- La struttura, adesso ha l'autoridimensionamento degli WIDTH in base alle dimensioni della finestra.

Links:
- Demo del Template
- Download del Template

(Sono gli stessi del post precedente, non si sa mai).

Grazie mille...

 

[delfina]

@delfina: il sito a cui fai riferimento esteticamente può far colpo ma a mio modesto parere gli intro in Flash sono roba passata.
Riguardo al ridimensionamento sia con Chrome che con Firefox la firma non si ridimensiona e nemmeno le foto che vengono tagliate (uso Linux come S.O.).

Il template di Jonn è senza dubbio una buona partenza poi se vuoi qualcosa di responsive, HTML5, CSS3 che faccia uso di media queries puoi provare Bootstrap, molto utilizzato e con un'ottima documentazione.
Altre alternative Html5boilerplate un po più ostico ma anche questo ben documentato oppure Initializr dove puoi trovare oltre ai primi 2 anche Responsive, un template basilare di Jonathan Verrecchia anche questo da provare.

Per aver esempi di template che utilizzano Bootstrap oltre a link Examples nel sito ufficiale puoi trovare su Bootswatch dei css alternativi oppure su Wrapbootstrap una carrellata di template a pagamento di vario genere.

Infatti il flash non m interessa... quello che mi interessava era appunto la firma e l'adattamento a tutti i browser e dispositivi... però darò un'occhiata ai link che hai postato... grazie mille