Från design till dynamisk webbplats

| 2 Palle Zingmark  Webbkonsult på Hallvarsson & Halvarsson  Specialist på gränssnittsutveckling  Senior webbutvecklare

| 3 Martin Söderlund  Webbkonsult på Hallvarsson & Halvarsson  Gränssnittsutvecklare  Systemutvecklare inom ASP.NET och certifierad EPiServer- utvecklare

| 4 Presentationen  Webbdesign-mockups  Gränssnittsutveckling, att skapa HTML-mockups  Systemutveckling, att implementera HTML-mockups i ASP.NET och EPiServer

| 5 Design mockups

Gränssnittsutveckling | 6

Att tänka på som ASP.NET-utvecklare  Planera strukturen på webbplatsen  Vilka ASP.NET-kontroller ska användas?  Hur ska kontroller döpas?  Validering  Hantering av tomma HTML-element  ID:n | 7

Strukturering i ASP.NET-projekt  En god planering av största vikt  Hur ska MasterPage:n se ut?  Vad ska finnas i användarkontroller?  Vilka användarkontroller ska användas på flera platser  Nyckelord: skalbarhet  Det ska vara lätt att bygga ut | 8

| 9 ASP.NET-kontroller  Använd Literal i stället för Label  Label generar, vilket oftast är onödigt  Använd attributet AssociatedControlId för Label om du ska skapa formulärfält med tillhörande : Phone number  Använd PlaceHolder i stället för Panel  Panel genererar en onödig  Personlig favorit: Repeatern

| 10 Namngivning av.NET-kontroller  Kolla på gränssnittsutvecklarens namngivning  Semantik  Sökmotoroptimering  Döp kontroller så korta och förklarande som möjligt  Döp gärna t ex ContentPlaceHolders till något kortare.  Exempel på ett id i källkoden på en ASP.NET-webbplats: ctl00_ContentPlaceHolderContent_ContentPlaceHolderMai n_ContentPlaceHolderWidePageWithoutTopImage_ContentPl aceHolderWidePage_ContentPlaceHolderPageContent_Butto nSend

Få ASP.NET att validera  Inställningar i Web.Config:  xhtmlConformance mode=”Strict”  browserCaps | 11

ID:n i ASP.NET  Sätter du runat=”server” på ett HTML-element så förvanskas id:t  Dilemmat: .NET-utvecklare vill inte att gränssnittsutvecklare ska skriva CSS baserat på id:n utan på klasser  Gränssnittsutvecklare säger att det inte är så man ska göra  Detta hanteras redan i ASP.NET MVC  Välkommen förändring i.NET 4.0  ClientMode = Inherit / Legacy / Predictable / Strict  Hur göra med ASP.NET Web Forms? | 12

Min approach  Använd PlaceHolder som behållare för HTML-kod och hantera denna i stället för att sätta runat=”server” på exempelvis en  Vid mer komplex funktionalitet och om man absolut är tvungen att sätta runat=”server” på ett HTML-element så kan CSS-styling med klasser vara att föredra, om än inte rekommenderat | 13

Hantering av tomma element  Om en EPiServer-egenskap inte har ett värde ska man inte skriva ut markup ändå  Vanligt exempel:  Vad händer om MainIntro är tomt? | 14

Exempel med extension methods  Utöka string:  Exempel på användning tillsammans med Joels PageTypeBuilder: | 15

CSS-klasser i listningar  Hur göra när en gränssnittsutvecklare satt class=”first” på ett element i en listning? Exempel: … | 16

Lägg på CSS-klasser via OnItemDataBound-eventet | 17

Frågor? | 18