episerver meetup #10

EPiServer MeetUp #10

AGENDA

KodekvalitetMobil

EPiServer MeetUp #10 – Frontend i Epinova

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

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

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

KVALITET OG FRONTEND, SJEKKLISTE

Sjekkliste på 32 punkt

1. Prosjekt

2. Kodekvalitet

3. Universell utforming

4. Semantikk

5. Redaktørvennlighet

6. Andre funn og sammendrag

Rett, feil eller ikke aktuelt

KVALITET OG FRONTEND, SJEKKLISTE

KVALITET OG FRONTEND, SJEKKLISTE

Ikke alt kan lett påvirkes av frontender:

KVALITET OG FRONTEND, SJEKKLISTE

EPiServer MeetUp #10 - Mobil

AGENDA

Våre behovUlike tilnærmingerImplementering/ tekniskEPiServer 7 (kort)Hvorfor ikke MobilePackSEOSkalering av bilderSpørsmål/ diskusjon

AGENDA

Kom gjerne med spørsmål underveis.

VÅRE BEHOV

Enkelt å brukeFor redaktører og utviklere

Pålitelig device detectionBegrense dobbeltpublisering

Kan være ønskelig i enkelte scenarier

Ikke m.site.no / annen url-strukturDeling av url’er til andre devicer

Fallback til desktop om det ikke finnes mobile malerDesktop malen kan da evt være «responsiv» slik at det ikke ser helt merkelig ut

MobilePack er ikke alltid løsningen

IMPLEMENTERING/ TEKNISK

Epinova.Mobile.CoreCore funksjonalitet brukt av flere andre modulerBenytter WURFL for device detectinon context.Request.Browser.IsMobileDevice benytter browserfiler i .net rammeverket som fort blir utdatertCaches i første request

Epinova.Mobile.TemplateProviderBytter ut maler basert på info fra Core

Epinova.Mobile.Core.EPi7Epinova.Mobile.MobileDisplayChannel

ULIKE TILNÆRMINGER

Responsivt design/ egne mobile malerIngen fasit, må vurdere behovetUproblematisk 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)

IMPLEMENTERING/ TEKNISK

Gradvis innføring av mobile malerKombinasjon av responsivt design og egne malerMulighet for at mobile maler kan legges ut uten at de tas i bruk

IMPLEMENTERING/ TEKNISK

Initializable module som hooker seg på UrlRewriteProvider.ConvertedToInternalSjekker om det finnes en mobil template for denne malen og bytter ut template pathen

IMPLEMENTERING/ TEKNISK

IMPLEMENTERING/ TEKNISK

Detektering av devicesDefault verdi er IsWirelessDevice && !IsTabletKan overstyres med:

IMPLEMENTERING/ TEKNISK

Settings for plassering av templatesDefault verdier

Setting for aktivering av mobil funksjonalitet

IMPLEMENTERING/ TEKNISK

Detektering av mobile requestUthenting av verdier fra WURFL

IMPLEMENTERING/ TEKNISK – MOBILE PREVIEW

IMPLEMENTERING/ TEKNISK

Tempalte switcher

Eks: http://localhost:1098/?fdv=trueCookie som husker valgetSettings for varighet

IMPLEMENTERING/ TEKNISK

Redirect til ekstern mobilløsningSender bruker til ekstern mobil løsningHåndterer cookie for å gi riktig versjon neste gangIngen endringer behøves på ekstern løsning

IMPLEMENTERING/ TEKNISK

EPiServer 7Display Channels – forskjellige visninger for forskjellige kanaler

IMPLEMENTERING/ TEKNISK

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

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.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); }

HVORFOR IKKE MOBILE.PACK

Upålitelig device detectionUser agents i Web.configIngen mulighet for å hente ut mer info om enhetenEgen innholdsstruktur/ url’erEtterligner en iPhone appBenytter visitor groups

Dersom du kommer inn på en underside vil den ikke detektere

SEO

Alt skjer på samme URL

TRIKS

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

EKSEMPLER

https://www.rica.no – mobile malerhttps://www.rikstv.no/ - blandinghttp://www.interoptik.no – ekstern mobilløsninghttp://www.volvat.no – ekstern løsninghttp://www.rodekors.no/ - kun redirect på enkelte maler

Snart:http://www.erdetfarlig.no – mobile maler

EPiServer MeetUp #10 – Skalering av bilder

SKALEING AV BILDER – ADAPTIVE IMAGES

Thomas

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/

SPØRSMÅL

Spørsmål?

TAKK FOR OSS!Se flere av våre suksesshistorier på epinova.no

Anders MurelEPiServer-ekspert

Anders.murel@epinova.no

twitter.com/murela

+47 99 70 95 45