Corsi Archivi » WorldTecno

Corso Bootstrap – Sesta Lezione.

luglio 8, 2017luglio 8, 2017 killrun Lascia un commento

Ed eccoci qui di nuovo, con la sesta lezione del corso bootstrap! Che come ricordiamo sempre è un corso realizzato grazie ad una collaborazione nata tra Falco96 e WorldTecno. Questa sarà una lezione veramente piena di nozioni nuove, che si andranno ad aggiungere a tutte quelle che hai appreso nelle precedenti lezioni. Quindi non perdiamo altro tempo e iniziamo subito con questa nuova lezione!

Alert

Nelle precedenti lezioni avevamo già visto questo componente fra i tanti che il framework bootstrap mette a disposizione dello sviluppatore, e quindi ricordiamo che gli alert sono come messaggi/notifiche di diverso tipo, utili per segnalare differenti tipologie di avvisi, i quali possono essere una semplice conferma di un’operazione oppure un messaggio di errore di mancata compilazione di un campo di una form, ciò come avevamo già visto è realizzabile con la classe alert-success, per il primo esempio mentre invece per il secondo esempio, alert-warning.

In questo primo screen ti mostriamo nuovamente un esempio visuale di questo componente di bootstrap, e nel caso non ti ricordassi cosa sono gli alert… Eccoti anche un esempio di codice sorgente per implementare gli alert:

Fatto un breve ripasso… Ora vediamo di introdurre qualche novità sugli alert!

Alert link

La prima novità che andiamo ad aggiungere sono gli alert link, ulteriore classe di bootstrap che se usata nel tag <a> (e quindi negli ancor link del linguaggio HTML), permette di inserire un link all’interno di un alert, di qualsiasi tipo, e di rendere automaticamente la formattazione di un link uguale a quella di un alert, nel quale il link viene inserito. Quindi se per esempio l’alert è di tipo info, quindi di colore azzurro, il link assumerà il colore azzurro, come potrai notare anche nello screen qui di seguito:

Inoltre ecco qui un esempio di codice sorgente per implementare tutto ciò!

Alert dismissing

Come avrai potuto notare all’inizio di questa lezione, e nella lezione precedente in cui avevamo già introdotto come nuovo componente l’alert, questo componente una volta apparso all’interno di una pagina web o di una schermata di una qualche applicazione web, non sia ha la possibilità di chiuderlo, e quindi di farlo scomparire in qualche modo dallo schermo… Quindi neanche l’utente finale che poi andrà ad utilizzare la nostra applicazione o visiterà il nostro sito web, non potrà intervenire e chiudere gli avvisi che compariranno sulla pagina web in cui sta navigando, o nella schermata dell’applicazione in cui esso si ritroverà! Questa mancanza non è per niente da sotto valutare, in quanto rende meno funzionale ed efficiente il nostro prodotto finale, pagina web o applicazione che sia, con l’utente che ne farà uso… Ma niente panico ovviamente c’è una soluzione che bootstrap mette a disposizione per risolvere anche questo piccolo “gap”, attraverso l’utilizzo della classe alert-dismissing. Come puoi anche vedere nell’esempio qui di seguito:

Dallo screen infatti ti sarà possibile notare che una volta implementata anche questa ulteriore classe oltre a quella standard per gli alert(alert alert-[tipo di alert]), apparirà all’interno dell’avviso, una “x”,la quale non è altro, come vedremo anche dopo nello screen del codice sorgente, un bottone gestito dalla classe button, che permette di effettuare la chiusura dell’ alert, risolvendo di fatto il problema riscontrato in precedenza! Eccoti il codice sorgente:

Come potrai notare il codice è veramente molto semplice da comprendere, in quanto non è molto diverso da quello già visto per il semplice alert standard… Ma in ogni caso, per qualsiasi dubbio a riguardo, ti consigliamo di guardare la live che troverai in fondo a questo post.

Alert container

Infine come ultima novità sugli alert andiamo a vedere gli alert container, e quindi un altro possibile utilizzo degli alert standard… L’alert container consente di usare un alert standard, e quindi il normale avviso che appare sullo schermo per notificare un qualcosa, come una pagina web vera e propria! Soluzione che può essere necessaria in alcune situazioni, anche se veramente molto rare( per esempio potrebbe essere un valida soluzione per implementare la pagina di errore 404 dei siti web). Comunque si eccoti un esempio di codice sorgente per imparare ad utilizzare gli alert container:

Da questo screen possiamo notare che per usare gli alert container viene utilizzata la classe mb-8, realizzata appositamente per questo scopo dagli sviluppatori di bootstrap. Una volta richiamata questa classe su un elemento HTML, come nel caso del nostro esempio che è richiamata all’interno di un paragrafo(<p>), possiamo poi andare ad inserire dentro l’elemento che ha richiamato la classe tutti gli elementi HTML che vogliamo, quali form, altro testo, pulsanti e molto altro ancora. Proprio come se l’alert fosse una vera e propria pagina web.

Buttons

Ora però spostiamoci su un altro argomento… E torniamo a parlare di buttons(pulsanti), a cui abbiamo già dedicato una lezione molto esaustiva sia in termini pratici che teorici, ma ciò che andiamo a vedere ora serve a completare l’intero quadro sui pulsanti e il loro utilizzo con bootstrap! Vediamo quindi le nozioni finali e aggiuntive su di essi.

Vertical buttons

Come prima novità, vogliamo mostrarti una classe dal nome btn-group-vertical, la quale permette di raggruppare tutti i pulsanti che vogliamo formando un unico gruppo che sarà integrato in un contenitore verticale attraverso un <div>. Eccoti il codice sorgente che ti aiuterà a comprendere meglio come implementare ciò:

Qui di seguito invece ti mostriamo con ulteriore screen come si presenteranno questi pulsanti una volta che il browser ha tradotto l’HTML:

Button sizing

Proseguiamo sempre con i buttons, andando a vedere in aggiunta come gestire la grandezza dei pulsanti attraverso le classi btn-bg o btn-sm. Queste classi funzionano all’interno di tutti i campi i cui pulsanti vengono supportati, come ad esempio nei link, nel submit dei form, o nei semplici pulsanti gestiti con il tag <button> dell’HTML. Eccoti quindi un esempio di codice sorgente per l’implementazione:

Ed eccoti qui anche il risultato finale:

Buttons toolbar

Chiudiamo l’argomento sui buttons, andando a vedere come sia possibile, con bootstrap, creare una barra degli strumenti(che in gergo tecnico informatico è detta “toolbar”), facendo sempre uso dei pulsanti. Eccoti quindi un codice sorgente di esempio:

Nella prima riga si può notare che prima viene creata la toolbar, poi si inserisce all’interno del tag <div> ogni gruppo di elementi della toolbar, con le classi btn-group mr-2. Ecco quindi come si presenta il tutto all’interno del nostro browser:

Wells

Dopo aver ridefinito ulteriormente due componenti già visti all’inizio di questo corso, passiamo invece a definire un nuovo componente di bootstrap, il wells. Questo componente è un pò particolare da spiegare in quanto esso è quasi simile ad un contenitore, con però caratteristiche notevoli, tanto che con esso si possono quasi definire nuovi componenti personalizzati su propria esigenza. Al suo interno inoltre è possibile inserire tante altre componenti già viste nelle lezioni precedenti, ecco un esempio visuale di tale componente:

Come potrai notare, quanto detto qualche riga sopra è pura verità, infatti con l’implementazione di default di questo componente, ci ritroveremo con uno sfondo bianco, scritte nere, ecc.., insomma quasi come un semplice div con qualche proprietà CSS applicatogli. Se noi vogliamo andare a modificare tale componente lo possiamo fare mediante un nostro CSS!

Thumbnails

Proseguiamo, con un altro nuovo componente, i Thumbnails, il quale permette di inserire all’interno della nostra pagina web, delle “miniature” (sotto forma di riquadri), con una determinate caratteristiche, nelle quali possono essere contenute ed inserite delle immagini, dei video, testo e altro ancora. Eccoti un esempio del codice sorgente per poterli implementare:

screen 15

Questo componente è molto utile in quanto permette allo sviluppatore di potere integrare all’interno di un sito web o di un’applicazione web delle sezioni in cui attraverso i thumbnails, è possibile per esempio implementare i punti di forza dei nostri servizi offerti oppure i punti di forza dei servizi offerti da un’azienda per cui si sta sviluppando tale sito o applicazione web.

Badges

Come argomento finale di questa lezione, andiamo a conoscere un ulteriore nuovo componente, anch’esso molto interessante, il quale se usato intelligentemente insieme al Javascript(o AJAX), oppure con PHP, permette di realizzare ad esempio una specie di contatore per le notifiche di una applicazione web, o un gestore messaggi all’interno di un area amministrativa di un sito web, permettendo quindi di tenere il conteggio del numero dei messaggi da leggere, il numero di notifiche arrivate oppure perché no, anche semplicemente il numero di visualizzazioni di un blog. Ovviamente ripetiamo che questo elemento può permettere di fare questo, a patto che dietro all’elemento grafico che permette all’utente l’interazione tramite mouse o touchscreen, ci sia un algoritmo fatto in PHP, oppure uno script realizzato ad esempio con il linguaggio AJAX(linguaggio web molto simile a Javascript ma con funzioni e caratteristiche un pò più avanzate), che effettua attraverso dei meccanismi appositi di calcolo il conteggio dei delle varie notifiche o quello delle visite ricevute sul blog. Eccoti un esempio di codice sorgente per la sua implementazione:

