mercoledì 30 maggio 2012

Come sapere quale Browser ha il nostro utente

Vediamo come fare per sapere quale Browser sta utilizzando il nostro utente


Questo fantastico script gratuito scritto in PHP si chiama Browser.php. Grazie a un'attenta analisi del Browser riesce ad individuare:
  1. Tipo di Browser dell'utente
  2. Versione del Browser
  3. User Agent completo
  4. Piattaforma del supporto
Esempio:


Spieghiamo:

Lo script si occupa di individuare e immagazzinare i dati proveniente dal Browser dell'utente, come riportato nell'esempio sopra. Sta poi a noi interpretarli e utilizzarli.

L'autore ad esempio consiglia un utilizzo di questo tipo:
$browser = new Browser();
if( $browser->getBrowser() == Browser::BROWSER_FIREFOX && $browser->getVersion() >= 2 ) {
echo 'Stai Navigando con FireFox versione 2 o superiore';
}
In pratica controllo con if se il Browser è FireFox e se la versione è uguale o superiore a 2 quindi stampo il messaggio con echo.

Ho fatto un paio di test con Smartphone Android, iPhone e Tablet Android, e in ogni situazione lo script ha risposto segnalando puntualmente il Browser la sua versione, l'user agente e la piattaforma utilizzata, senza commettere mai errori.

Può sembrare superfluo dirlo, ma per il corretto funzionamento dello script è meglio non dimenticare di includerlo nel nostro file padre.

Esempio di inclusione nel nostro file:

<?php
//includo il file Browser.php nel mio file padre (ad esempio: example.php)
include("Browser.php");

//imposto il browser
$browser = new Browser();

//controllo con if se il Browser dell'utente 
//risponde alle caratteristiche impostate
if( $browser->getBrowser() == Browser::BROWSER_FIREFOX && $browser->getVersion() >= 2 ) {

//stampo il messaggio Firefox SI
echo 'Stai Navigando con FireFox versione 2 o superiore';
}else{

//altrimenti stampo il messaggio FireFox NO o inferiore a 2
echo 'Stai Navigando con un Browser diverso da FireFox o inferiore a 2';
}
?>

martedì 29 maggio 2012

DOCTYPE HTML 5

L'HTML5 è un linguaggio di markup per la progettazione delle pagine web attualmente in fase di definizione (bozza) presso il World Wide Web Consortium. La definizione delle specifiche iniziali del linguaggio è stata effettuata da un gruppo di lavoro esterno al W3C: il WHATWG. Attualmente i lavori sono seguiti sia dal WHATWG che dal W3C HTML working group. L'intento iniziale che ha guidato il gruppo di lavoro è stato quello di proporre nuovi comandi e funzionalità fino ad allora ottenute in maniera non-standard, ossia mediante il ricorso a plug-in o a estensioni proprietarie dei vari browser. Altro obiettivo è garantire una buona compatibilità con i browser esistenti, compresi quelli obsoleti o presenti su piattaforme mobili.

L'HTML5 si propone come evoluzione dell'attuale HTML 4.01 ed è stato concepito in alternativa all'ormai fallito XHTML 2[1]. Il World Wide Web Consortium ha annunciato che sarà pronto per il luglio 2014.

Fonte: Wikipedia

Struttura

<header>
<nav>
<article>
<section>
<aside>
<footer>

Codice

<!DOCTYPE HTML>

<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>DTD HTML 5.0</title>
 </head>

 <body>
  <p>CONTENUTO</p>
  </body>

</html>

Sito del W3C HTML Working Group

DOCTYPE XHTML Mobile 1.0

DTD Versione ridotta per supporti Mobile.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>DTD XHTML Mobile 1.0</title>
 </head>

 <body>
  <p>CONTENUTO</p>
 </body>

</html>

DOCTYPE XHTML 1.1

L'ultima versione di XHTML è la XHTML 1.1, che è una riformulazione dell'XHTML Strict, quindi ha una sola DTD. Non accetta i tag e gli attributi più criticati della precedente versione (come la struttura a frameset). Questa versione invece supporta i tag del cosiddetto markup «ruby», che consente di visualizzare i set di caratteri delle lingue orientali.

Fonte: Wikipedia
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>DTD XHTML 1.1</title>
 </head>

 <body>
  <p>CONTENUTO</p>
 </body>

