Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adapta el teu Wordpress al context mòbil (COBDC, Juny 2013)

352 views

Published on

Curs: Adapta el teu Wordpress a la consulta des de dispositius mòbils (COBDC, 11 de juny 2013))

PROGRAMA

Introducció
Per què cal adaptar el nostre bloc al context mòbil?
Implementació i adaptació de dissenys adaptatius
Incorporació de funcionalitats/plugins
Externalització del procés d'adaptació a partir d'assistents (serveis de tercers)
Testeig d'eines per provar el nostre disseny mòbil
Anàlisi d'exemples

Published in: Technology, Business
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Adapta el teu Wordpress al context mòbil (COBDC, Juny 2013)

  1. 1. Adapta el teu Wordpressal context mòbilSergi Montes OlivaCOBDC Juny 2013
  2. 2. Opció o requeriment?Les xifres...Horitzó 2012-201744 % 884,999 TBx13 x8 68% 11,156,995 TBFont: VNI Mobile Forecast Highlights, 2012 - 2017
  3. 3. Els hàbitsFont: Mobile Planet:http://www.thinkwithgoogle.com/mobileplanet/en/
  4. 4. Hem de combatre...Font: Arroyo, Natalia. Nueve errores comunes en la aplicación de la tecnología móvil en bibliotecas http://www.thinkepi.net/nueve-errores-comunes-aplicacion-tecnologia-movil-bibliotecasDissenys que no tenen encompte la vessant "tàctil"No fer accessibles la versió"tradicional" i la versiómòbil des del mateixdispositiuNo mesurar el grau dús iinteracció des dedispositius mòbils.Adaptar-nos al context mòbilés molt carGarantir lexperiència mòbilnomés a una part del nostrewebPresència delements gràficsno optimitzats o en formatscom flash.
  5. 5. Per on comencem?El "canvi de paradigma"Els usuaris que visiten la nostra web a partir del seudispositiu mòbil no volen "navegar" sinó que busquen unainformació concreta. IMMEDIATESA
  6. 6. Si el nostre lloc web està adaptat...Millora lexperiència de lusuariMajor temps dedicat ala consulta de la webContinguts méssusceptibles a sercompartitsMajor visibilitat delscontinguts i atracció denous lectors
  7. 7. El context "mòbil"Les noves OPORTUNITATSRealitat augmentada Geolocalització Xarxes socialsisegmentació
  8. 8. Un requeriment, múltiples solucionsCom podem satisfer les necessitats de lusuari mòbil?Aplicant undissenyresponsiuAfegintfuncionalitats alnostre gestor(CMS) i queadapten la webDisseny dunaaplicació webCreant unanova webexclusivamentpensada per adispositiusmòbilsDisseny dunaaplicaciónativa
  9. 9. Estratègies1. El disseny responsiu (la multipantalla)Web for allWeb for everything
  10. 10. Estratègies1. El disseny responsiu (la multipantalla)ParàmetresAmpladaAlçadaOrientacióProporció (ex.16:9)Columnes(nombre)ResolucióColor
  11. 11. EstratègiesAlguns del seus punts fortsNomés gestionem 1webSolució a labastde qualevolinstitució opersonaContribueixdecisivament amantenir el Lookand feel de la nostrawebSoptimitzen elsesforços enposicionament,disseny, etc.Garantia perlexperiència dusuari,independentment delorigen del linkPreparat per adispositius "delfutur"
  12. 12. EstratègiesLes febleses...Sadapta laparençaperò no el contingut- imatges- flash, etc.No podem donarresposta a diferentsnecessitats segonsel dispositiu deconsultaEl contingut de lateva web pot noser "mobilefriendly"Pot "arrosegar"limitacions ja existents ala versió descriptori de laweb, com per exempleles imatges amb untamany excessiuEs penalitza lacàrrega del web
  13. 13. Cas pràctic núm. 1Aplicant el disseny responsiu al nostreWordpressPlantilla Esplanadehttp://www.onedesigns.com/wordpress-themes/esplanade-free-wordpress-themeAspectes previs1. Configuració del component WordpressImporter2. Importació de les dades de prova3. Tria dun únic menú de prova ("short")4. Adaptació de continguts i configuració de lsliderprincipal5. Instal·lació i configuració de la plantilla
  14. 14. Cas pràctic núm. 2Aplicant el disseny responsiu al nostreWordpressPlantilla Pagelines (incorpora Framework)http://wordpress.org/themes/pagelinesEspecificacions- Permet modificar larquitectura i maquetació deWordpress.- Disposa de components (galeries, destacats, etc.) quepoden ser incorporades a qualsevol de les pàgines queformen part del Wordpress.- La configuració es fa a partir dun editor "dragndrop"
  15. 15. Cas pràctic núm. 3Aplicant el disseny responsiu al nostreWordpressPlantilla Respohttp://themnific.com/respo-theme/Especificacions- Ginys/widgets propis- Es poden editar propietats del CSS a partir delapartat dadministració- Inclou tipografies pròpies- Vàries possibles maquetacions del blog- Disposa dassistent per a la creació de "shortcodes"
  16. 16. Altres plantilles responsivesGridly RibbonClean Retina Adapt
  17. 17. Una altra via: els dissenysindependentsMobilePresshttp://wordpress.org/plugins/mobilepress/- Permet aplicar una plantilla/disseny diferentrespecte a la web "descriptori"-Es poden establir paràmetres de configuracióespecífics per a la versió mòbil.- Es possible determinar quins tipus decontinguts es visualitzaran a la versió mòbil iquins no.
  18. 18. Afegint noves funcionalitats al CMS- Com es comporta el nostre Wordpress en diferents resolucions de pantalla?Responsive page testerhttp://wordpress.org/plugins/responsive-page-tester/installation/- Millora de ladministració del blog a partir dun mòbilJuiz Smart Mobile Adminhttp://wordpress.org/plugins/juiz-smart-mobile-admin/- Incorporació de galeries dimatgesMeta Sliderhttp://wordpress.org/plugins/ml-slider/
  19. 19. Afegint noves funcionalitats al CMS- Aplicació automàtica duna plantilla davant la consulta a partir dun mòbil?Mobile Detectorhttp://wordpress.org/plugins/wp-mobile-detector/WP Touchhttp://wordpress.org/plugins/wptouch/- Creant ajudes o missatges contextuals (ToolTips)Mobile Friendly Tooltiphttp://wordpress.org/plugins/responsive-mobile-friendly-tooltip/screenshots/- Creant taules responsivesFooTablehttp://themergency.com/footable/
  20. 20. Afegint noves funcionalitats al CMS- Modificar els menús de navegació en clau responsivaResponsive Select Menuhttp://wordpress.org/plugins/responsive-select-menu/- Generar automàticament imatges en diferents resolucionsSimple Responsive Imageshttp://wordpress.org/plugins/simple-responsive-images/Incrustar vídeos (Youtube, Vimeo, Dailymotion, etc.)Advanced Responsive Video Embedderhttp://wordpress.org/plugins/advanced-responsive-video-embedder/
  21. 21. Afegint noves funcionalitats al CMS- Crear formularis responsiusEasy Contact Formhttp://wordpress.org/plugins/easy-contact-forms/- Crear aplicacions a partir del nostre blogWiziApphttp://www.wiziapp.com/Permet crear una aplicació HTML5 a partir del nostre Wordpress i publicar-la a lAppStore, Android Market, etc. (la publicació és de pagament)
  22. 22. Eines externesOnbilehttp://www.onbile.com/Assistent que permet crear desde 0 la nostra web mòbil iposteriorment publicar-la.Mobifyhttp://www.mobify.com/Assistent en línia que permet adaptar la nostra webdescriptori al context mòbil. Té una versió gratuitalimitada.
  23. 23. Com validar la nostra web?Analitzem el punt de partida- Com veu un usuari mòbil la nostra web?http://www.haztuwebmovil.es/es/d/haz-el-test-movil/
  24. 24. Com validar la nostra web?Adequació als estàndards- W3C MobileOK Checkerhttp://validator.w3.org/mobile/
  25. 25. Com validar la nostra web?Adequació als estàndards- MobiReadyhttp://ready.mobi/
  26. 26. Moltes gràciesSergi Montessmontes@ateneubcn.org sergi_montes

×