Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML
Webdesign

Sviluppo per Progettisti: comprendere il front-end

by
Length:MediumLanguages:

Italian (Italiano) translation by Marco Calcanti (you can also view the original English article)

Nel corso di questo articolo faremo un grande salto nello sviluppo front-end e vedremo come si adatta alla nostra immagine più ampia. Ecco che cosa stiamo andando a coprire:

  1. Comprendere lo stack di front-end
  2. Limitazioni del DOM
  3. Considerazioni
  4. Comprendere eventi, stati e risposte

Comprendere lo Stack di front-end

Interpretazione di siti web possono essere piuttosto un compito. Con una miriade di dispositivi, browser, punti di accesso, larghezze di banda, ambienti e linguaggi di programmazione, la creazione di esperienze web coerenti può essere difficile. Grazie al browser e un organismo di standardizzazione (il W3C) abbiamo alcuni pilastri in atto per dare controllo ove possibile; Tali pilastri sono HTML, CSS e JavaScript.

Combinato, ci riferiamo a questi pilastri come lo stack di front-end. Ogni linguaggio ha il proprio scopo, e gli sviluppatori spendono un sacco di tempo per fare in modo che essi non offuschino le linee di ciascuno come essi possono amalgamarsi a vicenda. Così, vediamo la base qui. I browser moderni, che sono disponibili in commercio: il bello del calibro di Edge, Chrome, Safari e Firefox possono comprendere solo HTML, CSS e JavaScript. Ecco, i tre linguaggi. Con l'eccezione di Javascript, HTML e CSS sono linguaggi statici dichiarativi. Con questo voglio dire che non necessariamente "programma" in una di esse come non c'è nessuna logica reale per scrivere (con alcune eccezioni). JavaScript, che è stata esplodendo in mai angolo di internet negli ultimi anni è, tuttavia, un linguaggio di programmazione.

Quando ho cercato di spiegare lo Stack di front-end agli studenti in passato, ho sempre trovato utile per fare riferimento il corpo umano. Considerando che stiamo parlando all'interno del contesto del Design Atomic, questo trasporta casualmente la mia metafora oltre!

Un corpo, ieri

HTML: Hyper Text Markup Language

HTML è il tuo scheletro. Determina la struttura e la postura. Un certo grado di significato può essere derivato da tale struttura. La testa viene sempre per prima, gabbia toracica, fianchi, gambe, collo, piedi, tutto il resto verso le vostre falangi.

HTML, ew

L'ordine degli elementi che ho appena descritto è il tuo umano tipico. Potrebbe essere diverso per una balena o una tigre. Così, HTML può essere diverso per i Blog, negozi di commercio o piattaforme. HTML è tutto di significato, e descrive a un browser web in modo significativo che una pagina è circa. È diventato piuttosto una scienza di ritardo come algoritmo di Google essenzialmente legge questa struttura e derivata da essa ciò di cui è composta effettivamente la pagina.

Da asporto: Tenete a mente che HTML fornisce una struttura per la vostra esperienza web.

CSS: Foglio di stile a cascata

CSS è come lo si vede. Colore dei capelli, colore degli occhi, il tono della pelle, unghie punta muscoloso, Peloso, lunghe braccia, lunghezza ecc. È anche il modo che è lo stile i capelli o il trucco che si mette su per farti guardare come te.

Il suo unico scopo è quello di stilizzare quello che altrimenti sarebbe HTML molto semplice e noioso. Se fossimo rimasti tutti appena intorni ai nostri scheletri, l'attrazione sarebbe un problema. Lo stesso vale per esperienze web.

JavaScript

JavaScript è la tua maniera e interazioni. Nulla da cliccando le nocche, a lampeggiare, sorridente, tosse, il modo di camminare, se si decide di ignorare o non, si tratta di interattività. La cosa importante da ricordare su JavaScript è che quando Chiudi il tuo browser è tutto dimenticato (in generale), così possiamo pensare che sia l'interattività di un sito Web che sta avvenendo mentre sei in una "sessione" o interagendo attivamente con il sito Web di JavaScript. Pensare di fare clic su popup o navigazione menu a discesa.

Si tratta di qualcuno che cammina

Alcuni di voi a questo punto potrebbero chiedere dove si trovi il cervello o la "logica", ma ci arriveremo. La cosa più importante da prendere fuori da questa sezione è che vivere di HTML, CSS e JavaScript nel browser, lavorano insieme per creare un'esperienza web "statica" che poi possiamo riprendere di nuovo al Design Atomic da perfezionare.

Limitazioni del DOM

È l'acronimo DOM Document Object Model. Il DOM è il risultato vivente di HTML, CSS e JavaScript che coesistono in una sessione attivata dall'utente.

Perché il DOM è una rappresentazione vivente del codice sorgente, è importante capire che ha limitazioni. Il codice che scritto in HTML, CSS e JavaScript file sul tuo computer è noto come codice sorgente. Questa fonte imita molto da vicino quello che si vede nel DOM, ma non è la stessa cosa. Il DOM è il post-prodotto della manipolazione e delle regole di confronto di questi file riempito con codice sorgente. Quando questi file sono richiesti da un browser le lingue vengono "interpretate" e una pagina o un sito Web è generata. Se si modifica il codice sorgente, la rappresentazione di tali file di origine deve essere aggiornata al fine di mostrare la versione aggiornata del browser.

Ogni linguaggio ha le proprie limitazioni. CSS, per esempio, non ha un motore di layout particolarmente forte. Ciò significa che può essere piuttosto un processo per generare layout complessi nel browser. HTML non ha alcuna funzionalità di layout ed è solo in grado di fornire una struttura e una gerarchia per il sito Web per essere capito. JavaScript, essendo un linguaggio di programmazione, ha la capacità di manipolare HTML e CSS. Dovuto al fatto che usiamo una pila di tre strati per la creazione di front-end di qualsiasi sito Web specificato, hanno tutti bisogno di giocare bene tra loro, come pure sono conformi con alcuni parametri extra. Nel nostro caso, questi parametri si riferiscono a diversi browser, dispositivi, sistemi operativi, versioni di browser e altro ancora. Il DOM è più o meno lo stesso in tutti i tipi di browser e distributori, ma a causa di questo ci sono un sacco di regole da rispettare al fine di creare un'esperienza coerente.

Considerazioni

CSS si avvale di un concetto chiamato il Box Model. Il modello Box comprende le seguenti proprietà:

  • Contenuto: l'area del contenuto effettivo, pieno di testo forse.
  • Padding: imbottitura extra che circonda l'area del contenuto e aumenta lo sfondo.
  • Border: un confine, oltre l'imbottitura.
  • Margin: spinge la forma in sé da altri elementi.

Ecco un diagramma che spiega un pò meglio.

Piccole scatole, su una collina

Quando si progetta una forma come una piazza, il bene immobile che occupa comprende gli elementi di cui sopra.

"Le probabilità non sono mai a tuo favore"

Sì, cinque griglie di colonne non fanno ben sperare per gli sviluppatori. È generalmente più facile lavorare con evens rispetto odds. Gli sviluppatori tendono a utilizzare Framework di front-end come Bootstrap o UIKIT dotate di griglie pre-calcolate contenente dieci colonne, dodici colonne o forse più. È un'ottima idea per chiedere uno sviluppatore quale quadro prevede di utilizzare, se presente, al fine di allineare il vostro disegno in modo più appropriato con il codice HTML e CSS

Acqua, non ghiaccio

Sono finiti i vecchi tempi del web. Dovuto al fatto che la maggior parte dei siti Web è in si sta dirigenado verso il responsive, la necessità di layout fluido è diventato molto evidente. Griglie sono ora risolti con percentuali (10%, 30%, 50%) di contenitori, quali poi collassano a determinati punti di interruzione che uno sviluppatore può specificare.

I caratteri non sono tuoi amici

