Approccio al Web Design

[Gattinara]

Nel frattempo, per evitare di rendere dispersive le tue letture ti indirizzo ad articoli mirati su alcuni elementi fondamentali dell'HTML5:

Struttura portante:
header
footer
aside
Gestione dei contenuti:
nav
section
article
picture

A presto.

[faxus]

... mi avevano consigliato di scaricare un programma che ti crea un server offline per poter ...

Ti avranno consigliato MAMP, XAMPP o qualche altro acronimo simile che contiene le lettere A, M e P.

Significanti Apache (il server di OS X), MySQL (il database adatto) e P come Php, il linguaggio.
Ti consiglio MAMP, nel caso, ma è una mia opinione che posso spiegare.
Questo per poter operare NON in offline (un server offline è... spento) ma in locale.

Io personalmente ritengo inutile usarlo, ho preferito da subito cominciato a lavorare in vivo, dove il sito risiederà.
Cioè in remoto, su un server LAMP (come sopra, la piattaforma - L - vuol dire Linux).

Ma per adesso segui la maestra.

NdF: Nel senso di webmaster, eh, Gattinara...

[Uno_qualunque]

Vi offendete se sbircio anche io? C'è sempre qualcosa di interessante da imparare (a parte le sbruffonate di alcuni frequentatori...)

[Gattinara]

NdF: Nel senso di webmaster, eh, Gattinara...

Per carità, non farti leggere dal lepido Fragrua: in barba alla valenza puramente allitterativa potrebbe, per celio, rifilarmi il titolo utente "webmaster" (e saremmo da capo a dodici :)

@Uno_qualunque: neanche a chiederlo, tutti sono benvenuti (Nelson escluso).

[faxus]

... Ho visto che per interagire sulla pesatura del font ci sono molti limiti, ad esempio io vorrei usare un ultralight, come posso fare?...

Ecco, me l'ero appuntato e mi era sfuggito.

Sei molto fortunato, fino a non molto tempo fa potevi a malapena usare 7 font 7.

Oggi hai numerosi strumenti, a partire da Google Fonts a @fontface.
Ma Helvetica Neue ligh e ultralight sono proprietari.
Ci sono delle valide alternative, gratis, ma non raggiungono la stessa eleganza estrema.

Prima di scegliere una font per il sito devi accertarti che sia disponibile e che sia disponibile nel peso che ti serve (300-400-600-700 ecc) gratuitamente.
Oppure che ti puoi comprare la licenza, se disponibile (il che comporta qualche macchinosità suppletiva e anche un'ottimizzazione delle risorse di caricamento).

Arial, se ben usato, non è dozzinale, puoi trovarvi un'ottima alternativa e non hai bisogno di sapere nulla di quanto sopra.
Adesso esplora.
Successivamente, se conviene paghi, oppure devi saper come sostituire, lasciando integre le proposizioni grafiche.
Se desideri, posso proporti delle alternative valide, ma al momento non conviene

[fragrua]

tutti sono benvenuti (Nelson escluso).

E chi ti biasima!

[ilario_seb]

Sto ancora finendo di studiarmi i documenti (ogni tanto anche io faccio i compiti ), sto col sorriso ebete in faccia pensando "come ho fatto a non pensarci da me!"
E' tanta roba e son sicuro che mi porterà non pochi ostacoli, ma wow, è davvero affascinante, è un approccio alla grafica totalmente diverso!

Una volta finito di studiarmi tutto vedrò di rispondere a tutti i post precedenti ed andare un po avanti stay tuned!

[Gattinara]

Lieta di saperti affascinato (i primi tempi facevo persino sogni - deliranti - sulle strutture CSS).
Non dare retta alle guide quando ti viene suggerito di usare specifici applicativi (Photoshop, ad esempio) per orchestrare la grafica portante dei template: utilizza lo strumento che preferisci.
Il mio preferito è Fireworks (Adobe ha risolto di abbandonarne lo sviluppo, tra l'altro), ovviamente/esclusivamente utilizzato come semplice tavolozza grafica ignorandone gli orridi automatismi di esportazione HTML/CSS/JS (generanti codice secondo solo a iWeb per sozzura).

Buon divertimento :)

[bruncik]

Vi ammiro...

[faxus]

Vi ammiro...

Caro Bruncik, che aspetti?

Non sei un musicista?
Come puoi non avere un tuo sito personale, dove caricare la tua musica ed avere un blog dove discuterla?

Segui questo, oppure il mio, o dai un'occhiata.
Poi apri un thread per fare un sito adatto all'occasione, con un CMS o costruendolo da solo.

Sul Forum oltre a Gattinara ci sono altri esperti.
Un aiuto o una revisione li trovi sempre.
E poi, te lo dico per esperienza, quando inizi davanti agli altri, lo finisci sempre...

[bruncik]

Caro faxus,

sapessi quante volte ci ho pensato...
Ne avrei di materiale da mettere, tra insegnamento, orchestra, quartetto, ricerca musicologica, composizioni.
Il problema è che non ho tempo e il lavoro che si presenta mi sembra decisamente superiore alle mie capacità.
Se poi mettiamo anche che fino a tre mesi fa nel mio paese non esisteva neanche l'Adsl!

Per intanto seguo questa discussione e mi studio le guide che ha indicato Gattinara!

[Gattinara]

Se ti è capitato più volte di pensare di costruire un sito, comprensivo di tante voci menu, fossi in te darei retta a Faxus: cosa aspetti?
Non hai bisogno di metterti a studiare lungamente per questo, se te ne manca il tempo: ti sarebbe bastante adottare un CMS, sceglierti un bel template, secondare le indicazioni di persone ferrate sulla piattaforma e cominciare ad organizzare il materiale da integrare nelle sezioni.

Orsù: osa :)

