Mavo è un progetto Open Source finalizzato a proporre un nuovo approccio per la creazione di Web application; sviluppato presso il MIT CSAIL esso consente di convertire pagine HTML statiche in applicazioni reattive, senza la necessità di intervenire direttamente sul codice e senza dover utilizzare un backend server. Tecnicamente non si tratta quindi di uno static site generator, come per esempio Jekyll, ma di una soluzione completamente browser based (o quasi). (more...)

Continua a leggere Mavo: Web application con HTML e CSS

Categoria: Scripting

Tags: ,

Chi sviluppa siti web, così come Web app, potrà trovare utili, magari per una modifica al volo, i 5 Code Editor Online di cui parleremo oggi in questo post. Si tratta di strumenti presenti sul Cloud interamente dedicati ai developer. Ovviamente essi possiedono tutti gli strumenti essenziali per lo sviluppo e, per alcune operazioni, possono anche sostituire in tutto o in parte le applicazioni native e le IDE più diffuse. (more...)

Continua a leggere 5 Code Editor online per Web developer

Categoria: Software e Servizi

Tags: , ,

Gli sviluppatori Mozilla propongono un nuovo esperimento, un “proof of concept” che consiste nella reimplementazione dell’interfaccia completa del browser Firefox in codice HTML. Un progetto senza garanzia di successo o anche di supporto da parte della community. (more...)

Continua a leggere Firefox con una GUI in HTML?

Categoria: Software e Servizi

Tags: , ,

Esperimenti come quello delle icone di iOS realizzate solo con i CSS hanno suscitato negli ultimi giorni un interessante dibattito all'insegna della domanda "CSS is the new Photoshop" (?). L'intervento di John Nack di Adobe è quello che va al cuore del problema perché punta l'attenzione sugli strumenti che usiamo e useremo per dare vita alle nostre idee creative. Louis Harboe ha creato le sue icone sfruttando semplici tool online per la generazione di codice CSS3, non avrebbe potuto ad oggi realizzarle usando programmi come Photoshop o Illustrator, semplicemente perché questi ultimi non sono in grado di coprire le esigenze di chi vuole creare elementi grafici di impatto abbinati ad un codice ricco e semantico. Una bella sfida per Adobe, non c'è che dire, complicata, perché, come dice Nack, nessuno è ancora riuscito a tirar fuori un software HTML WYSIWYG che possa anche solo avvicinarsi alla perfezione. E creare l'equivalente di un Illustrator o di un InDesign per HTML, Javascript e CSS? Sarebbe questa la panacea per i web designer di tutto il mondo? Jeffrey Zeldman sostiene che la cosa è impossibile da realizzare. Ma a me viene da chiedere: a prescindere dalla fattibilità , se ne sente davvero la mancanza?

Continua a leggere Sul modo in cui vorremmo realizzare le nostre pagine web

Categoria: Web Design

Tags: , ,
di Kiko

Io ho usato questo espediente sulla dashboard di un sito sul mio tablet, esperimento certo rozzo ma estremamente efficace. Si tratta di una tastiera virtuale realizzata tramite HTML e CSS, col supporto di jQuery. Il codice per realizzare il tutto è ben documentato, mentre gli usi che si possono fare di un simile strumento sono svariati in termini di accessibilità  e usabilità , o come alternativa per le interfacce di tipo touch come nel mio esperimento.

Continua a leggere Tastiera virtuale con HTML, CSS e jQuery

Categoria: CSS

di Kiko

Uno sviluppatore ha creato un sito/tool che misura il grado di supporto del browser in uso rispetto ad HTML5. Si fa riferimento, in particolare, alle principali caratteristiche che i working group del W3C stanno definendo nelle specifiche, senza che il test le copra nella loro interezza. Puntando il proprio browser all'indirizzo html5test.com si potrà  verificare il comportamento del proprio software riguardo form, interazione con l'utente, video e audio, etc. Bene, nella rinnovata e ampliata versione del test appena messa a punto, Evans ha messo a confronto le recenti versioni dei vari browser. Esce vincitore Safari 5.

Continua a leggere Safari5 batte tutti sul supporto a HTML5

Categoria: Software e Servizi

Tags: , ,

Uno degli elementi più comuni nei CMS ed in genere nelle applicazioni LAMP è l'uso della textarea. Nei miei progetti sono sempre combatutto su quale sistema di editing mettere a disposizione degli utenti, perché se da un lato la richiesta di semplicità  è sempre forte, dall'altro bisogna considerare che un input errato può generare un output disastroso. Con gli anni mi sono dato delle regole, eccole! (more...)

Continua a leggere Textarea: WYSIWYG, BBCode, wiki, plain text o full HTML?

Categoria: PHP e Open Source

di Kiko

Come al solito l'idea più semplice si rivela, all'atto pratico, geniale. I designer, del web o della carta a questo punto non importa, sono costretti in una prima fase a usare il classico testo segna posto. Si ricorre al testo latino infierendo su un senso che in realtà  non c'è. Qualcuno ricorre talvolta ai classici e ben più reali testi antichi. Su Internet esistono decine e decine di siti che raccolgono i più famosi testi riempitivi. Se siete web designer certamente conoscerete HTML-Ipsum: una raccolta di elementi HTML per riempire le nostre pagine. Il punto qual è? Semplicemente risulta tedioso ogni volta procedere al copia e incolla del testo. E risulta doppiamente noioso, se il lavoro lo richiede, procedere alla sua rimozione. Così Marko Kuiper ha buttato giù un codice jQuery davvero geniale, benché, ripetiamolo, l'idea è davvero molto semplice. Con una semplice riga di codice JavaScript chiediamo allo script di inserire tutti gli elementi che vogliamo, anche più di uno con una singola chiamata. Il risultato, devo ammetterlo, è un prototipo di pagina estremamente pulito e leggero. Ci si concentra effettivamente più sulla struttura, senza avere il fastidio di lunghe righe di testo di riempimento. Il plugin è liberamente scaricabile da qui e prende il nome, guarda un po', di jHTML-Ipsum.

Continua a leggere jHTML-Ipsum: testo segna posto dinamico!

Categoria: Scripting

di Kiko

In un post avevo già  portato all'attenzione dei lettori i vantaggi/svantaggi che si ottengono dalla minimizzazione del codice CSS e JavaScript. L'obiettivo è sempre lo stesso: tentare di velocizzare lo scaricamento dei file e quindi ottenere una maggiore rapidità  d'esecuzione. Fino a qui gli strumenti degli sviluppatori si sono concentrati principalmente sulle librerie Javascript e sui fogli di stile. Oggi invece tentiamo di capire se può essere buona cosa eseguire lo stesso procedimento su un file HTML. Di per sé al browser poco importa del grado di leggibilità  di un documento HTML. Esattamente il contrario di quanto direbbe uno sviluppatore che ha bisogno di un codice pulito da leggere, ben indentato e magari anche commentato opportunamente. Cià si traduce in un utilizzo massiccio di spazi bianchi e commenti che Juriy Zaytsev definisce puro overhead per la banda e la dimensione finale del file. Così l'autore dell'articolo ha pensato bene di scrivere, in Javascript, un tool che minimizza anche un sorgente HTML eliminando spazi bianchi, commenti e attributi deprecati. Già  perché Zaytsev punta il dito pure sull'utilizzo di CSS inline e di molti attributi definiti depracated dallo standard. Tramite il suo tool un programmatore può anche decidere il grado di minimizzazione. Ora il problema è capire quanto questo approccio può essere fattibile e/o utile.

Continua a leggere HTML minifier: approccio fattibile?

Categoria: Software e Servizi

Tags: , , ,
di Kiko

Molti anni fa era usuale costruire pagine web con una sezione di head ricchissima di metatag. In particolare si abusava del metatag keywords tramite cui venivano elencate una decina di parole chiave tali da identificare meglio il sito. L'obiettivo principale era scalare le classifiche dei motori di ricerca. La cosa è da tempo rubricata alla voce miti e leggende e la stessa Google, attraverso la voce di Matt Cutts, ha ribadito di recente che le keywords non hanno alcun effetto sul ranking di un sito. Una pratica inutile insomma, che negli anni è stata sostituita dall'importanza oggi data al codice semantico. àˆ curioso il modo in cui Mark Pilgrim ha evidenziato il tutto, inserendo questo metatag nella head del suo sito: <meta name="keywords" content="we,dont,need,no,stinkin,keywords"> Nei miei progetti tendo a fare uso di pochissimi metatag e in particolare: il Content Type per specificare la codifica del documento; il metatag author per identificare l'autore del documento (in particolare l'autore di quello specifico articolo nei blog) e non il designer del sito; il metatag description che contiene una estrema sintesi del contenuto del documento; il metatag language per specificare la lingua del documento. Me ne dimentico qualcuno importante? Ne esistono altre che meritano attenzione?

Continua a leggere Sull’uso dei metatag

Categoria: Web Standards

Tags: ,