Screen 16

Esercizi

Prima di lasciarvi vogliamo proporvi alcuni esercizi da fare, per darvi così un modo per poter apprendere più velocemente le nuove nozione trattate in questa lezione.

Realizzare un form dove andate ad inserire un numero. Se l’utente ha inserito il numero 4, dovrà comparire un alert, di tipo dismissing, e di tipo success, dicendo che il numero è corretto. Altrimenti per qualsiasi altro numero, dovrà comparire un alert, sempre di tipo dismissing, di tipo warning, che avvisa l’utente che il numero inserito è errato.
Realizzare una lista di 4 pulsanti posizionati in verticale, due di grandi dimensioni, uno di dimensione standard e uno di piccole dimensioni.
Realizzare tre Thumbnails con dimensioni differenti, contenenti 3 immagini diverse, scelte a piacere.

In conclusione

Arrivati qui, diciamo che per questa nuova lezione di oggi è veramente tutto! Per completare davvero l’apprendimento delle nuove nozioni viste in questa lezione, ti consigliamo di guardarti la da noi live realizzata, e cioè da Falco96 e WorldTecno, che ti lasceremo qui sotto all’articolo! Detto questo ci auguriamo che anche quest’altra lezione sia di tuo gradimento e ti auguriamo una buona lettura e visione del video, inoltre se il video e la lezione ti sono davvero piaciuto lasciaci un bel like per il buon lavoro che stiamo facendo per te! E se ancora non sei iscritto al nostro canale di YouTube, RaffaTechPro e Falco96Tecnology ti consigliamo subito di farlo! Con questo è davvero tutto! Ti aspettiamo alla prossima lezione… Ciao! 😉

L’oggetto “window” del Javascript.

giugno 12, 2017luglio 3, 2017 killrun Lascia un commento

Ciao! In questa lezione andiamo a conoscere l’oggetto window. E’ l’oggetto principale utilizzato nel Javascript ed è rappresentato dall’intera “finestra” del browser. Se la finestra è composta da una pluralità di “frames” (cioè se ad esempio nel sorgente della pagina sono presenti degli <iframe>), il browser creerà un’oggetto window per la finestra e tanti altri oggetti “window ” per quanti sono i frame attivi nella pagina. L’oggetto window è ricco di proprietà e metodi, vediamo di seguito i più utilizzati!

Proprietà dell’oggetto window

frames – (GET) restituisce un array contenente tutti i frames presenti nella pagina;
innerHeight e innerWidth – (GET) restituisce l’altezza e la larghezza interna della finestra del browser;
lenght – (GET) restituisce il numero dei frames presenti nella finestra;
opener – (GET) restituisce il riferimento alla finestra madre che ha aperto la finestra corrente (se esiste);
outerHeight e outerWidth – (GET) restituisce l’altezza e la larghezza esterna della finestra del browser (comprende toolbar e scrollbar);
pageXOffset e pageYOffset – (GET) restituisce il valore (in pixel) dell’eventuale scroll sull’asse orizzontale e verticale;
parent – (GET) restituisce il riferimento alla finestra che contiene il frame corrente;
self – (GET) restituisce un riferimento alla finestra corrente;
top – (GET) restituisce un riferimento alla finestra principale (utile in caso di frames incapsulati).

Metodi dell’oggetto window

alert() – mostra una finestra di avviso;
close() – chiude la finestra corrente;
confirm() – mostra una finestra di dialogo con un messaggio di richiesta conferma;
open() – apre una nuova finestra;
print() – stampa (mostra a video) il contenuto della finestra corrente;
prompt() – apre una finestra di dialogo dove l’utente è invitato a scrivere qualcosa in un campo testo;
scrollTo() – esegue uno scrolling automatico del documento verso le coordinate specificate.
setInterval() e clearInterval() – imposta (ed annulla) una serie di istruzioni da eseguirsi ad intervalli di tempo prestabiliti;
setTimeout() e clearTimeout() – imposta (ed annulla) una serie di istruzioni da eseguirsi una volta dopo un dato intervallo di tempo.

Molti metodi dell’oggetto window saranno approfonditi nel seguito del corso, all’interno di lezioni dedicate come nel caso delle finestre di dialogo (alert, confirm e prompt) e delle temporizzazioni (setInterval, clearInterval, setTimeout, clearTimeout). Nella prossima lezione, invece, andremo ad approfondire l’utilizzo del metodo open() vedendo come creare e gestire finestre a comparsa (pop-up).

Corso Bootstrap: Quarta Lezione.

aprile 27, 2017aprile 27, 2017 killrun Lascia un commento

Dopo la scorsa lezione di Bootstrap, oggi siamo qui per proseguire con voi il percorso di questo corso con un’altra nuova lezione arrivando a bene a 4 lezioni totali affrontate fino ad ora. Inoltre come sempre vi ricordiamo che questo corso è nato da una collaborazione tra i due blog di tecnologia e informatica, Falco96 e WorldTecno.

Iniziamo! In questa lezione andremo a vedere come si implementano i form con il nostro caro framework Bootstrap. Vedremo di conseguenza quali classi vanno impiegate, come devono essere implementate e il loro funzionamento. Sempre inerenti ai form, vedremo anche il funzionamento e l’implementazione delle classi di input che vanno inserite all’interno dei form, e che permettono quindi al form di “prendere vita” diciamo così, in verità quello che vogliamo dire e che senza questi elementi di input un form non avrebbe molto senso! ;-P Un esempio di queste, e che vedremo anche in questa lezione, sono le textarea. Come ultima parte della lezione, andremo invece a vedere, cosa sono e come si implementano i Modal, vedremo quindi, sempre inerente a quest’ultimo argomento appena citato, un esempio pratico per capire meglio il loro funzionamento e come devono essere implementati.

Implementazione dei form con Bootstrap

Partendo con ordine, quindi parliamo dei form e della loro implementazione. I form sono degli elementi molto diffusi all’interno di siti web o applicazioni web (es. Social Network), forse i più diffusi, i quali servono all’utente per interagire con alcune sezioni del sito, e consentendogli, ad esempio, di inserire dei dati che poi dovranno essere eleborati per restituire un risultato e memorizzati per poi restituire sempre risultati diversi ai vari utenti che hanno registrato dei dati in un qualche database che si trova su un’altro PC, detto “server”, dislocato nella rete globale, che per tutti gli utenti non esperti di sistemi e reti si chiama semplicemente Internet. Inoltre i form sono molto utili anche per poter instaurare una comunicazione e un passaggio dei dati tra uno script(codice sorgente) php e un’altro, che magari si trovano in directory(cartelle) separate. Per capire più nel dettaglio il funzionamento dei form, vi consiglio di leggervi la lezione dedicata nel corso php di Falco96.

Quindi ora andiamo a vedere un esempio di implementazione classica di un form senza utilizzare il framework bootstrap, in modo da farvi capire le sostanziali differenze di implementazione e ovviamente anche quella dei risultati finali di entrambe.

Ecco come viene visualizzato all’utente finale

Possiamo vedere che con questo metodo, i form vengono visualizzati secondo lo standard HTML di rappresentazione su qualsiasi browser voi stiate usando. Questo vuol dire, che, a seconda dello standard del linguaggio utilizzato, la visualizzazione di un semplice form può cambiare leggermente(es. HTML5 renderà il form diverso da quello visto qui sopra)!

Vediamo ora lo stesso form implementato però con l’utilizzo di Bootstrap

Dal codice, possiamo notare, che abbiamo usato la classe form-control, per permettere al framework bootstrap, di poter gestire ogni componente del form e adattarlo anche al proprio CSS in modo da avere una visualizzazione grafica degli elementi al suo interno oltre che una parametrizzazione grafica differente del form stesso. Abbiamo poi usato la classe btn btn-primary, per creare un pulsante principale, i pulsanti sono i protagonisti della lezione precedenti ricordi? Altrimenti ti consigliamo di vederti prima la scorsa lezione!

Vediamo come viene visualizzato questo form

Come possiamo notare da quest’ultimo screen, ogni elemento di testo occupa l’intera pagina, ma niente panico, ci siamo qui noi! Per regolare le dimensioni dei componenti del form, dobbiamo andare ad agire sul sistema di layout della pagina o del form stesso. Ad esempio se noi andiamo ad impostare un layout a griglia, con la classe container, e gli andassimo, con il css, ad impostare una determinata larghezza, tutti gli elementi contenuti all’interno del layout verranno adattati di conseguenza! Visto come è flessibile e potente Bootstrap? 😀

Vediamo ora un esempio pratico di implementazione del codice

In seguito alla modifica apportata al codice standard, eccovi il risultato previsto

Come possiamo notare, di default, quando andiamo ad impostare una larghezza molto bassa, in questo caso solo 400 pixel, il framework sposta e adatta tutti gli elementi al centro della pagina, ma se noi invece li volessimo allineati verso il bordo sinistro, per esempio, non dobbiamo fare altro che specificarlo nel nostro CSS andando ad impostare dei parametri diversi! Tutto qui niente di più semplice, no?

