HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
Upcoming SlideShare
Loading in...5
×
 

HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario

on

  • 1,588 views

Non esiste il mobile web, il tablet web o il desktop web. E’ sempre lo stesso web solo fruito da dispositivi diversi. In questa sessione rivolta ai web developer, web designer e User Interface ...

Non esiste il mobile web, il tablet web o il desktop web. E’ sempre lo stesso web solo fruito da dispositivi diversi. In questa sessione rivolta ai web developer, web designer e User Interface designer, verranno mostrate le tecniche HTML5, CSS3 e Javascript, gli UX design patterns e le ottimizzazioni necessarie a creare le applicazioni del futuro: quelle che saranno fruibili da qualsiasi dispositivo.

Marco Casario, autore del libro HTML5 Solutions ed Essential CSS3 tecniques (Apress) condividerà le esperienze reali, fatte durante la gestione dei progetti di Comtaste degli ultimi due anni.

Statistics

Views

Total Views
1,588
Views on SlideShare
985
Embed Views
603

Actions

Likes
6
Downloads
58
Comments
0

8 Embeds 603

http://www.ivanomalavolta.com 286
http://milano.codemotionworld.com 192
http://rome.codemotionworld.com 78
http://localhost 28
http://milan2013.codemotionworld.com 9
http://10.92.241.18 7
http://plus.url.google.com 2
http://cloud.feedly.com 1
More...

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario Presentation Transcript

  • HTML5, CSS3 e JavaScriptWeb app per tutti gli schermiMarco Casario - www.marcocasario.comCTO Comtaste - m.casario@comtaste.comwww.linkedin.com/in/marcocasariosabato 23 marzo 13
  • Chi sonoCopyright 2013 www.marcocasario.com 2Marco CasarioCTO Comtastewww.linkedin.com/in/marcocasariosabato 23 marzo 13
  • I miei ultimi libriCopyright 2013 www.marcocasario.com 3sabato 23 marzo 13
  • I miei corsiCopyright 2013 www.marcocasario.com 3Rich Web Apps con HTML5Responsive Design con HTML5 eCSS3sabato 23 marzo 13
  • Tutto il mondo è ... mobilesabato 23 marzo 13
  • Il web è cambiatoCopyright 2013 www.marcocasario.com 28sabato 23 marzo 13
  • Smartphones superano i PCLeggi: www.businessweek.com/technology/content/apr2011/tc20110418_512247.htmCopyright 2013 www.marcocasario.com 28sabato 23 marzo 13
  • Il Web è uscito dal desktopCopyright 2013 www.marcocasario.com 29sabato 23 marzo 13
  • Dove gli utenti usano il mobileCopyright 2013 www.marcocasario.com 28sabato 23 marzo 13
  • RESPONSIVECopyright 2013 www.marcocasario.com - CONFIDENZIALE - 15Le opzioniOTTIMIZZATONATIVOIBRIDOWEB STORERetailSearchSoftware As a ServiceSiti d’informazione e blogsPortfolioMagazineSoftwaresVideogiochiFinanzaSoftwaresVideogiochiMultimediasabato 23 marzo 13
  • Versioni ottimizzate per mobileChe succede se il link è condiviso sui socialnetwork ?Copyright 2013 www.marcocasario.com 30sabato 23 marzo 13
  • Responsive Web DesignIl movimento del Responsive Web Design risale ad unarticolo del 2010 di Ethan Marcotte scritto per A ListApart 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 webCopyright 2013 www.marcocasario.com 28sabato 23 marzo 13
  • Responsive ArchitectureCopyright 2013 www.marcocasario.com 32Da vedere: http://vimeo.com/4661618sabato 23 marzo 13
  • Responsive Web DesignCopyright 2013 www.marcocasario.com 28sabato 23 marzo 13
  • Difficult to see. Always inmotion is the future.Copyright 2013 www.marcocasario.com 28sabato 23 marzo 13
  • Non si compete con la tecnologiaCopyright 2013 www.marcocasario.com 31Non possiamo creare una versioneottimizzata per ogni dispositivo che usciràsul mercato.sabato 23 marzo 13
  • HTML5 è tra noi !sabato 23 marzo 13
  • Quando sarà finito HTML5Il W3C ha presentato un piano secondo il quale lespecifiche di HTML5 saranno finali e consolidate a fine2014Le specifiche HTML 5.1 saranno invece finalizzate per il2016.Copyright 2013 www.marcocasario.com 28sabato 23 marzo 13
  • HTML5 Macro areeCopyright 2013 www.marcocasario.com 28sabato 23 marzo 13
  • Top 5 HTML5 Mobile FeaturesGeolocationOffline ApplicationCSS3 Media QueriesVideo and AudioCanvas and WebGLCopyright 2013 www.marcocasario.com 28sabato 23 marzo 13
  • Errori da evitareApproccio incrementale ad HTML5Copyright 2013 www.marcocasario.com 28sabato 23 marzo 13
  • Strategie per passare al RWDsabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Gli utenti che navigano il web dai dispositivimobili hanno bisogno dello stesso contenuto diquelli che usano il web browser dal desktop ?sabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36sabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36E’ corretto pensare che l’utente seduto davantial desktop può “digerire” più informazioni,mentre chi naviga col cellulare è on the move equindi non può concentrarsi su troppocontenuto ?sabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Non si può rispondere a queste domandesenza conoscere in maniera approfonditaquelli che sono gli obiettivi degli utenti finali.sabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Cross-screen Web AppWorkflowsabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Strategie da usare - Il vecchio approcciosabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Cosa è importante per gli utenti+Application Map1.sabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Mockup a bassa fedeltà2.sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Strategie da usare - Mockupsabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Mockup Bassa FedeltàLink: http://www.balsamiq.com/products/mockupssabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Mockup Bassa FedeltàLink: http://proto.io/sabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Rapid Prototyping (markup fluido)3.sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Strategie da usare - Rapid Protosabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Testo su dispositivi mobili per valutarecontenuti e application flow4.sabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Ciclo di revisione e creazione deivisuals e style guide5.sabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Markup dei visuals con stili grafici6.sabato 23 marzo 13
  • Layout Patterns - TipologieCopyright 2013 www.marcocasario.com 24sabato 23 marzo 13
  • Layout PatternsCopyright 2013 www.marcocasario.com 25sabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Test del markup sui device mobili7.sabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Primi test di performance e load time8.sabato 23 marzo 13
  • Il contesto di utilizzoCopyright 2013 www.marcocasario.com 36Migliora, implementa e refactoring10.sabato 23 marzo 13
  • Ingredienti per RWDsabato 23 marzo 13
  • Ingredienti per il RWDCopyright 2013 www.marcocasario.com 33★Flexible Grid-based layout★Flexible images and media★Media Queriessabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Creare griglie flessibiliLibro: Ordering Disorder: Grid Principles for Web Design,sabato 23 marzo 13
  • Adaptive Images - W3CCopyright 2013 www.marcocasario.com 47Esistono già diverse soluzioni ed approcci al problema,anche se sono articolate e non sempre risolvonointeramente il problema.Esiste un progetto standard del W3C ma che ancora nonè supportato dai browser (dati di Novembre 2012)www.responsiveimages.orgsabato 23 marzo 13
  • Adaptive ImagesCopyright 2013 www.marcocasario.com 48http://adaptive-images.com/sabato 23 marzo 13
  • CSS3 Media Queriessabato 23 marzo 13
  • Media QueriesCopyright 2013 www.marcocasario.com 36Sintassi 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 vienecaricato il css definito al suo interno.sabato 23 marzo 13
  • Caricamento dei Media QueriesCopyright 2013 www.marcocasario.com 36Le media queries possono essere embeddate nellostylesheet:@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)" />sabato 23 marzo 13
  • Caricamento dei Media QueriesCopyright 2013 www.marcocasario.com 36Media 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 lechiamate HTTP sono tante quanti i fogli di sitle dacaricare !sabato 23 marzo 13
  • Media QueriesCopyright 2013 www.marcocasario.com 36Se hai un layout fisso, convertilo in fluidoprima di iniziare a scrivere le media queries.sabato 23 marzo 13
  • Approcci per creare media queriessabato 23 marzo 13
  • Strumenti per i testCopyright 2013 www.marcocasario.com 36http://responsive.victorcoulon.frResponsive Design Bookmarkletsabato 23 marzo 13
  • Approccio per creare le MQCopyright 2013 www.marcocasario.com 36Lasciarsi guidare dal contenutoDEMO: Lanciare il mediaQuery Bookmarkletsabato 23 marzo 13
  • CSS FrameworksCopyright 2013 www.marcocasario.com 36Sono un insieme di CSS files checontengono delle regole.Queste regole determinano il layout ed ilcontenuto di una pagina htmlsabato 23 marzo 13
  • Scegliere un frameworkCopyright 2013 www.marcocasario.com 36Esistono 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)sabato 23 marzo 13
  • Framework Si/No ?Copyright 2013 www.marcocasario.com 36sabato 23 marzo 13
  • Framework Si/No ?Copyright 2013 www.marcocasario.com 36Scegliere un framework significa usare l’approccio allosviluppo di qualcun’altro.Scegliere un framework significa ridurre i tempi disviluppo (il più delle volte)Scegliere un framework significa non dover reinventarela ruota ogni volta (consistenza tra i browsers, hacks ..)Scegliere un framework significa usare uno standard edelle convenzioni nello sviluppo.sabato 23 marzo 13
  • Framework Si/No ?Copyright 2013 www.marcocasario.com 36Il 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 statetrovate e come sono state implementate.Imparate dalle loro best practice.Depurate il codice che non usate ma che è incluso nelframeworksabato 23 marzo 13
  • Framework Si/No ?Copyright 2013 www.marcocasario.com 36Il mio consiglio ?Infine scegliete quello che è più vicino al vostro approccioconsiderando anche aspetti di diffusione e di community.Se proprio non riuscite, allora createvi il vostro framework !Leggete bene il licensing.sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36EsplorateFramework Si/No ?sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36RESS: Responsive ServerTecnica che usa il server pergenerare il codice a secondadel dispositivo intercettato.sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36RESS: Responsive Serverhttp://wurfl.sourceforge.net/sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36RESS: Responsive Serverhttps://github.com/jamesgpearce/modernizr-serversabato 23 marzo 13
  • Performance e load timesabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceDa studi di ricerca del settoresi evince che gli utent siaspettano di vedere la paginacaricata entro 2 secondi.Dopo il 3 secondo il 40% degliutenti abbandona il sito.sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceAmazon ha dichiarato che ogni100ms di tempo aggiunto alcaricamento di una pagina fadecrementare le vendite del1%sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceIl RWD se approcciato male puòdrammaticamente impattare sulleperformance e sui tempi di caricamentodelle pagine.sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Performancehttp://goo.gl/bdpzJsabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformancePulisci il codice HTML riducendo glielementi non semantici.sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceRimuovi dai CSS gli statement orfani.Usa tool appositi www.sitepoint.com/dustmeselectors/sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceMisura le performance dei CSS3http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profilingsabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceCSS minificationhttp://www.csscompressor.com/PS: Usa il <link> invece del @import per permettere il downloadparallellosabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceOttimizzare l’uso delle immagini.Usare gli Spriteshttp://alistapart.com/article/spriteshttp://spriteme.org/sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceUsare la tecnica del Data URIs.embeddedImg {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANS ...UhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg==");}http://software.hixie.ch/utilities/cgi/data/datahttp://www.motobit.com/util/base64-decoder-encoder.aspsabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceUsare Icon Fontshttp://icomoon.io/sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceComprimi le immagini.http://imageoptim.pornel.net/http://developer.yahoo.com/yslow/smushit/http://pmt.sourceforge.net/pngcrush/sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceOttimizza la sintassi JavaScriptEvita l’uso dell’eval()Fai attenzione all’uso di withEvita il try..catch (se sai che un errore si verificheràsicuramente)sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformancePubblica i file Javascript e CSS su unsubdomain diverso dal markup.Questo permette il caricamento parallelodelle risorse.sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36PerformanceMinify JavaScriptjscompress.comwww.minifyjavascript.comwww.jsmini.comhttp://marijnhaverbeke.nl/uglifyjssabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Performancesabato 23 marzo 13
  • Connessione – Detect client sideCopyright 2013 www.marcocasario.com 53W3C Network Information APIUsa la proprietà navigator.connection.type che ritornaWIFI, CELL_2G, CELL_3Gif(navigator.connection.type==navigator.connection.WIFI){ }sabato 23 marzo 13
  • HTTP Testing – Bandwidth throttlingCopyright 2013 www.marcocasario.com 55http://www.charlesproxy.com/sabato 23 marzo 13
  • HTTP Testing – Bandwidth throttlingCopyright 2013 www.marcocasario.com 55sabato 23 marzo 13
  • Redirect – Do not !Copyright 2013 www.marcocasario.com 56Evitare i redirectIl sito sarà più SEO-friendlyAlcuni browser mobile possono presentare dei problemisabato 23 marzo 13
  • Gestures – Touch not ClickCopyright 2013 www.marcocasario.com 57I device touch hanno un ritardo nel click tra i 300 e i500 ms prima di essere eseguiti !Utilizza l’evento onTouchEvent (datatype ACTION_UP) Attenzione all’evento onTouchStart perchè a volte il taprisulta troppo responsive ma causa lo scrolling ad essereinusabile.sabato 23 marzo 13
  • Gli ultimi consigliCopyright 2013 www.marcocasario.com 58Parsare Javascript richiede tempo(anche 100ms per 1Kb)sabato 23 marzo 13
  • Gli ultimi consigliCopyright 2013 www.marcocasario.com 59Ti serve veramente unframework ?Jquery impiega 6 secondi ad essere parsatosu alcuni dispositivi.sabato 23 marzo 13
  • Gli ultimi consigliCopyright 2013 www.marcocasario.com 60Jquery Mobile non è un piccoloframework, è un UI framework ed usa ilcore di Jquery.sabato 23 marzo 13
  • Gli ultimi consigliCopyright 2013 www.marcocasario.com 61Usa micro frameworks o creati le tue minilibraries★ XUI★ zepto.js★ microjssabato 23 marzo 13
  • Gli ultimi consigliCopyright 2013 www.marcocasario.com 62Se usi JSON (dovresti) ricorda che ilJSON.parse è quasi 2 volte più velocedella funzione eval()sabato 23 marzo 13
  • Gli ultimi consigliCopyright 2013 www.marcocasario.com 63Usare HTML5 Application Cache<html manifest="example.appcache“>sabato 23 marzo 13
  • Gli ultimi consigliCopyright 2013 www.marcocasario.com 64Usare HTML5 Local StorageRicorda che lo storage di stringhe è 2 volte più velocedello storage di oggettiSu mobile puoi considerare fino a 2 Mb.sabato 23 marzo 13
  • Persistent Cache Size by BrowserCopyright 2013 www.marcocasario.com 64sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Performance - Testhttp://developer.yahoo.com/yslow/sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Performance - Testsabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Performance - Moduli Backendwww.gzip.orgsabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Performance - Moduli Backendhttps://developers.google.com/speed/sabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Performance - Moduli BackendYUI Compressorhttp://yui.github.com/yuicompressor/Vedi www.slideshare.net/nzakas/extreme-javascript-compression-with-yui-compressorsabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Performance - Moduli BackendYUI CompressorVedi www.slideshare.net/nzakas/extreme-javascript-compression-with-yui-compressorsabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Strategie da usare - Architettura clientQuesta potrebbe essere una lista dei moduli JS che ilclient deve gestire:★Navigation★Remote Data Access★Authentication/Authorization★Decouple View from Application Model (MVC pattern)★Modularization/Packaging★Dependency Management★Logging/Tracing★Exception Handlingsabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Strategie da usare - Architettura clientQuesta potrebbe essere una lista dei moduli JS che ilclient deve gestire:★Backbone.js – Javascript MVC/Navigation framework★Require.js – AMD based module organization andlibrary dependency management★_Underscore.js – Provide functional programmingfeatures to Javascript★Jquery Mobile – Document Object Model(DOM) accessand manipulation★Zepto.js - MVC framework compatibile Jquery★XUI.js, Flight by Twittersabato 23 marzo 13
  • Copyright 2013 www.marcocasario.com 36Strategie da usare - Architettura clientsabato 23 marzo 13
  • EmulatoriCopyright 2013 www.marcocasario.com 51Ne esistono tantissimi, molti dei quali gratuiti.Sono utili come prima fase di testing e non possonoessere considerati affidabili al 100%http://www.mobilexweb.com/emulatorssabato 23 marzo 13
  • HTML5, CSS3 e JavaScriptWeb app per tutti gli schermiMarco Casario - www.marcocasario.comCTO Comtaste - m.casario@comtaste.comwww.linkedin.com/in/marcocasariosabato 23 marzo 13