1 / 40

EPiServer MeetUp #10

EPiServer MeetUp #10. Agenda. Kodekvalitet Mobil. EPiServer MeetUp #10 – Frontend i Epinova. Frontend i Epinova . Miljø og kode Tett s amarbeid mellom frontend og backend Frontend er med i hele leveransen (fossefall) Effektiv kode CMS-tankegangen

karis
Download Presentation

EPiServer MeetUp #10

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. EPiServer MeetUp #10

  2. Agenda Kodekvalitet Mobil

  3. EPiServer MeetUp #10 – Frontend i Epinova

  4. Frontend i Epinova • Miljø og kode • Tett samarbeid mellom frontend og backend • Frontend er med i hele leveransen (fossefall) • Effektiv kode • CMS-tankegangen • Utfordringer ved ekstern leveranse av Javascript, xHTML og CSS

  5. Kvalitet og frontend • Behov • Sikrekvalitetialleledd • Leverekodesomlettkanvidereutvikles • Prosjekterkanletttas over avandrekodereinternt og eksternt • Ikkemål å finnevinnereogtapere, men motiveretilkonstant å hevekvalitet • OppdageevtmanglerpåkodelevertaveksternefrontendereførimplementeringiEPiServer • Unngåoffentleg“lynsjing” for åpenbaretabber

  6. Kvalitet og frontend • Hvordan? • Verktøyunderveis, ikkenoesomskalbliintroduserttilslutt i et prosjekt • Prosjektetskalkvalitetssikresegselv • Alltid under oppdatering, lager QA sammen • Alle kanutføre QA på et prosjekt, men ikkepåegetarbeid • Læring

  7. Kvalitet og frontend, sjekkliste • Sjekkliste på 32 punkt • Prosjekt • Kodekvalitet • Universell utforming • Semantikk • Redaktørvennlighet • Andre funn og sammendrag • Rett, feil eller ikke aktuelt

  8. Kvalitet og frontend, sjekkliste

  9. Kvalitet og frontend, sjekkliste • Ikke alt kan lett påvirkes av frontender:

  10. Kvalitet og frontend, sjekkliste

  11. EPiServer MeetUp #10 - Mobil

  12. Agenda Våre behov Ulike tilnærminger Implementering/ teknisk EPiServer 7 (kort) Hvorfor ikke MobilePack SEO Skalering av bilder Spørsmål/ diskusjon

  13. Agenda • Kom gjerne med spørsmål underveis.

  14. Våre behov • Enkelt å bruke • For redaktører og utviklere • Pålitelig devicedetection • Begrense dobbeltpublisering • Kan være ønskelig i enkelte scenarier • Ikke m.site.no / annen url-struktur • Deling av url’er til andre devicer • Fallback til desktop om det ikke finnes mobile maler • Desktop malen kan da evt være «responsiv» slik at det ikke ser helt merkelig ut • MobilePack er ikke alltid løsningen

  15. Implementering/ Teknisk • Epinova.Mobile.Core • Core funksjonalitet brukt av flere andre moduler • Benytter WURFL for devicedetectinon • context.Request.Browser.IsMobileDevice benytter browserfiler i .net rammeverket som fort blir utdatert • Caches i første request • Epinova.Mobile.TemplateProvider • Bytter ut maler basert på info fra Core • Epinova.Mobile.Core.EPi7 • Epinova.Mobile.MobileDisplayChannel

  16. Ulike tilnærminger • Responsivt design/ egne mobile maler • Ingen fasit, må vurdere behovet • Uproblematisk med en kombinasjon (Alt responsivt, men med x antall mobile maler) • Responsivt design (RWD) • Viktig å sørge for at bilder blir skalert og at det ikke leveres unødvendig data til klient (Skjule kode serveside med Mobile.Core) • Med egne maler kan man styre dette helt selv (egne MasterPage/ JS/ CSS osv)

  17. Implementering/ Teknisk • Gradvis innføring av mobile maler • Kombinasjon av responsivtdesign og egne maler • Mulighet for at mobile maler kan legges ut uten at de tas i bruk

  18. Implementering/ Teknisk Initializablemodule som hooker seg på UrlRewriteProvider.ConvertedToInternal Sjekker om det finnes en mobil template for denne malen og bytter ut templatepathen

  19. Implementering/ Teknisk

  20. Implementering/ Teknisk • Detektering av devices • Default verdi er IsWirelessDevice && !IsTablet • Kan overstyres med:

  21. Implementering/ Teknisk • Settings for plassering av templates • Default verdier • Setting for aktivering av mobil funksjonalitet

  22. Implementering/ Teknisk Detektering av mobile request Uthenting av verdier fra WURFL

  23. Implementering/ Teknisk – Mobile preview

  24. Implementering/ Teknisk Tempalteswitcher Eks: http://localhost:1098/?fdv=true Cookie som husker valget Settings for varighet

  25. Implementering/ Teknisk • Redirect til ekstern mobilløsning • Sender bruker til ekstern mobil løsning • Håndterer cookie for å gi riktig versjon neste gang • Ingen endringer behøves på ekstern løsning

  26. Implementering/ Teknisk • EPiServer 7 • Display Channels – forskjellige visninger for forskjellige kanaler

  27. Implementering/ Teknisk http://www.epinova.no/blog/Anders-Murel/dates/2012/10/using-wurfl-as-display-channel-detection-in-episerver-7/

  28. Implementering/ teknisk - Caching http://www.asp.net/whitepapers/add-mobile-pages-to-your-aspnet-web-forms-mvc-application IMPORTANT NOTE ABOUT OUTPUT CACHING! If you are using output caching please do the following. 1. Add "isMobileDevice" EPiServer.configsitesettinghttpCacheVaryByCustom. 2. Add this to your Global.asax.cs file: publicoverridestringGetVaryByCustomString(HttpContextcontext, stringcustom) { if (Regex.IsMatch(custom, "isMobileDevice", RegexOptions.IgnoreCase)) returncontext.Request.IsMobileDevice().ToString(); returnbase.GetVaryByCustomString(context, custom); }

  29. Hvorfor ikke Mobile.Pack • Upålitelig devicedetection • User agents i Web.config • Ingen mulighet for å hente ut mer info om enheten • Egen innholdsstruktur/ url’er • Etterligner en iPhoneapp • Benytter visitor groups • Dersom du kommer inn på en underside vil den ikke detektere

  30. SEO Alt skjer på samme URL

  31. Triks Legg på ?ismobiledevice=true for å teste mobil i vanlig nettleser

  32. Eksempler https://www.rica.no – mobile maler https://www.rikstv.no/ - blanding http://www.interoptik.no – ekstern mobilløsning http://www.volvat.no – ekstern løsning http://www.rodekors.no/ - kun redirect på enkelte maler Snart: http://www.erdetfarlig.no – mobile maler

  33. EPiServer MeetUp #10 – Skalering av bilder

  34. Skaleing av bilder – Adaptive Images Thomas

  35. Ressursser http://www.epinova.no/blog/Anders-Murel/dates/2012/10/using-wurfl-as-display-channel-detection-in-episerver-7/ http://www.epinova.no/blog/Anders-Murel/dates/2012/5/introducing-the-epinovamobilecore-framework-for-mobile-episerver-solutions/ http://www.epinova.no/en/blog/Anders-Murel/dates/2012/5/flexible-episerver-mobile-content-strategy-with-epinovamobiletemplateprovider/

  36. Spørsmål Spørsmål?

  37. Takk for oss! Se flere av våre suksesshistorier på epinova.no Anders Murel EPiServer-ekspert +47 99 70 95 45 Anders.murel@epinova.no twitter.com/murela

More Related