Ultime dal Blog

3 Librerie di Mixin per LESS.js

3 Librerie di Mixin per LESS.js

Abbiamo già affrontato altre volte l'argomento LESS.js ma questo non è un buon motivo per smettere di parlarne! Questa libreria ti permette di velocizzare incredibilmente la scrittura dei tuoi fogli di stile ma, oltre a questo, ha dato il via alla creazione di un gran numero di librerie piene di utili mixin pronti da usare nei tuoi progetti! In questo articolo andremo a vedere insieme le 3 più famose e che presentano le soluzioni più interessanti.

Saper usare LESS.js è sicuramente una cosa che aiuterà il tuo lavoro da sviluppatore web, e la possibilità di creare i tuoi mixin è una caratteristica che velocizzerà la creazione degli effetti CSS3 in maniera incredibile; sopratutto perché avrai del codice compatibile anche con i browser più datati scrivendo una sola riga di codice. Ma la bellezza di questa librerie non risiede soltanto nella possibilità di crearsi da soli queste soluzioni, la vera potenza sta nel fatto che ci sono decine di sviluppatori che hanno creato le proprie librerie di mixin e che le distribuiscono gratuitamente.

In questo articolo andremo a scoprire tre di queste librerie, quelle che io ritengo migliori sia dal punto di vista storico che da quello dell’usabilità ma prima di andare oltre vorrei ricordarti che se sei interessato a conoscere meglio questa libreria puoi consultare il video corso che ho realizzato appositamente per questo scopo ed aiutarti a velocizzare il tuo lavoro.

Leggi Tutto

struttura-base-pagina-html5

La Struttura Base di una Pagina HTML5

In questa puntata vedrai i tag principali che ti permetteranno di creare la struttura di una pagina web creata con il linguaggio HTML5. Questi tag HTML5 sono stati pensati per migliorare il SEO (Search Engine Optimization), ma anche perchè sono molto più descrittivi rispetto ai precedenti elementi div, che venivano considerati come un contenitore di elementi, senza specificare alcuna semanticità alla pagina (giusto per spolverare qualche concetto condiviso nella lezione precedente).

Dato che vuoi sapere come creare una pagina web con il linguaggio HTML5, credo che sia meglio saltare subito al contenuto e scoprire quale sia la sua struttura di base, struttura senza la quale una pagina HTML5 non esisterebbe…

Leggi Tutto

Crea Pagina HTML5

Come Creare una Pagina HTML5

Prima ancora di tuffarti nella creazione di una pagina HTML5, cosa molto semplice di per sé, bisogna capire che cosa sia questo linguaggio, quali sono le sue caratteristiche più interessanti e sopratutto capire perché ti consiglio di usarlo.

Ecco gli argomenti che voglio affrontare prima di farti vedere come sia possibile creare un sito web in HTML5!

Bene partiamo quindi con ordine.

Cosa è HTML?

HTML è una sigla per HyperText Markup Language o, detto all’italiana linguaggio di descrizione per ipertesti, ovvero, non è altro che un linguaggio con il quale è possibile realizzare dei testi interattivi e la struttura di un sito web.
All’epoca dei documenti così non esistevano!

Parliamo della fine degli anni 80 e il pc non era pensato per una grande interazione (il mouse stava comparendo) mentre la novità di HTML era quella di poter scrivere un documento interattivo (i link erano l’interazione dell’epoca perchè CSS e JavaScript non esistevano) in modo semplice e di poter essere visti tra più pc grazie ad internet che stava diventando di pubblico dominio.

Oggi quando apri un browser (ovvero FireFox, Chrome, Safari o Internet Explorer) tutti i siti che vedi all’interno delle loro finestre non sono altro che codice HTML, magari abbellito da qualche immagine e codice CSS, ma è sempre questo linguaggio a fornirne la struttura (come si dice le cose vecchie sono le migliori)!

I vari browser sono in grado di leggere e mostrare graficamente questo codice in accoppiata a CSS e JavaScript (chiamati da Mozilla I Tre Assassini!!) che approfondiremo in un’altra guida.

Leggi Tutto

Emmet

Emmet – Crea Strutture HTML in un Lampo

Sicuramente non è la prima volta che ti trovi a leggere un mio articolo in cui ti presento una nuova tecnologia che ti permetterà di velocizzare la creazione dei tuoi progetti ma per quest'oggi ho qualcosa di veramente scoppiettante che ti consiglio di non perdere.

Se non vuoi leggere questo articolo, puoi sempre consultare il video allegato, ma al tempo stesso ti consiglio di leggere questo articolo perché troverai alcune riflessioni e riferimenti che non potrei inserire all’interno di un video illustrativo.

Da dove mi trovo, non posso sapere se hai già provato alcuni sistemi per velocizzare la stesura del tuo codice HTML, non so se hai mai provato alcuni programmi come Text Expander o altri programmi che ti permettono di creare le tue scorciatoie da tastiera per inserire lunghe porzioni di testo ma quello che ti posso dire è che grazie alla risorsa che ti presento oggi sarai in grado di creare senza troppo sforzo qualsiasi elemento HTMl desideri.

In questo articolo ti presento Emmet, un plugin disponibile per i più comuni editor di testo che, come ti ho già detto più volte, velocizzerà molto la velocità con cui scriverai il tuo codice HTML.

Leggi Tutto

Preboot

5 Cose che ho Appreso da Preboot

Come dovresti ormai sapere, qua su html5AndMore siamo grandi fan di tecniche e soluzioni che ti permettono di velocizzare il tuo sviluppo e di concludere più progetti nello stesso arco di tempo. Anche nell'articolo di quest'oggi voglio parlarti di qualcosa che ti permetterà di essere molto più veloce nello scrivere il tuo codice CSS.

Molto probabilmente mi avrai già sentito parlare di LESS.js e di quanto sia appassionato di questo linguaggio, a breve voglio anche scrivere un corso completo che ti permetta di iniziare il più velocemente possibile a sviluppare codice CSS, ma quest’oggi voglio parlarti di un progetto molto interessante che prende il nome di Preboot.

Se controlli sulla sua homepage, noterai che questo non è altro che una serie di file .less che raccolgono al loro interno una moltitudine di best practices e utili mixins che velocizzeranno il tuo sviluppo con questo linguaggio.

Leggi Tutto

Brackets Editor Open Source

Brackets – Fantastico Editor Open Source

Come avrai notato dai nostri ultimi articoli, html5AndMore sta finalmente ripartendo con nuovi contenuti utili a migliorare le tue conoscenze su questo ed altri linguaggi web. Tutta queste conoscenze sarabbero inutili senza andare ad analizzare i nuovi strumenti che velocizzano e migliorano il nostro lavoro ecco perché oggi voglio parlarti di Brackets!

Con tutto il rispetto che porto per tutti quei piccoli sviluppatori che creano progetti open source resi disponibili a tutta la comunità web, spesso grazie proprio a GitHub, la prima cosa che voglio mettere in luce che riguarda questo editor è che è stato costruito dalla stessa Adobe, azienda che da moltissimi anni supporta ed aiuta lo sviluppo web.

Detto questo, non voglio certo screditare l’ottimo lavoro che quotidianamente viene pubblicato nei repository di GitHub, ma avere alle spalle una azienda come Adobe è sicuramente un valore aggiunto per la longevità di questo progetto! C’è anche da dire che potresti contribuire nello sviluppo di questo editor dato che è stato interamente scritto con linguaggi che dovresti già conoscere bene come HTML, CSS e JavaScript.

Ma adesso fermiamoci qua con le presentazioni ed andiamo a vedere veramente che cosa ha da offrire!

Leggi Tutto