Chi possiede un sito internet o blog, sa bene quanto è difficile creare un logo personalizzato per il proprio sito senza dover ricorrere ad un esperto di grafica, specie se si vuole essere originali e se si vuole dare un tocco personale al proprio sito.

Logotype Maker è uno di quei servizi che occorrerebbe avere sempre a portata di mano e che giunge in aiuto di quanti non possiedano spiccate doti grafiche (in fin dei conti, ad ognuno il proprio lavoro, no?). Vi basterà inserire nell’apposito spazio il testo del logo che volete creare e dopo pochi istanti vi troverete di fronte la schermata con le prime proposte casuali.

Da qui sarà quindi possibile scegliere il logo che più vi aggrada o premere il tasto “refresh” per assistere a nuove creazioni. Una volta selezionato il logo, potrete poi ritoccarlo con l’apposito editor online.

Una volta completato il lavoro potrete anche scaricare un PNG o un PDF del vostro capolavoro e, dulcis in fundo, anche il font. Un servizio ben fatto ed intuitivo, ma cosa ben più importante che sarà possibile utilizzare senza installare nulla sui vostri preziosi PC, cosa oggi da non sottovalutare. Per usare Logotype Maker non occorre alcun tipo di registrazione ed il suo utilizzo è consentito perfino per scopi commerciali.

Via | Viewtiful Blog | Tracce Web

Continua la lettura di Creare un logo in pochi e semplici click su Lo Skyblog

Molti professionisti considerano ancora Firefox come il browser di riferimento per lo sviluppo di siti web. Personalmente, noi non siamo più d’accordo con questa teoria e riteniamo oggi Google Chrome il browser di riferimento. Negli ultimi due anni, infatti, il browser di Google ha fatto passi da gigante ed è molto migliorato sotto ogni punto di vista. Per quantità e qualità delle sue estensioni, oggi non ha più nulla da invidiare a Firefox ed anzi risulta molto più veloce e snello rispetto al concorrente.

La raccolta di plugin che segue è dedicata proprio a quanti hanno ormai deciso di usare Chrome come loro browser principale ed include molteplici strumenti di sviluppo praticamente indispensabili per ogni professionista del web.

1. AppJump App Launcher and Organizer

AppJump è un plugin per Chrome che ci permette di localizzare e gestire facilmente tutte le applicazioni e le estensioni, con velocità direttamente dalla toolbar del browser. Molto comoda la possibilità di creare dei gruppi in cui raggruppare le estensioni per tipo. Ad esempio, è possibile separare le estensioni dedicate al lavoro da quelle per il tempo libero eccetera.

2. Awesome Screenshot

Awesome Screenshot permette di scattare screenshot ed istantanee della finestra del browser. con un click, permette di catturare la parte visibile, l’intera pagina fino in fondo o anche solamente una sezione di quanto stiamo vedendo in quel momento su Chrome.

Permette anche di aggiungere note, disegni ed altre informazioni utili all’immagine che stiamo catturando.

3. Chrome Sniffer

Chrome Sniffer controlla il tipo di framework (se presente) utilizzato dal sito che stiamo visitando e ne mostra una piccola icona esplicativa all’interno della barra di navigazione. Molto comodo nel caso ci interessi sapere se un sito è basato su WordPress, Joomla, Drupal o quant’altro.

4. Cloud Save

Grazie a Cloud Save potremo salvare un qualsiasi elemento presente sulla pagina, con un click, direttamente su uno dei molteplici servizi di archiviazione e condivisione online. Fra gli altri, sono supportati Dropbox, Amazon Cloud Drive, Box.net, Google Docs e Flickr.

5. Code Cola

Code Cola è un’estensione che permette l’editing “live” delle pagine web. E’ sufficiente cliccare sulla zona di nostro interesse ed apportare quindi le modifiche interessate al CSS.

6. Corporate Ipsum