[ilario_seb]

Ok, eccomi qui, dopo aver scaricato i browser, impostato Dw come visto in precedenza, letto la guida sulla HTML, quella sulla struttura portante e sulla gestione contenuti, mi son fermato a metà guida CSS, ero davvero esausto D:
La finirò sicuramente prima di andare a dormire o al massimo domani, nel mentre rimanevo abbagliato nella miriade di informazioni (che son sicuro non ricorderò mai tutte, sicuramente dovrò rileggere e aiutarmi con google mentre scriverò almeno per i primi periodi), mi son fatto un idea abbastanza chiara del primo risultato che vorrei raggiungere, ho messo mano alla tavoletta wacom per far delle bozze ma purtroppo l'installer su 10.10 non funzia, quindi ho ripiegato sul premere M su illustrator e far dei rettangoli con gli ingombri (il rosso è la pagine su cui si sta), metterò le 4 pagine in allegato.
Immagino che dovrò creare un file stile CSS (presumo tramite nuovo, file css) e mettere li tutto lo stile comune che avranno i diversi elementi mastro delle varie pagine giusto? (EDIT: Hai qualche esempio di come farlo in modo corretto?) e se ho fatto bene i compiti dividere le pagine in diversi <div>.

Ti avranno consigliato MAMP

Esatto proprio quello!

Ma per adesso segui la maestra.

Sarà fatto Boss.

Codice: Seleziona tutto

Vi offendete se sbircio anche io? 

prego prego, più siamo più ci divertiamo

tutti sono benvenuti (Nelson escluso).

Mi son perso qualche aneddoto?

Ecco, me l'ero appuntato e mi era sfuggito.
......

Uhm, per il momento finché son su DW ho aggiunto l'helvetica neue dalla libreria locale del Mac, se mai andrà online sarò lieto di approfondire l'argomento alternative valide che son sicuro è una cosa fondamentale!

Lieta di saperti affascinato (i primi tempi facevo persino sogni - deliranti - sulle strutture CSS).
Non dare retta alle guide quando ti viene suggerito di usare specifici applicativi (Photoshop, ad esempio) per orchestrare la grafica portante dei template: utilizza lo strumento che preferisci.
Il mio preferito è Fireworks (Adobe ha risolto di abbandonarne lo sviluppo, tra l'altro), ovviamente/esclusivamente utilizzato come semplice tavolozza grafica ignorandone gli orridi automatismi di esportazione HTML/CSS/JS (generanti codice secondo solo a iWeb per sozzura).

Per il momento ho usato Illustrator, ma non mi son mai fatto problemi a mischiare i vari programmi per prendermi il meglio delle varie funzioni, ho fatto veramente una bozza scarna, solo ingombri, può andar bene?

index


work in progress


about


contact

[Gattinara]

Immagino che dovrò creare un file stile CSS (presumo tramite nuovo, file css) e mettere li tutto lo stile comune che avranno i diversi elementi mastro delle varie pagine giusto? (EDIT: Hai qualche esempio di come farlo in modo corretto?) e se ho fatto bene i compiti dividere le pagine in diversi <div>

Esatto, ma per una struttura minimale come la tua l'unico div potrebbe essere usato per il logo - per i suddividere i contenuti saranno bastanti in nuovi tag HTML5 (section, article, et cetera).

Intanto crea un file CSS (dal menu "File", come hai già intuito);
cancellane l'eventuale contenuto preesistente ed incolla il seguente codice (è un reset personalizzato + struttura di partenza - integraivi alcuni commenti che potrebbero tornarti utili):

Codice: Seleziona tutto

/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, 
nav, output, section,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: top;
	font-weight: normal;
	font-style: normal;
}
/* compatibilità novelli tag HTML5 su vetusti browsers */
article, aside, details, figcaption, figure, footer, header, nav, section {
	display: block;
}
html {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	background: #F5F4F4;
	text-align: center;
	font-size: 16px;
	line-height: 19px;
	color: #000;
	-webkit-text-size-adjust: none; /* corregge il bug del font-size maggiorato-random su iOS */
}
/* testi */
strong, b {
	font-weight: bold;
}
em, i {
	font-style: italic;
}
p {
	padding: 0 0 8px;
}
/* immagini */
img {
	max-width: 100%;
	max-height: 100%;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	-ms-interpolation-mode: bicubic;
}
/* link */
a {
	outline: none;
	text-decoration: none;
}
a img {
	border: 0;
}
.class a:link {
	color: #000;
}
.class a:active {
	color: #59BCBC;
}
.class a:visited {
	color: #000;
}
.class a:hover {
	color: #59BCBC;
}
.tel a[href^=tel] {
	text-decoration: none; /* evita il text-decoration underline su mobile */
}
/* effetti */
body {
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
}
/* form */
input, textarea, select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	-moz-border-radius: 0;
	-webkit-border-radius:0;
	border-radius: 0;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow:none; /* disabilita i gradienti di default negli input */
}
input {}
select {}
label {}
/* intestazioni */
h1, h2, h3, h4, h5, h6 {
	text-align: center;
	text-transform: uppercase;
	color: #000;
}
h1 {
	font-size: 28px;
	line-height: 30px;
}
h2 {
	font-size: 26px;
	line-height: 28px;
}
h3 {
	font-size: 20px;
	line-height: 22px;
}
h4 {
	font-size: 18px;
	line-height: 20px;
}
h5, h6 {
	font-size: 16px;
	line-height: 18px;
}
/* comuni */
.clear {
	clear: both;
}
/* navigazione */
nav {}
/* struttura interna */
.griglia {}
/* struttura principale */
aside {}
footer {}
header {}
section {}
/* mobile */
@media only screen 
and (min-width : 240px) 
and (max-width : 479px) {
}
@media only screen 
and (min-width : 480px) 
and (max-width : 767px) {
}
@media only screen 
and (min-width : 768px) 
and (max-width : 1023px) {
}

Salvalo titolandolo "stile.css" all'interno della apposita cartella "css" (menu "File > Salva con nome...");
al seguito cambia il nome all'eventuale index già presente (puoi farlo direttamente dal pannello DW - nel caso non fosse visibile puoi richiamarlo dal menu "Finestra > File") e crea un nuovo documento traverso la procedura utilizzata previamente per il CSS selezionando, come tipo di pagina "HTML", e salvandola come "index.html" nella directory principale (ebbene sì: partiremo da zero).

Richiama il CSS prima della chiusura del tag head, come da esempio sottostante e, visto che ci siamo, inserisci anche un titolo meno astratto di quello di default, anche se comunque provvisorio - tratteremo più avanti l'ottimizzazione mirata del title e dei meta):

Codice: Seleziona tutto

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Prima bozza | Home</title>
<link rel="stylesheet" href="css/stile.css">
</head>

<body>
</body>
</html>

In questo articolo, per quanto datato, troverai spiegati i moventi del reset (di importanza fondamentale); domani ti illustrerò nel dettaglio gli altri elementi contenuti nel CSS.

Per il momento ho usato Illustrator, ma non mi son mai fatto problemi a mischiare i vari programmi per prendermi il meglio delle varie funzioni, ho fatto veramente una bozza scarna, solo ingombri, può andar bene?

Come appunto sugli ingombri generali lo potrebbe, ma sarebbe necessario conoscere alcune specifiche, come l'ingombro del logo, altezze di header e footer, size dei font + palette di footer/header/testi, in maniera da orchestrare propriamente il layout.

A presto :)

[ilario_seb]

Esatto, ma per una struttura minimale come la tua l'unico div potrebbe essere usato per il logo - per i suddividere i contenuti saranno bastanti in nuovi tag HTML5 (section, article, et cetera).

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

Intanto crea un file CSS (dal menu "File", come hai già intuito);
cancellane l'eventuale contenuto preesistente ed incolla il seguente codice (è un reset personalizzato + struttura di partenza - integraivi alcuni commenti che potrebbero tornarti utili)

Ok, fatto e importato, mi ritrovo così adesso:

Schermata 2014-08-12 alle 10.53.15.png (28.25 KiB) Visto 2784 volte

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?

In questo articolo, per quanto datato, troverai spiegati i moventi del reset (di importanza fondamentale); domani ti illustrerò nel dettaglio gli altri elementi contenuti nel CSS.
Come appunto sugli ingombri generali lo potrebbe, ma sarebbe necessario conoscere alcune specifiche, come l'ingombro del logo, altezze di header e footer, size dei font + palette di footer/header/testi, in maniera da orchestrare propriamente il layout.

Ok, con quel documento mi son fatto una mezza idea sul reset, ci son ancora diverse parti di quel codice che non so a cosa fanno riferimento, ma immagino sia normale al momento.
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?