code-for-all / codeforall.org-concept-2017

Design concept for a new website of Code for All

Code for All Website

Code for All is a network of civic technology groups across the world.

Goals

There a few goals with this website:

1. Show the collected activites of the Code for All network.
2. Promote the work of the Code for All partners.
3. Host tools needed by the network.
4. Attract people to the Code for All network

Development

This site is built with HTML, CSS, Javascript. It runs on jekyll and is hosted by GitHub Pages.

1. Create a fork of this project
2. Clone the fork to your computer
3. cd codeforall.org into the directory
4. run jekyll serve . from the root of the project
5. Open the site at http://localhost:4000
6. You can now manipulate the files and refresh your browser to see the results
7. When finished, commit your changes and push them to your fork
8. Create a pull request

Resources

The data about the Code for All groups is pulled from the Code for America API. The work on that project is happening under the cfapi repository.

Map data available from Natural Earth Data

Contacts

• Milo van der Linden (milovanderlinden)

Submitting an Issue

We use the [GitHub issue tracker][issues] to track bugs and features. If you're not used to that, here's a quick video intro.

Before submitting a bug report or feature request, check to make sure it hasn't already been submitted. You can indicate support for an existing issue by voting it up. When submitting a bug report, please include a Gist that includes a stack trace and any details that may be necessary to reproduce the bug.

codeforall.org-concept-2017's Issues

Add a link to last year's annual report underneath the video

http://www.codeforamerica.org/about/international/2013-annual-report/index.html

Revive this repository

Within the slack of Code For All, Cerina Bezuidenhout and Olivia Vereha have set up a new design for the codeforall website https://app.moqups.com/[email protected]/KX6xQBcqDE/view we would like to revive this repository to hold this new design and the future website of Code For All so we can migrate away from wordpress

Add a calendar of events

Description

We should create a calendar of events for the Code for All partners.

There are two different projects here:

• Getting data for all of the Code for All events.
• Showing the calendar on the codeforall website.

Creating the events

To create the Code for All events, we've got some options. @juliakloiber probably has some opinions.

1. I'm setting up a Google Apps account for codeforall.org soon. We could use the calendar built into that, and just have everyone manually enter events. This would work for the big events, but we'd still miss most of the smaller volunteer run hack nights.
2. If we all made our own calendar feeds, we could use something like http://calagator.org/about to aggregate them together.
3. The CfAPI supports Meetup events. Unfortunately only 3 out of 23 Code for All groups use Meetup.com. We could add support to the CfAPI for other event services.

Building the calendar

For showing the calendar on the website, it totally depends what type of data feed we'll be getting.
@ayouidaniel suggested the http://fullcalendar.io/ library. That would be super easy if we use the CfAPI or an rss/atom event feed.

How do we present donors?

• how do we present donors? -> ON, NED

Enhancements to the Code for All resources page

• add links to Code for All case studies and the Code for All Year One report to the Resources page
• create way for Code for All partners to add their own resources to the page (maybe powered by the CfA API?)

Reduce filesize on all the new pictures

They are huge! They need to be shrunk so that they display faster.

Go through these and reduce the file size where needed. https://github.com/Code-for-All/codeforall.org/tree/gh-pages/images

Page: About Us

Create an "About Us" page that contains information about:

• Why we exist
• What we do

Content currently available in website Brief should be used here.

Merge _data/organizations.json and assets/organizations.geojson

Make all organization related content available through ajax/javascript instead of integrated in jekyll

Use logos from CfAPI

Once logos are added to the CfAPI, use them instead of the hard coded versions we have now.

Partner logo's

We need to have a solid source for partner logo's that maintains usable dimensions for thumbnails as well.

Get rid of Program History section on About page

Blog - Embed Medium

Currently the blog section contains old blog posts from the previous site. I would like to suggest moving them to medium and having Blog be a direct link to medium.

Build with Jekyll?

Could this be built using Jekyll? Makes it easier for adding content.

Page: Case Studies

Curated case studies presenting collaboration efforts between partners or projects ready to scale.

Metadata similar to:
https://clarity.codefor.nl/cbase/making-sense-408709ae4342afd354fd1f51d2a42d47/usecase/gammasense-06f8f0c2928c0e8fbb9abfd8dc061e2b

• Name
• Description
• Photo
• Point of contact
• Category
• Links

Allow to browse by categories.

Remove Code For NL Fork

As we now have direct access to this repository, it is no longer required to pull to https://github.com/codefornl/codeforall.org @jgroenen is it ok if we set our local upstream to https://github.com/code-for-all/codeforall.org and remove this repository?

Page: Contact Us

The contact page described in the brief is a duplicate of a lot of the information already available on the affiliate partner / governing partner page.

Please provide details for this page and also provide address and legal information to be presented here.

subPage: Governing partner

who is a governing partners, how to become one?
Linked from #35

Copy: from https://codeforall.org/becoming-a-partner/:

• Governing Partners
• Process for Consideration of New Governing Partners
• Partnership Committee
• • "Feel that you are ready to upgrade from Affiliate to Governing Partner status? Talk to us."

Polish design of mobile site

Description

The website is kind of ugly on mobile.

We use the Responsive DataTables extension. To show the groups.

subPage: Affiliate Partner

who is an affiliate; how to become one
Linked from #35

Copy: from https://codeforall.org/becoming-a-partner/:

• Affiliate Partners
• Process for Consideration of New Affiliate Partners
• • point of contact. Which?

Add social buttons to footer

In the footer, add buttons for:

• Facebook
• Twitter
• Youtube
• Medium
• Email

How about project sharing & managing platform among code for all groups

This platform that I want to suggest is being needed to us, Codenamu.
It's similar with Code for Philly, but it should be more independant to platform and can aggregate all of codeforall groups.

Functions(in my opinion)

• list of projects of each codeforall group
• list of updates of projects that are being runned or are done(of each codeforall group)
• list of people who are involved in each project

Wish

• list of people who are needed to the project
• join the project

Branching workflow

I know I have only pushed one small commit, but what are your thoughts on:

-[ ] Forking the gh-pages branch to master and enabling protection on it.
-[ ] Make the master branch the default branch to display and commit against.
-[ ] Removing 2015-summit branch if legacy and not needed anymore.

These changes might help encourage contributions by following a popular branching workflow for GitHub projects.

Change mission statement language on the About page

Header paragraph on the About page should read:

Code for All is an international network of people and organizations who believe that digital technology opens new channels for citizens to more meaningfully engage in the public sphere and have a positive impact on their communities. We enlist and support the public to create digital resources, tools and practices that result in stronger local communities and more responsive and effective governments.

Add a "Join Us" section to the Code for All website

Language is here at the bottom of the doc: https://docs.google.com/a/codeforamerica.org/document/d/1FoNVOnhr0PCXWHGPgeP5dO7Vk1O0w22Vr2zQ65g10Pg/edit#

Change the language in the "What We Believe" section of the About page

It should read (and all first sentences should be bolded):

Code for All’s partner institutions operate under the following shared principles:

We show what’s possible. Using data-driven, user-centered and iterative methods, Code for All partners create digital interfaces to government that are simple, beautiful, and easy to use, and do this dramatically faster and cheaper than through traditional channels. Showing what’s possible changes the conversation, lowers the risk of experimentation, and creates political will for innovation in government.

We build for and with citizens. Engaging citizens in our work is central to our theory of change. Strong democracies rely on trust between citizens and government, and we believe that organizing the public to actively participate in improving bureaucracy and service delivery is the most productive way to build sustainable change in the public sector. We also support government and civil society to develop the capacity to effectively collaborate with the public.

We improve government and civil society, not politics. Code for All’s work focuses on opening and innovating the implementation of policy and the delivery of public services, through the administration and bureaucracy of governments and civil society. While we recognize the import of political reform and policy advocacy to the success of our work, we have purposely narrowed our focus to the areas where citizens are most likely to come into contact with government.

We operate in public. We promote openness in our work and in the work of our civil society/government partners. All of our digital tools are open source. We actively encourage documentation, sharing, collaboration, and reuse of all of our tools, programs, and processes.

We help build an ecosystem. Whenever possible we reuse existing tools, standards and platforms, encouraging integration and extension. We operate as a global community, leveraging each other’s knowledge and resources, because all of our work is better if we are connected.

Make list of partners concise on Page:Partners

• list of partners
  • name
  • country (flag)
  • organization logo (maybe? may pollute visually)
  • link to the website
  • status (governing / affiliate) - tag or an icon

Descriptions and multiple links will be dropped.

Add a credit for the video

Video should be credited to John Lange and link to his site: http://www.thesandboxmedia.com/

Page: Partners

• rename "chapters" to "partners"
• map
• list of partners
  • name
  • country (flag)
  • organization logo (maybe? may pollute visually)
  • link to the website
  • status (governing / affiliate) - tag or an icon
