Svacant Blog » Grafica

Perché il mio sito si vede in modo differente

Svacant — Thu, 24 Sep 2009 20:07:39 +0000

Vi sarà capitato di vedere il vostro sito in modo differente, ma spieghiamo meglio a cosa è riferita questa diversità.

Bene, avete appena finito il vostro layout, e diciamo che avete fatto un ottimo lavoro.
Aprite Firefox e tutto sembra regolare, aprite Internet Explorer e vedete la vostra grafica totalmente fuori ordine.

Questo accade perché non siete riusciti a creare un layout crossbrowser, ovvero che funzioni su tutti i browser.
Purtroppo fino ad oggi ci sono ancora browser che renderizzano la vostra pagina web in modo del tutto differente.

Tutto ciò è stato sempre argomento di gran dibattito, ed ha interessato molti specialisti del web, che hanno anche scritto libri in merito.

Ma io vi propongo una piccola soluzione, certo non risolverà tutti i vostri problemi, ma vi farà partire con un discreto vantaggio.

Codice

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Di cosa si tratta? è un foglio stile di reset, cioè ci permette di avere dei valori globali da cui partire su tutti i browser.
Perché ogni browser come detto prima renderizza a modo suo, ed i valori di margin, padding e altri variano a seconda dell’interpretazione del browser in uso.

Menù css e classe selected

Svacant — Mon, 31 Aug 2009 21:21:57 +0000

Vi sarà capitato di avere un menù creato con i css ed avere la classe selected o comunque una classe che rappresenta lo stile del bottone quando selezionata la pagina collegata ad esso.

Come soluzione potete usare PHP con diversi if oppure usare la mia soluzione.

Che grazie all’aiuto di jQuery ci permette di rendere il bottone del nostro menù selezionato in automatico, quindi senza creare inutili if.

Codice

$(document).ready(
function () {
$(‘a[href=?< ?php echo $_SERVER[QUERY_STRING]; ?>]’).addClass(‘selected’);

});

Spiegandone il funzionamento:

-Php serve la query string a javascript.
-Javascript assegna una classe css all’elemento con valore dell’attributo href che corrisponde alla query string.

Giustamente potete modificarlo come meglio credete, ma in sostanza questa è la soluzione che vi propongo.

Windows è più famoso di Linux

Svacant — Thu, 11 Jun 2009 16:12:18 +0000

A tutti quelli che lo pensano, sappiate che grazie a linux voi state visualizzando questo blog e non solo.

Come dimostrarlo?
Hai presente i percorsi delle directory, su Windows sai benissimo che sono indicati tramite ” \ “.
Su linux invece vengono indicati così ” / “.

Adesso guarda la barra indirizzi.

Riscalamento liquido plugin per Gimp

Svacant — Fri, 08 May 2009 15:43:50 +0000

Sono rimasto molto affascinato da questa fantastica tecnica chiamata “seam carving” ovvero riscalamento liquido, in breve permette di ridimensionare un’immagine in modo totalmente naturale.

Vi lascio a questo video per gustarne al meglio le potenzialità.

Un bottone 2.0 in 4 passi con The Gimp

Svacant — Sat, 31 Jan 2009 20:33:34 +0000

Ecco come creare un bottone 2.0 con The Gimp.

1° Passo, creare il riquadro arrotondato per il bottone.

2° Passo usiamo il gradiente per colorarlo.

3° Passo selezioniamo la parte superiore ed applichiamo del gradiente bianco con un’opacità del 50% circa.

4° Passo inseriamo un testo all’interno del bottone.

Ecco il file .xcf per The Gimp

Lotta con i browser per i webdesigner

Svacant — Mon, 26 Jan 2009 12:21:07 +0000

Incompatibility design

Si fa sempre più accesa la lotta dei webdesigner che vogliono rendere il loro sito leggibile per tutti i browser.

