Your SlideShare is downloading. ×
DIWUG.nl: How We Did It
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

DIWUG.nl: How We Did It

1,425
views

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.

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,425
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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 > wireframes > psds > html > sitesDifferent than in portals
  • No <form> = No postbackDIWUG has forms
  • RegistrationFormWebPart => Form Action=Register.ashxRegister.ashx => New Member() => Lists/Members
  • SubscribeBar.ascx => PageLoad : is er een UpcomingEvent? => Ja, is er nog plaats? => Ja, dan form (action = subscribe.ashx) tonen met EventInfo en email input andsubscribe button => Nee, EventText tonen (event full) => 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 => Content Type DIWUG EventDIWUG EventsAgendas => Content Type DIWUG Agenda Item3 webparts:UpcomingEventInfoWebPartUpcomingEventAgendaWebPartUpcomingEventLocationInfoWebPartUpcomingEventInfoWebPart => Utils.GetUpcomingEventInfo()Toont Description en meta data<meta content="DIWUG event" itemprop="name"/>UpcomingEventAgendaWebPart => MaventionContentQueryWebPart ( wordt via provisioning uitgerold )CreateChildControls() :=> upcomingEventInfo = Utils.GetUpcomingEventInfo(SPContext.Current.Site);QueryOverride = Utils.GetEventAgendaQuery(upcomingEventInfo != null ? upcomingEventInfo.EventId : -1);UpcomingEventLocationInfoWebPartGetUpcomingEventInfo()Toontproperties van UpcomingEventInfoDiv Map => door MapInitialization.ascx gevuld.
  • Event History:PreviousEventsOverviewWebPartACSX code:<UL>ForEachpreviousEvent <H2>Time & LocationForEach Presentation previousEvent.Presentations <UL>Code Behind:Load:GetPreviousEventInfo()Event Assets:EventAssetsWebPart (Mavention CQWP)OverrideCreateChildControls -querystring Event - QueryOverride : CAML GetEventAssetsQuery
  • CurrentMagazineInformationWebPart (Mavention CQWP) => Haalt de meest recente DIWUG Magazine item op (ItemLimit = 1, SortDirection = DESC) uit de Pages libraryPreviousMagazinesInformationWebPart (Mavention CQWP) => a la CurrentMagazineWebpart, maar nu geen itemlimit. => ItemStyle templatediwug-PreviousEditions (eerste item wordt genegeerd : is currentedition)
  • Alternatief : Google Analytics => onclick event javascript bij link. Maar dan mis je counters wanneer de link bijv via twitter wordt gedeeld.
  • Transcript

    • 1. DIWUG.nl: How We Did It Waldek Mastykarz Octavie van Haaften
    • 2. Octavie van Haaften• work: http://www.mavention.nl• blog: http://blog.octavie.nl• mail: octavie@mavention.nl• twitter: @eivatco
    • 3. Waldek Mastykarz• mvp: SharePoint• work: http://www.mavention.nl• blog: http://blog.mastykarz.nl• mail: waldek@mavention.nl• twitter: @waldekm
    • 4. Why this session• New website for DIWUG• Showcase small website on SharePoint 2010• Lessons learned
    • 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. Diwug.nl v2 Goals Flexible Dynamic + WP7 app everything else
    • 7. Diwug.nl v2 Goals Optimized Accessible for search engines Fast Awesome
    • 8. Websites vs. PortalsRequirements Wireframes PSD HTML Functionality (SharePoint)
    • 9. Crafting HTML• Mavention Flex Layout• HTML5 – Adds more meaning, but – Consider older browsers• No <form runat=“server”>
    • 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. Challenge #1: No <form>• Endpoint (HTTP Handler)• POST action• Progressive enhancement – Doing things twice
    • 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. 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. 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. 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. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    • 17. member registration
    • 18. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    • 19. subscribe event
    • 20. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    • 21. upcoming event info
    • 22. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    • 23. event history
    • 24. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    • 25. e-magazines
    • 26. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 readiness
    • 27. download count e-magazines
    • 28. Functionality• member registration• subscribe event• upcoming event info• event history• e-magazines• download count e-magazines• windows phone 7 app readiness
    • 29. windows phone 7 app readinessupcoming-event.ashx• collects event info and agenda items• returns xml
    • 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. thank you