Viagra online
www.flickr.com

Tutorial My Space

Durante l’Episodio 16 l’esperimento di realizzare una pagina MySpace in diretta non è stato un gran successo. Per fortuna c’era la musica a salvarci! (Tra l’altro se qualcuno ha ascoltato solamente quell’episodio.. datemi un’altra possibilità 🙂 e sceglietevi un’altra puntata da ascoltare. Tanta buona musica gratis per voi ogni settimana sulla sezione podcast!).
Per non lasciarvi comunque a bocca asciutta, ho preparato questo tutorial che raccoglie tutte le mie esperienze nella realizzazione della pagina MySpace per il Nissardo, che potete trovare all’indirizzo www.myspace.com/ilnissardo.

Requisiti di base per una pagina MySpace: conoscenza di HTML e di CSS. Se non li avete, non scoraggiatevi.. non capirete tutto questo tutorial ma potete seguire alcuni link che vi permetteranno comunque di ottenere qualcosa di simpatico.

Partiamo da un concetto che dovete capire: il layout di una pagina mySpace è una delle cose più difficili da maneggiare che io abbia mai visto.

Se volete provare a fare una pagina MySpace in stile Web2.0, in bocca al lupo, secondo me è impossibile.

Tutta la struttura è basata su tabelle innestate, e quasi nessuna di queste è un id o una classe. Il CSS da usare quindi deve lavorare direttamente sugli elementi a livello di blocco (esempio table, table table etc.)
Questo approccio è estremamente poco flessibile, visto che non è detto che una parte della pagina possa essere referenziata univocamente con questa sintassi: se ci sono due table entrambe annidate dentro ad un’altra table, non riuscirete a cambiare l’aspetto di una lasciando inalterata l’altra.

PREMESSA IMPORTANTE: nel codice di questa pagina ho inserito i tag style per il codice CSS. come < style> e < / style > ovviamente quando li usate nel vostro codice dovete rimuovere gli spazi che non sono necessari.

Per capire meglio la struttura di una pagina MySpace possiamo procedere così:
– create il vostro account (ATTENZIONE: ci sono due tipi di account diversi in MySpace. Se siete dei musicisti dovete crearvi il vostro account nella sezione musica)
– andate sul pannello di controllo e seguite “Modifica Profilo”
– sulla parte “Chi sono” (o in inglese “About Me”) copiate questo codice (gentilmente preso da Implied By Design)


< style>
table {
border:0px;
}
table td {
border:0px;
}
table table {
border:0px;
}
table table td {
border:0px;
}
table table table {
border:0px;
}
table table table td {
border:0px;
}
table table table table {
border:0px;
}
table table table table td {
border:0px;
}
table table table table table {
border:0px;
}
table table table table table td {
border:0px;
}
table table table table table table {
border:0px;
}
table table table table table table td {
border:0px;
}
< / style >

– salvate e visualizzate il vostro profilo, vedrete pochi o nessun cambiamento. E’ normale. Quello che abbiamo fatto è mettere il bordo a 0 per tutti gli elementi.
– adesso iniziate a scegliere un elemento che volete visualizzare, per esempio vogliamo vedere quali sono gli elementi della pagina identificati da table table table table table table td, basta semplicemente modificare il codice relativo per visualizzare il bordo:
table table table table table table td {
border:10px solid red;
}

– salvando e visualizzando di nuovo il profilo si vede quali parti della pagina sono racchiuse dentro questa tabella (innestata dentro sei altre tabelle… non avevo mai visto una cosa del genere).
– potete divertirvi a visualizzare tutte le tabelle con bordi e colori diversi, ma vedrete ben presto che con 3 o 4 bordi attivi il tutto diverrà un casino (volevo farvi una pic. ma c’ho rinunciato).

Se al codice precendente aggiungete anche la parte relativa al body, avete più o meno tutti gli elementi che costituiscono una pagina MySpace, e potete divertirvi a crearvi il vostro layout da zero (in bocca al lupo!).

In realtà non sono proprio tutti.. quelli di MySpace sono stati tanto gentili da lasciarci anche qualche classe specifica, in particolare per alcuni elementi span, potete trovarli andando a visualizzare il codice sorgente della pagina con firefox, troverete classi tipo span.blacktext12, span.whitetext12, ctl00_Header_Header1_Div1 (questo mi fa impazzire! va be lasciamo stare… non voglio sembrare ipercritico).

Un ulteriore aiuto che ci hanno dato è l’identificare la contact table, con la classe (o id non ricordo) .contacttable.

Ma torniamo seri.. nessuno si può mettere giù a maneggiare questi elementi da 0, a meno che non siate dei masochisti o abbiate tanto tempo da perdere.

Per fortuna ci vengono in aiuto alcuni siti che semplificano un po il lavoro.

Potete scegliere due approcci:

  • Prendere un layout già fatto, scegliendo tra alcuni disponibili in rete.
  • Usare uno dei tanti online editor per crearvi un layout semplice semplice da poter usare.

Ecco una lista di siti che forniscono profili, generatori di codice e editor per i profili. Ce n’è per tutti i gusti!

Io personalmente ho seguito il secondo approccio, usando un editor on line mi sono creato una specie di canovaccio e su questo ho iniziato a lavorare per modificare alcune cose.

Passiamo ora ad alcune note su come modificare quello che avete appena creato (che sia un layout già fatto oppure il risultato di un editor).
Per prima cosa armatevi di un buon editor di testo, io mi trovo molto bene con Notepad++, e invece di incollare subito il layout che vi siete presi o generati sul profilo mySpace, mettetelo su un file locale.
Sarà cosi molto più facile cercare le parti da modificare e incollare nuovo codice.
Visto che ci siete, armatevi anche dell’estensione View Format per Firefox, vi aiuterà tantissimo durante tutto il processo!
In oltre potrete cosi salvarvi una copia locale della vostra pagina, che non fa mai male.

Prendetevi il tempo di formattare il codice inserito in maniera da poterlo capire facilmente. Questo è molto importante, non pensate che state perdendo tempo, è tutto tempo che guadagnerete in seguito!Adesso potete iniziare ad aggiustare le parti che ancora non vi piacciono. Una delle prime cose che ho fatto io è stato modificare il padding di alcune tabelle perché di default l’editor che ho usato mette il padding a 0.

Ricordatevi sempre la regola per individuare la parte che volete modificare, usate il codice che vi ho mostrato all’inizio del tutorial e settate il colore e lo spessore del bordo.

Ma diciamoci la verità, anche cosi non tutti sono in grado di aggiungere quelle cose carine che si vedono su tante pagine mySpace, tipo un banner sopra la pubblicità, oppure nascondere alcune parti del layout che non desideriamo (tipo “pinco pallino si trova sulla rete estesa”): ci vengono ancora in aiuto delle applicazioni on line che generano il codice che ci serve. Date un’occhiata qui: potete trovare dei generatori di codice per quasi tutto quello che vi puo servire.

Prendiamone uno giusto per capire cosa genera: Hide Extended Network.

Il risultato è una cosa del genere:
< style>

.blacktext12 {display:none;}
td.text table, td.text td {border:0px; height:0px;}

