Home-theater-designers
Sommario
§5–Trasformazioni e animazioni CSS3
1. Introduzione
Ne hai sentito parlare: HTML5. Lo stanno usando tutti. Viene annunciato come il salvatore di Internet, che consente alle persone di creare pagine Web ricche e coinvolgenti senza ricorrere all'uso di Flash e Shockwave.
Ma che cos'è in realtà?
Beh, non è una domanda facile a cui rispondere. In questo tutorial HTML5, cercheremo di fornire alcune risposte. HTML5 è usato per descrivere un gruppo di cose molto diversificato. È uno standard per scrivere pagine web. È una raccolta di API. È un nuovo modo di aggiungere interattività alle pagine web.
HTML5 è tutto questo e altro ancora. Allora di cosa parla questo libro?
In questo tutorial su HTML5, presumo che a un certo punto tu abbia toccato HTML e CSS. Forse hai creato il tuo tema Wordpress o modificato un layout di MySpace in passato. Forse hai letto la guida XHTML di MakeUseOf. Il punto è che presumo che tu sappia come orientarti in una pagina web e che ciò di cui discutiamo in questa guida non ti sarà troppo estraneo.
Lo scopo di questa guida non è insegnarti l'intero HTML5. Sarebbe del tutto fuori dallo scopo di questo libro. L'obiettivo è fornire una delicata introduzione a queste nuove incredibili tecnologie web e mostrarti alcuni modi interessanti per incorporarle nei tuoi siti web.
Perché vorresti imparare HTML5?
È una domanda giusta. In un mondo di smartphone e app, è davvero importante imparare a programmare le pagine web?
Beh, che ci crediate o no, è molto comune scrivere applicazioni per smartphone utilizzando le tecnologie HTML5. Fino a poco tempo fa, l'app di Facebook per Android veniva scritta utilizzando HTML5, CSS e Javascript.
Blackberry è un'altra grande azienda che è immensamente appassionata di HTML5. Ciò è evidente nell'ultima versione del loro sistema operativo mobile, Blackberry OS 10, in cui incoraggiano attivamente gli sviluppatori a sviluppare applicazioni per i loro telefoni utilizzando le tecnologie web.
Anche i nuovi smartphone Firefox OS funzionano interamente su app HTML5. Una conoscenza pratica di HTML5 è essenziale nel clima smartphone di oggi.
Inoltre, imparare HTML5 fa bene alla tua carriera. Non mi credi? Secondo Indeed.com , lo stipendio medio annuo per uno sviluppatore HTML5 è di ben 89.000 dollari. Con sempre più aziende che modificano i propri siti Web per utilizzare le tecnologie HTML5, gli sviluppatori che conoscono lo stack HTML5 sono ricercati, ora più che mai.
1.1 Prerequisiti
Questo tutorial HTML5 presuppone un paio di cose. In primo luogo, presuppone che tu sappia come funziona il web e che tu sappia come creare una pagina web di base. Dovresti essere in grado di mettere insieme alcuni elementi HTML e di presentare alcune informazioni in un browser web. Vedendo e
tag non è troppo scoraggiante e non hai paura di sporcarti le mani con il 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 palmo della tua mano. Dovresti, tuttavia, essere in grado di applicare uno stile a un elemento su una pagina web, essere in grado di collegarti a un file CSS e conoscere la differenza tra un ID e una classe e come applicare uno stile a ciascuno di essi.
Se stai grattando la testa a quanto sopra, non preoccuparti. Una delle cose migliori di HTML e CSS è che è davvero, davvero facile. In effetti, MakeUseOf ha un'incredibile guida XHTML che ti consentirà di accelerare 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à
- 6 blog per seguire grandi web designer
Avrai anche bisogno di un moderno editor di testo e browser. Qualsiasi versione di Internet Explorer precedente a IE 9 e alcune versioni precedenti di Safari, Chrome e Firefox avranno difficoltà con molte funzionalità che fanno parte di HTML5 e potrebbero impedirti di seguire questa guida.
Di conseguenza, sei incoraggiato a scaricare un browser moderno. Raccomando Google Chrome e lo userò in ogni esempio.
Oltre a ciò, tutto ciò di cui hai 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 è ciò che utilizzerai per scrivere il tuo codice. Forse ti starai chiedendo cos'è un editor di testo.
Beh, in primo luogo non è un word processor. Programmi come Microsoft Word e Pages di Apple sono totalmente inadatti allo sviluppo web. Questo perché allegano informazioni aggiuntive ai tuoi file HTML, CSS e Javascript che rendono difficile la lettura del tuo browser web.
Un editor di testo spara i caratteri in un file di testo e non molto altro. Ciò ti consente di creare file senza formattazione aggiuntiva e che possono essere salvati con qualsiasi estensione di tua scelta.
Il tuo computer ne è già dotato. Se stai usando un PC Windows, allora Blocco note è l'editor di testo che probabilmente hai installato.
Su un Mac, la situazione è leggermente diversa. OS X viene fornito con 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 nello sviluppo web e non dovrebbe essere usato da persone che sono nuove nello sviluppo del software. Non li useremo in questa guida. Tuttavia, quando si diventa un po' più sicuri con il software e lo sviluppo web, vale sicuramente la pena dare un'occhiata a Vim ed Emacs. Sono entrambi potenti editor di testo e, se padroneggiati, possono farti risparmiare un sacco di tempo.
Su Linux, l'editor di testo predefinito varia tra le distribuzioni. Su Ubuntu, è probabile che sia Gedit, che è un editor di testo piuttosto piacevole che non è troppo dissimile da Blocco note.
Tuttavia, in questo corso scriveremo il nostro codice utilizzando tre diversi strumenti.
Il primo è Sublime Text 2 . Onestamente non posso raccomandarlo abbastanza bene. Viene fornito con tutte le cose che rendono la vita più facile per uno sviluppatore principiante. Innanzitutto, renderà il tuo codice più facile da leggere 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 più bit di codice al volo.
La terza è la console Javascript integrata in Google Chrome. Questo ci consente di scrivere Javascript e vederlo in esecuzione immediatamente e verrà utilizzato per spiegare i concetti di programmazione di base.
Il secondo è un sito web chiamato Codepen.io. Questo straordinario sito Web ti consentirà di codificare HTML, CSS e Javascript nel browser ed è gratuito. Ti permetterà anche di vedere le tue modifiche istantaneamente.
2. Markup semantico
In questo capitolo imparerai il markup semantico e come organizzare il tuo codice in base al suo contenuto.
Fino a poco tempo, il codice HTML era generalmente organizzato con tag. Questi ti hanno permesso di creare un gruppo di elementi e quindi applicare uno stile a quegli elementi.
Questo ha funzionato, ma c'era spazio per miglioramenti. Il problema con i tag era che non era semantico. Div in realtà non significa nulla, davvero.
Il markup semantico è una nuova funzionalità di HTML5. Porta nuovi tag, che funzionano allo stesso modo di un tag 'div', ma servono per etichettare 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 è molto dissimile dalla maggior parte dei siti Web su cui probabilmente andrai mai, quando ci pensi.
perché il mio controller ps4 non funziona?
Diamo un'occhiata a un articolo su MakeUseOf. Noterai che c'è una parte della pagina che è riservata interamente alla navigazione verso altri articoli. Noterai anche che c'è un'altra parte della pagina che contiene le parole che costituiscono un articolo. Nella parte superiore della pagina, vedrai un'intestazione contenente il logo MakeUseOf e alcuni altri collegamenti.
Se ci pensi, molti siti web seguono queste convenzioni. La maggior parte dei siti web ha una parte riservata alla navigazione. Di solito hanno un corpo di contenuti. 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 quei gruppi.
Allora, ricordi quel codice che avevamo prima? Diamo un'occhiata con l'aggiunta di alcuni markup semantici.
Come puoi vedere, il codice è molto più facile da leggere. Sai quali sono le parti e non c'è ambiguità. Questo è importante, perché rende più facile scrivere codice buono e pulito. Se dovessi 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 semantici.
2.1 Sezione
La sezione è un tag davvero utile. Viene utilizzato per acquisire enormi quantità di informazioni e contenuti contrassegnati da 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 utilizzato per contenere tutto ciò.
2.2 Articolo
Il tag dell'articolo viene utilizzato per quello che sembra; Contenenti contenuti come un post sul blog o una notizia. Questo contenuto dovrebbe essere in grado di essere staccato dal resto del blog e avere ancora un senso coerente.
2.3 A parte
Questo tag è riservato a 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 link. Nel markup semantico, useresti un tag Header per contenere tutto questo.
2.5 Navigazione
Questo elemento è riservato alla parte di navigazione del tuo sito web. Questo 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 alla 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 realizzando una pagina web e voglio utilizzare un tag semantico per contenere una biografia su di me. Quale uso?
3. Moduli
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, come inserirle 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 di stato sul tuo social network preferito, acquisti qualcosa da Amazon o invii un'e-mail, probabilmente hai utilizzato un modulo HTML.
Quello che probabilmente non sapevi è che il modo in cui creiamo i moduli è cambiato radicalmente in HTML5. È anche significativamente migliore. In questo capitolo, esamineremo alcune delle cose interessanti che puoi fare ora, solo con il semplice vecchio markup.
Quindi, cosa c'è di così bello nel nuovo modo in cui possiamo scrivere moduli in HTML5? In primo luogo, puoi assicurarti che alcuni campi debbano essere compilati per poter inviare, semplicemente modificando 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. Quindi, supponiamo 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, puoi migliorare l'aspetto dei tuoi moduli assegnando a determinati campi un segnaposto. Ciò li renderà molto più intuitivi, in quanto puoi mostrare ai tuoi utenti un esempio di ciò che ti aspetti da un modulo.
3.1 Migliorare un modulo
Quindi, diamo un'occhiata a un modulo e vediamo come possiamo migliorarlo.
Questo modulo è piuttosto semplice. Prende un nome, un'e-mail e un colore preferito, quindi consente all'utente di inviarlo. Non contiene alcuna convalida delle informazioni che vengono inserite al suo interno e non c'è nulla che impedisca agli utenti di inviare questo modulo con alcuni campi vuoti. Cambiamo tutto questo.
Quindi, la prima cosa che vorremmo fare è assicurarci che il campo e-mail occupi solo un'e-mail. Questo era davvero un compito piuttosto difficile, poiché avresti dovuto creare tutti i tipi 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à affinché tu invii un'e-mail.
3.2 Tipi di input e modelli
Ci sono altri tipi di input, che puoi 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 elementi 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.
Vorremo anche fornire un esempio di e-mail nel nostro campo, in modo che l'utente non abbia ambiguità su ciò che deve inviare. È davvero facile da fare. Basta creare un nuovo attributo di 'segnaposto' con un indirizzo email di esempio.
Ci assicureremo che il nostro campo 'Colore preferito' sia obbligatorio. Nell'ultima parentesi angolare (>) nel tag di input Email, scrivi semplicemente 'richiesto'. Questo è tutto. Ora, quando provi a inviare il tuo modulo senza un valore, produrrà 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 alla potenza dei moduli in HTML5. Se desideri approfondire, 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 quanta torta devi creare. Apri il tuo 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 allergia con il valore 'polline, uova, quiche'.
Gioca con la forma. Prova a inviare i campi obbligatori 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 potevi inserire video o audio in una pagina web era usando qualcosa come Flash, Shockwave o SilverLight.
Questo non era l'ideale. In primo luogo, nessuno di questi framework ha funzionato così bene sui dispositivi mobili. Semplicemente non erano attrezzati per il mondo moderno di smartphone e tablet.
come aprire i file jar con java
Inoltre, erano formati proprietari. Di conseguenza, gli utenti di Linux e OS X potevano ottenere un'esperienza piuttosto scadente o addirittura non potevano consumare servizi multimediali, poiché non erano disponibili per la loro piattaforma.
Infine, avevano una propensione alla lentezza. Se fossi su un computer poco potente o meno recente, non avresti una buona esperienza di visualizzazione di video utilizzando questi framework. Flash era particolarmente noto per questo.
4.1 Come HTML5 rende video e audio fantastici
HTML5 ha cambiato questa situazione consentendo agli sviluppatori web di includere video e audio nelle loro pagine web con poche righe di codice. Funziona a meraviglia sui dispositivi mobili e funziona su tutti i browser Web moderni.
Di conseguenza, importanti aziende come YouTube, Vimeo e Netflix stanno approfittando della 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 ogni 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 video WebM, MP4 e Ogg Theora. Opera è un po' più restrittiva e consente di utilizzare solo Theora e video WebM.
Di conseguenza, devi essere un po' intelligente con il modo in cui inserisci i video nella tua pagina web. Allora, vediamo come funziona.
4.3 Iniziare con il video
Per cominciare, dovrai creare alcuni tag di apertura e chiusura. È qui che ti collegherai ai tuoi file video. Ma prima, vorrai impostare un poster. Che cosa significa?
Bene, quando aspetti che il tuo video venga caricato, la persona che visita il tuo sito può vedere un'immagine correlata al video. Per fare ciò, dai ai tag video un attributo di 'poster' con un valore dell'immagine a cui desideri collegarti. Dovrebbe sembrare come questo.
La prossima cosa che vorremmo fare è creare un fallback. Cosa significa questo? Quindi, supponiamo che tu stia utilizzando uno dei browser più vecchi e meno fantastici in circolazione. Molti di questi browser meno recenti non supportano i video HTML5 e quindi non possono riprodurre video HTML5. Dovrai lasciare loro un messaggio per informarli che vorranno aggiornare il loro browser e che fino a quando non lo faranno, non potranno guardare il tuo video.
Per farlo, scrivi semplicemente il tuo messaggio all'interno dei tag video. Nient'altro è richiesto. Una volta fatto ciò, ti ritroverai con un codice simile a questo.
Ora aggiungiamo un po' di video. Lo proverò su Google Chrome, quindi collegherò 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. Mi sono collegato a un film che è davvero molto grande e, di conseguenza, quando viene aperto si vede 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.
In primo luogo, 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 avanzare rapidamente l'audio che viene riprodotto.
Quindi, includi un tag sorgente al file MP3 a cui desideri collegarti. Non devi davvero preoccuparti più di tanto quando si tratta di compatibilità del codec. I browser Web più recenti hanno la capacità di riprodurre audio MP3, anche se è buona norma includere anche un file '.ogg' e un file '.wav', per ogni evenienza.
Infine, puoi creare un fallback per i browser meno recenti. Questo viene fatto nello stesso modo in cui hai creato il fallback per il tuo video.
Il risultato finale assomiglia un po' a questo.
Quando lo apri nel tuo browser web, dovrebbe assomigliare un po' a questo.
4.5 Mettiti alla prova
- Qual è lo scopo di avere un poster nei tag video?
- Quali codec non puoi utilizzare in Internet Explorer?
- Se volessi la possibilità di mettere in pausa un po' di audio, quale attributo aggiungeresti al tuo tag 'audio'?
Ulteriori letture:
5. Trasformazioni e animazioni CSS3
I CSS sono stati tradizionalmente utilizzati per gestire il layout e il design di una pagina web. 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 incredibili con i CSS3, dalla creazione di un orologio digitale alla scrittura di un gioco Pong completo. Qualcuno l'ha persino usato per ricreare i crediti introduttivi di Mad Men. È una tecnologia davvero potente e quando è padroneggiata può essere utilizzata per aggiungere un incredibile livello di funzionalità alla tua pagina web.
In questo capitolo, ti darò una breve introduzione ai CSS3 e ti mostrerò come aggiungere alcuni effetti sorprendenti alla tua pagina.
Innanzitutto, vai su codepen.io e crea una nuova penna. Lo useremo come spazio di lavoro per la durata di questo capitolo.
Inizieremo in modo semplice e creeremo una semplice trasformazione dell'immagine che ruota un'immagine di 3 gradi quando viene spostata. Prima di tutto, crea un tag div e assegnagli un ID. Nell'esempio seguente, gli ho assegnato un ID di 'muo'.
5.1 Effetti al passaggio del mouse CSS
In quel div, includi un'immagine a 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 un po' di spazio all'immagine. Ho anche incluso una curiosa regola del foglio di stile che inizia con '#muo:hover'. Cos'è quello?
Quando alleghi ':hover' 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 tuo mouse governa l'elemento. Abbastanza bello, vero?
All'interno della regola '#muo:hover', abbiamo una riga che dice '-webkit-transform: rotate(3deg)'. Come sicuramente avrai intuito, questo sta dicendo al browser di ruotare quell'elemento div di tre gradi.
Tuttavia, vale la pena notare che questo tag funziona solo in Chrome e Safari. Se vuoi che il tuo codice funzioni in Firefox o Internet Explorer 9 e versioni successive, dovrai modificare il tuo file CSS per includere le seguenti righe.
Ora, quando passi con il mouse sull'immagine, appare così:
5.2 Utilizzo di CSS3 per ridimensionare le immagini
Allora, perché fermarsi qui? Sapevi che puoi anche utilizzare 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 gli diciamo di fare qualcosa chiamato 'scala'. Questo è un modo davvero bello per aumentare le dimensioni di un'immagine. Richiede due parametri (quei numeri che vedi tra quelle parentesi) e rappresentano la quantità di 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 funziona passandoci sopra con il mouse. Vedrai che ora il logo 'MakeUseOf' è significativamente 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 durante il passaggio del mouse?
- Come si ruota un'immagine usando CSS3?
- Come si ridimensiona un'immagine usando CSS3?
- Cosa succede se passi il tuo metodo di trasformazione 'translate(50px, 50px)'?
Ulteriori letture:
6. Basta Javascript
Se vuoi usare lo script nel tuo browser web, devi usare Javascript . Non ci sono due modi per farlo, purtroppo. È un linguaggio che ha molti fan e anche molti detrattori. Come vanno le lingue, ha molte verruche. C'è una ragione per cui il libro più notevole sulla lingua si chiama 'Javascript: The Good Parts'.
Sarà impossibile insegnarti come usare Javascript in un solo capitolo. Non è questo l'obiettivo qui. L'obiettivo è insegnarti abbastanza Javascript in modo che tu possa capire il prossimo capitolo, che riguarda l'uso di una tecnologia chiamata Canvas per creare disegni e animazioni.
6.1 Accesso alla console
Per fare ciò, utilizzeremo la console Javascript integrata in ogni copia di Google Chrome. Per accedervi, puoi fare clic con il pulsante destro del mouse su qualsiasi pagina Web e quindi premere 'Ispeziona elemento'. Quindi fare clic su 'Console'. Dovresti vedere questo.
È tradizione che il primo programma scritto da uno 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
Allora, cosa abbiamo fatto esattamente? Prima di tutto, abbiamo chiamato qualcosa chiamato 'console.log'. Questo è un po' di codice integrato nel computer che stampa semplicemente tutto ciò che gli dici. Abbiamo quindi aggiunto alcune parentesi e incluso tra virgolette 'Hello World'. Questo è chiamato 'passare argomenti' e il tipo di argomento che abbiamo passato è chiamato stringa. Ogni volta che vuoi fare qualcosa che coinvolga lettere e caratteri speciali, devi semplicemente usare le virgolette singole. Tuttavia, se vuoi fare qualcosa usando i numeri, di solito non hai bisogno di usare le virgolette, come mostrato di seguito.
6.3 Variabili in JavaScript
Puoi anche passare le variabili anche a 'console.log'. Le variabili sembrano complicate, ma in realtà sono solo uno spazio in cui inserire blocchi di informazioni. Questi sono spesso numeri o lettere. Per farlo, dichiari una variabile usando la parola chiave 'var', gli dai un nome e poi con un segno di uguale, gli dai un valore. Quindi, creerò una variabile chiamata 'ciao' e poi le darò un 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 'ciao' stesso.
6.4 A cosa servono le funzioni
Può essere un po' noioso riscrivere lo stesso pezzo di codice più e più volte, quindi è per questo motivo che scriviamo funzioni. Le funzioni sono più facili di quanto pensi. Sono solo pezzi di codice che possiamo riutilizzare senza riscrivere di nuovo lo stesso codice. Di seguito, abbiamo creato una funzione chiamata 'sup' e le stiamo passando un argomento utilizzando le parentesi che viene quindi registrato sullo schermo. Chiamiamo 'sup' inviando alla console 'sup('Hello world!');'.
6.5 Ripetizione di un'azione con un ciclo 'For'
Supponi di voler eseguire la stessa azione per un determinato numero di volte. È per questo motivo che useremmo un ciclo 'for'. All'inizio sembrano spaventosi, ma sono così facili da fare una volta che li capisci. Inizi scrivendo 'for()'.
In quelle parentesi, vorremmo creare una variabile che conta quante volte abbiamo eseguito un'azione. Quindi, otteniamo qualcosa che assomiglia a questo 'for(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'. Our loop now looks like this: 'for(var i = 0; i < 10;).
Se i è inferiore a 10, vogliamo aggiungerlo di uno e poi fare qualcosa. Quindi, mettiamo 'i = i + 1'. Il nostro ciclo è quasi terminato: 'for(var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.
Dopodiché, vorremo fare un'azione. Quindi, dopo le ultime parentesi, scriviamo alcune parentesi graffe e tra di esse andremo a console.log il valore di i. Questo creerà un contatore che conta fino a nove.
Gli ultimi due costrutti di programmazione che esamineremo sono le istruzioni 'if' e i cicli 'while'.
6.6 Dichiarazioni If
Un'istruzione 'if' esegue un'azione se viene soddisfatto un determinato criterio. Sono simili ai cicli 'for' nella costruzione e funzionano come segue. Supponiamo di avere una variabile chiamata 'cheeseburger' e di voler vedere se ha un valore di 'gustoso'. Se lo fa, vuoi registrare 'yum, cheeseburgers' sullo schermo. Per farlo dovresti scrivere qualcosa del genere.
Nota come ho scritto 'if(cheeseburgers == 'gustoso')'. Usi double o triple equals per verificare l'uguaglianza e single equals per assegnare un valore.
6.7 Cicli durante il tempo
Infine, un ciclo 'while' esegue un'azione mentre viene soddisfatto un criterio. Quindi, immagina di voler registrare 'yum, cheeseburger' mentre i cheeseburger sono altrettanto gustosi. Per farlo, dovresti scrivere quanto segue.
Vale la pena notare che questo entrerebbe in un ciclo infinito e dovresti evitare di eseguire 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 ai costrutti di programmazione in Javascript. Sei incoraggiato a leggere di più su questo affascinante, anche se enorme, argomento.
6.8 Mettiti alla prova
- Voglio fare il conto alla rovescia da 30. Scrivi un ciclo 'for' che lo faccia.
- Voglio creare una variabile chiamata 'makeuseof' e dargli un valore di 'awesome'. Come si fa?
- Voglio creare una funzione che stampi 'MakeUseOf Is Awesome' quando viene chiamata. Scrivi quella funzione.
Ulteriori letture:
- Javascript: le parti buone di Douglas Crockford
- MDN Javascript Guida
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.
Vale la pena notare che Canvas funziona solo sui browser Web moderni. Se stai utilizzando una vecchia versione di IE, Chrome o Firefox, potresti non essere in grado di seguire questo capitolo. In tal caso, dovresti considerare di scaricare l'ultima versione di Google Chrome, che era il browser web in cui ho creato questo tutorial.
7.1 Iniziare con 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 Canvas 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 un 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 selezioneremo l'elemento canvas e lo assegneremo a quella variabile. Per farlo, usa document.getElementByID() e passa l'ID dell'elemento che desideri selezionare.
La seconda riga nel nostro script crea un'altra variabile chiamata 'context' e quindi chiama 'demo.getContext('2d')' su di essa. Questo ha detto al browser che lavoreremo su un'immagine 2D, quindi ha passato le funzioni necessarie di cui avremmo bisogno per disegnare sullo schermo.
La terza e la quarta riga sono quelle che effettivamente disegnano sullo schermo. La terza riga riempie un rettangolo con il colore rosso, mentre la quarta riga chiama fillRect, che lo posiziona e ne definisce lunghezza e larghezza.
Non è impressionante però. Facciamo qualcosa di un po' più avanzato e usiamo la magia di Javascript e Canvas per creare MakeUseOf 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 allunga per la lunghezza della nostra tela.
I primi due argomenti definiscono dove vogliamo posizionare gli assi xey della forma. Impostiamo questi due a '0' per ora. Il terzo argomento si riferisce alla larghezza della forma. Impostiamolo a '200', quindi lasciamo il quarto argomento a '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'.
Vorremo quindi creare un'altra variabile di contesto. Chiama questo 'context2' e assicurati che sia 2d. È questo che useremo per scrivere il nostro testo.
Vogliamo che il nostro testo sia colorato di blu e si sovrapponga al nostro quadrato rosso. Quindi, proprio come prima, vorremo dargli un fillStyle di 'blu'. Ora selezioneremo le caratteristiche del nostro testo. Vogliamo che sia grande 20px, formattato in grassetto e che utilizzi un carattere Arial. Chiamiamo font su context2 e gli assegniamo il valore 'bold 20px arial'.
Poiché vogliamo che questo testo si sovrapponga alla nostra precedente casella rossa, dobbiamo chiamare 'textBaseLine' su context2 e assegnargli un valore top. Una volta completato, chiamiamo 'fillText' su context2 e gli passiamo la variabile contenente il nostro testo e le coordinate x e y in cui intendiamo posizionare il nostro testo. Il risultato finale del nostro codice è qualcosa del genere.
L'immagine prodotta dal codice ha questo aspetto.
7.3 Una parola su tela
Anche se questa è stata un'introduzione incredibilmente semplice a Canvas, dovresti capire che è anche una tecnologia incredibilmente grande e incredibilmente potente per l'avvio. Questa guida è servita semplicemente come introduzione alla creazione di grafica utilizzando questa nuova tecnologia.
come chiedere il rimborso su steam
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 lungo la tela, un pixel alla volta.
- Avvolgi il tuo disegno in una funzione. Cosa succede se non lo chiami?
Ulteriori letture:
8. Dove il prossimo?
Grazie per aver letto la mia guida incredibilmente breve alle nuove tecnologie presenti in HTML5. È innegabile che HTML5 è la tecnologia del futuro. Viene adottato dalla maggior parte della tecnologia, poiché è 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 meraviglioso e selvaggio mondo di HTML5.
Ti imploro di continuare a imparare. Continua a programmare. Continua a salire di livello e a migliorare e in men che non si dica utilizzerai le tecnologie introdotte in questa breve guida per creare prodotti meravigliosi.
Condividere Condividere Tweet E-mail Vale la pena eseguire l'aggiornamento a Windows 11?Windows è stato ridisegnato. Ma è abbastanza per convincerti a passare da Windows 10 a Windows 11?
Leggi Avanti Argomenti correlati- Wordpress e sviluppo web
- HTML5
- Forma lunga
- Guida lunga
Matthew Hughes è uno sviluppatore di software e scrittore di Liverpool, in Inghilterra. Raramente si trova senza una tazza di caffè nero forte in mano e adora assolutamente il suo Macbook Pro e la sua fotocamera. Puoi leggere il suo blog all'indirizzo http://www.matthewhughes.co.uk e seguirlo su Twitter all'indirizzo @matthewhughes.
Altro da Matthew HughesIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti