CONCETTI IMPORTANTI Programmazione WEB

Transcript

1 CONCETTI IMPORTANTI

2 Conce' importan. Mol>tudine di disposi>vi Standard Web Miglioramen> progressivi Responsive design Accessibilità Performance

3 La mol.tudine dei disposi.vi Quando una pagina si vede bene su un desktop non è demo che si veda bene su altri disposi>vi Non è solo un problema di dimensione dello schermo Cambia la banda La risoluzione la densità dei pixel Ci sono device con alta risoluzione e spesso (rela>vamante) poca banda Non esiste ad oggi la possibilità adamare facilmente i contenu> desktop a disposi>vi mobil

4 Tan. browser

5 Se consideriamo le versioni

6 Cambia nel tempo

7 Gli standard Per ges>re la diversità: Seguire gli standard mol> browser seguono gli standard e la loro evoluzione ci permeme di essere compliant con le evoluzioni future lo potete dire al cliente La verità è che i browser non sono "perfemamente" allinea> e possono creare dei problemi visualizzazioni differen>

8 Miglioramento progressivo Pochi browser implementano totalmente gli standard gli manca sempre qualche nuova tecnologia standardizzata Gli uten> possono cambiare le preferenze dei browser disabilitare javascript bloccare i cookie L'idea è quella di fornire delle funzionalità base per tu[ e di offrire funzionalità avanzate a chi ha browser con maggiori capacità Fornisco un miglioramento progressivo dell'esperienza Approccio che deve riguardare tu[ gli aspe[ dello sviluppo

9 Strategia di produzione Stru=ura della pagina Se il documento è scrimo bene e "marked" corremamente è più semplice renderlo compa>bile con i diversi ambien> non sarà sempre uguale ma il contenuto sarà accessibile Aspe=o della pagina Con il CSS è possibile creare regole base e regole avanzate Alcuni browser ignorano le regole che non conoscono Dinamicità Fornire soluzioni si ripiego se il javascript è disabilitato menu css form con invio base

10 Responsive Web Design Normalmente i device con lo schermo piccolo tendono a restringere la pagina per adamarla allo schermo spesso il testo viene ridomo troppo e non si legge i link sono piccoli da cliccare ges>re lo zoom non sempre fornisce una esperienza piacevole I si> Responsive forniscono layout diversi a seconda della dimensione della finestra di visualizzazione. Un solo documento per tu[ i device ma con s>le variabile a seconda dello schermo

11 Si. per disposi.vi mobili Una soluzione alterna>va al Responsive è la creazione si si> separa> per desktop e mobile spesso si usa un prefisso per dis>nguerli (m. o mbile.) Spesso in ques> si> siamo costre[ a levare molte sezioni del sito Spesso nei si> di no>zie si preferisce questa soluzione vedi repubblica.it Figure 3-4. A comparison of primary and dedicated mobile

12 Accessibilità Ges.re le principali disabilità Problemi di vista Alcuni che vedono poco potrebbero aver la necessità di usare dei carameri molto grandi Problemi di mobilità Alcuni che non possono usare le mani protebbeto navigare il sito con disposi>vi speciali come joys>ck, tas>erini, etc. Problemi acus>ci Se usiamo audio o video dovremmo fornire del contenuto alterna>vo per chi non sente Problemi di apprendimento ProgeMare dei si> semplici

13 Velocità di accesso Si> troppo pesan> non sono accessibili da connessioni lente oggi mol> accedono via cellulare, spesso lentamente Mol> studi dimostrano che la velocità di un sito ne può determinare il successo Se un sito ci meme più di due secondi a caricare cieca 1/3 delle persone se ne vanno e mol> non tornano

14 Migliorare le performance Due grandi categorie limitare la dimensione dei file ridurre il numero di richiesta O[mizzare le immagini ridurre la dimensione ( e la qualità) Minimizzare i documen> HTML, CSS, Javascript rimuovere spazi extra e accapo Tenere javascript al minimo caricare gli script in parallelo Non caricare risorse non necessarie Ridurre in numero di richieste HHTP Ogni richiesta introduce un ritardo