Inizia con HTML5

Questa guida è disponibile per il download in formato PDF gratuito. Scarica Inizia subito con HTML5. Sentiti libero di copiare e condividere questo con i tuoi amici e familiari.

instagram viewer

e

i tag non sono troppo scoraggianti e non hai paura di sporcarti le mani con del codice sorgente.

In secondo luogo, questa guida presuppone che tu sappia cos'è il CSS e come funziona. Non ci aspettiamo che tu sia un genio del design, né ci si aspetta che tu conosca l'intera specifica CSS dal retro della tua mano. Tuttavia, dovresti essere in grado di applicare lo stile a un elemento in una pagina Web, essere in grado di collegarti a un file CSS e conoscere le differenze tra un ID e una classe e come applicare lo stile a ciascuno di essi.

Se ti gratti la testa sopra, non ti preoccupare. Una delle cose migliori di HTML e CSS è che è davvero molto semplice. In effetti, MakeUseOf ha un'incredibile guida XHTML Impara a parlare di "Internet": la tua guida a xHTMLBenvenuti nel mondo di XHTML - Extensible Hypertext Markup Language - un linguaggio di markup che consente a chiunque di costruire pagine Web con molte funzioni diverse. È la lingua principale di Internet. Leggi di più che ti porterà alla velocità molto velocemente.

Dopo aver letto quella guida, potresti anche voler dare un'occhiata ai seguenti articoli:

• 8 siti Web con esempi di codifica di qualità 8 migliori siti Web per esempi di codifica HTML di qualitàCi sono alcuni fantastici siti Web che offrono esempi e tutorial di codifica HTML ben progettati e utili. Ecco otto dei nostri preferiti. Leggi di più
• 6 blog per seguire grandi web designer 6 migliori blog di web design da seguire Leggi di più

Avrai anche bisogno di un moderno editor di testo e browser. Qualsiasi versione di Internet Explorer precedente a Internet Explorer 9 e alcune versioni precedenti di Safari, Chrome e Firefox avrà difficoltà con molte funzionalità che fanno parte di HTML5 e potrebbero impedirti di seguirlo guida.

Di conseguenza, sei invitato a scaricare un browser moderno. Raccomando Google Chrome e lo userò in ogni esempio.

Oltre a ciò, tutto ciò di cui avrai bisogno è la volontà di imparare. Oh, e un editor di testo.

1.2 Editor di testo per lo sviluppo Web

Il tuo editor di testo è quello che userai per scrivere il tuo codice. Forse ti starai chiedendo che cos'è un editor di testo.

Bene, in primo luogo non è un elaboratore di testi. Programmi come Microsoft Word e le Pagine di Apple sono totalmente inadatti allo sviluppo web. Questo perché allegano ulteriori informazioni ai file HTML, CSS e Javascript che rendono difficile la lettura del browser Web.

Un editor di testo estrae i caratteri in un file di testo e non molto altro. Ciò ti consente di creare file che non hanno una formattazione aggiuntiva e possono essere salvati con qualsiasi estensione di tua scelta.

Il tuo computer ne ha già uno. Se stai utilizzando un PC Windows, Notepad è l'editor di testo che probabilmente hai installato.

Su un Mac, la situazione è leggermente diversa. OS X sembra avere quattro diversi editor di testo. Questi sono chiamati Vim, Emacs, Pico e Nano. Tuttavia, a differenza del Blocco note, tutti funzionano nel terminale.

Questo è un po 'intimidatorio per le persone che sono nuove allo sviluppo web e non dovrebbero essere utilizzate da persone che sono nuove allo sviluppo software. Non li useremo in questa guida. Tuttavia, quando sei un po 'più sicuro con lo sviluppo di software e web, vale sicuramente la pena dare un'occhiata Vim I 7 principali motivi per dare una chance all'editor di testi VimPer anni ho provato un editor di testo dopo l'altro. Lo chiami, l'ho provato. Ho usato ognuno di questi editori per oltre due mesi come il mio principale editore quotidiano. In qualche modo, io ... Leggi di più ed Emacs. Sono entrambi potenti editor di testo e, se controllati, possono farti risparmiare un sacco di tempo.

Su Linux, l'editor di testo predefinito varia tra le distribuzioni. Su Ubuntu, è probabile gedit gedit: uno dei redattori di testo semplice pieni di funzionalità [Linux e Windows]Quando pensi agli editor di testo semplice, la prima cosa che potrebbe capitarti è l'applicazione Blocco note di Windows. Fa esattamente ciò che afferma la sua descrizione del lavoro: funzionalità semplici per un testo semplice ... Leggi di più , che è un editor di testo piuttosto piacevole che non è molto diverso da Blocco note.

