DIWUG.nl: How We Did It
•
0 gostou•1,060 visualizações
Recently Mavention built a new website for DIWUG. Find out how they did it, what challenges they stumbled upon and how they solved them.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a DIWUG.nl: How We Did It
Semelhante a DIWUG.nl: How We Did It (20)
Mais de Mavention
Mais de Mavention (8)
Último
Último (20)
DIWUG.nl: How We Did It
- 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. Portals Requirements 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. Presentation Authoring 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 approach Pro’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
- 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
- 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
- 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 readiness upcoming-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
Notas do Editor
- 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.