• Save
Adapta el teu Wordpress al context mòbil (COBDC, Juny 2013)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 353 views

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

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

Statistics

Views

Total Views
353
Views on SlideShare
347
Embed Views
6

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 6

http://www.linkedin.com 5
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

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

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

  • 1. Adapta el teu Wordpressal context mòbilSergi Montes OlivaCOBDC Juny 2013
  • 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. Els hàbitsFont: Mobile Planet:http://www.thinkwithgoogle.com/mobileplanet/en/
  • 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. 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. 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. El context "mòbil"Les noves OPORTUNITATSRealitat augmentada Geolocalització Xarxes socialsisegmentació
  • 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. Estratègies1. El disseny responsiu (la multipantalla)Web for allWeb for everything
  • 10. Estratègies1. El disseny responsiu (la multipantalla)ParàmetresAmpladaAlçadaOrientacióProporció (ex.16:9)Columnes(nombre)ResolucióColor
  • 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. 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. 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. 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. 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. Altres plantilles responsivesGridly RibbonClean Retina Adapt
  • 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. 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. 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. 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. 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. 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. 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. Com validar la nostra web?Adequació als estàndards- W3C MobileOK Checkerhttp://validator.w3.org/mobile/
  • 25. Com validar la nostra web?Adequació als estàndards- MobiReadyhttp://ready.mobi/
  • 26. Moltes gràciesSergi Montessmontes@ateneubcn.org sergi_montes