Tuttavia, in questo corso dovremo scrivere il nostro codice utilizzando tre diversi strumenti.

Il primo è Testo sublime 2 Prova Sublime Text 2 per le tue esigenze di modifica del codice multipiattaformaSublime Text 2 è un editor di codice multipiattaforma di cui ho sentito parlare solo di recente e devo dire che sono rimasto davvero colpito nonostante l'etichetta beta. Puoi scaricare l'app completa senza pagare un centesimo ... Leggi di più . Onestamente non posso raccomandarlo abbastanza vivamente. Viene fornito con tutto ciò che semplifica la vita a uno sviluppatore principiante. In primo luogo, semplificherà la lettura del codice colorando alcune parti. In secondo luogo, consente di passare facilmente da un file all'altro e di gestire interi progetti di file. Questo è l'ideale per passare da un file all'altro e modificare al volo più bit di codice.

Il terzo è il Console Javascript Capire i problemi del sito Web con Chrome Developer Tools o FirebugSe finora hai seguito i miei tutorial su jQuery, potresti aver già riscontrato alcuni problemi con il codice e non sapere come risolverli. Di fronte a un bit di codice non funzionale, è molto ... Leggi di più che è integrato in Google Chrome. Questo ci consente di scrivere Javascript e di vederlo in esecuzione immediatamente e verrà utilizzato per spiegare i concetti di base della programmazione.

Il secondo è un sito web chiamato Codepen.io. Questo straordinario sito Web ti consentirà di scrivere codice HTML, CSS e Javascript nel browser ed è gratuito. Ti permetterà anche di vedere le tue modifiche all'istante.

2. Markup semantico

In questo capitolo, imparerai a conoscere il Semantic Markup e come organizzare il tuo codice in base al suo contenuto.

Fino a poco tempo fa, il codice HTML era generalmente organizzato con

Funzionava, ma c'erano margini di miglioramento. Il problema con

Il markup semantico è una nuova funzionalità di HTML5. Porta nuovi tag, che funzionano allo stesso modo di un tag "div", ma servono per taggare parti comuni di una pagina.

Quindi come lavorano? Considera il seguente codice.

In questo pezzo di codice, abbiamo una barra di navigazione, un titolo e un elenco. Questo non è troppo dissimile dalla maggior parte dei siti web che potresti mai visitare, quando ci pensi.

Diamo un'occhiata a un articolo su MakeUseOf. Noterai che esiste una parte della pagina riservata interamente alla navigazione verso altri articoli. Noterai anche che c'è un'altra parte della pagina che contiene le parole che costituiscono un articolo. Verso la parte superiore della pagina, vedrai un'intestazione contenente il logo MakeUseOf e alcuni altri collegamenti.

Quando ci pensi, molti siti web seguono queste convenzioni. La maggior parte dei siti Web ha una parte riservata alla navigazione. Di solito hanno un contenuto. Molto probabilmente hanno un'intestazione.

I tag semantici sono tag che consentono di definire parti di un sito Web che si trovano comunemente nella maggior parte dei siti Web. Non aggiungono nulla alla pagina, ma ti consentono di raggruppare i tag in base al loro contenuto e applicare stili a tali gruppi.

Quindi, ricordi quel codice che avevamo prima? Vediamolo con qualche markup semantico aggiunto.

Come puoi vedere, il codice è molto più facile da leggere. Sai quali parti sono quali e non c'è ambiguità. Questo è importante perché semplifica la scrittura di codice valido e pulito. Se dovessi mai decidere di diventare un web designer professionista, questo diventa fondamentale: non sai mai chi leggerà il lavoro che produci.

Quindi, diamo un'occhiata ad alcuni tag di markup più semantici.

2.1 Sezione

La sezione è un tag davvero utile. Viene utilizzato per acquisire enormi quantità di informazioni e contenuti contrassegnati con un'intestazione o un titolo. Pensa a questo come a un capitolo di un libro. Un capitolo ha un titolo e può contenere anche immagini, diagrammi, grafici e parole. Un tag di sezione verrebbe usato per contenere tutto ciò.

2.2 Articolo

Il tag articolo viene utilizzato per quello che sembra; Contenenti contenuti come un post di blog o una notizia. Questo contenuto dovrebbe poter essere staccato dal resto del blog e avere comunque un senso coerente.

2.3 A parte

Questo tag è riservato per i contenuti correlati, ma non parte integrante della pagina Web. Potrebbe trattarsi di una serie di fatti relativi a una notizia o alla biografia di un utente su un blog.

2.4 Intestazione