• at the bottom info about partnerships
  • How do I join?
    • Governing partner -> READ MORE
    • Affiliate partner -> READ MORE

Questions:

• how do we present donors? -> ON, NED
• how do we present strategic partners, such as NDI?

Looking at current version of https://codefornl.github.io/codeforall.org/chapters/:

• drop mission statements and all links except for the one to the main website
• move here links to more detailed information about joining

Page: Resources

• take out the photo on https://codefornl.github.io/codeforall.org/resources
• create columns that are categories of content
  • Fellowships:
    • http://www.codeforamerica.org/playbooks/fellowship/toolkit/
      Code for America’s Fellowship Toolkit: Code for America’s advice on starting a similar fellowship program.
    • http://archive.codeforamerica.org/media/docs/codeforall/cftc-casestudy.pdf
      Code for the Carribean, 2015
    • http://archive.codeforamerica.org/media/docs/codeforall/cfmc-casestudy.pdf
      Laboratorio para la Ciudad, Mexico, 2015
    • http://archive.codeforamerica.org/media/docs/codeforall/cfg-casestudy.pdf
      Code for Germany, 2015
  • Brigades:
    • https://docs.google.com/document/d/19bN5RWK5nQTpz0mHUViHrzHiommBUAMSztwNRzUcxYo/edit#heading=h.v3vvoe3g4dep
      Organizer’s Playbook; The Playbook gives practical advice and real examples on starting and running a sustainable Brigade.; It includes: guidance on hosting hack nights, building a core team, and practicing user-centered design.
      Code for America, 2018
    • https://docs.google.com/document/d/16CL9TdmWV0hDY6c85PwtzUcu1VjeSeiDFD2CbtLKf7s/edit#heading=h.wvfs33y672bp
      Organizer’s Handbook
      Code for America, 2018
    • http://www.codeforamerica.org/brigade/organize/calendar/
      Brigade Organizer’s Calendar: Overview of Code for America’s days of action, workshops, and more.
    • http://brigade.codeforamerica.org/software/
      Software Available to Brigades
      Code for America; 2018
    • http://archive.codeforamerica.org/media/docs/codeforall/cfg-casestudy.pdf
      Code for Germany, 2015
  • Digital government
    • http://www.codeforamerica.org/practices/
      Code for America’s Practices for 21st Century Government:
  • Impact research
    • gather links from #impact on Slack
• under each column place "Resource cards" with following metadata
  • Name
  • Short description
  • Year of production
  • Author / organization
  • Point of contact (name, email)
• throw away annual reports
• below add a button: propose new resource with link https://github.com/Code-for-All/codeforall.org/issues/new?title=Resource proposition:&labels=resource&body=Link:%0AName:%0ADescription:%0AOrganization:%0APoint%20of%20contact:

https certificate reported as insecure

My browser reports the api endpoint for https://api.codeforamerica.org/api/organizations.geojson as insecure. I do need it however for https://code-for-all.github.io/codeforall.org/chapters to show the map.

Change table color

@ondrae couldn't figure out what color slabgray is. Can you help and change the table color to the same color as the bg. Thx! (on the summit subsite)

Remove Tom Steinberg and Ory Okolloh as advisors

This section should also probably be moved to the very bottom of the page

Make favicon the compass logo

@cbracy wants the favicon to be the compass logo. http://codeforall.org/images/code_for_all_logo.png

Change the program contact from Lynn to Bracy

How to fit Civic Issue Finder ?

@milovanderlinden wrote on #38

---

There is another version of the Civic Issue Finder over at https://helpwanted.team/ Its meant to make it easier to get help on certain Github Issues that you choose. The content gets updated with issues labeled help wanted.

@ondrae set an environment up for Code for All https://helpwanted.team/code-for-all

Maybe this can be integrated into projects/resources?

Code for All site requirements

Here's a proposal of site requirements based on the goals:

1. Show off the collected activities of the Code for All network.

• Use a statically defined list of Code for All partners to then use cfAPI to:
  • get list of projects
  • get list of issues
  • get list of events

2. Promote the work of the Code for All partners.

• Use an RSS feed aggregator (such as http://selfoss.aditu.de/) to combine all 'Code for' feeds from cfAPI
• We can also add separate feeds to this aggregator if we wish

3. Host tools needed by the network.

• No additional tools required at the moment (apart from RSS aggregator)

Please discuss so we can adjust and then confirm the requirements.

Integrate _data/partners with assets/organizations.geojson

How do we present strategic partners, such as NDI?