Ultime dal Blog

finestre-modali

Finestre Modali senza Plugin o jQuery!

Negli ultimi anni le finestre modali sono diventate sempre più importanti. Abbiamo assistito alla loro evoluzione partendo da semplici alert() o prompt() fino a vederle completamente integrate nelle nostre pagine e arricchite da grafiche e colori che rispecchiano il brand del nostro sito. Purtroppo per creare questi elementi si ricorre fin troppo spesso a plugin o librerie esterne come jQuery.

Dal mio punto di vista non ci vedo niente di male ma a seconda delle necessità si rischia soltanto di appesantire il proprio progetto!

Diciamoci la verità, le finestre modali sono utili per mostrare informazioni o chiedere azioni da parte dell’utente come ad esempio l’inserimento della propria email per iscriversi ad una newsletter, proprio come succede anche in questo sito. Questi elementi aiutano a raggiungere una miglior interazione con i visitatori del nostro sito e sono incredibilmente utili.

Ma tornando sull’argomento della pesantezza delle proprie pagine questo è un fattore che sta diventando sempre più importante perché, come ormai dovresti sapere, i vari motori di ricerca hanno iniziato ad analizzare questo fattore e ne tengono di conto per il posizionamento delle nostre pagine nelle SERP; in fin dei conti un sito veloce è un sito che si consulta volentieri!

In questo articolo non ti spiegherò come creare delle bellissime finestre modali ma piuttosto, grazie al codice di Daniele, ti mostrerò come sia possibile creare delle leggerissime finestre modali create in puro codice JavaScript. La personalizzazione e la generazione di questa finestra è delegata al linguaggio JavaScript, in questo modo se il browser non è in grado di leggere questo linguaggio (cosa veramente rara ma possibile anche al giorno d’oggi) non dovrà caricare inutili kb di codice.

Leggi Tutto

Data Maps in SASS

Non Conosci ancora le Data Maps in SASS? Ecco il Rimedio!

Non è un segreto, negli ultimi tempi mi sto avvicinando molto nello sviluppo dei CSS tramite SASS e posso soltanto dire che questo ha velocizzato incredibilmente il mio sviluppo Front End. Oggi affronteremo un argomento molto interessante e un po' avanzato, se non ti senti pronto ricordati che c'è un corso interamente dedicato a questo linguaggio che ti aiuterà a muovere i primi passi!

All’interno del corso che ti ho appena collegato troverai molte informazioni utili su come iniziare a sviluppare con questo linguaggio e tra queste troverai anche la descrizione delle variabili che, come in altri linguaggi, altro non sono che delle strutture che permettono di salvare un valore assegnandogli un nome più umano e facilmente riconoscibile.

Nonostante questo, sin dalla versione 3.1.0, SASS ha iniziato ad implementare anche le liste. La soluzione di questo linguaggio per avere un array monodimensionale che da anni è presente in moltissimi altri linguaggi. Anche se non andremo ad approfondire questo concetto, perché ti presenterò qualcosa di ancora più interessante, mi sembra doveroso condividere con te la sua sintassi:

Come si può notare, le liste sembrano veramente interessanti, sopratutto con cicli come @each che ci permettono di ciclare questi valori senza conoscere la quantità di elementi in esso contenuti; ma il limite più grande è che sono soltanto valori. Questo vuol dire che usando le liste non sarai in grado di utilizzare l’assegnazione chiave : valore tanto utile negli array multidimensionali.

Non mi fraintendere, le liste sono comunque delle strutture potentissime che ci aiutano molto nello sviluppo dei nostri progetti e in un prossimo articolo ti presenterò le funzioni dedicate che sono state sviluppate; ma oggi ho voglia di presentarti qualcosa di ancora più avanzato e facile da utilizzare. Cosa fai? Non contininui a leggere?

Leggi Tutto

Come si Muove un Freelancer Sviluppatore

Come si Dovrebbe Muovere uno Sviluppatore Freelance

Eccoci di fronte ad un nuovo argomento per la serie Guadagnarsi il Pane con HTML5, in questa lezione andremo ad imparare cosa sia un freelance e scopriremo quali siano i canali migliori per promuovere se stessi e il proprio lavoro.

Essere un freelancer o, per dirlo all’italiana, un libero professionista ci mette di fronte ad una serie di possibilità che potremmo sfruttare per creare reddito; saremo in grado di scegliere noi quale sia la cosa che preferiamo fare ma, visto che gli argomenti marketplace sono già stati ampliamente discussi, in questo appuntamento ho intenzione di guardare da vicino la vita di un freelancer.

Trovare nuovi clienti, progetti e opportunità di guadagno dovrà essere una delle nostre priorità; ma trovare il modo giusto per catturare l’attenzione di un possibile cliente non è una cosa molto semplice da fare… Bisogna ammetterlo, al giorno d’oggi il mercato dello sviluppo web è in grande fermento; molte sono le possibilità di guadagno che la rete ha portato a nuova vita, questa guida ne raccoglie soltanto alcune e lascia a voi il compito di comunicare le altre.

C’è una cosa che voglio chiarire e che ormai dovrebbe essere chiara: diventare ricchi in poco tempo non è possibile!

Leggi Tutto

Usare Grunt per Compilare SASS

Usare Grunt per Compilare SASS e Compass

Abbiamo da poco concluso l'anteprima del corso su SASS che a breve verrà lanciato sotto forma di epub e dovresti aver già scoperto quante cose carine puoi realizzare. Per tutto il corso ti ho consigliato di utilizzare un'applicazione grafica per compilare il codice SASS in CSS, ma se ti piace la riga di comando, questo appuntamento fa per te!

Prima di tutto voglio chiarire che questo non è un articolo di tipo introduttivo: ho deciso di partire da un livello più alto, perché troverai una più che completa descrizione di Grunt all’interno di un articolo apparso recentemente su WebHouse. Ti consiglio caldamente la sua lettura perché scorre molto bene ed è incredibilmente intuitivo.

Siccome ho già fatto alcuni esperimenti con questa applicazione, ho deciso presentarti qualcosa che non è presente nell’articolo sopraccitato: in quello, l’autore descrive come installare Grunt ed i plugin necessari per compilare LESS.js, linguaggio che abbiamo già trattato diverse volte su questo sito. Questo linguaggio è stata la mia prima esperienza nel campo dei linguaggi precompilati per i CSS (e devo ammettere che è stata un’ottima esperienza!), ma recentemente mi sono trovato a lavorare a stretto contatto con SASS e devo ammettere che, avendoli provati entrambi, ritengo il secondo di gran lunga il migliore.

Ma in questo articolo non voglio andare a paragonare questi due linguaggi per decretare il vincitore: piuttosto voglio coprire un aspetto che nell’altro articolo non è stato trattato, ovvero come compilare SASS e la sua estensione Compass grazie a Grunt.

Leggi Tutto

Guadagna con HTML5 Vendendo Template

Guadagna Vendendo Template

Uno dei primi modi per guadagnarsi il pane con HTML5 è sicuramente la possibilità di vendere template, da questo semplice primo passo, potrebbero nascere ulteriori possibilità di business ma, sopratutto, ci sono delle caratteristiche che dovrai tenere in considerazione sopratutto quando andrai a sviluppare del codice da vendere.  

Magari non sarai d’accordo con me quando dico che uno dei migliori modi per iniziare a guadagnare con le proprie conoscenze HTML5 sia la vendita di template, questo perché molti clienti che vogliono un sito statico non hanno la possibilità o le conoscenze di modificare direttamente il tuo codice e quindi saranno più inclini a contattare un freelancer o una web agency per svolgere il lavoro; ma è proprio questo il mercato a cui dovreste puntare per promuovere i tuoi template!

Infatti web agency e freelancer sono tendenzialmente figure molto impegnate sotto diversi aspetti del lavoro e benché una web agency possa utilizzare l’energia di diverse persone, entrambi dovranno sforzarsi per completare l’ultimo progetto, trovare nuovi contatti per assicurarsi un progetto futuro, mantenere i contatti con i clienti esistenti, promuovere la propria attività…

Insomma, il lavoro che sta alla base di un business del genere è molto frazionato e rischia di succhiare via molto tempo alle attività come sviluppo e creazione!

Leggi Tutto

Introduzione Haml

Piccola ma Utile Introduzione ad Haml

Abbiamo da poco iniziato un viaggio che ci spinge a velocizzare il proprio sviluppo web partendo dai CSS, o meglio, dal linguaggio SASS e, anche se questo corso non è ancora finito, già desidero introdurti a qualcosa di nuovo che velocizzerà lo sviluppo del tuo codice HTML.

Probabilmente stai pensando che mi sto un po’ fissando su questa cosa della velocità ma io credo veramente che se sarai in grado di scrivere del codice più velocemente sarai anche in grado di concludere un numero maggiore di progetti; cosa che sicuramente porterà benefici a livello economico ;)

Ad essere sincero mi sto avvicinando molto anche a queste soluzioni che come effetto collaterale velocizzano il tuo lavoro perché ci sono talmente tante tecnologie che possono essere utili per qualsiasi sviluppatore web. La mia intenzione non è presentarti tutte queste soluzioni, semplicemente quelle che ritengo più interessanti.

Già con SASS dovresti aver capito che stanno nascendo delle soluzioni che, come minimo, ti permettono di dimezzare il tempo che passi a sviluppare i tuoi fogli di stile, ma non sarebbe bello avere la stessa elasticità quando creiamo del codice HTML. Bene da oggi è possibile anche questo e per tutto l’articolo ti parlerò di questo interessante progetto che prende il nome di Haml.

Leggi Tutto