# Le slide del carosello degli store Ogni slide è una schermata vera dell'app dentro la cornice di un telefono (o di un tablet), con sopra il nome dell'app, un titolo e una frase. Le misure sono quelle che chiedono gli store: | Piattaforma | Misura | Dove va | |---|---|---| | `android` | 1080×1920 | Google Play, telefono | | `ios` | 1320×2868 | App Store, iPhone 6,9" | | `tablet` | 1440×2560 | Google Play, tablet 7" e 10" (stesse slide) | | `ipad` | 2064×2752 | App Store, iPad 13" | ## Cosa serve nell'app Una cartella "store" nel repository dell'app (in QuantoBasta è `docs/store/`): ``` store/ schermate/android/*.png le schermate grezze (dall'emulatore) schermate/ios/*.png (dal simulatore, iPhone da 6,9") schermate/tablet/*.png (dall'emulatore tablet, in verticale) schermate/ipad/*.png (dal simulatore iPad Pro 13", in verticale, 2064×2752) carosello/testi.js i testi e i colori, vedi sotto grafica/icona-512.png per l'anteprima (e per Google Play) grafica/in-evidenza.png 1024×500, senza trasparenza (Google Play) ``` `carosello/testi.js`, per esempio (quello completo è in QuantoBasta): ```js var CAROSELLO = { marchio: 'Quanto Basta', colori: { chiaro: { fondo: '#F4E9DE', testo: '#2E2A26', tenue: '#6E6259', accento: '#AE4F2C' }, scuro: { fondo: '#1C1917', testo: '#F5EDE6', tenue: '#B0A69C', accento: '#E08A5F' }, }, slide: { 1: { foto: '04-riscalata', titolo: 'Le dosi giuste per quanti siete', sotto: 'Cambi le porzioni...' }, 6: { foto: '06b-scuro', titolo: 'Bella anche di sera', sotto: '...', scuro: true, tablet: { sotto: 'Tema chiaro, scuro o quello del dispositivo.' } }, }, piattaforme: { android: [1, 6], ios: [1, 6], tablet: [1, 6] }, }; ``` - `foto` è il nome del PNG in `schermate//`, senza estensione. - Nel titolo `` colora le parole con l'accento. - `scuro: true` usa i colori scuri (per la slide del tema scuro). - `tablet` cambia titolo o frase solo sul tablet ("in tasca" su un tablet non torna). Vale anche per l'iPad. - `piattaforme` dice quali slide fare per ciascuna; una piattaforma senza cartella in `schermate/` si salta. I font di default (Caveat per il nome, Bricolage Grotesque per il titolo, Instrument Sans per la frase) sono in `slide.html`. Per un'app con un'altra identità, `testi.js` può avere un campo facoltativo `font`: ```js font: { link: 'https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&display=block', marchio: 'Barlow Condensed', titolo: 'Barlow Condensed', testo: 'Barlow Condensed', }, ``` `link` è il foglio di Google Fonts da caricare, gli altri tre sono i nomi dei font per il nome dell'app, il titolo e la frase (si può usarne uno solo o tutti e tre). Senza il campo restano i font di default. QuantoBasta non lo usa e non è stato toccato. Di default il telefono esce dal bordo in basso della slide, e si vede solo la parte alta della schermata. Con `intero: true` in `testi.js` il telefono si rimpicciolisce finché ci sta tutto: serve quando in basso c'è qualcosa da far vedere, come la barra del menù di vetro di iOS 26 e successivi (QuantoBasta dalla 1.0.1). L'iPad (`ipad`) ha la cornice sottile del tablet, ma è sempre intero, anche senza `intero: true`: la slide ha le stesse proporzioni dello schermo (3:4) e un iPad largo come la slide ne lascerebbe fuori un terzo, con i tasti in basso. Sull'iPad la testa è più bassa (24vh invece di 30vh) perché titolo e frase, con la slide così larga, stanno di solito su una riga ciascuno: con un titolo di due righe la frase finisce sulla cornice, e va accorciato. Un'altra lingua è un'altra cartella "store" con la stessa struttura (per esempio `docs/store/en/` con `carosello/testi.js` e `schermate/`), generata a parte con `genera.sh docs/store/en`. ## I tasti dell'iPhone (approvati da Paolo il 26/09/2026) Nella piattaforma `ios` la cornice ha i **tasti fisici che sporgono**: a sinistra il tasto Azione e i due del volume, a destra l'accensione. Le misure sono quelle della cornice del simulatore dell'iPhone 17 (Xcode 27, DeviceKit `phone11`), in `slide.html` (`.tasti`). Anche nella piattaforma `ipad` ci sono i tasti (approvati lo stesso giorno): i due del volume sul bordo destro, in alto, e l'accensione sul bordo in alto, vicino all'angolo destro. Misure dalla cornice del simulatore dell'iPad Pro 13" (M5, DeviceKit `tablet5`), un po' più spessi perché si vedano. Android e tablet di Google Play restano senza tasti. Un solo disegno per tutte le app: non si fanno varianti per app. Le slide già caricate sugli store **non vanno rifatte apposta**: i tasti arrivano la prossima volta che un'app rigenera le slide iOS per altri motivi. ## Generare e guardare ```bash "/Users/paolo/Server/Siti Web/_private/ - App/comune/carosello/genera.sh" ``` Esce in `store/carosello/{android,ios,tablet,ipad}/.png`. Serve Google Chrome in `/Applications` e `node`. Per vederle tutte insieme (con Paolo) si apre in Chrome: ``` file:///Users/paolo/Server/Siti%20Web/_private/%20-%20App/comune/carosello/anteprima.html?dir= ``` ## Le schermate grezze - **Android**: emulatore, lingua italiana, barra di stato pulita con la modalità demo di SystemUI: ```bash adb -s shell settings put global sysui_demo_allowed 1 adb -s shell am broadcast -a com.android.systemui.demo -e command enter adb -s shell am broadcast -a com.android.systemui.demo -e command clock -e hhmm 0941 adb -s shell am broadcast -a com.android.systemui.demo -e command battery -e level 100 -e plugged false adb -s shell am broadcast -a com.android.systemui.demo -e command network -e wifi show -e level 4 -e mobile hide adb -s shell am broadcast -a com.android.systemui.demo -e command notifications -e visible false adb -s exec-out screencap -p > schermata.png # alla fine: ... -e command exit ``` - **iOS**: simulatore da 6,9" (iPhone 18 Pro Max), con `xcrun simctl status_bar override --time 9:41 --batteryState discharging` e `xcrun simctl io screenshot schermata.png`. - **iPad**: simulatore iPad Pro 13-inch (M5), in verticale, stessa barra di stato dell'iPhone (`xcrun simctl status_bar override --time 9:41 --batteryState discharging --batteryLevel 100 --wifiBars 3 --dataNetwork wifi`). Prima, in Impostazioni → Multitasking e gesti, **App a tutto schermo**: con «App in finestre» (iPadOS 26 e successivi) la barra di stato mostra il nome dell'app e in basso a destra resta la maniglia per ridimensionare la finestra. - **Tablet**: emulatore tablet in verticale (1600×2560). Le schermate devono mostrare l'app che gira davvero sul tablet, non quelle del telefono. - Le foto dei contenuti di esempio: vere e belle, una per ogni elemento; se una foto non convince (Paolo lo nota subito) si cambia o si toglie l'elemento. ## Trappole viste (Faraway, settembre 2026) - **Sfondo della slide uguale allo sfondo dell'app**: lo schermo del telefono si fonde con la slide. Serve una tinta o una texture che stacchi (Faraway usa una carta macchiata, `Faraway/docs/store/grafica/genera-carta.py`). - **Al massimo due righe** di titolo e due di frase: di più finisce sotto il telefono, soprattutto su Android, dove la slide è più bassa. - **App Store**: il riquadro che si vede per primo è il 6,5" e rifiuta le 1320×2868. Si caricano in Gestione risorse multimediali → Display da 6,9". - **Una alla volta, nell'ordine**, su tutti e due gli store: caricandone diverse insieme l'ordine si rovescia, e il trascinamento per riordinare non ha funzionato. - Faraway ha una copia propria di `slide.html` (i suoi caratteri da `pwa/fonts/`, il logo al posto del nome, e una barra di stato Android finta sopra le schermate dell'iPhone). Per un'app nuova meglio non copiare, ma aggiungere qui un campo facoltativo a `testi.js`. ## Consigli di Apple per le immagini dello store Da https://developer.apple.com/app-store/asset-best-practices/ (letta il 28/09/2026). Valgono anche per Google Play. - **Le prime 3 slide contano di più**: sono quelle che compaiono nei risultati di ricerca. Si parte dalla funzione più forte, e le slide raccontano una storia, nell'ordine in cui si usa davvero l'app. - Ogni slide mostra **l'app in uso**, non solo il titolo o la schermata iniziale. Una sola idea per slide, con un punto chiaro dove guardare. - Testi **brevi**, che aggiungono qualcosa all'immagine invece di descriverla. Vanno **tradotti in ogni lingua** della scheda. - Niente prezzi, sconti, URL, simbolo del copyright, loghi di altri, nomi di piattaforme («Android», «iPhone») nelle immagini. - Stesso stile in tutte le immagini (colori, font, tono) e l'aspetto attuale dell'app. - Le cose importanti al centro: a seconda del dispositivo i bordi possono essere tagliati. - Le immagini devono andare bene per un pubblico 4+, anche se l'app ha un'età più alta. - Facoltativi ma utili: fino a **3 video di anteprima**, girati sull'app vera (partono muti, devono funzionare senza audio, i primi secondi sono i più importanti, niente tagli veloci, il ciclo deve ripartire senza salti). E l'icona a strati per Liquid Glass, fatta con Icon Composer. ## Immagini creative dell'App Store (iOS 27) Da iOS 27 l'App Store usa immagini «creative» (in pratica banner): in testa alla pagina dell'app, nei risultati di ricerca e quando l'app è in evidenza. Si caricano nella libreria risorse di App Store Connect. La pagina di Apple **Stato al 28/09/2026:** la sezione per caricarle in App Store Connect non c'è ancora (cercata da Faraway e QuantoBasta: niente «Libreria risorse» nel menù dell'app, niente in Gestione risorse multimediali né nella pagina della versione). Apple le ha annunciate il 05/08; si caricano appena compare, anche senza una versione nuova. Intanto le immagini restano pronte nei progetti. (developer.apple.com/app-store/asset-best-practices) non dà le misure: le danno i suoi modelli Photoshop, misurati il 28/09/2026. | Immagine | Misura | Area sicura (x, y) | |---|---|---| | Intestazione della pagina | 3840×1646 | 1096-2740, 494-1152 | | Risultati di ricerca | 3840×2560 | 837-3000, 765-1790 | | Formato unico 16:9 | 5244×2950 | 1920-3320, 662-1615 | Logo e frasi solo dentro l'area sicura: fuori può essere tagliato sugli schermi stretti. ### Schema comune (Paolo, 28/09/2026, versione definitiva) Stesso layout per tutte le app, cambiano solo sfondo, colori, font e marchio. Riferimento: `Faraway/docs/store/grafica/intestazione.html` (`?l=`, `?f=ricerca|unico`, `?guida` per vedere il riquadro del testo). - **Il testo sta tutto dentro l'area sicura di Apple**, ed è il più grande possibile: logo e titolo, **niente frase sotto** (sul telefono il banner è largo circa 8 cm e una frase piccola non si legge). - **Titolo su tre righe**, spezzate a mano, con la parte finale nel colore d'accento (Faraway: «Una foto, / e i punti / li conta l'app»). - La grandezza la trova uno script in pagina (`fit()`): parte grande e scende finché logo e titolo stanno nel riquadro. Logo alto 0,6 del titolo, spazio fra logo e titolo 0,15 del titolo, margine interno 12 px. - **Testo centrato** in tutti e tre i formati, **telefoni ai lati**, inclinati verso l'esterno (-7° a sinistra, +6° a destra), fuori dall'area sicura: sono decorazione e possono esserne tagliati. - I telefoni sono **iPhone 17**: cornice, Dynamic Island e tasti fisici (Azione e volume a sinistra, accensione a destra) con le misure della sezione «I tasti dell'iPhone», in proporzione alla larghezza del telefono. | | Intestazione 3840×1646 | Ricerca 3840×2560 | Unico 5244×2950 | |---|---|---|---| | Riquadro del testo = area sicura | 1096,494 · 1644×658 | 837,765 · 2163×1025 | 1920,662 · 1400×953 | | Larghezza telefono | 640 | 780 | 960 | | Sinistro (left, top) | 250, 170 | 110, 420 | 560, 380 | | Destro (right, top) | 250, 140 | 110, 540 | 560, 470 | L'area sicura è piccola: 17% dell'intestazione, 23% della ricerca, 9% del formato unico. Il resto riempie lo sfondo quando il banner si vede più largo. Controlli: `controlla-area-sicura.js` (misura in pagina logo e titolo in ogni lingua e dice OK o FUORI) e le anteprime con il rettangolo rosso. Anteprime per Paolo: `~/Desktop/Banner App Store//`, JPG larghi 1920, nomi `intestazione[-lingua].jpg`, `ricerca[-lingua].jpg`, `unico[-lingua].jpg` (senza suffisso = italiano), più la cartella `area sicura/` con le tre italiane e il rettangolo rosso. Differenze di Spot The Spy dallo schema comune definitivo (28/09/2026): al posto del logo c'è l'icona dell'app con il nome in arancio (il blocco `.logo`, alto 0,6 del titolo come il logo). Tutto il resto è uguale. File: ~/dev/spotthespy/docs/store/grafica/intestazione.html e genera-creative.sh. Due accorgimenti utili a tutte le app: - in fit() conviene misurare le lettere vere del titolo (un Range sul titolo), come fa controlla-area-sicura.js. Col solo riquadro del titolo, con un font alto il fondo usciva di circa 8 px dall'area sicura (FUORI); - genera-creative.sh lancia Chrome con un tempo massimo di 120 s (`perl -e 'alarm 120; exec @ARGV'`) e un secondo tentativo, perché ogni tanto Chrome senza finestra si pianta.