Come aprire il proprio sito di Poker Online

Iniziamo dal nome di dominio per il tuo sito di Poker

Per questo esempio ci dedicheremo a creare un nuovo sito basandoci su un brand (marchio) pre-esistente e abbiamo scelto Everest Poker proposto da United Partner Program percui lo scopo iniziale è quello di implementarlo nel nostro sito in modo da simulare un nuovo marchio basato su quello pre-esistente Everest Poker appunto percui la scelta del dominio è "caduta" suwww.pokermaniaeverest.com come questo sono possibili ulteriori nomi adatti allo scopo, tieni comunque presente il concetto di "fusione del marchio" quindi aggiungi qualcosa ad un marchio già esistente per crearne uno nuovo, nel nostro esempio infatti ci sarà Pokermania che presenta il "proprio" Poker ovvero Everest Poker.

Immagini e materiale da usare nel tuo sito

Per iniziare ti consiglio intanto di affiliarti ad United Partner Program poi, entrando nel loro pannello di controllo hai la possibilità di prelevare delle grafiche già pronte entra nella sezione "banner" e guarda tra quelli 728X90, l'idea è quella di usarne 1 da inserire nello spazio superiore. La nostra scelta è stata il banner che vedi qui. Altre immagini sono da ricercare in vari siti, alcuni danno delle belle immagini anche gratuitamente oppure puoi decidere di cercare delle immagini direttamente su Google e digitanto chiavi attinenti come Poker, tavoli da Poker, tornei di Poker e scegliere le immagini che si reputano coerenti al proprio progetto, attenzione a non utilizzare immagini private o protette da copyright!

Per il progetto che ci apprestiamo a realizzare abbiamo utilizzato delle immagini senza copyright e da immagini prelevate dal sito originale.

Primo passo, il progetto grafico con Photoshop

Il progetto grafico può essere effettuato sia con Photoshop sia con altri programmi di editing di immagini o fotoritocco, per questo esempio abbiamo comunque utilizzato Photoshop. Apriamo il programma di editing di immagine preferito e apriamo un progetto da 1000px di larghezza e diciamo 800px di altezza e importiamo il banner 728x90, dal banner che abbiamo utilizzato decidiamo di estrapolare quello che poi sarà lo sfondo a tutto il sito, per l'occasione abbiamo preso delle linee diagonali percui basta creare una selezione attorno alla zona con le diagonali (ingrandisci l'immagine per comodità) e selezionare dal menu "Modifica" di Photoshop il comando "definisci partner".

A questo punto nello sfondo in cui abbiamo precedentemente inserito il banner andiamo sul livello di sfondo e sempre dal menu "Modifica" scegli riempi, scegli il pattern appena creato e fai ok

poi inserisci il banner al centro crea delle linee guida ai bordi estremi del banner, il risultato diverrà il seguente:

Ora continuo inserendo un tema bicolore per il corpo del sito, qui abbiamo scelto di mettere il menu a destra e i contenuti a sinistra nello spazio bianco, per ottenere la curva abbiamo usato lo strumento selezione cerchio e raddrizzato con ulteriori selezioni ai lati per le zone dritte.

Nelle 2 zone (bianca e rossa) abbiamo aggiunto delle immagini da utilizzare come sfondo, abbiamo utilizzato una donna ad un tavolo da usare nella zona rossa e una serie di carte per la zona bianca, fai attenzione di ritagliare le immagini in modo che non sbordino dai limiti dei colori, il risultato potrebbe essere una cosa simile a questa:

A questo punto decidiamo di aggiungere un ulteriore barra subito sotto il banner originale, per fare questa barra creiamo intanto lo spazio spostando in basso tutto quello che è presente sotto il banner quindi lo spazio bianco, il rosso e il verde con tutte le immagini che sono state fuse, dallo spazio risultante faccio una selezione per tutta la larghezza del banner e come altezza una quarantina di pixel. A questa selezione do il comando "arrotonda" che si trova in Selezione/Modifica/arrotonda e diamo il valore di 18, proseguiamo con ok.

