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

316 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
  • Be the first to comment

  • 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

×