Approccio al Web Design

Le vostre creatività migliori

Moderatori: Gattinara, ModiMaccanici

Avatar utente
Gattinara
Stato: Non connesso
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 776
Località: Roma

Top

Eccomi di ritormo; prima di iniziare, in attesa dei test finali sui simulatori, ti suggerisco di installare una estensione che gestica il resize del browser in maniera maggiormente mirata rispetto a quello manuale (ve ne sono diverse a seconda degli applicativi - su Chrome sono usa utilizzare Screen Resolution Tester).

Rendiamo responsive la navigazione partendo dal formato Phone [320/480px]:

Immagine

La griglia, come noterai, occupa ora il 100% dell'ingombro orizzontale in maniera da consentire una eguale larghezza del #menu, ora sottostante all'elemento nav e non più al suo interno (avendo proprietà absolute possiamo piazzarlo dove più ci è comodo).
Conseguentemente distanzieremo #logo e box #social dai bordi laterali (25px left/right), in maniera da non averli a filo pagina.

Per evitare che il #logo venga "segato" dal menu (essendo posizionato dietro ad esso nell'HTML) applicheremogli un valore z-index maggiore di quello di default (auto, equivalente a 0).
Aggiungila alle coeve proprietà del #logo:

Codice: Seleziona tutto

z-index: 999;
In questo articolo (sul fondo) troverai specifiche ed esempi della proprietà.

Iniziamo ad interagire con le media queries; nel tuo CSS sono già presenti i breakpoint principali (ancora da riempire, ovvio) ma, come scoprirai traverso la pratica, per snellire il codice conviene sempre crearne di personalizzate in maniera da accorpare gli elementi comuni in più di una risoluzione.

Il previo #menu è condiviso dalle risoluzioni Phone (minori di 768px):

Codice: Seleziona tutto

@media only screen 
and (min-width : 300px) 
and (max-width : 767px) {
	/* navigazione */
	#menu {
		top: 75px;
		right: 0;
		width: 100%;
		height: 105px;
		border-bottom: 1px solid #59BCBC;
	}
	#menu li {
		height: 34px;
		line-height: 34px;
		background: #F1F1F2;
		text-align: right;
		padding: 0;
		border-right: 0; /* elimina il bordo destro nelle voci del menu */
		border-top: 1px solid #59BCBC; /* aggiunge il bordo al top nelle voci */
		float: none; /* evita l'affiancamento delle voci  */
	}
	#menu li a {
		color: #59BCBC;
		display: block;
		padding: 0 25px 0 0; /* spazio a destra  */
	}
	#menu li a:hover, .menu li a:active {
		color: #59BCBC;
		background: #FFF;
	}
	nav {
		font-size: 16px;
	}
	#social {
		right: 25px;
	}
	/* struttura principale */
	.griglia {
		width: 100%;
		margin: 0;
	}
	#logo {
		left: 25px;
	}
}
Le icone sociali sono ingrandite a partire dalla risoluzione 320px (Phone portrait) fino alla 1024px (Tablet landscape):

Codice: Seleziona tutto

@media only screen 
and (min-width : 300px) 
and (max-width : 1024px) {
	#social {
		top: 28px;
		width: 92px;
		height: 19px;
	}
	#twitter, #facebook, #google {
		height: 19px;
	}
	#twitter {
		width: 25px;
		margin-right: 12px;
	}
	#facebook {width: 22px; margin-right: 11px;}
	#google {width: 22px;}
}
Le risoluzioni tablet connaturano lo stesso #menu desktop ma integreranno una griglia maggiormente estesa e maggiore respiro allo spazio destrorso tra #menu e icone (causa il box #social maggiorato):

Codice: Seleziona tutto

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
	/* navigazione */
	#menu {
		right: 125px;
	}
	/* struttura interna */
	.griglia {
		width: 92%;
	}
}
Come vedi abbiamo incluse solo le proprietà modificate.

Sono usa posizionare le query personalizzate aldisotto delle standard (ti sarà bastante occhiare il CSS della bozza online, nel caso intendessi secondare le mie manie).

A presto.
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

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

Avatar utente
faxus
Stato: Non connesso
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 30459
Località: Circondato dalle bufale

Top

Contatta:
Gattinara ha scritto:... bozza online...
Mi da server non raggiungibile, posso fare qualcosa?
Nel server la cartella appare a posto


---
Intervallo

Immagine

Avatar utente
Gattinara
Stato: Non connesso
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 776
Località: Roma

Top

Bizzarro, a me la pagina si carica correttamente...
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

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

Avatar utente
faxus
Stato: Non connesso
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 30459
Località: Circondato dalle bufale

Top

Contatta:
Gattinara ha scritto:Bizzarro, a me la pagina si carica correttamente...
Ho svuotato anche la cache di Safari.

Poi ho provato con un altro browser, che generalmente, oltre ad essere il più veloce, visualizza sempre tutto

Immagine

Avatar utente
Gattinara
Stato: Non connesso
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 776
Località: Roma

Top

Stranissimo: ho vuotato anch'io la cache e seguita a caricarsi su tutti i browser.
Attendiamo altri riscontri...
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

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

Avatar utente
faxus
Stato: Non connesso
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 30459
Località: Circondato dalle bufale

Top

Contatta:
Tutto a posto, dopo averlo aperto con Firefox, tutti gli altri lo vedono, anche Safari.

Bah, scusa il disguido, chissà cos'era...

Avatar utente
Gattinara
Stato: Non connesso
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 776
Località: Roma

Top

Scusa per cosa? :)
Prima di adottare Namebench mi capitava spessissimo di occhiare avvisi simili (ma se non rammento male sei uso utilizzarlo tu anche).
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

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

Avatar utente
ilario_seb
Stato: Non connesso
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276

Top

Gattinara ha scritto:Eccomi di ritormo; prima di iniziare, in attesa dei test finali sui simulatori, ti suggerisco di installare una estensione che gestica il resize del browser in maniera maggiormente mirata rispetto a quello manuale (ve ne sono diverse a seconda degli applicativi - su Chrome sono usa utilizzare Screen Resolution Tester).
Installata, fighissima! Molto più pratico in confronto al mio metodo stringi al massimo allarga al massimo, ora ho la possibilità di vedere l'effettiva grandezza che avrò su un dato dispositivo! :D (per safari e firefox hai un plugin simile da consigliare? potrei googlare ma sicuramente avrò risposte più esaustive da te/faxus)
Rendiamo responsive la navigazione partendo dal formato Phone [320/480px]:
Molto utile questa storia delle griglie, ammiro questa tua pazienza e capacità di spiegazione, mi sto impegnando molto, sto evitando come la peste il copia/incolla diretto, cerco di leggermi il codice più volte prima di applicarlo e di capire ogni riga cosa cambierà nel layout, se avrò dubbi chiederò sicuramente.
Per evitare che il #logo venga "segato" dal menu (essendo posizionato dietro ad esso nell'HTML) applicheremogli un valore z-index maggiore di quello di default (auto, equivalente a 0).
Aggiungila alle coeve proprietà del #logo:

Codice: Seleziona tutto

z-index: 999;
In questo articolo (sul fondo) troverai specifiche ed esempi della proprietà.
Compreso alla perfezione anche senza bisogno dell'articolo (che però ho letto comunque :D) in pratica funziona come il caro Photoschiop.
Son stato per un po' a scervellarmi sul come mai la griglia nel breakpoint per ipad era troppo vicina ai social non lasciando respirare le voci correttamente, solo dopo una decina di minuti mi son accorto che mancava l'ultimo pezzo di codice, il cercare di capire i cambiamenti blocco per blocco mi aveva quasi fregato :P
C'è modo di mettere le voci ul alternando grigio bianco grigino? In caso negativo credo che sostituirò semplicemente il backgraund con l'hover (quindi sfondo bianco e hover grigio, o credi che quel grigio risalti in mezzo alla dominante bianca della pagina e che quindi ci stia meglio?
Sono usa posizionare le query personalizzate aldisotto delle standard (ti sarà bastante occhiare il CSS della bozza online, nel caso intendessi secondare le mie manie).

A presto.
Intendi al di sotto dei breakpoint che abbiamo lasciato per il momento vuoti giusto? C'è un motivo particolare del perché preferisci così o cosa? :D
A prestissimo!

p.s per la questione della bozza non raggiungibile me lo ha fatto anche a me, dicendo che non avevo i permessi. Ho notato che mi accade quando provo a collegarmi a questo http://approuno.jfaxus.com/ piuttosto che a quest'altro (apparentemente hai cambiato il collegamento nel post precedente, ma son abbastanza sicuro che dopo il com c'era un altro pezzetto contenente "nav" o qualcosa di simile, e con quello mi permetteva di vedere.)

p.p.s: Ho notato che nella pagina Bozza che mi metti come confronto il sito prima di caricarsi fa un simpatico effetto bounce, si espande verso i margini della finestra, mentre sul mio no, mi piace molto, posso inserirlo anche io? :twisted:

Avatar utente
Gattinara
Stato: Non connesso
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 776
Località: Roma

Top

ilario_seb ha scritto:per safari e firefox hai un plugin simile da consigliare? potrei googlare ma sicuramente avrò risposte più esaustive da te/faxus
Uso Safari e Firefox solo per i test della risoluzione desktop, e Opera 12 unicamente per il fatto che è l'unico browser (su Mac) in grado di minimizzarsi a larghezze inferiori ai 400px. Provale (al limite le disinstalli).
ilario_seb ha scritto:C'è modo di mettere le voci ul alternando grigio bianco grigino?
Certo che c'è: tramite pseudo-classi :first/last-child. In questo caso dovresti scegliere un background per l'hover della lista bianca centrale differente dal grigio delle restanti (ché si confonderebbe con lo stato inattivo).
ilario_seb ha scritto:In caso negativo credo che sostituirò semplicemente il backgraund con l'hover (quindi sfondo bianco e hover grigio, o credi che quel grigio risalti in mezzo alla dominante bianca della pagina e che quindi ci stia meglio?
Preferisco il grigio, ma è a te che deve risultare gradito :)
ilario_seb ha scritto:C'è un motivo particolare del perché preferisci così o cosa? :D
Il movente sono le mie incoercibili ossessioncine riguardanti pulizia/ordine del codice.
ilario_seb ha scritto:Ho notato che mi accade quando provo a collegarmi a questo http://approuno.jfaxus.com/ piuttosto che a quest'altro (apparentemente hai cambiato il collegamento nel post precedente, ma son abbastanza sicuro che dopo il com c'era un altro pezzetto contenente "nav" o qualcosa di simile, e con quello mi permetteva di vedere.)
Sì, ciascun elemento portante avrà una sua correlata bozza.
ilario_seb ha scritto:Ho notato che nella pagina Bozza che mi metti come confronto il sito prima di caricarsi fa un simpatico effetto bounce, si espande verso i margini della finestra, mentre sul mio no, mi piace molto, posso inserirlo anche io? :twisted:
E' dovuta dalla proprietà transition nel body: è già presente nel tuo CSS (al di sotto del commento /* effetti */, ma viene visualizzata correttamente solo in remoto (in locale a me anche l'effetto risulta, stranamente, inattivo).
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

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

Avatar utente
ilario_seb
Stato: Non connesso
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276

Top

Gattinara ha scritto:Certo che c'è: tramite pseudo-classi :first/last-child. In questo caso dovresti scegliere un background per l'hover della lista bianca centrale differente dal grigio delle restanti (ché si confonderebbe con lo stato inattivo).
Aaaah, giusto, non ci avevo pensato! :D

Avatar utente
Gattinara
Stato: Non connesso
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 776
Località: Roma

Top

Tornai, sopravvissuta ad eccessive libagioni, resync sottotitoli, visite parentali e modem defunti.

Il lenzuolone non presenta difficoltà nelle risoluzioni desktop; sarà bastante orchestrare due classi concatenabili, una generica:

Codice: Seleziona tutto

.banner {
	position: relative;
	height: 400px;
	background-repeat: no-repeat;
	background-position: top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}
un'altra provvista del solo background (diverso per ciascuna sezione):

Codice: Seleziona tutto

.home {
	background-image: url(../img/home/banner.jpg);
}
e correlata intestazione:

Codice: Seleziona tutto

.banner h1 {
	position: absolute;
	bottom: 40px;
	width: 100%;
	font-size: 25px;
	letter-spacing: 1px;
	color: #FFF;
}
da posizionare aldisotto del tag nav (ma sempre all'interno dell'header):

Immagine

Qui troverai un articolo sulla proprietà background-size.

Ho risolto adottare un semplice div; l'utilizzo improprio del "nuovo" tag figure (che integreremo a breve nei contenuti) sembra essere oramai diventato pratica comune (quasi al pari dell'infingardo intestazione/logo) alla quale non asserviremoci, per moventi che risulterannoti evidenti al seguito della lettura di questo articolo.

La faccenda si complica (un minimo) nelle risoluzioni mobile (mi sono basata sulle tue bozze per ricavare altezze/banner ed ingombri/font - che andranno modificati non appena risolverai sostituire all'Arial una differente font).
Per quanto concerne il formato tablet landscape creeremo una nuova query (con un max-width inferiore alla diffusissima risoluzione desktop 1280px):

Codice: Seleziona tutto

@media only screen 
and (min-width : 1024px) 
and (max-width : 1279px) {
	.banner {
		height: 320px;
	}
	.banner h1 {
		bottom: 30px;
		font-size: 22px;
	}
}
per il portrait integreremo le seguenti variazioni nella canonica 768/1023:

Codice: Seleziona tutto

@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 */
	}
}
Affrontiamo nel dettaglio la risoluzione Phone (dalla 320 alla 767):