siccome arrotondando si ottiene di arrotondare anche il basso (cosa che non vogliamo) aggiungo il pezzo mancante in basso (ottenuto dall'arrotondamento) quindi con lo strumento selezione mi appresto ad aggiungere una selezione premendo il tasto SHIFT (apparirà il cursore con +) la selezione deve partire dai limiti estremi destra-sinistra:

la quale diverrà come nell'esempio

Ora inserendo la nuova barra nel progetto o inserendola nel giusto punto nel caso tu sia rimasto sul file originale con seguente risultato:

Ok ora dobbiamo prendere nel sito originale degli elementi grafici come questi:

da utilizzare nello spazio verde in basso e nello spazio ancora più giù.

A questo punto dobbiamo ritagliare le grafiche per poi usarle nel nostro editor HTML. Per tagliare con precisione le grafiche utilizza lo strumento zoom fino a vedere bene i dettagli e crea una selezione che copra tutta la zona compresa tra le linee guida che ci accingiamo a ritagliare

La barra orizzontale per intero vedi file da salvare necessariamente in gif con fondo trasparente
La cella grande dei contenuti principali fino alla prima linea guida vedi file
La cella risultante con il menu vedi file

Editing HTML per realizzare il tuo sito di Poker online

E' ora di aprire l'editor HTML preferito, per questo esempio abbiamo utilizzato un semplice Frontpage e un foglio di stile css. Il seguente esempio non vuole essere una referenza sull'utilizzo di Frontpage ma il programma verrà utilizzato solo nelle funzioni basilari, Il foglio di stile appena citato lo vedremo alla fine ora concentriamoci sull'apertura di Frontpage nel proprio sito (abilitato a Frontpage) bene, apri il programma e apri un sito web, come indirizzo inserisci il tuo sito (nel nostro esempio il sito di Poker Texaswww.pokermaniaeverest.com ) e invia la richiesta, ti verranno richiesti i dati di accesso username e password con i quali avrai i permessi di accesso e modifica sul tuo sito web.

Una volta acceduto al tuo server apri una nuova pagina su Frontpage e crea una tabella larga 700px allineata al centro e contenente 6 righe e 2 colonne, appena creata la tabella dovrai fondere "merge" le celle 1, 2, 3, 5 e 6 tralasciando la riga 4 che ospiterà i contenuti principali del sito e il menu di navigazione verticale.

Per unire le righe basta che evidenzi le 2 colonne della riga che vuoi modificare e premere il tasto destro del mouse, tra i parametri vedrai la funzione "merge cells" o "unisci celle" bene unisci ognuna delle celle sopra elencate, il risultato finale dovrebbe rispettare il seguente schema:

Prima di continuare e di settare gli attributi per ogni riga e cella dobbiamo dire al codice di leggere gli attributi in una specificata posizione, per fare questo aggiungiamo un codice html all'interno della zona "head" quindi nel tuo Frontpage utilizza la funzione per visualizzare sia il design sia il codice generato (split) guarda nel codice all'inizio e troverai la sezione head che è compresa tra il tag <head> e </head> proprio prima della chiusura </head> aggiungiamo il seguente codice:

inserendo questo codice si dice di guardare nella posizione www.sito.com/css/ e cercare il file chiamato css.css percui ora dobbiamo creare tale file in quella specifica posizione percui sempre tramite Frontpage guarda sulla barra verticale a sinistra "Folder list" e aggiungi una cartella e chiamala "css" se vuoi puoi decidere di chiamarla anche in un altro modo basta che poi l'indirizzo specificato nel tag venga modificato di conseguenza.

Dentro a quella cartella inseriamo un file di testo che chiami css.css per il momento lascialo vuoto, per fare l'upload del file puoi usare lo stesso Frontpage oppure un qualsiasi programma di FTP, prova Smart FTP che è gratuito e va benissimo! vedi qui ulteriori informazioni sulprogrammi ftp

Nel nostro esempio questo file è stato messo nella posizionehttp://www.pokermaniaeverest.com/css/css.css

Inserimento attributi alle celle e alle righe della tabella

Per inserire le caratteristiche di ogni riga e cella della nostra pagina "stampo" utilizziamo le classi che si baseranno sulle impostazioni che noi inseriremo nel file css.css quindi iniziamo con il body.

In Frontpage visualizza il codice html e localizza il tag <body> ora, a questo punto diremo al codice di dare al body le caratteristiche che defineremo poi nel file css, per fare questo modifica a mano il tag body il quale deve risultare come segue:

In questo modo tutto il corpo della pagina avrà le caratteristiche della classe "bodyok".

Riga 1: non ha alcuna classe, in quella posizione inseriremo il titolo della pagina stessa.
La riga 2: Qui andrà inserito il banner ORIGINALE quello che avevamo usato per ricavare la prima grafica. Oltre a ciò specifichiamo anche la classe "banner" quindi il codice corrispondente diverrà <td class="banner" colspan="2">
Riga 3: Nella riga 3 verrà visualizzata la barre orizzontale, anche questa riga deve avere una classe (barra) quindi modifichiamo anche questa riga come segue. <td class="barra" colspan="2">
Riga 4 (2 celle): questa riga è composta da 2 celle, la prima quella più grande dove andranno inseriti i contenuti principali in cui dovrai settare la classe "fondocompleto" <td class="fondocompleto" > e la seconda dove andrà a visualizzarsi la colonna del menu verticale, <td class="latcompleto" >. Le dimensioni delle 2 celle verranno settate dal file css.
Riga 5: in questa riga andrà posizionata un ulteriore tabella per inserire le grafiche ai lati con i link nello spazio centrale. Per questa riga settiamo la classe "barrafinale" quindi <td class="barrafinale" >
Riga 6: questa riga non necessita di classi, qui verra inserita un ulteriore tabella dove inseriremo le immagini finali e un testo di privacy.

Ora, nello spazio laterale inserisco un menu con dei links inseriti in un elenco puntato tipo quello qui sopra per le varie righe del template... riga 1, riga 2 ecc... nella nostra prova abbiamo inserito:

Chi siamo
Come giocare
Regole del Poker
Tornei di Poker
Promozioni

Inoltre nello spazio dedicato alla barra orizzontale inserisco altri links in orizzontale i quali sono:

Poker: questo è il collegamento alla homepage
Scarica Poker: da qui si può inserire il collegamento diretto per scaricare il software, per trovare il tuo codice guarda all'interno di United Partner Program e trova il tuo url per la promozione di Everest Poker
Tornei: questo è lo stesso link di "tornei di Poker"
Regole del Poker: stesso link di regole del Poker
Giocare con noi: stesso link di "come giocare"
Promozioni: stesso link di Promozioni

Alla fine, nella penultima riga inserisci una tabelle larga al 90% con 1 riga e 3 colonne, nelle 2 celle laterali inseriamo le 2 immagini che vedi nell'esempio, al centro nella cella più larga (se non è larga basta trascinare i lati della cella centrale e allargarla finche le celle che ospitano le grafiche sono ridotte al minimo), nello spazio centrale inseriamo 3 links:

Sicurezza
Privacy
Links

anche in questo caso i colori del testo e dei links sarà specificato nel file css.css.

Alla fine di tutto nell'ultima cella è stata aggiunta una nuova tabella in cui ho posizionato le ultime grafiche inerenti alla sicurezza, sempre prese dal sito originale e un testo di privacy preso anche questo dal sito originale da inserire nello spazio centrale più largo.

A questo punto quella che puo' definirsi la base è quasi pronta, ora dobbiamo pensare al file css e al suo posizionamento nel sito, dentro alla nostra root principale che in questo esempio è il solito sito di Poker Texas www.pokermanieverest.com apriamo una nuova cartelle che chiamiamo "css" (se non fatta precedentemente), ora apriamo un foglio (notepad o blocco note) e inseriamo le varie classi, giusto per capire il tutto funziona cosi'

.nomeclasse { istruzioni per questa classe }

tutto quello che è tra le parentesi graffe {} sono le istruzioni per quella classe stessa, ecco di seguito il codice completo per il css:

Incolla il codice che vedi quiwww.pokermaniaeverest.com/css/css.css salvalo nel tuo server dentro alla cartella "css"

Ora per porvare salviamo la pagina dentro al nostro server e la chiamiamo esperimento.htm

Per ragioni di praticità è meglio settare immediatamente il nome di tutte le pagine principali presenti nel sito, in questo modo si possono inserire i link subito a tutte altrimenti sarebbe necessario ritornare più volte per aggiornare il link ad ogni aggiunta di pagina.
Oltre a questo per ogni sezione principale la apro una cartella nella root in modo da aver praticità nell'aggiungere i contenuti suddividendo il lavoro per sezione.

La pagine principali da aggiungere sono:

http://www.pokermaniaeverest.com/index.htm

il secondo serve a collegare al software direttamente

Le pagine, le cartelle (sezioni) e il nome delle pagine che abbiamo usato sono le seguenti:

Percui assicurati che ogni link della tua pagina di prova sia diretto ad una specifica cartella/file ovviamente devi aprire ogni cartella come hai fatto per la cartella "css", crea le seguenti cartelle oppure segli altri nomi che ti sembrano adeguati:

Tornei
Regole
Gioca
Promozioni
Informazioni
Policy
Partners o links

In ognuna di queste cartelle crea il rispettivo file principale poi, successivamente in ogni sezione aggiungerai le ulteriori pagine, il fatto di avere le pagine suddivise ti dà maggior chiarezza e facilità di modifica.

Ora che abbiamo il nostro "stampo" (template) pronto risalviamo la pagina esperimento.htm e poi la salviamo di volta in volta con il nome delle varie pagine inserendo le stesse all'interno delle varie categorie, percui la pagina esperimento.htm la nomini la prima volta "tornei-poker-italia.htm e la inserisci dentro la cartella "tornei", poi, riapri la pagina esperimento.htm e la risalvi "con nome" chiamandola "regole-poker-holdem.htm" e inserendola dentro alla cartella "regole" ecc... fai lo stesso per tutti i link del template.

Fatto questo avrai ottenuto che tutti i links presenti nelle varie pagine ti porteranno da una parte all'altra, ricorda che la tua pagina principale è la pagina "index.htm"

Inserimento dei contenuti

Ora è il momento di aggiungere i contenuti. Iniziamo per ordine di importanza

index.htm

Apri quella che è la home page. Nello spazio dedicato ai contenuti abbiamo inserito una nuova tabella in cui abbiamo inserito 2 immagini; il tavolo da gioco e un banner promozionale per un torneo importante che alla fine linkerà alla pagina dove lo stesso torneo è descritto ma per iniziare lasciarlo senza link.

In questa tabella formata da 1 riga e 2 colonne abbiamo inserito un testo introduttivo e l'immagine del tavolo, nella seconda cella un altro breve testo e il banner del torneo, entrambe le grafiche sono state prese all'interno del sito originale. Nell'esempio la tabella non è troppo larga ed è allineata a sinistra.

Dopo questa tabella è stato inserito uno spazio (invio) ed è stata inserita una nuova tabella con 1 riga e 2 colonne, nella prima cella è stato inserito un pulsante con link diretto al software (nel nostro server) subito sotto un altro testo promozionale ed un elenco.

Nell'altra cella ho inserito un ennesimo testo promozionale per il bonus da 100$

Subito sotto al menu laterale è stato inserita un immagine a tema che in questo esempio linka ad un altro casino. Bene, la tua homepage è pronta, ora è il momento di copiare i contenuti del sito principale e di inserirli all'interno delle pagine del nostro sito.

Completare il sito con tutti i contenuti

Ora seguendo quelle che sono le pagine principali del sito originale ricopiamo i contenuti e inseriamoli nelle varie pagine del sito.

Facciamo l'esempio in una pagina e poi ripetiamo la procedura per copiare tutte le altre

http://www.pokermaniaeverest.com/regole/regole-poker-holdem.htm

La pagina originale è

http://www.everest-poker.com/it/rules/games/

ora vai nella pagina originale, evidenzia tutta la pagina e clicca il bottone destro del mouse e fai copia (oppure CTRL + C)

Apri in Frontpage la corrispondente pagina ma non incollare il contenuto direttamente nello spazio apposito,

Frontpage copia anche tutte la fomrattazione compreso di tabelle ecc percui è necessario ripulire il codice ed estrapolare solo quello che ci interessa ma facendo in modo da mantenere le immagini i colori ecc... per fare questo su Frontpage vai alla fine della pagina che stiamo modificando e dopo il tuo "stampo" premi qualche invio a capo e premi il tasto destro del mouse quindi scegli "incolla" (oppure CTRL+V) in questo modo vedrai che la nuova cella con i contenuti sarà creata subito sotto

da li evidenzia il solo testo presente nella cella appena creata clicca e trascinalo nello spazio per i contenuti della tua pagina "regole-poker-holdem.htm"

una volta inserito i contenuti si vedrà che gli stessi sono stati inseriti in modo quasi ottimale, ora a mano diamo un aggiustata ai testi modificandonle il colore, la dimensione i grassetti ecc... ora cancella i residui rimasti dalla tabella in cui erano presenti i contenuti che ora sono nel corpo della pagina, salva la pagina, la tua pagina è pronta.

Esegui le stesse procedure estrapolando i contenuti dal sito originale e inserendoli di volta in volta in tutte le pagine principali.

Vedi come si visualizza la pagina

http://www.pokermaniaeverest.com/esperimento.htm

Vedi come diviene una volta aggiustata a mano

http://www.pokermaniaeverest.com/regole/regole-poker-holdem.htm

Una volta eseguito l'operazione in tutte le pagine principali è il momento di inserire le pagine secondarie in ogni sezione principale.

Per fare questo abbiamo pensato che nella barra orizzontale puoi inserire un "SHIFT +invio a capo" quindi vai alla fine del meno orizzontale "Promozioni" posizioni il cursore alla fine, premi SHIFT e tenendolo premuto dai invio a capo cosi facendo si ottiene una nuova riga centrata in cui si possono inserire i link alle ulteriori pagine della sezione stessa, cordati che per ogni link "secondario" devi dare la classe "submenu" <a href="... diviene <a class="submenu" href="...man a mano che dovrai fare una nuova pagina prendi il tuo esperimento.htm e salvalo nell'apposita sezione rinominandolo secondo le tue idee ed esegui la stessa procedura fatta per le pagine iniziali.

Il tuo sito è pronto.

Nell'esempio che vedi online per il sito di Poker www.pokermaniaeverest.com siamo andati oltre, subito dopo il banner orizzontale abbiamo inserito un immagine unica comprendente tutte le bandierine, ad ogni bandierina è stato dato il link alla corrispondente sezione.

ra si puo' decidere di proseguire in più modi, o si fanno le altre lingue all'interno dello stesso sito, meglio se in una sub cartella oppure si può pensare di creare un nuovo dominio per ogni lingua a cui siamo interessati, per quelle in cui non abbiamo la necessità di sviluppare le pagine possiamo decidere di inserire il link diretto ad Everest Poker inserendo ovviamente il proprio codice di referenza.

Nel nostro esempio abbiamo optato per creare un sub-dominio per ogni lingua (tutte) tipowww.play.pokermaniaeverest.com che è il link per la versione inglese, anche per le versioni di tutte le lingue abbiamo eseguito gli stessi procedimenti fatti per la sezione in italiano. Per le lingue che non sono state sviluppate abbiamo inserito all'interno dello spazio web di ogni sotto dominio un file index con un Iframe (frame interno), il frame interno servirebbe a far visualizzare il sito in una porzione di pagina ma siccome il sito è programmato per non restare in una porzione ma a tutta pagina questa fa semplicemente vedere il testo "translating webpage" e appena il casino verrà caricato resterà a pieno schermo ma con il tuo refer percui l'effetto globale è quello di mandare il giocatore direttamente sul sito originale.

Per tutte le lingue in cui si vuole creare le pagine e inserire i testi come detto in precedenza si dovrà eseguire lo stesso lavoro fatto per la prima lingua.

Tieni presenti che è sempre bene aver quante più pagine possibile (non duplicate) e meglio ancora averle in più lingue percui potrebbe essere una buona cosa copiare i testi di tutte le lingue in modo da creare un sito completo.

Buon lavoro!!!!

Trucchi Web Italia

sabato 17 marzo 2012