Sass : ovvero scrivi css con magia.

Adoro Sass.  Ammetto che la prima volta che ne ho sentito parlare la mia esclamazione e’ stata : “WTF?” perche’ mai dovrei usare un preprocessore per i miei css?
Ma poi e’ bastato provarlo una volta per rimanere entusiasta e innamorarsi a prima vista.

Sass e’ una estensione per css cosi come li intendiamo noi. CSS non e’ in linguaggio di programmazione vero e proprio, quello che lo differenzia da linguaggi come ad esempio Javascript e’ la mancanza di variabili, cicli, condizionali,  insomma mancanza di logica.

Qui entra in gioco Sass che permette di estendere css e farne un vero e proprio linguaggio con tutte le “features” classiche dei linguaggi di programmazione, variabili e funzioni su tutto.

In questo articolo voglio spiegare un po’ cosa e’ Sass, i principali vantaggi rispetto allo scrivere css tradizionale e il perche’ e quando conviene usarlo. Continua a leggere

Facebook? No grazie

Oggi ho cancellato l’app di facebook dal mio iphone e ipad. Il motivo non e’ la soffiata di Snowden ma semplicemente mi sono stancato di questo social network.

Negli ultimi mesi ho provato a far “pace” ma non ce la faccio, quindi ho deciso di staccare. Non chiudo il mio account(anche’ perche’ non e’ possibile) ma ho deciso di non guardare neanche piu’ il sito. Continua a leggere

Interviste : Fabio Marasco aka @Marbio

Ed eccoci con il primo capitolo di questa nuova rubrica sul blog, le interviste. Con questo articolo inauguro quello che spero, sarà una serie di articoli in cui intervisto i vari “personaggi” del web legati al mio lavoro che ho conosciuto tramite social, gruppi o altro, comunque su internet.

Non potevo non cominciare questa rubrica con un mio conterraneo calabrese, oltre che caro amico, Fabio Marasco, meglio conosciuto come marbio. Continua a leggere

Non solo firefox, sviluppare con Safari

Da anni ormai qualsiasi web designer / developer /Seo, insomma chiunque sia minimamente coinvolto nel processo di creazione di un sito web usa firefox come browser predefinito.

Safari occupa .. diciamo .. il penultimo posto della lista .. superato anche da chrome, io da anni sono uno dei pochi, a quanto pare, aficionados di Safari. Per quanto riguarda lo sviluppo invece mi sono sempre trovato discretamente con firefox, a parte una cosa … la lentezza. (che aumenta a dismisura con i “nostri” plugins) ! Continua a leggere

I guru in Italia, come rovinare una community

Eccomi qua con il post più “duro ”  che mi appresto a scrivere,e che probabilmente mi porterà ad avere tanti nemici, ma chi se ne frega!!

IL titolo già è emblematico e non c’è bisogno di fare giri di parole, con questo post attacco “ufficialmente” la community italiana di web design e di internet, un attacco diretto a molti GURU, definiti tali, dei quali mi sono stancato già da diverso tempo e che non riesco più a sopportare. Continua a leggere

Che mondo sarebbe senza facebook?

Ogni giorno mi stupisco sempre di più quando entro nel mio  account facebook, cosi come mi sono stupito quando mio cugino ha comprato il pc e per prima cosa, mi ha chiesto se gli “installavo” il feisbuc.

All’inizio, quando circa 2 anni fa, dopo un invito da parte di mia cugina dal canada, ho aperto un account facebook, nemmeno immaginavo cosa fosse ma, soprattutto, cosa sarebbe diventato, cioè un fenomeno di massa mondiale, tale da condizionare anche i media che oggi, per qualsiasi motivo, dal ladro al suicidio, al soldato morto, al terrorista e via dicendo, la prima cosa che fanno è cercare nel loro account facebook oppure i gruppi nei quali stava.

L’ultimo caso è di un ragazzo italiano suicidatosi, che qualche giorno prima era entrato in un gruppo facebook che si chiama : hai mai pensato di farla finita? (non chiedetemi il link di questo gruppo, cercatelo , non do link a queste cazzate .. ).

Ma mettendo da parte casi cosi “difficili” da giudicare, in cui l’unica cosa che mi sento di esprimere è dolore e cordoglio per la famiglia di quel povero ragazzo, vorrei parlare del lato divertente di facebook, quale? Continua a leggere

Un Seo Test sul posizionamento dei pdf

