Queste raccolte servono per dimostare una volta di più che con WordPress si può realizzare praticamente qualsiasi tipologia di sito.

Le puntate precedenti:

• 10 Esempi di Siti WordPress Corporate
• 10 Esempi di Siti WordPress Portfolio

Oggi vediamo 10+ esempi di siti e-commerce. Se hai altri siti da segnalare aggiungili nei commenti!

Swiss Side

Eastworks Leather

Mt. Borah

Board Shorts

Synch Bands

Kuborra

Worm Sign

Sailor Rose

Kartell

The Salon

Emotional Shop

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Spesso nei layout capita di dover inserire delle icone prima o dopo un link o un titolo, come nel caso di questo bottone.

Fino a qualche tempo fa il codice html lo scrivevo in questo modo, inserendo un’immagine prima del testo del link

Continua a leggere

dando poi gli opportuni stili per posizionare gli elementi.

Prova ora a pensare di avere 20 testi con icone in una pagina web. Questo comporta 20 richieste http per le varie immagini.

La soluzione migliore in questi casi è usare la tecnica dello sprite dove si va a creare un’immagine unica con tutte le icone e tramite css e la proprietà background-position andare a prendere la porzione di immagine che serve.

Poi per posizionare le immagini a sinistra o a destra del testo si utilizzano i pseudo selettori CSS :before e :after.

Il codice HTML quindi diventa:

Continua a leggere

Per mettere l’icona a sinistra della scritta dovrai usare :before:

a:before {
content: ""; /* testo che si vuole inserire prima */
display:block;
background: url(sprite.png) no-repeat left top;/*prendo porzione dello sprite in alto a sinistra */ 
float:left;
width:16px;
height:10px;
margin-right:5px;
line-height:10px;
}

In questo modo l’immagine viene inserita come sfondo, prima del link.

Lo stesso vale se l’icona la vuoi mettere dopo il link, utilizzando :after.

Conoscevi questi pseudo-selettori? Li utilizzi?

Foto credits

CSS code – Copyright: Sakuoka

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Ecco 20 nuovi siti per un totale di circa 500 siti web raccolti! (non perderti l’orecchio interattivo!)

Scroll For Your Health

Design Embraced

Interactive Ear

Kili Watch

Smart Phood

17th Ave

Pupa

Sweez

Full Circle Design

Puma

Big Bend Brewing

Bwired

Idiom

Isadora Design

Move Dance Convention

Sensorama

World Baking Day

uCast

IZUMI Massage

Pulp Design

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

In questo articolo voglio spiegarti perchè continuo ad andare a questi seminari, e quale importanza hanno avuto (e stanno avendo) nella mia carriera da freelance.

Premessa

Questo non è un articolo di promozione per il seminario organizzato dai ragazzi di Your Inspiration Web (anche se a quello di Milano mi sono trovato benissimo), ma piuttosto un mio pensiero sul perchè ogni freelance dovrebbe mettersi in testa che queste opportunità sono rare e vanno sempre sfruttate.

Un altro motivo che mi ha spinto a scrivere questo articolo è stato un post scritto su Facebook un po’ di tempo fa:

Ciao Ragazzi, qualcuno di voi ha partecipato alla prima edizione del Seminario Web Designer Freelance organizzato da YIW? Ai fini lavorativi, ne vale la pena? Grazie.

Stavo per rispondere direttamente su Facebook, ma poi ho pensato di dare una risposta ampia al ragazzo che ha commentato e a tutti quelli che hanno dei dubbi sul partecipare a questi seminari (a quelli di YIW e a tutti quelli inerenti alla nostra professione).

Vediamo se riesco a convincerti.

Motivazione

Ogni volta che sono stato a un seminario, quando tornavo a casa avevo una voglia matta di spaccare il mondo. La motivazione per un freelance è l’elemento più importante per sopravvivere, specialmente nei periodi di poco lavoro.

Su di me hanno avuto un effetto adrenalinico, e ogni volta arrivavo a casa ero pieno di idee e voglia di fare, di sperimentare.

Confronto

Per crescere, bisogna mettersi sempre in gioco. E dove farlo se non in seminari con professionisti del settore?

Specialmente nel nostro lavoro gli aspetti da gestire sono molti, (preventivi, gestione clienti e collaborazioni, scrittura codice ecc.)  ed è possibile che le soluzioni trovate da noi, non siano sempre le più efficaci.

Opportunità

Probabilmente se non fossi andato ai seminari, a quest’ora sarei dipendente (forse) in qualche agenzia. Dove se non in eventi come questi puoi incontrare realtà con le quali instaurare delle collaborazioni?

Un conto è scriversi via skype o via email, un altro è parlarsi faccia a faccia.

Occasioni rare

Sederti a pranzo o a cena con persone che hanno la tua stessa passione, esprimere le tue idee, avere un giudizio. Una cosa che dove vivo io, non mi capita mai di fare, purtroppo.

In occasioni come questa mi è capitato più di una volta di farmi trascinare dall’entusiasmo del mio interlocutore e questo da una carica indescrivibile, da provare.

Come stai?

Come detto all’inizio, quello di Roma sarà il sesto seminario a cui parteciperò, e quindi sarà un’occasione per rivedere persone conosciute ad altri seminari e raccontarsi davanti a una bella birra le proprie avventure lavorative

Conclusioni

Se sei freelance devi partecipare a questi seminari. Considerando poi i costi minimi del nostro tipo di attività, non fare un investimento in queste opportunità sarebbe un delitto

Ti ho convinto? Non vedo l’ora che arrivi l’8 giugno!

Foto credits

• Man Running with Focus - Copyright: Jim David
• Business seminar – Copyright: VladKol
• Giant businessman observing a smaller one - Copyright: ollyy
• Image of business handshake after signing new contract - Copyright: Pressmaster

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

