Design (22)


EditHtmlDom

Ho rilasciato la versione del mio nuovo plugin progettato per WordPress: EditHtmlDom. Il progetto è basato sulle API offerte da Simple HTML DOM grazie al quale puoi modificare la struttura del codice, ad esempio del tuo sito web personale e introdurlo, tramite l’url, nella tua piattaforma WordPress, in una pagina, post e perfino, se il sito è responsive, nel widget test, rimuovendo, rimpiazzando o aggiungendo alcune parti. Per approfondire il progetto t’invito a visitare la pagina ufficiale dell’estensione, pubblicata nel sito ufficiale di WordPress, clicca quì per esaminare o scaricare il plugin.




CSS3 Internet Explorer 10

Nell’apprezzabile articolo pubblicato da David Rousset, su HTML5 Center, l’autore t’introduce nell’adozione della nuova sintassi CSS3 che riguarda le animazioni dei componenti con l’adozione del nuovo prefisso -ms per la piena compatibilità di tali contenuti con Internet Explorer 10. Il CSS3 e le sue pecualieri animazioni non sono concorrenti al linguaggio JavaScript, ma offrono l’opportunità di rimpiazzare alcune funzioni di base. Rousset desidera dimostrarti come con un puro CSS3 si possano ottenere risultati impressionanti per progettare non solo il design di un sito web, ma anche complessi giochi in HTML5. Concludo questo articolo mostrandoti come un semplice testo in html possa diventare intermittente, cambiando il suo colore dall’arancione al rosso, impiegando una semplice “funzione” CSS3.
Ecco il codice Standard W3C:


p{color:orange; animation:testo 2s; -moz-animation:testo 1s infinite; -webkit-animation:testo 1s infinite; -o-animation:testo 1s infinite; -ms-animation:testo 1s infinite;} /* proprietà del testo */
/* funzione CSS3 con i prefissi per la piena compatibilità con le ultime versioni dei più diffusi web browser */
@keyframes testo {from {color:orange;}to {color:red;}}
@-moz-keyframes testo {from {color:orange;}to {color:red}}
@-webkit-keyframes testo {from {color:orange;}to {color:red;}}
@-o-keyframes testo {from {color:orange;}to {color:red;}}
@-ms-keyframes testo{from {color:orange;} to {color:red;}}

Questo codice funziona con Internet Explorer 10!

Copia e incolla questo codice nell’editor html online offerto da Rendera.




Font Awesome

Anno nuovo e new inspiration web design: ti occorre una libreria di classi CSS, progettata per Twitter Bootstrap – Grid System, che ti offre la possibilità di poter personalizzare le icone delle tue applicazioni web? Font Awesome è un utile progetto che offre una nutrita varietà di simpatiche ed intuitive icone da poter integrare nelle tue applicazioni web server, disegnate da te con la mirabile libreria CSS Bootstrap, senza nessun sforzo. Con un rapido utilizzo del @fontface, introdotto dalla nuova semantica CSS3, includi nel tuo progetto web una incredibile varietà di classi che ti permettono, con poche righe di codice, di realizzare piattaforme web di gradevole impatto visivo. Puoi apprendere il rapido impiego con un pratico esempio di applicazione della libreria seguendo questo link. Buon Design e soprattutto Buon 2013 !!




Gumby grid responsive

Un nuovo cool, intuitivo e versatile framework UI CSS, web responsive, con piacevoli animazioni ed effetti JavaScript e interessanti gradienti cromatici è Gumby. Il sito dell’autore offre anche una rapida customizzazione del CSS con la possibilità di poter scaricare, oltre al framework completo con le grid da 12 e 16 colonne e i file javascript, incluso modernizr, anche i template in psd se eventualmente ti occorre progettare la grafica del sito. Adoro questo framework CSS e credo che sarà il mio prossimo punto di riferimento per la progettazione di complessi layout web. Grazie Gumby!!!




CreateJS advanced

Un’ulteriore evoluzione del linguaggio javascript e della sua incredibile versatilità può sicuramente proporcelo CreateJS. Un tool completo che per molti web designer rappresenta l’opportunità di non abbandonare action script e Adobe Flash per convertire i tuoi contenuti multimediali in funzioni e variabili javascript e raggiungere in questo modo il maggior numero possibile di device diffusi in commercio e quindi di utenti. Ora, infatti, CreateJS oltre ad essere una valida alternativa ai contenuti animati prodotti in Adobe Flash è diventato addirittura una incredibile estensione della piattaforma Flash Professional CS6 con l’opportunità di poter convertire perfino con un solo click i tuoi filmati con estensione SWF in javascript. Ecco per te un significativo tutorial prodotto da Creative Cow: clicca quì per assistere al video