La Scaricata
Vuoi reagire a questo messaggio? Crea un account in pochi click o accedi per continuare.
World AIDS
AVERT - AIDS charity
Quanti visitatori oggi?
DONAZIONE
AIUTACI A CRESCERE:
DONAZIONE LIBERÀ
Flusso RSS


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


I postatori più attivi del mese
Nessun utente


GUIDA per Creare un sito web per l'iPhone

Andare in basso

GUIDA per Creare un sito web per l'iPhone Empty GUIDA per Creare un sito web per l'iPhone

Messaggio Da florin88 Mer Dic 08, 2010 11:08 pm

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.

Codice:

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.
Codice:

01.<div id="page_wrapper">
02.    <h1>Engage Interactive</h1>
03.    <div id="content_left">
04.        <p>You are now holding your phone to the left</p>
05.    </div>
06.    <div id="content_right">
07.        <p>You are now holding your phone to the right</p>
08.    </div>
09.    <div id="content_normal">
10.        <p>You are now holding your phone upright</p>
11.    </div>
12.    <div id="content_flipped">
13.        <p>This doesn't work yet.</p>
14.    </div>
15.</div>

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.


LA GUIDA CONTINUA QUI
florin88
florin88
Admin

Numero di messaggi : 7128
Data d'iscrizione : 18.12.08
Età : 35
Località : Ca' Savio bronx (VE)

http://www.flaviusso.altervista.it

Torna in alto Andare in basso

Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.