Creazione di interfacce Web: da dove iniziare

Annuncio pubblicitario

Più che mattoni e malta, codice informatico e pixel sono le basi dell'economia del 21 ° secolo. Se hai mai guardato "Origine pagina" o "Strumenti per gli sviluppatori" nel tuo browser, probabilmente hai riscontrato un pasticcio di testo e ti sei chiesto come funziona la pagina web.

Gli sviluppatori Web chiamano solraphical User iointerfacce (GUI) collettivamente il fine frontale di una pagina Web, in contrasto con il back-end. Il front-end è ciò che l'utente può manipolare, intervenire e utilizzare in altro modo. Il back-end può essere considerato come l'infrastruttura che contiene e supporta tutte le informazioni e le attività implicite dal front-end.

Questo articolo riguarda il front-end. Mapperemo il territorio in modo che tu possa capire le distinzioni e le capacità che rendono il front-end cosa lo è e ti mostra come iniziare a dare un senso - e usare - gli strumenti dello sviluppatore web per creare un sito accattivante e interattivo pagine.

Web design contro sviluppo front-end

Nelle grandi organizzazioni, la progettazione e lo sviluppo sono attività svolte da team di professionisti con diverse competenze. I designer avrebbero creato un design visivo e di interazione specifico; gli sviluppatori front-end lo implementerebbero.

Per un individuo, tuttavia, non c'è motivo di limitare la tua esplorazione: solo perché sei interessato allo sviluppo, non significa che non hai una visione per il design e viceversa. Una modesta conoscenza delle tecnologie Web di base o dei principi di progettazione può rivelarsi estremamente utile nella tua carriera o nel tuo business.

Lo sviluppo front-end è sempre più un'attività di codifica. Più perché ha in mente più della metà del design: molti concetti sono tratti dal mondo della produzione di stampe. Meno perché, mentre utilizza il codice del computer, quel codice è una varietà meno complessa, più tollerante e richiede meno conoscenze di base sulla programmazione rispetto a altri linguaggi di programmazione Web (molti dei quali sono disponibili sul back-end) Quale linguaggio di programmazione imparare - Programmazione WebOggi daremo uno sguardo ai vari linguaggi di programmazione web che alimentano Internet. Questa è la quarta parte di una serie di programmi per principianti. Nella parte 1, abbiamo imparato le basi di ... Leggi di più .

Il front-end del Web: markup, foglio di stile e linguaggi di programmazione

La maggior parte delle pagine Web sono costruite con un trio di tecnologie: hypertext markup language (HTML), fogli di stile a cascata (CSS) e JavaScript (JS):

