Page Headers

Leggendo una segnalazione comparsa su Edit scopro Free Web Page Headers una raccolta libera di header destinati alle testate delle pagina web e dei nostri blog. Qualche tempo fa unilizzando uno script consigliato su A List Apart per la rotazione di immagini, avevo preparato delle delle testatine per il mio blog.

Ho ripreso quelle testatine inutilizzate ed ho innaugurato un nuovo set su flickr "web elements", l'intenzione sarebbe quella di inserire di qui elementi grafici riutilizzabili da chiunque volesse farlo. Quindi ... fate voi!

Keywords: flickr,css,images,foro,header,html

Page Headers

Leggendo una segnalazione comparsa su Edit scopro Free Web Page Headers una raccolta libera di header destinati alle testate delle pagina web e dei nostri blog. Qualche tempo fa unilizzando uno script consigliato su A List Apart per la rotazione di immagini, avevo preparato delle delle testatine per il mio blog.

Ho ripreso quelle testatine inutilizzate ed ho innaugurato un nuovo set su flickr "web elements", l'intenzione sarebbe quella di inserire di qui elementi grafici riutilizzabili da chiunque volesse farlo. Quindi ... fate voi!

Keywords: flickr,css,images,foro,header,html

Html Validator per Firefox and Mozilla

Html Validator for Firefox and Mozilla è una interessantissima estensione per Firefox e Mozilla, è un validatore di codice HTML basato su TIDY.
L’estenzione installa una icona interattiva sulla barra di stato del browser, che indicherà gli errori nel codice e a seconda della conformità delle regole Html utilizzate visulizzerà una icona a tema.
Accedendo alla visualizzatore del codice sarà possibile ottenere un elenco degli Errors o degli Warnings , inoltre sarà possibile ripulire automaticamente il codice dagli errori.

E’ possibile scaricare estensione da qui

Keywords: extension,firefox,mozilla,xul

Color Fields Colr Pickr (on Flickr)

Ieri in Spell with flickr dicevo che:

Dopo la nascita e l’affermazione del servizio ecco che la gente comincia a giocherellare con il codice e a manipolare i contenuti a seconda delle esigenze e degli scopi da raggiungere.

Ecco appunto un nuovo giochino che fornisce una navigazione alternativa del servizio:
Color Fields Color Pickr
Insomma navigate a colori!

Tutte queste tecniche utilizzate usano le API che Flickr ha messo a disposizione, dandone una dettagliata documentazione, e svariati linguaggi di programmazione (spesso viene utilizzato Falsh e ActionScript) quindi se volete provare, fate pure.

Keywords: flickr,service,api

Spell with flickr

Dopo la nascita e l’affermazione del servizio ecco che la gente comincia a giocherellare con il codice e a manipolare i contenuti a seconda delle esigenze e degli scopi da raggiungere; è stato così per molte applicazioni che si sono succedute nel web, per gmail per i files RSS ora tocca a Flickr:

Spell with flickr

... cosa dire ancora … ma ditelo con flickr.

Keywords: flickr,service

Google OS X

Ed ecco l’ultima dai laboratori di Google, un modo simpatico per accedere ai servizi del motorone di ricerca.
Un esplicito omaggio al sistema operativo di casa Apple, OSX, ed al suo Dock, infatti a fondo pagina è possibile leggere Roses are red. Violets are blue. OS X rocks. Homage to you.

Ecco il link: http://labs.google.com/googlex/

Il meccanismo che gestisce l’animazione è un semplice rollover accoppiato ad un ridimensionamento dinamico di immagini, scritto tutto in Javascript ed alla solita maniera: condensatissimo.

Plastico

CSS Zen Sentiero ha finalmente pubblicato il mio layout. Ringrazio Michele Ledda che ultimamente è stato molto impegnato ma che comunque ha avuto il tempo di cure il suo bel giardino.

Un copia del layout si trova qui, come si può notare c’è qualche elemento in più rispetto alla versione pubblicata, al momento non so se è stata una mia svista, o hanno preferito così, mi informerò.

Il layout usa come font preferito Bitstream Vera, ho notato che questo font in alcuni casi ha qualche problema con Opera ed il suo motore di rendering,
qui ho scritto qualche cosa riguardo al problema. Se c’è qualcuno che ha suggerimenti da darmi è il benvenuto.

Agigornamento 2004-02-01

Dopo un piccola svista è tornato tutto in ordine:
Css Zen Sentiero.

Ascii Art

Qualche settimana fa su Diodati.org si parlava di Ascii Art .