div.layoutbutton{
width:145px;
border:1px solid white;
position:fixed;
_position:absolute;
top: 20px;
right: 5px;
}
div.layoutbutton a{
background-image:url(http://www.mywackospace.com/images/p.png);
width:100%;
height:21px;
color:rgb(255,255,255);
font:bold 11px arial,sans-serif;
display:block;
text-decoration:none;
line-height:19px;
}
< / style >

ATTENZIONE ATTENZIONE! Tutto sto codice per far sparire una scritta? Un po esagerato no? Infatti, solamente una parte vi serve veramente, quella iniziale:

.blacktext12 {display:none;}
td.text table, td.text td {border:0px; height:0px;}

tutto il resto sono banner e link pubblicitari aggiunti dall’applicazione on line (non ho letto le condizioni d’uso di questi siti visto che io li ho usati solo come referenza, ma diciamo che tutto il resto si può togliere 😉 )

Ora potete aggiungere questo codice al vostro layout sempre dentro l’editor di testo. Dove? dove volete. L’importante che sia racchiuso tra due tag style. Potete semplicemente aggiungerlo alla fine del layout che già avete, esattamente prima del tag style di chiusura (per chi non lo sapesse è ).

Adesso vorrete provare il tutto, giusto? Ok ci sono due possibilità, la prima è usare direttamente la vostra pagina MySpace: andate nel vostro pannello di controllo e modificate il profilo. Adesso nella parte “About Me” copiate il contenuto del vostro editor e salvate.
Basta accedere alla vostra pagina per vedere il risultato delle vostre modifiche.

Però.. questo è un po scomodo, soprattutto se volete fare modifiche ad una pagina che è già on-line da un po e magari riceve diversi visitatori al giorno.. non vorrete che i vostri visitatori vedano le vostre prove giusto?
Vi viene ancora incontro un’applicazione web (sempre dallo stesso sito, ma ce ne sono miliardi la fuori) che altro non è che un Layout Previewer. Voi incollate il vostro codice e cliccate su preview, dovreste cosi rendervi conto del risultato.
ATTENZIONE: questo metodo non è troppo affidabile nel caso voi inseriate dei DIV a mano, visto che il previewer a sua volta inserisce dei div per la pubblicità. Ma è molto efficace per tutti gli altri casi.


Di trucchetti ne ho trovati tanti, se navigate il sito che vi ho consigliato, che anche se non l’ho scritto fino ad ora, si chiama www.mywackospace.com, troverete tanti di quei generatori di codice da farvi venire il mal di testa.

Il codice generato va quasi sempre inserito nella parte “About Me” del profilo, tranne alcune rare eccezioni, quindi leggete sempre bene prima.

Mi raccomando, non lavorate direttamente sul profilo MySpace, usate sempre un editor in locale formattando sempre bene il codice che aggiungete, altrimenti dopo un po ci perderete la testa!

Per quanto riguarda invece il contenuto vero e proprio, cioè il testo che vi descrive, basta semplicemente aggiungerlo nel file del profilo, stando attenti a non metterlo dentro ai tag di style. Questo è codice HTML quindi potete usare tutti i costrutti che il linguaggio vi mette a disposizione (per quelli di voi che non conoscono l’HTML, non vi preoccupate, leggete sotto).

Vi segnalo ancora qualche generator che vi può essere veramente utile:

  • Top Image vi permette di mettere un’immagine in testa alla pagina MySpce, prima ancora del banner pubblicitario. ATTENZIONE: questa usa i DIV quindi ricordatevi quanto detto prima, la preview non dice il vero in questo caso.
  • Contact Table vi permette di generare una tavola per i contatti con un’immagine vostra (se non mi sbaglio qui dovete anche fare un trucco per far sparire il testo che MySpace mette di default. Basta aggiungere qualcosa come .contacttable .text {font-size: 0px !important;})
  • Extended Network Banner
  • E per finire un piccolo Text Editor che vi può aiutare a generare il formato di testo che volete anche se non sapete un h di html e css

Ancora un consiglio, ogni volta che usate un generatore, non copiate direttamente il risultato nel vostro profilo, aprite un altro file col vostro editor, copiateci dentro il risultato e formattatelo, quindi cercate di capirlo. Una volta che avete eliminato tutte le cose che non vi servono (tipo pubblicità e link vari) fate un copia incolla sull’altra finestra dell’editor dove avete il vostro profilo completo.

Se invece volete aggiungere del testo o degli oggetti embedded (tipo una mappa per i contatti che potete prendere qui, oppure un RSS player per il vostro podcast) potete semplicemente aggiungerla al vostro profilo (stesso file di prima) ma senza metterla tra i tag di style, proprio come fareste con del testo normale. In fondo state comunque editando una pagina HTML….

Per finire, altri siti che vi possono aiutare a modificare il vostro layout:

Oltre alla lista di siti che forniscono profili, generatori di codice e editor per i profili che vi ho già segnalato in precedenza.

E mi raccomando.. quando avete finito di realizzare il vostro spazio.. venite a trovarmi e (se vi va) aggiungetevi ai miei amici!

ATTENZIONE: ho chiuso i commenti a tutte le sezioni myspace per evitare che il blog diventasse troppo pesante a leggersi. Se avete richieste, dubbi, domande potete usare la sezione MySpace del forum. GRAZIE!

184 risposte a “Tutorial My Space”

ilnissardo ha scritto un commento il gennaio 16, 2008

Ciao Pezz.
in generale non puoi eliminare delle tabelle, visto che queste sono definite dal codice di MySpace. L’unica cosa che puoi fare è nasconderle, che poi credo sia il trucchetto a cui ti riferisci. Potresti anche pensare di metterci qualcosa sopra, un banner, un immagine, una scritta…
Nella mia pagina myspace per esempio l’URL non è visibile.

A presto!

Roberto ha scritto un commento il febbraio 3, 2008

Io volevo sapere se tt il tutorial serve a rendere le tabelle + larghe…Prima di dimentermi a farlo 😉

Ilaria ha scritto un commento il febbraio 4, 2008

Ciao IlNissandro, tramite ricerca su google sono arrivata al tuo sito, molto utile, e in particolare mi riferisco a questo tuo commento:

“… nel mentre ero andato a rivedere il mio layout visto che anch’io ho messo una dimensione fissa per i commenti. Questo spero aiuti anche lele che mi ha contattato su mySpace.

Il codice che ho usato io è questo (sempre tra i tag di style)

td.text td.text table table table td a img {width:100px;}
td.text td.text table table table td div img {width:80px;}
td.text td.text table table td img {width:260px; max-width:260px; width:auto;}
td.text td.text table table td div img {width:80px;}
* html td.text td.text table table td img {width:260px;}
* html td.text td.text table table td a img {width:90px;}
* html td.text td.text table table td div img {width:80px;}

Ho controllato il mio codice è coincide perfettamente, ma non so perchè il problema c’è sempre, non so proprio come fare.

ilnissardo ha scritto un commento il febbraio 4, 2008

@Roberto: diciamo che questo tutorial dovrebbe darti un idea di base su come una pagina myspace e` strutturata e su come affrontare delle modifiche di base al tuo profilo. Non ci sono tutte le risposte gia` scritte, non era il mio scopo, ma diciamo che e` una base per poi fare quello che vuoi.

@Ilaria: difficile dirti quale potrebbe essere il problema, se magari mi contatti via mail posso provare a darti una mano: ilnissardo chiocciola gmail.com

This blog is protected by dr Dave\'s Spam Karma 2: 147257 Spams eaten and counting...