{"id":1469,"date":"2009-12-31T11:27:20","date_gmt":"2009-12-31T10:27:20","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=1469"},"modified":"2009-12-31T16:06:53","modified_gmt":"2009-12-31T15:06:53","slug":"g002-creiamo-una-splash-screen","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/g002-creiamo-una-splash-screen\/","title":{"rendered":"G#002 – Creiamo una Splash Screen"},"content":{"rendered":"

\"\"<\/a> Eccoci al secondo appuntamento con i Tutorial della sezione “Grafica” del nostro sito. Oggi parleremo della Splash Screen. Probabilmente conoscerete gi\u00e0 la funzione della Splash Screen, ad ogni modo, se non sapete di cosa si tratta, sappiate che questa non \u00e8 nient’altro che la schermata che compare in fase di caricamento dell’applicazione. Questa potrebbe rimanere visibile per pochi istanti come per diversi secondi, in base al tempo che occorre per il caricamento dell’applicazione vera e proria. Voi dovrete comunque prendere in considerazione il fatto che il tempo di caricamento potrebbe essere davvero minimo e di conseguenza la durata di visualizzazione di questa vista risulterebbe davvero breve. Essa dovr\u00e0 contenere quindi pochi elementi tali da permettere una eventuale rapida visione e comprensione.<\/p>\n

Solitamente questa schermata, definita tramite un’immagine<\/strong>, viene sfruttata per mostrare il logo o il nome dell’applicazione o dell’azienda produttrice, anche se Apple raccomanda di mostrare l\u2019immagine di partenza del programma per dare l\u2019impressione che il caricamento del programma sia pi\u00f9 veloce.<\/p>\n

Le dimensioni totali devono essere 320 pixel in larghezza per 480 pixel in altezza<\/strong>. Non sussiste la problematica di ridurre eventualmente l’altezza in quanto la visualizzazione sar\u00e0 a pieno schermo, ovvero senza la Status Bar.<\/p>\n

Un primo consiglio \u00e8 quello di impostare l’immagine o il logo rivolto dal lato in cui si eseguir\u00e0 l’applicazione, portrait o landscape (visualizzazione rispettivamente in verticale o in orizzontale), permettendo di sfruttare questi pochi attimi dall’utente per capire e rivolgere quindi il proprio dispositivo nella direzione corretta.<\/p>\n

Ricordo a chi sfrutta grafica in stile “web 2.0” di considerare anche il relativo riflesso per il posizionamento dell’immagine, in modo da non ottenere un risultato sbilanciato nell’immagine complessiva.<\/p>\n

Personalmente preferisco sfondi molto puliti, magari supportati da una giusta sfumatura, niente comunque di eccessivo, questo se lo scopo \u00e8 semplicemente quello far risaltare il logo. Consiglio inoltre di utilizzare colori che abbiano attinenza con quelli dell’applicazione, in modo da dare una continuit\u00e0 grafica all’intero programma.<\/p>\n

Per coloro che volessero inserire immagini grafiche pi\u00f9 complesse, magari nel caso di giochi, per dar modo all’utente di “entrare fin da subito” nell’ambiente di gioco, ricordo, come gi\u00e0 indicato sopra, che il tempo di visualizzazione della Splash Screen potrebbe essere davvero di pochi attimi rischiando di ottenere un effetto confusionario e di conseguenza sgradevole a causa della visione troppo rapida di un determinato numero di elementi, in questo caso, probabilmente inutili. Non ci sono per\u00f2 solo lati negativi nel mettere un’immagine complessa, se durante i vostri test di esecuzione vi accorgete che i tempi di caricamento della vostra App sono abbastanza lunghi, allora potreste approfittare di questo creando qualcosa di pi\u00f9 di una semplice visualizzazione del nome o del logo e otterreste comunque un ottimo risultato. Potreste per esempio mostrare i comandi del gioco o informazioni e curiosit\u00e0 aggiuntive dell’applicazione che allieverenno sicuramente l’attesa del caricamento che non risulter\u00e0 cos\u00ec frustrante per l’utente finale.<\/p>\n

Altra considerazione, ricordate che l’occhio umano distribuisce la visione degli elementi in maniera occidentale (logicamente per noi abituati a leggere alla maniera occidentale) perci\u00f2 se vorrete inserire pi\u00f9 elementi, per agevolare una rapida lettura ricordatevi di effettuare il giusto bilanciamento dall’angolo superiore sinistro a quello inferiore destro. Cercate inoltre di NON inserire pi\u00f9 di 7 parole\/elementi, questo infatti \u00e8 il numero ottimale per una rapida comprensione e memorizzazione.<\/p>\n

Di seguito un semplice esempio di una Splash Screen creata per una visualizzazione rapida che mostra esclusivamente un logo:<\/p>\n


\n\"\"<\/a>
\n<\/center><\/p>\n

Come vedete \u00e8 un’ipotesi di Splash Screen davvero semplice, che risulta chiara e pulita. Il logo centrale, un pizzico di stile “web 2.0” grazie al riflesso e l’impostazione generale, nulla di pi\u00f9.<\/p>\n

Per far si che l’immagine diventi la vostra Splash Screen non dovrete far altro che realizzarla, come detto, delle dimensioni 320×480 pixel<\/strong>, salvarla in formato .PNG e chiamarla Default.png<\/strong>. Attenzione alla prima lettera del nome “D” maiuscola. Fatto questo aprite Xcode, trascinate la vostra immagine in “Resources”, spuntate l’opzione “Copy items into destination group’s folder (if needed)<\/strong>” nella finestrella che si apre e cliccate infine su “Add”. <\/p>\n

Il lavoro termina qui, potete cliccare in Xcode su “Build & Run” e provare la vostra nuova Splash Screen tramite iPhone Simulator o direttamente nel vostro “melafonino”.<\/p>\n","protected":false},"excerpt":{"rendered":"

Eccoci al secondo appuntamento con i Tutorial della sezione “Grafica” del nostro sito. Oggi parleremo della Splash…<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[70],"tags":[70,73,1],"class_list":["post-1469","post","type-post","status-publish","format-standard","hentry","category-grafica-e-design","tag-grafica-e-design","tag-splash-screen","tag-tutorial-pratici"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/1469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=1469"}],"version-history":[{"count":26,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/1469\/revisions"}],"predecessor-version":[{"id":1527,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/1469\/revisions\/1527"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=1469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=1469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=1469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}