Per quella discussione realizzai una pagina sfruttando il logo di Diodati, l’elefantino monocromatico che svetta (da manuale) su ogni singola pagina del suo ormai enorme portale. Fatto sta che la paginetta è valsa la tessera di socio sostenitore di Diodati.org.
Naturalmente non esistono tessere di socio sostenitore.

Gianluca Affinito ha realizzato una versione accessibile di quella, ovvero con lavoro certosino (credo non ci siano altre vie) ha sostituito i caratteri Ascii (fuffa per gli screen reader), con un pezzo di Michele Diodati: Cos’è l’Accessibilità, adesso l’elefantino parla infatti gli screen reader incontreranno per la loro strada parole e non simboli grafici e potranno trasformare l’immagine in un discorso compiuto.

In prima pagina su diodati.org è possibile leggere quanto segue:

14/12/2004 – Arte ASCII accessibile
Grazie al lavoro certosino di Gianluca Affinito, ecco un esempio di arte ASCII accessibile . I caratteri che compongono l’oggetto grafico (l’elefantino simbolo di Diodati.org) non sono privi di senso, ma contengono frasi ascoltabili per mezzo di un lettore di schermo.
La cosa è nata da una discussione sul forum Universo mondo .

Quella di Gainluca Affinito è un’ottima tecnica per aggirare i problemi degli Screen Reader alle prese con Ascii Art. Naturalmente c’è da dire l’Ascii Art è una tecnica tutta grafica per rappresentare immagini attraverso l’accostamento di diversi caratteri ascii, in modo da creare zone d’ombra simil basso-rilievo ed ottenere così un effetto grafico gradevole e molto leggero.

Accessibilità e Ascii-Art

Nel HTML Techniques for WCAG 2.0 sono riportati i consigli su come comportarsi nel caso in cui ci si trova di fronte ad Ascii-art o Emoticon .

Risorse per la Creatività

L’ ascii-art è nata insieme al PC, non vorrei insistere ed indagare o costruire una teoria che dimostri questa mia ipotesi ma peso che sia proprio così.
Venne utilizzata fin da subito per fare di tutto, dalla grafica pubblicitaria ai giochi, da interfacce software allo streaming video.

Per saperne di più vi invito a leggere ASCII art – Wikipedia c’è di tutto, pieno di link e risorse.

Di seguito riporto altri link interessanti:

• ASCII video effect in Adobe After Effects , per quanto riguarda questa pagina vi invito a fare attenzione alla sigla di Studio Aperto (Italia 1) dove questa tecnica è utilizzata per animare la grafica iniziale.
• ASCII , nella sezione dedicata ai filmati è possibile vedere come creare un filmato con html e javascript (spulciate nel codice). I file dei filmati sono molto pesanti.
• Online JPG to ASCII converter
• Ascii-art.de

Argomenti correlati
su Wikipedia vedi anche ANSI art e Shift-JIS art

Un italiano al Garden.

Css Zen Garden si aggiorna inserendo 7 nuovi layout tutti molto belli.

Emiliano Pennisi ne ha realizzato uno .
Faccio tifo per lui, mi piace come lavora ed il suo stile, provate a gironzolare tre le sue pagine. Una in particolare, quella dei download , bellissime le 500 con la scia tricolore. Complimenti .
Tanto che ci siete, fate un giro nella sezione Illustrations ci sono tante altre chicche.

Visto che avevo cominciato parlando di Css Zen Garden, continuiamo… segnalo questo , non ho capito se fa parte dei layout ufficiali o meno, è stato realizzato da Kai Laborenz per vederlo assicuratevi di utilizzare Firefox o Opera o Safari.
Perché lo segnalo?
Perché sfrutta PNG e CSS3 in modo creativo, grazie soprattutto a Firefox e gli altri Browser all’avanguardia che permettono il tutto. Con IE naturalmente si perdono gli effetti speciali.

Questa è la lista completa dei nuovi layout di CSS Zen Garden:

• Attitude by Stephane Moens
• Urban by Matt Kim & Nicole
• Paravion by Emiliano Pennisi
• Verdure by Lim Yuan Qing
• Pixelisation by Lim Yuan Qing
• Golden Cut by Petr Stanicek
• Invasion of the Body Switchers by Andy Clarke

Una Nota (!)

Lim Yuan Qing , quello che ha realizzato Pixelisation e Verdure è un ragazzo di Singapore ed ha 14 anni.

Aggiornamento 2004-12-17.

Visto che mi sono sfuggite alcune cose continuo qui:

1. Per correttezza è giusto dire che Emiliano Pennisi non è l’unico italiano a poter vantare un layout (ufficiale) per CSS Zen Garden. Gli altri si trovano all’interno della lista dei layout ufficiali.
2. (Ma) Emiliano Pennisi ha ben 3 layout ufficiali al Css Zen Garden (2004-12-17) :
   • Medioevo
   • 60’s Lifestyle
   • Paravion

Bottoni Promozionali - il seguito

Facendo riferimento al post Bottoni Promozionali – Attenzione! di ieri…

Ho scritto una letterina a Browse Happy dove consigliavo di chiudere il tag img.

Promotional graphics § Browse Happy
Oggi sul sito, nella sezione dedicata ai bottoni promozionali a fondo pagina è possibile leggere un avviso per gli sviluppatori web che sono invitati a chiudere il tag img qualora usassero XHTML.

Penso che…

Quella di aggiungere un avviso sia una soluzione buona che non lascia fuori chi scrive ancora HTML ma avvisa allo stesso tempo chi incomincia ad utilizzare XHTML di stare attenti.
Proverò a scrivere anche agli altri siti citati ieri per vedere come si comporteranno – devo dire che quelli di Browse Happy sono stati fulminei.

Bottoni Promozionali - Attenzione!

Credo che quasi tutti gli sviluppatori web conoscano Browse Happy un progetto nato The Web Standards Project per far conoscere altri browser che non siano IE, per dimostrare quanto sia facile e indolore cambiare.
In prima pagina è possibile leggere:

Internet Explorer can make your computer unsafe. Why not switch to a browser that’s more secure?

Quindi è tutta una questione di sicurezza …
ma certo che no! insomma un browser come Firefox fa comodo a tutti, utenti e sviluppatori.

Browse Happy fa promozione, in che modo? Attraverso la seguente pagina:
Promotional graphics § Browse Happy
una raccolta di bottoni (bellissimi) da inserire nelle pagine web.

Il codice dei bottoni!

BrowsHappy mette a disposizione del codice che fa riferimento ai bottoni promozionali, consigliando di inserire questo codice nelle pagine per visualizzare il relativo bottone.
Il codice non fa altro che inserire un’immagine attraverso il tag img, peccato solo che il tag non viene chiuso correttamente, o almeno secondo le raccomandazioni XHTML del W3C.

Un svista.

Quasi sicuramente si tratta di una banale svista, solo di svista potrebbe trattarsi visto che chi mantiene il sito non è altri che The Web Standard Project.
Vi chiederete da dove nasce la svista, dopo che la pagina sarà passata sotto Tidy ed il W3C Validator qualche decina di volte…
Il codice consigliato non è altro che del semplice testo rinchiuso dentro il tag code per questo motivo potrebbe esserci scritta anche una barzelletta, ma il validatore non se ne accorgerebbe.

Conclusione.

Per concludere dico che tutta questa storia non rappresenta un problema visto che saremo noi a testare le nostre pagine con il codice consigliato da loro, scoprire la svista e correggerla.
Nel correggere ci si accorge che molto spesso c’è anche un border="0" di troppo.

Questo capita con la maggior parte dei siti che offrono questo servizio, quasi tutti dimenticano quella maledetta / mentre lasciano qualche border="0" di troppo.

Button Ok – Button Ko

Di seguito un lista di bottoni con codice non valido (Ko) e con dodice valido (Ok).

Button Ko

• Mozilla Firefox – Promotional Buttons
• Promoting Mozilla Thunderbird
• BLOGITALIA.IT – La directory italiana dei Blog
• Affiliates homepage – Spread Firefox:http

Button Ok

• W3C Buttons (bottoni di validazione codice)
• HTML-Kit Buttons

Firefox wallpapers da Rakaz

Le icone disegnate per Firefox si prestano bene anche per la realizzazione di wallpapers, eccone qualcuno:
Firefox wallpapers da Rakaz.

Hicks Croft

Jon Hicks , si quello delle icone di Firefox ecc. ecc., ha da qualche tempo ridisegnato il suo sitarello.
Jeff Croft ne parla nel suo blog, dicendo le cose che avrei scritto qui se non avessi menzionato Croft ed il suo post.

CSS Zen Sentiero

Cito testualmente:

CSS Zen Sentiero vuole essere un luogo di sperimentazione e di confronto sul design basato sull’uso dei fogli di stile.
Chiunque lo voglia può partecipare all’iniziativa che consiste nel proporre un design alternativo di questa pagina modificando esclusivamente il foglio di stile!

Si! Voglio partecipare! Questo è un piccolissimo assaggino del mio layout. Non ho pensato ad una tematica specifica nello sviluppo grafico, sono andato dove mi portava il gusto. Devo dire che un piccolo fattore di scelta l’ha avuto un sondaggio di qualche settimana fa.

