Lezione 38: Costruiamo un template (Parte 8^)

Impariamo a costruire un sito Web

Lezione 38: Costruiamo un template (Parte 8^)

Per terminare la descrizione della nostra sidebar occorre vedere in dettaglio il contenuto dei blocchi che noi abbiamo inserito nel nostro esempio. Naturalmente si possono mettere quanti blocchi si vuole ed il contenuto andrà deciso in funzione del vostro web site.
Qualcuno per esempio vuole mettere il menu in verticale in un blocco della sidebar, oppure richiami ad altre pagine in evidenza ecc. Noi abbiamo inserito un blocco per il login/registrazione degli utenti ed un altro blocco per la ricerca su Google.

[ad code=5]
  • Login/Registrazione utenti.

    Per questa necessità occorre inserire un form
    che, prima di commentare, proponiamo nuovamente:

    <form action="#" method="post" name="login" id="form-login">
      <fieldset class="input" style="border: 0 none;">
        <p>
          <label for="m_username">Username</label>
          <br />
          <input id="m_username" type="text" name="username" size="18" />
        </p>
        <p>
          <label for="m_passwd">Password</label>
          <br />
          <input id="m_passwd" type="password" name="passwd" size="18" />
        </p>
      </fieldset>
      <div style="margin-left:10px;">
        <input type="submit" name="Submit" class="fd_button" value="Login" />
        <input type="reset" name="Reset" class="fd_button" value="Reset" />
      </div> 
      <ul>
        <li>
          <a href="#">Registrazione</a>
        </li>
        <li>
          <a href="#">Password dimenticata?</a>
        </li>
        <li>
          <a href="#">User ID dimenticato?</a>
        </li>
        <li>
          <a href="#">Modifica Password</a><br /> 
        </li>
      </ul>
    </form>

    Se volete rivedere l’argomento relativo ai forms tornate alla lezione 10.

    Il significato dei tag e relativi attributi dovrebbe essere chiaro alla luce di quanto spiegato alla lezione 10. Vale la pena tuttavia di dire qualcosa in più degli attributi del tag <form>.

    La action come vedete non è stata indicata in questo esempio. Dove abbiamo messo il simbolo # andrà scritto il nome di una pagina che dovrà trattare i dati inseriti dall’utente. Questo non è possibile che venga fatto lato client (cioè nella pagina che sta nel browser del visitatore), ma potrà essere effettuato solo lato server. Per spiegarci meglio, quando l’utente inserisce i suoi dati, questi devono essere inviati al server per essere memorizzati (non possono ovviamente rimanere sul computer del visitatore). Occorre quindi un linguaggio che sia in grado di operare lato server. Uno dei linguaggi più utilizzati per questa operazione è il php. In definitiva non è possibile trattare un form di inserimento dati col solo linguaggio html; anche se il form in una pagina html è di per sé perfettamente funzionante, i dati inviati devono essere letti e trattati con un altro linguaggio. Siccome questo esula dal corso html, lasciamo questa parte incompiuta, magari rimandandola ad articoli successivi, su script php semplici ed utili anche per principianti.

    Per quanto riguarda il method come detto a suo tempo si può usare get o post. la differenza sta nel fatto che con get i dati vengono inviati alla pagina che li dovrà trattare inserendoli alla fine dell’URL della pagina (es.: login.php?id=Pippo&psw=123456789 – Il programma riceverà il campo id col valore Pippo ed il campo psw col valore 123456789), mentre con post i dati non viaggiano con l’URL, ma vengono inseriti in variabili globali ed il programma ricevente li preleverà da li. Il consiglio è di usare sempre post per i dati di un form.

    Il simbolo # che vedete usato in più punti ha l’effetto di non far uscire dalla pagina corrente anche se si clicca il link corrispondente. A regime al posto di # andrà inserito il nome della pagina da richiamare.

 

  • Ricerca su Google.

    Riproponiamo anche in questo caso il codice html di questo blocco:

    <div style="padding:10px 10px 15px 10px;">
      <div class="cse-branding-bottom">
        <div class="cse-branding-form">
          <form action="http://www.google.it" id="cse-search-box" target="_blank">
            <div>
              <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxxxx:yyyyyyyyyyyyy" />
              <input type="hidden" name="ie" value="UTF-8" />
              <input type="text" name="q" size="24" />
              <input type="submit" name="sa" value="Cerca" />
            </div>
          </form>
        </div>
        <div class="cse-branding-logo">
          <img src="images/poweredby_FFFFFF.png" alt="Google" />
        </div>
        <div class="cse-branding-text">
    
        </div>
      </div>
    </div>

    La <div> più esterna l’abbiamo inserita per allineare graficamente il contenuto nel blocco. Come vedete abbiamo usato l’attributo style direttamente qui nel tag <div> anziché definire ad esmpio una classe nel CSS. E’ una possibilità alternativa quando si vuole assegnare il valore ad una o più proprietà che, magari saranno usate solo in quel punto.

    Il resto del contenuto è fornito da Google a chi si registra per AdSense per la ricerca (per registrarvi dovete avere già un sito funzionante, con buoni contenuti). Ovviamente i codici che andranno inseriti al posto delle xxxx.. e delle yyyy… saranno quelli che Google vi assegnerà. L’immagine “poweredby_FFFFFF.png” l’abbiamo un po’ modificata per motivi cromatici; nel codice originale va richiamata così: src=”http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif”.

 

Entrambi i blocchi che abbiamo inserito in questo esempio sono difficilmente utilizzabili da un principiante per motivi diversi, sono tuttavia abbastanza esemplificativi ed abbiamo ritenuto di inserirli per questo motivo.

Per terminare il nostro template manca la descrizione del contenuto ed del footer. Al termine vi forniremo il link per il download del materiale presentato.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *