parere sito

gh3

parere sito

in questi giorni, stufo del mio blog e delle esperimenti che ho fatto, ho deciso finalmente di farmi il mio sito personale.

non avendo molto a genio flash per molti motivi ( pesantezza, sfruttamento della cpu e mancanza di programmi per svilupparci ) ho deciso di fare un sito minimale, dato che di grafica non sono certo un asso, sfruttando un po' di php e ajax. nient'altro....

naturalmente con un occhio di riguardo alla validazione, e all'usabilità.

ah si il link!

www.ellequadro.net

fatemi sapere che ne pensate

simon78.soft

Carino il sito, pero' d'impatto non capisco cosa posso trovare... la home e' vuota ed i 4 quadratini non mi dicono niente... forse dovresti scrivere sotto il quadratino cosa trovero' entrando nella sezione (anche senza dovermici posizionare sopra col mouse), e metti del testo nella home per far capire di cosa tratti... altrimenti molti entrano e se ne vanno...
Ciao!

deborahdc

Ciao Gh3 l'effetto è notevole complimenti, compatibile con tutti i browser, validato 1.0 strict. Lo prenderò sicuramente come riferimento.
Come ti ha detto simon però la grafica deve essere più intuitiva. Metti anche il testo sotto l'immagine non solo con rollover.
Deborah

gh3

@simon78_soft said:

Carino il sito, pero' d'impatto non capisco cosa posso trovare... la home e' vuota ed i 4 quadratini non mi dicono niente... forse dovresti scrivere sotto il quadratino cosa trovero' entrando nella sezione (anche senza dovermici posizionare sopra col mouse), e metti del testo nella home per far capire di cosa tratti... altrimenti molti entrano e se ne vanno...
Ciao!

@deborahdc said:

Ciao Gh3 l'effetto è notevole complimenti, compatibile con tutti i browser, validato 1.0 strict. Lo prenderò sicuramente come riferimento.
Come ti ha detto simon però la grafica deve essere più intuitiva. Metti anche il testo sotto l'immagine non solo con rollover.
Deborah

adesso sto lavorando sul fatto di renderlo usabile anche per i browser con js disabilitato o assente.

il problema è che sto sbattendo un po' la testa con il fatto che usando onload prima mi mostra la versione senza js e poi mette quella con il js e non è il massimo.

adesso sto pensando ad una possibile soluzione, speriamo in bene
che tra l'altro lascia le etichette sotto i box così è più intuitivo.

per i contenuti nella home ci sto pensando che mettere...

deborahdc

perchè non fai una miniguida per spiegare come lo hai fatto?
Sarebbe molto utile per tutto il forum Gt
(me compresa )

gh3

intedi solo sul controllo js attivo o meno?

ps. intanto ho sistemato il problema che dicevo sopra, ora sbatto la testa con i css e margin per mettere le etichette giuste sotto ogni box

deborahdc

Intendevo se puoi esattamente come è stato sviluppato quel sito.

all'interno della cartella lib mettere questo
all'interno della cartella src mettere questo ecc..

gh3

allora dato che mi è stato richiesto ecco un mini how-to per realizzare un sito stile ellequadro.

bene incominciando dicendo che sul web le animazioni oramai non sono più solo una prerogativa di flash, ma da qualche tempo a questa parte si possono ottenere degli ottimi effetti anche con ajax.

fatta questa premessa devo subito farvi scaricare qualcosa, eh si per realizzare un sito tipo ellequadro avremo bisogno di un paio di script di terze parti:

il primo verrà utilizzato in particolar modo per gli effetti , mentre il secondo per i contenuti.

Iniziamo!

Struttura base

[INDENT]E' ncessario esordire dicendo che java non è presente in tutti i browser (ad esempio gli spider di google non hanno java e non possono eseguirne il codice ) oppure non è attivo, con questo cose intendo dire?

Semplice che in primis è necessario realizzare il vostro sito senza js, e renderlo usabile e valido w3c, fatto questo potremo iniziare ad implementare tutto il resto.

Facciamo quindi un semplice esempio:

[HTML]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

	<title>Ellequadro</title>

</head>
<body>
<div id="test">test</div>
</body>
</html>
[/HTML][/INDENT]

E' tempo di muoversi!
[INDENT]Fatto il nostro sito base, è giunto il momento di aggiungere gli effetti di prototype.

Per prima cosa scompattiamo l'archivio e andiamo a fare l'upload sul nostro spazio web delle cartelle src e lib.

Fatto questo dovremo editare il contenuto dell' <head></head> aggiungendo:

[HTML]
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js" type="text/javascript"></script>
<script src="src/unittest.js" type="text/javascript"></script>
[/HTML]

A questo punto creiamo la nostra funzione per l'effetto slide, sempre fra i tag <head>:

[HTML]
<script type="text/javascript">
function test()
{
if(document.getElmentyById('test').style == 'none')
Effect.SlideDown('test',{duration:1.5});
else Effect.SlideUp('test',{duration:0.5});
}
</script>
[/HTML]

Questa funzione cosa fa: valuta se l'ggetto con l'id test è visibile, se si effettua lo slideup nascondendolo, se no slidedown mostrandolo.

Ultima cosa da fare è aggiungere un link per il test nel body:

[HTML]
<a href="javascript:void(0);" onclick="test();">test</a>
[/HTML]

[/INDENT]

Per la continuazione, spero di aggiungerla appena ho un po' di tempo libero per scriverla, intanto smanettante un pò e se avete problemi chiedete

deborahdc

noo
Andiamo è perfetto stavo gia cominciando
ok provo. Se rimango a metà ti chiamo

Grazie infinite per la tua collaborazione
Deb

gh3

ma lo faccio apposta, almeno avete tempo per smanettare un po' e imparare ad usarlo bene, così poi potete farne di tutti i colori

deborahdc

neeeeee. Forum Gt informazioni chiare e limpide come un lago di primavera
E' per questo che tutta Italia si riunisce qui

Problemino:
Da prototype ho scaricato da qui http://www.prototypejs.org/download la versione Download the latest stable version—1.5.0 e da qui http://advajax.anakin.us/index-en.htm ho scaricato Download AdvancedAJAX 1.1.

Questi <script src="src/scriptaculous.js" type="text/javascript"></script>
<script src="src/unittest.js" type="text/javascript"></script>

dove li trovo?

gh3

hai ragione, mi son menato via :asd:

non è prototype che serve, ma scriptacolous: http://script.aculo.us/downloads

ps. mi modificheresti il riferimento nel post precedente, dato che non mi fa editare?

deborahdc

Eccomi
Allora siamo qui ma mi manca da sapere il file advanceaiax dove lo metto
e come mai adesso mi da errore (ho seguito tutti i procedimenti tuoi)
P.s lo sto guardando in locale lo devo mettere in remoto forse?:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js" type="text/javascript"></script>
<script src="src/unittest.js" type="text/javascript"></script>
<title>Ellequadro</title>
<script type="text/javascript">
function test()
{
if(document.getElmentyById('test').style == 'none')
Effect.SlideDown('test',{duration:1.5});
else Effect.SlideUp('test',{duration:0.5});
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="test();">test</a>
<div id="test">test</div>
</body>
</html>

gianlucamat

Le scritte non sono allineate sotto ai quadratini in homepage: succede solo a me??
Qua c'è lo screenshot:

P.S.: il fondo grigio è un'impostazione del mio browser

gh3

@deborahdc said:

Eccomi
Allora siamo qui ma mi manca da sapere il file advanceaiax dove lo metto
e come mai adesso mi da errore (ho seguito tutti i procedimenti tuoi)
P.s lo sto guardando in locale lo devo mettere in remoto forse?:

allora in locale deve andare, i problemi sono 3

nella fretta è getElementById e non getElmentById, manca una e
manca .style.display = none

e ultimo ma basilare, il link al test va sempre sopra all'oggetto, se no non funge.

@gianlucamat said:

Le scritte non sono allineate sotto ai quadratini in homepage: succede solo a me??
Qua c'è lo screenshot:

P.S.: il fondo grigio è un'impostazione del mio browser

che res usi?

gianlucamat

1024x768