Approccio al Web Design

[Gattinara]

Io li ho inseriti nella /* struttura principale */, ma non è necessario secondarmi, puoi metterli dove preferisci; sono solita creare una struttura ordinata per il fatto che, in presenza di CSS ingombranti, risulta maggiormente agevole orientarsi (niente di più :)

Edit: in presenza di dubbi puoi usare come riferimento il CSS della bozza.

[fenix]

... 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

che fili?

la musichetta e nel primo video parte in automatico

ho usato il comando plugin per inserire i video non trovavo altra possibilità

in passato usavo flv ma sui tablet flash non ce per cui ...

[fenix]

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.

il cms mi impedirebbe di essere libero da locale e con altervista dovrei usare wordpress che odio

per quanto riguarda la tabella la metto per suddividere lo spazio
avevo pensato ad un sito su una sola pagina senza pagine multiple
non so come inserire i video per mostrarli in loco se non usare il comando plugin
il programma per realizzarlo e stato usato dreamwever cs3 l'unico che ho
qualche volta ho usato iweb .. ma i menu li facevo con corel in forma swf ...

a me serve che si veda su supporto android ... già i plugin ho provato con l'emulatore non li trova!
grazie...

[ilario_seb]

Io li ho inseriti nella /* struttura principale */, ma non è necessario secondarmi, puoi metterli dove preferisci; sono solita creare una struttura ordinata per il fatto che, in presenza di CSS ingombranti, risulta maggiormente agevole orientarsi (niente di più :)

Edit: in presenza di dubbi puoi usare come riferimento il CSS della bozza.

Ok, ho fatto casino, mi son sparite tutti i li nella versione desktop e tablet, son rimasti solo quando scendono al di sotto della barra del nav.
Non nego che ho perso la testa per inserire le righe, molto propabilmente a causa del diverso ordine in cui le abbiamo inserite, ma questo credo sia normale.
Mi mancava la sezione /*background*/ che ho aggiunto, voglio evitare di far copia incolla dal css della tua bozza, mi piace sbattere la testa contro i problemi, almeno così son sicuro di non ricascarci. Nel mentre scrivevo il codice mi son accorto che in una query (credo non son sicuro) mancava una parentesi di chiusura, che ho prontamente aggiunto, credo che forse sia questo il problema, sto rileggendomi il codice per vedere cosa c'è che non quadra, nel frattempo lo incollo anche qui almeno vedi quanto ho pastricciato e cosa dovrei correggere.

EDIT:Noto anche che tutto il nav si è avvicinato ai bordi, forse ho toccato senza rendermene conto i margini o la griglia, ma mi sembra strano visto che stavo su un altro punto della pagina. continuo a non capire, le scritte escono dallo schermo a partire dalla risoluzione ipad landscape, invece che rimanere centrate.

EDIT2: Son riuscito a far riapparire il nav, avevo chiuso quella parentesi (stupidamente) perché mi sembrava aperta a causa di un commento sezione. Ora però è comparso un altro problema, il banner non compare lasciando la scritta nera nella risoluzione desktop, scendendo a risoluzioni più basse tutto gira come dovrebbe, eccetto il testo che continua a non essere centrato. Continuo a controllare nella speranza di risolvere da me :D

p.s il codice l'ho aggiornato all'EDIT2

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 e testi */
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 {
   width: 100%;
   height: 75px;
   background: #FFF;
   font-size: 12px;  /* era 18px */
   letter-spacing: 2px; /* spazio tra i caratteri */
   text-transform: uppercase; /* forza il maiuscolo */
}

.griglia {
   position: relative;
   width: 80%;
   margin: 0 auto;
}

#logo {
   position: absolute;
   top: 0;
   left: 0;
   width: 148px;
   height: 98px;
   z-index: 999;
}

