Introduzione alla programmazione di un designer

I progettisti sono spesso piuttosto riluttanti ad avventurarsi oltre il regno dell'HTML e dei CSS nel territorio dei linguaggi di scripting e di programmazione, e per una buona ragione. La programmazione richiede un insieme di competenze molto diverso rispetto alla simulazione di pagine web. Inoltre, ci sono così tante cose diverse da imparare che la maggior parte dei progettisti non sa nemmeno da dove cominciare: JavaScript, PHP, Ruby, Rails, come è possibile tenere il passo?

Tuttavia, in pratica, la programmazione risulta essere molto meno spaventosa di quanto i progettisti immaginino. Oggi ti mostrerò come la programmazione è un'abilità che puoi imparare una volta e quindi applicare a ogni nuova lingua che acquisisci. Daremo un'occhiata a tre diversi costrutti di programmazione in tre lingue diverse per vedere quanto siano simili. Se desideri iniziare a programmare ma non ne sai niente, questo articolo è per te.

Non temere, potresti solo piacerti

Questo sito è generalmente rivolto ai designer, e per esperienza personale so che avvicinarsi alla programmazione per la prima volta come designer è estremamente intimidatorio. I designer sono pensatori visivi, prosperiamo attraverso la creazione e la sperimentazione usando l'occhio della nostra mente e una conoscenza esperta degli strumenti del nostro mestiere.

Generalmente, siamo il tipo di persone che odiavano la classe di matematica e qualsiasi altra cosa in cui la creatività non sembra avere un punto d'appoggio ovvio.

? In generale, siamo il tipo di persone che odiavano la classe di matematica e qualsiasi altra cosa in cui la creatività non sembra avere un punto d'appoggio ovvio.?

I programmatori sono risolutori di problemi. Amano i puzzle logici e armeggiano con il codice per ore nell'assoluta assenza di immagini di qualsiasi tipo. Tieni presente che queste due categorie di persone non si escludono a vicenda. Se ti adatti ad entrambe le descrizioni, probabilmente amerai la programmazione.

Non HTML e CSS

Stiamo raggiungendo rapidamente un punto in cui la maggior parte dei web designer conosce almeno un po 'di codice HTML e / o CSS. Questa esperienza e conoscenza ti aiuteranno davvero, ma forse non tanto quanto potresti pensare.

L'HTML è un * linguaggio di marcatura * e il CSS è un * linguaggio di stile *, sono usati principalmente per formattare e inserire contenuti abbastanza statici in pagine predefinite. Il modo in cui lavori con loro è in realtà molto diverso dal maneggiare un * linguaggio di scripting * o * linguaggio di programmazione orientato agli oggetti *, che sono il tipo di strumenti di programmazione hardcore che troverai oggi sul web.

Il grande segreto sulla programmazione

L'ultima parte era la cattiva notizia, ma non temere, ci sono buone notizie all'orizzonte. Se entri in un negozio di libri e vai alla sezione di programmazione, è probabile che sarai completamente intimidito. Ci sono così tante cose diverse da imparare! Questa intimidazione è favorita quando incontri uno dei super geni che sembra conoscere praticamente tutti i linguaggi di programmazione esistenti. Come fanno le persone a trovare il tempo per imparare questa roba? Molti principianti sono così completamente scoraggiati a tal punto che si arrendono prima ancora di provarci.

? Le lingue di programmazione tendono ad essere molto simili. Molti di loro usano gli stessi elementi costitutivi e set di strumenti simili per raggiungere i propri obiettivi.

Il grande segreto che non si sa se non si è mai veramente passati alla programmazione è che i linguaggi di programmazione tendono ad essere molto simili. Molti di loro usano gli stessi elementi costitutivi e set di strumenti simili per raggiungere i propri obiettivi.

Ho imparato questo piccolo segreto nella mia prima interazione con la programmazione: una classe Java al college (da non confondere con JavaScript). Sebbene io stesso fossi un giovane ragazzo, la classe era in gran parte piena di uomini tra i 30 ei 40 anni. Praticamente tutti avevano già un lavoro in programmazione e ci lavoravano da vent'anni o più. Sono stati semplicemente impiegati nell'uso di altre lingue e nel tentativo di espandere il proprio bagaglio di competenze, spesso a spese e incoraggiamento del datore di lavoro.

Camminando in classe il primo giorno, nessuno di noi sapeva molto, se non altro, di Java. Tuttavia, dalla terza classe, questi ragazzi mi stavano sorpassando. Stavo scrivendo piccoli frammenti di codice orribilmente semplici basati sui fondamenti che avevamo appreso. Questi ragazzi stavano prendendo le stesse basi e costruendo applicazioni elaborate con tutti i tipi di fantastiche funzioni ben oltre i requisiti per l'assegnazione.

? Ero inetto? Si scopre, fortunatamente per me, che la risposta non è stata così semplice.

