Approccio al Web Design

[ilario_seb]

Eccomi, ci ho messo un po ma alla fine ho iniziato ad aggiornare il codice, andando con ordine:

Se hai letto attentamente gli articoli/guide precedenti risulterannoti evidenti i motivi per i quali non utilizzeremo, al momento, il tag article (o l'annidamento section/article o section/section).

Sarò onesto, anche se ho letto attentamente e più di una volta non mi vien in mente il motivo del perché usiamo un paragrafo piuttosto che un articolo, magari puoi aiutarmi

(i valori dovranno essere rivisti non appena risolverai adottare una font differente dalla coeva)

Ho cambiato qualche giorno fa i font, ho seguito il suggerimento di DW, non so se c'è da ritoccare:

Codice: Seleziona tutto

   font-family: "Open Sans", "Open Sans Light", "Open Sans Semibold", "Open Sans Extrabold", Arial, Helvetica, sans-serif;

E, al solito, la bozza online da usare come riferimento.

Purtroppo però non tutto è filato liscio questa volta, sicuramente sarà dovuto al fatto che ho preferito trascrivere tutto a mano (facilità l'apprendimento del linguaggio secondo me) piuttosto che andare giù di CMD+C e CMD+V. Anche se ho controllato 2 volte e al mio occhio (inesperto) sembra tutto ok, il mio risultato è questo:

http://i.imgur.com/eIIcYpP.png

prima di postare il codice e farti correggere mi piacerebbe vedere se riesco a capire che tipo di errore ho commesso, no capisco se la linea parte dalla "C" e quindi ha il verso giusto ed è solo un errore di valori o se ho confuso un after con un before e quindi la riga va nel senso opposto, che però ho sbagliato qualcosa è sicuro!

N. d. F.: Gli pseudo elementi sono in grado di generare meraviglie: tutti i webdesigner li amano (o dovrebbero farlo).

Sarò un po' tardo ma non capisco, alla fine non ha comunque caricato delle immagini?

Ogni tanto mi reintrufolo.

Voglio dire la mia:

1) Mi piace molto l'approccio di Ilario, giovane, curioso, umile e intraprendente! Aiutare una persona con il suo modo di porsi deve far sentire bene
2) Il mix di perle di saggezza, informazioni preziose e cazzeggio fra Faxus e Gattinara è veramente esilarante.
3) Intanto in tutto questo ho un malloppo di informazioni in più che mi fanno capire quanto sega io sia e quindi non mi estorcerete mai la URL del sito che gestisco per conto di una mia associazione

Grazie, apprezzo molto

[faxus]

... non mi estorcerete mai la URL del sito che ...

Hahahaha....

[Gattinara]

Ho cambiato qualche giorno fa i font, ho seguito il suggerimento di DW, non so se c'è da ritoccare:

Codice: Seleziona tutto

font-family: "Open Sans", "Open Sans Light", "Open Sans Semibold", "Open Sans Extrabold", Arial, Helvetica, sans-serif;

Sì che c'è: non puoi integrare tutte le varianti (light, semibold, et cetera) della font da te scelta raggruppandoli in una sola proprietà.
In questa maniera stai solo "dicendo" al browser: se il visitatore non ha installato l'Open Sans (normal), scegli il carattere seguente (ovvero il Light) e, nel caso non avesse neanche quello, visualizza il successivo (Semibold), et cetera.

In soldoni: se desideri che il carattere generale (body) utilizzato nella pagina sia l'Open Sans Light:

Codice: Seleziona tutto

body {
	font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
	[...]
}

se scegliessi di adottare una differente variante (Extrabold, ad esempio) nelle sole intestazioni:

Codice: Seleziona tutto

h1, h2, h3, h4, h5, h6 {
	font-family: "Open Sans Extrabold", Arial, Helvetica, sans-serif;
	[...]
}

e via dicendo.
Ti suggerisco la lettura di questo articolo (una volta terminata la index tratteremo l'integrazione delle font non "web safe" traverso l'utilizzo di @font-face/tag link).

prima di postare il codice e farti correggere mi piacerebbe vedere se riesco a capire che tipo di errore ho commesso, no capisco se la linea parte dalla "C" e quindi ha il verso giusto ed è solo un errore di valori o se ho confuso un after con un before e quindi la riga va nel senso opposto, che però ho sbagliato qualcosa è sicuro!

Dallo screenshot pare che il problema sia legato al ::before.
Nel caso non riuscissi a risolvere posta il tuo CSS (sappi comunque che apprezzo la tua scelta di non utilizzare il copia-incolla).

N. d. F.: Gli pseudo elementi sono in grado di generare meraviglie: tutti i webdesigner li amano (o dovrebbero farlo).

Sarò un po' tardo ma non capisco, alla fine non ha comunque caricato delle immagini?

Temo di essere io la stordita: di quali immagini parli?

[ilario_seb]

Sì che c'è: non puoi integrare tutte le varianti (light, semibold, et cetera) della font da te scelta raggruppandoli in una sola proprietà.
In questa maniera stai solo "dicendo" al browser: se il visitatore non ha installato l'Open Sans (normal), scegli il carattere seguente (ovvero il Light) e, nel caso non avesse neanche quello, visualizza il successivo (Semibold), et cetera.

Ok, correggerò appena possibile.

Dallo screenshot pare che il problema sia legato al ::before.
Nel caso non riuscissi a risolvere posta il tuo CSS (sappi comunque che apprezzo la tua scelta di non utilizzare il copia-incolla).

