episerver meetup #10
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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
twitter.com/murela
+47 99 70 95 45