StyledCSSMenus, da la possibilità a tutti noi webmaster di scaricare i file sorgente dei suoi splenditi menu in CSS. I menu sono davvero molto accattivanti e moderni, non manca l’ormai noto stile Web2.0, sono moltissimi e tutti assolutamente gratis!!!

Tutti i menu by StyledCSSMenus, sono compatibili con tutti i browser, quindi mai più layout sballati in Internet Explorer. I menu sono scaricabili grazie al comodo link sottostante l’anteprima del menu, il download del file .Zip è davvero molto veloce data la piccolissima dimensione dell’archivio.

Il sito pubblica in modo free i codici sorgenti, quindi tutti i vari file CSS e HTML, ma richiede il pagamento per i file .psd ( Estensione che denomina i file di Adobe Photoshop ) grazie ai quali potremmo modificare tutte le immagini che compongono il menu per modificarlo a nostro piacimento.

I menu sono tutti testabili a questo indirizzo: http://www.styledmenus.com/search/label/allmenus.

Da oggi, non dovremmo più effettuare lunghe e noiose ricerce per trovare patterns ( Sfondi ) per il nostro Sito o Blog qualsivoglia. Infatti grazie a questo carinissimo sito http://patterns.ava7.com/ avremmo la possibilità di visualizzare e scaricare più di 1098 Patterns gratuiti da utilizzare nella realizzazione di qualsiasi tipo di grafica ( Web, Photoshop ecc… ).

Il sito come potrete ben vedere è veramente molto carino, la grafica è semplicissima ma spettacolare allo stesso tempo. Il codice HTML è veramente pulito e validato negli standard XHTML e CSS. La chicca bellissima è la coccinella che con il passaggio del mouse sopra alle sue due ali, fa vedere i loghi dei noti SocialBookmarking “StrumbleUpon” & “Delicious“. Inoltre non parliamo della farfalla che vola nel cielo con il logo di “Internet Explorer” che viene uccisa dal ragno “Firefox” con un semplice passaggio di mouse! .

Ava7Patterns possiede più di 1098 Patterns catalogati per colore e tipo, infatti grazie ai menu “Color” e “Shapes” potremmo affinare la ricerca dei Patterns a quelli che ci interessano. Inoltre ogni Patterns potrà essere commentato e valutato semplicemente entrando nella pagina dedicato a quel determinato Sfondo.

I Patterns disponibili sono davvero di tutti i tipi, forme e colori. C’è ne sono davvero molti come potrete vedere e tutti totalmente gratis!!!

Ava7Patterns permette l’utilizzo completo dei suoi patterns per tutti i tipi di grafica, per i siti web vorrebbe essere linkata all’interno dell’HomePage e penso che sia di dovere dato che offre tutte questi sfondi in modo gratuito.

Insomma d’ora in poi i nostri siti web avranno uno sfondo veramente molto più cool

Questo articolo lo avrei dovuto scrivere ben 11 giorni fa ( 19/02/09 ), onestamente me ne ero proprio dimenticato visto gli impegni lavorativi di questi giorni, comunque come avrete ben capito anche dal titolo di questo articolo il SyGy Site compie la bellezza di 3 anni.

Mi ricordo ancora quando per la prima volta ho voluto provare l’hosting gratuito, che tuttora utilizzo, AlterVista il quale era l’unico servizio gratis che ti dava molte opzioni come il php/mysql/email ecc… Da quel giorno ho incominciato a scrivere le mie prime righe di codice HTML e derivati, continuando sempre più arrivando al PHP e molte altre piccole cosette come i CSS.

Il primo sito era stato realizzato come mia prima esperienza con l’HTML ed onestamente avevo il 70% del codice scritto dal vecchio NamoWebEditor 7.5 con il quale scoprivo tutti i tag che non conoscevo. Poi studiando su internet e sopratutto passando ad un’ADSL decente 4Mb ho incominciato a scrivere e modificare forum phpBB e altri piccoli script in PHP. Con la conoscenza dei CSS che ho voluto realizzare un nuovo e moderno design per il sito, anche li gli studi sull’argomento mi hanno imparato sempre di più codici nuovi da applicare allo staticissimo HTML! Con questa nuova interfaccia ho voluto pure lanciare diversi CMS come il Forum in phpBB2 interamente modificato da me stesso, Blog in WordPress, una Top100 ed uno Shop online di vestiti. Diciamo che in questi mesi mi ero dato molto da fare!

Arriva l’ultimo anno cioè il 2008 quando con l’esperienza del forum e del blog e quindi di php/mysql ho voluto passare da un sito statito ad uno dinamico installando un CMS molto adatto alle mie esigenze. Il template del CMS mi è piaciuto molto e l’ho dovuto adattare ai vari plugin che uso. Inoltre nel 2008/2009 c’è stato il grande Boom del Blog, diciamo che ho lasciato stare lo sviluppo dell’intero sito per dedicarmi alla scrittura di articoli riguardanti la tecnologia e il mondo del PC; si inizio con 0 visite fino a quando Google e gli altri vennero a bussare alle porte del mio sito! Da quel giorno le visite aumentarono sempre di più. Notando le visite mi sono detto se era la strada giusta continuare a scrivere sul blog… e diciamo che ne sono davvero molto contento dell’impesa ( chiamiamola ) che ho compiuto. Adesso ricevo una media di 350/450 visite al giorno con molti lettori del nostro RSS, inoltre 617 ( fino ad’ora ) utenti hanno scritto commenti ai vari articoli.

3 anni sono un traguardo importante per me e per tutti gli utenti che in questi anni ci hanno visitato, che inoltre vorrei festeggiare diciamo con voi.

Grazie ancora di cuore a tutte le persone che ci hanno visitato e che ci visitano giorno dopo giorno.

SyGy

ShoutMix è il nuovo servizio web che ci permette di realizzare una vera e propria chat completa di amministrazione in pochi semplici passi, per la precisione 3!

La chat che andremmo a creare è una comunissima chat con la quale i nostri amici o utenti del nostro sito/blog potranno parlare insieme e scambiarsi opinioni. La chat inoltre è anche molto carina infatti permette di inserire nome, indirizzo web ed infine il messaggio che verrà visualizzato; l’indirizzo web verrà inserito come link all’interno della chat al posto del nome.
ShoutMix ci permette la completa gestione della chat, sia nell’amministrazione dei messaggi che del layout e dei colori della stessa. Infatti grazie al menu delle impostazioni della chat potremmo scegliere sia il layout i colori e addirittura gli smiles, si avete capito bene ci permette di inserire nuovi smiles all’interno della chat che andremmo a creare; questi nuovi smiles avranno anche le scorciatoie da tastiere come un normalissimo smiles. Naturalmente per aggiungere uno smiles dovrà essere hostato su un qualsiasi host, insomma dovrete avere l’indirizzo esatto dello smiles e poi inserirlo nell’apposita sezione “Settings » Display » Smileys“.

ShoutMix è un servizio prettamente in lingua inglese, ma hanno dato la possibilità di realizzare una traduzione personale per ogni nostra chat creata, infatti grazie alla sezione “Setting » Display » Labels” potremmo inserire le traduzioni per ogni parola e frase che è all’interno della nostra chat, oltre al nome stesso di quest’ultima. Infatti se andrete a visualizzare la chat che ho realizzato per farvi vedere un preview della chat che potreste realizzare, visualizzerete tutte le scritte in italiano; questo perchè le ho tradotte con molta semplicità sempre grazie alla solita pagina Labels!

Naturalmente dato che ShoutMix è come ho detto prima un servizio in inglese permette oltre alla traduzione delle parole, anche la possibilità di impostare la giusta ora della chat, questo perchè l’orario del server in qui sono posizionate le nostre chat è diverso dal nostro e quindi ShoutMix ci permette di impostare anche il giusto fuso orario all’interno della sezione “Setting » Display » Date & Time“.

Invece grazie alla sezione “Security” potremmo scegliere tutte le opzioni di sicurezza della nostra futura chat, come ad esempio il ban o la protezione di determinati nomi restringendo ad esempio l’utilizzo di parole non adatte ad un pubblico minorile come nome della persona che invia il messaggio. Il ban invece ci permette di bannare sia molteplici indirizzi IP, o addirittura un’intero Pool, che siti indirizzi URL non validi, insomma una sorta di antispam casareccio.

Alla fine dopo che avremmo impostato tutti i parametri a nostro piacimento potremmo prendere gli svariati codici HTML per inglobbare la chat in diversi modi: Flash Chat, Iframe, URL. Insomma potremmo davvero sbizzarrirci grazie agli svariati modi per inglobbare la nostra chat, infatti grazie all’iframe potremmo inserirlo in qualunque pagina HTML, come anche l’inglobbamento del file flash della chat. L’URL non è altro l’indirizzo che possiede la chat, perchè la chat creata viene hostata da ShoutMix con un’url del tipo http://sygy.shoutmix.net quindi avremmo anche solo la possibilità di inserire un link testuale o con un’immagine con il quale dirotteremo l’utente all’interno della chat hostata da ShoutMix. Per prelevare i codici HTML dovremmo andare nella sezione “QuickStart » Get Codes“; se possediamo un blog in WordPress c’è la possibilità anche di seguire una semplice guida che spiega passo passo come far ad inglobbare la chat!

ShoutMix in versione FREE ha però delle limitazioni infatti potremmo solo: visualizzare un massimo di 250 Messaggi, 150 caratteri a messaggio, 60 messaggi all’ora, un refresh automatico al minuto ed infine non potremmo avere un log dei messaggi inviati all’interno della chat. Per avere tutto il resto dovremmo pagare 20$ all’anno e potremmo avere tutti questi vantaggi: http://www.shoutmix.com/main/features.php

Continua »

Grazie a Favicon.cc da oggi potremmo realizzare centinaia di Favicon con il nostro bel mouse. Infatti grazie a questo splendido sito tutto in stile Web2.0, avremmo a disposizione un pennello ed un’area di disegno nella quale dovremmo disegnare proprio noi con il nostro mouse la nostra Favicon.

La grafica del sito è molto semplice e anche l’utilizzo dello stesso è semplicissimo, infatti come avrete potuto capire appena accederete al sito verrà visualizzato al centro della pagina l’area di disegno; sulla destra invece avremmo la possibilità di scegliere il colore del nostro pennello grazie al comodo Color Picker. Nella stessa sezione del Color Picker potremmo selezionare l’opzione “transparent” cioè far diventare il pennello di colore trasparente e quindi prendere il colore di sfondo del browser in qui verrà visualizzata la Favicon; inoltre potremmo prendere un colore all’interno della nostra area di disegno grazie al comodo Pick Color.

La chicca di questo sito è la possibilità di visualizzazione della Favicon che stiamo disegnando all’interno del nostro browser, infatti se ci facciamo caso ogni qual volta modificheremo il disegno anche la Favicon sul nostro browser verrà modificata, oppure se il nostro browser non supporta le Favicon potremmo visualizzare comunque il preview grazie all’area “Preview” che si trova direttamente sotto all’area di disegno.

Un’altra piccola ma carinissima chicca di questo sito è la possibilità di uploadare una nostra immagine che abbiamo all’interno del HDD e trasformarla nella Favicon. Si avete capito bene, realizzare Favicon da delle immagini salvate nel nostro PC, naturalmente l’effetto grafico è molto scarso dato che da miliardi di Pixel l’immagine verrà rimpicciolita in soli 256 Pixel le dimensioni effettive di una Favicon. Diciamo l’immagine che verrà visualizzata all’interno dell’area di disegno prenderà in grandi linee l’immagine che avremmo uploadato in precedenza.

Alcuni Browser supportano anche la possibilità di visualizzare delle Favicon in movimento e quindi in gif. Per realizzarne una basterà cliccare su “Use Animation” sotto all’area di disegno, una volta cliccato su di esso verranno visualizzate tutte le opzioni per impostare e realizzare tutti i frame che comporranno la gif finale.