Immagine

Essendo il menu absolute posizionato aldisotto del nav, il .banner dovrà connaturare un margin-top equivalente alla sua altezza (105px + 1px del border-bottom).
Le seguenti proprietà andranno inserite all'interno della query personalizzata precedentemente figliata (300/767)

Codice: Seleziona tutto

.banner {
	height: 220px;
	margin-top: 106px;
}
.banner h1 {
	bottom: 20px;
	width: 90%;
	letter-spacing: normal; /* riduce l'ingombro orizzontale del testo */
	margin-left: 5%; /* respiro laterale */
}
integrando specifiche sul formato font nelle query canoniche Phone, sia landscape (480/767):

Codice: Seleziona tutto

@media only screen 
and (min-width : 480px) 
and (max-width : 767px) {
	.banner h1 {
		line-height: 24px;
		font-size: 20px;
	}
}
che portrait (320/479):

Codice: Seleziona tutto

@media only screen 
and (min-width : 300px) 
and (max-width : 479px) {
	.banner h1 {
		line-height: 22px;
		font-size: 18px;
	}
}
L'header è terminato, con bozza online da usare come riferimento.

N. d. F.: seguito a non fidare adatta la scelta dell'immagine, connaturante punti di bianco in eccesso (specie in presenza dell'estesa altezza del .banner a risoluzioni Phone e Tablet portrait) con conseguente perdita di visibilità della intestazione.
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

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

Avatar utente
fenix
Stato: Non connesso
Genio guastatore
Genio guastatore
Avatar utente
Iscritto il: mer, 21 mar 2007 05:50
Messaggi: 3142
Località: cagliari-presso parco della musica

Top

Contatta:
progetto effe r.png
progetto effe r.png (91.57 KiB) Visto 801 volte
ragazzi posso approcciarmi al progetto dato che sto da qualche giorno costruendo appunto un sito base per rendere fruibile ad un amico i file inerenti il progetto

comunque il tutto deve essere visto su un tablet samsung da usare per mostrarlo

ho consigliato un ipad ma sono stato disatteso

http://progettoeffe.altervista.org/#home" onclick="window.open(this.href);return false;
Mac studio - macbookpro 2019 intel - macbookpro 2011 15"- 16 gb - ssd 1000 cx - high sierra -

Avatar utente
faxus
Stato: Non connesso
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 30459
Località: Circondato dalle bufale

Top

Contatta:
fenix ha scritto:... e sto da qualche giorno costruendo appunto un sito base per rendere fruibile ad un amico i file inerenti il progetto...
Come parere, è alquanto da rivedere.

Solo due cose dovresti fare subito:

1) Togli quei doppi fili che risalgono al web giurassico.

2) Togli la musichetta all'apertura, se no ti tolgo il saluto e in pubblico dirò che non ti conosco

Avatar utente
Gattinara
Stato: Non connesso
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 776
Località: Roma

Top

Il tuo costrutto connatura numerabili arcaismi (oltre a quelli menzionati da Faxus), tra i quali:
  1. struttura a tabelle
  2. CSS in corpo tag
  3. mappatura immagini
  4. plugin obbligatorio per la visione dei video
  5. navigazione dispersiva
Prima ancora di lavorare sull'HTML ti converrebbe figliare una bozza grafica matura.

Oltre questo (ed altro) mi permetto un appunto sul DOCTYPE.
Sono tra coloro che, prima della sua definitiva dipartita, "tifavano" per l'XHTML2 (principalmente a causa della sintassi rigorosa secondante la mia natura precisina) ma, a più di un lustro dal suo decesso, trovo poco ragionevole costruire siti in XHTML1 (oltretutto nel tuo codice sono presenti sviste non compatibili con tale DOCTYPE).

Per orchestrare quello che definisci "un sito base" occorrono, per l'appunto, dei fondamenti: non conviene partire alla cieca, improvvisando.
Se sei interessato a studiare ed a testare passo passo l'evoluzione di una struttura sei, naturalmente, il benvenuto ma, se il tuo scopo è avere in tempi brevi un sito funzionale (nonché responsive), ti suggerisco l'utilizzo di un CMS.
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

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

Avatar utente
ilario_seb
Stato: Non connesso
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276

Top

La prima piccola difficoltà l'ho già trovata, gli stili li inserisco sotto "struttura interna" o sotto "navigazione"? Si, lo so che mi incarto nelle cose più stupide :(

Rispondi

Torna a “Grafica & Web Design”

Chi c’è in linea

Visitano il forum: Nessuno e 4 ospiti