DIWUG.nl: How We Did It     Waldek Mastykarz    Octavie van Haaften
Octavie van Haaften•   work: http://www.mavention.nl•   blog: http://blog.octavie.nl•   mail: octavie@mavention.nl•   twit...
Waldek Mastykarz•   mvp: SharePoint•   work: http://www.mavention.nl•   blog: http://blog.mastykarz.nl•   mail: waldek@mav...
Why this session• New website for DIWUG• Showcase small website on SharePoint 2010• Lessons learned
What’s in it for you• Learn how to leverage the SharePoint 2010  platform for Internet sites• Learn how to deal with commo...
Diwug.nl v2 Goals  Flexible   Dynamic                 + WP7 app     everything                else
Diwug.nl v2 Goals            Optimized Accessible for search             engines   Fast     Awesome
Websites vs. PortalsRequirements  Wireframes    PSD      HTML          Functionality (SharePoint)
Crafting HTML• Mavention Flex Layout• HTML5  – Adds more meaning, but  – Consider older browsers• No <form runat=“server”>
Authoring vs. PresentationAuthoring                      Presentation• Full content publishing      • No Form tag  capabil...
Challenge #1: No <form>• Endpoint (HTTP Handler)• POST action• Progressive enhancement  – Doing things twice
Challenge #1: No <form>                              Con’s                              • More work                       ...
Challenge #2: Multi-page forms• Scenario: subscribe for an event while not  being a member  – Fill in e-mail address     •...
Challenge #3: SEO•   Valid and accessible markup•   Small page footprint  Fast•   HTML5  Semantics•   Microdata (http://...
Challenge #4: Accessibility• Works in every browser on every device• No technology assumptions  – JavaScript  – Silverligh...
Functionality•   member registration•   subscribe event•   upcoming event info•   event history•   e-magazines•   download...
member registration
Functionality•   member registration•   subscribe event•   upcoming event info•   event history•   e-magazines•   download...
subscribe event
Functionality•   member registration•   subscribe event•   upcoming event info•   event history•   e-magazines•   download...
upcoming event info
Functionality•   member registration•   subscribe event•   upcoming event info•   event history•   e-magazines•   download...
event history
Functionality•   member registration•   subscribe event•   upcoming event info•   event history•   e-magazines•   download...
e-magazines
Functionality•   member registration•   subscribe event•   upcoming event info•   event history•   e-magazines•   download...
download count e-magazines
Functionality•   member registration•   subscribe event•   upcoming event info•   event history•   e-magazines•   download...
windows phone 7 app readinessupcoming-event.ashx• collects event info and  agenda items• returns xml
Summary• SharePoint 2010 is good even for small sites• Decoupling authoring from publishing offers  great results• Interne...
thank you
DIWUG.nl: How We Did It
Upcoming SlideShare
Loading in...5
×

DIWUG.nl: How We Did It

1,543

Published on

