<panel type="danger" title="Spostato!">
Il contenuto di questa pagina è stato spostato [[https://git.mittelab.org/meta/swag|https://git.mittelab.org/meta/swag]]!!
--- //[[user:5p4k|Pietro Saccardi]] 2023/09/04 09:16//
</panel>

----

====== Risorse grafiche (aka Swag) ======

Tutte le risorse grafiche "base" vanno qui. Un [[https://talk.mittelab.org/t/risorse-grafiche-mittelab-swag/|topic analogo]] è aperto su Talk, tuttavia molto materiale è ad uso interno ed anche questo è a suo modo un progetto. Dunque, una pagina Wiki.

  * Elementi grafici riutilizzabili
  * Loghi
  * Template, schemi di colore
  * Risorse pre-renderizzate

**Nota:** SVG è preferibile a PNG. PNG al doppio della risoluzione è preferibile alla risoluzione standard su schermi HiDPI. PNG a risoluzioni differenti sono preferibili dove sia possibile distinguere in base alla risoluzione dello schermo.

===== Color scheme =====
|       Principale|''#7fc0c2'' |
|  Variante chiara|''#a0d7d8'' |
|   Variante scura|''#72a4a6'' |

<file css main.css>
body {
    background-color: #222222;
    color: #ffffff;
}

a {
    color: #0ce3ac;
}
</file>
===== Logo =====
{{ :progetti:swag:logo_inkscape_margin.svg?200|}}
Il logo del Mittelab è realizzato con il font ''Ubuntu''.

  * Inkscape SVG, con margine //(editing, volantini, ...)//: {{ :progetti:swag:logo_inkscape_margin.svg?linkonly }}
  * Clean SVG, senza margine //(embedding nei siti)//: {{ :progetti:swag:logo_tight.svg?linkonly }}

==== Pin logo ====
{{ :progetti:swag:pin_inkscape_margin.svg?50|}}
Elemento distintivo del logo, utilizzato nella Wiki e in Discourse dove lo spazio è ridotto. Per altri scopi, e.g. icona standalone, o per rappresentare Mittelab rapidamente al di fuori di un contesto ovvio, è meglio usare lo shaded pin che è meno anonimo.

  * Inkscape SVG, con margine //(editing, volantini, ...)//: {{ :progetti:swag:pin_inkscape_margin.svg?linkonly }}
  * Clean SVG, senza margine //(embedding nei siti)//: {{ :progetti:swag:pin_tight.svg?linkonly }}

Esiste anche una versione in 3D NURBS e mesh:
  * STL + Rhino:  {{ :progetti:swag:pin3d.zip?linkonly }}

{{ :progetti:swag:pin3d_wireframe.png?direct&400 |}}
===== Shaded pin / touch icon =====
{{ :progetti:swag:pin_shade_1k.png?50|}}
Elemento distintivo del logo al di fuori di un contesto Mittelab, esempio: web app icon, chat icon. Questa icona svolge anche la funzione di ''apple-touch-icon'' (l'icona che viene applicata alla web app quando la pagina web viene aggiunta al main screen sui dispositivi iOS), e di logo nelle chat Telegram.

  * Photoshop ((purtroppo... ma dovrebbe essere fattibile rifarlo in Gimp)) (~1Mpx): {{ :progetti:swag:apple_touch_icon.psd.zip |}} 
  * Apple touch icon, PNG-8 150x150 //(embedding nelle pagine HTML ((via ''<link rel="apple-touch-icon">'')) )//: {{ :progetti:swag:pin_shade_150.png?linkonly|}}
  * PNG-8, 1Mpx //(group photo Telegram)//:{{ :progetti:swag:pin_shade_1k.png?linkonly |}}
  * PNG-24, 1Mpx, canale alpha: {{ :progetti:swag:pin_shade_1k_alpha.png?linkonly |}}

**Nota:** questo tipo di icona //non è precomposed//. Se in futuro vengono aggiunti effetti e vengono arrotondati gli angoli, bisogna specificare ''apple-touch-icon-precomposed''; tuttavia così facendo si perde la diversificazione degli effetti delle icone sui vari dispositivi. 150x150 è la dimensione che permette di avere una risoluzione corretta fino ad iPad Pro.

==== Favicon ====
{{ :progetti:swag:pin_favicon.ico?16|}}
Estratta dal pin (no shade). Più efficace che inserire una PNG e sperare che il browser la ridimensioni usando il ricampionamento corretto. In generale, le icone così piccole andrebbero riviste a mano in maniera che siano efficaci a veicolare il messaggio (i dettagli dell'alta risoluzione si perdono).

  * ICO, 16x16 + 32x32: {{ :progetti:swag:pin_favicon.ico?linkonly |}}

**Nota:** i browser di solito usano 16x16, tranne sui display HiDPI in cui viene usata la 32x32.

===== Team/Services Logos =====
I logo dei vari team e servizi Mittelab
  * NOC: {{ :progetti:swag:teams:mittelab_noc_sign.svg?linkonly |}}
  * Superusers: {{ :progetti:swag:teams:mittelab_su_sign.svg?linkonly |}}
  * Progetti: {{ :progetti:swag:teams:mittelab_projects_sign.svg?linkonly |}}
  * Configurazioni: {{ :progetti:swag:teams:mittelab_config_sign.svg?linkonly |}}
  * Presentazioni: {{ :progetti:swag:teams:mittelab_presenta_sign.svg?linkonly |}}
  * Git: {{ :progetti:swag:teams:mittelab_ser_git_sign.svg?linkonly |}}
  * Talk: {{ :progetti:swag:teams:mittelab_ser_talk_sign.svg?linkonly |}}
  * Tasks: {{ :progetti:swag:teams:mittelab_ser_tasks_sign.svg?linkonly |}}
  * Wiki: {{ :progetti:swag:teams:mittelab_ser_wiki_sign.svg?linkonly |}}
  * Pad: {{ :progetti:swag:teams:mittelab_ser_pad_sign.svg?linkonly |}}

===== SSO Logos =====
Loghi con nome per Single Sign On
  * Git: {{ :progetti:swag:teams:mittelab_sso_git.svg?linkonly |}}
  * Talk: {{ :progetti:swag:teams:mittelab_sso_talk.svg?linkonly |}}
  * Tasks: {{ :progetti:swag:teams:mittelab_sso_tasks.svg?linkonly |}}
  * Wiki: {{ :progetti:swag:teams:mittelab_sso_wiki.svg?linkonly |}}