Continuando con la lezione, passiamo a vedere un’esempio di implementazione pratica dei vari elementi di un form.

Le Textarea

Le textarea dei form non sono altro che quelle “aree di testo” in cui un utente può inserire del testo, immagini, ecc…, ma in particolare quando si parla di textarea di un form in genere si fa riferimento ad un area in cui si inserisce il messaggio che un utente(mittente) vuole spedire ad un altro utente(destinatario).

Detto ciò, vediamo come prima cosa, come si presenta una textarea di un form, senza applicare alcuna classe del framework bootstrap,

Ecco quindi come viene visualizzata all’interno della nostra pagina html,

Ora vediamo invece come implementare la stessa textarea, ma applicandovi il framework bootstrap,

Possiamo notare che la classe utilizzata, anzi le classi utilizzate, in questo caso per la textarea sono: form-control custom-control.

Vediamo infine come viene visualizzata dopo aver utilizzato su di essa le classi del framework boostrap,

Direi che la parte riguardante i form sia conclusa, per il momento! Successivamente, in particolare nelle prossime lezioni di questo corso tratteremo tutti gli altri elementi di un form analizzandone tutte le caratteristiche.

Modal(detti in italiano modali)

I Modal possono essere visti come dei pulsanti che una volta premuti generano dei veri e propri box-contenitori di elementi attraverso un effetto “pop-up over“(effetto di caricamento di un elemento su un pannello invisibile al di sopra della pagina in cui ci si trova), questi ultimi sono gestiti dal framework bootstrap attraverso il linguaggio Javascript, e consentono di mostrare per l’appunto dei contenitori di altri elementi, e ciò avviene proprio quando l’utente cliccando su un determinato pulsante o link, richiama attraverso l’azione appena effettuata la funzione onClick del linguaggio Javascript la quale raccoglie l’evento generato dal click del mouse o di un pressione su schermo(se si utilizza un dispositivo di tipo touchscreen) sul pulsante e quindi attiva la classe css che costruisce il componente modal su un pagina trasparente sovrapposta a quella in utilizzo(siamo stati ripetitivi in questa parte perchè vogliamo farvi comprendere a pieno come avviene la creazione del modale una volta implementato il suo codice). Come già detto, quindi, questa determinata funzione Javascript controlla se l’utente ha premuto un determinato pulsante o link, se lo ha fatto, allora genera un evento, chiamato per convenzione, elemento click, che fa eseguire ad un programma creato in linguaggio Javascript, una determinata operazione o una serie di operazioni, che in questo caso portano alla visualizzazione di un modal, il quale può essere usato come ulteriore contenitore dove poter comunicare all’utente un qualche messaggio o avviso, o poter far compiere una determinata operazione ad un utente, come ad esempio l’inserimento di alcuni dati o settaggi da salvare per visualizzare ad esempio la propria area utente nel modo voluto. Possiamo quindi chiudere qui il discorso generale sui modal, dicendo che in essi è possibile inserire qualsiasi cosa uno sviluppatore voglia inserire, quindi potete d’ora in poi dare sfogo alla vostra creatività!

Vediamo ora un esempio pratico,

Innanzi tutto possiamo notare che nel codice abbiamo dovuto inserire un pulsante, in questo caso un link che tramite la classe btn btn-primary diventa un pulsante come uno di quelli visti nelle lezioni precedenti. Successivamente, in questo pulsante, bisogna inserire il data-toggle, specificando, con la parola chiave modal, che ci si sta riferendo ad un modal. Poi in data-target, specificare il nome del modal, che sarà poi l’ID del modal che dovrà apparire sullo schermo dell’utente che l’ha attivato. Il modal, gestito da svariate classi bootstrap, deve avere obbligatoriamente lo stesso nome specificato nel data-target del pulsante di chiamata! Altrimenti aspettatevi brutte sorprese! ;-P

Nella live, che troverai in fondo all’articolo, vedrai più nel dettaglio questo esempio. Troverai qui tutta la documentazione, che ti può servire.

In conclusione

Questa che hai appena letto era tutta la carrellata di argomenti che abbiamo trattato nella quarta lezione. Speriamo che questa nuova lezione ti sia piaciuta e ci auguriamo di averti aiutato a conoscere e ad imparare a padroneggiare nuovi aspetti utili di questo framework che potrai utilizzare per i tuoi progetti! Inoltre speriamo di avere suscitato ulteriore interesse nel proseguire questo corso insieme a noi! Se questa lezione ti è veramente piaciuta faccelo sapere con un bel like al video e all’articolo! 😉 e lascia un commento per qualsiasi cosa tu voglia farci sapere! 😀 Prima di salutarti vogliamo ricordarti che qui di seguito ti lasciamo una serie di esercizi da svolgere per apprendere più velocemente questi nuovi argomenti e accrescere sempre di più le tue competenze con questo potente framework! Eccoti gli esercizi che proponiamo con questa lezione:

Realizza un form, con le rispettive classi bootstrap, dove poni un semplice questionario in cui l’utente dovrà inserire qualche dato personale, quale il nome, il cognome, e altri dati simili. Accetta questi dati tramite il metodo post (visto nel corso php), e stampali all’utente all’interno di un avviso di info (quindi usando alert-info);
Realizza un piccolo form, con una textarea, simulando la sezione commenti in un blog. Segnala che il commento è stato ricevuto, una volta inviato, usando il metodo post (seguendo il corso php), con un messaggio di conferma (quindi usando alert-success);
Realizza un pulsante, chiamato “clicca qui”. Una volta cliccato, mostra un modal, con all’interno un messaggio a tua scelta.

Con questo è tutto! Vi aspettiamo alla prossima lezione, ciao! ;-D

Corso Bootstrap: Terza Lezione.

aprile 13, 2017aprile 27, 2017 killrun Lascia un commento

Eccoci qua con la terza lezione del corso Bootstrap, realizzato in collaborazione tra falco96 e worldtecno, due blogger e appassionati di informatica e di programmazione.

In questa nuova lezione del corso Bootstrap, andremo ad approfondire parte dei concetti visti nella lezione precedente! In particolare il tanto “acclamato” grid layout e il sistema fluid, introdotto in modo diverso nella quarta versione del framework in questione. Inoltre in questa lezione andremo a vedere altri due elementi principali, che si usano maggiormente, durante lo sviluppo di una qualsiasi interfaccia realizzata mediante il framework Bootstrap. Detto ciò iniziamo!

Approfondimenti della lezione precedente.

Nella scorsa lezione avevamo detto che nella versione 4.0.0 di Bootstrap, è stata rimossa la classe fluid per la gestione dei layout. La classe fluid, come dicevamo, serve per gestire in modo automatico ogni elemento della pagina che si sta andando a realizzare in modo tale che si adatti nel modo più intelligente rispetto allo schermo che l’utente sta utilizzando. La classe fluid rimossa in verità è stata integrata in parte nella classe container. Sostanzialmente, con il semplice richiamo della classe container, necessaria per aprire un sistema di layout, si abilitano anche tutte le funzioni fluid. A differenza delle precedenti versioni del framework, in quest’ultima è necessario effettuare qualche piccola personalizzazione tramite un css personalizzato dallo sviluppatore, per adattare il layout ad hoc per il proprio progetto! Vediamo un piccolo esempio di ciò che abbiamo appena detto:

Questo è un esempio di implementazione della classe container!

Andiamo invece ora a vedere un esempio di personalizzazione manuale di una o più classi del framework bootstrap, tramite un css personalizzato:

Questo tipo di personalizzazione è resa possibile grazie al fatto che Bootstrap è un framework totalmente open source, e quindi adattabile e personalizzabile in ogni modo possibile!

“Come si devono effettuare le personalizzazioni manuali, all’interno del proprio file css?”

Per fare questo è molto semplice, infatti basta richiamare all’interno del foglio di stile, il nome della classe che si vuole modificare e all’interno della classe, riscrivere e quindi impostare un valore alternativo, ad ogni valore standard preimpostato nella classe default di bootstrap a cui si desidera apportare la modifica. In questo modo si può modificare, in modo mirato, ogni singolo aspetto del framework!

Due nuovi componenti fondamentali e popolari di Bootstrap.

Ora andremo a vedere due, tra i più importanti, elementi che si possono realizzare tramite bootstrap. Il primo elemento è l’alert, il quale fornisce un modo per segnalare all’utente che utilizza il sito o l’applicazione da noi realizzata, con diversi colori e diversi tipi di messaggi, alcuni avvisi di notifica del sistema, che vanno dal classico messaggio informativo, a quello di conferma, fino ad arrivare al messaggio di errore tecnico. Infatti ci sono ben 4 classi default di bootstrap per poter gestire al meglio il componente alert. Ogni classe presenta una caratteristica differente per l’alert che si vuole implementare:

Alert info: gestisce i messaggi classici informativi. Questi messaggi sono di colore azzurro. Il codice da implementare per richiamare la classe che realizza questo specifico componente è: alert alert-info;
Alert success: gestisce i messaggi classici di conferma. Questi messaggi sono di colore verde.Il codice da implementare per richiamare la classe che realizza questo specifico componente è: alert-success;
Alert warning: gestisce i messaggi classici di errore generale causato dall’utente “sbadato”. Questi messaggi sono di colore arancione. Permettono di avvisare l’utente di un’eventuale errore. Per esempio si può usare questo tipo di avviso per segnalare un dato inserito male da parte dell’utente in un form di registrazione o login. Il codice da implementare per richiamare la classe che realizza questo specifico componente è: alert-warning;
Alert danger: gestisce i messaggi classici per errori tecnici o errori del sistema. Questi messaggi sono di colore rosso.Il codice da implementare per richiamare la classe che realizza questo specifico componente è: alert-danger.

Vediamo ora un esempio grafico di questi componenti presentati:

Vediamone anche la loro possibile implementazione:

Nota bene: Per implementare correttamente questi componenti, essi necessitano di essere inseriti nel tag <div>!

Passiamo a vedere ora un altro utile e utilizzatissimo componente di Bootstrap, ovvero il button. Esistono 5 tipi di pulsanti in bootstrap. Vediamo come è possibile implementarli e come essi si presentano all’interno di una pagina web o di un’applicazione. Iniziamo col dire che i pulsanti in bootstrap non vengono usati solo tramite il tag <button>, come si potrebbe pensare, ma si possono invece implementare anche inserendoli nei tag <a href=”…”>, richiamando la corrispondente classe btn di bootstrap, la quale serve proprio per permettere l’implementazione di tale componente, oppure “dulcis in fundo” attraverso il tag input con all’interno sempre il richiamo della classe btn. In ogni il caso, il risultato grafico ottenuto risulterà praticamente invariato.

Vediamo quindi tutti i pulsanti disponibili:

btn-default -> Pulsante di colore bianco, utile per indicare all’utente un’azione secondaria. Per esempio si può utilizzare come pulsante per tornare alla pagina precedente. In bootstrap 4.0.0 questo elemento è stato ridefinito come btn-secondary, appunto per far comprendere meglio che è un pulsante per azioni secondarie. Il codice per implementarlo è: btn btn-default, o btn btn-secondary (con bootstrap 4 in poi).
btn-primary -> Pulsante di colore blu, utile per indicare all’utente un’azione principale, come per esempio il pulsante submit di un form. Il codice per implementarlo è: btn btn-primary.
btn-success -> Pulsante di colore verde, utile per indicare all’utente un’operazione andata a buon fine. Questo tipo di pulsante può essere implementato subito dopo, ad esempio, di un avviso di tipo alert-success, per rendere ancora più chiaro il processo completato con successo. Il codice per implementarlo è: btn btn-success.
btn-warning -> Pulsante di colore arancione, utile per indicare all’utente un errore, per esempio, di inserimento dati da parte dell’utente. Questo pulsante per esempio può essere implementato subito dopo un avviso di tipo alert-warning, per rendere ancora più chiara la presenza di un errore. Il codice per implementarlo è: btn btn-warning.
btn-danger -> Pulsante di colore rosso, utile per indicare all’utente la presenza di un errore tecnico o comunque di un errore grave. Questo pulsante, per esempio, può essere implementato subito dopo un avviso di tipo alert-danger, per rendere ancora più chiaro la presenza di un errore di natura tecnica. Il codice per implementarlo è: btn btn-danger.

Vediamo, nello screen di seguito riportato, un esempio di implementazione:

Ecco quindi come vengono visualizzati questi pulsanti, una volta implementati:

Nota bene: Molti di voi forse hanno notato che, sia per gli avvisi, gestiti dalla classe alert, sia per i pulsanti, gestiti dalla classe btn, è necessario richiamare per l’appunto, prima queste due classi principali, quindi per esempio nel caso dei pulsanti, va richiamata prima la classe btn e poi successivamente si va a richiamare la classe specifica al pulsante che si desidera implementare. E’ importante non omettere nessuna delle due classi, per implementare gli avvisi o i pulsanti, altrimenti, come vedrete anche dal video, si presentano dei gravi problemi di visualizzazione, dovuti ad una scorretta implementazione.

In conclusione

In questa terza lezione abbiamo dato un’occhiata a tutta una serie di differenti implementazioni di due fra gli elementi principali, che si utilizzano con Bootstrap, gli Alert e i Button. Quindi da questa lezione in poi avete già la piena conoscenza di ben 4 componenti(Navbar, Footer, Form, Alert e Button) che potete usare a vostro piacimento, per implementare delle pagine già piuttosto complete, con questo framework. Ma prima di lasciarvi, vi lasciamo qualche piccolo esercizio, che potrete svolgere, se volete, per potervi esercitare con questi nuovi concetti visti in questo corso sul framework bootstrap:

Implementare un form (introdotti nella prima lezione di php) che permetta di inserire all’utente dei dati (a vostra scelta). Come pulsante di submit, usate il pulsante primary di bootstrap. Infine, controllate che l’utente abbia inserito i dati, e nel caso non l’abbia fatto, avvisarlo con un avviso informativo (quindi con la classe alert-info);
Implementare un form (introdotti nella prima lezione di php) che permetta di inserire un numero all’utente. Come pulsante di submit, usate il pulsante primary, Successivamente fate un controllo (dalla seconda lezione del corso php è stata introdotta la forma condizionale). Se il numero è maggiore di 10, mostrate un messaggio di conferma, con la classe alert-success, altrimenti, se il numero è minore di 10, mostrate un avviso di errore, con classe warning. In entrambi gli avvisi, usate rispettivamente il pulsante btn-success, vicino all’avviso di conferma e btn-warning, vicino all’avviso di un errore.
Implementare una navbar e un footer in una pagina, elementi visti nella seconda lezione.

Infine vi rimandiamo come sempre alla prossima lezione di questo corso bootstrap, e vi ringraziamo come sempre infinitamente per le vostre visualizzazioni, condivisioni e mi piace che rilasciate ai nostri articoli sui nostri blog e ai video dei canali YouTube, per qualsiasi approfondimento, informazione o chiarimento non esitate a mettervi in contatto con noi! Detto ciò vi salutiamo augurandovi un buon proseguimento ed una buona programmazione con bootstrap, ciao! 😉

Corso Bootstrap: Seconda lezione.

marzo 27, 2017aprile 27, 2017 killrun Lascia un commento

Circa una settimana fa uscì l’introduzione del corso Bootstrap, creato in collaborazione tra Falco96 e WorldTecno. Visto il gran numero di feedback positivi che è stato riscontrato dall’inizio di questo corso, eccoci qui a portarvi la prima e vera lezione! Dopo la parte di introduzione, in questa nuova lezione si inizia veramente a toccare con mano il framework Bootstrap e tutte le sue caratteristiche e particolarità che lo compongono e lo distinguono da altri framework!

Premessa

Prima di iniziare con questa lezione, è bene introdurre qualche concetto fondamentale, che ci tornerà di grande aiuto nelle prossime lezioni del corso, in quanto ci aiuterà a comprendere meglio la struttura del framework che stiamo insegnandovi ad utilizzare. Nella scorsa puntata, abbiamo accennato al fatto che per poter usufruire al meglio di tutte le potenzialità di Bootstrap sarebbe bene conoscere, per lo meno in modo base, il CSS, l’HTML e il JavaScript, che per altro sono i linguaggi che costituiscono Bootstrap stesso. Quindi per chi non li conosce per nulla è bene studiarsi prima questi linguaggi, mentre chi già padroneggia o quasi questi 3 linguaggi nel seguito del corso se non è in grado di gestire un qualche problema non esiti a chiedere che noi daremo i giusti riferimenti a chiunque per poter ripassare anche le cose più avanzate della programmazione web! E ora iniziamo per davvero!

Partiamo dal CSS

Qual’è il concetto delle classi in CSS?

Questo è il primo quesito che bisogna porsi prima di buttarsi nella programmazione web con Bootstrap, dal momento in cui sappiamo che Bootstrap è un framework basato quasi al 100% molto sul linguaggio CSS. Infatti potremo vedere, anche nel corso di questa lezione, che ci sono tantissime classi CSS che il framework mette a disposizione. Ma cosa sono le classi?

Le classi sono delle sezioni di codice, scritti in file CSS(in questo particolare caso nei file CSS del framework Bootstrap), che ci permettono di impostare tutta una serie di personalizzazioni grafiche che poi potranno essere applicate a diversi elementi realizzati in html. Eccovi un esempio:

supponiamo di voler creare delle pagine in html, dove tutti i <div> hanno un’altezza pari a 800px, una larghezza pari a 200px e un determinato colore di sfondo. Infine supponiamo che questo tipo di personalizzazione sia applicabile anche ad altri elementi, come i paragrafi. Come è possibile fare ciò?

Semplice! Tramite l’utilizzo di un file CSS creato appositamente da noi, quindi andiamo a realizzare una classe CSS, che andremo a chiamare personalizzazione:

Una classe in un file CSS, si implementa mettendo un punto, seguito dal nome della classe (possiamo assegnare un nome che vogliamo). E tra le parentesi graffe, ci dovranno essere tutte le personalizzazioni da applicare.

.personalizzazione {

//corpo della classe con parametri di personalizzazione

}

