Piplos' blog » web-design

I 20 siti più famosi, visti al momento della loro nascita

Piplos — Thu, 03 Sep 2009 10:26:21 +0000

Siete curiosi di sapere com’erano i principali siti web mondiali al momento del loro lancio iniziale? Qui sono raccolti venti screenshot, rappresentanti ognuno di loro un diverso sito popolare, a partire da Google per finire con Flickr.

Ai vecchi tempi non esistevano il CSS e l’attuale Web-design, perciò scordatevi le semplicità e i look gradevoli che si hanno ai giorni nostri. In media questi siti sono nati circa cinque o dieci anni fa, ma nell’informatica un decennio equivale ad un centennio.

Cominciamo subito con i migliori:

1. google.com – lanciato nel 1996

Leggi il resto dell'articolo...

CSS: Personalizziamo al meglio la barra di ricerca

Piplos — Thu, 02 Jul 2009 18:51:34 +0000

Con pochi passaggi è possibile dare un nuovo look allo strumento di ricerca, guardate la pagina di esempio.

Il sistema operativo Windows Seven è stata una fonte di ispirazione per la creazione dell’esempio, ma potete personalizzare come volete la barra di ricerca, come io stesso ho fatto per questo blog (in alto a destra).

Il tutto usa un gioco di Javascript e CSS per simulare gli effetti della barra di ricerca di Vista/Seven, nei suoi tre stati: normal, hover (cursore del mouse sopra) e focus (click del cursore sulla barra).

Come applico questa tecnica?

Leggi il resto dell'articolo...

Come sfumare gradualmente in trasparenza con Photoshop

Piplos — Tue, 23 Jun 2009 07:43:59 +0000

Molti grafici prima o poi si ritroveranno questo problema: come sfumare un immagine gradualmente in trasparenza. Per farvi un idea ecco un esempio:

Notate che l’immagine di primo piano (il volto della bella ragazza) va sfumando in trasparenza verso il basso in direzione della freccia, e dietro la trasparenza si vede un livello che ha un pattern a strisce diagonali. Questa tecnica ha un grosso potenziale in ambito grafico e conoscerla significa anche evitare grosse perdite di tempo in futuro.

Io stesso ho applicato questa procedura per dare un bel look vetroso alla testata di questo blog, allo sfondo celeste dietro la scritta “Piplos’ blog“.

Leggi il resto dell'articolo...

Domanda esistenziale

Piplos — Thu, 04 Jun 2009 12:44:59 +0000

Può Internet Explorer essere considerato un browser?

Perle di saggezza

Piplos — Mon, 11 May 2009 09:30:57 +0000

Valid HTML does not equal good HTML. A validator will not tell you if your markup is semantic or not or if it is accessible or not. Think of validation as a step towards a good website, not as quality assurance.

[Fonte]

Conditional-CSS – Adottiamo gli stili ai diversi browser

Piplos — Sat, 02 May 2009 13:59:33 +0000

Per chi, come me, fa a botte con i vari browser per adattare gli stili CSS per ciascuno di essi, non può fare null’altro che usare vie traverse, come sfruttare i bug di ciascun browser per fargli leggere delle regole CSS adattate per questi ultimi, oppure l’applicazione di javascript che rileva il browser utilizzato dall’utente che specifica i fogli CSS da utilizzare, eccetera.

Spesso questi metodi sono anche un po’ troppo scomodi per la non-pulizia del codice, che lo fa irrimediabilmente invalidare.

La soluzione al problema è Conditional-CSS, uno script in un file PHP che ci permette di leggere il CSS in modo condizionale per ogni browser. Con questo metodo si risparmia molto tempo e la manutenzione è più immediata. Un esempio delle possibilità di questo script è questo:

.box {
   width: 400px;
   [if IE 6] width: 600px;
   [if Opera] width: 500px;
}

Indovinate un po’? Esatto, normalmente il div con classe “box” è grande 400px, ma grazie a Conditional-CSS, con le regole del CSS condizionale se vediamo la pagina da IE 6, il box appare di 600px mentre in Opera lo vedremo di 500px!

Leggi il resto dell'articolo...

Fugue icons: tirate a lucido le icone dei vostri blog!

Piplos — Tue, 21 Apr 2009 11:14:05 +0000

Spesso vado in giro a cercare delle icone da applicare ai vari design che ho in cantiere. Ma in genere le icone che trovo sono a dir poco orribili o le solite che si trovano dappertutto. Soprattutto se si vuole un design professionale anche le icone devono essere a regola d’arte.

Ecco che ho trovato finalmente un rispettabile set completo di icone (contenente quasi 2.000 elementi), capaci di dare un tocco professionale a gran parte dei design che si vengono a creare/modificare.

Leggi il resto dell'articolo...

Not suitable for IE6

Piplos — Fri, 30 Jan 2009 00:53:54 +0000

Bisognava fare qualcosa. Siamo nel 2009 e ci sono parecchi visitatori che vengono qui utilizzando un antiquato, insicuro e scadente Internet Explorer 6.

Chi mi conosce sa che odio questo browser, dalla prima alla sesta versione. Trovo che sia un obbrobrio in quanto ad accessibilità e conformità agli standard. Praticamente IE6 è uno sputo nell’occhio se sei un web-designer.

Allora ho preso provvedimenti drastici. Se visitate il mio blog con IE6 vedrete un alert giallo bello grosso (fatto simile apposta a quelli reali del browser).

Leggi il resto dell'articolo...

© Copyright by Piplos' blog. | Permalink | 9 commenti
Post tags: browser, internet, internet explorer, web-design, Windows

Google Reader e YouTube, che succede?

Piplos — Fri, 05 Dec 2008 11:54:32 +0000

Siete tornati indietro nel tempo? Cosa sono quei layout stile anni ‘90?

© Copyright by Piplos' blog. | Permalink | 13 commenti
Post tags: Estetica, Google, layout, tumble post, web-design, YouTube