Transcript Implementering/ Teknisk

EPiServer MeetUp #10
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
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 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
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
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)
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
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
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-asdisplay-channel-detection-in-episerver-7/
IMPLEMENTERING/ TEKNISK - CACHING
http://www.asp.net/whitepapers/add-mobile-pages-to-your-aspnet-web-forms-mvcapplication
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/AndersMurel/dates/2012/10/using-wurfl-as-display-channeldetection-in-episerver-7/
http://www.epinova.no/blog/AndersMurel/dates/2012/5/introducing-theepinovamobilecore-framework-for-mobile-episerversolutions/
http://www.epinova.no/en/blog/AndersMurel/dates/2012/5/flexible-episerver-mobile-contentstrategy-with-epinovamobiletemplateprovider/
SPØRSMÅL
Spørsmål?
TAKK FOR OSS!
Se flere av våre suksesshistorier på epinova.no
Anders Murel
EPiServer-ekspert
+47 99 70 95 45
[email protected]
twitter.com/murela