Per richiamare la classe attraverso il file HTML nel quale si vogliono includere le personalizzazioni, è una cosa molto semplice. Infatti basta semplicemente richiamare il percorso del file CSS attraverso il tag <link rel=”stylesheet” type=”text/css” href=”nome_file.css”/>, dopodiché sarè solamente necessario usare l’attributo class all’interno di ogni tag element del corpo HTML, e quindi successivamente specificare tra i doppi apici il nome della classe(“nome_classe”) che è stata implementata all’interno del file CSS. La Stessa cosa che accade anche con Bootstrap, infatti questo framework ci mette a disposizione tantissime classi, che noi possiamo richiamare senza problemi.

E se una classe avesse bisogno di essere personalizzata?

Ci potrebbero essere molti casi in cui una classe fornita da Bootstrap abbia bisogno di piccole personalizzazioni, per adeguare l’aspetto di quest’ultima con le proprie esigenze. Ma come si fa a modificare una determinata classe? Beh semplicemente è necessario riassegnare un nome alla classe utilizzando come target un ID quindi oltre all’attributo class va utilizzato quello id, e poi nel proprio file CSS, scrivere il nome ID assegnato all’elemento, preceduto dal simbolo #, seguito poi dalle modifiche personali che si vogliono applicare alla classe standard del framework. Tutto ciò che voi non inserite all’interno della classe personalizzata, verrà lasciato negli standard di Bootstrap! Si sa che questo concetto potrebbe non essere semplice per tutti, ma e per questo motivo che vi consigliamo, di guardare il nostro video che posteremo anche in fondo a questo articolo. All’interno della video lezione, verranno spiegati e trattati tutti questi concetti in modo molto più semplice e sicuramente più approfondito!

Passiamo al Javascript

Concetto alla base delle animazioni in Javascript:

Un altro concetto che bisogna assolutamente approfondire è tutta la parte sul Javascript! In particolare modo tutta la parte sulle animazioni gestite dai file javascript di Bootstrap applicate agli elementi realizzati attraverso le classi CSS descritte inizialmente. Il Javascript è un linguaggio di scripting web (cioè che permette di inserire istruzioni simili a quelle di un linguaggio di programmazione ad alto livello) che viene eseguito dal vostro computer (nonchè dal lato client, infatti questo linguaggio è anche elencato nei linguaggi lato client). Questo linguaggio quindi si occupa di gestire in modo più dinamico tutta la parte di interazione con l’utente(come ad esempio l’input e l’output delle periferiche di un sistema di elaborazione, o ad esempio le animazioni di alcuni elementi di una web app o di un sito web). Detto meglio si occupa della gestione dinamica dell’interfaccia grafica di un’applicazione o di un sito web attraverso degli script che permettono di applicare oltre che delle animazioni anche una logica di programmazione di un qualche elemento presente nel sito web o nell’applicazione web, e per logica di programmazione si intende la possibilità di impartire dei comandi su dei componenti attraverso delle operazioni matematiche o grafiche.

Come vedremo anche nel video, in Bootstrap, il linguaggio Javascript inoltre copre un ruolo fondamentale per gestire le animazioni delle navbar, dei footer, dei pulsanti, e copre un ruolo fondamentale per rendere tutte le pagine completamente responsive, ovvero pagine che si adattano automaticamente, senza la necessità che il programmatore intervenga manualmente per migliorare la visione di un applicazione su dispositivi mobili, piuttosto che computer o, per chi ad esempio utilizza schermi ancora più grandi, come le smart TV o monitor di grandi dimensioni.

Per altro abbiamo già spiegato, anche nell’introduzione, che Bootstrap ha un grande punto di forza, che è proprio quello di essere un framework del tutto responsive e quindi permette agli sviluppatori di potere realizzare progetti veramente fatti bene graficamente e che funzionano bene su qualsiasi dispositivo che l’utente utilizza! Tutto questo è dovuto anche grazie all’utilizzo di due sistemi di layout. Infatti questo framework fa uso di due schemi di layout differenti fra di loro e ben definiti. Uno detto “Grid System“, il quale permette di suddividere lo schermo di un dispositivo in una “griglia“, dove è possibile andare a posizionare i vari elementi in differenti modi in base alle proprie esigenze di progettazione del sistema che si vuole realizzare. Mentre il secondo sistema prende il nome di “fluid layout“, e questo perché esso richiama un impostazione di layout predefinita, realizzata attraverso dei parametri CSS e che viene gestita in modo totalmente automatico da Bootstrap, che va quindi ad impostare la posizione dei vari elementi sulla pagina dell’applicazione o del sito web che si sta realizzando.

Osservazione: Per gli utenti più geek e smanettoni(quindi anche più esperti), ci teniamo a sottolineare per quelli non informati o poco informati, che il fluid layout non viene quasi più usato nella versione 4 di Bootstrap, in quanto viene visto come il layout standard del framework, quindi viene consigliato l’utilizzo del sistema a griglia dalla versione 4 di Boostrap per via dei vari miglioramenti apportati al sistema!

Tuttavia come nel caso precedente, in cui ti abbiamo parlato delle classi CSS, ti consigliamo di guardare il video postato sotto, per capire meglio anche quest’altro concetto che magari per alcuni non è poi così facile da capire, e che inoltre è di fondamentale importanza come tutti il resto di questo articolo! Infatti, nella video lezione, vengono spiegati veramente bene l’importanza della conoscenza del linguaggio JavaScript e dei due sistemi di layout appena citati.

Il Sistema di layout a griglia di Bootstrap

Andiamo ora a vedere più da vicino, e con un piccolo esempio, il “grid system” già descritto.

Grid System

Ecco un esempio del layout a griglia

Ecco quindi come si vede

Ora vediamo un confronto con il layout fluid

Come potete vedere dall’immagini appena qui sopra che dal punto di vista dell’implementazione del fluid layout, nel codice HTML basterà aggiungere fluid dopo la parola container all’interno del attributo class, per poter applicare questo tipo di layout ai vari elementi della pagina!

Ed infine vediamo quindi come si vede anche quest’altro layout

Come potrete notare dall’immagine sopra, la piccola lista ordinata che abbiamo creato, si è auto adattata alla pagina allineandosi al bordo dello schermo senza alcuna modifica ulteriore da noi apportata nel codice sorgente della pagina!

Passiamo ora ad introdurre qualche componente della famiglia di Bootstrap

Alcuni elementi di base del framework

Dagli screen che abbiamo appena visto, è possibile intravedere già alcuni elementi di base di questo framework, che possiamo andare ad utilizzare tramite il richiamo di alcune classi del framework Bootstrap, e quindi possiamo dire che questo framework mette a disposizione dello sviluppatore svariati componenti realizzati per l’utilizzo standard del framework e diciamo standard perchè come già detto nell’introduzione a tale corso, Bootstrap è un framework totalmente open source e quindi è possibile contribuire al progetto estendendo o realizzando nuove funzionalità, nuovi elementi, nuove animazioni, ecc.. da parte di qualunque sviluppatore singolo o team di developer che sia!

Uno degli elementi che compaiono nei nostri screen è la navbar, ovvero la nota barra di navigazione, dove vengono posizionate tutte le pagine principali di un sito web o altri elementi utili e che devono essere facilmente visibili dall’utente finale, vediamola di nuovo

L’altro elemento è il footer, anche esso molto importante in quanto in esso spesso si inseriscono i link ai social network in cui per esempio è possibile seguire il progetto di un qualche blog, oppure è possibile inserire il copyright del sito web. Insomma in tale sezione è possibile inserire una serie di informazioni utili e aggiuntive o altro ancora, in modo da rispecchiare ancora meglio la figura del sistema realizzato, vediamo quindi di nuovo anche quest’ultimo elemento descritto

Nel video troverete accenni ad altri elementi, i quali saranno comunque presentati e descritti più dettagliatamente e accuratamente, come anche i due introdotti in questa lezione, nei prossimi video e quindi nelle prossime puntate di questo corso!

Per concludere

Vi consigliamo vivamente e ancora una volta di guardare interamente tutto il video, che posteremo anche qui sotto all’articolo, per comprende al meglio e in modo più approfondito i vari argomenti trattati in questa lezione, e inoltre per poter vedere molto meglio anche gli esempi pratici fatti! Sperando che questa nuova lezione di questo corso vi sia piaciuta, vi salutiamo augurandovi un buon proseguimento ed una buona programmazione! Noi vi rimandiamo e vi aspettiamo alla prossima lezione, ciao! 😉

Corso Boostrap: introduzione.

marzo 17, 2017aprile 27, 2017 killrun Lascia un commento

