Approccio al Web Design

Le vostre creatività migliori

Moderatori: Gattinara, ModiMaccanici

ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: ven, 19 set 2014 23:09

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 :P
(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! :D
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 :D
faxus
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26752
Località: Tra bufale e mare
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: ven, 19 set 2014 23:20

Uno_qualunque ha scritto:... non mi estorcerete mai la URL del sito che ...
Hahahaha....
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 763
Località: Roma
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: sab, 20 set 2014 00:31

ilario_seb ha scritto: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).
ilario_seb ha scritto: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! :D
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).
ilario_seb ha scritto:
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?
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: sab, 20 set 2014 09:40

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
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26752
Località: Tra bufale e mare
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: sab, 20 set 2014 11:32

ilario_seb ha scritto:... 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
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 763
Località: Roma
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: sab, 20 set 2014 14:11

ilario_seb ha scritto: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.

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).
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: sab, 20 set 2014 16:58

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 :shock:
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 763
Località: Roma
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: sab, 20 set 2014 17:40

Potente assai :)

Suggeriscoti occhiare anche questo articolo.
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
a-mac
Unix Expert
Unix Expert
Avatar utente
Iscritto il: ven, 21 dic 2012 10:32
Messaggi: 4500
Località: fsf.org
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 22 set 2014 11:20

Gattinara ha scritto:Potente assai :)
Suggeriscoti occhiare anche questo articolo.

parlano anche di mattlega :-D
Immagine
Andre “...è complicato, ma semplice”

_ UNIX: Live Free or Die
_ With great power comes great responsibility
_ You may say, I'm a dreamer, but I'm not the only one, I hope some day you'll join us, And the world will live as one!
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 22 set 2014 13:16

Gattinara ha scritto: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
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 763
Località: Roma
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 22 set 2014 13:25

Non c'è alcuna fretta, ci mancherebbe :)
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 22 set 2014 17:53

Gattinara ha scritto: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
Ultima modifica di ilario_seb il lun, 22 set 2014 20:30, modificato 1 volta in totale.
faxus
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26752
Località: Tra bufale e mare
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 22 set 2014 18:09

ilario_seb ha scritto:... 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
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 22 set 2014 20:31

faxus ha scritto: 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
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 763
Località: Roma
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 22 set 2014 21:33

Eccomi: la (minuta) svista è la seguente: hai scritto "rigth" al posto di "right" nel ::before :)
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
Rispondi