Quando Pages Are Not Paper: the Designer's Guide to Layout Code
Le caselle di InDesign sono semplici come fare clic e trascinare. I livelli di Photoshop consentono ai pittori di colorare i pixel ovunque preferiscano. Ma il layout con HTML e CSS è un gioco di nudging e cascading.
Succede ogni giorno: i direttori artistici esperti di Photoshop prendono in giro i progetti, affinando la loro spaziatura, scegliendo accuratamente i caratteri e i colori appropriati. Consegnano il loro lavoro a uno sviluppatore desideroso di HTML, che annuncia che il design impiegherà probabilmente giorni per trasformarsi in HTML / CSS funzionanti. Peggio ancora, apporteranno modifiche per tenere conto delle diverse dimensioni dello schermo. Il tempismo è un mistero per entrambe le parti. Ci vorrà lo sviluppatore un'ora o una settimana per trasformare il loro PSD in HTML / CSS funzionante?
I fondamenti del layout web - il possibile, il pratico, le possibilità - sono facili da comprendere. Come il design stesso, la comprensione dei principi aiuterà qualsiasi progettista a realizzare progetti migliori e ad accelerare il processo di costruzione di un sito.
Gli elementi di blocco si impilano, gli elementi in linea scorrono
Tutto in una pagina web, dai paragrafi alle immagini ai collegamenti al testo in grassetto, risiede in riquadri invisibili. Queste scatole sono disponibili in due varianti: blocco e in linea. La differenza tra inline e block sta nel loro comportamento.
Gli elementi di blocco sono rettangoli. Amano riempire lo spazio orizzontale.
Gli elementi in linea sono rettangolari, tranne per il fatto che possono essere avvolti.
Gli elementi di blocco si impilano uno sopra l'altro. A meno che non sia detto diversamente, occupano tutto lo spazio orizzontale possibile, spingendo tutto intorno a loro su o giù. Per la progettazione, gli elementi di blocco sono lo strumento di layout principale.
Gli elementi in linea si basano sulla formattazione del testo. Non interrompono il flusso del testo e le loro dimensioni si espandono per adattarsi al loro contenuto. Dire un elemento in linea per mantenere una larghezza di 200 pixel non funzionerà. Riempiendolo con il testo lo farà.
Di default, ogni elemento nel è un elemento in linea o di blocco. I progettisti possono cambiare la loro natura con un piccolo CSS, ad esempio trasformando una pila di elementi della lista (blocchi nativi) in una riga o una serie di collegamenti orizzontali (inline nativamente) in una pila verticale. Ciò significa che qualsiasi elemento visibile può essere usato per il layout. Se dovrebbero dipendere dal layout in questione.
Gli elementi di blocco nativi includono:
divisioni
I paragrafi
elenchi
Articoli in una lista
Titoli -
tabelle
Blocca citazioni
Organizzatori in HTML5 , , , , e
Il corpo stesso
Gli elementi incorporati includono:
Ancore (collegamenti ipertestuali)
Grassetto e
Corsivo e
immagini
citazioni
Digitare lo stile
Formare etichette
Sta a te
Tag comuni che non sono né block né inline:
Il titolo del documento </code></li><li> Meta tags <code><meta></code></li><li> Tag di script <code><script></code></li><li> Link tags <code><link></code></li></ul><p> A prima vista, l'adattamento alla mentalità di tipo lego sembra controintuitivo in un mezzo che consente gradienti, curve e layout elastici. Ma l'idea di tutto come un mattone è cruciale per capire dove il contenuto e la presentazione si incontrano. </p><p> Linea guida: ogni coppia di tag (o tag standalone come <code><img></code> ) nel corpo rappresenta una scatola. </p><p class=clearrow></p><h2> Usare i blocchi per il layout </h2><p> Elimina una cornice di testo in InDesign e la foto adiacente non si sposterà perché nessuna delle due posizioni si affida all'altra. Applica le curve su un livello di Photoshop e nessun altro livello cambierà in quanto le curve influiscono su un livello alla volta. Ma cancella un elemento in HTML, e ogni cosa dopo quell'elemento probabilmente cambierà. I blocchi di una pagina Web vengono raggruppati nell'angolo superiore sinistro del contenitore, ad esempio il <code><body></code> o un altro blocco. </p><p> Tutto il layout web è realizzato con elementi di blocco. I progettisti usano i blocchi, il più delle volte <code><div></code> elementi, per creare aree rettangolari in cui tutto il contenuto si adatta. Ci sono solo quattro regole: </p><ul class=tight_list><li> Larghezza totale: lo spazio che un elemento occupa <em>e</em> influenza. </li><li> Float: modifica della tendenza dei blocchi allo stack. </li><li> Chiaro: Riattivazione di pile. </li><li> Nido: gli elementi si trovano l'uno dentro l'altro o no. Non c'è a metà strada. </li></ul><p> Ogni regola ha avvertenze ... ma nessuna è richiesta per assemblare una pagina. </p><p> (Gli esperti di CSS riconosceranno che queste regole si applicano agli elementi con posizionamento relativo. Il posizionamento assoluto è un animale diverso e meno comune). </p><h3> 1. Larghezza totale = scatola e buffer </h3><p> La larghezza totale è la quantità di spazio orizzontale occupata da un blocco. Questo include il margine, il bordo e il riempimento del blocco. Nel linguaggio di stampa, il margine e l'imbottitura sono tipi di grondaie. Ma a differenza dello spazio negativo tradizionale, creato spingendo le scatole a parte, il padding e il margine fanno parte di una scatola. Sono come crenare per gli elementi di layout. </p><p> Calcolare larghezza, riempimento e margine è spesso il più grande mal di testa per i progettisti, ma le restanti regole sono un po 'più semplici. </p><h3> 2. Il galleggiante fa scontrare i blocchi dalla pila </h3><p> Floating spinge un elemento di blocco a sinistra o a destra, rimuovendolo dalla pila naturale. Quando un blocco fluttua, fa spazio a tutto ciò che si trova al di sotto di esso per sollevarsi attorno al suo altro lato. </p><div class=article-large-block><img class="img-responsive aligncenter center-block" title="boxmodel-floating-vs-non" alt="Float versus not" src="https://odwebdesign.net/uploads/d/09/cf/when-pages-are-not-paper-the-designers-guide-to-layout-code_2.png" width=615 height=288></div><p> Le colonne sorgono quando una serie di blocchi galleggia l'una vicina all'altra. </p><h3> 3. Compensazione: consente ai progettisti di organizzare una pagina sia orizzontalmente che verticalmente </h3><p> Uno sfortunato effetto collaterale del floating è il suo impatto sul container. Un contenitore crescerà verticalmente per adattarsi al suo contenuto, ad eccezione di quelli che galleggiano. Se tutto galleggia, la scatola non ha altezza. Qualunque cosa al di sotto si alza sotto gli oggetti fluttuanti. Segue il caos. </p><p> La cancellazione ripristina la tendenza naturale dei blocchi a impilare. In effetti, ricorda a un contenitore che ha qualcosa da contenere. Senza compensazione, i progettisti non possono organizzare una pagina sia orizzontalmente che verticalmente. </p><div class=article-large-block><img class="img-responsive aligncenter center-block" title="boxmodel-bisogno-di-chiara" alt="Need to clear" src="https://odwebdesign.net/uploads/7/58/b3/when-pages-are-not-paper-the-designers-guide-to-layout-code_3.png" width=615 height=288></div><h3> 4. Nesting </h3><p> L'annidamento è semplice: ogni blocco deve risiedere completamente in un altro blocco. Nessun blocco può estendersi mai al di fuori dei suoi limiti senza conseguenze gravi e non possono sovrapporsi parzialmente due blocchi. </p><p class=clearrow></p><h2> Le colonne devono andare bene, altrimenti </h2><p> Questo è dove i progettisti devono eseguire un po 'di matematica. Per adattare le colonne correttamente, la somma delle loro larghezze totali deve essere inferiore alla larghezza del loro contenitore. </p><p> Le colonne sono una serie di elementi di blocco che spingono a sinistra o, in occasioni più rare, a destra. Se queste colonne sono troppo larghe per il loro contenitore, senza tecniche speciali l'ultima colonna cadrà al di sotto delle altre. </p><p> Un layout semplice potrebbe usarne tre <code><div></code> elementi per creare un layout a due colonne: </p><p><code><div id="container"><br /> <div id="main-content"><br /> …<br /> </div><br /> <div id="sidebar"><br /> …<br /> </div><br /></div></code></p><div class=article-large-block><img class="img-responsive aligncenter center-block" title="boxmodel-div-to-non-fit" alt="Divs to not fit" src="https://odwebdesign.net/uploads/7/a0/8a/when-pages-are-not-paper-the-designers-guide-to-layout-code_4.png" width=615 height=400></div><p> In alto, l'esempio di sinistra usa questo CSS: </p><p><code>#container { width: 1000px; }<br />#main-content { width: 600px; padding: 20px; }<br />#sidebar { width: 340px; padding: 10px; }</code></p><p> Il contenitore misura 1000 pixel di larghezza. Il blocco del contenuto principale è largo 640 pixel - larghezza 600 + 20 pixel di imbottitura su ciascun lato. Il blocco della barra laterale è largo 360 pixel - 340 larghezza + 10 pixel di imbottitura su ciascun lato. (600 + 20 + 20) + (340 + 10 + 10) = 1000. Una vestibilità perfetta. </p><p> Nell'esempio a destra, tuttavia, qualcosa è troppo ampio. Potrebbe essere il riempimento della colonna o le stesse larghezze della colonna. Forse il contenitore è troppo stretto. La modifica di uno qualsiasi di questi fattori per rendere il contenitore più largo rispetto alle colonne risolverebbe il problema. </p><p class=clearrow></p><h2> Le eccezioni richiedono più codice; l'uniformità richiede meno </h2><p> A differenza dei media visivi tradizionali, come la scultura o il disegno grafico, la scrittura del codice richiede una forte immagine mentale di ciò che farà il codice. </p><p> Alcuni aspetti della progettazione per codice sono ovvi. I disegni semplici spesso usano meno codice rispetto a disegni complessi. Se la soluzione a un problema di progettazione richiede che ogni widget, colonna e parte di testo abbiano il proprio colore di sfondo, così sia. Richiede solo più codice. </p><ul class=tight_list><li> Se un pezzo di testo è più grande di altri, allora ha bisogno di una propria voce nel file CSS. </li><li> Se due colonne hanno larghezze diverse, il file CSS dovrebbe specificare le larghezze per ciascuna. </li><li> Se un progetto richiede tre tipi di punti elenco, il CSS richiede tre definizioni. </li></ul><p> Un fatto meno ovvio di design-by-code è che è ... meno ovvio. L'immaginazione e l'esperienza sono particolarmente necessarie nella programmazione del layout di pagina, in cui la modifica del margine di una colonna avrà un impatto sui suoi vicini. Nella transizione dalla stampa al web design, non riuscendo a immaginare il risultato incastrano nuovi sviluppatori. </p><p> Non quello <code>color:blue</code> è difficile da capire. Ma una cosa è scrivere <code>div { background: url(photo.jpg) top left no-repeat; }</code> e un altro per vedere una foto nel contesto della pagina. </p><p> Fortunatamente, alcune analogie facilitano la curva di apprendimento. </p><ol><li> <strong>Pensa che i CSS funzionano interamente con gli stili di paragrafo.</strong> Alterare un oggetto al volo è ingombrante. Il CSS funziona meglio se applicato a un'intera classificazione di immagini o parole (da qui l'attributo "classe" in HTML). </li><li> <strong>Immagina di visualizzare un quarto di pagina alla volta.</strong> In qualsiasi momento, gli utenti vedono solo una parte di una pagina Web perché la maggior parte delle pagine Web è più grande della finestra media del browser. Gli utenti finali vedono solo un pezzo alla volta. La "piega" si verifica su tutti e quattro i lati del browser. </li><li> <strong>Chiediti "cosa succede se ogni elemento è raddoppiato in quantità?". I</strong> buoni disegni presentano bene il contenuto al momento del lancio. I grandi progetti web continuano a farlo. I modelli di articoli devono contenere articoli di diversa lunghezza. I gestori di contenuti rimuovono il vecchio testo o aggiungono nuove foto che non sono conformi alle proporzioni pianificate. I clienti decidono di volere i loro cinque tweet più recenti sulla home page. Nessuno sa come un sito possa cambiare, ma pianificare una quantità diversa di tutto è una buona precauzione. </li></ol><p class=clearrow></p><h2> Andando avanti </h2><p> I vantaggi di comprendere il layout Web sono sapere cosa è possibile, prevenire le insidie più comuni e tempi di sviluppo più rapidi. Ma imparare a progettare con HTML / CSS in mente richiede un cambiamento nel modo di pensare. Sistemi CSS come <a src="<!-- not_img -->http://960.gs/" class=external rel=nofollow>il sistema Grid 960</a> </a> <a src="<!-- not_img -->http://960.gs/" class=external rel=nofollow>ridurre al minimo il lavoro tecnico richiesto, facilitando la transizione dal lavoro di pixel puro al codice.</a> <a src="<!-- not_img -->http://960.gs/" class=external rel=nofollow>Ma come imparare qualsiasi lingua, lo strumento migliore può essere la persistenza.</a> </p><p class=clearrow></p><p> <em><strong>Cosa ti dà più problemi nel trasformare i mockup in HTML e CSS funzionanti?</strong></em> <em><strong>Condividi le tue esperienze e soluzioni nei commenti qui sotto.</strong></em> </p><p> <em>Thumbnail</em> <em><a href="http://www.shutterstock.com/pic-79732636/stock-photo-abstract-image-of-cubes-background-in-blue-toned.html" class=external rel=nofollow></em> <em>via Shutterstock</em></a></p>
<div class="bootstrap-tagsinput">
<span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/web-design/">web design</a> </span>
<span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/disposizione/">disposizione</a> </span>
<span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/sistema-a-griglia-960/">Sistema a griglia 960</a> </span>
<span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/elementi-di-blocco/">elementi di blocco</a> </span>
<span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/modello-di-scatola/">modello di scatola</a> </span>
<span class="tag label label-info"><a href="https://it.odwebdesign.net/tag/galleggiante/">galleggiante</a> </span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="pager">
<li class="previous"><a href="https://it.odwebdesign.net/creating-a-modal-window-with-html5-and-css3/">← Creazione di una finestra modale con HTML5 e Amp; CSS3</a></li>
<li class="next"><a href="https://it.odwebdesign.net/vintage-effects-for-your-images-with-html5/">Effetti vintage per le tue immagini con HTML5 →</a></li> </ul>
</div>
</div>
</div>
<div class="col-md-3">
<aside class="col-lg-12 side-bar col-md-12">
<ul class="nav nav-tabs">
<li class="active"> <a data-toggle="tab" href="#latest" role="tab">Recente</a> </li>
<li> <a data-toggle="tab" href="#popular" role="tab">Il migliore</a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content sidebar-tabing" id="nav-tabContent">
<div class="tab-pane active" id="latest" role="tabpanel">
<div class="media"> <a href="https://it.odwebdesign.net/40-useful-apis-for-web-designers-and-developers/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://it.odwebdesign.net/40-useful-apis-for-web-designers-and-developers/">40 API utili per Web designer e sviluppatori</a>
</div>
</div>
</div>
<div class="media"> <a href="https://it.odwebdesign.net/css-buttons-tutorials-and-examples/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://it.odwebdesign.net/css-buttons-tutorials-and-examples/">Pulsanti CSS: esercitazioni ed esempi</a>
</div>
</div>
</div>
<div class="media"> <a href="https://it.odwebdesign.net/20-fantastic-pseudo-flash-websites/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://it.odwebdesign.net/20-fantastic-pseudo-flash-websites/">20 fantastici siti Web Pseudo-Flash</a>
</div>
</div>
</div>
<div class="media"> <a href="https://it.odwebdesign.net/whos-going-to-save-the-world-wide-web/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://it.odwebdesign.net/whos-going-to-save-the-world-wide-web/">Chi sta per salvare il World Wide Web?</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="popular" role="tabpanel">
<div class="media"> <a href="https://it.odwebdesign.net/how-to-use-html-css-style-tiles-to-kickstart-your-design/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/7/ab/9e/how-to-use-html-css-style-tiles-to-kickstart-your-design_ors.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://it.odwebdesign.net/how-to-use-html-css-style-tiles-to-kickstart-your-design/">Come utilizzare le tessere di stile HTML e CSS per avviare il tuo progetto</a>
</div>
</div>
</div>
<div class="media"> <a href="https://it.odwebdesign.net/how-to-get-started-with-css-shapes/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/4/78/da/how-to-get-started-with-css-shapes_ors.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://it.odwebdesign.net/how-to-get-started-with-css-shapes/">Come iniziare con le forme CSS</a>
</div>
</div>
</div>
<div class="media"> <a href="https://it.odwebdesign.net/3-cool-css3-image-hover-effects/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/f/6d/c6/3-cool-css3-image-hover-effects_ors.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://it.odwebdesign.net/3-cool-css3-image-hover-effects/">3 fantastici effetti al passaggio del mouse sull'immagine CSS3</a>
</div>
</div>
</div>
<div class="media"> <a href="https://it.odwebdesign.net/css-you-can-get-excited-about-in-2015/"> <img class="pull-left" src="https://odwebdesign.net/uploads//titles/1/9c/5c/css-you-can-get-excited-about-in-2015_ors.jpg" alt=""></a>
<div class="media-body">
<div class="title-small-sidebar">
<a href="https://it.odwebdesign.net/css-you-can-get-excited-about-in-2015/">CSS che puoi entusiasmare nel 2015</a>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
<footer class="footer-bs">
<div class="row">
<div class="col-md-3 footer-brand animated fadeInLeft">
<img src="https://it.odwebdesign.net/img/logo1n.png">
</div>
<div class="col-md-9 footer-nav animated fadeInRight">
<ul class="list">
<li><a href="https://it.odwebdesign.net/category/freebies/">omaggi</a></li>
<li><a href="https://it.odwebdesign.net/category/interactive-design/">Design interattivo</a></li>
<li><a href="https://it.odwebdesign.net/contact_us/">Contattaci</a> </li>
</ul>
<br>
<h4>OdWebDesign.Net</h4>
</div>
</div>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//odwebdesign.net/";
_paq.push(["setTrackerUrl", u+"piwik.php"]);
_paq.push(["setSiteId", "470"]);
var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0];
g.type="text/javascript"; g.async=true; g.defer=true; g.src=u+"piwik.php"; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Piwik Code -->
</footer>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
</body>
</html>