Una segnalazione al volo, dalle mie ferie icon smile Un Seo Test sul posizionamento dei pdf

L’esperto Seo Andrea Moro sul suo sito sta seguendo un test riguardo all’indicizzamento e posizionamento dei pdf nelle serp di Google.

IL test principalmente è rivolto a capire come un documento non Html possa posizionarsi sui motori di ricerca paragonando un documento “ben ottimizzato” con uno invece fatto “senza pensare”.

IL test è in corso e visibile a questo indirizzo.

http://www.andreamoro.eu/SEO-test-PDF/

Se vi piacciono i test, questo vi incuriosirà abbastanza icon smile Un Seo Test sul posizionamento dei pdf

Ciao!

Vinci dominio + hosting gratis per un anno

Eccomi qua, dopo tanto tempo e un pó di “trambusto” per il cambio di server, eccomi a riscrivere un nuovo articolo.

In realtá, come si evince dal titolo, questo non é un articolo normale, ma un regalo che voglio fare a tutti i miei lettori, cosa? Si esatto,  regalo un anno di hosting + un dominio gratis a un mio fortunato lettore! Avete capito bene. icon wink Vinci dominio + hosting gratis per un anno

Tutto questo in collaborazione con una  societá italiana che, finalmente, é riuscita a darmi soddisfazioni con un hosting, Misterdomain.eu, ed é cosi che ho deciso di acquistare un anno di dominio+hosting da loro e regalarlo a un fortunato lettore del mio sito.

In molti ormai conoscerete i tanto famosi e agognati giveaway che vanno tanto di moda oggi nel web, soprattutto nella blogosfera inglese, bene ecco io ne ho organizzato uno simile con questo articolo.

icon smile Vinci dominio + hosting gratis per un anno Continua a leggere

10 motivi per cui linkedin è migliore di facebook per un azienda o professionista

Oggi i social network hanno invaso il mondo. e Facebook è senza dubbio l’imperatore dei social network. Sempre più spesso in Italia si parla di Facebook come strumento di marketing per le aziende, addirittura ormai è diventata consuetudine parlare di facebook nelle convention di marketing come uno degli strumenti da usare assolutamente per le aziende. Continua a leggere

forum : animale in via di estinzione

Ultimamente ho ripreso a frequentare i forum. Giá lo so che ho anche il mio di forum, ma che piú che altro é nato per rispondere alle varie domande che mi si ponevano nei comenti o via mail, soprattutto sull’ormai famoso articolo su come inviare una mail con php, leggete il tread nel forum, la maggiorparte sono dedicati a quell’articolo.

Comunque a parte questo, il mio forum diciamo che é poco frequentato e poco curato dal sottoscritto, cosi come ho anche trascurato i miei blog, ma il lavoro mi ha sommerso in questi periodi e mi riesce difficile trovare tempo per scrivere con continuitá sui blog. Continua a leggere

Scegliere il giusto hosting per il tuo sito.

La scelta dell’hosting per il proprio sito internet é sempre un momento delicato e importante.

Da questa scelta infatti puó dipendere il successo o l’insuccesso del proprio sito internet.
Spesso quando si decide di mettere online il proprio sito, o quello di un cliente, si pensa a scegliere il provider come ultima soluzione, o comunque quella che crea meno problemi e pensieri ma ,invece, non é cosi, e scegliere un hosting sbagliato compromette il “successo” del sito stesso. Continua a leggere

Embed Documents, un plugin per worpdress per i file embed

Giorni fa mi é stato segnalato, dal gruppo di generazione internet, questo plugin.

Embed Document é un ottimo plugin per ,appunto, per i file embed. per esempio per documenti in pdf, per il nostro curriculum vitae o altro. Devo dire subito che la trovo una ottima iniziativa e il plugin funziona perfettamente, non ho avuto il tempo di testarlo su questo blog ma l’ho provato su un altro blog qua sul lavoro in cui avevamo bisogno appunto di inserire alcuni documenti presenti su scribd.com. Continua a leggere

Inviare una mail con php ajax e jquery in stile facebook

Facebook é senza dubbio uno dei fenomeni di questo ultimo anno, ma aldilá del social networ quello hce mi paice tanto di questo sito é  il design e l’uso massiccio, ma non monotono, di effetti 2.0

