Ultime dal Blog

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

aggiungi-compass

Aggiungiamo un Compass

Nelle ultime lezioni abbiamo scoperto quanto SASS sia utile per creare le proprie strutture e funzionalità CSS. Questo ci obbliga comunque a dover spendere del tempo nella loro realizzazione, è possibile che non ci sia qualcosa di "già pronto" che possiamo utilizzare?

Beh la risposta diretta a questa domanda è SI!

Per nostra fortuna ci sono stati molti sviluppatori che, come spesso accade nel mondo Open Source, hanno deciso di contribuire a questo progetto andando a creare una interessantissima libreria di mixin che ci daranno accesso ad un gran numero di funzionalità.

La collezione di queste funzionalità prende il nome di Compass che, sul proprio sito, viene definito come un CSS Authoring Framework Open Source. All’interno di questo framework troverai moltissime utilità che ti permetteranno di creare un gran numero di effetti grazie all’uso delle innovazioni inserite nella specifica dei CSS3.

Sappiamo tutti che, utilizzando i diversi vendor prefix, abbiamo la possibilità di inserire qualsiasi regola CSS3 ma in questo contesto mi sto riferendo alla possibilità di utilizzare questi effetti con una sola riga di codice e sfruttando i valori di default che gli sviluppatori hanno creato al posto nostro.

Leggi Tutto

workshop-bari

Firefox OS Workshop Bari – Il resoconto

Forse ti stai chiedendo: perchè su html5AndMore c'è un resoconto di un evento dedicato a FirefoxOS? Il motivo è semplice, Firefox OS è un sistema operativo open source mobile completamente basato su tecnologie web, quindi HTML, CSS e JavaScript.

Con questa premessa possiamo dire che rientra perfettamente negli argomenti del sito, anche perchè inizierò a scrivere una guida di sviluppo dedicata a questo sistema (dopo che la guida già in scrittura di JavaScript verrà pubblicata ;) ).

Perchè aspettare la guida in JavaScript? Perchè le applicazioni su Firefox OS si scrivono con i soliti linguaggi web e vivono dentro un browser quindi per noi sviluppatori web è molto semplice realizzare un’applicazione :-D

Leggi Tutto

Importa CSS con SASS

Le Magie dell’Importazione con SASS

Importare dei file con i CSS è sempre stato un problema, la soluzione sembra semplice ma allo stesso tempo si rischia di generare un grosso numero di richieste HTTP che rallentano inevitabilmente il sito.

In questa lezione andremo a scoprire come SASS ha rivoluzionato il classico concetto della proprietà @import per creare qualcosa di veramente utile e allo stesso tempo semplice.

Non è assolutamente un segreto che ridurre il numero di richieste HTTP può migliorare incredibilmente le prestazioni del proprio sito. Le stesse immagini che tutti noi inseriamo all’interno del codice CSS è una richiesta HTTP che stiamo facendo al server; in breve, anche se da codice CSS, stiamo dicendo al browser qualcosa come: mi prendi l’immagine xyz.png che devo mostrarla nella pagina?

Di per sé le richieste HTTP non sono niente di male e, anzi, ci permettono proprio di avere il web come lo conosciamo oggi; purtroppo un alto numero di queste comporta dei rallentamenti perché ciascuna connessione perde del tempo per capire dove si trova un file.

Finché utilizziamo un paio di immagini non ci sono problemi, i nostri server possono rispondere bene ad un paio di richieste HTTP e il nostro visitatore non noterà neanche i rallentamenti (dato che si misurano in ms, tendenzialmente poche centinaia); ma se all’interno del nostro CSS sono presenti diverse centinaia di immagini, capisci bene da solo che in questo contesto stiamo parlando di decine di secondi spesi inutilmente.

Leggi Tutto