Share
Le applicazioni web per iPhone sono sottovalutate nello sviluppo di iPhone. Tuttavia, sono sorprendentemente facili da configurare. Il processo richiede solo pochi Meta tag.
È consigliabile innanzitutto creare l'applicazione Web e quindi passare alla sua configurazione in un'app Web per iPhone.
L'applicazione stessa, in questo caso, è una semplice pagina che racconta l'ora. Di conseguenza, l'app è denominata 'Tempo'. Usa jQuery per ottenere il risultato finale. Ho usato il plug-in jQuery Clock per farlo in poche righe di jQuery.
Questo è forse il più semplice di tutti i passaggi. Tutto ciò che serve è cambiare il Titolo tag al nome della tua applicazione web.
Tempo
Il prossimo passo è impostare l'icona dell'applicazione. Questa è l'icona 57px per 57px che appare sulla schermata principale dell'iPhone. Sui dispositivi di visualizzazione retina, si tratta di un'icona di 114px per 114px, e si può utilizzare per entrambi semplicemente usando l'icona a risoluzione più alta (i dispositivi più vecchi la ridimensioneranno automaticamente). Userò la seguente icona per questo tutorial:
Ci sono due opzioni per configurare questa icona. Il primo è usare l'icona così com'è, tutto ciò che viene aggiunto sono gli angoli arrotondati. Per fare questo usiamo questo Meta etichetta:
La seconda opzione dà all'icona la mela standard lucidare:
Ho scelto l'icona precomposta e il risultato finale è il seguente:
Durante il caricamento dell'applicazione Web, è possibile scegliere di visualizzare una schermata iniziale. Questa immagine dovrebbe essere 320 x 460 px. Per configurarlo, usa questo Meta tag nella Capo del tuo documento.
Questo è il risultato finale della schermata iniziale.
Il prossimo passo è rimuovere le barre degli strumenti e le barre dei menu predefinite di Apple. Questi sono quelli che mostrano l'indirizzo web e la ricerca in alto e che mostrano i pulsanti segnalibro, avanti e indietro in basso. Questo è fatto con il seguente Meta etichetta:
Puoi anche impostare lo stile della barra di stato. Questa è la barra nella parte superiore dello schermo che mostra informazioni come forza del segnale, batteria e potenza del segnale Wi-Fi. Perché ciò funzioni, l'applicazione deve essere impostata su schermo intero come nel passaggio 5. Per questo Meta tag ci sono tre opzioni.
Il primo è il normale gradiente di grigio:
Il secondo è una barra di stato solido, questa è principalmente l'opzione migliore:
L'ultimo è una barra di stato posteriore trasparente, questo permette all'utente di vedere attraverso la barra di stato:
La nostra barra di stato finale:
Questo Meta tag indica al dispositivo la larghezza della pagina da visualizzare, il valore minimo e massimo dello zoom, il valore iniziale dello zoom e se l'utente ha la possibilità di ingrandire e rimpicciolire. Se il tuo sito web è inferiore a 980px (la larghezza predefinita della visualizzazione della pagina web), la larghezza dovrebbe essere impostata con questo tag. Inoltre, se l'applicazione è specifica per iPhone, la larghezza dovrebbe essere impostata sulla larghezza di iPhone, iPad o iPod Touch. Si dovrebbe anche tenere a mente che invece di utilizzare il valore effettivo della larghezza e dell'altezza dello schermo, i valori di 'Device-width' e 'Dispositivo-height' dovrebbe essere usato. Ecco alcuni tag di esempio:
Ecco tutte le opzioni disponibili:
Ora abbiamo finito di configurare l'applicazione web, aggiungiamola al nostro dispositivo.
L'applicazione Web è ora effettivamente "installata".
Ora, con la configurazione dell'applicazione, sarete in grado di avviarlo dalla schermata principale e poi vedere la schermata iniziale mentre carica. Una volta caricata l'applicazione dovrebbe essere a schermo intero con la barra di stato scelta.
Visualizza l'anteprima dell'applicazione scaricando il file zip allegato. Per testarlo sul tuo dispositivo iOS, dovrai inserire il codice online.
Spero ti sia piaciuto questo tutorial e ti ringrazio per la lettura.
Accentsconagua