Ero inetto? Si scopre, fortunatamente per me, che la risposta non è stata così semplice. La realtà era che stavamo imparando cose molto diverse. Stavo imparando a programmare attraverso la lente di Java, questi ragazzi sapevano già tutto sulla programmazione e avevano semplicemente bisogno di un piccolo aiuto per capire come tradurre quella conoscenza in Java. Ero un bambino che imparava a parlare per la prima volta ed erano multilingue che prendevano ancora un'altra lingua.

Il punto di questa lunga storia è di illustrare che, dopo aver veramente iniziato a programmare o scrivere script con una sola lingua, il resto diventa molto più facile perché hai ridotto drasticamente la curva di apprendimento. Se sai come programmare in PHP, il passaggio a Ruby è molto più piccolo.

The Building Blocks

È facile per me dire che la programmazione è basata sulla conoscenza riusabile, ma posso metterla in pratica? Quali sono questi cosiddetti elementi costitutivi e in che modo sono simili o diversi dalla lingua alla lingua?

Ottima domanda! Scopriamolo dando un'occhiata ad alcuni dei costrutti di programmazione più basilari ma più usati. La comprensione di questi avvierà la tua educazione alla programmazione indipendentemente dal percorso o dalla lingua che sceglierai di perseguire.

variabili

Le variabili sono una cosa meravigliosa.Se hai mai usato MENO o qualcosa di simile, hai visto le meraviglie delle variabili e come possono risparmiare immense quantità di tempo. Non sono ancora sicuro se appartengano ai CSS, ma il programmatore in me sicuramente vuole vederli lì.

Una variabile è essenzialmente un modo per memorizzare le informazioni. È possibile memorizzare qualcosa di semplice come un valore, diciamo 39 o qualcosa di così complesso come un'intera serie di dati contenenti centinaia di valori. Pensa a una variabile come una scatola. Le scatole stesse non sembrano così importanti, è ciò che conta dentro. Tuttavia, le caselle rappresentano un modo conveniente per archiviare e accedere a determinati articoli.

Variabili JavaScript

Facciamo un esempio. Poiché JavaScript è probabilmente il primo candidato a superare HTML e CSS, inizieremo tutti i nostri esempi. Ecco come funzionano le variabili in JavaScript:

Qui puoi vedere esattamente come vengono utilizzate le variabili in JavaScript. In primo luogo, dichiarare? una variabile. Questo semplicemente lo crea o lo porta in esistenza, quando lo fai vuoi sempre chiamarlo qualcosa di indicativo del suo contenuto. Successivamente, gli assegni un valore (spesso questi due passaggi sono combinati), nel nostro caso ho inserito un numero arbitrario. Ricorda che,? ContentWidth? è la nostra scatola, che ora ha un valore. Ogni volta che vogliamo accedere a quel riquadro, usiamo solo il nome della variabile, quindi per terminare l'esempio ho creato un avviso e inserito la variabile. Questo aprirà una finestra con il valore? 496 ?.

Questo può sembrare inutile qui, ma immagina di avere trecento righe di codice che fanno spesso riferimento a tale variabile. Ogni volta che cambia il valore di quella variabile, il nostro codice funziona ancora perfettamente perché il nome della variabile è rimasto costante. Senza variabili, questo sarebbe impossibile e molto più codice risulterebbe.

Variabili PHP

Ora che disponiamo di solide fondamenta di informazioni, imparare le variabili in altre lingue diventa molto più facile. Questa volta non stiamo imparando quali variabili sono e come funzionano, ma solo come usarle in altre lingue.

Ecco come funzionano le variabili in PHP:

C'è molta somiglianza qui. Si noti l'uso del punto e virgola per indicare la fine di una dichiarazione e in che modo i commenti utilizzano la stessa sintassi. Questa volta abbiamo dichiarato la nostra variabile e gli abbiamo assegnato un valore in una singola riga. Possiamo vedere che la sintassi di questo è quasi identica, con l'importante distinzione che PHP usa un? $? all'inizio di un nome di variabile. Notare che? Echo? comando semplicemente stampa qualcosa nella pagina del browser.

Ruby Variables

Ora diamo un'occhiata alle variabili in Ruby.

Ormai puoi vedere che molto di ciò che è coinvolto nell'apprendimento di una nuova lingua è solo capire le sue varie stranezze. Ad esempio, JavaScript e PHP utilizzano il punto e virgola alla fine di una riga, Ruby no. Inoltre, questa volta i commenti vengono creati con? #? invece di ?//? e usiamo? mette? per produrre il nostro risultato.

Loops

Un altro costrutto di programmazione popolare è un ciclo. Con i loop è possibile risparmiare la fatica di ripetere il codice ancora e ancora automatizzando il processo che si desidera ottenere. Quando si crea un ciclo, si deve essere sicuri di dichiarare i parametri del ciclo, come le condizioni per quando il ciclo cesserà. Non si desidera che le azioni continuino all'infinito, quindi è necessario creare una condizione in base alla quale il ciclo verrà terminato.

Cicli JavaScript