Molte pagine Web hanno una barra nella parte superiore della pagina che contiene un logo, alcune informazioni relative al sito e forse alcuni collegamenti. Nel markup semantico, utilizzeresti un tag Header per contenere tutto questo.

2.5 Nav

Questo elemento è riservato alla parte di navigazione del tuo sito web. Ciò conterrebbe collegamenti ad altri siti Web o ad altre pagine del sito Web. Nel contesto di MakeUseOf, questa potrebbe essere la parte della pagina che si trova sotto l'intestazione.

2.6 Piè di pagina

Questo tag è riservato per la parte inferiore della pagina. Qui puoi inserire alcuni dettagli di contatto, informazioni sul copyright, una mappa o alcuni link alla tua pagina "chi sono".

2.7 Mettiti alla prova

• Che cos'è il markup semantico e a cosa serve?
• Sto creando una pagina web e voglio usare un tag semantico per contenere una biografia su di me. Quale uso?

3. Le forme

Se hai mai fatto un po 'di web design, probabilmente sai come creare un semplice modulo in HTML. Se sei davvero intelligente, probabilmente sai come prendere le informazioni che ottieni dal tuo modulo e come fare qualcosa con esso, ad esempio metterle in un database.

Le forme sono estremamente importanti. Sono la base della maggior parte delle cose che facciamo su Internet. Ogni volta che crei un aggiornamento dello stato sul tuo social network preferito, acquisti qualcosa da Amazon o invii un'email, probabilmente hai utilizzato un modulo HTML.

Quello che probabilmente non sapevi è che il modo in cui creiamo i moduli è radicalmente cambiato in HTML5. È anche significativamente migliore. In questo capitolo, esamineremo alcune delle cose interessanti che ora puoi fare, solo con un semplice vecchio markup.

Quindi, cosa c'è di così bello nel nuovo modo in cui possiamo scrivere moduli in HTML5? Innanzitutto, puoi assicurarti che alcuni campi debbano essere compilati per poter essere inviati, semplicemente cambiando il markup del modulo stesso. Inoltre, non devi più scrivere montagne di JavaScript o PHP per farlo. È banalmente facile.

In secondo luogo, puoi assicurarti che i tuoi utenti possano inviare solo determinati tipi di informazioni al tuo modulo. Supponiamo quindi che tu abbia un sito Web per la tua mailing list e desideri solo che le persone siano in grado di inviare indirizzi email effettivi? Puoi farlo, semplicemente usando HTML5. È davvero incredibilmente potente.

In terzo luogo, è possibile migliorare l'aspetto dei moduli assegnando a determinati campi un segnaposto. Ciò li renderà significativamente più intuitivi, in quanto puoi mostrare ai tuoi utenti un esempio di ciò che ti aspetti da un modulo.

3.1 Miglioramento di un modulo

Quindi, diamo un'occhiata a un modulo e vediamo come possiamo migliorarlo.

Questo modulo è piuttosto semplice. Richiede un nome, un'e-mail e un colore preferito, quindi consente all'utente di inviarlo. Non contiene alcuna convalida di quali informazioni vengono inserite al suo interno e nulla impedisce agli utenti di inviare questo modulo con alcuni campi vuoti. Cambiamo tutto questo.

Quindi, la prima cosa che vogliamo fare è assicurarsi che il campo email richieda solo un'email. In realtà questo era un compito piuttosto difficile, dato che dovevi creare ogni sorta di codice Regex arcano. Bene, non più. Devi solo cambiare il tipo di input da "testo" a "email". Quando provi a inviare quel modulo con parole incomprensibili, si lamenterà e insisterà che invii un'email.

3.2 Tipi e modelli di input

Esistono altri tipi di input, che è possibile richiedere. Questi includono numeri di telefono, indirizzi web, moduli di ricerca e persino selettori di colori! Poiché HTML5 è in continua evoluzione, è logico che presto saremo in grado di specificare più tipi di input nel prossimo futuro.

Inoltre, per cose come i numeri di telefono che variano a seconda della località, è possibile specificare modelli per gli input. Questi sono creati usando qualcosa chiamato "Espressioni regolari" e sono piuttosto complicati, ma incommensurabilmente potenti.

Vogliamo anche fornire un esempio di email nel nostro campo, quindi l'utente non ha ambiguità su ciò che deve inviare. È davvero facile da fare. Basta creare un nuovo attributo di "segnaposto" con un indirizzo email di esempio.

Faremo in modo che il nostro campo "Colore preferito" sia obbligatorio. Nell'ultima parentesi angolare (>) nel tag di input Email, basta scrivere "richiesto". Questo è tutto. Ora, quando si tenta di inviare il modulo senza un valore, verrà visualizzato un messaggio di errore.

