Un'anima pia che da uno sguardo al mio codice e mi dice se ci sono errori semantici?

**Teskio** · 03-06-2008, 13:49

Mi scuso con fcaldera per il post precedente, spero che il mio errore fosse nel titolo poco esplicativo... altrimenti ripostare il thread cambiando solo il titolo non è servito e sto ancora violando una regola ( :master: )

Con la moltitudine di attributi ci sono almeno 10 modi diversi per fare la stessa cosa, tuttavia uno risulterà sempre migliore degli altri (in termini di semplicità, potenzialità, pulizia...). Sto convertendo un sito flash in html tramite i CSS. Ho creato la prima pagina html con due css (main.css comune a tutte le pagine del sito, e news.css relativo alla sola pagina news.html). Testato su IE7 e FF2 i risultati sono simili (differenze di qualche px su margini), tuttavia prima di continuare con le altre pagine mi chiedevo se ho applicato nel modo migliore le regole css e se ho usato nel modo più adatto il box model per ottenere quel layout...

Perciò sarei grato a chi più esperto potesse dare una rapida occhiata al codice e mi segnalasse qualche errore "semantico" o un modo più efficace di rendere il tutto... Non ho online il file aggiornato, se dovesse servire lo carico e lo linko...

news.html

codice:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>News</title>
<link rel="stylesheet" title="main" href="news.css" type="text/css" />
</head>

<body>
<div id="top"></div>
<div id="container">
	<div id="pager"> news </div>
	<div id="box">
		<div class="new">
			<h1>01/05/2008 - </h1>
			<h2>Primo disco</h2>
			


			Esce l........
			</p>
		</div>
		<div class="new">
			<h1>07/05/2008 - </h1>
			<h2>Nome nuovo</h2>
			


			Il gruppo .......
			</p>
		</div>
		<div class="new">
			<h1>16/05/2008 - </h1>
			<h2>Sito nuovo</h2>
			


			E' on line i.......
			</p>
		</div>
	</div>
	<div id="footer">
		<ul>
			<li id="music_bt">musica
			<li id="news_bt">news
			<li id="band_bt">band
			<li id="foto_bt">foto
			<li id="myspace_bt">myspace
			<li id="contatti_bt">contatti
			<li id="home_bt">home
		[/list]
	</div>
</div>
<div id="bottom"></div>










</body>
</html>

news.css

codice:

@import url(main.css);

#pager {
	padding-top: 59px;
	padding-left: 224px;
	font-size: 24px;
	text-align: left;
	letter-spacing: 7px;
}

#box {
	border: 1px solid white;
	width: 429px;
	height: 357px;
	margin-left: 53px;
}

.new{
	text-align: left;
	margin: 33px 9px 0px 9px;
}

h1 {
	display: inline;
	font-size: 12px;
	letter-spacing: 1px;
}

h2 {
	display: inline;
	font-size: 12px;
	letter-spacing: 1px;
}

p {
	padding-top: 10px;
	line-height: 18px;
}

a.link:link {
	color: #990000;
	text-decoration: underline;
}

a.link:hover {
	color: #990000;
	text-decoration: underline;
	background-color: #FFFFFF;
}

a.link:visited {
	color: #990000;
	text-decoration: underline;
}

main.css

codice:

 /* LAYOUT COMUNE {}*/
*{
	margin: 0px;
	padding: 0px;
}

body {
	font-family: Serif, Times, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	text-align: left;
	color: #CCCCCC;
	background-color: black;
}
/*linea superiore del contenitore*/
#top {
	background-image: url(top.gif);
	width: 850px;
	height: 12px;
	margin: 0px auto;
	margin-top: 15px; 
}
/*linea inferiore del contenitore*/
#bottom{
	background-image: url(down.gif);
	background-repeat: no-repeat;
	width: 850px;
	height: 12px;
	margin: 0px auto;
}
/*contenitore*/
#container {
	background-image: url(background.gif);
	background-repeat: repeat-y;
	width: 850px;
	height: 514px;
	margin: 0px auto;
}
/*menù di navigazione inferiore:*/
#footer {
	background-image: url(footer.gif);
	background-repeat: no-repeat;
	width: 810px;
	height: 36px;
	margin: 21px auto;
	padding-top: 15px;
	text-align: left;
	font-size: 16px;
}

ul{
	margin: 0px;
	list-style-type: none;
}

li{
	margin: 0px;
	display: inline;
}

