Från design till dynamisk webbplats. 2014-11-23 | 2 Palle Zingmark  Webbkonsult på Hallvarsson & Halvarsson  Specialist på gränssnittsutveckling  Senior.

En presentation över ämnet: "Från design till dynamisk webbplats. 2014-11-23 | 2 Palle Zingmark  Webbkonsult på Hallvarsson & Halvarsson  Specialist på gränssnittsutveckling  Senior."— Presentationens avskrift:

1 Från design till dynamisk webbplats

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

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

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

5 2014-11-23 | 5 Design mockups

6 Gränssnittsutveckling 2014-11-23 | 6

7 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 2014-11-23 | 7

8 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 2014-11-23 | 8

9 2014-11-23 | 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 2014-11-23 | 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

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

12 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? 2014-11-23 | 12

13 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 2014-11-23 | 13

14 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? 2014-11-23 | 14

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

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

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

18 Frågor? 2014-11-23 | 18