EPiServer MeetUp #10.

Presentasjon om: "EPiServer MeetUp #10."— Utskrift av presentasjonen:

1 EPiServer MeetUp #10

2 Spesielt fokus på fagfeltene CMS og Universell Utforming
Om Epinova Startet i 2007 30 ansatte Eneste selskapet i Norge som utelukkende kun jobber med EPiServer produktene Spesielt fokus på fagfeltene CMS og Universell Utforming Eksperter innen teknisk implementering Datterselskap at Nova Consulting Group som også består av selskapene Novanet og Northern Beat

3 Agenda Kodekvalitet Mobil

4 EPiServer MeetUp #10 – Frontend i Epinova

5 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 Frontend tek imot photoshop og kodar rett i prosjektet. Nokre gonger er frontender I front, medan andre gonger er frontend I etterkant Litt om korleis me jobbar saman og at me trur på det å sitja tett saman I same miljø Sikre kvalitet ved å sitja tett saman Ingen problem å vite kven som eig kva kode Tett samarbeid Epinova har tru på at det er viktig å sitja tett saman, og at frontend og backend skal sitja I samme miljø. Av det blir det smidige overganger og ein bruker mindre tid på dialog og missforståelsar “CMS-tankegangen” handlar om at redaktøren kan skrive tre avsnitt om han vil eller 3linjer med tekst I staden for 2. Webdeler og dynamikk I innhald. Mangler tett sammarbeid med backend Dublikat av kode Ikke samme fokus på kvalitet Kjenner ikke til ”CMS-tankegangen” Frontender er ikke med på leveransen fram til lansering (fossefall

6 Kvalitet og frontend Behov Sikre kvalitet i alle ledd
Levere kode som lett kan videreutvikles Prosjekter kan lett tas over av andre kodere internt og eksternt Ikke mål å finne vinnere og tapere, men motivere til konstant å heve kvalitet Oppdage evt mangler på kode levert av eksterne frontendere før implementering i EPiServer Unngå offentleg “lynsjing” for åpenbare tabber Ettersom ein blir større blir behovet for sjekklister og sikring av kvalitet større Punkta går på element som er oppfatta som kvalitet generelt I bransjen, men også på til dømes ryddig kode slik at det skal vera lettare å ta over kvarandre sin kode Felles måte å løyse ting på blir viktigare og viktigare til større eit firma er

7 Kvalitet og frontend Hvordan?
Verktøy underveis, ikke noe som skal bli introdusert til slutt i et prosjekt Prosjektet skal kvalitetssikre seg selv Alltid under oppdatering, lager QA sammen Alle kan utføre QA på et prosjekt, men ikke på eget arbeid Læring - Prosjektet skal kvalitetssikre seg sjølv, ønskjer ikkje finne feil på QA

8 Kvalitet og frontend, sjekkliste
Sjekkliste på 32 punkt Prosjekt Kodekvalitet Universell utforming Semantikk Redaktørvennlighet Andre funn og sammendrag Rett, feil eller ikke aktuelt Punkta går på element som er oppfatta som kvalitet generelt I bransjen, men også på til dømes ryddig kode slik at det skal vera lettare å ta over kvarandre sin kode

9 Kvalitet og frontend, sjekkliste
Prefix dev-MenuList – lett å søke på og enkelt å rydde (spesielt med tanke på js)

10 Kvalitet og frontend, sjekkliste
Ikke alt kan lett påvirkes av frontender: Nokre punkt går på ting ein frontendkoder ikkje så lett kan påvirke, men som eg ønskjer dei skal ha fokus på

11 Kvalitet og frontend, sjekkliste
Viktig å lage ei løysing som

12 Webdeler er konseptuelt det samme som Blocks (I EPiServer 7)

13 Webdeler er konseptuelt det samme som Blocks (I EPiServer 7)

14 Webdeler er konseptuelt det samme som Blocks (I EPiServer 7)

15 EPiServer MeetUp #10 - Mobil

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

17 Agenda Kom gjerne med spørsmål underveis.

18 Våre behov Enkelt å bruke Pålitelig device detection
For redaktører og utviklere Pålitelig device detection 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

19 Implementering/ Teknisk
Epinova.Mobile.Core Core funksjonalitet brukt av flere andre moduler Benytter WURFL for device detectinon 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 51degrees

20 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) Har man mye innhold som ikke egner seg som responsivt er det bedre å lage en egen mal for dette

21 Implementering/ Teknisk
Gradvis innføring av mobile maler Kombinasjon av responsivt design og egne maler Mulighet for at mobile maler kan legges ut uten at de tas i bruk Har man mye innhold som ikke egner seg som responsivt er det bedre å lage en egen mal for dette

22 Implementering/ Teknisk
Initializable module som hooker seg på UrlRewriteProvider.ConvertedToInternal Sjekker om det finnes en mobil template for denne malen og bytter ut template pathen

23 Implementering/ Teknisk

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

25 Implementering/ Teknisk
Settings for plassering av templates Default verdier Setting for aktivering av mobil funksjonalitet

26 Implementering/ Teknisk
Detektering av mobile request Uthenting av verdier fra WURFL

27 Implementering/ Teknisk – Mobile preview
Alle med EPIServer 5, må oppgradere til 6 først Egenutviklet 2-veis relasjon PageTypeUtility

28 Implementering/ Teknisk
Tempalte switcher Eks: Cookie som husker valget Settings for varighet

29 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

30 Implementering/ Teknisk
EPiServer 7 Display Channels – forskjellige visninger for forskjellige kanaler

31 Implementering/ Teknisk

32 Implementering/ teknisk - Caching
IMPORTANT NOTE ABOUT OUTPUT CACHING! If you are using output caching please do the following. 1. Add "isMobileDevice" EPiServer.config sitesetting httpCacheVaryByCustom. 2. Add this to your Global.asax.cs file: public override string GetVaryByCustomString(HttpContext context, string custom) { if (Regex.IsMatch(custom, "isMobileDevice", RegexOptions.IgnoreCase)) return context.Request.IsMobileDevice().ToString(); return base.GetVaryByCustomString(context, custom); }

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

34 SEO Alt skjer på samme URL

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

36 Eksempler https://www.rica.no – mobile maler
- blanding – ekstern mobilløsning – ekstern løsning - kun redirect på enkelte maler Snart: – mobile maler

37 EPiServer MeetUp #10 – Skalering av bilder

38 Skaleing av bilder – Adaptive Images
Thomas

39 Ressursser

40 Spørsmål Spørsmål?

41 Norges markedsledende og mest komplette EPiServer CMS leverandør
Epinovas strategi Norges markedsledende og mest komplette EPiServer CMS leverandør kundefokuserte samarbeidsvillige kunnskapsrike Når du ønsker å opprette et nytt lysbilde anbefales det å bruke dropdownmenyen under ikonet ”nytt lysbilde”. Der finner du en rekke maler som svarer til de grafiske retningslinjer som er laget for Epinovas powerpointmal.

42 Hva gjør vi? Siden starten har målet med Epinova vært å utvikle de mest spennende nettløsningene for de mest ambisiøse kundene. Alt vi driver med er fundamentert på lang erfaring og dyp kompetanse i produktet EPiServer CMS. Når du ønsker å opprette et nytt lysbilde anbefales det å bruke dropdownmenyen under ikonet ”nytt lysbilde”. Der finner du en rekke maler som svarer til de grafiske retningslinjer som er laget for Epinovas powerpointmal.

43 Takk for oss! Anders Murel
Se flere av våre suksesshistorier på epinova.no Anders Murel EPiServer-ekspert twitter.com/murela