Una volta realizzata la nostra bella Favicon e visualizzata grazie al Preview come verrà visualizzata all’interno dei browser, non ci rimarrà che effettuare il download della stessa, questo grazie al pulsante “Download Favicon” che si trova proprio sotto il Preview. Cliccando su questo pulsante partirà il download del file “favicon.ico” che dovrete uploadare tramite FTP all’interno della root del vostro dominio.
Alcuni servizi web riconoscono in automatico la favicon perchè fanno richiesta al server per vedere se il file “http://www.miodominio.it/favicon.ico” esiste o meno, altri invece hanno bisogno di leggere all’interno dell’header delle nostre pagine web. Per fare ciò dovremmo inserire all’interno dei tag “<head> </head>” delle nostre pagine, questo codice HTML “<link rel=”shortcut icon” href=”http://www.miodominio.it/favicon.ico”>“; naturalmente è chiaro che l’estensione .it è per esempio ogni WebMaster dovrà inserire la propria!

Se vorremmo vedere se la nostra Favicon è stata installata alla perfezione all’interno delle nostre pagine e quindi del nostro server, basterà andare al suddetto Favicon Validate: http://www.html-kit.com/favicon/validator/

Da oggi grazie a Wufoo, potremmo creare la bellezza di 3 form dati da inserire in qualunque sito o blog… tutto in stile web2.0 con pulsanti di submit molto carini e colorati e sopratutto con un tema del form realizzato da noi stessi con il nostro mousino!

Wufoo è un servizio a pagamento ( Ad Infinitum € 199.95 per mese ), ma permette agli utenti registrati di provare GRATIS le potenzialità del servizio senza nessun limite di tempo, ma restringendo alcuni parametri come ad esempio il numero di form realizzabili & il numero di utenti che lo possono modificare. Grazie all’account Free, possiamo realizzare 3 form modificabili da 1 utente, avere 3 reports e 100 form inviabili al mese.

Questo servizio è utile a chiunque voglia realizzare form in qualsiasi modo e forma per farli compilare ai propri utenti direttamente online, ad esempio un form di registrazione o qualunque altro form; mettiamo ad esempio un sondaggio fai da te o comunque per raccogliere informazioni dei nostri utenti che visualizzano il nostro sito internet o blog che sia!

Una volta effettuata la registrazione ed entrati nell’amministrazione dei form grazie al pulsante “Create Form” potremmo realizzare il nostro primo form gratis. Una volta cliccato su di esso, verrà caricata una nuova pagina dove visualizzeremo sulla sinistra tutti i field disponibili come ad esempio il campo di testo singolo o come un menu a tendina o addirittura il campo data; insomma tutti i campi di testo di un signor form che si vuol rispettare. L’unica limitazione, come ho scritto nelle righe precedenti, che nella versione free è possibile inserire un massimo di 10 field quindi bisognerà gestire bene tutti i filed per ottenere il massimo dal nostro form.

Cliccato sul field che vorremmo aggiungere al nostro form, wufoo tutto in automatico senza aggiornare la pagina e sopratutto grazie ad Ajax e al CSS aggiungerà il field sull’area bianca al centro della pagina. Quell’aria bianca non è altro che il preview del nostro form; cosi riusciremo a visualizzare in modo perfetto quello che stiamo facendo. Una volta inserito tutti i nostri vari field, possiamo passare alla modifica di loro stessi, cioè impostare alcuni parametri indispensabili per la perfetta esecuzione del form da parte dell’utente.
Ad esempio potremmo impostare il campo “Required” cioè che se l’utente non compila quel field il form non verrà inviato, o ad esempio potremmo scrivere le informazioni di aiuto che il webmaster inserirà per aiutare l’utente alla compilazione dello stesso field.

Il form naturalmente ha anche delle opzioni generali, come ad esempio il titolo, la descrizione, la lingua dello stesso; tutte questi parametri e non solo possono essere modificati grazie al pulsante “Form Setting” in alto a sinistra, all’interno del menu modifica del form. Piano piano progetteremo sempre più dettagliatamente il nostro form personalizzato realizzato grazie a questo semplicissimo form builder.

La chicca principale di questo sito è la possibilità di modificare il template del nostro form, questo perchè il form viene hostato da wufoo e quindi non avremmo nessuna possibilità di modifica del codice CSS o HTML del form; grazie al menu “Themes” potremmo realizzare tutti i nostri template personalizzati, potremmo ad esempio linkare il nostro logo o comunque modificare il colore di sfondo. Questo strumento non si ferma solo a linkare il nostro logo o modificare il colore di sfondo ma ci permette di modificare qualsiasi aspetto del nostro form, come il colore dei link, dei titoli dei field, dei pulsanti di submit ecc… addirittura potremmo importare un CSS da qualunque sito o comunque hosting file. Naturalmente per importare un CSS dovremmo prima scaricare il “Wufoo Theme Kit” che ci permette di carpire tutte le varie classi ed ID del CSS che dovremmo modificare noi stessi!
Una volta realizzato anche il nostro tema personalizzato, per associarlo ad uno dei form realizzati in precedenza basterà andare nella sezione “Form” e cambiare tramite il menu a tendina l’opzione “Default Theme” nel nome del nostro tema; questo andrà effettuato per ogni form che avremmo realizzato perchè wufoo associa il tema di default per ogni nuovo form creato.
Se invece non siamo molto bravi ad abbinare i colori o semplicemente siamo troppi pigri per selezionare ogni opzione del Theme editor, potremmo scegliere tra i molteplici temi già realizzati dallo staff di wufoo e vi garantisco che sono veramente molto carini e gradevoli alla vista!

Arrivati a questo punto tutti vi starete chiedendo come facciamo a far visualizzare i nostri form tutti belli personalizzati sia nei field che nei template ai nostri utenti… Beh niente di cosi difficile, basta andare nel menu “Form” selezionare l’opzione “Code” relativo al form del quale vorremo avere il link ed i relativi codici possibili che wufoo ci mette a disposizione. Una volta cliccato sul pulsante “Code” verrà caricata un’altra pagina con tutte le varianti di codici disponibili: Link, Embed, Download del file intero, PopUp, Download del file XHML/CSS e per ultimo l’email il modo più comune per inviare i link ad i nostri amici.

Questo è un’esempio finale di un form realizzato da me stesso: Fill out my form!

Invece se volete visualizzare alcuni esempi di form e di template disponibili c’è sempre la possibilità di visualizzare la Gallery: http://wufoo.com/gallery/

Insomma grazie a questo Wufoo potremmo realizzare davvero dei form degli del nome tutti in stile web2.0 e con colori personalizzati di nostro gradimento!

reCAPTCHA è un sito internet che permette di avere un CAPTCHA gratis per il nostro sito internet. I CAPTCHA per chi non li conosce sono quei numeri che dobbiamo inserire in ogni form di registrazione che effettuiamo, vengono chiamati molto più comunemente “Codici di sicurezza”; insomma quei codici che dobbiamo inserire come sono scrittri, altrimenti il form non sarà inviato al destinatario. Questo CAPTCHA è stato ideato per evitare registrazioni inutili o comunque per evitare SPAM & Bot di registrazioni.

Girando per il sito, dato che sono registrato, ho trovato un bellissimo e utilissimo servizio che mette a dispozione reCAPTCHA; questo servizio si chiama reCAPTCHA Mailhide. Malhide ci permette di nascondere la nostra vera email da bot di SPAM che scandagliano tutto il web per trovare indirizzi email per sistematicamente email di SPAM. Grazie a questo servizio potremmo finalmente proteggere la nostra email da SPAM inutile che altrimenti ogni giorno ci riempierà la nostra casella email.

Per incominciare a proteggere la nostra email da SPAM Bot, non dovremmo far altro che inserire il nostro indirizzo email all’interno dell’unico form all’interno della pagina, una volta inserito basterà cliccare su “Protect It” e immediatamente dopo alcuni istanti reCAPTCHA ricaricherà una pagina con all’interno 2 tipi di offuscamento della nostra email che abbiamo appena protetto.

Il primo tipo di protezione è un classico URL che reindirizzerà l’utente ad una piccola pagina di reCAPTCHA con al suo interno un CAPTCHA da digitare e solo dopo la giusta sequenza di caratteri, verrà caricata una pagina con la nostra vera e propria email. Con questo metodo potremmo realizzare un link fittizzio con il quale potremmo ingannare un semplice Bot, ma l’occhio umano non verrà ingannato. Per fare un’esempio pratico per visualizzare questo metodo di protezione ho protetto la mia email ed mi è stato questo URL:

mia email fittizia

quindi come avrete potuto capire non bisognerà più scrivere il nostro indirizzo ma basterà un semplice URL per poi farla visualizzare solo dopo il corretto inserimento del CAPTCHA. Questo strumento è utile perchè molti Bot, scandagliando il nostro sito, visualizzerà tutti gli indirizzi email per poi inserirli in un database di email da spammare; invece grazie a questo metodo il Bot non visualizzerà nessuna email perchè l’email viene celata da un link e solo dopo l’inserimento del giusto codice che non riuscirà mai a carpire.

Il secondo metodo invece utilizza parte della nostra email per far capire comunque che c’è un’indirizzo email vero ma il link che verrà aperto invece di essere il solito “mailto:miaemail@miohosting.com” sarà una pagina web nel quale ci sarà un CAPTCHA da riempire e solo dopo l’inserimento corretto, verrà visualizzata la vera email. Un’esempio pratico di questo secondo metodo per proteggere la nostra email è questo:

simo…@altervista.org

Questo è il risultato del codice HTML che ci viene fornito da reCAPTCHA, come potrete vedere viene utilizzata parte della mia email per far comunque capire all’utente che quella è un’email valida, ma il link che si aprirà non sarà la nostra vera email ma una pagina nella quale dovremmo digitare all’interno del form la corretta sequenza di caratteri per poi visualizzare in una seconda pagina l’email.

Quindi diciamo che grazie a questi due metodi possiamo proteggere la nostra email da Bot di SPAM, infatti basterà inserire uno dei due codici che ci fornirà reCAPTCHA all’interno delle nostre pagine invece del solito indirizzo email che viene scovato immediatamente dai Bot.

Oggi stavo giocando un pò con un paio di temi per WordPress, la piattaforma editoriale per eccellenza.

Confrontando diversi temi con questo che viene utilizzato per questo blog “GlossyBlue 1.4” realizzato da “Nick La” della nota casa di design “n.Design Studio” ho notato che Glossyblue non era in grado di far visualizzare gli avatar nella lista dei commenti. Gli avatar sono stati inseriti nelle ultime versioni di WordPress, quindi i temi un pò vecchiotti non sono ancora compatibili per visualizzare queste simpatiche immagini che ogni utente può decidere di inserire per farsi riconoscere a prima vista all’intero mondo dei blogger.

Dopo aver visto un pò i vari codici php del template dei commenti mi sono accorto di questo piccolo codice:

<?php if(function_exists(‘get_avatar’)){ echo get_avatar($comment, ‘35′); } ?>

Beh questo piccolo codice riesce a capire se dal menu di amministrazione è stata impostata l’opzione della visualizzazione degli avatar, e se l’esito è positivo, visualizza l’avatar di ogni utente che ha scritto un commento.

Quindi inserendo questo piccolo codice all’interno del nostro tema GlossyBlue ho magicamente portato gli avatar all’interno di questo blog; infatti appena leggere un’articolo con qualche commento, accanto al nome della persona che ha scritto il commento verrà visualizzato anche l’avatar da lui scelto.

Il codice va inserito esatammente nel template “comments.php” e precisamente dopo il codice “<li class=”<?php echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>“. Naturalmente le virgolette iniziali e finali non fanno parte del codice che trovere all’interno dei file comments; quindi basterà copiare ed incollare il codice della visualizzazione degli avatar dopo questo codice che ho inserito prima. Una volta fatto ciò il tema GlossyBlue visualizzerà anche gli avatar dei nostri utenti che scriveranno i commenti.

Chi è un pò esperto di codici HTML, PHP ecc… insomma sa smanettare con i file template di WordPress, può effettuare questa modifica tramite la comoda sezione “Design > Editor Temi” che trovere all’interno del menu di amministrazione di WordPress. Per tutte le persone che non sono in grado di effettuare questa modifica pur essendo molto semplice, ho pensato io a modificare il file originale che viene inserito nell’ultima versione del tema GossyBlue 1.4. Quindi basterà uploadare il nuovo file e gli avatar compariranno nel vostro blog senza aver fatto nulla di difficile. Ricordo a tutte le persone che scaricheranno il file “comments.php” che dovranno uploadarlo solo se non hanno effettuato modifiche precedenti al file, altrimenti quelle modifiche andranno perse dato che dovrete sovrascrivere il file.

comments.php

