1. National Association of Government Web Professionals 2013 National Conference
LESSONS IN SHARING
OPEN SOURCE
Leslie Labrecque
City of Boulder, Colorado
2. National Association of Government Web Professionals 2013 National Conference
Agenda
• Project Definition
• Technology Used
• Lessons Learned
• The Final Product
• Questions
3. National Association of Government Web Professionals 2013 National ConferenceNational Association of Government Web Professionals 2013 National Conference
Project Definition
Project Phases Defined
4. National Association of Government Web Professionals 2013 National Conference
Old Website
Design
• This was our old website…
• Joomla CMS
• Around since May 2006
5. National Association of Government Web Professionals 2013 National Conference
Phase I - Research Project
• Site Navigation
• Content Organization
• Data Retention and Archiving
• Search Capabilities
• Site Aesthetics
• CMS Functionality (Joomla)
6. National Association of Government Web Professionals 2013 National Conference
Phase I - Process
• Request for Information (RFI) Issued
• Nine proposals received
• Five vendors selected to present
• Narrowed down to two vendors
7. National Association of Government Web Professionals 2013 National Conference
Phase I – Design Winner
• Vision Internet
• Deliver a responsive design template
• We would integrate with the CMS
8. National Association of Government Web Professionals 2013 National Conference
Phase I – CMS Winner
• City of Arvada
• Shared use of their CMS
• Both cities would use and contribute to
• Enter into an intergovernmental agreement
• We added a PHP developer position to our staff
9. National Association of Government Web Professionals 2013 National Conference
Phase II - Implementation
Date Task
Apr 2012 Kick-off call with Vision Internet
Apr – May
2012
Conducted internal and external surveys
Jul 2012 On-site visit and approved wireframe
Aug 2012 Delivered round I design mockups
11. National Association of Government Web Professionals 2013 National Conference
Design 1 Design 2
Design 3
12. National Association of Government Web Professionals 2013 National Conference
And The Winner Is…
13. National Association of Government Web Professionals 2013 National Conference
Design Phase Timeline
Date Task
Aug 2012 -
Dec 2012
Worked on homepage mockups
Dec 2012 Completed and approved homepage mockup
Jan 2013 Completed interior page design
Feb 2013 Delivered working prototype
Tested and refined prototype
Work with Vision completed
14. National Association of Government Web Professionals 2013 National Conference
CMS Implementation
Date Task
Sept 2012 Hired PHP Developer
Oct 2012 Installed Arvada’s CMS code
Mar 2013 Integrated design with CMS
Ran migration script
Trained users
Mar 2013 –
Jul 2013
Repurposed content for responsive design
Jul 2013 GO LIVE!
15. National Association of Government Web Professionals 2013 National Conference
Would Also Be Great If…
• Implement new constituent relationship management
system (CRM)
• Online document repository
• Officially announce online data catalog
16. National Association of Government Web Professionals 2013 National ConferenceNational Association of Government Web Professionals 2013 National Conference
Technology Used
The Technology We Are Using
17. National Association of Government Web Professionals 2013 National Conference
Arvada CMS (XPress)
• PHP 5
• MySQL database
• Kohana PHP framework
• jQuery UI
18. National Association of Government Web Professionals 2013 National Conference
Why We Chose XPress
• Government specific
• Easy/Intuitive for our web managers
• Integrated link checker to scan for broken links
• Integrated with Vimeo, YouTube, Google Maps and Flickr
• Tagging system to multi-purpose content
19. National Association of Government Web Professionals 2013 National Conference
CMS/Social Media Integration
• Embed related videos from YouTube and Vimeo
• Include related photos from Flickr
• Provide map with address on any page
• Include an image banner on any page
• Include scrolling mini-banners on any category
20. National Association of Government Web Professionals 2013 National Conference
Additional Technology
• CRM - Government Outreach hosted solution
• Online Records Access – Laserfiche web portal (Rio)
• Open Data – Open Colorado/CKAN
21. National Association of Government Web Professionals 2013 National ConferenceNational Association of Government Web Professionals 2013 National Conference
Lessons Learned
What We Learned From This Project
22. National Association of Government Web Professionals 2013 National Conference
Clean House
• Clean up the code before sharing
• Remove hard-coded variables
23. National Association of Government Web Professionals 2013 National Conference
Learn the Technology
• Take the time to learn the technology
• Do this before you install the code
24. National Association of Government Web Professionals 2013 National Conference
Hire Good People
• Added PHP developer position
• Have a rock star systems administrator
25. National Association of Government Web Professionals 2013 National Conference
Communication
• Regular meetings
• Show/Tell
• Keep management informed
26. National Association of Government Web Professionals 2013 National Conference
Establish Roadmap
• Where is the project going?
• Agreed upon enhancements
• Enhancement timeframe?
27. National Association of Government Web Professionals 2013 National Conference
Scope Creep
• Lot of things you can do
• Stick to the roadmap
28. National Association of Government Web Professionals 2013 National Conference
Shared Code Repository
• Master code repository
• Each agency can have their own
29. National Association of Government Web Professionals 2013 National Conference
Bug Tracking
• Collectively log bugs
• Collectively squash bugs
30. National Association of Government Web Professionals 2013 National Conference
Modularize
• Write reusable modules
• Can someone else use this?
31. National Association of Government Web Professionals 2013 National Conference
Know Your APIs
• Read the documentation
• Write code to catch exceptions
• Sign up for updates
32. National Association of Government Web Professionals 2013 National Conference
Webmaster Tools
• Setup Google and Bing
webmaster tools in advance
• Fetch as Bingbot and Googlebot
• Don’t delete old website
33. National Association of Government Web Professionals 2013 National Conference
Bing Move Tool
• Use the Site Move Tool!
• Located under Diagnostics & Tools
34. National Association of Government Web Professionals 2013 National Conference
Responsive Design
• Include tables and forms in
design contract
• Separate stylesheet for IE8
• Will not work for IE7 or below
35. National Association of Government Web Professionals 2013 National Conference
HTTPS?
• Everything has to be https
• IE will throw an error every time
• Newer browsers will not show
the content
36. National Association of Government Web Professionals 2013 National Conference
Keep Old Website Active
• Maintain access to old website
• Use no follow in <meta> tag on
old website
37. National Association of Government Web Professionals 2013 National Conference
Search Issues
• Have a good internal search
• Search engines take time to reindex
38. National Association of Government Web Professionals 2013 National Conference
Robots.txt
• Include directories you don’t want indexed
• Use wild cards to eliminate old pages
39. National Association of Government Web Professionals 2013 National Conference
Sitemap.XML
• Create a sitemap
• Place at the root
• Submit to webmaster tools
accounts
40. National Association of Government Web Professionals 2013 National Conference
301 Redirects
• Setup 301 redirects
• Redirect top level pages
• Redirect high traffic pages
41. National Association of Government Web Professionals 2013 National Conference
Soft/Hard 404 Error
• Hard 404: Not Found
• Soft 404: Also returns 200 OK code
42. National Association of Government Web Professionals 2013 National Conference
Documentation
• User and reference manuals
• Style guides
43. National Association of Government Web Professionals 2013 National Conference
Share The Love
• Setup a website to share
• Join the community and
help where you can
44. National Association of Government Web Professionals 2013 National ConferenceNational Association of Government Web Professionals 2013 National Conference
The Final Product
Where We Are Now
50. National Association of Government Web Professionals 2013 National Conference
Questions?
Email: labrecquel@bouldercolorado.gov
Twitter: @leslielabrecque
Delicious: d.me/leslielabrecque
Slideshare: slideshare.net/leslielabrecque
Hinweis der Redaktion
Joomla was our first content management system and the largest opensource software application at the city This was my first opensource CMS We have about 100 web content authors and we grew with this system Prior to this version of the website we had a combination of Dreamweaver and Contribute and even prior to that we had a Frontpage website.
In 2009, a citywide Information Technology Strategic Plan and Efficiency/Effectiveness Evaluation was conducted resulting in identification of a project focused on redesigning the city’s current web presence. Formed a project team of web managers to review these items Our first meeting was December 2010.
In addition to the research we conducted we also put out a Request For Information. We specifically asked for a responsive design. We also asked the vendors to tell us what they could do related to Joomla. At this point we didn’t really want to change from Joomla if we didn’t have to. In October 2011 we made our final recommendations to the IT Steering Committee. The majority of the vendors pitched opensource solutions to us. Some were going to help us make our Joomla installation better. One of the vendors was the City of Arvada. They proposed the use of their content management system which they had been developing for about five years. They were going to give us the code for free but we had to commit to contribute back to the system.
Vision gave us the option to just do a design with them or do a design and implement their CMS. We wanted to continue using opensource so we went with just the design They delivered the source files to us and we needed to integrate with the CMS
We did both internal and external polls on the design mockups. We also allowed for comments. We were conducting this research in October 2012. In both cases Design 2 won. Externally Design 1 and Design 2 were pretty close. Actually Design 1 beat it by a couple votes Since Design 2 won by a landslide internally we continued to refine design 2.
The agencies need to agree on the direction. What are the improved enhancements? What are bugs?
If you don’t specifically include tables and forms your design vendor will not deliver this. If you have done your homework and know a good framework that will include this you can recommend they use it If many of you are like us and still have users on Windows XP then you have will have IE8 browser installs If anyone has IE7 responsive design will not work as it doesn’t support media queries You will need to support a separate stylesheet for IE8. Test on different devices, operating systems, browsers, etc.
Encrypts all communication between the user and the web server Good example of this is the admin login of the CMS This is going to require extra work because EVERYTHING has to be https All includes, images, vendor wrapped applications, etc.
There are two important considerations when using the robots <META> tag: robots can ignore your <META> tag. Especially malware robots that scan the web for security vulnerabilities, and email address harvesters used by spammers will pay no attention. the NOFOLLOW directive only applies to links on this page. It's entirely likely that a robot might find the same links on some other page without a NOFOLLOW (perhaps on some other site), and so still arrives at your undesired page.
A 404 error indicates that the requested resource may be available again in the future; however, the fact does not guarantee the same content. Some websites report a "not found" error by returning a standard web page with a "200 OK" response code; this is known as a soft 404 . Soft 404s are problematic for automated methods of discovering whether a link is broken.