Ciao a tutti utenti di Falco96 e WorldTecno, oggi siamo qui, con questo articolo, ad annunciarvi l’uscita di un nuovo corso, nato dalla collaborazione tra Falco96 e WorldTecno! Questo due blog trattano entrambi esclusivamente argomenti in tema informatico e tecnologico di qualsiasi tipo! Questa unione è stata decisa proprio dai creatori dei due blog in questione, che essendo due programmatori informatici appassionati e accaniti, oltre che grandi amici nella vita reale e colleghi nel mondo del lavoro, hanno voluto iniziare a collaborare per portare all’utenza e ai principianti del settore informatico un corso puramente mirato alla programmazione di web app e sviluppo di siti web dinamici attraverso il oramai famoso e amato framework boostrap! Ultima nota introduttiva da parte nostra per gli utenti che già ci seguono ma anche per chi speriamo ci inizi a seguire, questo nuovo corso sarà correlato in parallelo con i due corso trattati separatamente dai due creatori di WorldTecno e Falco96, ovvero il corso Javascript di WorldTecno e quello di PHP realizzato invece da Falco96. Dopo questa lunga prefazione del corso e di questo primo articolo dedicato alla sua introduzione, vediamo subito di entrare nel vivo dell’argomento di oggi!

Che cos’è Bootstrap?

Per prima cosa è indispensabile, per chiunque non lo sapesse, presentare il protagonista di questa serie di articoli, nonché Bootstrap, un framework che si basa sui vari linguaggi web: CSS, HTML e Javascript. Questo framework è stato realizzato da Mark Otto e Jacob Thornton, due Developer del famoso social Twitter, esso doveva servire a realizzare e successivamente a gestire tutta l’interfaccia grafica del social network. Boostrap, si è subito dimostrato un framework davvero molto valido per realizzare applicazioni web o siti web con dei layout totalmente responsive, e cioè adattabili sia ai dispositivi mobile (come smartphone e tablet), fino ad arrivare agli schermi più grandi, quali, per esempio, le smart TV. L’interfaccia grafica che si riesce a realizzare con questo framework, infatti, riesce ad auto adattarsi a seconda della grandezza dello schermo con cui un utente sta visualizzando l’applicazione o il sito web. E tutto questo senza che il programmatore, che realizza il progetto, debba scrivere molte righe di codice in più per consentire questa scalabilità.

Nel 2011 Twitter, visto l’andamento che il framework stava intraprendendo, decise di rilasciare questa tecnologia in licenza gratuita agli sviluppatori di tutto il mondo, sotto forma di progetto open source, quindi non solo lo rese gratuito ma rese anche libero il sorgente per tutti coloro che volessero sviluppare altrettanti progetti basandosi su Boostrap. Attualmente è presente la versione 3.3.7 stable di questo framework, scaricabile tramite questo link, ma è disponibile l’ultima versione 4.0.0, anche se ancora in fase di sviluppo (sviluppo quasi terminato), ed è scaricabile tramite quest’altro link. Oltre alla versione core del progetto, che come dicevamo è totalmente gratuito, sono disponibili tutta una serie di strumenti che la community mette a disposizione, alcuni totalmente gratuiti mentre altri sono a pagamento,di tutti gli utenti che utilizzano questo framework, come per esempio dei template, anche molto professionali, che potrete trovare qui. Ovviamente i template a pagamento servono per permettere a Twitter, di portare avanti questo progetto e di mantenerlo gratuito e open per tutti!

Come funziona Bootstrap?

Bootstrap si presenta come un’insieme di file css e javascript racchiusi in determinate cartelle. All’interno della cartella css, troverete tutti i fogli di stile che compongono la struttura grafica di bootstrap, che vedremo nel corso di questa serie di tutorial, mentre all’interno della cartella javascript troverete tutti gli script che servono al framework per gestire i vari effetti e le varie animazioni degli elementi composti dalle classi css e dai tag HTML, come per esempio, le animazioni del menu di navigazione! A livello base per poter usare il framework, dovrete importare, tramite il tag <link href=”…”> di html, il file bootstrap.min.css, questo discorso vale sia per quanto riguarda la versione 3.3.7, che per la versione 4.0.0, c’è da dire che esiste anche un altra modalità più semplice e veloce per i meno esperti di programmazione web, ovvero la CDN (Content Delivery Management) che trovate sulla wiki del sito Boostrap nella sezione “getting started“, la quale permette attraverso il richiamo di directory(cartelle) situate su dei serve MaxCDN vanno ad inserire direttamente nel documento HTML tutto ciò che serve per poter utilizzare Bootstrap!

I punti di forza di Bootstrap

Elenchiamo ora invece i principali punti di forza di questo framework, che come dicevamo anche all’inizio, sono:

La possibilità di realizzare applicazioni mobile e anche siti web, del tutto responsive, cioè adattabili a tutti i tipi di dispositivi portatili e non;
Poter realizzare applicazioni graficamente leggere, ma ricche di stili grafici e animazioni di qualsiasi tipo in modo da rendere l’applicazione o il sito più dinamici!
Permette di scrivere il minor numero di righe di codice possibile, rendendo quindi il sorgente molto più pulito e riducendo sensibilmente il lavoro a carico dello sviluppatore.
Creare progetti compatibili con tutti i browser e i sistemi operativi oggi esistenti, ovviamente quelli più recenti, e che cioè sono in grado di supportare i vari linguaggi di cui Boostrap è composto!

Per concludere

Quindi il nostro ultimatum per chiudere questa prima lezione introduttiva, è quello di incitarvi a seguire questo corso nel quale vogliamo farvi strada nella comprensione e l’utilizzo di questo potente strumento, al quale vale davvero la pena dedicare del tempo perché se imparato a maneggiare a dovere permette di realizzare cose davvero molto belle ma anche funzionanti al 100%! Per il momento questo è tutto, questa prima lezione finisce qui! Speriamo di averti trasmesso interesse e che quindi proseguirai questo percorso! Se così sarà, ci farà molto piacere! Noi ti lasciamo qui per ora, ciao e alla prossima! 😉

L’oggetto “this” del Javascript

marzo 16, 2017 killrun Lascia un commento

Nella lezione scorsa vi ho introdotto il concetto di “oggetto” del linguaggio Javascript, d’ora in poi quindi darò per scontato che con la lezione precedente voi avete ben in mente cosa questo significhi e come questo concetto debba essere gestito per poterlo padroneggiare e implementare quindi in uno script! Passando all’argomento di questa nuova lezione vi debbo introdurre una parola molto importante nella programmazione Javascript e nel uso dei suoi oggetti nativi, la quale è il this, grazie a questo particolare identificatore, infatti, è possibile far riferimento “a se stesso”, cioè all’oggetto nativo “this” stesso del linguaggio Javascript (in inglese “this” vuol dire letteralmente “questo”!). L’utilizzo del this in Javascript differisce rispetto ad altri linguaggi orientati agli oggetti. Come detto, infatti, Javascript non conosce il concetto di classe e pertanto non è sempre facile identificare l’oggetto al quale il this si riferisce. Il problema principale, quindi, è identificare il contesto al quale il this fa riferimento! Andiamo quindi ora ad approfondire il this e il suo utilizzo nel linguaggio Javascript in modo da superare questo problema che ci viene imposto!

L’utilizzo del this in modalità inline

Ci è permesso utilizzare l’oggetto this anche all’interno di una funzione Javascript, ma in questo caso le cose si fanno più complesse. Vi faccio un esempio:

function faccioQualcosa() { alert(this.style.color); }

Fino a qui nessuno problema, finché, non viene richiamata la funzione senza che essa venga associata ad alcun oggetto, come di seguito:

<script>faccioQualcosa();</script>

Quest’ultimo codice sopra riportato produrrebbe un errore! Data la mancanza di un’associazione esplicita con un oggetto, infatti, il this si presume riferito al generico oggetto window e, pertanto, nel caso concreto finirebbe col produrre un errore.

Vi faccio di seguito un altro esempio:

document.getElementById('mioDiv').onclick = faccioQualcosa();

In questo caso la funzione, invece, produrrebbe il risultato atteso, cioè mostrerebbe all’atto del click, un alert con il valore della proprietà CSS “color” settata nell’attributo “style” dell’elemento selezionato. In questo caso, infatti, il contesto di this sarebbe lo specifico oggetto relativo all’elemento selezionato. Il contesto, infatti, sarebbe:

document.getElementById('mioDiv')

e non più il generico oggetto window.

Utilizzare this all’interno di un oggetto

Un altro ruolo importante che il this può assumere, è quello all’interno di un oggetto. Infatti nell’ottica di una programmazione orientata agli oggetti, l’oggetto this assume un significato particolare. Dentro ad un oggetto, infatti, this, come già detto all’inizio della lezione, fa riferimento all’oggetto stesso.

Dettata quest’ultima nota importante, direi che questa lezione finisce qui, spero come sempre di esservi piaciuto, e in tal caso voglio un bel mi piace all’articolo! Ma soprattutto spero che tutto sia chiaro, altrimenti non esitate a contattarmi per qualsiasi tipo di domanda o aiuto per comprendere meglio la lezione! Io vi saluto qui e vi rimando al prossimo articolo augurandovi un buon proseguimento qui su WorldTecno, ciao! 😉

Gli oggetti nativi del Javascript

marzo 10, 2017 killrun Lascia un commento

