Video & Html5

html5&video

Nel codice html5 sono presenti alcuni tag che stanno rivoluzionando completamente il web, prima era necessario sviluppare in Flash per realizzare contenuti visivamente dinamici come animazioni e video, oggi grazie agli elementi VIDEO e CANVAS possiamo addirittura renderizzare oggetti in modalità live.

Di seguito alcuni progetti web che sfruttano le potenzialità dei nuovi elementi introdotti nel codice.

kunstler

web-eyewear

editorial-experience

Immagini responsive

mobile
Nella fase di progettazione di un tema responsive rimane ancora molto complessa la questione di come gestire le immagini.
Si stanno valutando nuovi attributi e nuovi elementi per fornire ad ogni  utente una immagine ottimizzata con il miglior rapporto tra dimensione e risoluzione dello schermo.
 
In un sito oggi si presentano diverse situazioni che ne rendono complessa la gestione.
Possiamo avere immagini in primo piano o le immagini di sfondo. Dobbiamo tenere in considerazione le dimensioni delle immagini, la risoluzione per non parlare poi delle dimensioni degli schermi, dei formati e delle loro risoluzioni, senza poi tralasciare i differenti dispositivi, browser e la banda a disposizione sul desktop e in mobilità.
 
Tutti quanti noi vorremmo una cosa molto semplice: la sola soluzione che invia l’immagine con le dimensioni e la risoluzione più appropriata in base al browser e dispositivo che effettua la richiesta, che può essere reso accessibile.
Una sciocchezza aggiungerei, cosa ci vorrà mai, sicuramente in giro si troverà qualcosa del genere.
 
Effettivamente ho trovato un articolo che parla della tecnica del metodo “Auto Clown” dicono sia la cosa più vicina a quello che stiamo cercando.
Soluzione non perfetta ma che da ottimi risultati. Sinceramente non sono riuscito a venirne a capo.
 
Per le immagini di sfondo ci aiutano le Media query ma per le immagini in primo piano ancora nessuna libreria ci da una mano.
 
Vediamo quindi alcune soluzioni più semplici torvate in rete.
 
La prima utilizza alcuni attributi del tag <img>.
Con questa tecnica si propone Il <picture> elemento che sfrutta la semantica del HTML5 e <video> che con il supporto delle media query possono scambiare file di origine differenti:
 
 < picture alt=”responsive image”> <source src=”large.jpg” media=”(min-width:1600px), (min-resolution: 136dpi) and (min-width:800px)”> <source src=”medium.jpg” media=”(min-width:800px), (min-resolution: 136dpi) and (min-width:400px)”> <source src=”small.jpg”> <!– fallback –> <img src=”small.jpg” alt=”responsive image”> </picture> 
 
 
Un altro metodo invece potrebbe essere quello di utilizzare l’attributo srcset :
 <img alt=”responsive image” src=”small.jpg” srcset=”large.jpg 1600w, large.jpg 800w 1.95x, medium.jpg 800w, medium.jpg 400w 1.95x”> 
 
Spero possa l’articolo possa essere di aiuto, cercherò di approfondire e capire meglio la tecnica del “auto clown”.

Un motore di ricerca molto utile: Vector.us

vectorus

Vector.us è un motore di ricerca per grafici e web designer molto semplice a mio parere molto utile.
Schermata essenziale in stile Google, in basso sono riportate le anteprime dei file più popolari estratti dal motore, dopo che sono stati caricati i risultati è possibile fare delle scremature per tipologia di file (svg, ai, png etc.).