/*effetti speciali sui link per il menù inferiore*/
a.btn:link {
	color: #CCCCCC;
	text-decoration: none;
}
a.btn:hover {
	color: #990000;
	text-decoration: none;
	background-color: #FFFFFF;
}
a.btn:visited {
	color: #CCCCCC;
	text-decoration: none;
}
a.btn2:link {
	color: #000000;
	text-decoration: none;
}
a.btn2:hover {
	color: #000000;
	text-decoration: none;
}
a.btn2:visited {
	color: #000000;
	text-decoration: none;
}

/*posizione e spaziature bottoni*/
#music_bt{
	margin-left: 20px;
	letter-spacing: 7px;
}
#news_bt{
	margin-left: 15.3px;
	letter-spacing: 13px;
}
#band_bt{
	padding-left: 15px;
	letter-spacing: 14px;
}
#foto_bt{
	padding-left: 15px;
	letter-spacing: 15px;
}
#myspace_bt{
	padding-left: 16px;
	letter-spacing: 4px;
}
#contatti_bt{
	padding-left: 17px;
	letter-spacing: 5px;
}
#home_bt{
	font-size: 17px;
	padding-left: 98px;
	letter-spacing: 6px;
}

**Mich_** · 03-06-2008, 16:10

Perche hai usato XHTML Transitional?
Con lo Strict avresti magguiore compatibilita` tra i browser.
Il testo non puo` stare direttamtne in un <div>: il testo va messo in un

I tag [i] e [b] sono deprecati: usa invece [i] e <string> e gestisci lo stile con i CSS.
Una data non mi sembra adatta ad essere un titolo.
Comunque mi pare che tu abbia (nella parte "new")una lista contenente varie parti: le liste si rendono con i tag <ul>/[list=1] e[*] oppure con i tag <dl>, <dt> e <dd>. Nel tuo caso una <dl> mi sembra appropriata.

