TheJoe.it Into the (open) source

29gen/142

WordPress: avvisare il lettore che il post è vecchio

clocky

Spesso capita (scrivendo di software e tecnologia) che l'articolo che oggi è attuale, domani sia già superato. Esiste almeno un plugin per WordPress per notificare il lettore che il post che sta leggendo è stato scritto tempo fa, che è una soluzione perfetta e pronta all'uso, ma ho voluto ugualmente tentare di modificare il codice del mio tema per aggiungere questa semplice funzione in modo automatico.

Premetto che i passaggi che seguono creano un riquadro (in questo caso giallo) prima del titolo dell'articolo.

14dic/130

Bottoni usando solo i CSS

css-codice

Nell'articolo di oggi vediamo come trasformare una semplice form, con un bottone non formattato in un'altrettanto semplice form con un bottone formattato. Tutti i colori, i gradienti e le ombreggiature saranno "costruite" usando le regole CSS relative alla versione 3. Queste poche regolette sono da prendere un po' con le pinze, perché funzionano perfettamente con i browser basati su Webkit (Safari, Konquerror, iPad/iPhone) e Gecko (Firefox e simili), ma sono inutili su tutte le versioni

10giu/130

CSS: rimuovere il bordo “a puntini” dei link

outline_ico

Nell'articolo di oggi vediamo una semplice regola CSS, già presente in molti CSS Reset. Sto parlando della proprietà "outline". Se la regola "outline" non viene impostata il browser visualizzerà un riquadro puntinato attorno a ogni link cliccato. L'impostazione di default è questa perché si è pensato anche a chi usa il tasto TAB per navigare, e senza bordatura perderebbe il focus senza più capire su che link è capitato. Sto pensando anche a chi non può usare il mouse per difetto visivo. Rimuovendo la bordatura renderesti il sito inaccessibile a questi ultimi.

4mag/130

CSS: la proprietà “z-index”

aces

Oggi vediamo una importante proprietà dei CSS, ereditata anche dall'ultima versione, i CSS3. Sto parlando (come si sarà intuito dal titolo) della proprietà "z-index".

Le proprietà "height" e "width" impostarenno altezza e larghezza, mentre "z-index" ci serve per spostare gli elementi nella terza dimensione di profondità (o asse "Z"). La terza dimensione è perpendicolare allo schermo e sarà di più facile comprensione per chi conosce programmi che prevedano l'utilizzo dei livelli.

Immaginiamo lo schermo come un tavolo sul quale appoggiare alcune carte da gioco, in questo modo:

9ott/120

Alcuni font, o meglio alcuni set di icone

foundation_free_icon_font

A volte su internet incappo in alcune soluzioni geniali, che risolvono in pochi click un lavoro che altrimenti durerebbe alcuni minuti (si, ok, stiamo parlando di minuti, ma è sempre un risparmio di tempo). Le risorse che vi segnalo oggi (tratte dal blog inglese SixRevisions) sono semplici font, i cui caratteri consistono in icone monocromatiche pronte da includere nel web (con la regola CSS "@font-face"), una tecnica in uso da qualche tempo, ma che a stento vedo applicata.

24feb/120

CSSDeck: tante idee dai professionisti del web design

pressable_button

Dalla nascita dei CSS3 i web designer sono letteralmente impazziti per le innumerevoli nuove possibilità a disposizione. Alcune delle più eclatanti sono la possibilità di creare un'ombreggiatura (anche sfocata) sotto al testo o a qualsiasi elemento, la possibilità di ruotare gli elementi di quanti gradi si voglia, effetti fade-in e fade-out ed alcune semplici animazioni in genere. La tendenza sembra essere quella di abbandonare (o comunque diminuire) l'utilizzo di software grafici in favore di rendering sofisticati via CSS.

21nov/112

30 giorni per imparare HTML5 e CSS3

30dayz

Oggi segnalo un importante serie di tutorial (della durata di un mese) che promette di insegnare il web design anche a chi di design è digiuno in soli trenta giorni. Il corso parte proprio da zero, ed è indirizzato anche a chi non ne sa nulla di web design. E per nulla intendo zero.

Le lezioni sono articolate in modo da non risultare troppo pesanti, le prime cercano di non "mettere troppa carne al fuoco" e si esauriscono in una decina di minuti al massimo, in seguito vengono poi introdotti i vari tag in base all'ordine di utilizzazione. Particolare attenzione è stata dedicata al rispetto degli standard, all'accessibilità e a come interagiscono HTML e CSS.

25mar/114

Bottoni menu di navigazione con CSS Sprites

dito_cattelan2

Nel tutorial di oggi torniamo a parlare di grafica HTML ed integrazione CSS. In un mio articolo di qualche mese fa parlavo della tecnica (largamente usata anche da Google) dei CSS sprites. In pratica consiste nell'inserire la maggior parte di immagini ripetute più volte all'interno della pagina in un'unica grande immagine, che verrà richiamata più volte con il nostro CSS.

Per una questione di preferenze personali tendo ad evitare di usare Gimp ogni volta che devo creare una diversa voce del menù di navigazione, preferisco creare i soli sfondi dei bottoni e poi ragionare sugli stili tramite i CSS. In questo modo innanzitutto il menù è meglio indicizzato dai motori di ricerca, in secondo luogo evito di "sprecare" il tempo per crearmi ad ogni bottone una nuova immagine.

18feb/115

I migliori editor HTML non commerciali per Linux

HTML_Icon_Final

Chiunque abbia mai provato a creare piagne HTML con Linux si sarà certamente scontrato con la carenza di software WYSIWYG sviluppati ad hoc per il nostro sistema operativo preferito. Fortunatamente oggi questo "gap" viene colmato solo in parte grazie allo sviluppo di alcuni programmi open source che tentano di sopperire alla mancanza di uno sviluppo di Dreamweaver (o alternative pur sempre commerciali) su piattaforma Linux, ma per molti versi siamo ancora lontani dall'aver raggiunto l'usabilità di Dreamweaver o simili.

Oggi vediamo alcuni dei migliori software per l'editing WYSIWYG sviluppati nativamente per Linux. Ringrazio il blog web distortion per i consigli che riporto tradotti di seguito.

12gen/111

Aggiungere una didascalia a comparsa alle foto con i CSS3

preview

Nel tutorial di oggi vediamo come impostare le immagini del nostro sito in modo che al passaggio del mouse compaia una didascalia nella parte inferiore della foto con effetto fade-in / fade-out.

Questa tecnica fa uso di alcune delle caratteristiche implementate nei CSS3, l'ultima versione. Purtroppo non tutti i browser sono ancora uniformati a questa specifica, sappiate che a seconda del browser potrebbe non funzionare. I browser più nuovi che supportano i CSS3 sono Firefox 4, Safari 5, Mobile Safari e Opera 10. Explorer purtroppo non li supporterà (a quanto pare neanche la prossima versione: IE9), ma cercheremo comunque di non dimenticarci degli utenti IE.