• Linguaggi di markup come HTML contrassegnare un documento con tag. I tag delimitano il contenuto semantico e strutturano il documento. I documenti strutturati possono essere styled.
• CSS è un linguaggio dei fogli di stile e discendente di indicazioni in stile stampa a un compositore di pagine (che crea l'immagine stampabile finale per una macchina da stampa); sul web, i CSS dettano la presentazione di contenuti come tipografia e layout in generale, oltre a posizionare la grafica.
• JavaScript, a differenza dei due precedenti, è a linguaggio di programmazione. JS gestisce l'interazione e l'input dell'utente e si concentra sugli eventi prodotti da un utente. Per riempire un po 'di più l'immagine, l'opposto di un paradigma guidato da eventi è quello in cui la programmazione viene eseguita indipendentemente dall'input dell'utente.

HTML

Sono passati più di vent'anni e lo scopo principale dell'HTML rimane lo stesso: separare il testo destinato a un lettore dalla struttura necessaria per analizzare il documento.

Perché ne hai bisogno

Perché l'HTML è ancora importante? Per dirla semplicemente, l'HTML è il significato semantico del contenuto. Ciò è necessario per i lettori di macchine come i ragni dei motori di ricerca e gli screen reader (per l'accessibilità). Nel corso del tempo, l'importanza di separare ciò che è semantico da ciò che è strutturale è cresciuta anziché diminuita nel tempo. La versione più recente di HTML (5) ha introdotto tag come

,

Anatomia di un elemento HTML

Gli elementi HTML, come minimo, sono coppie di tag di apertura e chiusura, ogni tag racchiuso in , come il tag di paragrafo, di seguito in ciano. Gli elementi possono prendere attributi, come di seguito in magenta, come una "classe", che renderebbe l'elemento un membro di un gruppo su cui possono influire HTML e JS. Il stile L'attributo, il cui contenuto è scritto in rosso sotto, è in realtà un modo per creare una regola CSS unica solo per quell'elemento. (Il CSS è meglio scritto a livello di sito o di pagina, come discuteremo di seguito.)

Il risultato di questo markup:

Testo in paragrafo semplice qui.

Credito extra (avanzato)

Gli sviluppatori di ogni tipo sono ossessionati dalla velocità di esecuzione. A tal fine, ottimizzeranno le lingue stesse per la velocità nella scrittura e nella creazione di righe leggibili. Questo è chiamato sugarcoating sintattico. La comunità HTML ha prodotto alcuni di questi sforzi.

Perché usare una scorciatoia incentrata sullo sviluppatore quando, presumibilmente, sei un principiante? Creando cose con markup più semplice, puoi concentrarti sull'intenzione, non sull'espressione, mentre convalidi contro un ultimo standard di tutti. I file di origine generati nel markup semplificato verranno compilati in HTML valido oppure il compilatore genererà un errore a un numero di riga specifico. Potresti trovare che è più istruttivo della caccia attraverso il "tag soup" per una parentesi angolare mancante. Ognuno di essi richiede un software intermedio per compilarli in HTML. (È extra credito, dopo tutto.)

• Haml (HTML Abstraction Markup Language) | Richiede Rubino (di cui abbiamo già pensato attentamente 3 modi interattivi, divertenti e gratuiti per iniziare ad imparare il linguaggio di programmazione RubyRuby è un linguaggio di scripting espressivo, di altissimo livello. È utilizzato sul Web principalmente come parte del framework di sviluppo Web Ruby on Rails, ma anche autonomo. Se sei curioso di sapere cosa Ruby (non ... Leggi di più ) compilare
• Giada [URL rotto rimosso] | Richiede Node.js (troverai un'introduzione qui Cos'è il nodo. JS e perché dovrei preoccuparmi? [Sviluppo web]JavaScript è solo un linguaggio di programmazione lato client che viene eseguito nel browser, giusto? Non più. Node.js è un modo per eseguire JavaScript sul server; ma è anche molto di più. Se... Leggi di più ) compilare
• Sottile | Richiede la compilazione di Ruby (come sopra)

CSS

Il CSS consente di ospitare separatamente i contenuti semantici e la presentazione dei documenti, rendendo le funzionalità stilistiche come layout, colori e tipografia portatili e applicabili a diversi documenti. Quando il contenuto e la progettazione visiva sono separati, lo sviluppatore ottiene maggiore flessibilità e coerenza nella progettazione visiva.

Perché ne hai bisogno

I siti Web non stilati sembrano terribili e poco attraenti. Sebbene possano essere leggibili, CSS è la pietra angolare della gerarchia di informazioni visive a causa del layout che abilita. Ad esempio, la figura seguente illustra in parte l'attuale menu di navigazione superiore di makeuseof.com, senza alcun CSS applicato.

Nota che, a parte la tipografia e il colore, il menu non stilato è verticale perché quello è lo stile predefinito del browser. È improbabile che tu voglia ricreare Internet del 1990, quindi vorrai che una dose sana e continua di conoscenze CSS sia veramente competente. Inoltre, con l'ascesa di dispositivi di dimensioni diverse e connessi come iPhone, tablet, eccetera, uno delle competenze più importanti è diventato "Responsive Design" o pagine Web che si adattano a schermi diversi dimensioni. Tutto ciò è realizzato tramite CSS.

Anatomia di una regola CSS

Le regole CSS sono scritte in una delle tre posizioni: a) in linea all'interno di un elemento, b) creando a

Idealmente, gli stili sono scritti in fogli di stile separati a cui possono fare riferimento più pagine Web. Utilizzando lo stesso insieme di regole, gli autori possono risparmiare tempo e creare presentazioni visive con più ordine e coerenza. (Gli stili incorporati non possono aiutarti a formare la base dello stile del sito o persino dell'intera pagina, ecco perché sono meglio usati con parsimonia per soddisfare esigenze specifiche.)

Le regole CSS iniziano con a selettore, scritto in verde sotto. In questo caso, il selettore per la regola è p, per paragrafo: la regola si applica agli elementi di paragrafo. La regola è racchiusa tra {parentesi graffe}, al contrario di . In questo caso, la regola rende normale il carattere tipografico per il testo del paragrafo.

Le regole CSS possono diventare più complesse e complicate di quanto questa introduzione consenta. Ecco perché, in termini di tempo dedicato, puoi aspettarti Il CSS impiegherà molto più tempo a padroneggiare dell'HTML.

Credito extra (avanzato)

Proprio come HTML, CSS ha le sue ottimizzazioni per coloro che vogliono ottenere di più, più velocemente.

• SASS (e SCSS) | Richiede Ruby, come sopra
• Di meno | Richiede Node.js, come sopra

JavaScript

Quando molte persone pensano alla programmazione, la considerano come un'istruzione per il computer comefare qualcosa. Questo è il compito di un linguaggio di programmazione, il nostro addend finale all'equazione front-end.

I linguaggi di programmazione sono generalmente classificati in base al livello di astrazione che impiegano nella loro semantica, nelle loro lingue antenate, nella loro paradigmi, e il loro discipline di battitura. JavaScript sfida la semplice classificazione perché è stato esteso in così tanti framework, per adattarsi a così tanti scopi diversi. È un camaleonte ibrido flessibile, vagamente derivato dalla famiglia C, multi-paradigma, tipicamente vagante, che gioca a gazza con concetti di codifica. È un ottimo esempio di una lingua molto generica o un esempio molto scarso di molti diversi tipi di lingue.

Perché ne hai bisogno

Perché imparare JavaScript? Come sottolinea il mio collega, JavaScript ha i suoi campioni e detrattori 6 più semplici linguaggi di programmazione da imparare per i principiantiImparare a programmare significa trovare la lingua giusta tanto quanto il processo di edificazione. Ecco i primi sei linguaggi di programmazione più facili per i principianti. Leggi di più , in particolare nel caso della sua idoneità per i principianti. È possibilmente il il linguaggio di programmazione più popolare di oggi. Sebbene non fornisca una solida base per comprendere il resto del regno dei codici, esiste una buona argomentazione per l'apprendimento del JS insieme a Ruby o PHP.

Detto questo, Vanilla JS non va molto lontano: i framework sono responsabili delle pagine Web di oggi.

Quadri popolari

• Angolare, il framework JS di Google per applicazioni web come GMail e le altre.
• JQuery Rendere il Web interattivo: un'introduzione a jQueryjQuery è una libreria di scripting lato client che utilizza quasi tutti i siti Web moderni e rende i siti Web interattivi. Non è l'unica libreria Javascript, ma è la più sviluppata, più supportata e più utilizzata ... Leggi di più , già coperto da MUO qui Rendere il Web interattivo: un'introduzione a jQueryjQuery è una libreria di scripting lato client che utilizza quasi tutti i siti Web moderni e rende i siti Web interattivi. Non è l'unica libreria Javascript, ma è la più sviluppata, più supportata e più utilizzata ... Leggi di più , che alimenta WordPress tra le altre applicazioni.
• Reagire, creato dalle legioni ingegneristiche di Facebook, è realizzato per la creazione di UI.

Credito extra (avanzato)

La natura più palese di JavaScript richiede una certa imposizione della struttura. Ognuno dei soprabiti di zucchero qui sotto fa un po 'di strada verso l'implementazione

• CoffeeScript | Richiede Node.js, come sopra
• Dattiloscritto | Richiede Node.js, come sopra

Da dove iniziare l'apprendimento

Poiché lo sviluppo front-end è ormai ampiamente considerato una competenza professionale cruciale per i knowledge worker di ogni tipo, troverai molti punti di partenza sotto forma di corsi di e-learning. Ecco un elenco curato che abbiamo creato per i nostri lettori:

• Coursera (Pagato)
  Coursera raccoglie corsi online da università e istituti di apprendimento. La fascia di prezzo scende da 50 a 250 USD per un corso, ma pubblicizza un alto livello di conoscenza e risultati ad alta competenza.
• Assemblea generale Dash (Gratuito)
  L'assemblea generale è un'opzione popolare per l'educazione professionale retribuita. Dash è la loro offerta gratuita e copre HTML / CSS / JS.
• MakeUseOf.com - Il pacchetto Learn to Code 2017 (A pagamento, spina)
  Accesso a vita a 10 classi che coprono la gamma di sviluppo web front-end e back-end, per un minimo di 20 USD.
• Rete di sviluppatori Mozilla (Gratuito)
  MDN è autorevole, ma condivide lo stile della documentazione più delle istruzioni di classe o delle offerte solo online.
• Casa sull'albero (Pagato)
  Un'altra offerta online, questa pagata al mese anziché ovviamente. Questo viene su raccomandazione di Karen X Cheng nel suo post virale Medium "Come ottenere un lavoro come designer senza andare a scuola di design.”
• Tutorial di web design di Envato Tuts + (Misto di contenuti gratuiti e a pagamento di pari qualità)
  Una serie di articoli unici e serie in più parti di informazioni di alta qualità, specifiche e mirate di solito su un argomento.

Iniziare

Uno dei vantaggi offerti dallo sviluppo front-end per i principianti è che, per la maggior parte, non è necessario costosi strumenti proprietari: lo strumento più basilare dello sviluppo front-end è l'editor di testo associato al browser del tuo scelta:

• Editor di testo come Editor di testo Atom di Git, Testo sublime (a pagamento) o Codice VS di Microsoft
• Browser come Mozilla Firefox o Google Chrome
• È utile, ma al di là dell'ambito di questo articolo, avere un server di hosting o locale (come XAMPP) impostare.

Le alternative più convenienti, anche se meno permanenti, sono editor live basati sul web come:

• Codepen.io
• JSbin.com

Tagli corti

Le strutture HTML sono, per la maggior parte, ben comprese e non esattamente degne di re-keying con grande frequenza. Per i CSS, il foglio di stile medio del sito è lungo migliaia di righe e puoi scommettere che pochi di quelli moderni sono scritti esclusivamente a mano. E in termini di interattività, sono emersi alcuni standard. In virtù di questi fatti, scoprirai che molti sviluppatori front-end utilizzano i framework predefiniti come backbone, quindi ottimizzano, rimuovono o sostituiscono secondo necessità.

• bootstrap, sviluppato originariamente da Twitter, contiene modelli HTML, CSS e JS che oggi sono ampiamente disponibili sul web. Bootstrap è quasi un lingua franca all'inizio dello sviluppo web.
• Fondazione si autodefinisce il quadro più avanzato al mondo ed è costruito con un'enfasi su dimensioni e velocità ridotte.

Materiale di riferimento

• Una lista a parte - Una pubblicazione A-list, "Per le persone che creano siti Web"
• Posso usare - "Tabelle di supporto per HTML5, CSS3, ecc."
• CSS-Tricks - Un hub per la comunità CSS e fonte di conoscenza sulle migliori pratiche e compatibilità
• Documentazione HTML standard di vita - "The Living Standard - Edition for Web Developer"
• HTML5 per favore - "Usa il nuovo e lucido responsabilmente"
• Smashing Magazine - "Per web designer e sviluppatori professionisti"

Conclusione

Speriamo che ti sia piaciuto questo orientamento al mondo del front-end. Come puoi vedere, lo sviluppo del front-end è un campo pieno di molte possibilità, ma con molti punti di ingresso. Impararlo aggiungerà un'impressionante abilità al tuo portafoglio e ti consentirà di fare il passo successivo nella tua carriera, o passare a uno completamente nuovo.

Sviluppatori: Cosa c'è nel tuo stack front-end?

principianti: Cos'altro avremmo potuto includere per orientarti?