Recently Mavention built a new website for DIWUG. Find out how they did it, what challenges they stumbled upon and how they solved them.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,543
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Showcase of leveraging SharePoint 2010 for small internet sites
  • Agenda:- Waldek: kick-off, the basics- Octavie: zoom in functionality
  • Flexible: allow DIWUG to change things without changing the codeDynamic: content aggregation. Managing content in one place. Save time!
  • Discuss the process: requirements &gt; wireframes &gt; psds &gt; html &gt; sitesDifferent than in portals
  • No &lt;form&gt; = No postbackDIWUG has forms
  • RegistrationFormWebPart =&gt; Form Action=Register.ashxRegister.ashx =&gt; New Member() =&gt; Lists/Members
  • SubscribeBar.ascx =&gt; PageLoad : is er een UpcomingEvent? =&gt; Ja, is er nog plaats? =&gt; Ja, dan form (action = subscribe.ashx) tonen met EventInfo en email input andsubscribe button =&gt; Nee, EventText tonen (event full) =&gt; Nee, EventText tonen (new event comingsoon)EventText = ReusableHTMLSubscribe.ashx - Haalt UpcomingEventInfo op - Controleert of email al een Member is - Controleert of er nog plaatsen zijn - Controleert of email al is ingeschreven voor dit event - Schrijft email in voor Event
  • Lists:DIWUG Events =&gt; Content Type DIWUG EventDIWUG EventsAgendas =&gt; Content Type DIWUG Agenda Item3 webparts:UpcomingEventInfoWebPartUpcomingEventAgendaWebPartUpcomingEventLocationInfoWebPartUpcomingEventInfoWebPart =&gt; Utils.GetUpcomingEventInfo()Toont Description en meta data&lt;meta content=&quot;DIWUG event&quot; itemprop=&quot;name&quot;/&gt;UpcomingEventAgendaWebPart =&gt; MaventionContentQueryWebPart ( wordt via provisioning uitgerold )CreateChildControls() :=&gt; upcomingEventInfo = Utils.GetUpcomingEventInfo(SPContext.Current.Site);QueryOverride = Utils.GetEventAgendaQuery(upcomingEventInfo != null ? upcomingEventInfo.EventId : -1);UpcomingEventLocationInfoWebPartGetUpcomingEventInfo()Toontproperties van UpcomingEventInfoDiv Map =&gt; door MapInitialization.ascx gevuld.
  • Event History:PreviousEventsOverviewWebPartACSX code:&lt;UL&gt;ForEachpreviousEvent &lt;H2&gt;Time &amp; LocationForEach Presentation previousEvent.Presentations &lt;UL&gt;Code Behind:Load:GetPreviousEventInfo()Event Assets:EventAssetsWebPart (Mavention CQWP)OverrideCreateChildControls -querystring Event - QueryOverride : CAML GetEventAssetsQuery
  • CurrentMagazineInformationWebPart (Mavention CQWP) =&gt; Haalt de meest recente DIWUG Magazine item op (ItemLimit = 1, SortDirection = DESC) uit de Pages libraryPreviousMagazinesInformationWebPart (Mavention CQWP) =&gt; a la CurrentMagazineWebpart, maar nu geen itemlimit. =&gt; ItemStyle templatediwug-PreviousEditions (eerste item wordt genegeerd : is currentedition)
  • Alternatief : Google Analytics =&gt; onclick event javascript bij link. Maar dan mis je counters wanneer de link bijv via twitter wordt gedeeld.
  • Transcript of "DIWUG.nl: How We Did It"

    1. 1. DIWUG.nl: How We Did It Waldek Mastykarz Octavie van Haaften
    2. 2. Octavie van Haaften• work: http://www.mavention.nl• blog: http://blog.octavie.nl• mail: octavie@mavention.nl• twitter: @eivatco
    3. 3. Waldek Mastykarz• mvp: SharePoint• work: http://www.mavention.nl• blog: http://blog.mastykarz.nl• mail: waldek@mavention.nl• twitter: @waldekm
    4. 4. Why this session• New website for DIWUG• Showcase small website on SharePoint 2010• Lessons learned
    5. 5. What’s in it for you• Learn how to leverage the SharePoint 2010 platform for Internet sites• Learn how to deal with common WCM challenges• Build better websites• Developer-focused
    6. 6. Diwug.nl v2 Goals Flexible Dynamic + WP7 app everything else
    7. 7. Diwug.nl v2 Goals Optimized Accessible for search engines Fast Awesome
    8. 8. Websites vs. PortalsRequirements Wireframes PSD HTML Functionality (SharePoint)
    9. 9. Crafting HTML• Mavention Flex Layout• HTML5 – Adds more meaning, but – Consider older browsers• No <form runat=“server”>
    10. 10. Authoring vs. PresentationAuthoring Presentation• Full content publishing • No Form tag capabilities of SharePoint • No Ribbon 2010 • No SharePoint scripts• Web Parts • HTML5• Content aggregations• Adventure (Works)
    11. 11. Challenge #1: No <form>• Endpoint (HTTP Handler)• POST action• Progressive enhancement – Doing things twice
    12. 12. Challenge #1: No <form> Con’s • More work • Non-standard approachPro’s• Reuse endpoint• Cleaner HTML• Lower page size• HTML5 controls• Progressive enhancement
    13. 13. Challenge #2: Multi-page forms• Scenario: subscribe for an event while not being a member – Fill in e-mail address • Not a member! – Register as member (different form) • Reuse e-mail • Register • Subscribe for the event
    14. 14. Challenge #3: SEO• Valid and accessible markup• Small page footprint  Fast• HTML5  Semantics• Microdata (http://schema.org) – Upcoming event • Subscribe bar • Event page – Event History
    15. 15. Challenge #4: Accessibility• Works in every browser on every device• No technology assumptions – JavaScript – Silverlight/Flash• Progressive enhancement – Forms – Magazines overview• Event history  query string
    16. 16. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    17. 17. member registration
    18. 18. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    19. 19. subscribe event
    20. 20. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    21. 21. upcoming event info
    22. 22. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    23. 23. event history
    24. 24. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    25. 25. e-magazines
    26. 26. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 readiness
    27. 27. download count e-magazines
    28. 28. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    29. 29. windows phone 7 app readinessupcoming-event.ashx• collects event info and agenda items• returns xml
    30. 30. Summary• SharePoint 2010 is good even for small sites• Decoupling authoring from publishing offers great results• Internet sites != Portals• Great results can be achieved on SP2010 FIS• Reusable handlers for forms and apps
    31. 31. thank you

    ×