Avete presente il message box di facebook? Esatto con questo tutorial ricreeremo quel sistema, inviando mail senza dover ricaricare pagine e con qualche piccolo effetto per rendere piú accattivante la pagina, naturalmente ho preparato, come sempre, un esempio completo da visualizzare online e i sorgenti pronti da scaricare. inuitle dirvi che come framework javascript useró jquery, cosi scoprirete anche quanto sia facile usare ajax con questo fantastico framework. Continua a leggere

PIkadilly smanettona online

Continua la mia serie di un sito al giorno. Anche questa volta recensisco un sito di una web designer, pikadilly , in arte Francesca Luciani, che ama definirsi “ la smanettona del web”.

IL suo stile richiama i disegnatori manga, che credo, siano una sua passione, comunque senza dubbio influenza il suo lavoro di “design”, almeno dal mio punto di vista. Ad ogni modo il sito che vi segnalo è il suo blog personale, naturalmente realizzato con wordpress ( solo il mio collega programmatore ne puó parlare male, ma lui e windowssiano e odia l’opensource…no comment), con un template, naturalmente, personalizzato da lei stessa e molto bello e “giocoso”. icon smile PIkadilly smanettona online Continua a leggere

Menu animato con jquery

Come ho giá ribadido, jquery é senza dubbio, a mio modo di vedere, il miglior framework in circolazione.

La sua semplicitá e la sua facilitá enll’apprenderlo permettono di realizzare stupendi effetti sulle nostre pagine senza essere grandi esperti di programmazione e senza usare complicati flash o simili. Con questo tutorial vi illustreró come realizzare un bellissimo menú animato usando pochissime linee di codice.

Come sempre ho preparato un esempio giá pronto e scaricabile.

icon smile Menu animato con jquery Continua a leggere

Guida al posizionamento con Google local business

Oggi vi segnalo una interessante guida, a sua volta segnalatami da Laura Toniolo di posizionamentoo.com. Questa breve ma interessante guida, è dedicata all’uso e all’ottimizzazione di google local business, una integrazione di google maps per aziende. Come sappiamo google maps è una ottima risorsa per segnalare il proprio sito, anche perchè,con un po di fortuna, permette di arrivare in prima pagina sui risultati senza fare grandi sforzi lato SEO. Continua a leggere

Il sito di Laura de Masi

Inanzitutto una buona Pasqua fatta a tutti, con un pensiero e una preghiera in particolare dedicata all’Abruzzo e alla tragedia che stanno vivendo, non ho scritto nulla su questo caso perchè non avevo la forza di scrivere su qualcosa di cosi tragico.

In questa mia rubrica di un sito al giorno oggi parlo di un altra webdesigner italiana, da Napoli mi sembra o comunque giu di li, il cui sito mi piace tantissimo. Laura de Masi. Webdesigner freelance, il suo sito lo considero uno dei piu belli tra quelli del panorama italiano, semplice e allo stesso tempo d’effetto, con una combinazione di colori perfetta e … tipicamente femminile…. icon smile Il sito di Laura de Masi Continua a leggere

Realizzare layout compatibili con internet explorer 6

Ho tratto spunto per  questo articolo dopo aver letto un interessante post su italianwebdesign sull’uso e non uso di explorer 6 seguito, e anche partecipato, alla discussione che ne è seguita, come sempre quando si parla di explorer si trovano pareri contrastanti.

Molti dicono che noi webdesigner dobbiamo ignorare IE6, perchè e passato di moda, perche neanche Microsoft lo supporta più, pechè non rispetta gli standard etc.etc.
La mia opinione è che questo discorso, in parte, potrebbe valere per il nostro sito o blog personale, ma non certo quando si parla di clienti, basta dare un occhiata alle statistiche sull’uso dei browser a gennaio di questo anno

picture 1 299x51 Realizzare layout compatibili con internet explorer 6

statistiche sull'uso dei browser a gennaio 2009

per renderci conto che realizzare un sito non compatibile con explorer 6 equivale a perdere il 18% dell’utenza oggi di internet, davvero possiamo pensare che a un cliente che ci commissiona il lavoro, e quindi ci paga, possa importare qualcosa di questa famosa guerra dei browser( che IMHO ha portato solo più disagi che vantaggi,specie a noi webdesigners)?.

Con questo articolo cercherò di illustrare alcune tecniche, che, personalmente, uso per aggirare il problema, le tecniche ci sono e spesso non abbiamo bisogno nemmeno di hack.

1 – realizzare un foglio di stile solo per explorer 6 con le dovute correzioni e caricarlo a parte.

Questo si puo realizzare tramite i commenti condizionali.

<!–[if IE 6]>
carica il foglio di stile per ie6
<![endif]–>

Oppure si puo usare, come spiegato nel mio precedente articolo, tramite un semplice javascript che riconosce il browser dell’utente  e carica il foglio di stile corrispondente.

2- Usare e dichiarare sempre il doctype, meglio se strict.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

3- Usare display:inline, al posto di float, anche questo riduce di molto gli errori su explorer 6.

#div{display:inline;}

4 – Usare il position relative.

Questo risolve gia di per se tanti problemi di posizionamento del layout e ci permette sempre di avere il controllo su qualsiasi div, senza impazzire con margin e padding.

5 – Usare il min-height accompagnato dal !important per nascondere il valore reale a IE6.

#div{min-height:200px; height:auto !important}

Tenete presente che !importa e un hack e come tale invalida il codice css, usarlo solo in cas i”estremi”.

6 – Evitare gli hover nei css.

explorer li ignora completamente, si puo risolvere il tutto facilmente grazie a javascript e o  framework come jquery.

7 – Evitare di usare valori in percentuali per le dimensioni dei div, quando possibile usiamo misure in px.

Questa e una opinione personale, so che in molti preferiscono i layout liquidi, personalmente preferisco layout a dimensione fissa.

8 – Quando usiamo il float, ricordiamoci del bug dei 3px di IE.

Per risolverlo ci sono varie tecniche, personalmente preferisco la piu semplice, cioè dare un margin negativo di -3px all’elemento(anche questo puo essere “accompagnato” da !Important).

9 – Usiamo codice pulito e immagini ad altezza fissa per i background.

#div{background: url(img.jpg) repeat-x bottom left} meglio cosi

#div{ background-image:url(img.jpg);

background-repeat: repeat-x;

background-position: bottom left;

}

In questo caso abbiamo due soluzioni : usare il pnghack, e la proprieta beahavior, che invalida il codice, a meno che non siamo piu furbi e mettiamo il tutto in un javascript, con un semplice document.write, oppure usare gif specifiche per IE.

In questo caso se l’immagine e alta 10px eil nostro elemento 30px, e l’immagine la  ripetiamo in basso a sinistra, probabilmente con IE6 si vedra ugualmente male, per risolvere il problema bisogna usare un altra immagine della stessa altezza dell’elemento(in questo caso 30px) a cui applichiamo l’immagine di sfondo ripetuta.

10 – Cerchiamo di non usare  padding quando possibile

sappiamo tutti la differenza nel box model come lo interpreta Microsoft e come fa invece il resto del mondo.

picture 2 246x300 Realizzare layout compatibili con internet explorer 6

differenze tra il box model interpretato ma Microsoft e il resto dei browser

Bene queste sono alcune delle tecniche, ho volutamente tralasciato selettori particolari, i vari hack(a parte !important che resta sempre e cmq un hack) e i workaround, purtroppo dobbiamo ficcarci in testa che è quasi impossibile realizzare un layout standard per tutti i browser, ma nello stesso tempo bisogna tenere in considerazione questo 18% di persone che usano IE.

Io sono un felicissimo Mac user, “odio” Microsoft e considero safari, specie la versione 4, il miglior browser al mondo. Ma nello stesso tempo sono un professionista pagato(non sempre bene, ma questo e un altro discorso icon smile Realizzare layout compatibili con internet explorer 6 ), e come tale devo pensare al cliente e non a come vedo io il web, e ,credetemi, tra la visione di un webdesigner e quella di un cliente c’è sempre un abisso incredibile( ho avuto clienti che usavano ancora Ie 5.5!!)!

Per me la migliore soluzione rimane quella di adottare un foglio di stile specifico, in fin dei conti se si realizza con standard le correzioni da fare non sono poi cosi tante, ma le tecniche sopra elencate direi che sono una ottima alternativa a chi proprio non vuol saperne di considerare internet explorer 6 come un browser.

Inoltre aggiungo come considerazione personale, restante il fatto che odio IE, che sta benedetta guerra dei browser ha proprio rotto, e che forse sarebbe ora che il w3c invece di standardizzare sempre i linguaggi, come sta facendo con html5, provasse a convincere le varie case produttrici a adottare uno standard  unico per tutti i browser, ma questo credo sia qualcosa di impossibile.

Spero che questo articolo possa essere utile, mi piacerebbe sapere anche le vostre opinioni e le tecniche che adottate voi per rendere “standard” il browser meno “standard” del mondo!
[ratings]
Hasta luego!