Approccio al Web Design

[Uno_qualunque]

Fragrua, questo topic si sta trasformando in qualcosa di qualità notevole, varrebbe la pena metterlo in evidenza o farne un articolo?

[Gattinara]

Ah, io avevo pensato, erroneamente, dividere la pagina con 3 div, header, contenuti e footer.

E questo faremo, ma i "nuovi" tag HTML5 (header/footer, et cetera) non sono propriamente dei div: non scriveremo codice quale

Codice: Seleziona tutto

<div id="header">...</div>

ma direttamente

Codice: Seleziona tutto

<header>...</header>

Come funziona, mentre scrivo l'html andrò poi a modificare il foglio css collegato? o quello è solo il reset e per lo stile generale degli elementi comuni linkeremo un altro foglio?

La prima che hai scritto.

ci son ancora diverse parti di quel codice che non so a cosa fanno riferimento, ma immagino sia normale al momento.

Normalissimo, le scopriremo insieme in corso d'opera.

Per le altezze non ho ancora chiaro quale saranno le misure della pagina, cioè, ogni browser e schermo hanno risoluzioni diverse, qual'è la risoluzione "classica" su cui si inizia a pensare il sito? Come diceva il caro Faxus sicuramente non più larga di 1800, ma per l'altezza?

Il tuo sito avrà un layout fluido (che si adatterà a larghezza/altezza dei browser); le altezze sulle quali è necessario avere lumi non sono quelle della finestra del browser (che varierà a seconda della risoluzione degi dispositivi) ma degli elementi in essa contenuti.
In soldoni: quanto misurerà l'altezza (height) dell'header contenente il menu e del footer? Quali sono le misure del logo? Vuoi che l'ingombro dell'immagine di fondo occupi l'intera altezza (oltre che la larghezza) della finestra del browser e che i contenuti testuali si visualizzino solo al seguito dello scroll?
Queste sono cose che solo tu puoi sapere.

Edit: mi sono resa conto di essere partita col piede sbagliato cedendo alla fascinazione del codice.

Eccoti un esempio visivo: dai un'occhiata a questo template (e ho scelto il meno complesso tra quelli suggeritimi da google); come vedi non lascia nulla al caso, è pressoché pronto ad essere tradotto in codice.

Hai figliato delle bozze per orientarti sugli ingombri, e va benissimo ma, come grafico, la creazione/evoluzione del design della struttura dovrebbe essere la più appassionante da svolgere, e va fatta prima di strutturarne lo scheletro in HTML/CSS.

L'errore è mio, mi sono lasciata contagiare dal tuo entusiasmo e ho proceduto a mia volta con prescia: non basta avere le specifiche di un paio di elementi, bisogna cinghiare il quadro completo prima di procedere col codice.

In soldoni: inizia a creare delle vere bozze grafiche per ciascuna sezione (mi troverai qui ad aspettarti :)

[ilario_seb]

Il tuo sito avrà un layout fluido (che si adatterà a larghezza/altezza dei browser); le altezze sulle quali è necessario avere lumi non sono quelle della finestra del browser (che varierà a seconda della risoluzione degi dispositivi) ma degli elementi in essa contenuti.
In soldoni: quanto misurerà l'altezza (height) dell'header contenente il menu e del footer? Quali sono le misure del logo? Vuoi che l'ingombro dell'immagine di fondo occupi l'intera altezza (oltre che la larghezza) della finestra del browser e che i contenuti testuali si visualizzino solo al seguito dello scroll?
Queste sono cose che solo tu puoi sapere.

Edit: mi sono resa conto di essere partita col piede sbagliato cedendo alla fascinazione del codice.

Ok, ma vistro che non son uno a cui piace stare con le mani in mano e mi piace sperimentare, ho già pronta l'index con varie misure, ho scelto una misura web dal menù tendina e ho iniziato a lavorarci sopra, ma son sicuro che le dimensioni dei font andranno tutte riviste e ridimensionate. Sicuramente è una basa da cui partire, ma verrà perfezionata mentre la costruiremo, ci son ancora molte cosette che non mi convincono, senza guardare il marchio poi, che è stato fatto in un oretta ieri giusto per avere uno schema visivo.

Eccoti un esempio visivo: dai un'occhiata a questo template (e ho scelto il meno complesso tra quelli suggeritimi da google); come vedi non lascia nulla al caso, è pressoché pronto ad essere tradotto in codice.

Bhè, la fortuna vuole che il layout della pagina work (che lasceremo con la scritta "work in progress" per il momento") che avevo in mente è molto simile a quello della pagina da te linkata, ottimo!

L'errore è mio, mi sono lasciata contagiare dal tuo entusiasmo e ho proceduto a mia volta con prescia: non basta avere le specifiche di un paio di elementi, bisogna cinghiare il quadro completo prima di procedere col codice.

Non preoccuparti, ti capisco, anche io non so resistere al fascino della prescia

In soldoni: inizia a creare delle vere bozze grafiche per ciascuna sezione (mi troverai qui ad aspettarti :)

mentre aspetto le prime critiche sulla bozza (faxus parlo anche con te ) inizio a lavorare sulle altre pagine. Diventa sempre più interessante il tutto!

EDIT: magari se aggiungo l'immagine sarebbe meglio
p.s quel work in progress è rtremendo, andrà rivisto

[Gattinara]

Per quanto concerne le strutture, tieni a mente una cosa importante: i posizionamenti e le distanze tra gli elementi devono essere precisi.
Lavorare con guide ben definite (intese come griglia, non come testi sui quali studiare) è fondamentale nella grafica in generale e parimenti necessario nel webdesign.

La tua bozza (creata su modello 1280x1024) connatura distanze/centrature improvvisate (le voci menu, le icone, et cetera non sono equiparate).
Oltre questo, quando si integrano fermaposto per i lavori in corso, è sempre igienico utilizzare sin da subito elementi che non facciano a cazzotti con il design, come anche icone ben fatte (iconmonstr, ad esempio, offre un servizio gratuito eccellente comprensivo di download in formato vettoriale).

Posta le bozze solo quando saranno comprensive di immagini di fondo, ingombri provvisori dei testi, logo finale e quant'altro (nessuno ti sta correndo appresso), altrimenti sarà difficile sia valutarle sia controllare la reale resa dei font a contatto con background mirati (scoprirai che nimmanco con 10/10 di vista si è in grado di raccapezzarsi un granché con i tanto modaioli UL).
E' verissimo che in corso d'opera diversi elementi verranno modificati, ma le partenze approssimative non hanno alibi.

Per fornirti un esempio visivo di guide ben orchestrate ho giocato con la tua bozza, distanziando correttamente tra loro le voci del menu/icone; ho montato la tua previa immagine di fondo per testare il font UltraLight (un disastro) e alzato a filo il logo (staccato sembrava perdere di incisività, ma sono gusti personali, ci mancherebbe).

Con questo semplice test (qui la versione con le guide, qui quella pulita) ci si accorge fin da subito che, se davvero intendi posizionare dei testi aldisopra dei background, conviene scegliere con attenzione sia immagini che spessori dei font.

N. d. F.: fossi in te non inserirei voci menu nel footer (tantomeno mappe del sito - sono solo tre pagine); mi limiterei a copyright, email e telefono e, più di tutto, mi imporrei precisione e pazienza :)

[ilario_seb]

Per quanto concerne le strutture, tieni a mente una cosa importante: i posizionamenti e le distanze tra gli elementi devono essere precisi.
Lavorare con guide ben definite (intese come griglia, non come testi sui quali studiare) è fondamentale nella grafica in generale e parimenti necessario nel webdesign.

Mi son fatto prendere dal ragionamento "tanto questa è solo un documento su cui vedere il risultato finale, inutile che perdo tempo a centrare cose qui visto che poi dovrò far tutto a codice". Evidentemente sbagliavo, poco male, olio di gomito

... e alzato a filo il logo (staccato sembrava perdere di incisività, ma sono gusti personali, ci mancherebbe).

Decisamente meglio con il logo a filo, vedi che vuol dire aver l'occhio esperto?
Si, con l'immagine del piccione sta decisamente male, ma anche questo si può ovviare poiché l'immagine del piccione non è pi contemplata nel progetto.

Posta le bozze solo quando saranno comprensive di immagini di fondo, ingombri provvisori dei testi, logo finale e quant'altro (nessuno ti sta correndo appresso), altrimenti sarà difficile sia valutarle sia controllare la reale resa dei font a contatto con background mirati (scoprirai che nimmanco con 10/10 di vista si è in grado di raccapezzarsi un granché con i tanto modaioli UL).
E' verissimo che in corso d'opera diversi elementi verranno modificati, ma le partenze approssimative non hanno alibi.
Con questo semplice test (qui la versione con le guide, qui quella pulita) ci si accorge fin da subito che, se davvero intendi posizionare dei testi aldisopra dei background, conviene scegliere con attenzione sia immagini che spessori dei font.

Bhè sicuramente pensarai: "non ci ha capito nulla allora, gli ho detto di prendersi del tempo e già sta di nuovo postando immagini???". Ma posso assicurarti che questa volta son sicuro di aver fatto un lavoro certosino, non ho lasciato nulla al caso ed ho seguito griglie e guide in modo certosino, ovviamente in base alle mie capacità. Ho tralasciato solamente il "bannerone" iniziale, che non ho al momento, ma cercherò quanto prima di aggiungere, ho aggiunto però tutto quello che ci dovrà essere secondo me, ovviamente se pensate che qualcosa sia fuoripista mi farà molto piacere saperlo. Per le immagini a carrellata subito nella index l'ho pensato come ad un collegamento all'ultimo lavoro caricato nella sezione WORKS. Se non sbaglio il modo più veloce per inserire quelle immagini (non so se poi sia pure il più corretto, ma per correggermi ci sei tu) sia l'utilizzo del comando FLOAT giusto? Spero di star facendo progressi
Volevo inserire uno ZIP ma purtroppo mi limita a 100kb e giustamente il file ne pesa più (600) utilizzerò ancora i link, per quanto la cosa mi dia ai nervi... Se occorre posso caricare anche le versioni con le guide, in modo che se ho sbagliato qualcosa puoi dirmi con più precisione cosa e come

INDEX
http://i.imgur.com/ybWW90N.jpeg

WORKS
http://i.imgur.com/wpDBzZF.jpeg

ABOUT
http://i.imgur.com/lyFzr1o.jpeg

CONTACT
http://i.imgur.com/tTkojdB.jpeg

P.S: ho risolto mettendo un link all'immagine piuttosto che caricarla direttamente

[Gattinara]

Se non sbaglio il modo più veloce per inserire quelle immagini (non so se poi sia pure il più corretto, ma per correggermi ci sei tu) sia l'utilizzo del comando FLOAT giusto? Spero di star facendo progressi

Scusa per la latitanza, Ilario, ma mi è capitato tra capo e collo un lavoro urgente. Da dopodomani al massimo tornerò ad assillarti, nel frattempo mi limiterò a segnalarti questo articolo per leggere specifiche sulla proprietà float.
Quello che andremo a creare sarà un minimo più articolato; gli elementi che si affiancheranno tra loro dovranno anche mantenere inalterata la loro struttura quadra (width/height) a qualsiasi risoluzione (niente di complesso, te lo assicuro).

A prestissimo.

[ilario_seb]

Scusa per la latitanza, Ilario, ma mi è capitato tra capo e collo un lavoro urgente. Da dopodomani al massimo tornerò ad assillarti, nel frattempo mi limiterò a segnalarti questo articolo per leggere specifiche sulla proprietà float.
Quello che andremo a creare sarà un minimo più articolato; gli elementi che si affiancheranno tra loro dovranno anche mantenere inalterata la loro struttura quadra (width/height) a qualsiasi risoluzione (niente di complesso, te lo assicuro).

A prestissimo.

Per un attimo avevo pensato che mi avessi abbandonato!

Leggerò sicuramente l articolo, anche se ti confesso che la storia delle proporzioni mantenute su ogni browsers e device è uno dei punti che mi spaventa di più!

[Gattinara]

Non c'è rischio di essere abbandonato, e non preoccuparti dei layout responsive (più avanti tratteremo le Media queries, e sarà meno difficoltoso farlo che pensarlo :)

Buono studio, ed a presto.

[ilario_seb]

Non c'è rischio di essere abbandonato.

Sei da sposare

Il Float l'ho già divorato, il secondo documento lo rimando a domani! In bocca al lupo per il lavoro improvviso

[robertos]

bravo Ilario,
se seguirai la maestra arriverai sicuramente ad ottimi risultati... sei sulla buona strada!

solo una cosa non hai "recepito" nelle schermate corrette dall'esimia gattinara... il velato e garbato suggerimento di cambiare l'ordine del nome e cognome nei crediti: consiglio da seguire immantinente!

[faxus]

Naturalmente concordo con quanto sopra detto sulle credenziali.
Del menù nel footer, nel tuo caso conserva solo le note di legge, legali/privacy, che potrai mettere ovunque, non è un sito commerciale

Inutile una sitemap, quanto inutile duplicare Contatti.

Come osservazione di carattere personale, il footer è un poco troppo esiguo nello spessore.
E in genere è preferibile sia un tono più scuro di altri elementi nella pagina

[ilario_seb]

bravo Ilario,
se seguirai la maestra arriverai sicuramente ad ottimi risultati... sei sulla buona strada!

solo una cosa non hai "recepito" nelle schermate corrette dall'esimia gattinara... il velato e garbato suggerimento di cambiare l'ordine del nome e cognome nei crediti: consiglio da seguire immantinente!

Grazie! Assurdo, mi è proprio sfuggito, non l'ho nemmeno notato! "aggiusterò" quanto prima!

Naturalmente concordo con quanto sopra detto sulle credenziali.
Del menù nel footer, nel tuo caso conserva solo le note di legge, legali/privacy, che potrai mettere ovunque, non è un sito commerciale

Inutile una sitemap, quanto inutile duplicare Contatti.

Ok, cosa dovrei scrivere/linkare in quelle sezioni?

Come osservazione di carattere personale, il footer è un poco troppo esiguo nello spessore.
E in genere è preferibile sia un tono più scuro di altri elementi nella pagina

Ti riferisci alla barra del footer o allo spessore del carattere? Io credevo che era fin troppo spesso il footer! Ma non è un problema allargarlo, anzi.
Come mai è preferibile scurirlo?

[fragrua]

Fragrua, questo topic si sta trasformando in qualcosa di qualità notevole, varrebbe la pena metterlo in evidenza o farne un articolo?

Sì. Per fare un articolo visibile in home page è possibile partendo da qui:
http://www.imaccanici.org/submit.php?type=story" onclick="window.open(this.href);return false;

Poi verrà rivisto, adattato ed aggiunta una testata grafica.

[faxus]

... Ok, cosa dovrei scrivere/linkare in quelle sezioni? ...

Ognuno ha i suoi, io mi porto avanti i miei da anni, ogni tanto li aggiorno.
Li trovi sul web oppure copiane uno che ti sta bene e personalizzalo.

I disclaimer legali a te serviranno in modo leggero, ma per i siti dei clienti è importantissimo.

I privacy sono obbligatori.
Una grande fesseria.
Ma di quelle che se vogliono prenderti di mira ti fanno veramente male, multe da decine di migliaia di euro.

Idem, come sopra per reperirli.
Se vuoi ti mando i miei, ma ne trovi

... Ti riferisci alla barra del footer o allo spessore del carattere? Io credevo che era fin troppo spesso il footer! Ma non è un problema allargarlo, anzi.
Come mai è preferibile scurirlo? ;)

La barra, il carattere dovrebbe essere quanto mai leggero.

Da equilibrio alla pagina, un fatto puramente visivo

[ilario_seb]

I disclaimer legali a te serviranno in modo leggero, ma per i siti dei clienti è importantissimo.

Ho scaricato un paio di legal disclaimer, son lunghi 10 pagine e alcune parti da compilare, dovrò buttarci un occhio sopra più attento.

I privacy sono obbligatori.
Una grande fesseria.
Ma di quelle che se vogliono prenderti di mira ti fanno veramente male, multe da decine di migliaia di euro.
Idem, come sopra per reperirli.

Ho trovato questo generatore per le Privacy, ma mi sembra che faccia domande su cose che non farò, tipo la registrazione e l'utilizzo dei dati personali di possibili utenti,
non essendo un sito che permette ad utenti di registrarsi o che registra i dati degli utenti come dovrei procedere?

Se vuoi ti mando i miei, ma ne trovi

Sarebbe molto gentile da parte tua, ma se preferisci di no o è troppo disturbo anche se mi aiuti semplicemente a capire meglio come funziona a me non dispiace anzi, almeno imparo cose

La barra, il carattere dovrebbe essere quanto mai leggero.

Da equilibrio alla pagina, un fatto puramente visivo

Ok, la faccio 1/3 più spessa allora, o più?