Corporate Ipsum è una simpatica alternativa al classico testo di prova “Lorem Ipsum”. Con questa estensione potremo popolare il nostro sito web con frasi “corporative” ed altri termini. Un esempio: “Competently target enterprise-wide data with multifunctional ideas.”

7. Eye Dropper

Il modo più semplice per trovare il colore utilizzato in un elemento. Eye Dropper permette di campionare con un click ogni singolo pixel che compone una pagina web e di tenerne traccia in una sua cronologia.

8. Firebug Lite

Non esiste nessuno sviluppatore web che non conosca Firebug. Firebug è anche la principale ragione per cui moltissimi sviluppatori faticano ad abbandonare il browser Mozilla in favore di Google Chrome. Fortunatamente, Firebug Lite per Google Chrome offre una grandissima parte delle funzioni offerte dal suo “fratello maggiore”, tanto da non farne sentire la mancanza.

Firebug Lite agisce all’interno dei già completi strumenti di sviluppo di Chrome e ne estende ulteriormente le capacità.

9. HTML Instant

HTML Instant è un parser HTML realtime. Si presenta sotto forma di una finestra divisa in due. Scrivendo il codice HTML nella parte di destra, ne vedremo il risultato, in tempo reale, sulla parte di destra. HTML Instant non funziona però solamente con HTML, ma supporta anche CSS e JavaScript. In pratica, un editor HTML tascabile integrato all’interno del nostro browser!

10. Image Properties Context Menu

Image Properties Context Menu è una utilissima estensione in grado di fornire informazioni complete su ogni immagine sia di nostro interesse. Sarà sufficiente fare un click destro sull’immagine per vedere il nuovo menu contestuale aggiunto, da cui analizzare con comodità le proprietà dell’immagine stessa.

11. MeasureIt!

Altro plugin praticamente irrinunciabile, MeasureIt è un righello da usare ogni qual volta si voglia conoscere al volo la dimensione di un qualsiasi elemento su una pagina web. Semplicemente, è sufficiente cliccare sull’icona di MeasureIt e trascinare il mouse fino alla dimensione desiderata.

Via | Webdesigner Depot

Continua la lettura di Le estensioni per Chrome che non puoi non avere – Prima parte su Lo Skyblog

Stai cercando un nuovo tema gratuito per il tuo blog WordPress? Continua a leggere per trovare 10 interessantissime proposte segnalate da blogohblog.com

FUNGUS

Download Fungus WordPress Theme

PRESSWORK

Download PressWork WordPress Theme

JOURNALCRUNCH

Download JournalCrunch WordPress Theme

DIARY/NOTEBOOK

Download Diary/Notebook WordPress Theme

SHAKEN GRID

Download Shaken Grid WordPress Theme

CUPID

Download Cupid WordPress Theme

SATOSHI

Download Satoshi WordPress Theme

MYSTIQUE 3.0

Download Mystique 3.0 WordPress Theme

HELIUMIFIED

Download Heliumified WordPress Theme

AGENCY

Download Agency WordPress Theme

Continua la lettura di 10 temi gratuiti per WordPress su Lo Skyblog

Internet Explorer, si sa, è il browser più detestato da chiunque si trovi a dover lavorare su siti web e soprattutto sui CSS. Come immagino tutti sappiate, il browser di casa Microsoft ha una gestione più che discutibile dei fogli di stile e, malgrado sia definito come compatibile con CSS2 e CSS3, molte cose normalmente visualizzate correttamente su Firefox, Chrome e Safari , non sempre appaiono su Explorer come il designer avrebbe voluto.

La terza versione dello standard CSS introduce diversi interessanti nuovi effetti: angoli arrotondati, ombre morbide, gradienti, sostituzione di fonts e molto altro ancora. Ma, come detto, a causa del non pieno supporto da parte di Internet Explorer verso queste funzioni, a volta siamo costretti a farne a meno. Ecco quindi che ci può venire in aiuto CSS3PIE, un piccolo hack grazie al quale potremmo superare questo ostacolo.

Grazie a CSS3PIE basterà una semplice modifica nei nostri fogli di stile, in questo modo:
Supponiamo di avere il nostro elemento  #myElement, così strutturato:

Ci basterà aggiungere in fondo alla classe il behavior alla url:

In questo modo gli stessi effetti saranno visibili su Internet Explorer 6, 7, e 8.
Al momento sono supportati i seguenti effetti:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient come background image

Continua la lettura di Effetti CSS3 su Internet Explorer senza problemi su Lo Skyblog

ColoRotate è un divertente ed al tempo stesso utile strumento online per la scelta dei colori. Invece della classica color wheel a due dimensioni, ci viene rappresentata una palette colori in 3D che potrà essere ruotata e girata sui tre assi. Ci vengono ovviamente messi a disposizione diversi strumenti, quali il selettore della luminosità e gli ormai immancabili campi di ricerca per tag.

In base al colore su cui stiamo lavorando, ci viene poi proposta una combinazione di altri colori “congrui” col nostro, per facilitarci nella scelta della nostra palette cromatica. Da provare!

Colorotate

Via Roby Web World

Continua la lettura di Colorotate: selettore di colori in 3D su Lo Skyblog

Ogni qual volta ci si trova a lavorare su un progetto web, prima o poi ci si deve scontrare con la scelta della famiglia di caratteri con cui si intende visualizzare i propri contenuti. Nella maggior parte dei casi è sufficiente impostare nel proprio foglio di stile una serie di font standard, presenti praticamente in ogni architettura (es: i “classici” Default Sans Serif, Helvetica, Tahoma, Georgia eccetera) ed il gioco è fatto.

Ma come fare se la richiesta, necessità o semplice sfizio, ci portano a dover adottare un carattere particolare? Ad esempio uno molto elaborato per il sito di un wedding planner, o uno in stile militare, od altro ancora? La risposta al problema si chiama CSS3, e più precisamente “direttiva @font-face“.

L’utilizzo di @font-face è semplice ed immediato. Apriamo il nostro foglio di stile (solitamente chiamato style.css) ed aggiungiamo (preferibilmente in cima, in modo da renderne semplice la rintracciabilità):
[css]
@font-face {
font-family: MioFontCustom;
}
[/css]

Ora che avremo definito il nome del nostro font, che useremo all’interno del CSS, dovremo impostare il suo percorso, per cui la direttiva @font-face risulterà simile alla seguente:
[css]
@font-face {
font-family: MioFontCustom;
src: url("../percorso/MioFontCustom.ttf");
}
[/css]

Il font si può trovare anche su un server differente. In questo caso, dovremo indicarne la URI:
[css]
@font-face {
font-family: MioFontCustom;
src: url("http://www.altrosito.com/fonts/MioFontCustom.ttf");
}
[/css]

Questa procedura è perfettamente funzionante con tutti i browser, escluso, tanto per cambiare, Internet Explorer. Il browser Microsoft, infatti, richiede un font in formato EOT (Embedded Open Type) invece di uno TrueType. Sarà quindi necessario scrivere una doppia direttiva @font-face, che faccia riferimento ad entrambi i formati. In questo modo:
[css]
@font-face {
font-family: MioFontCustom;
src: url("MioFontCustom.eot") /* EOT file for IE */
}

@font-face {
font-family: MioFontCustom;
src: url("MioFontCustom.ttf") /* TTF file for CSS3 browsers */
}
[/css]

Non ci resta altro che convertire, se necessario, il nostro font TrueType in EOT. Come fare? Esistono comodi servizi online gratuiti, come ad esempio ttf2eot grazie a cui, in due semplici click, potremo ottenere una copia in EOT del font richiesto.

L’utilizzo del font è semplicissimo: basterà aggiungerlo ad ogni istruzione font-family desiderata, in questo modo (esempio):
[css highlight="4"]
h3 {
text-indent: 15px;
margin-left: -15px;
font-family: MioFontCustom, verdana, helvetica, sans-serif;
}
[/css]

Continua la lettura di Utilizzare un font custom nei propri progetti web su Lo Skyblog

