Creare un sito web per l'iPhone

Creare un sito web per l'iPhone

Predisporre la pagina

Così come ogni altro browser, Safari ha bisogno dell'usuale codice HTML e non c'è alcun pericolo nell'inserire alcune keyword nella pagina, poichè Google sarà perfettamente in grado di ispezionare la pagina. Inoltre ci sono alcuni meta tag specifici per l'iPhone che si possono usare per controllare il modo in cui la pagina viene resa. Ecco un esempio qui sotto.

1: <head>2:   <title>Engage Interactive</title>3:     <meta name="viewport"4:         content="width=device-width; 5:         initial-scale=1.0; 6:         maximum-scale=1.0;">7:      <link rel="apple-touch-icon" 8:         href="images/template/engage.png"/>9: </head>10: <body onorientationchange="updateOrientation();">11: </body> 

Le linee 3-6 dicono a Safari che il viewport dovrebbe avere la stessa dimensione del display dell'iPhone (si veda questa pagina per maggiori informazioni sul viewport). Di solito il display dell'iPhone agisce come una finestra in cui la pagina web diventa il suo sfondo. Questo codice forza il contenuto ad adattarsi al display dell'iPhone.

La linea 4 serve per la creazione di icone utili per il bookmarking del sito. L'immagine dovrebbe essere in formato PNG di dimensioni pari a 57px per 57px. Non è necessario aggiungere luminosità o angoli poichè lo farà già per noi l'iPhone.

La linea 10 esegue una funzione javascript ogni qual volta si ruota il dispositivo. Se ne discuterà più in là nell'articolo.

Disposizione del contenuto

Prima di addentrarci nei mandri dei fogli di stile e di javascript abbiamo bisogno di predisporre i contenitori per i vari stati in cui si terrà il dispositivo.

<div id="page_wrapper">
    <h1>Engage Interactive</h1>
    <div id="content_left">
        <p>You are now holding your phone to the left</p>
    </div>
    <div id="content_right">
        <p>You are now holding your phone to the right</p>
    </div>
    <div id="content_normal">
        <p>You are now holding your phone upright</p>
    </div>
    <div id="content_flipped">
        <p>This doesn't work yet.</p>
    </div> 
</div> 

 

<a href="/img/23/sitoiPhone_iframe1.html" title= "Vedi esempio">Vedi codice</a>;

 

Prima di tutto abbiamo bisogno di un contenitore che ingloberà tutto il contenuto della pagina. Questo servirà anche allo script javascript per cambiare dinamicamente la classe di questo contenitore.

In seguito si può mettere un logo, giusto per mostrare del contenuto che sarà visibile a prescindere dall'orientamento dell'iPhone.

Infine abbiamo i vari DIV che fungeranno a loro volta da contenitori. Sebbene al momento l'iPhone supporti solamente l'orientamento sinistro, destro e verticale, c'è l'opportunità che possa supportare il capovolgimento. Ogni area è unica in quanto ha un suo ID e avranno lo stile display:none e display:block. A parte ciò, probabilmente è meglio evitare qualsiasi altra cosa più sofisticata dell'utilizzo di sfondi colorati o con immagini e delle dimensioni.

Uno sguardo ai CSS

I fogli di stile sono molto importanti per il cambio di contesto dei contenuti, usando le classi e gli ID possiamo assicurarci che verrà mostrato solo il corretto contenuto. Prima di tutto quindi, dobbiamo predisporre la pagina in maniera tale che nessuno degli stili di default dell'iPhone andrà ad interferire con i nostri.

/*-----------------------------  RESET STYLES  -----------------------------*/
    html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
    margin:0;
    padding:0;
    -webkit-text-size-adjust:none;
    }
  body{
    font-size: 10px;
    }
  ul, li, ol, dl, dd, dt{
    list-style:none;
    padding:0;
    margin:0;
    }
  a{
    text-decoration:none;
    } 

 

<a href="/img/23/sitoiPhone_iframe2.html" title= "Vedi esempio">Vedi codice</a>;

 

La parte più importante del codice è la linea -webkit-text-size-adjust:none;, che impedisce a Safari di ridimensionare il testo quando ruotate lo schermo dell'iPhone. Il comportamento di default prevede che mantenendo l'iPhone orrizzontalmente richieda dimensioni del testo maggiori, il che è vero nella maggior parte dei casi quando i siti si allargano, ma in questo caso stiamo forzando il sito web a rientrare nelle dimensioni del display per cui non è necessario.

/*-----------------------------     BASIC PAGE STYLING  -----------------------------*/
    body{
    background:#fff000;
    font-family: Helvetica;
    color:#999;
    }
  p{
    font-size:12px;
    padding-bottom:8px;
    }
  a{
    color:#fff000;
    text-decoration:none;
    }
    /*-----------------------------     HEADINGS  -----------------------------*/
    h1{
    display:block;
    width:112px;
    height:41px;
    background-image:url(images/logo.gif);
    text-indent:-5000px;
    }
    /*-----------------------------     BASIC LAYOUT  -----------------------------*/
    #page_wrapper{
    padding-top:20px;
    background:#000 url(images/page_background.gif) repeat-x;
    overflow:auto;
    } 

 

<a href="/img/23/sitoiPhone_iframe3.html" title= "Vedi esempio">Vedi codice</a>;

 

Gli stili presentati settano semplicemente i colori e le dimensioni dei font per pochi elementi e lo stile del logo e del div principale. Potreste aver notato l'utilizzo del font Helvetica, questo perchè è già presente sull'iPhone.

L'uso di overflow:auto in #page_wrapper serve per far si che ogni elemento libero non scavalchi il DIV contenitore e rimane un'alternativa migliore a <br class=”clear” />.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Sara
Hai dubbi su questo articolo?