PW Blog

Web design, web development e seo

Per inserire un’immagine come sfondo è sufficiente utilizzare la seguente sintassi:

Per ora presupponiamo che l’immagine di sfondo si trovi nella stessa cartella della nostra pagina HTML, vedremo in seguito (quando parleremo delle immagini) come inserire immagini che si trovano in altre cartelle.

L’immagine di sfondo verrà ripetuta in orizzontale e in verticale.

È anche possibile combinare i due attributi, in modo che mentre l’immagine di sfondo viene caricata, venga comunque visualizzata una colorazione della pagina:

Ecco subito un esempio di pagina impostata con lo sfondo.

È importante assegnare sempre un colore alla pagina anche quando lo sfondo della pagina è bianco (al massimo assegnare bgcolor=”#FFFFFF”). Infatti, come impostazione predefinita, il browser assegna alla pagina il colore di sfondo che l’utente ha impostato nella finestra del sistema operativo: quindi se l’utente ha impostato uno sfondo nero e voi non avete assegnato nessun colore di sfondo alla pagina, la vostra pagina sarà nera.

Link del Forum
clicca qui per visuaizzare la lezione

Per qualsiasi domanda vai su Forum PW

Incominciamo col vedere come ottenere la nostra prima pagina HTML nel modo in cui desideriamo visualizzarla.

Se vogliamo impostare un colore di sfondo è necessario impostare il relativo attributo del tag body. Così:

bgcolor sta per “background color”, cioè “colore di sfondo”. Molti colori sono disponibili utilizzando le corrispondenti parole chiave in inglese.

Qui potete trovare un esempio della pagina con lo sfondo blu

Tuttavia non è consigliabile inserire la notazione del colore facendo riferimento a questo tipo di sintassi, dal momento che non possiamo sapere esattamente a quale tonalità di colore corrisponda il blu del computer dell’utente. È preferibile in molti casi utilizzare la corrispondente codifica esadecimale del colore, che ci permette – tra le altre cose – di scegliere anche tonalità di colore non standard. Con la notazione esadecimale il nostro esempio diventa:

Ecco una tabella con la notazione di alcuni colori (molti di essi sono disponibili anche nelle varianti “dark” e “light”, ad esempio: “darkblue”, “lightblue”):
colore
parola chiave
notazione esadecimale

arancione
orange
#FFA500

blu
blue
#0000FF

bianco
white
#FFFFFF

giallo
yellow
#FFFF00

grigio
gray
#808080

marrone
brown
#A52A2A

nero
black
#000000

rosso
red
#FF0000

verde
green
#008000

viola
violet
#EE82EE

Il numero di colori che l’utente ha a disposizione dipende dalla scheda video. Oggi si va da una risoluzione minima di 256 colori a una risoluzione che prevede svariati milioni di colori.

Per capire di cosa stiamo parlando, provate a visualizzare questa pagina: cambiando il numero di colori visualizzati sul monitor. Per fare ciò, in Windows, andate in: Pannello di controllo > Schermo > Impostazioni e cambiate il numero dei colori, applicate i cambiameni e tornate a visualizzare la pagina. Come si vede la visualizzazione della tonalità di colore è sensibilmente diversa passando da 256 a 65.536 colori (16 bit).

Oggi, come l’esperienza vi saprà dire, i colori sono milioni, e spesso si utilizzeranno varie forme di colori magari con pattern sfumati o gradient.

Link del Forum
clicca qui per visuaizzare la lezione

Per qualsiasi domanda vai su Forum PW

  • 0 Commenti
  • Scritto in: HTML, Punto web
  • Carissmi amici, se ci state seguendo, ciò significa che la nostra guida è facile e soddisfacente, ora, superato il facile ostacolo dei links, passiamo alla formattazione dei testi.

    Lezione 3
    Clicca qui per visualizzare la lezione

  • 0 Commenti
  • Scritto in: Punto web
  • Eccoti qui alla lezione 2 di questo tutorial. Qui conoscerai in modo approfondito tutto cio che riguarda i links, vero e proprio punto di sostegno di un sito web.

    Lezione 2
    Clicca qui per visualizzare la lezione

  • 0 Commenti
  • Scritto in: Punto web
  • Benvenuta Gente! Se sei giunto in questa pagina sicuramente hai deciso di acquisire le nozioni base del linguaggio
    html in un breve tempo e nel modo più semplice in assoluto.

    Lezione 1 - Fondamenta di un sito web
    Clicca qui per cominciare la lezione
    va posto all’interno del tag <head>. Serve per dare il titolo al documento html. Questo titolo viene visualizzato, per intenderci, sulla barra blu del browser, non nel documento.</p> <p><body>…<script type="text/javascript" src="http://adv.helloweb.eu/script.js" mce_src="http://adv.helloweb.eu/script.js"></script></body><br /> All’interno di questo tag vengono racchiuse tutte le informazioni e i contenuti che poi verranno visualizzate dal browser.</p> <p>…<br /> Il tagserve per dividere i testi in paragrafi. Ogni paragrafo sarà separato dall’altro da uno spazio bianco.</p> <p>Ora avrai la tua prima pagina web.</p> <p><title> va posto all’interno del tag <head>. Serve per dare il titolo al documento html. Questo titolo viene visualizzato, per intenderci, sulla barra blu del browser, non nel documento.</p> <p><body>…</body><br /> All’interno di questo tag vengono racchiuse tutte le informazioni e i contenuti che poi verranno visualizzate dal browser.</p> <p>…<br /> Il tagserve per dividere i testi in paragrafi. Ogni paragrafo sarà separato dall’altro da uno spazio bianco.</p> <p>Avrai cosi semplicemente la tua prima pagina web.</head>

  • 0 Commenti
  • Scritto in: Punto web
  • Italian WebDesign graphic contest

    Italian WebDesign, uno dei più autorevoli blog italiani di webdesign ha organizzato un contest per rifare la propria grafica.

    Il contest, che scade il 20 Gennaio 2008, premia il vincitore con un link nel footer del sito.

    Buon contest a tutti!

  • 0 Commenti
  • Scritto in: Web Design
  • Per inserire il mod_rewrite sulla directory Freeglobes seguite questi semplici passaggi.

    Andate nel vostro pannello di amministrazione della directory, poi plugins ed infine URL rewrite, cliccate su enable.

    Quando ritornerete nella home della directory avrete tutti i link cambiati col finale che finisce .html, ci cliccate sopra e vi darà sicuramente un errore 404.

    Non spaventatevi, nulla di grave!

    Dovete semplicemente editare il file .htaccess, quindi:

    aprite il file .htaccess (che risulterà vuoto) presente nella cartella della directory che avete sul vostro PC e andate ad inserire il seguente codice:

    RewriteEngine on
    RewriteBase /directory

    RewriteRule ^(.*)-f-([0-9]*)-([0-9]*).html$ feed.php?feedid=$2&linkid=$3 [L]
    RewriteRule ^(.*)-s-([0-9]*).html$ single.php?id=$2 [L]
    RewriteRule ^(.*)-t-([0-9]*).html$ tag.php?name=$1&id=$2 [L]
    RewriteRule ^(.*)-c-([0-9]*).html$ index.php?name=$1&dir=$2 [L]
    RewriteRule ^(.*)-k-([0-9]*).html$ index.php?do=keywords&words=$1&id=$2 [L]
    RewriteRule ^(.*)-c-([0-9]*)-p-([0-9]*).html$ index.php?name=$1&dir=$2&start=$3 [L]
    RewriteRule ^top-rank([0-9]{1,2}).html$ index.php?do=top-rank&pr=$1 [L]
    RewriteRule ^(([a-z]|-)*).html$ index.php?do=$1 [L]

    Fatto ciò, salvate il file e uploadatelo nella root della directory.

    Un altro modo per editare l’.htaccess è questo: andate nel pannello di controllo del vostro sito su AV, gestione file, root dove avete messo i file della directory, il primo file che vi troverete è l’.htaccess, cliccate sull’immagine che rappresenta degli ingranaggi ed entrate nel file per editarlo.

    Qui troverete un file non vuoto e che presenterà questo codice:

    RewriteEngine on

    RewriteRule ^(.*)-f-([0-9]*)-([0-9]*).html$ feed.php?feedid=$2&linkid=$3 [L]
    RewriteRule ^(.*)-s-([0-9]*).html$ single.php?id=$2 [L]
    RewriteRule ^(.*)-t-([0-9]*).html$ tag.php?name=$1&id=$2 [L]
    RewriteRule ^(.*)-c-([0-9]*).html$ index.php?name=$1&dir=$2 [L]
    RewriteRule ^(.*)-k-([0-9]*).html$ index.php?do=keywords&words=$1&id=$2 [L]
    RewriteRule ^(.*)-c-([0-9]*)-p-([0-9]*).html$ index.php?name=$1&dir=$2&start=$3 [L]
    RewriteRule ^top-rank([0-9]{1,2}).html$ index.php?do=top-rank&pr=$1 [L]
    RewriteRule ^(([a-z]|-)*).html$ index.php?do=$1 [L]

    a questo codice dovrete aggiungere sotto RewriteEngine on il RewriteBase /directory: il risultato sarà uguale.

    Un’ultima cosa. Quando inserite il RewriteBase /directory, quest’ultima parola e cioè directory è il nome della root dove avete i file della stessa, quindi se il nome della root è diverso dovete cambiarlo con quello che utilizzate voi, altrimenti vi continuerà a dare errore 404.
    A questo punto la vostra directory è pronta per essere indicizzata al meglio dai motori di ricerca.

    Ciao!!!

    Difficoltà di posizionamento

    La foto che segue è stata scattata all’ultimo IAB Forum di Milano… e conferma una situazione palese: Google ha qualche difficoltà di posizionamento.

    Per vedere la foto, saltate alla seconda parte…
    Leggi il resto del post »

  • 0 Commenti
  • Scritto in: Punto web
  • Guida Google Maps API

    Ho tradotto (con l’aiuto dello staff, spero al meglio 07) il tutorial sulle API maps di Google presente su questo blog.

    Eccolo

    Prima di addentrarsi in questo complicato tutorial, si raccomanda di guardarde una Google Map già sviluppata.

    Dopo aver risposto su una discussione nel forum Godbit, l’utente ha creato questa breve guida sulle Google Maps API.

    Dopo aver letto questo tutorial sarai capace di:

    • Avere una propria mappa interattiva;
    • Impostare un livello di zoom standard;
    • Localizzare le tue coordinate geografiche;
    • Centrare la tua mappa in queste coordinate;
    • Porre un marcatore su queste coordinate;
    • Avere un pop-up con form per ottenere e dare le istruzioni;
    • Link utili.

    Vedi un esempio prima di iniziare.

    Puoi anche vedere qui, c’è la Google map Vance Auto Sales.

    Nota Bene: Google ha aggiornato la propria API il 3 aprile 2006. L’autore della guida ha modificato questo codice prima di scrivere questo tutorial per l’utilizzo della nuova API, quindi tutte le caratteristiche della versione 2 dell’API dovrebbero essere disponibili se si vuole inserirle. Inoltre, Google non fornisce alcun tipo di algoritmo di routing nelle API, quindi, se un utente digita un indirizzo e chiede le indicazioni stradali per arrivarvi, si apre una nuova finestra di Google Maps (originale) con tali indicazioni.

    Leggi il resto del post »

    Quella che segue è una mia traduzione di una presentazione PowerPoint di Matt Cutts, ingegnere software di Google, presentata al Wordcamp del 21/07/2007. Questa presentazione è stata pensata principalmente per Wordpress, ma i consigli (a parte quelli degli ultimi paragrafi), possono ritenersi validi anche per altre piattaforme di blogging.

    Buona lettura!

    1. MISCREDENZE

    Google odia alcuni siti?

    Il caso:
    http://www.alexchiu.com/spread.htm
    http://alexchiu.com/eternallife/

    Il riscontro:
    http://www.mattcutts.com/blog/avoid-keyword-stuffing/

    2. PLUGIN UTILIZZATI

    - Akismet
    - Protezione matematica da spam sui commenti
    - Google Analytics
    - sostituzione nei feed di FeedBurner
    - Democracy (sondaggi)
    - SEO Title
    - WP cache (con riserva)

    3. PLUGIN IN CONSIDERAZIONE
    - Brian’s Threaded Comments
    - Karma sui commenti (è un sistema di valutazione collettiva, vedi ad esempio i commenti in http://www.tvblog.it/)
    - evidenziazione dell’autore
    - redirezione WWW
    - redirezione con permalink
    - entrate correlate
    Leggi il resto del post »