Nascita di una UX - ASafaWeb ottiene una parte dell'identità 2

Tornato in parte 1 di Nascita di una UX ho parlato di identificare gli stili che mi piaceva, la testa inizia il default MVC 3 modello che si dà, l'eterna lotta di Photoshop prima contro i CSS prima, azzera i CSS poi effettivamente una partenza in stile quello centrale elemento di ASafaWeb e rendendo ancora bel gioco tutti i browser. E questo era esso - uff!
Questa volta si tratta di debug del codice, la costruzione del nav e poi completamente cambiare idea su azzera CSS. Beh forse non del tutto , ma piuttosto capire un po 'di più su ciò che "reset" significa veramente e invece venuta la cosa da un angolo diverso, utilizzando un approccio di "normalizzazione", invece. Potrebbe suonare un po 'semantica, ma c'è una differenza importante filosofico.
Parlando di semantica, avremo anche una buona occhiata a cosa semantica significa in codice HTML. E 'un concetto molto importante che spesso viene frainteso così darò un riassunto qui.

Non uscire di casa senza Firebug

Uno strumento qualsiasi sviluppatore web che si rispetti è intimamente familiare è Firebug .Le 9 strumenti di sviluppo di IE sono in realtà molto buona, ma Firebug ha cinque anni e milioni di utenti sotto la sua cintura così rimane lo strumento più gente subito pensa.Vediamo in azione.
Una cosa che volevo fare in ASafaWeb è quello di ottenere il diritto nav fino alla parte superiore della pagina, piuttosto che seduto sotto l'intestazione. Commutazione intorno nel markup è abbastanza facile, ma non c'è chiaramente più a che fare:

Ora, posso iniziare a pesca a strascico attraverso i CSS e cercando di capire manualmente il motivo per cui non è seduto in cima alla pagina o posso fuoco fino Firebug e farlo mi dicono.Tutto quello che devi fare è evidenziare un elemento HTML nella sorgente e vedrò una visualizzazione dell'elemento in alto e il CSS applicato sulla destra:

Il clou turchese in cima l'immagine qui sopra mostra l'elemento che ha selezionato e la banda gialla sopra indica margine. Possiamo quindi vedere che il margine stesso rappresentato nel CSS in basso a destra dell'immagine. Non c'è niente di più facile di così!

Come semantico

C'è una partita che va in un nav. Certo, potrebbe sembrare solo una serie di link, ma c'è molto di più ad esso che quello. Per cominciare, diamo uno sguardo al markup:

< intestazione >
  < nav >
    < img src Contenuto ="../../ / Immagini / "SmallLogo.png alt = "ASafaWeb Logo" />
    < div id = "logindisplay">
      < ul id = "Accesso">
        < li > < uno href = "/ Account / Logoff"> Log off troyhunt </ uno > </ li >
      </ ul >
    </ div >
    < ul id = "menu">
      < li > < uno href ="/"> casa </ uno > </ li >
      < li > < uno href = "/ elmah.axd"> ELMAH </ uno > </ li >
      < li > < uno href = "/ Log"> Log </ uno > </ li >
      < li > < uno href = "/ Util / e-mail"> e-mail </ uno > </ li >
      < li > < uno href = "/ Home / Chi"> Chi ASafaWeb </ uno > </ li >
      < li > < uno href = "/ Home / Scansioni"> panoramica Scansioni </ uno > </ li >
    </ ul >
  </ nav >
  < div id = "title">
    < h1 > Analizzatore di sicurezza automatica per i siti web ASP.NET </ h1 >
  </ div >
</ intestazione >

Non preoccuparti per il visual design ancora, che è priva di conseguenze per il markup. Ci sono alcune cose degne di nota nel codice di cui sopra. Tanto per cominciare, non è proprio il mio markup perché per la maggior parte, è proprio quello che si ottiene in default ASP.NET MVC 3 modello. Che bello questo proposito è che è semanticamente corretto. Ecco cosa voglio dire con questo:

Semantic HTML, o "semanticamente corretto HTML", è HTML dove i tag usati per strutturare il contenuto sono selezionati e opportunamente applicati al significato del contenuto.

Questo è dal Introduzione alla semantica HTML messaggio sopra sul Web Design dal sito di Gratta e qual è il suo dire è che i tag HTML in realtà hanno significato . Quindi cerchiamo di guardare indietro fino alla marcatura sopra e in particolare due comandi che potrebbero sembrare del tutto nuovo a voi:

1. L' elemento di intestazione rappresenta un gruppo di aiuti di introduzione o la navigazione.
2. L' elemento nav rappresenta una sezione di una pagina che si collega ad altre pagine o parti all'interno della pagina.

Ok, questo sembra piuttosto auto-esplicativo, ma questo è il punto ! HTML 5 non solo ha dato un sacco di nuove caratteristiche funzionali, ma fornisce anche un sacco di nuova semantica. E non importa se un browser più vecchio non capisce l'intento semantico, ma sarà solo il rendering del contenuto e applicare qualsiasi pre-definiti preset CSS contro di essa. Nizza.
L'altra cosa è - e siamo ancora sulla semantica qui - è che i link appaiono come voci di elenco all'interno di una lista non ordinata. Perché? Perché questo è esattamente quello che un nav è - una serie di link in cui l'ordine è (di solito) poco importante. Certo, potremmo semplicemente gettare un po 'di tag di collegamento ipertestuale alla pagina, ma questo non implica intenti.
Quindi, pensare a quello che è appena il markup ci sta dicendo, e non solo noi, ma il browser come bene, sappiamo che c'è un colpo di testa che implica che questo non è realmente contenuto del corpo, piuttosto qualcosa che calcia solo la pagina di. Sappiamo che all'interno vi si possono trovare alcuni di navigazione e che l'ordine di esso non è importante. Infine, sappiamo che ci sono una serie di articoli con link all'interno che la navigazione. Possiamo dire tutto questo senza vedere alcun rendering del browser, perché il markup ci dice questo tramite il suo intento semantico.
Ma non è solo HTML 5 che implica intento semantica, ecco un altro esempio classico: testo corsivo. L'idea di HTML semantico è quello di descrivere l'intento , piuttosto che realizzazione visiva. L'intento grammaticale del testo in corsivo è di fornire enfasi - corsivo è in realtà solo la rappresentazione visiva di questo. Ciò significa che un tag <i> è veramente uso improprio e si dovrebbe invece utilizzare un tag <em>. Allo stesso modo un tag <b> deve essere sostituito per un tag <strong> come lo descrive intento, piuttosto che di visualizzazione. Ci sono alcuni dettagli su questo nel post intitolato La i, b, em, e forti elementi sopra sul sito web HTML 5 medico.
Un commento finale sulla semantica semplicemente perché è un piccolo cruccio: l'intento semantica di una tabella è quello di contenere dati in formato tabella . Dalla definizione delle tabelle del W3C :

Il modello di tabella HTML consente agli autori di sistemare i dati - testo, testo preformattato, immagini, link, moduli, campi modulo, altre tabelle, ecc - in righe e colonne di celle.

E non è - ripeto - non è destinato al layout delle pagine (sottolineatura mia):

Le tabelle non dovrebbe essere usato solo come un mezzo per contenuti layout del documento

E:

gli autori dovrebbero usare i fogli di stile per controllare l'impaginazione piuttosto che sulle tabelle

Se si sta utilizzando tabelle per il layout delle pagine, lo stop, basta fermarsi proprio ora .Andate a dare un'occhiata al CSS Zen Garden e prendere solo un po 'di tempo per imparare a tracciare un pagina in modo corretto perché si sta facendo in modo inequivocabile sbagliato!

Bye bye resetta CSS, ciao normalizzazione CSS

Ah, non si fa solo l'amore a lavorare sul progetto e avere la propria autonomia per avviare la copia roba e girando le cose sulla loro testa quando non ti piace? :) Tornato a parte 1 ho applicato un ripristino CSS da Eric Meyer con l'obiettivo è quello di portare tutti i visitatori in linea con una rappresentazione comune di HTML e CSS. Buon piano, ma sembra che ci siano un paio di modi di andare su questo e il concetto di un reset CSS è in realtà un po 'diversa da quella di normalizzazione CSS.
Lasciatemi dimostrare; nell'immagine seguente vedrete che l'attuale "Chi ASafaWeb" pagina assomiglia senza CSS sotto qualsiasi forma:

Va bene, più o meno quello che ci si aspetterebbe. Ora vorrei applicare il reset CSS:

Whoa - WTF?! Vedete, quello che non riusciva a rendersi conto in prima è che il reset è stato effettivamente stripping il rendering predefinito di tag. Il motivo per cui non si erano accorti questo è che avevo buttato le definizioni ripristinare la parte superiore del CSS esistente dal default ASP.NET MVC 3 modello che passa poi a ridefinire un sacco di questi valori di default. E che, come allora ho imparato, è una specie di punto di un reset, le cose striscia giù per il metallo poi definire da zero. E 'un modo molto esplicito di lavorare.
Ora rimuovere il reset e si applicano normalize.css (ho evitato di rinominandolo normalise.css!) E vediamo come stanno le cose:

Ok, ora siamo quasi nuovo al comportamento predefinito. I proiettili elemento lista sono stati rimossi e il margine è passato dal corpo. Oh, e tutto ciò che ora è un sans-serif ma a parte questo siamo abbastanza molto indietro al comportamento del browser predefinito. E questo è davvero il punto - normalize.css conserva la maggior parte delle impostazioni predefinite eallinea il comportamento tra i browser. Naturalmente non possono entrambi conservare tutti i comportamenti ed essere del tutto coerente o non servirebbe a nulla così qualcosa deve dare in alcuni browser in termini di deviazione da quello predefinito.
Personalmente preferisco questo approccio, perché penso che i principi fondamentali, come intestazioni di essere più grande e più forte rispetto ai paragrafi è una cosa abbastanza intuitivo da fare. Certo, i sostenitori di entrambe le suggeriscono utilizzando ogni come punto di partenza e poi da lì personalizzazione normalize.css ma sembra proprio essere meglio allineato l'intento originario di rendering del browser. L'altra cosa che mi piace è questa:

/ *
 * 1. Corregge il ridimensionamento del testo stranamente in IE6 / 7 quando il corpo di font-size è impostata utilizzando em unità
 * Http://clagnut.com/blog/348/ # c790
 * 2. Mantiene pagina centrato in tutti i browser, indipendentemente dall'altezza del contenuto
 * 3. Impedisce la dimensione del testo IOS regolare dopo il cambiamento di orientamento, senza disabilitare zoom utente
 *
 * /

html {
     font-size : 100% ; / * 1 * /
     overflow-y : scroll ; / * 2 * /
     -webkit-text-size-adjust : 100% ; / * 3 * /
     -ms-text-size-adjust : 100% ; / * 3 * /
 }

/ *
 * Indirizzi margini gestito in modo errato in IE6 / 7
 * /

corpo {
     margine : 0 ;
}

/ * 
 * Indirizzi font-family incoerenza tra 'textarea' e altri elementi del modulo.
 * /

corpo ,
 pulsante ,
 ingresso ,
 selezionare ,
 textarea {
     font-family : sans-serif ;
}

Si vede che? Un sacco di bella di feedback descrittivo come specificamente ciò che ogni definizione dello stile è l'impostazione di fare. Mi piace la natura esplicita di come questo file è stato commentato sia perché è un po 'educative e penso che renderà la vita molto più semplice in seguito, se trovo un problema tecnico. E 'anche chiaro dalla storia delle revisioni Github che gli stili sono in costante evoluzione e (presumo) rispondere alle nuove idiosincrasie nei browser. Ci si sente proprio come un approccio più approfondito rispetto al reset.

Costruire una navigazione

Passando alla navigazione ASafaWeb, ho voluto andare con qualcosa di discreto, con la messa a fuoco in modo chiaro rimanente sul contenuto della pagina. Il nav in questa applicazione ha un bassissimo-chiave ruolo e le funzioni principali del sito sono tutti abbastanza grandi e in grassetto sulla pagina. In realtà, la maggior parte di ciò che si vede nel nav nella immagine qui sotto è per scopi amministrativi modo che gli utenti finali non saranno in ogni caso si incontrano.

Si tratta di un nav abbastanza vaniglia per ora e sto riservandosi il diritto di cambiare totalmente la mia mente! Ma quello che mi piace è che è discreto in posizione, dimensioni e colori. C'è un po 'di varietà gettato nella mischia una volta che gli stati di rollover emergere ma per la maggior parte è molto discreto.
Ciò che è non è chiaro dall'immagine qui sopra è che anche le scale bene. Il testo "Log off troyhunt" galleggia verso il bordo destro e le voci sul nav a sinistra. Parlerò di più su larghezze di contenuti e avvolgente nella parte successiva della serie.

Riassunto

Ho passato un bel po 'di tempo gingillarsi con stabilire linee di base prima con il reset CSS e poi con normalize.css. Si può sentire un po 'controproducente a volte, ma è il tipo di lavoro fondamentale che può salvare mal di testa in seguito quando le cose sono più complesse e di problemi. Tempo ben investito IMHO.
Quindi è lento e costante, la crescita organica per ASafaWeb in questa fase. Il prossimo post sarà entrare in uno dei problemi più grandi del biglietto se il layout (disegno larghezza fissa rispetto al variabile e anche la tipografia), quindi le cose dovrebbero iniziare a sentirsi un po 'più coesa dopo.


Corso Visual Studio - Corsi Visual Studio
Corso .Net- Corso Dot.Net - Corso Vb.net
Corso C# - Corso PHP - Corso Joomla