</html>

DOCTYPE XHTML 1.0 Strict

XHTML 1.0 Strict rispetto alla versione Transitional non accetta i tag HTML definiti deprecati, non è tollerante a non conformità sintattiche e prevede controlli più rigorosi anche rispetto al valore di alcuni attributi dei tag (per esempio, l'attributo id deve avere valori univoci all'interno dello stesso documento).

Fonte: Wikipedia
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>DTD XHTML 1.0 Strict</title>
 </head>

 <body>
  <p>CONTENUTO</p>
 </body>

</html>

Includere un file con PHP

Includere un file HTML figlio in un file HTML padre con PHP

Questo tipo di inclusione lato-server, permette la ripetizione di uno stralcio di codice in uno o più file padre.

Per includere lo stralcio di codice, utilizzeremo il costrutto include. L'unica accortezza che dovremo rispettare, sarà cambiare l'estensione del file padre in PHP. Il file padre si dovra chiamare ad esempio: example.php.

Vediamo il codice

<?php include("menu.htm"); ?>

Spieghiamo

Grazie al costrutto include possiamo inserire lo stralcio di codice contenuto in menu.htm all'intero del nostro file padre.
Ci sono da notare alcuni aspetti importanti affinché l'inclusione vada a buon fine:
  1. l'url del file figlio è relativo rispetto al file padre. Il file riportato nell'esempio menu.htm si troverà nella stessa cartella del file padre.
  2. Volendo possiamo inserire codice PHP nel file figlio, ma in questo caso dovremo rinominare il file da menu.htm a menu.php. Inoltre il codice PHP contenuto in menu.php dovrà essere aperto e chiuso con php.

Esempio di contenuto dinamico nel file menu.php:

<?php echo"Ciao"; ?>
In alcuni casi sarà possibile "forzare" l'inclusione con il costrutto require.

<?php require("menu.htm"); ?>
Esiste infine la possibilità di utilizzare il costrutto include_once o require_once, particolarmente utile in script complessi, per evitare l'inclusione multipla indesiderata

<?php include_once("menu.htm"); ?>
<?php require_once("menu.htm"); ?>

Slide Show semplice con JavaScript

Vediamo come visualizzare immagini in un div, senza ricaricare la pagina.

Con poche righe di codice, e con l'ausilio di JavaScript, realizzeremo un semplice visualizzatore di foto, che non ricarica necessariamente tutto il codice della pagina. Utile ad esempio, per allegare più foto a un articolo.

Esempio:

Foto di Ilari Blasi




Per realizzare questo semplice visualizzatore di foto, abbiamo bisogno di tre cose:
  1. Il codice JavaScript che prende l'url della foto cliccata e lo memorizza in una variabile
  2. Un menù di link alle foto da visualizzare
  3. Il <div id="fotozoom">  nel quale pubblicheremo la foto cliccata

Vediamo il codice

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Foto Show</title>
  <script type="text/javascript">
  <!--
  function zoom(foto)
  {
   var image = foto;
   document.getElementById('fotozoom').innerHTML='<img src=' + image + '>'; 
  }
  //-->
  </script>
 </head>

 <body>
 
  <ul>
   <li><a href="#" onclick="javascript:zoom('2.jpg');">Foto 1</a></li>
   <li><a href="#" onclick="javascript:zoom('3.jpg');">Foto 2</a></li>
   <li><a href="#" onclick="javascript:zoom('1.jpg');">Foto 3</a></li>
  </ul>
  
  <div id="fotozoom"><img src="1.jpg" alt=""></div>
  
 </body>
 
</html>

Spieghiamo

Il codice dalla riga 6 alla riga 14 memorizza il link al clic, lo rende una variabile e predispone il codice HTML da stampare per visualizzare la foto;

Il codice HTML dalla riga 19 alla 23 serve soltanto a visualizzare un menù di esempio, che potremo ricreare a nostro piacimento;

Il div alla riga 25 serve a contenere la foto che sceglieremo con il clic sul menù.

Da notare che ho preimpostato la prima foto nel div, che ho anche riporposto sul link 3. Questo per fare in modo che alla prima visualizzazione della pagina ci sia già una prima foto visualizzata, senza dovere cliccare nulla.

Download

Per comodità è possibile scaricare il file ZIP con il codice di esempio.

lunedì 28 maggio 2012

Includere file esterno con JavaScript

Includere un file HTML figlio in un file HTML padre con JavaScript

Le inclusioni sono comode per inserire uno stralcio di codice in più pagine, senza doverlo ripeterlo ogni volta uguale.

Esistono sostanzialmente due metodi per includere uno stralcio di codice esterno, in un file HTML: lato-server e lato-client. Quello che vediamo adesso è realizzato con JavaScript e appartiene alle inclusioni lato-client, cioè realizzate dal browser dell'utente.

Per includere lo stralcio di codice, che nell'esempio è un menù, abbiamo bisogno di:
  1. Una pagina padre, che chiameremo example.htm 
  2. Lo stralcio di codice da includere che scriveremo nel file che chiameremo menu.js

vediamo il codice della pagina padre example.htm

<!DOCTYPE HTML>
<html>
 <head>
  <script type="text/javascript" src="menu.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Inclusione con JavaScript</title>
 </head>

 <body>

  <noscript>
   <strong>
    <p style="color:red;">Attenzione: per visualizzare correttamente questa pagina è necessario avere JavaScript attivato.</p>
   </strong>
  </noscript>

 <script type="text/javascript">
  document.write(inclusione);
 </script>

 </body>

</html>

e vediamo anche il codice del menù da includere nella pagina padre menu.js

inclusione="<ul><li><a href='home.htm'><span>Home</span></a></li><li><a href='prodotti.htm'><span>Prodotti</span></a><li><a href='chi.siamo.htm'><span>Chi siamo</span></a></li><li><a href='contatti.htm'><span>Contatti</span></a></li></ul>";

Spieghiamo:

Il primo codice di esempio è il file che chiameremo example.htm. È la nostra pagina padre, nella quale includeremo lo stralcio di codice.

Da notare il codice alla riga 4 che richiama il file esterno menu.js;

Il codice dalla riga 11 alla 15 serve per stampare un alert, nel caso in cui l'utente abbia JavaScript disabilitato sul browser;

Il codice dalla riga 17 alla 19 stampa il contenuto del file incluso;

Il secondo codice di esempio è il file che chiameremo menu.js.
Guardandolo bene ha una stranezza: è scritto tutto su una riga senza andare mai a capo...
Questo perché  la stringa che nell'esempio si chiama inclusione, non permette codice a capo.

Altra cosa che dovremo tenere a mente per evitare che il JavaScript generi un errore, è evitare l'utilizzo dei doppi apici ". Basterà utilizzare l'apice singolo '.

Ad esempio:

inclusione"<a href="http://www.example.com" title="Example">pippo</a>";

diventerà:

inclusione"<a href='http://www.example.com' title='Example'>pippo</a>";

oppure potrebbe diventare...:

inclusione"<a href=\"http://www.example.com\" title=\"Example\">pippo</a>";

Download

Per chiarezza è possibile scaricare i due file example.htm e menu.js (ZIP)

Includere un file con SSI

Includere un file HTML figlio in un file HTML padre, con SSI

Questo metodo di inclusione lato server, è molto utile quando si vuole utilizzare una parte di codice, ripetuto in più pagine di un sito internet, come ad esempio un menù, il logo in alto o gli indirizzi di solito in basso nella pagina.
Vediamo prima di tutto il codice:
<!--#include virtual="menu.htm"-->

Spieghiamo:

la sintassi del Server Side Include (SSI) è molto semplice: comando parametro e valore, dove valore è l'url del nostro spezzone di codice da includere.

Nell'esempio ho riportato l'url relativo riferito al menù che voglio inserire nella mia pagina. Se il menù si trovasse in una cartella chiamata INC l'esempio cambierebbe in:
<!--#include virtual="INC/menu.htm"-->

Nel file menu.htm non ci devono essere i tag strutturali della pagina HTML ma soltanto lo spezzone di codice da includere.

Un esempio completo di pagina padre e inclusione di spezzone potrebbe essere questo:

file padre example.shtml

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Inclusione con SSI</title>
 </head><body>
  <p>Contenuto della pagina padre parte superiore della pagina</p>

  <!--#include virtual="menu.htm"-->

  <p>Contenuto della pagina padre parte inferiore della pagina</p>
 </body>
</html>

file figlio menu.htm

  <ul>
    <li><a href='#'><span>Home</span></a></li>
    <li><a href='#'><span>Prodotti</span></a>
    <li><a href='#'><span>Chi siamo</span></a></li>
    <li><a href='#'><span>Contatti</span></a></li>
  </ul>

Nota:

Affinché l'inclusione vada a buon fine dobbiamo rispettare due vincoli:

  1. Il nostro server deve avere SSI attivato
  2. La nostra pagina padre deve avere l'estensione shtml. Si dovrà chiamare ad esempio: example.shtml.
    Va invece bene qualsiasi estensione per il file figlio che può essere nominato, come riportato nell'esempio: menu.htm. Nel file figlio sarà possibile inserire solo codice HTML.

Includere un filmato flash

Vediamo come includere un filmato in Flash nella nostra pagina HTML

Diamo per scontato che il filmato sia già pronto per essere pubblicato sul web.
Significa che abbiamo già realizzato il nostro filmato con Flash, lo abbiamo salvato in formato .FLA e abbiamo già esportato il file che nell'esempio riportato sotto ho chiamato miofile.swf dove .SWF è il file compilato da visualizzare nella nostra pagina HTML.

Con questo semplice codice posso includere un file con estensione SWF in una pagina HTML

<p>
 <object 
  type="application/x-shockwave-flash" 
  data="http://www.example.com/miofile.swf" 
  width="800" 
  height="650">

 <param 
  name="movie" 
  value="http://www.example.com/miofile.swf "/>

 </object>
</p>

Spieghiamo:

Da notare che ho inserito <object...> all'interno di un tag paragrafo.
Questa accortezza serve solo a non "infastidire" il validatore, nel caso in cui utilizziamo un DTD Strict, altrimenti possiamo tranquillamente fare a meno del tag <p>.

In pratica se non utilizzo un DTD Strict potrò avere un codice validato anche cancellando la prima e l'ultima riga dell'esempio.

Consiglio:

Sarebbe meglio non scalare il filmato importato, questo per evitare che la grafica venga ricampionata dal browser. Per fare questo, basta realizzare il filmato flash direttamente delle dimensioni che verranno utilizzate nella pagina HTML.

Nell'esempio ho ipotizzato un filmato con width="800" ed height="650", in questo caso il foglio di lavoro del filmato flash dovrà essere creato base 800px e altezza 650px.

domenica 27 maggio 2012

Redirect con JavaScript

Semplice redirect con JavaScript

Con questo semplice codice è possibile inviare automaticamente l'utente a una nuova pagina.
<script type="text/javascript">
<!-- 
top.location.replace("http://www.example.com");
-->
</script>

Spieghiamo:

Si tratta dell'oggetto location.replace grazie al quale è possibile sostituire il nostro documento con il nuovo url.

È possibile utilizzare, con lo stesso risultato anche altri due oggetti del JavaScript: location.reload e location.href utilizzandoli come illustrato nei due esempi che seguono:
<script type="text/javascript">
<!-- 
top.location.reload("http://www.example.com");
-->
</script>
<script type="text/javascript">
<!-- 
top.location.href("http://www.example.com");
-->
</script>

Redirect con PHP

Semplice redirect con PHP

Con questo semplice codice è possibile effettuare un redirect della nostra pagina con PHP.
Sarà possibile impostare anche l'intervallo di tempo dopo il quale dare corso al redirect.
<?php
header("Refresh: 5; URL=http://www.example.com");
exit;
?>

Spieghiamo:

Tramite questo redirect in PHP è possibile impostare un tempo e un url.
Se ad esempio impostiamo il parametro Refresh a 5, il nostro redirect verrà avviato dopo 5 secondi.

Se nella pagina è presente altro codice che non voglio eseguire, blocco lo script con exit;
Altrimenti non serve e lo posso tranquillamente togliere.

È possibile anche utilizzare la forma contratta, senza impostare un tempo al redirect, che avrà quindi effetto immediato:
<?php
header("Location: http://www.example.com");
exit;
?> 

Spieghiamo:

Anche in questo caso è possibile togliere exit; se nella pagina non c'è altro codice che non si desidera venga eseguito.

È possibile con una piccola astuzia, utilizzare questo redirect, ad esempio, per aggiornare la nostra pagina ogni 30 secondi: basterà impostare il parametro Refresh a 30, e indicare come url la pagina attuale.

