Mi hanno incaricato di fare il sito per la mia squadra di rugby, visto che quello vecchio nessuno lo aggiorna e, secondo il mio modesto parere, ca veramente cagare.
è una schifezza da ogni punto di vista, nel senso che è inaggiornabile e immodificabile, visto che sono oltre 7000 file tutti nella stessa cartella, con nomi assolutamente casuali.
Per ora io e un amico (sempre della società) abbiamo fatto un abbozzo.
Il sito di ora è UNICALCE RUGBY LECCO - IL SITO UFFICIALE -
La nostra "prima versione" è Rugby Lecco
Il colore della maglia, della società e della città è bluceleste.
I vari link dovrebbero funzionare tutti tranne quelli della sezione "Giovanili" perchè non sapendo quante giovanili abbiamo non li ho ancora fatti XD
Stasera uploado la versione con anche dei dati dentro ( le schede giocatore ).
Mi interessano opinioni, suggerimenti, critiche..etc etc etc..Soprattutto mi interessano ERRORI che riscontrate!
Errori da correggere:
-Title della pagina dev'essere rugby lecco, in alcune è "Dripstones". ( copiato delle pagine del sito del mio gruppo e non l'ho modificato )
- La scritta "rugby lecco hic sunt leones" in alto, si vede correttamente solo con google chrome, con altri browser la si vede contornata da un rettangolo nero. ( Grazie preiser )
- Da giovanili non si può tornare a società ( link )
Sito della mia squadra!
Visualizzazione stampabile
-
3/11/2010, 8:44Loller156Sito della mia squadra!
-
3/11/2010, 10:06§¤PREISER¤§
Per il bordo nero è sufficiente aggiungere l'attributo
border="0"
nel tag <img />:
Rispetto al precedente è sicuramente più semplice e chiaro. Forse è troppo stretto, mettendo qualche immagine dovrai sicuramente allargare il div "main".Codice PHP:<img src="Immagini/Logo/Logo.jpg" height="126" align="absmiddle" border="0" />
-
3/11/2010, 12:41Loller156Quote:
Originariamente inviata da §¤PREISER¤§
Grazie per il border! dopo lo cambio ;)
Per le dimensioni sono circa 800*600 il div principale (all'incirca), però potrei allargarlo, anche se per come l'ho pensato dovrebbe starci tutto..stasera posto la parte con le immagini cosi vedi cosa ne pensi. -
3/11/2010, 14:00COMBAIN_90
nn è male dai :D
-
3/11/2010, 19:13UriGeller
Per prima cosa, i tag font non vanno usati, così come pure gli attributi height, border align eccetera. Nel web moderno, l'html è praticamente solo un tipo di xml, mentre tutta la formattazione va gestita da CSS.
-
3/11/2010, 19:43Loller156E qual'è il "vantaggio" reale? Molte cose le gestisco nel CSS, ma non ho mai fatto tutto da la...Quote:
Originariamente inviata da UriGeller
Per esempio, le immagini posso caricarle da CSS? Oppure come faccio a mettere gli attributi relativi a quell'immagine nel css?( height e align in quest caso ).
Non ho fatto "corsi" di html, ho solo frequentato la scuola per informatici ma non è cosi ampio il programma riguardante il web. -
3/11/2010, 20:55UriGellerVantaggi ce ne sono parecchi, soprattutto nel momento in cui vuoi apportare modifiche alla grafica senza cambiare la struttura, inoltre seguire gli standard è sempre un bene sul web, anche se non comportano vantaggi pratici.Quote:
Originariamente inviata da Loller156
Le immagini non si caricano da CSS (a parte gli sfondi). Per gli attributi, devi identificare le immagini (e gli altri componenti) con id e class. -
3/11/2010, 22:38§¤PREISER¤§
La logica del CSS non è semplice, nel senso che se sei abituato a pensare in html fai fatica ad abituarti al css. Però poi ti rendi conto che è molto più comodo, pratico e.. leggero! Sì, perché rendi le pagine più snelle.
Ho visto che usi i div, quindi significa che sei già un passo avanti (nell'HTML old-style lo scheletro delle pagine era costituito da una mega tabella).
Spiegarlo in due parole non è semplice. Immagina di avere tanti pagine html, come nel tuo caso. In ognuna delle pagine hai tanti tag e ogni tag ha degli attributi che ne modificano l'aspetto (l'allineamento del testo, lo spessore del bordo di una tabella, le dimensioni di un riquadro, il colore del testo di un paragrafo, etc..).
Se hai 100 pagine html, tutte con la stessa formattazione, e un giorno decidi che lo il carattere di ogni tag h1 dev'essere grassetto.. come fai? Il css serve a "centralizzare" gli stili (immagino che lo sai già, la mia è un'introduzione stile dummies).
Stai usando un software per creare il sito, giusto? Lui ha creato per te un foglio di stile e ha utilizzato dei tag compatibili con gli standard W3C. Purtoroppo però il sito non è realmente compatibile con questi standard..
Supponiamo di voler scrivere da zero un sito che usa CSS (tralasciando il discorso degli standard). Il linguaggio che userai sarà l'XHTML. I tag mono tag, come <img>, <input> etc.. dovranno essere scritti come <img attributi />, <input attributi />, ..
I nomi dei tag vanno scritti minuscoli, gli attributi minuscoli, il valore di ogni attributo dovrà essere tra doppi apici:
Per apportare modifiche all'aspetto visivo e strutturale, dovrai usare i css.Codice PHP:<img src="http://www.esempio.it/immagine.jpg" border="0" />
E' semplice. Ogni tag può avere un valore id o un valore class, o entrambi.
Ogni tag è l'istanza di un tipo di tag. Ad esempio, <h1></h1> è un'istanza del tag h1. Se vuoi che TUTTI i tag h1 abbiano il testo colorato di blu elettrico, nel file css dovrai semplicemente scrivere:
Se invece vuoi che un tag h1 abbia colore rosso e tutti gli altri blu, allora nel codice XHTML dovrai specificare che un tuo tag h1 è istanza di un particolare tipo di tag h1. In un'ottica di programmazione ad oggetti (che assomiglia a quella CSS solo per scuola di pensiero), vuoi specificare che un certo tag h1 erediti gli attributi del generico tag h1 e che si specializzi in qualcosa. In altre parole, vuoi che un certo tag h1 sia istanza di una classe da te definita. Scriverai:Codice PHP:h1{
color: #00f;
}
Supponiamo ora che vuoi che il secondo tag rosso abbia qualche particolarità, per cui lo vuoi allineare al centro. Allora gli dai un id, ossia lo identifichi univocamente chiamandolo, per esempio, "centrato".Codice PHP:/* Nel file .css */
h1{
color: #00f;
}
.rosso{
color: #f00;
}
/* Nel file .html */
<h1>Primo testo blu</h1>
<h1>Secondo testo blu</h1>
<h1 class="rosso">Primo testo rosso</h1>
<h1>Terzo testo blu</h1>
<h1 class="rosso">Secondo testo rosso</h1>
Immagine di avere quei tag h1 in tutte le pagine del tuo sito. Un giorno ti svegli e dici: voglio che tutti gli h1 diventino verdi, esclusi quelli rossi. Allora apri il tuo file .css e lo modifichi nel modo seguente:Codice PHP:/* Nel file .css */
h1{
color: #00f;
}
.rosso{
color: #f00;
}
#centrato{
text-align:center;
}
/* Nel file .html */
<h1>Primo testo blu</h1>
<h1>Secondo testo blu</h1>
<h1 class="rosso">Primo testo rosso</h1>
<h1>Terzo testo blu</h1>
<h1 id="centrato" class="rosso">Secondo testo rosso</h1>
E qui hai appena apportato una modifica al layout grafico SENZA toccare il file html :)Codice PHP:/* Nel file .css */
h1{
color: #0f0;
}
.rosso{
color: #f00;
}
#centrato{
text-align:center;
}
Immagina di avere 100 tag h1 in una pagina. E' sufficiente assegnarli un class e il gioco è fatto!
Nel caso dei div, ad esempio, hai un sacco di robe da impostare.. larghezza, altezza, margini, padding, sfondo, bordi etc.. Senza foglio di stile dovresti fare qualcosa del genere:
e capisci che la scomodità va a mille, soprattutto perché quel codice css non è riutilizzabile in altre parti del sito!Codice PHP:<div style="text-align:left; margin: 0px; border: 1px; padding: 5px; color:#fa3209; font-family:Verdana, Geneva, sans-serif; font-size: 10px;">ciao!</div>
Spero quindi di averti acceso la lampadina della curiosità, in modo che inizi a mettere mano a questo lato della programmazione web che, oggi come oggi, è indispensabile nella creazione di un sito web professionale.
Per quanto riguarda gli standard W3C, invece, vale quanto detto all'inizio sulle regole dell'xhtml, in più però devi specificare il doctype (essenzialmente l'insieme di regole usate nel tuo documento, che possono essere strict o transitional). Un esempio:
e la codifica usata:Codice PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Se vuoi iniziare a muoverti in questo mare di regole faresti bene a tenere sotto mano questo sito:Codice PHP:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
W3Schools Online Web Tutorials
è la bibbia della programmazione web :) -
3/11/2010, 22:49obo
concordo con i due maestri qui sopra!
-
3/11/2010, 22:56§¤PREISER¤§Per rispondere direttamente alla tua domanda:Quote:
Originariamente inviata da Loller156
- l'attributo src di un tag img è utilizzabile solo nel file xhtml, non nel css. Se vuoi creare un rettangolo che ha come sfondo un'immagine, allora usi <span></span> o <div></div>
- gli attributi di layout e grafica sono invece modificabili nel css. Perciò farai una cosa simile:
Codice PHP:/* Nel file .css */
#logoCentrato{
position:relative;
margin-left: 50%;
width: 328px;
height: 126px;
left: -164px;
border: none;
}
/* Nel file .html */
<div id="testata"><img id="logoCentrato" src="Immagini/Logo/RLecco.jpg" /></div>
PS: anziché avere 3 immagini, creane una sola. Rendi il codice più leggero e la dimensione finale non cambia molto perché lo sfondo è bianco. -
3/11/2010, 23:28Loller156
Grazie per la miniguida :D
i CSS li ho studiati, ma non avendoli mai usato una bella spolverata mi fa comodo...
soprattutto il #nome me l'ero dimenticato..ed è quello che mi serve :D
In questi giorni risistemo un po il css e le pagine, visto che alla fine è abbastanza poco da modificare.
- Attributi delle immagini
- Font
Queste le modifiche da fare al codice :D
L'immagine unica non posso farla perchè ognuna delle 3 immagini avra' un link differente, visto che dovremo linkare lo sponsor e un altro sito del lecco. :)
E invece consigli non di codice? di "immagine" del sito? :D -
4/11/2010, 11:59Loller156
Aggiornato!
- Modifiche di codice all'index e al sottomenu "calendario" in "serie C"
- Aggiunta una foto con relativa scheda giocatore al sottomenu "foto e video" in "serie C"
Ho un paio di problemi con le modifiche al codice e i css.
- Ho levato i font e ho messo un ID al div, ma si può notare un leggero cambiamento del menu principale ( non è la spaziatura anche se sembrerebbe ) tra una pagina qualunque e l'index (cliccate su un'altra pagina e poi sul logo per vedere i cambiamenti)
- Con IE viene tutto sconvolto...non viene come dovrebbe, mentre con Chrome e Firefox si vede giusto.
Avete qualche suggerimento? sia per i font che per IE.
La parte della scheda giocatore come vi sembra? ( tralasciando le scritte e la grafica, intendo l'idea di base ) Di sicuro aggiungerò una "freccina" in basso per andare al giocatore successivo o precedente. -
2/2/2011, 11:53Loller156
Ho finito il sito, o meglio.. l'ho messo online e nel frattempo lo modifico.
Cosa ne pensate?
Rugby Lecco
Consigli e critiche su qualunque cosa! Il sorgente è quello che è.. per quel che mi pagano è gia tanto che ho gli ho fatto questo.. -
4/2/2011, 11:58Paperoga
Non è male :D posso darti qualche consiglio tecnico?
-
4/2/2011, 12:23Loller156certo ^^Quote:
Originariamente inviata da Paperoga
-
4/2/2011, 12:36Paperoga
- ci sono un paio di cartelle che contengono degli spazi, e poi nell'url salta fuori del pastroccio (Rugby Lecco)
- se lo sfondo ha un colore fisso non usare un immagine :D
- ma sopratutto: evita il Comis Sans :lol:
ps: poi si incazza la parola Società ogni tanto. per fare la a accentata usa à -
4/2/2011, 12:48Loller156Quote:
Originariamente inviata da Paperoga
Gli spazi ci avevo pensato, ma avendo notato che non dava errori alla fine li avevo lasciati cosi! :D
L'immagine l'avevo messa nella prima versione, non ricordo nemmeno il perchè, e mi sono dimenticato di cambiarla, grazie ^^
Il comic sans per i titoli mi piaceva, nelle pagine lo odio ma nei menù non ci sta cosi male dai XD
Che carattere suggerisci? non ne conosco molti e di provarli non ho mai avuto tanta voglia! ^^
Sostituirò la A accentata, anche se usando il modo che mi hai suggerito ho notato che a volte si casta lo stesso!