In prima serata vedrò di riuscir a trovare l'errore, speriamo bene!

Temo di essere io la stordita: di quali immagini parli?

Tutte le icone (il tubo di supremazia, tardis, il librino) son tutti pseudo elementi, e la differenza che mi salta all'occhio da una semplice immagine è che se la clicco e la trascino non posso salvarla, per il resto cosa differisce da un immagine regolare?

[faxus]

... Tutte le icone (il tubo di supremazia, tardis, il librino) son tutti pseudo elementi, e la differenza che mi salta all'occhio da una semplice immagine è che se la clicco e la trascino non posso salvarla, per il resto cosa differisce da un immagine regolare?

È un glifo, non un'icona

[Gattinara]

Tutte le icone (il tubo di supremazia, tardis, il librino) son tutti pseudo elementi, e la differenza che mi salta all'occhio da una semplice immagine è che se la clicco e la trascino non posso salvarla, per il resto cosa differisce da un immagine regolare?

La differenza è che non è una immagine.



Costruire elementi decorativi tramite soli CSS consentirebbe sbarazzarci di tutte le immagini non determinanti ai fini dell'indicizzazione (icone dei menu, et cetera) con poche righe di codice (connaturanti ingombri ridicoli).

[ilario_seb]

Praticamente elaborare un immagine (glifo) da codice, annullando o quasi i tempi di caricamento che darebbe sennò un immagine fisica. Il CSS è davvero molto potente

[Gattinara]

Potente assai :)

Suggeriscoti occhiare anche questo articolo.

[a-mac]

Potente assai :)
Suggeriscoti occhiare anche questo articolo.

parlano anche di mattlega

[ilario_seb]

Potente assai :)

Suggeriscoti occhiare anche questo articolo.

Ora comprendo un po' di più le potenzialità degli pseudo elementi e del :after e :before.
Sto in ritardissimo lo so, devo ancora buttare sangue sul codice per trovare l errore, è stato un fine settimana inaspettato e non o accesso al computer da sabato mattina, per stasera prometto risolvo tutto

[Gattinara]

Non c'è alcuna fretta, ci mancherebbe :)

[ilario_seb]

Dallo screenshot pare che il problema sia legato al ::before.
Nel caso non riuscissi a risolvere posta il tuo CSS (sappi comunque che apprezzo la tua scelta di non utilizzare il copia-incolla).

Eccomi, niente ho ricontrollato per l'ennesima volta e non riesco proprio a capire, eppure il codice sembra giusto!
Non pubblico tutto il codice, ma solo le parti interessate:

Codice: Seleziona tutto

.back, .line {
	padding: 125px 0 20px;
}
.line {
	position: relative;
	display: block;
}
.line::before, .line::after {
	position: absolute;
	top: 138px;
	width: 230px;
	border-top: 1px solid #59BCBC;
	content: "";
}
.line::before {
	rigth: 50%;
	margin-right: 150px;
}
.line::after {
	left: 50%;
	margin-left: 150px;
}
.width.mini {
	width: 540px;
	padding: 0 0 40px;
	margin: 0 auto;
}
.ico-01 {
	background: url(../Img/fondi/simbolo-01.svg) no-repeat center 35px;
}
.ico-02 {
	background: url(../Img/fondi/simbolo-02.svg) no-repeat center 35px;
}
.ico-03 {
	background: url(../Img/fondi/simbolo-03.svg) no-repeat center 35pX;
}
/* mobile */
@media only screen 
and (min-width : 300px) 
and (max-width : 479px) {
   .banner h1 {
      line-height: 22px;
      font-size: 18px;
   }
   h2 {
	   font-size: 18px;
   }
  .line::before, .line::after {
	  display: none;
  }
}
@media only screen 
and (min-width : 240px) 
and (max-width : 479px) {
}
@media only screen 
and (min-width : 480px) 
and (max-width : 767px) {
	   .banner h1 {
      line-height: 24px;
      font-size: 20px;
   }
   h2 {
   font-size: 19px;
}
.line::before, .line::after {
   top: 130px;
   width: 100px;
}
.line::before {
   margin-right: 110px;
}
.line::after {
   margin-left: 110px;
}
}
@media only screen 
and (min-width : 768px) 
and (max-width : 1023px) {
   .banner {
      height: 350px;
   }
   .banner h1 {
      width: 80%;
      line-height: 32px;
      margin-left: 10%; /* respiro laterale */
   }
   .line::before, .line::after {
	   top: 138px;
	   width: 180px;
   }
   .line::before {
	   margin-right: 140px;
   }
   .line::after {
	   margin-left: 140px;
   }
}

Son pronto a ricevere le bacchetTate

[faxus]

... Son pronto a ricevere le bacchetate

Mettere una "t" di meno non le renderà più lievi...

Ma perché non posti come codice?
Fatichi di meno tu, e chi le vorrebbe usare, analizzare ecc, dovrebbe riscriverle

[ilario_seb]

Mettere una "t" di meno non le renderà più lievi...

Peccato, ci ho provato

Ma perché non posti come codice?
Fatichi di meno tu, e chi le vorrebbe usare, analizzare ecc, dovrebbe riscriverle

Fatto

[Gattinara]

Eccomi: la (minuta) svista è la seguente: hai scritto "rigth" al posto di "right" nel ::before :)