Il precedente file dovrà essere sovrascritto con quello del tema che si trova nella cartella “root_blog/wp-content/themes/glossyblue-1-4/“. Una volta sovrascritto basterà andare a vedere un’articolo con dei commenti e incominceremo a vedere il nostro blog con i vari avatar.

Ricordo inoltro che l’avatar che viene scaricato è quello impostato su Gravatar, quindi se non vi siete registrati, fatelo, altrimenti visualizzere un’omino grigio che indicherà che quell’utente non ha nessun avatar registrato presso Gravatar.

Se avete problemi con il file scrivetemi un commento qui!

Oggi vi vorrei parlare di un bel articolo scritto su “Particletree” che parla di come abbelire i soliti e bruttissimi bottoni di submit che vengono visualizzati all’interno dei nostri browser, quando abbiamo un form dati da inviare.

Il sito mette a disposizione un bel codice HTML e CSS che ci permette di realizzare 3 pulsanti “Save” “Change Password” “Cancel” in stile Web2.0. Particletree ci fa visualizzare prima tutti i possibili pulsanti realizzabili tramite il solito codice HTML “<input type=”submit” value=”Submit” />” che viene inserito per realizzare un form dati e poi ci spiega come abbelire i pulsanti con i suo nuovo e intuitivo codice CSS.

Questo codice CSS ci permette di inserire una piccola immagine, di default icone famfamfam Silk, prima delle varie scritte che ci permettono di visualizzare il bottone. La bellezza di questi bottoni sono i colori di hover quindi quando viene passato il mouse sopra di essi; infatti vengono utilizzati colori molto belli e sempre in stile Web2.0.

Questo è un’esempio di bottoni di form dati di deafult:

Questi invece sono i pulsanti che potremmo avere, adottando il CSS:

Quindi come potrete vedere l’enorme differenza di bellezza e chiarezza dei nuovi tipi di pulsanti. Se vogliamo colpire i nostri utenti con dei form molto belli e accattivanti questo piccolo script HTML & CSS non deve mancare all’interno del nostro sito o blog. Il codice HTML & CSS da inserire per realizzare questi splenditi pulsanti sono veramente molto semplici da capire e da inserire all’interno delle nostre applicazioni Web.

Per visualizzare la guida con i codici CSS visualizzate questo link: http://particletree.com/features/rediscovering-the-button-element/

D’ora in poi non dovremmo più andare alla ricerca di un tema per il nostro blog basato su piattaforma WordPress, questo perchè lo creeremo noi stessi direttamente online e senza la dovuta conoscenza di CSS, HTML & PHP.

Infatti grazie al nuovo sito http://templatr.cc/ potremmo realizzare template per WordPress per poi scaricarli tutto in pochi minuti.

Grazie a TemplatR potremmo impostare il layout del template: 1/2/3/4 colonne, 2/3/4 righe e molti altri tipi di layout. E’ possibile prima avere delle anteprime grafiche del layout che andremo a scegliere e una volta avremmo scelto quello che fa al caso nostro dovremmo cliccare sull’immagine di preview per incominciare a modificare quello specifico layout.

Una volta scelto il layout potremmo passare alla vera e propria modifica del codice CSS, che per altro è semplicissima. Potremmo impostare i vari colori, font, dimensione, altezza, larghezza per ogni oggetto del layout. In alto troveremo 3 menu a tendina, grazie a quest’ultimi potremmo incominciare a modificare ogni parte del nostro layout, infatti grazie al primo menu a tendina visualizzeremo le sezioni del layout ( header, post, footer ecc… ), nel secondo visualizzeremo tutti i componenti della sezione scelta nel primo menu ( <h2>, <h3>, <h4>, <a> ecc… ) invece nell’ultimo avremmo a disposizione tutti gli attributi dei componenti scelti nel secondo menu ( background, font, border, padding ecc… ).

Quindi da come avrete già capito ogni menu è dipendente del menu precedente, ad esempio se vorremmo modificare il colore dei link nel footer dovremmo scegliere nel primo menu “#footer“, poi nel secondo “a” e infine nel terzo “font“. Una volta fatta questa scelta verranno visualizzati i nuovi campi dove impostare i vari colori dell’oggetto definito nei 3 menu ( in questo caso i link nel footer ).

Continua »