Il lavoro è cominciato a metà settembre, dopo varie interruzioni è quasi concluso, l’ultimo scoglio: la validazione del CSS.
Il layout è costituito da due colonne, lo sfondo è un tantino complesso e va a fondersi con la testa ed il piede. Tale conformazione mi ha portato ad utilizzare valori molto alti di padding e margin per alcune sezioni, IE 5 naturalmente con i suoi problemi mi costringerebbe ad usare qualche hack, cosa che non va bene per una corretta validazione quindi bisogna rivedere ancora un po il CSS.

Bottoni Tridimensionali e CSS

Un interessante articolo:
Designing 3D buttons with pure CSS che in Italiano suona cosi Costruire bottoni tridimensionali usando solo

Mozilla.org - Nuovo Stile

Ecco quello che dovrebbe essere il nuovo stile di Mozilla.org:
mozilla.org – home of mozilla, firefox, thunderbird, and camino
Steven Garrity invita a lasciare qualche considerazione

Colori: Designer e Non

Nella sezione Experiments di The Man In Blue c’è un interessante sondaggio al quale tutti possono partecipare (Designer e Non), lo scopo è quello di arrivare a sapere quale è il colore più scelto.”

The Anatomy of an Icon

Interessante e semplice tutorial su come disegnare una icona bellina.

The Anatomy of an Icon da SimpleBits [ING].

Moz Loghi

Firefox e Tunderbird sono ormai due prodotti affermati, di successo, e secondo me molto efficienti, (li uso come applicazioni predefinite – fatelo anche voi).

Come applicazioni che si rispettino anche per loro sono stati pensati temi grafici ad hoc, comprensivi di colori icone e loghi. Temi che hanno avuto un’evoluzione, distaccandosi sempre più da quelli dell’applicazione madre Mozilla Suite, fino ad arrivare ad essere quello che oggi vediamo.

In particolare sono i loghi quelli che colpiscono di più, quello di Firefox, nato da un’idea di Daniel Burka, abbozzato da Stephen Desroches e renderizzato da
Jon Hicks (quello di hicksdesign), quello di Thunderbird abbozzato sempre da Stephen Desroches e poi grazie al solito zampino di Hicks portato a conclusione e renderizzato.

Di seguito gli articoli riguardanti l’ideazione e la realizzazione scritti direttamente da Jon Hincks:

• Logo Firefox
• Logo Thunderbird

A questo punto cosa manca? Ma è ovvio Calendar SunBird [la versione standalone di calendrr]!
Ed ecco le prime (sarebbe meglio le ultime, visto che ormai tocca solo scegliere) prove per il logo dell’applicazione. Quelle di Mark Carson sono splendide, perfettamente in linea con le precedenti.

se ne parla anche su mizillazine.org

Da Notare:
Avete fatto caso all’andazzo generale che vuole le icone tonde, si pensi a tutto il set Macromedia, alle nuove icone citate prima, a IE, e qualche altra che ora mi sfugge. Te ne rendi conto anche quando guardi al barra delle applicazioni.

Un po di tutto

guardatelo e sognate,un capolavoro.

A proposito di grafica: gurdate qui... , una raccomandazine visitate i link in prima pagina ne vale veramente la pena. Per chi ama la pixel-art (io sono tra questi): solopixel.com.

Per quanto riguarda i feed RSS: hebig.org

TopStype 3 Lite

E' finalmente (ufficialmente) disponibile la versione 3 di TopStyleLite, in verità era già inclusa nel pacchetto PRO (altra meravigliosa creazione), ma ai più sarà forse passata in sordina. Nuova grafica, le funzioni sono però le stesse visto anche l'alto livello raggiunto già dalla versione precedente (2.5), insomma un programmino leggereo (3.2MB) ma indispensabile per chi ama e lavora con i CSS.

Tuttotondo

Chi si diletta a costruire siti tableless avrà incontrato qualche problema nel momento in cui ha deciso di arrotondare gli spigoli angoli (scusate) delle tabelle create.
Buone Notizie:
Le specifiche css3 del w3c daranno questa possibilità senza fare troppe capriole con immagini ritagliate e trasparenze varie.
Cattive Notizie:
Perchè tutto sia supportato dai browser dovranno passare un po di annetti, c'è chi dice anche dieci (io spero sui 4 o 5).

Possiamo accontentarci (nella lunga atteasa) di qualche cosa del genere:
http://kalsey.com/2003/07/rounded_corners_in_css/
Attenzione però, i puristi diranno che con questo si bestemmia, i div annidati fanno male.