Io eviterei di usare i nomi del DOM per gli oggetti della pagina: il tuo CSS presume che ci sia uno (o piu`) link del tipo: <a class="link" href="...">

Occhio all'ordine delle pseudoclassi: :link :visited :hover :active

E attento a fidarti delle dimensioni dei font: vengono riscritte dai browser: prova in FF a premere control+(tastierino numerico) probabilmente qualcosa va fuori. usa invece le dimensioni dei blocchi in em.

**mucu** · 03-06-2008, 17:32

I tag [i] e [b] sono deprecati: usa invece [i] e <string> e gestisci lo stile con i CSS.

questo è un piccolo errore di battitura, devi scrivere
"strong" e non "string"

**Teskio** · 03-06-2008, 18:28

Grazie mille a Mich_ per i consigli

, prendo lo spunto da questi per farti (o farvi) altre domande inerenti e per capire meglio oltre al cosa anche il perchè...

grazie anche a mucu per la precisazione stavo diventando matto a cercare informazioni sul tag <string>

Perche hai usato XHTML Transitional?
Con lo Strict avresti magguiore compatibilita` tra i browser.

Perchè il documento dovrà essere un XHTML con prelevamento automatico del contenuto dei paragrafi della classe "news" da un file xml, e sulla guida (X)HTML ho letto che il transitional è quello che attualmente permette la maggiore compatibilità con tutti i browser... non è corretto? In più lo strict non mi permetterebbe di utilizzare l'attributo "target" in <a>, se volessi far aprire un link in una nuova finestra senza "target" come dovrei fare?

I tag [i] e [b] sono deprecati: usa invece [i] e <string> e gestisci lo stile con i CSS.

Ho eliminato i tag [i] e [b] e ho usato rispettivamente "font-style: italic" e "font-weight: bold" nel CSS.
I tag [i] e [b] sono deprecati perchè definiscono lo stile nel codice html? In questo caso non sarebbe lo stesso con [i] e [b]? qual'è la differenza?

Una data non mi sembra adatta ad essere un titolo.

Ho creato un nuovo <p class"data"> per gestire la data e un <p class="content"> per gestire il contenuto delle news, tuttavia non sono riuscito a comprendere a pieno il significato del tuo commento sul significato di "titolo". Il tag <h> partecipa (o parteciperà) attivamente al web "semantico"? Nel senso che il testo in un <h> sarà indicizzato con maggior rilievo perchè considerato indicativo di un titolo e quindi rappresentativo, volendo, del contenuto del paragrafo che segue? Se così fosse, in una pagina di news l'elemento "data" assume un'importanza diversa ma paragonabile al titolo di una news, esiste un modo per differenziarla semanticamente e non associarla ad un semplice

? (non so se effettivamente ha senso quello che ho detto...)

Comunque mi pare che tu abbia (nella parte "new")una lista contenente varie parti: le liste si rendono con i tag <ul>/[list=1] e[*] oppure con i tag <dl>, <dt> e <dd>. Nel tuo caso una <dl> mi sembra appropriata.

mmmm, sulle liste resto un po' perplesso, qual'è l'utilità nell'usarla in questo caso dovendo tra l'altro eliminare qualsiasi selettore perchè non richiesto? Credevo che lo scopo principale delle liste fosse proprio la possibilità di utilizzare e personalizzare i selettori. Sulla guida, ammetto, che le potenzialità di questo elemento mi sono rimaste un po' oscure... tra l'altro non so, ma non credo, se utilizzando una lista possa avere problemi quando implementerò il ciclo per l'inserimento dei contenuti da xml. Su questo aspetto dovrei indagare oltre...

Io eviterei di usare i nomi del DOM per gli oggetti della pagina: il tuo CSS presume che ci sia uno (o piu`) link del tipo: <a class="link" href="...">

non ho capito... non so cosa sia il DOM di cui parli, potresti essere un po' più chiaro?

Occhio all'ordine delle pseudoclassi: :link :visited :hover :active

l'ordine è link, visited, hover, active ? non sapevo ci fosse un'ordine nei fogli CSS, non l'ho letto da nessuna parte... grazie per la dritta.

E attento a fidarti delle dimensioni dei font: vengono riscritte dai browser: prova in FF a premere control+(tastierino numerico) probabilmente qualcosa va fuori. usa invece le dimensioni dei blocchi in em.

quella della dimensione del testo è una bela grana, ho visto infatti che la maggior parte dei siti, compreso w3c.org o html.it quando si modifica la dimensione del testo ha problemi con il layout... specialmente per quanto riguarda immagini, e contenitori di testo... nel mio sito i problemi sono principalmente nel div="box" e nel menù in basso. Il primo non contiene + verticalmente il testo quando si aumenta troppo la dimensione dei caratteri, nel secondo l'aumento delle dimensioni dei "bottoni" rende vano il posizionamento tramite i margini...

per il primo problema dovrei mettere una height=auto, il problema è che se il contenuto è troppo poco ottengo un sito che sembra schiacciato da una pressa e non si sviluppa abbastanza in verticale. Eè possibile inserire una altezza minima da mantenere o una specie di scroll bar, con un metodo tipo iframe per far si che la dimensione del box rimanga la stessa nonostante la dimensione del testo? La soluzione con la dimensione dei blocchi in em renderebbe anche la dimensione dei blocchi modificabile come per il testo, si manterrebbero le proporzioni ma non avrei più il controllo del layout?

per il secondo problema forse dovrei sostituire i bottoni fatti di testo, con bottoni fatti di immagini (alche il semplice testo reso gif, o forse posizionare diversamente gli oggetti ma visti i margini contenuti non credo che risolverei i problemi...

**Mich_** · 03-06-2008, 19:04

Ora ho un po' di fretta: rispondo solo in parte.

Per lo strict e` una scelta importante: se vuoi che il sito lavori in tutti i browser attuali ed abbia viata valida anche in futuro, la scelta e` sicuro per XHTML 1.0 Strict. La stessa scelta e` necessaria per una pubblica amministrazione (legge 4/04 - vedi riferim tra i "link utili").
Pero` i CMS che generano pagine strict sono pochi (ma esistono).

[i] e [b] dichiarano enfasi / importanza del testo, ma non sono legati alla visualizzazione: la stessa cosa si puo` ottenere con il tono di voce. Invece italico e bold non si possono rendere con strumenti diversi dalla visualizzazione.

Ho creato un nuovo <p class"data">

Credo che piu` corretto sia creare uno <span>: e` comunque una divisione interna al testo, ma non crea un oggetto di blocco.

Le <div> e i rtelativi <h> fanno parte del web semantico, se correttamente utilizzate.

Una tabella non e` adatta ad una lista: una tabella introduce un significato semantico di relazione di riga E di colonna: una tabella non e` adatta a contenere una lista.
Anche le liste introducono un significato semantico: proprio per questo vanno utilizzate.

Non e` qui il posto per una spiegazione del DOM (document object module). Comunque la parola "link" e` usata dal DOM, e non conviene quindi usarla per i nomi.

Per le dimensioni: un oggetto che contiene principalemente testo, specie se poco testo come in una lista, conviene definirne le dimensioni in em, che sono legate alla larghezza del font: in tal modo se ci sta una parola in un font e` molto probabile che ci stia anche inun altro font, qualunque ne sia la dimensione (del font, intendo).

E tieni presenti che esistono anche min-height, min-width, max-height, max-width: in IE6- occorre usare dei trucchi/hack per realizzarli, ma sono comodissimi specie per dare solidita` ad un layout chepre il contenuto sarebbe striminzito, o limitare un layout che in una finestra grande si perderebbe.

E ci sono esempi illustri di layout: alcuni sono citati nei "link utili". Ti conviene farti un giro.

**Teskio** · 03-06-2008, 23:10

OK, grazie mille, mi sembra che abbia abbastanza materiale su cui lavorare... se poi in futuro ripassi di qui e hai voglia e un po' più di tempo per approfondire alcuni dei concetti che mi hai accennato non potrei che essertene grato. Percepisco nei tuoi discorsi una "filosofia" del web che va oltre le FUNZIONI dei vari oggetti e attributi HTML-CSS, dritto all'ESSENZA. Sono cose che non ho trovato nelle varie guide ai CSS in cui a volte manca proprio il motivo dietro la scelta di un elemento rispetto ad un altro. Da questo punto di vista forse, il riuscire ad ottenere lo stesso risultato attraverso modi diversi risulta quasi un ostacolo ad un più consapevole utilizzo. Se tu o qualcun altro sa indicarmi dove trovo informazioni per capire e non solo conoscere meglio il CSS, passo al "fai da te" e vi rompo di meno

**Mich_** · 04-06-2008, 09:26

Hai ragione: e` una "filosofia".

Il razionale che ci sta dietro pero` e` molto solido.

Le pagine devono essere: usabili, accessibili, semanticamente valide.

Usabili significa che gli utenti devono trovare immediatamente le cose che cercano e non devono perdersi (in elementi inutili o in funzioni fuorvianti)

Accessibili: ognuno deve poter fruire dei contenuti della pagina, indipendentemente dallo strumento con cui accede alle informazioni. Questo comporta che una persona con qualche handicap (fisico o psichico) deve poter accedere alle informazioni. Il Web e l'informatica in genere devono aiutarci nella vita, non rendercela piu` difficile: le persone deboli (in qualsiasi modo) sono quelle che piu` hanno da guadagnare dal Web, se le pagine sono accessibili. Uno che per vari motivi non puo` uscire di casa puo` ottenere servizi tramite il Web ... ma se il Web non e` accessibile al cieco o a quello con difficolta` di movimento e` una beffa che si aggiunge al danno.

Semanticamente valido: il Web sta diventando sempre piu` automatico: cioe` vive di una vita parallela senza intervento diretto dell'Uomo. In tal modo e` ancora piu` utile proprio all'Uomo. Pensa ai motori di ricerca, o agli aggregatori: sono strumenti che "capiscono" le info, le "centrifugano" (permettimi questo paragone) e le forniscono su richiesta aggregate in modi diversi.
Ma uno strumento senza intelligenza ha bisogno che la semanca dei tag sia corretta: se metti
<h1> punto1</1><p class="bigger">l'importanza dell'essere</p>

...ecc. il resto del testo...</p>
Cosa puo` capire un "povero" motore? Quale e` la chiave principale che deve usare nella ricerca? La parola "punto"? Il numero uno? Un umano capisce subito che la parola chiave e` "essere", e se ci vede la nota perche` e` piu` grande, ma uno spider non riesce a dare ad "essere" il rango di titolo.

Nota che se usi correttamente una DTD strict tutto questo e` gia` fatto: solo l'accessibilita` necessita ancora di qualche ritocchino; in Italia la cosa e` prevista dalla legge e ci sono i 22 requisiti da seguire, che sono un valido aiuto (ricalcano grosso modo i checkpoints delle WCAG1).
Certo l'esperienza aiuta, ma per chi non ha esperienza le norme sono una guida essenziale.

Discussione: Un'anima pia che da uno sguardo al mio codice e mi dice se ci sono errori semantici?

Strumenti discussione

Ricerca discussione

Visualizza

Un'anima pia che da uno sguardo al mio codice e mi dice se ci sono errori semantici?

Permessi di invio