Caratteri su siti Web funzionano in modo molto diverso per la stampa. Mentre si sta creando un sito Web sul proprio computer, è possibile utilizzare qualsiasi font installato sul sistema. Questo è grande per voi, ma, non appena tali file spostano in un altro computer, il codice sorgente non può fare riferimento al tipo di carattere che sia installato sul vostro computer, siccome non ha alcun collegamento ad esso.

Ci sono molti modi per ovviare a questo dilemma, ma sentirai spesso uno sviluppatore chiedere ai progettisti di utilizzare Google Fonts. Google Fonts sono un insieme di caratteri ospitato su una CDN (Content Delivery Network), che può essere letta da qualsiasi computer che disponga di una connessione attiva a Internet, significa che anche se non ho il carattere specifico installato sul mio computer è possibile eseguire il rendering sul mio sito Web. Informati su questo. Alcuni font non sono anche progettati per il rendering sui motori web. Potrebbero essere drasticamente diversi quando visualizzati, diciamo, su Photoshop, rispetto a un browser web. Ogni programma renderizza font con motori di rendering diversi.

Eventi, Stati e risposte

Ora che abbiamo coperto alcuni concetti di base, diamo un'occhiata su alcuni problemi che i progettisti tendono a non prendere in considerazione nei loro progetti ma sono davvero importanti per l'esperienza utente.

Eventi

Gli eventi sono azioni eseguite da un utente mentre si interagisce con il tuo sito Web. JavaScript è da prendere molto in considerazione, ma semplici esempi includono "click", "scroll", "mouseon" o "mouseout" e "keydown" o "keyup". Se volete leggere un po' di più sugli eventi JavaScript, visita Mozilla. Alcuni degli eventi che vedete qui non sono necessariamente innescati dall'interazione dell'utente.

Dal punto di vista di un designer, è fondamentale capire cosa succede a determinati elementi o sezioni sul tuo sito Web una volta che un utente ha agito su di essi. Cosa succede quando un pulsante viene cliccato, per esempio? O c'è un'animazione applicata a una finestra modale quando si chiude al clic? Queste sono domande a cui è necessario fornire delle risposte, soprattutto se il progetto ha uno scopo pre-definito. A seconda del budget e le sequenze temporali, "Interaction Design", come esso è soprannominato nelle comunità web, può regalare piacevoli momenti preziosi di un progetto.

Stato

Dopo che si è verificato un evento, gli elementi vengono lasciati negli "stati". Un esempio comune è il link. I collegamenti hanno un numero di stati: activefocushover. Che aspetto hanno i links quando vengono cliccati? Mentre stai premendo giù? Quando il mouse passa sopra di loro? O quando essi sono toccati sul cellulare?

Atomic design può davvero rivelarsi utile qui come vostre guide di stile possono facilmente considerare per questi stati mentre la costruzione di un atomo come un pulsante. Lo Stato può avere un impatto drammatico sulla vostra esperienza di utente, quindi prendere in considerazione quando si tratta di siti più complessi.

Risposta

La parola "risposta" sta ronzando da un pò ora. Come sviluppatori, abbiamo bisogno di assicurarci che le nostre esperienze di web sono coerenti su tutti i dispositivi. Se sei un libero professionista, quasi ogni cliente chiederà che il loro sito sia responsive. Esso diventa il "pane e burro" del web. CSS fornisce agli sviluppatori una tecnologia utile come Media query che consentono agli sviluppatori di personalizzare il layout a determinati punti di "interruzione".

Framework di front-end come Bootstrap e Foundation sono orientati per fare molto più facile da implementare ideando griglie responsive, basata sulla percentuale per gli sviluppatori. Il più grande concetto qui non è come funzionano le griglie responsive, ma più che altro come sono progettate per crearle.

Conclusione

Quello è quanto per questa volta! Nel prossimo articolo daremo un'occhiata al backend e come possiamo usare una mentalità di Atomic Design per migliorare la nostra comprensione di logica e abilità di programmazione.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.