Complice anche la diffusione dei nostri profili personali su decine e decine di social network e la conseguente necessità di doversi fare trovare dal maggior numero possibile di persone, in molti abbiamo acquista un dominio .tel

Una buona alternativa ai suddetti domini .tel, che davvero poco hanno preso piede, può essere la realizzazione di un sito apposito, destinato a raccogliere ed aggregare tutte le informazioni che ci interessa diffondere. Una sorta, quindi, di biglietto da visita virtuale che il cui scopo è quello di racchiudere in un unico spazio tutti i dati essenziali, i recapiti, e i riferimenti ai social network dove è possibile contattarci.

Cercando un po’ si trovano molti template veramente ben fatti e interessanti, che è possibile adattare a WordPress con poco sforzo e qualche conoscenza di php e HTML. Per i più pigri, ecco invece un paio di temi per WordPress già pronti:

Digital Business Card

Anteprima | Dettagli

Minicard Jolley

Anteprima | Dettagli

Via WordPressMania

Continua la lettura di Biglietto da visita online con WordPress su Lo Skyblog

jQuery è uno dei framework Javascript più usati in assoluto sul web. Un piccolo esempio lo potete vedere in azione anche in questo stesso blog, nelle tab contenute nella sidebar qui a destra.

Grazie a jQuery è possibile, con poche righe di codice, effettuare operazioni semplici o complesse, come ottenere l’altezza di un elemento, o farlo scomparire con effetto dissolvenza e molto altro ancora. Grazie alla sua flessibilità, jQuery è divenuto in breve tempo il preferito di moltissimi sviluppatori web, tanto da diffondersi nel giro di un paio d’anni praticamente ovunque.

Napolux ci segnala un utilissimo sito che racchiude, nel momento in cui sto scrivendo, ben 225 differenti plugin, che permettono di attivare funzioni fra le più disparate, quali drag & drop, grafici, tabelle, menu a scomparsa e via dicendo.

Senza dubbio, un’ottima risorsa per tutti quanti siano alla ricerca di qualche idea per migliorare i propri siti web.

The Ultimate jQuery List

Continua la lettura di The Ultimate jQuery List: 225 plugin interessanti per jQuery su Lo Skyblog

WooFunction è un ottimo set di icone perfette per il web design. Distribuite dai ragazzi di Woothemes, ricalcano lo stile dei loro ottimi template per WordPress, ma l’ aspetto molto pulito e semplice le rende ideali per la maggior parte dei siti web. Il set è composto da 178 eccellenti icone in formato PNG e in risoluzione 32×32 pixel, ed è totalmente gratuito.

Se stai progettando un nuovo sito web o creando alcune applicazione queste icone potranno esserti sicuramente utili.

Scarica il set di icone Woofunction

Dà un’occhiata ai temi Premium di Woothemes

Continua la lettura di Un set di 178 icone gratis per i tuoi siti web su Lo Skyblog

Il sito Blogohblog ha rilasciato un nuovo tema, davvero molto ben fatto. Urbane contiene un grande numero di funzioni interessanti, quali l’integrazione con Feedburner e Twitter, tab in Javascript per i contenuti nuovi ed i più letti, una sezione “Featured” in cui mettere in risalto alcuni articoli, tre sezioni categorizzate distinte per pubblicare post particolari in homepage. Molto comodo anche il generatore automatico di thumbnails ed immagini di accompagnamento ai contenuti.

Ovviamente non manca il pieno supporto ai widget (tre sezioni distinte) ed un pannello di gestione delle preferenze.

La particolarità di Urbane, che lo differenzia da altri template simili, è di essere completamente gratuito. L’autore ha infatti deciso di distribuire questo suo nuovo lavoro senza richiedere denaro, probabilmente per pubblicizzare meglio altri suoi (ottimi) prodotti a pagamento.

Urbane: DEMO online

Urbane: DOWNLOAD

Continua la lettura di Urbane: splendido template gratis per WordPress su Lo Skyblog