EPiServer MeetUp #10

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

Agenda Kodekvalitet Mobil

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 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

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

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

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

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

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å

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

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

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

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

EPiServer MeetUp #10 - Mobil

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

Agenda Kom gjerne med spørsmål underveis.

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

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

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

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

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

Implementering/ Teknisk

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

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

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

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

Implementering/ Teknisk Tempalte switcher Eks: http://localhost:1098/?fdv=true Cookie som husker valget Settings for varighet

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

Implementering/ Teknisk EPiServer 7 Display 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 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

SEO Alt skjer på samme URL

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

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

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?

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.

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.

Takk for oss! Anders Murel 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