La cosa davvero incredibile di questi messaggi di errore è che l'utente non deve scriverli o scrivere alcun codice per crearli. Basta modificare un campo per renderlo obbligatorio e funziona. Detto questo, è possibile personalizzarli, se lo si desidera.

Questa è stata un'introduzione incredibilmente breve al potere dei moduli in HTML5. Se desideri saperne di più, ti consiglio di visitare questi link.

Ulteriori letture:

• Trucchi CSS: scriviamo markup semantico
• HTML5 Doctor - Parliamo di semantica

3.3 Mettiti alla prova

È il tuo compleanno la prossima settimana e vuoi creare un modulo di registrazione in modo da sapere quante torte devi creare. Apri l'editor di testo e crea un modulo con i seguenti campi.

• Nome
• Indirizzo email
• Numero di telefono
• allergie

Assicurati che i campi nome, email e numero di telefono siano obbligatori e che i campi Email e Numero di telefono siano impostati con i tipi di input "email" e "tel". Crea un segnaposto per il campo delle allergie con il valore "polline, uova, quiche".

Gioca con il modulo. Prova a inviare i campi richiesti come vuoti e prova a inserire caratteri non numerici nel campo del numero di telefono. Nel campo email, inserisci qualcosa che non sia un indirizzo email. Che succede?

4. Media

C'era un tempo in cui l'unico modo in cui era possibile inserire alcuni video o audio in una pagina Web era usando qualcosa come Flash, Shockwave o SilverLight.

Questo non era l'ideale. Innanzitutto, nessuno di questi framework ha funzionato così bene sui dispositivi mobili. Non erano attrezzati per il mondo moderno di smartphone e tablet.

Inoltre, erano formati proprietari. Di conseguenza, gli utenti di Linux e OS X potevano ottenere un'esperienza piuttosto di seconda classe o addirittura impedire loro di consumare servizi multimediali, poiché non era disponibile per la loro piattaforma.

Alla fine, avevano una propensione ad essere lenti. Se tu fossi su un computer poco potente o vecchio, non avresti una buona esperienza di visualizzazione di video utilizzando questi framework. Flash è stato particolarmente noto per questo.

4.1 In che modo HTML5 rende fantastici video e audio

HTML5 ha cambiato questo consentendo agli sviluppatori Web di includere video e audio nelle loro pagine Web con solo poche righe di codice. Funziona a meraviglia sui dispositivi mobili e funziona su tutti i browser Web moderni.

Di conseguenza, grandi aziende come YouTube, Vimeo e Netflix stanno sfruttando la rivoluzione HTML5. Perché non ti unisci a loro?

4.2 Tutto sui codec

In questo capitolo imparerai come utilizzare la potenza di HTML5 per includere audio e video nelle tue pagine web.

In primo luogo, dovrò iniziare con un avvertimento. Sebbene sia possibile utilizzare video HTML5 in tutti i browser Web moderni, non funziona allo stesso modo su tutti i browser Web. I codec utilizzati da ciascun browser variano. In Internet Explorer, sei limitato all'utilizzo di video MP4. Chrome è un po 'più generoso e ti consente di utilizzare i video WebM, MP4 e Ogg Theora. Opera è un po 'più restrittivo e ti consente solo di utilizzare i video di Theora e WebM.

Di conseguenza, devi essere un po 'intelligente nel modo in cui inserisci il video nella tua pagina web. Quindi, vediamo come funziona.

4.3 A partire dal video

Per cominciare, dovrai creare alcune aperture e chiusure

Bene, quando stai aspettando il caricamento del tuo video, la persona che visita il tuo sito può vedere un'immagine correlata al video. Per fare ciò, dai ai tuoi tag video un attributo di "poster" con un valore dell'immagine che desideri collegare. Dovrebbe sembrare come questo.

La prossima cosa che vorremmo fare è creare un fallback. Cosa significa questo? Supponiamo quindi che tu stia utilizzando uno dei browser meno recenti e meno fantastici. Molti di questi browser meno recenti non supportano i video HTML5 e pertanto non possono riprodurre video HTML5. Vuoi lasciare loro un messaggio che li informa che vorranno aggiornare il loro browser e che fino a quando non lo faranno, non saranno in grado di guardare il tuo video.

Per fare ciò, basta scrivere il tuo messaggio all'interno dei tag video. Nient'altro è richiesto. Una volta fatto, ti verrà lasciato un po 'di codice simile a questo.