In qualsiasi lingua, di solito ci sono più tipi di loop. Ecco un tipo in JavaScript, il? While? ciclo continuo. In questo esempio impostiamo una variabile, quindi creiamo un blocco di codice che dovrebbe essere eseguito ancora e ancora fino a quando la variabile è inferiore a 50. Quindi all'interno di quel blocco di codice, definiamo le azioni da ripetere. In questo caso stiamo registrando il valore della variabile sulla console, quindi aumentando il valore della variabile di uno. Dato che la variabile aumenta ogni volta che il codice viene eseguito, alla fine colpirà 50 e il ciclo terminerà.

Questa stessa cosa potrebbe essere ottenuta con un? For? ciclo continuo. Questa versione un po 'più succinta come è afferma il valore della variabile da avviare, la condizione in cui termina il ciclo e l'azione da intraprendere sulla variabile tutto in una riga.

Loop PHP

Ancora una volta scopriamo che PHP è molto simile a JavaScript. Dopo aver letto gli esempi sopra, dovresti essere in grado di afferrare senza fatica l'equivalente PHP. Ancora una volta abbiamo un ciclo while e un ciclo for, ognuno dei quali contiene una sintassi quasi identica ai loro fratelli JavaScript.

Cicli di rubino

Ecco il? Mentre? e per? loop in Ruby. Come puoi iniziare a vedere, Ruby è molto più flessibile nella sua sintassi rispetto alle altre due lingue che stiamo usando. Non solo non ci sono punti e virgola, neanche le parentesi graffe sono presenti. Notate anche quanto è diverso il? For? il ciclo sembra questa volta.

funzioni

Le funzioni sono ancora un altro costrutto di programmazione creato per risparmiare tempo evitando di ripetere lo stesso codice. Quando si codifica un'applicazione, probabilmente eseguirà ovunque da una a migliaia di attività. Ogni attività rappresenta un blocco di comandi. Quando lanciamo i comandi in una funzione, possiamo semplicemente chiamare quella funzione invece di scrivere quel codice completo. In questo modo una funzione è molto simile a una variabile che esegue un'attività o un elenco di attività.

Funzioni JavaScript

Costruiamo una funzione di base superba in JavaScript che prende qualsiasi numero passato a esso e lo squares. Iniziamo qui con la parola? Function? quindi seguilo con una variabile tra parentesi. Quindi all'interno della funzione eseguiamo varie azioni e restituiamo un valore.

Quando usiamo la funzione, sostituiamo la variabile parentetica con qualsiasi numero che ci piace e il codice all'interno della funzione verrà eseguito su quel valore. Nell'esempio sopra, il risultato restituito sarebbe 81.

Funzioni PHP

Ormai hai tanta familiarità con la conversione da JavaScript a PHP che dovresti essere in grado di fare tutto da solo. Ecco la sintassi:

Metodi di rubino

Ancora una volta, Ruby è molto diverso. In effetti, Ruby si riferisce effettivamente a questo particolare costrutto come un metodo, non una funzione. Tuttavia, possiamo ancora applicare rapidamente la nostra conoscenza delle funzioni per decifrare come funziona.

Come puoi vedere, il metodo Ruby sta eseguendo la stessa attività della funzione JavaScript. Ti permette di passare un numero nei parametri, dopo di che è quadrato quel numero e restituisce il valore.

Facile, giusto?

A questo punto dovresti essere in grado di vedere l'importanza di comprendere la pratica della programmazione indipendentemente da qualsiasi linguaggio di programmazione. C'è una struttura e un metodo di programmazione condivisi che troverai in tutte le lingue che impari. Molte delle differenze sono * semantiche * e ammontano a leggere differenze di sintassi.

Non prendere questo per significare che i linguaggi di programmazione e scripting sono tutti uguali, non lo sono. Hanno tutti uno scopo specifico che definisce come e quando li usi. È molto come imparare Adobe Illustrator e poi saltare a InDesign. Hai a che fare con due cose diverse create per due scopi diversi, tuttavia, c'è abbastanza somiglianza che una conoscenza approfondita di una ti aiuterà a imparare a muoverti dall'altra.

Conclusione

Questa discussione non era in alcun modo pensata per essere esaustiva. Ora non possiedi una completa conoscenza fondamentale della programmazione. Invece, hai semplicemente imparato a programmare in un modo che, spero, lo renda più accessibile. Invece di vedere una massa di lingue completamente diverse che devi imparare, dovresti ora vedere una raccolta di pratiche correlate in cui lo studio di una espande effettivamente la tua comprensione degli altri.

Quindi dove dovresti iniziare? Come ho detto sopra, JavaScript è sicuramente il posto giusto per i web designer. La sua applicazione è immediatamente evidente, specialmente se combinata con jQuery, a HTML e CSS che già conosci. Da lì il passaggio a PHP è molto più gestibile, il che potrebbe portarti a studiare Ruby in modo da poter padroneggiare Ruby on Rails; le possibilità sono infinite!