FAQ Web design
Un elenco di risposte alle domande più frequenti relative al web design
Attraverso il browser (Google Chrome, Firefox, Safari e altri) del proprio dispositivo mobile è possibile salvare un link sulla schermata Home. Il sistema userà un’immagine per rappresentare il link a quel sito. Di seguito una serie di codici al fine di coprire diverse dimensioni in base al browser e al sistema operativo.
<link rel="shortcut icon" href="/urlassoluto/favicon.ico"/> <link href="/urlassoluto/ac-180x180.png" rel="apple-touch-icon" /> <link href="/urlassoluto/ac-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="/urlassoluto/ac-167x167.png" rel="apple-touch-icon" sizes="167x167" /> <link href="/urlassoluto/ac-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="/urlassoluto/ac-192x192.png" rel="icon" sizes="192x192" /> <link href="/urlassoluto/ac-128x128.png" rel="icon" sizes="128x128" />
Si consiglia di usare 32 x 32 come dimensioni per il favicon.ico.
Inserire il codice HTML linea con una classe:
<br class="mobile-break">
Nel file CSS:
@media screen and (min-width: 600px) {
.mobile-break { display: none; }
}
FREEPIK
Il sito freepik.com ha un ottimo database di immagini. L’account gratuito però richiede sempre che sotto l’immagine ci sia il link al vero autore. La licenza premium invece ti consente di usare le immagini come vuoi anche senza attribuzione. Assicurati anche di salvare da qualche parte (anche un foglio di Excel o una cartella del computer) i riferimenti della licenza delle immagini che usi sul tuo sito, così in futuro, se qualche Photography defender cercherà di attaccarti, avrai le prove della licenza.
ALTRI SITI A PAGAMENTO PER TROVARE IMMAGINI DI QUALITA’
LINK UTILI
La seguente risorsa di Google può aiutarti nel trovare immagini che puoi usare nel tuo sito: https://support.google.com/websearch/answer/29508?co=GENIE.Platform%3DAndroid&hl=it
Utilizzando i page builder è possibile che un addon o blocco contenga un elemento div che però non comprenda tutta l’area del blocco. Per espandere il link interno al fine di abbracciare tutta l’area del div esterno è possibile utilizzare questa soluzione in css:
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
Se hai un’immagine troppo alta affiancata a del testo, puoi regolare la sua altezza, tagliandola e regolando la sua posizione, mantenendo la sua proporzione con il seguente metodo in CSS: https://themetry.com/css-image-cropping/
Inserisci il seguente codice CSS sostituendo “target” con la tua classe o id:
target::before {
content: "";
display: block;
height: 60px; /* fixed header height*/
margin: -60px 0 0; /* negative fixed header height */
}Tenere premuto il tasto Shift e cliccare sulla freccia refresh del browser.
A tal proposito si consiglia l’utilizzo del sito https://gwfh.mranftl.com/fonts che mostra la corretta implementazione di un font di Google.
Puoi usare questo sito per creare una regola css che trasformi il colore della tua immagine: https://codepen.io/sosuke/pen/Pjoqqp