A volte i contenitori si piazzano da tutt’altra parte oppure ci sono svariati problemi su altri browser, la colpa non è del webdesigner ma dei browser molto ricchi di bug.
La microsoft sa benissimo che i loro browser hanno problemi con i css, ma tuttavia le soluzioni sono state svariate e qualcuna ve la propongo.

C’è chi usa ancora ie6 e dovete sapere che su ie6 (credo ve ne siate accorti) abbiamo un grosso problema con il canale alpha delle png, ecco qualche script utile, quest’ultimo richiede jquery.

Oltre al grosso bug del canale alfa delle png abbiamo tantissimi altri bug nelle versioni seguenti e c’è chi ha creato un file javascript per fixarli al volo.

Una barra Vista Style con CSS

Svacant — Sat, 24 May 2008 09:47:42 +0000

Linko un articolo molto interessante (in inglese), per creare una barra in stile Windows Vista©

Link ‘Link alla risorsa

[Flash]Le nostre foto con un tocco in più

Svacant — Mon, 12 May 2008 21:47:54 +0000

Per il web ho trovato qualche buon progetto in flash per la visualizzazione delle immagini.

Si è dimostrato tutto molto interessante sin da subito, è possibile scaricare una versione “limitata” ed usarla oppure acquistare i sorgenti .fla

Vi elenco questi fantastici viewer di foto in flash.

PostcardViewer

PhotoSpace

AutoViewer

SimpleViewer

La semplicità è assicurata, il file flash carica un file xml con l’url delle foto e la didascalia da inserire per ogni singola foto in alcuni casi si può scegliere di sfruttare anche flickr.

Home ‘Link all’Home Page
Work ‘Link ai Lavori

Creare una griglia con div css e php

Svacant — Thu, 28 Jun 2007 21:20:01 +0000

L’importanza di creare una griglia è molto rilevante se dobbiamo creare un qualcosa che faccia riferimento a piccoli porzioni di pagina.

Pensiamo ad un semplice gioco online,dividere lo schermo in una griglia può essere molto utile.
Vediamo come.

Codice

.block {
background-color: #FFFFFF;
border: 0px dotted black;
float: left;
height: 50px;
width: 50px;
}
.p_block {
background-color: #FFFFFF;
border: 0px dotted black;
height: 50px;
width: 50px;
}

Questo è il codice CSS che permette la creazione della griglia (con ie i div con classe p_block risultano fuori schema,quindi possiamo lasciarli senza bordo e ignorarli).

Adesso vediamo come creare una griglia con php.

Codice

< ?

$blocks=”100″; //Numeri di blocchi
$block_p=”10″; //Vai a capo ogni

$num=0; //Azzero la variabile
$a=1; //Variabile di partenza id associativi
for($i=0;$i<$blocks;$i++) {

$num++;
echo “<div id=\”$a\” class=\”block\”>\n”;
if ($num==$block_p) {
echo “<div class=\”p_block\”></div>\n”;
$num=0;
}
$a++;
}

Il risultato sarà una scacchiera con dei div identificati con id crescenti.

Quindi possiamo controllarne il contenuto con la funzione innerHTML.

Codice

document.getElementById(’10′).innerHTML = ‘Scrive nel div 10′;
document.getElementById(’50′).innerHTML = ‘Scrive nel div 50′;

Ecco qui, adesso avete la vostra girglia da controllare, potete creare anche un gioco di scacchi ad esempio….

Griglia HTML

ThickBox – Contenuti a popup trasformati con CSS

Svacant — Wed, 13 Jun 2007 12:09:38 +0000

Thick box è un piccolo script creato in javascript con l’aiuto di css per la gestione grafica.
Possiamo apprezzare il suo stile sul sito alla voce examples.

L’effetto è molto carino, infatti contenuti quali immagini, testi ecc.., vengono proiettati verso un popup interno alla pagina, creando un’effetto 3D, infatti la parte precedente viene abbassata di luminosità , e una porzione di schermo viene utilizzata come vera e propria finestra dove proiettare i contenuti, con un bordo e i controlli per la chiusura.

Thickbox ‘Link Home Page Thickbox