Nella lezione vedremo più da vicino ciò che ho accennato nella prima lezione cioè quella introduttiva, nella quale vi ho detto che Javascript è un linguaggio orientato agli oggetti, e questo significa che allo sviluppatore è consentito creare quindi degli oggetti personalizzati, che poi come vedremo in una delle lezioni conclusive di questo corso, nelle stesse API del linguaggio Javascript sono già presenti degli oggetti nativi e che questi ultimi vengono messi a disposizione dello sviluppatore. Da quest’ultima accezione possiamo, dunque, definire un oggetto come la parola chiave che permette di richiamare una libreria incorporata nel browser, tuttavia un oggetto da solo serve a poco, per cui c’è bisogno, che su un qualsiasi oggetto dato venga applicato ad esso un metodo o una proprietà che fanno riferimento all’oggetto che invoca(richiama) uno di questi due elementi.

Introdotto questo nuovo concetto, passiamo a vedere ora la sintassi per implementare quanto detto, nonché la sintassi corretta per separare il nome di un oggetto da un metodo o da una proprietà:

oggetto.metodo(parametri)

oppure

oggetto.proprietà

Dunque si può notare che l’utilizzo del carattere punto ‘.’ (DOT NOTATION) che fa da elemento di concatenazione tra l’oggetto ed il metodo o la proprietà. I nomi dei metodi sono seguiti da parentesi tonde all’interno delle quali si “passano” dei parametri, diversi (per numero e tipo) a seconda del caso. Le proprietà, invece, restituiscono (GET) o settano (SET) dei valori propri dell’oggetto in questione.

Nelle prime lezioni di questo corso abbiamo già visto all’opera un metodo applicato ad un oggetto, più precisamente il metodo write dell’oggetto document, con la seguente sintassi:

document.write('Scrivo qualcosa...');

Vediamo ora un esempio per capire circa come funzionano le proprietà sia per recuperare un valore (GET) che per settarne uno nuovo (SET). Per mostrarvi l’esempio faccio riferimento alla proprietà href dell’oggetto location:

/* Estraggo la URL della pagina corrente /* var pagina = location.href; /* Setto una nuova URL per un redirect */ location.href = 'http://www.sito.com/nuova-pagina.html';

Gli oggetti nativi più importanti di Javascript sono:

window – questo oggetto rappresenta la finestra del browser; fanno parte dell’oggetto window altri due (sotto)oggetti:
- location – questo oggetto rappresenta la URL corrente;
- history – questo oggetto contiene la cronologia delle pagine web visitate dall’utente;
navigator – questo oggetto contiene una serie di informazioni riguardo al browser utilizzato dall’utente;
screen – questo oggetto contiene una serie di informazioni relative alla risoluzione dello schermo dell’utente;
document – questo oggetto fa riferimento al documento aperto nel browser o, più precisamente, al suo nodo radice; appartengono all’oggetto document tutti gli oggetti corrispondenti a ciascun sotto nodo del documento HTML; A ciascun elemento, ancora, appartengono tutti gli oggetti corrispondenti ad eventuali attributi;

Quindi come avrete capito l’oggetto document è il più complicato in quanto è strutturato in vari livelli, e quindi avremo diversi oggetti tra loro concatenati, ad esempio:

/* Accedo ad uno specifico nodo del documento HTML Ad esempio recupero tutto il suo contenuto attraverso la proprietà innerHTML */ var contenuto = document.getElementById('mioParagrafo').innerHTML; /* Accedo ad uno specifico attribito di un dato nodo HTML Ad esempio recupero il valore dell'attributo alt di un'immagine attraverso la proprietà value */ var stile = document.getElementById('miaImmagine').alt.value;

In realtà la manipolazione del DOM(Document Object Model) è assai più complicata e infatti torneremo poi più avanti su quest’altro argomento. Per il momento ci limitiamo a questi semplici esempi giusto per capire in che modo è strutturato l’oggetto document.

Altri Oggetti Javascript: Date, Math, Array, RegExp, …

Oltre agli oggetti citati prima, Javascript dispone di altri oggetti integrati nelle API(librerie) del linguaggio. Questi oggetti sono utilizzati per svolgere operazioni comuni come, ad esempio, operazioni sulle date, calcoli matematici, la creazione di vettori ed eseguire controlli tramite espressioni regolari. Date, Array, RegExp(Regular Expression – Espressioni Regolari) necessitano di un costruttore per poter essere utilizzati:

var data = new Date(); var vettore = new Array(); var re = new RegExp();

L’oggetto Math, invece, non necessità di alcun costruttore per essere utilizzato come potete vedere qui di seguito:

var n = 0.97; var i = Math.ceil(n); document.write(i);

Vedremo più approfonditamente in seguito il funzionamento di ciascuno di questi oggetti e il concetto di costruttore del linguaggio Javascript. Per quanto riguarda questa lezione sugli oggetti del Javascript direi che è tutto e vi inviato a mettere un mi piace se vi è piaciuta, inoltre vi invito a condividere i miei articoli sui vari social per permettere a WorldTecno di crescere sempre più in fretta nel web! Infine vi ricordo di contattarmi in caso qualcosa non fosse chiaro o per qualsiasi particolare informazione e curiosità, ci rivediamo al prossimo articolo ciao! 😉

Le funzioni in Javascript e la loro realizzazione

marzo 1, 2017 killrun Lascia un commento

Tanti sono gli elementi chiave di un linguaggio di programmazione, ma le più importanti sono le funzioni, e quindi è arrivato il momento di vedere cosa esse siano e come si implementano in un programma, che nel nostro caso sarà scritto in linguaggio Javascript. Una funzione quindi raccoglie in se tutte le istruzioni per farsi carico di un determinato compito da risolvere all’interno di un programma. Una funzione, quindi, è una parte (relativamente) autonoma di un programma in quanto si fa carico di un compito specifico che può essere ripetuto più volte in diversi punti del programma stesso. Organizzare un programma in funzioni consente in una maggiore pulizia del codice sorgente e, soprattutto, facilita il riutilizzo del codice e, di conseguenza, consente di creare programmi più snelli e semplici di mantenere ed aggiornare. Introdotto il concetto di funzione vediamo ora la sintassi per creare una funzione nel caso del linguaggio Javascript qui di seguito:

function nomeFunzione(argomenti) { istruzioni; }

Come si può notare dal segmento di codice ho utilizzato la parola chiave function propria del linguaggio Javascript, e ho assegnato un nome alla funzione, in questo caso “nomeFunzione” e, come si può constatare, utilizziamo le parentesi tonde subito dopo per passare alla funzione eventuali argomenti (cioè dei dati che la funzione potrà utilizzare per la sua elaborazione), detti anche parametri formali della funzione. Si noti che il passaggio di argomenti è del tutto facoltativo, in mancanza il nome della funzione sarà seguito da delle parentesi vuote (non essendo possibile ometterle). Il contenuto della funzione, ovvero le istruzioni che compongono il programma, viene racchiuso tra parentesi graffe { e }. Una cosa importante è quella di non dare alle funzioni nomi che indicano parole chiave utilizzate da Javascript, ad esempio non è possibile utilizzare write() come nome di una funzione: “write”, infatti, è un metodo dell’oggetto document e creando una funzione con questo nome (o con altre parole riservate) ci verrà restituito un errore (questo perché è come se si tentasse di sovrascrivere una funzione predefinita del linguaggio Javascript).

E’ tuttavia possibile utilizzare il nome Write() oppure WRITE(), dato che javascript è un linguaggio case-sensitive, ovvero riconosce differenze tra maiuscolo e minuscolo: in questo modo l’interprete non riconoscerà la funzione Write() come nome di un metodo, ma come parola “estranea” alla sintassi Javascript e la considererà valida. Valgono, inoltre, per i nomi delle funzioni le stesse considerazioni fatte in occasione dei nomi delle variabili.

I parametri delle funzioni

Un parametro è in genere un valore soggetto a variazioni, ad esempio una stringa di testo o un numero. I parametri vengono “passati” alla funzione all’interno delle parentesi tonde che seguono al nome della funzione (parametri formali). Se sono più di uno, i parametri delle funzione devono essere separati da una virgola:

function nomeFunzione(arg1, arg2, ..., argN) {
  istruzioni;
}

Facciamo un esempio di una semplice funzione per il calcolo dell’IVA su un prezzo:

function calcolaIVA(prezzo, aliquota){
  var iva = (prezzo/100)*aliquota;
  alert(iva + ' Euro');
}

Per richiamare la funzione:

<span onclick="calcolaIVA(100,22)">clicca qui</span>

Facendo click apparirà un alert con il valore dell’IVA applicata al prezzo passato in argomento (nel nostro caso il risultato sarà “22 Euro”). Tuttavia, nelle funzioni di un linguaggio di programmazione, compreso il Javascript, si fa un ulteriore distinzione di tipo parametro funzione, è cioè si riconoscono come parametri attuali quei parametri passati ad una funzione durante la sua invocazione in un certo punto del programma (es. var c = calcoloIva(200, 22)), quest’ultimi parametri definiti sono quelli che appaiono nelle parentesi della chiamata di funzione (“invocazione”).

Infine si può parlare di due tipi di “passaggio parametri”:

Passaggio per valore: questo metodo consiste nel passare come parametri alla funzione invocata dei parametri come valori numerici o variabili con valore inizializzato a priori (es. calcoloIVA(100, 22) oppure var x = 100; var y = 100; somma(x, y)).
Passaggio per riferimento: quest’altro metodo invece consiste nel creare una corrispondenza tra i valori attuali passati nella chiamata della funzione e quelli dichiarati come parametri formali nella dichiarazione della funzione, in modo che il linguaggio gestirà in automatico i valori che la funzione dovrà elaborare e modificare nel corso dell’esecuzione del programma.

La parola chiave return

Nel mio esempio il risultato della funzione viene mostrato all’interno di una finestra di avviso. Molto spesso, in realtà, il frutto dell’elaborazione di una funzione viene restituito attraverso l’utilizzo della keyword return, viene cioè restituito sotto forma di valore di ritorno. Così facendo la funzione non si interessa del modo in cui il valore verrà eventualmente mostrato a video, ma si limita ad effettuare la sua elaborazione ed a restituirne il risultato alla routine principale. Vediamo, quindi, l’esempio del nostro calcolatore di IVA modificato:

function calcolaIVA(prezzo,aliquota){
  var iva = (prezzo/100)*aliquota;
  return iva;
}

Per ottenere lo stesso risultato di prima, quindi, avrei dovuto impostare l’alert() direttamente nell’evento onclick del tag <span> in questo modo:

<span onclick="alert(calcolaIVA(100,22))">clicca qui</span>

L’utilizzo di return è molto utile quando la funzione viene utilizzata in diversi punti del programma ed il suo risultato viene manipolato in modi differenti. Utilizzando return, inoltre, il risultato di una funzione può essere utilizzato anche per valorizzare una variabile, come nel seguente esempio:

var tax = calcolaIVA(100,22);

Chiarito anche quest’ultimo aspetto, direi che anche la lezione di oggi sulle funzioni in Javascript finisce qua! Spero come sempre che tutto sia chiaro e che l’articolo sia di vostro gradimento! Per qualsiasi chiarimento o informazione sapete che potete contattarmi utilizzando il modulo presente nella pagina contatti di WorldTecno. Vi invito inoltre a lasciare commenti e mi piace per mostrare il vostro piacere verso WorldTecno e i miei articoli, tuttavia vi rimando al prossimo articolo e vi auguro un buon proseguimento, Ciao! 😉

Gli eventi del Javascript

febbraio 26, 2017febbraio 26, 2017 killrun Lascia un commento

Nella vita di tutti i giorni noi tutti eseguiamo delle azioni, le quali ovviamente sono però scatenate da un qualcosa che in modo automatico attiva nel nostro cervello un impulso che appunto viene colmato dall’esecuzione di una determinata azione. Tuttavia, questa cosa si presenta regolarmente anche nel mondo della programmazione, infatti per poter fare eseguire ad un dispositivo una qualche azione diretta ad effettuare un attività qualsiasi ad essa corrispondente, c’è bisogno di un “evento” che scateni tutto ciò! Per fare un esempio e chiarire meglio le idee, possiamo pensare che nella vita di tutti i giorni uscire con gli amici di solito genera nei vari soggetti del gruppo qualcosa di diverso ma piacevole (si spera!), beh questo accade anche nella programmazione se per esempio si pensa al click del mouse (paragonato all’uscire in compagnia) su un pulsante (paragonato ad ogni soggetto del gruppo di amici), genera un qualche cosa all’interno della finestra che si sta visualizzando (paragonato alla situazione piacevole del momento della giornata in cui il gruppo di amici esce insieme).

Sostanzialmente possiamo definire un evento Javascript come qualcosa che accade all’interno del documento HTML che è il nostro contesto. Nella maggior parte dei casi a scatenare l’evento è un comportamento dell’utente (ad esempio un click su un dato elemento della pagina) altre volte, invece, è una situazione contingente che prescinde da una qualsivoglia azione dell’utente (come ad esempio il caricamento della pagina). Tuttavia Javascript supporta moltissimi eventi che, con l’evolversi del linguaggio, sono andati via via arricchendosi. In questa lezione vedremo gli eventi principali e più utilizzati e, soprattutto, vedremo come utilizzarli al fine di indirizzare il comportamento dei nostri script.

La sintassi di un evento Javascript

Un evento si richiama direttamente all’interno dell’elemento HTML che lo riguarda, incorporando un attributo nel codice dell’elemento stesso, quella che segue è la sintassi:

<elemento attributoEvento="istruzione Javascript">
Vediamo di seguito un esempio pratico, implementando l’attributo onClick su un pulsante:

<input type="button" value="Invia" onclick="alert('Hai cliccato!')">

Dato che l’HTML non è un linguaggio case-sensitive (cioè sensibile alle maiuscole e alle minuscole) è indifferente scrivere onClick, onclick oppure ONCLICK, ma è necessario specificare i parametri (ad esempio il nome della funzione) con le giuste maiuscole e minuscole all’interno di un evento (questo perché la funzione legata all’evento è gestita da Javascript, il quale invece è case-sensitive).

Gli eventi principali di Javascript

Eventi del tag <body>: due eventi molto utilizzati in associazione al corpo della pagina sono onload e onunload attraverso i quali si intercetta, rispettivamente, l’apertura e la chiusura della pagina, eccone l’esempio<body onload="alert('Benvenuto!');"><body onunload="alert('Torna a trovarci!');">

Da segnalare che l’evento onload può essere efficacemente applicato anche al tag <img> per identificare il momento in cui la data immagine viene effettivamente scaricata dal browser. Altri eventi associabili al corpo della pagina sono onresize e onscroll che servono, rispettivamente, ad intercettare il ridimensionamento della finestra e lo scrolling al suo interno. Quest’ultimo evento, oltre che al tag <body>, può essere associato anche ad altri elementi della pagina come, ad esempio, un DIV con l’overflow:scroll.

Eventi legati al mouse: l’attività del mouse è, solitamente, uno dei fattori più rilevanti all’interno di una buona parte delle applicazioni web. Un click su un elemento o il passaggio del cursore in una determinata porzione della pagina, infatti, sono tra gli eventi più comunemente utilizzati. Vediamo i principali eventi che rientrano in questa categoria:
- onclick – click col tasto sinistro del mouse;
- ondblclick – doppio click col tasto sinistro del mouse;
- oncontextmenu – click col tasto destro del mouse;
- onmouseover – ingresso del mouse su un dato elemento;
- onmouseout – uscita del mouse da un dato elemento;
- onmousemove – il cursore del mouse si sta muovendo sopra un dato elemento;

Questi eventi possono essere associati ad una molteplicità di tag HTML come, ad esempio, immagini, div, paragrafi, bottoni, ecc. Vediamo di seguito alcuni esempi:

<img src="foto.jpg" onclick="alert('Hai cliccato la foto!')"> <img src="foto.jpg" ondblclick="alert('Hai fatto doppio click sulla foto!')"> <img src="foto.jpg" onmouseover="alert('Sei passato col mouse sulla foto!')"> <img src="foto.jpg" onmouseout="alert('Hai spostato il mouse fuori dalla foto!')">

Eventi legati alla tastiera: Un altra serie importante di eventi è scatenata dalla pressione, da parte degli utenti, dei tasti della tastiera del computer. Gli eventi rilevanti sono tre:
- onkeypress – generica pressione di un tasto;
- onkeydown – l’evento si scatena mentre l’utente sta premendo un tasto;
- onkeyup – l’evento si scatena quando l’utente rilascia un tasto che ha premuto;

Vediamo un esempio:

<input type="text" onkeydown="alert('hai premuto un tasto!')">

Eventi legati ai form: Una altra fitta serie di eventi Javascript è quella che riguarda i form ed i loro elementi. I due eventi che riguardano il tag <form> sono onsubmit e onreset utilizzati, rispettivamente, per intercettare l’invio ed il reset di un modulo HTML. Ecco i due esempi:

<form onsubmit="alert('Hai inviato il modulo!')">

<form onreset="alert('Hai cancellato il modulo!')">

Gli eventi che riguardano i singoli elementi dei form (input, textarea, select, ecc.) sono, invece, molteplici. I più utilizzati sono:
- onfocus – l’elemento viene selezionato (e quindi attivato);
- onblur – l’elemento perde il focus (e quindi disattivato);
- onchange – l’elemento viene modificato nel contenuto;

Per fare un esempio: un campo input acquista il focus quando ci si clicca sopra per iniziare a scriverci dentro, viceversa lo perde quando si clicca su un altro elemento. Per quanto riguarda l’evento change questo è tipico delle selectbox, dei campi input e delle textarea e si verifica quando, a seguito dell’azione dell’utente, si ha un cambiamento del loro contenuto.

Altri eventi generali

Oltre a quelli menzionati, Javascript supporta molteplici altri eventi legati, ad esempio, al trascinamento di un elemento draggable o alla riproduzione di elementi multimediali. In questa sede, tuttavia, non ritengo opportuno affrontare tematiche ulteriori a quelle “di base” e pertanto rinvio il lettore a futuri ed ulteriori approfondimenti.

Detto ciò, direi che anche quest’altra lezione sul corso di programmazione base Javascript termina qui, mi auguro di essere stato abbastanza chiaro anche in questa lezione, per qualsiasi chiarimento o informazione generale potete contattarmi attraverso il modulo della pagina contatti, come sanno già molti utenti che mi seguono. Infine vi auguro un buon proseguimento qui su WorldTecno, io vi rimando al prossimo articolo, ciao! 😉