In questo modo si avrà, in effetti, il reload della nostra pagina ogni 30 secondi
Esempio:
<?php
header("Refresh: 30; URL=http://www.url-della-mia-pagina.it");
echo"Questa pagina viene ricaricata ogni 30 secondi...";
?>

Redirect con HTML

Semplice redirect in HTML

Con questo semplice codice è possibile inviare automaticamente l'utente a una nuova pagina.
Sarà possibile impostare anche l'intervallo di tempo dopo il quale dare corso al redirect.
<meta http-equiv="Refresh" content="5; url=http://www.example.com">

Spieghiamo:

Si tratta del metatag Refresh grazie al quale è possibile impostare un tempo e un url al nostro redirect.
Se ad esempio impostiamo il content a 5, il nostro redirect verrà avviato dopo 5 secondi.

È possibile con una piccola astuzia, utilizzare questo metatag, ad esempio, per aggiornare la nostra pagina ogni 30 secondi: basterà impostare il parametro content a 30, e indicare come url la pagina attuale.

In questo modo si avrà, in effetti, il reload della nostra pagina ogni 30 secondi

<meta http-equiv="Refresh" content="30; url=http://www.url-della-mia-pagina.it">

Link che apre in _blank con JavaScript

Creare un link che apre in una nuova pagina del browser

Se vogliamo che il nostro clic apra in una nuova pagina del browser, possiamo farlo modificando con JavaScript il codice <a href come segue:

Vediamo il codice JavaScript:

<a href="http://www.example.com/" 
title="Apri EXAMPLE in una nuova pagina" 
onClick="window.open(this.href);return false">Example</a>

Spieghiamo:

Questa soluzione utilizza l'onClick del JavaScript per generare una nuova pagina del browser.

PRO:

È utile se utilizziamo un DOCTYPE XHTML 1.0 Transitional oppure un DOCTYPE HTML 4.01 Transitional e vogliamo mantenere la validazione W3C del codice.

CONTRO:

Non funziona correttamente se l'utente ha JavaScript disabilitato sul browser
Se utilizzeremo questa soluzione, sarà buona norma inserire un <noscript> nella pagina, che visualizzerà un messaggio se l'utente non ha JavaScript abilitato:

<noscript>
  <p style="color:red; text-align:center;">
    Attenzione: per visualizzare correttamente 
il contenuto della pagina occorre avere JavaScript abilitato.
  </p>
</noscript>

Menù orizzontale con sottomenù

Vediamo come creare un semplice menù con sottomenù

Esempio:

Questo semplice menù è realizzato esclusivamente utilizzando codice CSS.
Con una semplice struttura HTML composta da <ul> e <li>, sarà possibile creare tutti i menù e sottomenù necessari al nostro sito.

Browser

Ho testato il funzionamento e la rappresentazione grafica del menù con tutte le ultime versioni dei browser più utilizzati:
 

Vediamo il codice 

CSS:
<style type="text/css">
.cssmenu {
 border:none;
 margin:0px;
 padding:0px;
 font-family:verdana, geneva, arial, helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
}
/*1° livello*/
.cssmenu ul {
 list-style:none;
 margin:0;
 padding:0;
}
.cssmenu li {
 float:left;
 padding:0px 8px 0px 8px;
}
.cssmenu li a {
 color:darkGoldenrod;
 display:block;
 font-weight:bold;
 line-height:43px;
 padding:0px 25px;
 text-align:center;
 text-decoration:none;
}
.cssmenu li a:hover {
 color:green;
 text-decoration:none;
 text-decoration:underline;
}
/*2° livello*/
.cssmenu li ul {
 background:green;
 display:none;
 height:auto;
 position:absolute;
 width:225px;
 z-index:1;
}
.cssmenu li:hover ul {
 display:block;
}
.cssmenu li li {
 display:block;
 float:none;
 padding:0px;
 width:225px;
}
.cssmenu li ul a {
 display:block;
 font-size:12px;
 font-style:normal;
 padding:0px 10px 0px 15px;
 text-align:left;
 color:white;
}
.cssmenu li ul a:hover {
 background:darkgreen;
 color:greenyellow;
}
.cssmenu p {
 clear:left;
}
/*link active*/
.cssmenu .active > a {
 color:red;
}
.cssmenu .active > a:hover {
 text-decoration:underline;
 color:maroon;
}
</style>


