IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Pantalla de presentació inicial d'una aplicació que sol mostrar el logo o la imatge de l'aplicació.

NOTA: Durant el temps que dura l'splash screen l'aplicació pot aprofitar per pre-carregar o preparar certes tasques de l'aplicació

Exemples

Web Apps

Les aplicacions web que s'executin en mòbils Android (Android Chrome) poden millorar la seva Experiència d'usuari per tal que l'ús de les aplicacions web sigui més similar a l'ús d'aplicacions natives i per això s'introdueixen conceptes com:

Però un cop l'aplicació web està "instal·lada" al mòbil i l'usuari fa clic a la icona cal tenir en compte el següent:

  • En versions antigues de Android Chrome quan es feia clic a la icona d'execució de la app la pantalla es posava en blanc una estona fins que el mòbil no era capaç de renderitzar la primera pàgina de la app.
  • A la versió 46 de de Chrome per a Android es va introduir la opció background_color al Web App Manifest que mostra aquest color durant a espera.
  • A la versió Android Chrome 47 s'introdueix el concepte de splash screen per emular completament la forma en que s'executen apps natives.

Qüestions importants a tenir en compte:

  • Només funciona en mòbils i mòbils Android que utilitzin Chrome
  • No funciona en pàgines web al obrir un link, només funciona a partir d'una icona instal·lada amb Add to Homescreen

La splash screen es genera dinamicament a partri de la informació del fitxer Web App Manifest i és una combinació de:

  • Name
  • Background_color properties
  • I la icona més propera a icons array a una densitat "128dp"
1dp is 1 physical pixel at a screen density of 160dpi.
1dp = 1px at 160 dpi.
128dp at 1x (160dpi) = 128px
128dp at 1.5x (240dpi) = 192px ( 128 * ( 240 / 160 ) ) 128dp at 2x (320dpi) = 256px 
128dp at 3x (480dpi) = 384px (Equivalent to Nexus 5)
128dp at 4x (640dpi) = 512px (Nexus 6 is in between 3 and 4)

El mínim es 192px però es recomana:

192x192px (mínim) però també es recomanen altres versions:
256px, 384px i 512px. 

Exemple de fitxer manifest:

{  
  "short_name": "Voice Memos",  
  "name": "Voice Memos",  
  "start_url": "./?utm_source=web_app_manifest",  
  "icons": [  
    {  
      "src": "/images/icon-192x192.png",  
      "sizes": "192x192",  
      "type": "image/png"  
    },  
    {  
      "src": "/images/icon-256x256.png",  
      "sizes": "256x256",  
      "type": "image/png"  
    },  
    {  
      "src": "/images/icon-384x384.png",  
      "sizes": "384x384",  
      "type": "image/png"  
    },  
    {  
      "src": "/images/icon-512x512.png",  
      "sizes": "512x512",  
      "type": "image/png"  
    }
  ],  
  "background_color": "#FAFAFA",
  "theme_color": "#512DA8", 
  "display": "standalone",  
  "orientation": "portrait"  
}

Cal assegurar-se de tenir:

  • name it will be displayed at the bottom of the screen
  • Background_color
  • Optional theme_color: que coincideixi amb el de la app per assegurar una millor transició
  • High quality icons that will displayed in the center of the splash screen - ensure your icon is at least 192px.

Llegiu també Progressive Web Apps i vegeu els exemples d'apps de Google:

Recursos:

Apache Cordova

Projecte:

https://github.com/AlexDisler/cordova-splash

Instal·lació:

$ npm install cordova-splash -g
$ sudo apt-get install imagemagick

Només cal tenir una imatge original de mida 2208x2208 com per exemple:

7be562e805f421c4259374ee0c5c33d297ffd3ab.png

Posar-la a l'arrel de cordova i executar:

$ cordova platform add android // S'ha de tenir com a mínim una plataforma
$ cordova-splash


Ionic

Vegeu:

http://ionicframework.com/docs/cli/icon-splashscreen.html

Incorpora una eina per generar automàticament les splash screen a partir d'una imatge 2208x2208 que tingui tot el artwork al centre en un requadre de 1200x1200

Android

Template gratuit amb splash screen:

http://myapptemplates.com/product/filters-sample-android-app-template/

Codi:

https://github.com/krohling/AndroidSplashScreenExample

i

http://www.androidhive.info/2013/07/how-to-implement-android-splash-screen-2/

Exemple amb Dialog

NOTA: Millor amb FragmentDialog ja que Dialog és obsolet

Disseny

Castellà:

https://amatellanes.wordpress.com/2013/08/27/android-crear-un-splash-screen-en-android/

Utilitza draw9patch


http://designmodo.com/create-splash-screen/
http://www.slideshare.net/PocketYourShop/43-inspiratationalsplasscreens
http://www.mobile-patterns.com/splash-screens
http://www.onlymobilepro.com/2013/01/16/android-beginner-creating-splash-screen/

Exemples i imatges

http://www.onlymobilepro.com/2013/01/16/android-beginner-creating-splash-screen/ http://blogs.telerik.com/appbuilder/posts/14-01-02/adding-icons-and-splash-screens-to-your-phonegap-icenium-projects

Vegeu també

Enllaços externs