font di icone

Prendendo spunto da fontawesome ( e con il contributo non indifferente del framework bootstrap ) ci si prensenta l'opportunità di sostituire le nostre sprite di icone con un font:

Il vantaggio del font è che l enostre icone possono essere gestite con le regole dei CSS, per cui essere scalate, colorate, ruotate o ombreggiate a piacere.

Per farlo, è necessaria un poco di pratica con la grafica vettoriale, un programma che salvi gli SVG e, comodissimo, il servizio online IcoMoon App   Icon Font Generator.

svg fgrafica vettoriale

icoMoon
 
 
 
 
 
 
 
 
 
 
 
 

internet

internet, additcted

I motori di ricerca hanno dei filtri che cercano di catalogare cosa ci piace,gli orientamenti politici, le nostre preferenze ecc.e i loro filtri selezionano i risultati, scegliendo quelli che risultano più adatti ai loro parametri su di noi.

Codici di stato HTTP

Quando il tuo server riceve una richiesta per una pagina del tuo sito (ad esempio, quando un utente accede alla tua pagina in un browser o quando Googlebot effettua la scansione della pagina), il tuo server restituisce un codice di stato HTTP in risposta alla richiesta.

Questo codice di stato fornisce informazioni sullo stato della richiesta. Esso fornisce a Googlebot informazioni sul tuo sito e sulla pagina richiesta.

Alcuni dei codici di stato che si incontrano più comunemente sono:

  • 200 - il server ha restituito la pagina con esito positivo

  • 404 - la pagina richiesta non esiste

  • 503 - il server non è temporaneamente disponibile

Di seguito un elenco completo dei codici di stato HTTP.

Per ulteriori informazioni, puoi anche consultare la pagina del W3C sui codici di stato HTTP.

BEM (Block-Element-Modifier)

Una interessante questione in cui mi sono imbattuto leggendo di organizzazione del lavoro web di tipo BEM*, è se le dichiarazioni @import dei css creino o meno altrettante richieste http. La risposta è ( a pensarci bene, ovviamente ) si, si avrà una richiesta per ogni foglio di stile: la cosa migliore è quella di unire e consolidare il css in un unico file per la produzione.

*Block-Element-Modifier ( http://bem.info ) è una tecnica che serve a rendere modulare lo sviluppo web, suddividendo la struttura in blocchi e successivamente in elementi, (ad esempio il blocco 'ricerca' potrebbe essere composto dagli elementi label, input e dal bottone 'cerca') a cui vengono applicati dei Modifiers ( un modificatore è una proprietà di un blocco o di un elemento che ne modifica l'aspetto o il funzionamento: ad esempio, differenziando un pulsante da un altro, una volta estese le proprietà del bottone base, com enell'esempio del bottone 'active' di un menù ), in modo che ciascuna parte possa scalare indipendentemente e rapidamente.Blocchi ed elementi formano il contenuto della pagina.

 

Mobile first

Dallo spunto dell' #IxDT , " una strategia scalabile per essere online su tutti i device ", di qualche mese fa, alcuni appunti su mobile first e responsive.

 

La progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all’ambiente dell’utente (dimensioni dello schermo, piattaforma e l’orientamento del device, etc..): il MF non è una metodologia per creare versioni dei siti ‘ottimizzate’ e specifiche per il mobile: un principio cardine del responsive design infatti è che il web è uno e unico.
 
Nella progettazione del sito è opportuno partire dalla strutturazione dei contenuti per lo schermo limitato nelle dimensioni dei dispositivi mobili: non, quindi, da un layout e da un set di funzionalità concepiti per il desktop per poi adattarli per il mobile, togliendo elementi, ma al contrario, si parte dai limiti posti dai dispositivi mobili per concentrarsi al meglio sui contenuti essenziali, per poi arricchire il tutto sui dispositivi più capaci sia in termini di spazio che di prestazioni.

Transition css3

Possiamo applicare un semplice effetto di transizione di 2 secondi con due semplici righe di codice CSS (+ le dichiarazioni cross-browser):

div {
  width: 200px;
  height: 200px;
  background-color: 98d925#;
 
  transition-property: background-color; /*standard*/
  transition-duration: 2s;
 
  -webkit-transition-property: background-color; /*Safari e Chrome */
  -webkit-transition-duration: 2s;
         
  -o-transition-property: background-color;      /*Opera*/
  -o-transition-duration: 2s;
         
  -moz-transition-property: background-color;    /*Firefox*/
  -moz-transition-duration: 2s;
}
 
div:hover {
  background-color: #ff5c00;
}