I punti di forza di questo plugin sono la semplicità di utilizzo, la possibiltà di inserire qualsiasi elemento HTML per ogni slide, ed è responsive.

Per utilizzarlo ti basterà inserire una lista non ordinata, dove ogni elemento sarà il contenuto di una slide. Poi dovrai applicare il plugin jQuery, in questo modo:

$(function() {
    $('.banner').unslider();
});

Il plugin pesa solo 3KB è compatibile in tutti i browser moderni, supporta l’input da tastiera e i gesti touch.

La documentazione chiarirà ogni altro eventuale dubbio.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Come puoi vedere dalla demo, l‘apertura delle immagini avviene in stile Google Immagini, direttamente all’interno della griglia.

Utilizzare SuperBox è molto semplice, come puoi leggere dalla documentazione. Da notare l’utilizzo dell’attributo HTML5 data-img, che prende come parametro la foto nelle dimensioni reali.

La gallery è compatibile con tutti i browser, compreso Internet Explorer dalla versione 7 in su.

Realizzare siti responsive dovrebbe essere diventato per te un aspetto quotidiano nel tuo lavoro, e grazie a questo e a molti altri plugin e framework il nostro lavoro è molto facilitato

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Oggi l’appuntamento è dimezzato rispetto al solito ma sono comunque 10 siti di qualità altissima dai quali prendere ispirazione per futuri progetti.

Kilfish

Coffee Surfing Illy

Margarita Villa

Haribo

Andreas Felger

Gramercy Park Hotel

Escape Flight

My Own Corks

Christ Journey

Mainly

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Ogni freelance ha dei momenti in cui c’è poco lavoro, altri in cui neanche farlo apposta arrivano richieste da ogni dove e di ogni tipo, tutte nello stesso istante.

Prima di raccontarti quello che mi è successo di recente, voglio ricordarti una cosa:

L’importante non è quanto lavoro fai, ma come lo fai. Tutte le scelte che andrai a fare devono portare a un obiettivo: godere della vita e trovare il giusto equilibrio.

Tenendo bene in mente questo “mantra”, voglio raccontarti quanto è successo nell’ultimo mese. Tranquillo non è una storia lunga

La situazione.

Sono due anni ormai che lavoro come freelance e come tutti ho avuto alti e bassi.

Ma in questi due anni non mi è mai capitato come ora di collaborare con tante agenzie e tutte di qualità, con le quali mi trovo bene e che pagano il giusto compenso. Una rarità.

Tu dirai: e dove sta il problema?

Stress, stress e ancora stress: rischi di cadere dalle scale, ti toccano e salti come una molla, non hai un attimo di respiro.

Mentre stai facendo un lavoro, ti arrivano su Skype messaggi da chiunque di continuo, che vogliono sapere quando sarà pronto il lavoro, se c’è già qualcosa da poter vedere e tu sei li, impotente che non sai più dove sbattere la testa.

E ti ritrovi con una scelta da fare: perchè come dicevo prima bisogna godersi la vita.

La scelta.

Le opzioni sono tre:

1. Continuare a seguire da solo tutte le agenzie con il rischio di abbassare la qualità del lavoro e di perdere di conseguenza delle collaborazioni;
2. Non seguire più delle agenzie, perdendo dei guadagni sicuri e costanti;
3. Trovare un collaboratore con il quale dividermi il lavoro.

La scelta è ricaduta per forza di cose sulla terza opzione che mi porta tre vantaggi:

1. mantengo alta la qualità dei lavori;
2. ho delle consegne dei lavori più rapide;
3. non perdo dei guadagni sicuri.

Dove trovare un collaboratore.

E qui si pone un’altra questione: dove trovo un collaboratore valido che mi garantisca una qualità elevata del lavoro?

Io ho chiesto prima di tutto a persone che già conoscevo in rete e ho avuto subito dei riscontri positivi.

Posso consigliarti di cercare su Crebs.it, oppure in questo documento creato da Giuliano Ambrosio per il gruppo Italian Freelance. Se conosci altri siti dove trovare collaboratori non esitare a segnalarmeli nei commenti

Conclusioni

Ora hai capito perchè ultimamente ho scritto così poco su Fedeweb e sopratutto come sto cercando di risolvere una situazione per me nuova e inaspettata.

E sempre con una frase in testa: bisogna godersi la vita.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Sidr è un plugin jQuery che con poche righe di codice ti permetterà di ricreare esattamente lo stesso effetto, ottenendo una soluzione ideale per un sito responsive.

Una volta scaricato il plugin basterà includerlo, insieme alla libreria jQuery, prima della chiusura del tag <body> e richiamare uno dei due fogli di stile presenti (versione chiara e scura).

Poi dovrai applicare lo script al menu: il modo più semplice per farlo è tramite questa funzione:

$(‘#simple-menu’).sidr(); 

dove #simple-menu è il menu da far comparire.

Nella pagina del plugin sono presenti diversi esempi di quello che si può ottenere con Sidr.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!

Una cosa che ho notato in questi anni è che se molte “mode” sono finite, l’effetto Lightbox invece persiste ed è forse il plugin più utilizzato in assoluto.

Esistono molte versioni per realizzare questo effetto (Colorbox, Lightbox, Fancybox ecc.), ma al momento quelle responsive sono poche o a pagamento.

Swipebox è un plugin jQuery gratuito di facile integrazione, che funziona perfettamente su qualsiasi dispositivo. Infatti è compatibile con tutti i maggiori Browser e con iOs4+, Android e i Windows Phone.

Inoltre su dispositivi mobili è possibile navigare tra le foto con uno semplice swipe, rendendo la user experience piacevole e senza ostacoli.

Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery!