• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML5, CSS3 e Javascript per sviluppare Web App per tutti gli schermi - Codemotion 2013

on

  • 2,592 views

 

Statistics

Views

Total Views
2,592
Views on SlideShare
2,534
Embed Views
58

Actions

Likes
7
Downloads
0
Comments
0

1 Embed 58

https://twitter.com 58

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

HTML5, CSS3 e Javascript per sviluppare Web App per tutti gli schermi - Codemotion 2013 HTML5, CSS3 e Javascript per sviluppare Web App per tutti gli schermi - Codemotion 2013 Presentation Transcript

  • HTML5, CSS3 e JavaScript Web app per tutti gli schermi Marco Casario - www.marcocasario.com CTO Comtaste - m.casario@comtaste.com www.linkedin.com/in/marcocasariolunedì 25 marzo 13
  • Chi sono Marco Casario CTO Comtaste www.linkedin.com/in/marcocasario Copyright 2013 www.marcocasario.com 2lunedì 25 marzo 13
  • I miei ultimi libri Copyright 2013 www.marcocasario.com 3lunedì 25 marzo 13
  • I miei corsi Rich Web Apps con HTML5 Responsive Design con HTML5 e CSS3 Copyright 2013 www.marcocasario.com 3lunedì 25 marzo 13
  • Tutto il mondo è ... mobilelunedì 25 marzo 13
  • Il web è cambiato Copyright 2013 www.marcocasario.com 28lunedì 25 marzo 13
  • Smartphones superano i PC Leggi: www.businessweek.com/technology/content/apr2011/ tc20110418_512247.htm Copyright 2013 www.marcocasario.com 28lunedì 25 marzo 13
  • Il Web è uscito dal desktop Copyright 2013 www.marcocasario.com 29lunedì 25 marzo 13
  • Dove gli utenti usano il mobile Copyright 2013 www.marcocasario.com 28lunedì 25 marzo 13
  • Le opzioni RESPONSIVE NATIVO Siti d’informazione e blogs Softwares Portfolio Videogiochi Magazine Finanza WEB STORE OTTIMIZZATO IBRIDO Softwares Retail Videogiochi Search Multimedia Software As a Service Copyright 2013 www.marcocasario.com - CONFIDENZIALE - 15lunedì 25 marzo 13
  • Versioni ottimizzate per mobile Che succede se il link è condiviso sui social network ? Copyright 2013 www.marcocasario.com 30lunedì 25 marzo 13
  • Responsive Web Design Il movimento del Responsive Web Design risale ad un articolo del 2010 di Ethan Marcotte scritto per A List Apart titled “Responsive Web Design.” in cui dichiarava: responsive design is not about “designing for mobile.” But it’s not about “designing for the desktop,” either. Rather, it’s about adopting a more flexible, device- agnostic approach to designing for the web Copyright 2013 www.marcocasario.com 28lunedì 25 marzo 13
  • Responsive Architecture Da vedere: http://vimeo.com/4661618 Copyright 2013 www.marcocasario.com 32lunedì 25 marzo 13
  • Responsive Web Design Copyright 2013 www.marcocasario.com 28lunedì 25 marzo 13
  • Difficult to see. Always in motion is the future. Copyright 2013 www.marcocasario.com 28lunedì 25 marzo 13
  • Non si compete con la tecnologia Non possiamo creare una versione ottimizzata per ogni dispositivo che uscirà sul mercato. Copyright 2013 www.marcocasario.com 31lunedì 25 marzo 13
  • HTML5 è tra noi !lunedì 25 marzo 13
  • Quando sarà finito HTML5 Il W3C ha presentato un piano secondo il quale le specifiche di HTML5 saranno finali e consolidate a fine 2014 Le specifiche HTML 5.1 saranno invece finalizzate per il 2016. Copyright 2013 www.marcocasario.com 28lunedì 25 marzo 13
  • HTML5 Macro aree Copyright 2013 www.marcocasario.com 28lunedì 25 marzo 13
  • Top 5 HTML5 Mobile Features Geolocation Offline Application CSS3 Media Queries Video and Audio Canvas and WebGL Copyright 2013 www.marcocasario.com 28lunedì 25 marzo 13
  • Errori da evitare Approccio incrementale ad HTML5 Copyright 2013 www.marcocasario.com 28lunedì 25 marzo 13
  • Strategie per passare al RWDlunedì 25 marzo 13
  • Il contesto di utilizzo Gli utenti che navigano il web dai dispositivi mobili hanno bisogno dello stesso contenuto di quelli che usano il web browser dal desktop ? Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo E’ corretto pensare che l’utente seduto davanti al desktop può “digerire” più informazioni, mentre chi naviga col cellulare è on the move e quindi non può concentrarsi su troppo contenuto ? Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo Non si può rispondere a queste domande senza conoscere in maniera approfondita quelli che sono gli obiettivi degli utenti finali. Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo Cross-screen Web App Workflow Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Strategie da usare - Il vecchio approccio Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo 1. Cosa è importante per gli utenti + Application Map Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo 2. Mockup a bassa fedeltà Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Strategie da usare - Mockup Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo Mockup Bassa Fedeltà Link: http://www.balsamiq.com/products/mockups Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo Mockup Bassa Fedeltà Link: http://proto.io/ Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo 3. Rapid Prototyping (markup fluido) Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Strategie da usare - Rapid Proto Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo 4. Testo su dispositivi mobili per valutare contenuti e application flow Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo 5. Ciclo di revisione e creazione dei visuals e style guide Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo 6. Markup dei visuals con stili grafici Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Layout Patterns - Tipologie Copyright 2013 www.marcocasario.com 24lunedì 25 marzo 13
  • Layout Patterns Copyright 2013 www.marcocasario.com 25lunedì 25 marzo 13
  • Il contesto di utilizzo 7. Test del markup sui device mobili Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo 8. Primi test di performance e load time Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Il contesto di utilizzo 10. Migliora, implementa e refactoring Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Ingredienti per RWDlunedì 25 marzo 13
  • Ingredienti per il RWD ★Flexible Grid-based layout ★Flexible images and media ★Media Queries Copyright 2013 www.marcocasario.com 33lunedì 25 marzo 13
  • Creare griglie flessibili Libro: Ordering Disorder: Grid Principles for Web Design, Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Adaptive Images - W3C Esistono già diverse soluzioni ed approcci al problema, anche se sono articolate e non sempre risolvono interamente il problema. Esiste un progetto standard del W3C ma che ancora non è supportato dai browser (dati di Novembre 2012) www.responsiveimages.org Copyright 2013 www.marcocasario.com 47lunedì 25 marzo 13
  • Adaptive Images http://adaptive-images.com/ Copyright 2013 www.marcocasario.com 48lunedì 25 marzo 13
  • CSS3 Media Querieslunedì 25 marzo 13
  • Media Queries Sintassi della media query: @media screen and (min-width: 960px) { body { font-family: Merriweather Sans, sans-serif; font-weight:300; font-style:normal; } } Se il browser risponde alle due query, allora viene caricato il css definito al suo interno. Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Caricamento dei Media Queries Le media queries possono essere embeddate nello stylesheet: @media screen and (min-width: 960px) {      body{           font-size: 16px;      } } o importate nel documento come foglio esterno: <link href="style.css" media="only screen and (min- width: 960px)" /> Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Caricamento dei Media Queries Media queries embeddate nello stylesheet ★vengono caricate dal browser anche se non utilizzate, ma effettuano una sola chiamata HTTP. Media queries importate come foglio esterno ★vengono caricate tutte :/ con l’aggravante che le chiamate HTTP sono tante quanti i fogli di sitle da caricare ! Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Media Queries Se hai un layout fisso, convertilo in fluido prima di iniziare a scrivere le media queries. Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Approcci per creare media querieslunedì 25 marzo 13
  • Strumenti per i test Responsive Design Bookmarklet http://responsive.victorcoulon.fr Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Approccio per creare le MQ Lasciarsi guidare dal contenuto DEMO: Lanciare il mediaQuery Bookmarklet Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • CSS Frameworks Sono un insieme di CSS files che contengono delle regole. Queste regole determinano il layout ed il contenuto di una pagina html Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Scegliere un framework Esistono centinaia di framework. I framework possono essere riassunti in 3 tipi: ★UI Frameworks (Bootstrap) ★Framework omnicomprensivi (Foundation4, Gumby, YAML, ) ★Framework minimali (es. Skeleton, Base, Kube, Goldilocks) Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Framework Si/No ? Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Framework Si/No ? Scegliere un framework significa usare l’approccio allo sviluppo di qualcun’altro. Scegliere un framework significa ridurre i tempi di sviluppo (il più delle volte) Scegliere un framework significa non dover reinventare la ruota ogni volta (consistenza tra i browsers, hacks ..) Scegliere un framework significa usare uno standard e delle convenzioni nello sviluppo. Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Framework Si/No ? Il mio consiglio ? Fatevi una lista degli obiettivi del vostro progetto: compatibilità tra browser, velocità di sviluppo, aiuto sul layout, etc. Provate tanti framework, capite quali soluzioni sono state trovate e come sono state implementate. Imparate dalle loro best practice. Depurate il codice che non usate ma che è incluso nel framework Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Framework Si/No ? Il mio consiglio ? Infine scegliete quello che è più vicino al vostro approccio considerando anche aspetti di diffusione e di community. Se proprio non riuscite, allora createvi il vostro framework ! Leggete bene il licensing. Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Framework Si/No ? Esplorate Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • RESS: Responsive Server Tecnica che usa il server per generare il codice a seconda del dispositivo intercettato. Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • RESS: Responsive Server http://wurfl.sourceforge.net/ Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • RESS: Responsive Server https://github.com/jamesgpearce/modernizr-server Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance e load timelunedì 25 marzo 13
  • Performance Da studi di ricerca del settore si evince che gli utent si aspettano di vedere la pagina caricata entro 2 secondi. Dopo il 3 secondo il 40% degli utenti abbandona il sito. Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Amazon ha dichiarato che ogni 100ms di tempo aggiunto al caricamento di una pagina fa decrementare le vendite del 1% Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Il RWD se approcciato male può drammaticamente impattare sulle performance e sui tempi di caricamento delle pagine. Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance http://goo.gl/bdpzJ Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Pulisci il codice HTML riducendo gli elementi non semantici. Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Rimuovi dai CSS gli statement orfani. Usa tool appositi www.sitepoint.com/dustmeselectors/ Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Misura le performance dei CSS3 http://andy.edinborough.org/CSS-Stress-Testing-and- Performance-Profiling Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance CSS minification http://www.csscompressor.com/ PS: Usa il <link> invece del @import per permettere il download parallello Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Ottimizzare l’uso delle immagini. Usare gli Sprites http://alistapart.com/article/sprites http://spriteme.org/ Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Usare la tecnica del Data URIs .embeddedImg { background-image: url("data:image/ png;base64,iVBORw0KGgoAAAANS ... UhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg=="); } http://software.hixie.ch/utilities/cgi/data/data http://www.motobit.com/util/base64-decoder-encoder.asp Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Usare Icon Fonts http://icomoon.io/ Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Comprimi le immagini. http://imageoptim.pornel.net/ http://developer.yahoo.com/yslow/smushit/ http://pmt.sourceforge.net/pngcrush/ Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Ottimizza la sintassi JavaScript Evita l’uso dell’eval() Fai attenzione all’uso di with Evita il try..catch (se sai che un errore si verificherà sicuramente) Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Pubblica i file Javascript e CSS su un subdomain diverso dal markup. Questo permette il caricamento parallelo delle risorse. Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Minify JavaScript jscompress.com www.minifyjavascript.com www.jsmini.com http://marijnhaverbeke.nl/uglifyjs Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Connessione – Detect client side W3C Network Information API Usa la proprietà navigator.connection.type che ritorna WIFI, CELL_2G, CELL_3G if (navigator.connection.type==navigator.connection.WIFI) {} Copyright 2013 www.marcocasario.com 53lunedì 25 marzo 13
  • HTTP Testing – Bandwidth throttling http://www.charlesproxy.com/ Copyright 2013 www.marcocasario.com 55lunedì 25 marzo 13
  • HTTP Testing – Bandwidth throttling Copyright 2013 www.marcocasario.com 55lunedì 25 marzo 13
  • Redirect – Do not ! Evitare i redirect Il sito sarà più SEO-friendly Alcuni browser mobile possono presentare dei problemi Copyright 2013 www.marcocasario.com 56lunedì 25 marzo 13
  • Gestures – Touch not Click I device touch hanno un ritardo nel click tra i 300 e i 500 ms prima di essere eseguiti ! Utilizza l’evento onTouchEvent (datatype ACTION_UP)  Attenzione all’evento onTouchStart perchè a volte il tap risulta troppo responsive ma causa lo scrolling ad essere inusabile. Copyright 2013 www.marcocasario.com 57lunedì 25 marzo 13
  • Gli ultimi consigli Parsare Javascript richiede tempo (anche 100ms per 1Kb) Copyright 2013 www.marcocasario.com 58lunedì 25 marzo 13
  • Gli ultimi consigli Ti serve veramente un framework ? Jquery impiega 6 secondi ad essere parsato su alcuni dispositivi. Copyright 2013 www.marcocasario.com 59lunedì 25 marzo 13
  • Gli ultimi consigli Jquery Mobile non è un piccolo framework, è un UI framework ed usa il core di Jquery. Copyright 2013 www.marcocasario.com 60lunedì 25 marzo 13
  • Gli ultimi consigli Usa micro frameworks o creati le tue mini libraries ★ XUI ★ zepto.js ★ microjs Copyright 2013 www.marcocasario.com 61lunedì 25 marzo 13
  • Gli ultimi consigli Se usi JSON (dovresti) ricorda che il JSON.parse è quasi 2 volte più veloce della funzione eval() Copyright 2013 www.marcocasario.com 62lunedì 25 marzo 13
  • Gli ultimi consigli Usare HTML5 Application Cache <html manifest="example.appcache“> Copyright 2013 www.marcocasario.com 63lunedì 25 marzo 13
  • Gli ultimi consigli Usare HTML5 Local Storage Ricorda che lo storage di stringhe è 2 volte più veloce dello storage di oggetti Su mobile puoi considerare fino a 2 Mb. Copyright 2013 www.marcocasario.com 64lunedì 25 marzo 13
  • Persistent Cache Size by Browser Copyright 2013 www.marcocasario.com 64lunedì 25 marzo 13
  • Performance - Test http://developer.yahoo.com/yslow/ Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance - Test Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance - Moduli Backend www.gzip.org Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance - Moduli Backend https://developers.google.com/speed/ Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance - Moduli Backend YUI Compressor http://yui.github.com/yuicompressor/ Vedi www.slideshare.net/nzakas/extreme-javascript- compression-with-yui-compressor Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Performance - Moduli Backend YUI Compressor Vedi www.slideshare.net/nzakas/extreme-javascript- compression-with-yui-compressor Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Strategie da usare - Architettura client Questa potrebbe essere una lista dei moduli JS che il client deve gestire: ★Navigation ★Remote Data Access ★Authentication/Authorization ★Decouple View from Application Model (MVC pattern) ★Modularization/Packaging ★Dependency Management ★Logging/Tracing ★Exception Handling Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Strategie da usare - Architettura client Questa potrebbe essere una lista dei moduli JS che il client deve gestire: ★Backbone.js – Javascript MVC/Navigation framework ★Require.js – AMD based module organization and library dependency management ★_Underscore.js – Provide functional programming features to Javascript ★Jquery Mobile – Document Object Model(DOM) access and manipulation ★Zepto.js - MVC framework compatibile Jquery ★XUI.js, Flight by Twitter Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Strategie da usare - Architettura client Copyright 2013 www.marcocasario.com 36lunedì 25 marzo 13
  • Emulatori Ne esistono tantissimi, molti dei quali gratuiti. Sono utili come prima fase di testing e non possono essere considerati affidabili al 100% http://www.mobilexweb.com/emulators Copyright 2013 www.marcocasario.com 51lunedì 25 marzo 13
  • HTML5, CSS3 e JavaScript Web app per tutti gli schermi Marco Casario - www.marcocasario.com CTO Comtaste - m.casario@comtaste.com www.linkedin.com/in/marcocasariolunedì 25 marzo 13