SvegliaT Buttons download da WordPress.org
Solo un rapido aggiornamento per avvisare del rilascio della versione 1.0.2 del plugin SvegliaT Buttons, la nuova versione include solamente un pulsante in più di colore porpora “purple”, la vera novità è che da alcuni giorni il plugin è disponibile per il download anche dal sito ufficiale di WordPress.org, consiglio quindi di effettuare il download dal seguente indirizzo: SvegliaT Buttons WordPress.org, oppure ricercare ed installarlo direttamente dal pannello admin del vostro WordPress.
Per maggiori dettagli potete inoltre visitare la pagina ufficiale del plugin su questo sito.
SvegliaT Buttons plugin per inserire pulsanti in WordPress
Uno dei problemi dei template per WordPress di tipo premium è che le tante funzionalità aggiuntive incluse vanno ad appesantire il file function.php e quindi il theme e l’intero sito web. La soluzione migliore è quella di suddividere le varie funzionalità in diversi plugin in modo da attivare di volta in volta solo quelle che vengono realmente utilizzate.
Per questo motivo ho pensato di creare un plugin per l’inserimento di pulsanti tramite shortcode, questa funzione in genere è compresa nei template premium e non attivabile separatamente. La prossima versione di SimpleRin e dei futuri template, che spero di rilasciare, conterranno separatamente questa funzione che verrà attivata con il plugin.
Ovviamente c’è anche un’altra convenienza, il plugin che ho fatto è utilizzabile su qualsiasi tempalte, quindi potete scaricarlo ed utilizzarlo da subito anche nel vostro sito WordPress.
Il plugin si chiama SvegliaT Buttons e consenta appunto di inserire pulsanti colorati personalizzabili mediante schortcode. I pulsanti sono realizzati in CSS3 e al momento sono 16, 8 normali e 8 grandi. Ogni tipo di pulsante ha tre sfumature di colore diverso a seconda dello stato, e sono disponibile nei colori: rosso, giallo, grigio, blu, rosa, verde, arancione e nero in modo da adattarsi bene praticamente ovunque.
Le idee per sviluppare ulteriormente il plugin sono molte spero di avere il tempo e l’incoraggiamento per svilupparlo ulteriormente. Se volete potete vedere la pagina del plugin con demo, esempi, istruzioni e link per il download.
Rilasciata la versione 1.0.1 di SimpleRin
Finalmente è disponibile la nuova versione di SimpleRin, la 1.0.1. Le modifiche apportate a questa nuova versione sono diverse, circa una trentina e sono state fatte seguendo i suggerimenti del plugin Theme-Check fornito da WordPress.org.
Il plugin in questione non è certo garanzia di qualità, ma è un grosso aiuto onde evitare errori grossolani, in più fornisce anche suggerimenti su come migliorare il codice suggerendo in automatico le possibili migliori alternative.
La versione 1.0.1 di SimpleRin risulta idonea al controllo di Theme-Check.
Download box di ricerca
Uno degli aspetti più belli di internet è poter condividere. Bighellonando sul Web ho notato che alle volte anche semplici risorse per designer sono rilasciate a pagamento. In particolare ho visto che vendevano un “pacchetto” di searchbox. Mi sono ricordato che anche a me capita spesso di farne quindi ho deciso di cercarne alcuni del mio archivio e di rilasciarli gratuitamente.
Purtroppo non sono molti e forse non sono belli come quelli commerciali, ma essendo contenuti in un PNG Fireworks sono completamente modificabili e quindi sono sicuro che riuscirete a renderli più belli di come sono .
Web design, per creativi, grafici, sviluppatori
Amo la lettura in generale e le rare volte che sono in Italia faccio scorta di libri e soprattutto di manuali. Sono certo che tutte le letture in qualche modo arricchiscono il mio bagaglio culturale nell’abito del Web design, ma solo alcune mi entusiasmano veramente.
“Web design, per creativi, grafici, sviluppatori” è un manuale rilasciato da Apogeo e scritto da Jason Beaird, un designer statunitense che collabora spesso anche con Sitepoint.
Il manuale, unico in italiano nel suo genere, fa una succulenta panoramica su tutti gli aspetti della progettazione di un template per un sito Web. Suddivisi in capitoli affronta tutti i temi che un Web designer dovrebbe conoscere, il layout, la scelta dei colori, l’uso delle texture, la tipografia e le immagini.
Ogni argomento è spiegato partendo dalle basi della teoria, quindi il manuale probabilmente è meno adatto a chi conosce già la teoria dei colori, la classificazione dei fonts e altre cosette di questo tipo. Il libro è di circa 200 pagine quindi non dovete aspettarvi grossi approfondimenti, ma è comunque una buona base di partenza per capire dove siano le nostre maggiori lacune e quali argomenti approfondire, magari con nuove letture più specializzate.
Infine vorrei segnalare anche l’appendice di Emilly Simth, che propone un articolo su “Come evitare le abitudini web nelle applicazioni per iPhone.”
Buona lettura.
960 Grid System ottimo Framework per realizzare template
Quasi tutti i template realizzati da me ultimamente sono si appoggiano al 960 Grid System, non posso quindi esimermi dal parlare di questo eccezionale Framework oramai popolarissimo fra i designer di tutto il mondo.
Il 960 Grid System è un Framework CSS per la realizzazione di template per siti Web. Nasce dal lavoro di Nathan Smith, un affermato web designer sposato con una donna Estone e questa probabilmente è l’una cosa che mi accomuna a questo grande professionista, non la moglie, ma il fatto che anche io sono sposato con una donna dei Paesi Baltici.
Grazie al 960 Grid System è possibile sviluppare rapidamente un layout in HTML CSS con proporzioni aggraziate ed altamente personalizzabile.
Inizialmente il sistema era stato pensato per poter ben adattare i template a schermi con risoluzioni di 1024px per questo fu pensata una griglia di 960px, da poter suddividere facilmente in 12, 16 o 24 colonne. All’interno della griglia è possibile facilmente inserire i vari blocchi ed eseguire numerose composizioni.
Nonostante gli schermi abbiano adesso risoluzioni anche maggiori il sistema della griglia da 960px continua ad adattarsi bene a pressoché tutti i monitor.
Per chi non amasse utilizzare solo il layout a grandezza fissa esiste anche la possibilità di implementare il sistema in un template di tipo fluid che si adatterà in automatico alla grandezza dello schermo.
L’utilizzo del 960gs è decisamente semplice, basta infatti scaricare il pacchetto dal sito ufficiale con le cartelle e i CSS e su questo sviluppare il nostro lavoro. Il file compresso contiene anche alcuni esempi.
Inutile spiegare il funzionamento nel dettaglio, su internet trovate moltissime guide ben realizzate anche in italiano. La curva di apprendimento non è assolutamente ripida, se avete le conoscenze di base di HTML e CSS in pochi minuti sarete già in grado di utilizzarlo in tutte le sue potenzialità.
Link: 960 Grid System
Link che s’illuminano con jQuery
Molti templates premium fra cui ad esempio quelli rilasciati da Rockettheme, implementano questa “nuova” caratteristica di rendere i link gradatamente illuminati al momento dell’hover.
Per implementare questo effetto, basta scrivere poche semplici righe di jQuery ed inserirle nel nostro theme ed anche i link dei nostri templates si illumineranno magicamente.
Prima di vedere lo script occorre dire due cosette, la prima è che per farlo funzionare occorre oltre a jQuery anche il plugin jQuery Animate Colors, il plugin appunto per l’animazione del colore.
Come probabilmente sapete ogni script aggiunto alle nostre pagine ne aumentano la pesantezza. Occorre quindi chiedersi se vale la pena implementare jQuery e il relativo plugin solo per illuminare i link.
Il mio consiglio è di utilizzarlo solo se il template richiede già jQuery altrimenti se ne può fare anche a meno.
Lungi da me voler spiegare jQuery, sono solo un neofita con tanta passione e il mio intento è solo quello di condividere con voi queste poche righe che ho scritto.
L’HTML è composto da un semplice elenco a cui è stato aggiunto un ID chiamato “navigation”. Vedi il codice sotto.
<div id="navigation"> <h1>Demo: Link che s'illuminano con jQuery</h1> <ul> <li><a href="http://www.svegliatemplate.com/">Home</a></li> <li><a href="http://www.svegliatemplate.com/category/blog/">Blog</a></li> <li><a href="http://www.svegliatemplate.com/download/">Download</a></li> </ul>
L’ID ha il duplice scopo e cioè di segnalare l’obiettivo a jQuery e di poter impostare il colore del link sul nero (#000) tramite il CSS. Vedi il codice del CSS sotto.
<style type="text/css">#navigation li a{ color: #000; }</style>
Nell’Head della pagina bisogna ricordarci di collegare i 3 script, ovvero jQuery, il plugin per l’animazione del colore e lo script fatto da me per animare il colore dei link denominato appunto link-luminosi.js. Vedi sotto:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo: Link che s'illuminano con jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/link-luminosi.js"></script>
<script type="text/javascript" src="js/jquery-animate-colors.js"></script>
<style type="text/css">#navigation li a{ color: #000; }</style>
</head>
Non resta quindi che dare una rapida occhiata al codice in modo che possiate modificarlo come volete.
Il selettore indica di agire su “#navigation li a” cioè su tutti i link (a) dell’elenco (li) che fanno riferimento #navigation.
Dopo abbiamo l’hover che è l’azione, l’hover ha due stati, quando ci passiamo sopra e quando da sopra ci allontaniamo. Come vedete quando si va sopra parte l’animazione del colore che lo porta dal colore di partenza (il nero #000 impostato dal CSS) al colore impostato da me, in questo caso il viola #FF00FF. Quando ci allontaniamo con il mouse dal link avviene il contrario, dal viola si torna al nero #000).
$(function() {
$('#navigation li a').hover(function() {
$(this).animate({'color' : '#FF00FF'}, 200);
},
function() {
$(this).animate({'color' : '#000'}, 200);
});
});
Non resta quindi che lasciarvi i link per la demo live e il download dello script comprensivo di demo.
Rilasciato Simplerin 1.0
Rilasciato Simplerin, il primo template gratis per WordPress realizzato da SvegliaTemplate.com. Fra le tante caratteristiche di Simplerin ricordiamo il file di localizzazione per la lingua, gli shortcode per inserire rapidamente alcuni tipi di pulsanti, il portfolio, lo slide-show e molto altro.
Nella scheda dettagliata potete visualizzare l’elenco di tutte le caratteristiche principali. E’ ovviamente disponibile una demo live e il download.
