Tutorial/libro HTML/HTML orientato allo sviluppatore

Question

Sono uno sviluppatore di software che a volte scrive codice CSS/HTML. Attualmente sto lavorando su un'applicazione che richiede un layout html/css abbastanza complicato e credo di non capire abbastanza il layout di CSS/HTML per implementarlo. Quali libri e tutorial mi consiglieresti per migliorare le mie capacità?

P.S. Capisco la differenza tra elementi di blocco e inline, quali sono i float, ecc., Ma quello che mi manca è un quadro coerente di come funziona e di come eseguire il layout di elementi arbitrari in html/css.

P.P.S. Ho provato diversi libri prima e hanno entrambi un formato manuale di riferimento (come questo: http://www.amazon.com/Pro-CSS-HTML-Design-Patterns/dp/1590598040) o contengono informazioni che già conosco, ad esempio la maggior parte dei tutorial di base su w3schools, la maggior parte dei libri per manichini su Amazon, ecc. O ancora peggio sono designer orientata. Non ho bisogno di leggere i colori, ecc., Ho solo bisogno di imparare come fare il layout in HTML/CSS come faccio in Java/Swing o altri framework simili.

Answer 1

Lasciatemi prefazione affermando che preferisco per cercare materiale di riferimento on-line in base alle esigenze (devo conservare le mie conoscenze nel cloud) piuttosto che imparare a memoria un intero libro sulle proprietà dei CSS che potrebbe sembrare completamente fuori dal contesto; allo stesso tempo trovo più utile leggere in profondità teorie e guide di livello superiore, sia che si tratti di articoli di approfondimento o di libri.

Ti è stato fornito uno styleguide completo o forse anche alcuni prototipi e ora spetta a te trasformarlo in html + css? In questo caso io suggerirei

• Handcrafted CSS: More Bulletproof Web Design - prima di tutto, copre alcune delle tecniche più "alla moda" come il layout liquido e ti fa comodo con il concetto di degrado grazioso (il che significa che IE6 e FF10 dovrebbe non fornire la stessa esperienza). Questo ti fa risparmiare mal di testa e crepacuore nel lungo periodo - il mio era così popolare che un collega l'ha portato all'estero ... per otto mesi
• CSS: The Missing Manual e HTML, XHTML and CSS Bible - abbastanza approfondito e il materiale non è ancora stato superato. Suggerirei di leggere prima i float (molte stranezze a prescindere dalla precedente esperienza) e qualsiasi capitolo riempirebbe le lacune di conoscenza che tu ritieni di avere, se ce ne sono. Oltre a questo - usato come riferimento.
• Confortevole con concetti generali ma è necessario cercare una proprietà occasionale? Prima di tutto, w3schools sono malvagi - usa invece MDN. Non correlato: fantastico riferimento JS e CSS/HTML che stai attualmente cercando.
• Segnalibro quirksmode e caniuse in modo da non essere arretrato troppo quando un browser importante si rifiuta improvvisamente di rendere correttamente il codice cesellato.
• Strutture di ricerca che sono là fuori. I sistemi di griglia sarebbero un modo fantastico per risparmiare tempo se il design si adatta; completato con jQuery-UI o formalize avresti i timori comuni per te (guardandoti, forma i layout!).

Se si vuole scavare più a fondo e hanno una migliore comprensione dei principi di progettazione e concetti di usabilità dietro un prodotto di successo, o se siete ancora a venire con wireframe/pagina mockup ecc, bibliografia si espande:

• The Non-Designer's Design Book - se potessi revocarlo cento volte, lo farei.Niente acqua, capitoli facili da comprendere, attenzione ai concetti di base del design (contrasto, ripetizione, allineamento, prossimità) che finirebbero per contribuire a un sito web coerente o leggibile
• Vuoi ancora di più? Leggi Universal Principles of Design - ora ci spostiamo nel territorio del design "generale", ma la maggior parte delle idee sono trasferibili.
• Finisco la lista con Don't Make Me Think!: A Common Sense Approach to Web Usability che è esattamente quello.

E ricordate StackOverflow - se hai incontrato un problema, qualcuno probabilmente ha già risolto :)

Answer 2

vorrei suggerire di dare un'occhiata a questo tutorial

• https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css

Si tratta di un corso di 30 giorni HTML/CSS di Jeffrey Way, spiega tutto il necessario molto buona e in una bella modo e qual è il migliore, è gratuito (è necessario registrarsi per un account gratuito, attualmente nell'angolo in alto a destra).

Alternativa:

• http://www.quackit.com/html/tutorial/
• http://www.csstutorial.net/

Ma ci sono molte molte molte risorse per l'apprendimento html e css sul web.

Answer 3

Basta andare a leggere su come funziona il DOM (modello oggetto documento). La cosa più importante da sapere è che il codice html viene analizzato dall'alto verso il basso, ed è qui che la tua conoscenza degli elementi di posizione sarà utile. Costruire un layout sarà molto semplice con questo in mente, e anche se si tiene a mente una struttura a griglia. Leggi anche le migliori pratiche per l'accessibilità.

Ho letto anche alcuni buoni articoli tecnici/tutorial/etc sul sito IBM developerworks.

Tutto ciò che serve è su Google, penso che sia solo una questione di usare le parole chiave giuste :)

Answer 4

Se volete sapere come CSS lavoro layout. C'è un buon tutorial da google

http://code.google.com/edu/submissions/html-css-javascript/

& come hai detto che sei sapere che cosa è CSS. Quindi, è meglio imparare come evitare i comuni errori dei principianti. ci sono diversi articoli su questo.Ci sono pochi:

http://sixrevisions.com/css/12-common-css-mistakes-web-developers-make/

http://webdesignledger.com/tips/the-most-common-html-and-css-mistakes-to-avoid

http://www.designdetector.com/2006/06/ten-common-css-mistakes.php

Answer 5

preferisco libri di testo. Puoi usare le note post-it per mettere degli indicatori di pagina (puoi leggerli sul water!).

quanto a uno per i CSS - CSS The Missing Manual ho trovato abbastanza bene

HTML - I libri Nutshell (che ho sempre trovato bene) è un buon compromesso.

Answer 6

Tutto quello che volete sapere su HTML/CSS è in W3C

CSS Tricks also have some good reading material

Answer 7

Mi raccomando di leggere http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/.

Non è un piccolo articolo. È un articolo molto dettagliato e ben pensato, che descrive diversi aspetti del browser. Di seguito può interessare:

• Chapter 5 - Layout (soprattutto alla fine)
• Chapter 9 - CSS2 modello visivo (tutte le parti)