ol, ul {
   list-style: none; /* elimina il marcatore */
}
#menu {
   position: absolute;
   top: 20px;
   right: 78px;
   width: 370px; /* era 370px*/
   height: 35px;
   text-align: left;
}
#menu li {
   line-height: 35px;
   padding: 0 15px 0;
   border-right: 1px solid #000; /* bordo separatore */
   float: left; /* affianca le voci  */
   display: block;
}
#menu li a {
   color: #000;
}
#menu li a:active, #menu li a:hover {
   color: #59BCBC;
}
#menu li:first-child {
   padding-left: 0; /* elimina il padding sinistro nella prima voce del menu */
}
#menu li:last-child {
   border-right: 0; /* eliminala il bordo destro nell'ultima voce del menu */
}

#social {
   position: absolute;
   top: 31px;
   right: 0;
   width: 64px;
   height: 13px;
}
#social img {
   width: 100%;
   height: 100%;
}
#twitter, #facebook, #google {
   height: 13px;
   float: left;
   background-size: 100% 100%;
   display: block;
}
#twitter {
   width: 17px;
   background: url(../img/loghi/logo-twitter-bg.svg) no-repeat; /* stato hover */
   margin-right: 9px;
}
#facebook {
   width: 15px;
   background: url(../img/loghi/logo-facebook-bg.svg) no-repeat; /* stato hover */
   margin-right: 8px;
}
#google {
   width: 15px;
   background: url(../img/loghi/logo-google-bg.svg) no-repeat; /* stato hover */
}
/* struttura interna */
.griglia {}
/* struttura principale */
aside {}
footer {}
header {}
section {}
/* mobile */
@media only screen 
and (min-width : 300px) 
and (max-width : 479px) {
   .banner h1 {
      line-height: 22px;
      font-size: 18px;
   }
}
@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;
   }
}
@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 */
   }
}

@media only screen 
and (min-width : 300px) 
and (max-width : 767px) {
	.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 */
}

   /* 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;
   }
   .banner {
   position: relative;
   height: 400px;
   background-repeat: no-repeat;
   background-position: top center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
}
.banner h1 {
   position: absolute;
   bottom: 40px;
   width: 100%;
   font-size: 25px;
   letter-spacing: 1px;
   color: #FFF;
}

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

@media only screen 
and (min-width : 300px) 
and (max-width : 1024px) {
	   nav {
      font-size: 14px;
   }
   #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;}
}

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
   /* navigazione */
   #menu {
      right: 125px;
   }
   /* struttura interna */
   .griglia {
      width: 92%;
   }
}
@media only screen 
and (min-width : 1024px) 
and (max-width : 1279px) {
   .banner {
      height: 320px;
   }
   .banner h1 {
      bottom: 30px;
      font-size: 22px;
   }
}

[Gattinara]

Mistero svelato: il seguente codice (dalla riga 315 alla 336, per intenderci):

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;
}
.banner h1 {
	position: absolute;
	bottom: 40px;
	width: 100%;
	font-size: 25px;
	letter-spacing: 1px;
	color: #FFF;
}
/* background */
.home {
	background-image: url(../img/home/banner.jpg);
}

va posizionato fuori dalle media queries (prima dell'area /* mobile */).
Lo hai inavvertitamente integrato all'interno della query 300/767.

Attendo novelle.

[ilario_seb]

Aaaaah! ecco perché non riuscivo a capire come mai non funzionava, avevo sbagliato "solo" il posto, incredibile come sbagliare di una riga precluda il corretto funzionamento finale.
Wow, piano piano sta crescendo, mi sto emozionando, anche se son consapevole che alla fine il mio contributo è molto marginale, però mi accorgo che piano piano sto facendo miei i concetti. Devo ancor leggermi i documenti allegati al post precedente, momentaneamente son in sede Accademica per una revisione, leggerò al più presto aspettando lo step successivo!

[Gattinara]

Aaaaah! ecco perché non riuscivo a capire come mai non funzionava, avevo sbagliato "solo" il posto, incredibile come sbagliare di una riga precluda il corretto funzionamento finale.

Se è per questo basta una parentesi non chiusa per svaccare un intero layout.
DW, al pari di altri editor, aiuta ad evitare sviste (le queries hanno una colorazione propria, al pari del magenta per #id/.class/parentesi.

Wow, piano piano sta crescendo, mi sto emozionando, anche se son consapevole che alla fine il mio contributo è molto marginale

Non crederlo: sono piacevolmente impressionata dal fatto che tu stia evitando di clonare il codice di partenza (sbattendoci la crappa direttamente).

[Gattinara]

il cms mi impedirebbe di essere libero da locale e con altervista dovrei usare wordpress che odio

Wordpress è un buon CMS: quali sono i moventi della tua avversione?
(oltretutto, tramite MAMP può essere gestito localmente, volendo)

per quanto riguarda la tabella la metto per suddividere lo spazio
avevo pensato ad un sito su una sola pagina senza pagine multiple
non so come inserire i video per mostrarli in loco se non usare il comando plugin
il programma per realizzarlo e stato usato dreamwever cs3 l'unico che ho
qualche volta ho usato iweb .. ma i menu li facevo con corel in forma swf ...
a me serve che si veda su supporto android ... già i plugin ho provato con l'emulatore non li trova!
grazie...

Fenix, con tutto il rispetto: non posso fornirti formule magiche che, all'immediato, renderanno il tuo sito Android compatibile.
Le tue pagine andrebbero ricostruite ex novo, e solo al seguito della creazione di una bozza grafica ben strutturata.
Adottando l'HTML5 potresti integrare i video traverso omonimo tag senza accusare grane di visualizzazione su mobile, ma il suo solo utilizzo non risolverà le magagne proprie di un codice improvvisato.

In soldoni: sei disposto, al pari di Ilario, a studiare - partendo dalle guide suggerite ad inizio post e ricominciando da zero?
(ché, oltre al codice, il tuo intero layout andrebbe rivisto graficamente)

Nel caso tu abbia invece bisogna di orchestrare in tempi brevi un sito (mobile compatibile o meno) ti suggerisco nuovamente l'utilizzo di un CMS.

[fragrua]

Fenix, in pratica tu e il tuo sito andate abbattuti e ricostruiti.
Mi ricordo nel 2006 quando visitai il tuo sito per la prima volta, aveva una gif animata di pochi centimetri, ma che pesava 8MB!!!
Ti ridussi l'immagine, ricordi?


Il dominio scomparso era http://www.fenixpoint.net" onclick="window.open(this.href);return false;
ma poi ne conservammo una memorabile copia qui:
https://www.imaccanici.org/fenixpoint/indexx.htm" onclick="window.open(this.href);return false;

[Scialla]

Il dominio scomparso era http://www.fenixpoint.net" onclick="window.open(this.href);return false;
ma poi ne conservammo una memorabile copia qui:
https://www.imaccanici.org/fenixpoint/indexx.htm" onclick="window.open(this.href);return false;

Anche qui:
http://web.archive.org/web/201110242250 ... point.net/" onclick="window.open(this.href);return false;

[faxus]

... che fili? ...

Oh... Pochi, mica tanti...

... la musichetta e nel primo video parte in automatico ...

Eh, sì... E non deve...

[fragrua]

Ma quei fili sono la cosa più lineare del sito!

[faxus]

Wordpress responsivo è Android compatibile 100%.

Che cos'hai contro WP?
È uno strumento quasi professionale, gratis, facile, assistito e ti permetterebbe di fare in minor tempo un sito più facile da usare.
Un solo accesso, te lo fai installare o lo installi facilmente.
Anche in locale, con MAMP, è facilissimo.
E, se non ti offendi, anche belli e funzionali, perché il tuo....

Se ti serve una mano, ma non ce n'è bisogno, stiamo qui.

Posso fare dei rilievi io ed altri professionisti, perché fare siti per i clienti con WP è un furto, se non sono blog personalizzati.
E se per caso ti serve un sito ultrabold, con Joomla, volentieri lo mettiamo su

[faxus]

Ma quei fili sono la cosa più lineare del sito! :shock:

Tutto puoi dire dei fili, ma non che non siano lineari...

[TheMacGuru]

Io darei un occhiata a:
http://getbootstrap.com/" onclick="window.open(this.href);return false;

Siti adaptive per ogni piattaforma (tutto in uno) Html5 + CSS+ JavaScript e ci fai quello che vuoi.

Occhio alle vulnerabilita di WordPress:
http://www.cvedetails.com/vulnerability ... press.html" onclick="window.open(this.href);return false;