HTML:
<div class='cssmenu'>
  <ul>
    <li class='active'><a href='#'><span>Home</span></a></li>
    <li><a href='#'><span>Prodotti</span></a>
      <ul>
        <li><a href='#'><span>Prodotto 1</span></a></li>
        <li><a href='#'><span>Prodotto 2</span></a></li>
      </ul>
    </li>
    <li><a href='#'><span>Chi siamo</span></a></li>
    <li><a href='#'><span>Contatti</span></a></li>
  </ul>
</div>

Spieghiamo:

Nel Css ho indicato dove apportare modifiche. Se vogliamo personalizzare il primo livello di menù, quello visibile senza intervento del mouse basterà modificare il codice CSS preceduto da:
/*1° livello*/

Per modificare graficamente il secondo livello basterà modificare il codice CSS preceduto da:
/*2° livello*/

È anche possibile modificare l'aspetto grafico del menù appartenente alla pagina che stiamo visualizzando, ossia la pagina attiva. Basterà modificare il codice CSS preceduto da:
/*link active*/


Nel codice HTML dovremo semplicemente specificare il link che appartiene alla pagina attuale modificando <li> in
<li class='active'>
ossia link attivo.

Per comodità è possibile scaricare l'intero file HTML + CSS.

sabato 26 maggio 2012

Layout 2 colonne 100%

Vediamo come impostare un layout 2 colonne con larghezza 100%

Il layout prevede 4 macro aree:

  1. Header per contenere il logo in testa alla pagina
  2. Navigation per un menù a sinistra
  3. Content per una colonna centrale di contenuti
  4. Footer per indirizzo telefoni ecc. a pié di pagina

HEAD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout 2 colonne larghezza in percentuale</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
CSS:
<style type="text/css">
* {
 margin:0;
 padding:0;
}
div#wrapper {
 float:left;
 width:100%;
}
div#header {
 height:80px;
 background: #FF9;
}
div#content {
 margin: 0 0% 0 25%;
 background-color:#FFF;
}
div#navigation {
 background:#E8E8FF;
 float:left;
 width:25%;
 margin-left:-100%;
}
div#footer {
 background: #CCC;
 clear:left;
 width:100%;
}
</style>
BODY:
</head>
<body>
<div id="container">
  <div id="header">
    <H1>HEADER</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>CONTENUTI</h2>
      <p><img src="https://www.google.com/images/srpr/logo3w.png" alt="" width="275" height="95" align="left" id="segnaposto" style="background-color: #CCCC33" />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div id="navigation">
    <h2>MENU</h2>
    <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>menu 4</li>
    </ul>
    <br style="clear:both" />
  </div>
  <div id="footer">
    <h2>FOOTER</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
  </div>
</div>
</body>
</html>

Spieghiamo: 

Con questo layout suddiviso in 2 colonne, visualizzeremo una pagina al 100% della finestra del browser.
Chiaramente le modifiche che si possono fare sono infinite.

Ad esempio potremmo voler distanziare il layout a destra e a sinistra rispetto alla finestra del browser,
in questo caso basterebbe aggiungere al codice CSS riportato sopra:
#container {
 margin: 0 5%;
}
per avere uno spazio a destra e a sinistra corrispondente al 5% della finestra del browser.

Download:

Per comodità è possibile scaricare il file HTML completo.

Layout 3 colonne 100%

Vediamo come impostare un layout 3 colonne con larghezza 100%

Il layout prevede 5 macro aree:

  1. Header per contenere il logo in testa alla pagina
  2. Navigation per un menù a sinistra
  3. Content per una colonna centrale di contenuti
  4. Extra per una colonna a destra
  5. Footer per indirizzo telefoni ecc. a pié di pagina
HEAD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout 3 colonne larghezza 100%</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
CSS:
<style type="text/css">
* {
 margin:0;
 padding:0;
}
div#wrapper {
 float:left;
 width:100%;
}
div#header {
 height:80px;
 background: #FF9;
}
div#content {
 margin: 0 25%;
 background-color:#FFF;
}
div#navigation {
 background:#E8E8FF;
 float:left;
 width:25%;
 margin-left:-100%;
}
div#extra {
 background:#EFFFAE;
 float:left;
 width:25%;
 margin-left:-25%
}
div#footer {
 background: #CCC;
 clear:left;
 width:100%;
}
</style>
BODY:
</head>
<body>
<div id="container">
  <div id="header">
    <H1>HEADER</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>CONTENUTI</h2>
      <p><img src="https://www.google.com/images/srpr/logo3w.png" alt="" width="275" height="95" align="left" id="segnaposto" style="background-color: #CCCC33" />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div id="navigation">
    <h2>MENU</h2>
    <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>menu 4</li>
    </ul>
    <br style="clear:both" />
  </div>
  <div id="extra">
    <h2>EXTRA</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
  </div>
  <div id="footer">
    <h2>FOOTER</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
  </div>
</div>
</body>
</html>

Spieghiamo: 

Con questo layout suddiviso in 3 colonne, visualizzeremo una pagina al 100% della finestra del browser.
Chiaramente le modifiche che si possono fare sono infinite.

Ad esempio potremmo voler distanziare il layout a destra e a sinistra rispetto alla finestra del browser,
in questo caso basterebbe aggiungere al codice CSS riportato sopra:
#container {
 margin: 0 5%;
}
per avere uno spazio a destra e a sinistra corrispondente al 5% della finestra del browser.

Download:

Per comodità è possibile scaricare il file HTML completo.

DOCTYPE XHTML 1.0 Transitional

Codice HTML di un documento con DOCTYPE XHTML 1.0 Transitional

L'XHTML (acronimo di eXtensible HyperText Markup Language, Linguaggio di marcatura di ipertesti estensibile) è un linguaggio di marcatura che associa alcune proprietà dell'XML con le caratteristiche dell'HTML: un file XHTML è un pagina HTML scritta in conformità con lo standard XML.

Il linguaggio prevede un uso più restrittivo dei tag HTML sia in termini di validità che in termini di sintassi per descrivere solo la struttura logica della pagina, mentre il layout e la resa grafica sono imposti daifogli di stile a cascata (Cascading Style Sheets, CSS).

L'XHTML è nato ufficialmente il 26 gennaio 2000 come standard del World Wide Web Consortium (W3C), e può essere definito tecnicamente una riformulazione dell'HTML 4.01 in XML 1.0; è una sorta di "ponte" tra questi due linguaggi.

Fonte: Wikipedia
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>DTD XHTML 1.0 Transitional</title>
 </head>

 <body>
  <p>contenuto</p>
 </body>

</html>

Link WRC al DTD XHTML 1.0

venerdì 25 maggio 2012

Visualizzare un testo a seconda del click

Come visualizzare un testo, a seconda del link cliccato

Vediamo come fare, con poche righe di codice PHP, per visualizzare un testo, che cambia a seconda del link cliccato.

Esempio dopo aver cliccato il link 2:

link1 | link2 | link3

Hai cliccato il link n. 2



<ul>
 <li><a href="?v=1"<?php if($_GET["v"]==1){echo' style="color:red"';}?>>
  link1
 </a> | </li>
 <li><a href="?v=2"<?php if($_GET["v"]==2){echo' style="color:red"';}?>>
  link2
 </a> | </li>
 <li><a href="?v=3"<?php if($_GET["v"]==3){echo' style="color:red"';}?>>
  link3
 </a></li>
</ul>
<h1>
 <?php 
    if(!$_GET["v"]){
     echo"Non hai cliccato ancora nessun link";
    }else{
     echo"Hai cliccato il link n. ".$_GET["v"];
    }
 ?>
</h1>

spieghiamo:

  1. Ho creato una struttura in HTML con <ul> e <li>, ma naturalmente, si può costruire la struttura HTML che si vuole;
  2. Imposto sull'href del link un valore con ?v= che poi utilizzerò per stampare un messaggio;
  3. Recupero sul titolo <h1> il messaggio "Non hai cliccato ancora nessun link", se manca un valore sul get !$_GET["v"], altrimenti stampo il messaggio personalizzato ""Hai cliccato il link n." + il numero impostato sul link;

giovedì 24 maggio 2012

Evidenziare i link di un menù

Come evidenziare il link cliccato in un menù

Esempio se ho cliccato link2:



Per far funzionare correttamente questo semplice script, che utilizza il  $_GET(), è necessario avere una pagina di tipo PHP.
Ad esempio se la nostra pagina si chiama: example.html, dovremo cambiare l'estensione da .html a .php.
Quindi la nostra pagina si dovrà necessariamente chiamare:  example.php

Vediamo il codice necessario per colorare il link del nostro menù
<ul>
 <li style="display:inline;">
  <a href="?v=1"<?php if($_GET["v"]==1){echo' style="color:red"';}?>>
   link1
  </a> | 
 </li>
 <li style="display:inline;">
  <a href="?v=2"<?php if($_GET["v"]==2){echo' style="color:red"';}?>>
   link2
  </a> | 
 </li>
 <li style="display:inline;">
  <a href="?v=3"<?php if($_GET["v"]==3){echo' style="color:red"';}?>>
   link3
  </a>
 </li>
</ul>

Spieghiamo:

  1. Ho creato una struttura con <ul> e <li> per visualizzare i link, che chiaramente può essere realizzata con il codiche HTML che si preferisce;
  2. Imposto l'href del link con ?v=
    Se ad esempio il link1 dovesse collegare la pagina home.php, il link sarebbe: home.php?v=1
  3. Recupero con $_GET["v"] il valore dal link;
  4. Coloro il link che ha il $_GET corrispondente al link cliccato.

DOCTYPE HTML 4.01 Strict

Codice HTML di un documento con DOCTYPE HTML 4.01 Strict

Il DTD strict, è più "severo" rispetto al Transitional. Con Strict si è costretti ad un codice senza errori. Il DTD Strict è in alcuni casi meno permissivo. Per cui se si desidera validare il codice della propria pagina, bisognerà fare più attenzione a quali tag utilizzare e soprattutto come utilizzarli.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<html>
 
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>DOCTYPE HTML 4.01 Strict</title>
 </head>

 <body>
  <p>CONTENUTO</p>
 </body>

</html>

Link WRC DTD 4.01 Strict

mercoledì 23 maggio 2012

DOCTYPE HTML 4.01 Transitional

Codice HTML di un documento con DOCTYPE HTML 4.01 Transitional

HTML 4.0 nella sottoversione 4.01 è stato rilasciato il 24 dicembre 1999.
Una pagina HTML dovrebbe iniziare con la dichiarazione del DTD document type declaration, (dichiarazione del tipo di documento).
Per assurdo sarebbe possibile anche omettere tale dichiarazione, moltissimi siti internet lo fanno, più o meno volutamente.
Omettendo la dichiarazione del DTD, si può incorrere in visualizzazioni incontrollate e a interpretazioni arbitrarie da parte dei diversi Browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>DOCTYPE HTML 4.01 Transitional</title>
 </head>

 <body>
  <p>CONTENUTO</p>
 </body>

</html>

Link WRC al DTD 4.01 Transitional

martedì 22 maggio 2012

HyperText Markup Language (HTML)

In informatica l'HyperText Markup Language (HTML) (traduzione letterale: linguaggio a marcatori per ipertesti) è il linguaggio solitamente usato per i documenti ipertestuali disponibili nel World Wide Web. In tali documenti, un tratto di testo può essere contrassegnato inserendo delle etichette, tag, che ne possono descrivere tra le altre cose la funzione, il colore, il link o altre caratteristiche. Il contenuto servito dai siti web in seguito a una richiesta dell'utente solitamente consiste di un documento HTML ed dai file ad esso correlati che un web browser scarica da uno o più web server per elaborarli, interpretando il codice, al fine di generare la visualizzazione della pagina desiderata sullo schermo del computer.

L'HTML non è un linguaggio di programmazione (in quanto non prevede alcuna definizione di variabili, strutture dati, funzioni, strutture di controllo) ma solamente un linguaggio di markup che descrive le modalità di impaginazione, formattazione o visualizzazione grafica (layout) del contenuto, testuale e non, di una pagina web attraverso tag di formattazione. Tuttavia, l'HTML supporta l'inserimento di script eoggetti esterni quali immagini o filmati. Punto HTML (.html) o punto HTM (.htm) è anche l'estensione comune per riconoscere i documenti in questo formato.

Fonte: Wikipedia

Esempio di documento HTML con DOCTYPE HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>DOCTYPE HTML 4.01 Transitional</title>
 </head>

 <body>
   <p>CONTENUTO</p>
 </body>

</html>

Link W3C