Ora, aggiungiamo alcuni video. Ho intenzione di testarlo su Google Chrome, quindi ho intenzione di collegarmi a un film MP4. Per fare ciò, creo un tag Source e gli do un attributo di src che ha un valore del video che voglio includere.

La mia pagina è ora pronta per essere aperta nel mio browser web. Ho collegato a un film che è davvero molto grande e, di conseguenza, quando viene aperto si può vedere solo il poster.

4.4 Aggiunta di audio

L'audio può essere inserito nella tua pagina web in un modo che ricorda molto il modo in cui abbiamo inserito il video nella nostra pagina.

Innanzitutto, si creano alcuni tag audio. Questi tag audio contengono un attributo di "controlli". Ciò offre all'utente che visita la pagina la possibilità di mettere in pausa, riprodurre indietro e far avanzare rapidamente l'audio che viene riprodotto.

Quindi, includi un tag sorgente nel file MP3 a cui desideri collegarti. Non devi preoccuparti così tanto quando si tratta di compatibilità del codec. I browser web più recenti hanno la possibilità di riprodurre audio MP3, anche se è buona norma includere anche un file ".ogg" e ".wav" - per ogni evenienza.

Infine, puoi creare un fallback per i browser più vecchi. Ciò avviene nello stesso modo in cui è stato creato il fallback per il video.

Il risultato finale è un po 'così.

Quando apri questo nel tuo browser web, dovrebbe apparire un po 'così.

4.5 Mettiti alla prova

• Qual è lo scopo di avere un poster nei tag video?
• Quali codec non puoi usare in Internet Explorer?
• Se volessi mettere in pausa un po 'di audio, quale attributo aggiungeresti al tuo tag "audio"?

Ulteriori letture:

• HTML5 Rocks Video

5. Trasformazioni e animazioni CSS3

Il CSS veniva usato tradizionalmente per gestire il file layout e progettazione di una pagina web 5 piccoli passi per apprendere CSS e diventare uno stregone CSSIl CSS è la singola modifica più importante che le pagine Web hanno visto nell'ultimo decennio e ha spianato la strada alla separazione di stile e contenuto. In modo moderno, XHTML definisce la struttura semantica ... Leggi di più . Questo è ancora vero, ma nella sua ultima iterazione ha acquisito la capacità di gestire animazioni e trasformazioni di elementi e immagini.

Le persone hanno fatto cose sorprendenti con CSS3, dalla creazione di un orologio digitale alla scrittura di un gioco Pong completo. Qualcuno l'ha persino usato per ricreare i titoli introduttivi di Mad Men. È una tecnologia davvero potente e, quando viene masterizzata, può essere utilizzata per aggiungere un livello incredibile di funzionalità alla tua pagina web.

In questo capitolo, ti darò una breve introduzione a CSS3 I 5 migliori siti per imparare i CSS online Leggi di più e ti mostra come aggiungere effetti straordinari alla tua pagina.

Innanzitutto, vai su codepen.io e crea una nuova penna. Utilizzeremo questo come spazio di lavoro per la durata di questo capitolo.

Inizieremo con semplicità e creeremo una semplice trasformazione di immagine che ruota l'immagine di 3 gradi quando passa il mouse. Prima di tutto, crea un tag div e assegnagli un ID. Nell'esempio seguente, gli ho dato un ID di "muo".

5.1 Effetti Hover CSS

In quel div, includi un'immagine di tua scelta. Ho incluso una copia del logo per MakeUseOf.

Dovrai quindi scrivere alcune regole del foglio di stile. Nell'esempio seguente, ho creato un margine superiore e sinistro per dare spazio all'immagine. Ho anche incluso una regola del foglio di stile dall'aspetto curioso che inizia con "#muo: hover". Cos'è quello?

Quando colleghi ": passa il mouse" a una regola del foglio di stile, che si tratti di un elemento, un ID o una classe, stai effettivamente dicendo al browser di applicare questo stile quando il mouse governa l'elemento. Abbastanza bello, vero?

All'interno della regola "#muo: hover", abbiamo una riga che dice "-webkit-transform: rotate (3deg)". Come sono sicuro che hai indovinato, questo sta dicendo al browser di ruotare l'elemento div di tre gradi.

Tuttavia, vale la pena notare che questo tag funziona solo su Chrome e Safari. Se vuoi che il tuo codice funzioni in Firefox o Internet Explorer 9 e versioni successive, vorrai cambiare il tuo file CSS per includere le seguenti righe.

Ora, quando passi con il mouse sopra l'immagine, si presenta così:

5.2 Utilizzo di CSS3 per ridimensionare le immagini

Quindi, perché fermarsi qui? Sapevi che puoi anche usare il metodo "trasforma" per ingrandire o ridurre un'immagine. Cambiamo il nostro file CSS per includere le seguenti righe.

Come puoi vedere, ora abbiamo incluso una nuova regola di trasformazione, ma questa volta le stiamo dicendo di fare qualcosa chiamato "scala". Questo è davvero un bel modo per aumentare le dimensioni di un'immagine. Prende due parametri (quei numeri che vedi tra quelle parentesi) e rappresentano la quantità con cui aumenti l'altezza e la larghezza dell'elemento.

Come puoi vedere dal codice, aumenterò le dimensioni del logo div MakeUseOf del 50%. Puoi testare questo lavoro passandoci sopra con il mouse. Vedrai che ora il logo "MakeUseOf" è ora notevolmente più allungato.

Questa è stata un'introduzione molto delicata alle trasformazioni CSS3. Nonostante CSS3 sia davvero molto nuovo, ora puoi vedere che puoi fare molte manipolazioni molto interessanti con esso.

5.3 Mettiti alla prova

• Come si applica uno stile a un elemento quando si passa il mouse?
• Come si fa a ruotare un'immagine usando CSS3?
• Come ridimensionare un'immagine usando CSS3?
• Cosa succede se si passa il metodo di trasformazione "tradurre (50px, 50px)"?

Ulteriori letture:

HTML5 Rocks - Presentazione

6. Basta Javascript

Se si desidera utilizzare lo script nel browser Web, è necessario utilizzare Javascript Che cos'è JavaScript e come funziona? [Spiegazione della tecnologia] Leggi di più . Purtroppo non ci sono due modi per farlo. È un lingua che ha molti fan 5 Ampie opzioni della libreria di codici JavaScript per gli sviluppatori Leggi di più e anche molti detrattori. Come le lingue vanno, ha molte verruche. C'è una ragione per cui il libro più notevole sulla lingua si chiama "Javascript: le parti buone".

Sarà impossibile insegnarti come utilizzare Javascript in un singolo capitolo. Questo non è l'obiettivo qui. Lo scopo è di insegnarti abbastanza Javascript in modo che tu possa capire il prossimo capitolo, che riguarda l'uso di una tecnologia chiamata Canvas per realizzare disegni e animazioni.

6.1 Accesso alla console

Per fare ciò, utilizzeremo la console Javascript integrata in ogni copia di Google Chrome. Per accedervi, è possibile fare clic con il tasto destro su qualsiasi pagina Web e quindi premere "Ispeziona elemento". Quindi fare clic su "Console". Dovresti vedere questo.

È tradizionale che il primo programma mai scritto da qualsiasi sviluppatore in erba sia il programma "Hello World". Questo è un semplice programma che stampa la frase "Hello World" e non molto altro. Nella tua console, digita "console.log (" Hello world! ") ;.

6.2 Il tuo primo programma

Quindi, cosa abbiamo fatto esattamente? Prima di tutto, abbiamo chiamato qualcosa chiamato "console.log". Questo è un po 'di codice integrato nel computer che stampa semplicemente qualunque cosa tu gli dica. Abbiamo quindi allegato alcune parentesi ad esso e incluso le doppie virgolette "Hello World". Questo si chiama "argomenti di passaggio" e il tipo di argomento che abbiamo passato è chiamato una stringa. Ogni volta che vuoi fare qualcosa che coinvolga lettere e caratteri speciali, devi semplicemente usare virgolette singole. Tuttavia, se vuoi fare qualcosa utilizzando i numeri, di solito non è necessario utilizzare le virgolette, come mostrato di seguito.

6.3 Variabili in JavaScript

Puoi anche passare le variabili a "console.log". Le variabili sembrano complicate, ma tutto ciò che sono in realtà è uno spazio per mettere pezzi di informazioni. Questi sono spesso numeri o lettere. Per fare ciò, dichiari una variabile usando la parola chiave "var", le dai un nome e poi con un segno di uguale, le dai un valore. Quindi, creerò una variabile chiamata "ciao" e poi darò il valore di "Ciao mondo!". Lo passerò quindi a console.log.

Nota come non ho passato "ciao" a console.log usando le virgolette. Questo perché volevo stampare sulla console il contenuto di "ciao" e non di "ciao" stesso.

6.4 Cosa fanno le funzioni

Può essere un po 'noioso riscrivere ripetutamente lo stesso pezzo di codice, quindi è per questo motivo che scriviamo funzioni. Le funzioni sono più facili di quanto pensi. Tutto ciò che sono sono pezzi di codice che possiamo riutilizzare senza riscrivere nuovamente lo stesso codice. Di seguito, abbiamo creato una funzione chiamata "sup" e le stiamo trasmettendo un argomento usando le parentesi che vengono quindi registrate sullo schermo. Chiamiamo "sup" inviando alla console "sup (" Hello world! ");".

6.5 Ripetizione di un'azione con un ciclo "For"

Supponiamo di voler fare la stessa azione per un determinato numero di volte. È per questo motivo che dovremmo usare un ciclo "for". All'inizio sembrano spaventosi, ma sono così facili da fare una volta che li capisci. Inizi scrivendo "per ()".

In queste parentesi, vorremmo creare una variabile che conti quante volte abbiamo eseguito un'azione. Quindi, otteniamo qualcosa che assomiglia a questo "per (var i = 0;)".

Vogliamo quindi verificare che non abbia soddisfatto una condizione. Quindi, in questo caso, vogliamo vedere che è inferiore a 10. Quindi, dopo il punto e virgola, scriviamo "i <10". Il nostro loop ora assomiglia a questo: 'for (var i = 0; i <10;).

Se ho meno di 10, vogliamo aggiungerlo per uno e fare qualcosa. Quindi, inseriamo "i = i + 1". Il nostro ciclo è quasi finito: "per (var i = 0; i <10; i = i + 1) ". Nota come l'ultima parte non ha un punto e virgola.

Dopodiché, vorremmo fare un'azione. Quindi, dopo le ultime parentesi, scriviamo alcune parentesi graffe e tra di esse andremo a consolare il valore di i. Questo creerà un contatore che conta fino a nove.

Gli ultimi due costrutti di programmazione che esamineremo sono le dichiarazioni "if" e i cicli "while".

6.6 Se Dichiarazioni

Un'istruzione "if" esegue un'azione se viene soddisfatto un determinato criterio. Sono simili ai loop "for" nella costruzione e funzionano come segue. Supponiamo di avere una variabile chiamata "cheeseburger" e che tu voglia vedere se ha un valore di "gustoso". In tal caso, si desidera registrare "yum, cheeseburger" sullo schermo. Per fare ciò scriverai qualcosa del genere.

Nota come ho scritto "if (cheeseburger ==" gustoso ")". Si utilizzano doppi o tripli uguali per verificare l'uguaglianza e singoli uguali per assegnare un valore.

6.7 Durante i loop

Infine, un ciclo "while" esegue un'azione mentre viene soddisfatto un criterio. Quindi, immagina di voler registrare "yum, cheeseburger" mentre i cheeseburger sono ugualmente gustosi. Per fare ciò, dovresti scrivere quanto segue.

Vale la pena notare che questo entrerebbe in un ciclo infinito e dovresti evitare di fare un'azione su un valore che non è probabile che cambi. Ciò può causare il blocco del browser o il mancato funzionamento del codice.

Come ho detto prima, questa è stata una breve introduzione alla programmazione di costrutti in Javascript. Sei incoraggiato a leggere di più su questo argomento affascinante, anche se enorme.

6.8 Mettiti alla prova

• Voglio fare il conto alla rovescia da 30. Scrivi un ciclo "for" che lo farebbe.
• Voglio creare una variabile chiamata "makeuseof" e dargli un valore di "fantastico". Come è fatto?
• Voglio creare una funzione che stampa "MakeUseOf Is Awesome" quando viene chiamata. Scrivi quella funzione.

Ulteriori letture:

• "Javascript: le parti buone" di Douglas Crockford
• Guida Javascript MDN

7. Tela creativa

Canvas è una tecnologia interessante che ti consente di disegnare immagini e creare animazioni senza dover ricorrere all'uso di Flash o Silverlight. Le persone lo hanno usato per creare cose bizzarre e meravigliose, tra cui un simulatore di asciugacapelli e vari videogiochi. È una tecnologia meravigliosa e insondabilmente grande, in questo tutorial, ti darò una breve introduzione ad esso.

Vale la pena notare che Canvas funziona solo su browser web moderni. Se stai utilizzando una versione precedente di IE, Chrome o Firefox, potresti non essere in grado di seguire questo capitolo. In tal caso, dovresti prendere in considerazione il download dell'ultima versione di Google Chrome, che era il browser Web in cui ho creato questo tutorial.

7.1 Introduzione a Canvas

Prima di tutto, dovrai aprire il tuo browser web e navigare su codepen.io. Crea una nuova penna.

Ora, dovremo dichiarare un elemento canvas. Crea due tag di tela di apertura e chiusura. In essi, dovresti passargli tre attributi. Queste sono la larghezza e l'altezza dell'elemento Canvas, insieme all'ID che gli stai dando. Come prima quando hai inserito alcuni video, dovresti includere un messaggio di fallback.

Ora vorremmo scrivere del codice Javascript che disegnerà qualcosa sullo schermo. Inizieremo di base e creeremo un semplice quadrato rosso.

Creeremo una variabile (l'ho chiamata "demo"), quindi selezioniamo l'elemento canvas e lo assegniamo a quella variabile. Per fare ciò, utilizzare document.getElementByID () e passare l'ID dell'elemento che si desidera selezionare.

La seconda riga del nostro script crea un'altra variabile chiamata "contesto" e quindi chiama "demo.getContext (" 2d ")" su di essa. Questo ha detto al browser che lavoreremo su un'immagine 2d, quindi abbiamo passato le funzioni necessarie che avremmo bisogno per disegnare sullo schermo.

La terza e la quarta riga sono quelle che eseguono effettivamente il disegno sullo schermo. La terza riga riempie un rettangolo con il colore rosso, mentre la quarta riga chiama fillRect, che lo posiziona e ne definisce la lunghezza e la larghezza.

Non è impressionante però. Facciamo qualcosa di un po 'più avanzato e usiamo la magia di Javascript e Canvas per creare MakeUseOf di un logo nuovo di zecca.

7.2 Forme e testo

Eliminiamo la nostra quarta riga e sostituiamola con una che posiziona il nostro rettangolo nell'angolo in alto a sinistra e lo allunghi per la lunghezza della nostra tela.

I primi due argomenti definiscono dove vogliamo posizionare gli assi xey della forma. Impostiamo questi due su "0" per ora. Il terzo argomento si riferisce alla larghezza della forma. Impostiamolo su "200", quindi lasciamo il quarto argomento su "50". Ora dovresti avere qualcosa che assomigli un po 'a questo.

Questo è un ottimo inizio, ma non menziona affatto MakeUseOf. Quindi, aggiungeremo del testo. Creiamo una variabile contenente "makeuseof" e la chiameremo "MakeUseOf".

Vogliamo quindi creare un'altra variabile di contesto. Chiamalo "contesto2" e assicurati che sia 2d. È questo che useremo per scrivere il nostro testo.

Vogliamo che il nostro testo sia colorato di blu e che si sovrapponga al nostro quadrato rosso. Quindi, proprio come prima, vorremmo dargli un riempimento di "blu". Ora selezioneremo le caratteristiche del nostro testo. Vogliamo che sia grande 20px, formattato in grassetto e usando un carattere Arial. Chiamiamo font su context2 e gli assegniamo il valore "grassetto 20px arial".

Poiché vogliamo che questo testo si sovrapponga alla nostra casella rossa precedente, dobbiamo chiamare "textBaseLine" su context2 e dargli un valore di top. Una volta completato, chiamiamo "fillText" su context2 e le passiamo la variabile contenente il nostro testo e le coordinate xey in cui intendiamo posizionare il nostro testo. Il risultato finale del nostro codice è qualcosa del genere.

L'immagine prodotta dal codice è simile alla seguente.

7.3 Una parola su tela

Mentre questa è stata un'introduzione incredibilmente di base a Canvas, dovresti capire che è anche una tecnologia incredibilmente grande e incredibilmente potente da avviare. Questa guida è stata semplicemente un'introduzione alla creazione di grafica con questa nuova tecnologia.

7.4 Mettiti alla prova

• Aggiungi il seguente slogan all'immagine che hai creato: "Il miglior sito tecnologico di sempre!"
• Crea un ciclo "for" che viene eseguito per dieci iterazioni. Vedi se riesci a spostare il disegno sulla tela, un pixel alla volta.
• Avvolgi il tuo disegno in una funzione. Cosa succede se non lo chiami?

Ulteriori letture:

• HTML5 Rocks - Integrazione di canvas nelle tue app web.
• Casa sull'albero - Come disegnare con la tela

8. Where Next?

Grazie per aver letto la mia incredibilmente breve guida alle nuove tecnologie presenti in HTML5. È innegabile che HTML5 sia la tecnologia del futuro. Viene adottato dalla maggior parte della tecnologia, in quanto è facile da scrivere e potente oltre misura. Le persone ci fanno sempre cose incredibili, e non ho dubbi che in futuro sarai una di quelle persone. Sono onorato di aver fatto parte del tuo viaggio nel mondo selvaggio e meraviglioso di HTML5.

Ti imploro di continuare ad imparare. Continua a scrivere codice. Continua a salire di livello e migliorare e in pochissimo tempo utilizzerai le tecnologie introdotte in questa breve guida per creare prodotti meravigliosi.