An Overview of the Project History

“Codes of the World” is a core focus at the Rural Design Collective, under development since 2011. The project gives participants in our program the opportunity to learn a wide variety of web, design and production skills that apply to most any STEM field of interest and are essential to creating on the Internet today. Our core group at this time ranges from 7-14 years of age and when they begin, their experience level is generally basic computer user skills. At the RDC, they get the opportunity to excel in a collaborative environment outfitted with state-of-the-art equipment, and learn that a computer is a tool to unleash their creativity in a positive way. The techniques and experiences gained in our program give them the power to use technology to innovate and express themselves on independent projects, to make and invent things, and to enhance their performance in the classroom.

Codes of the World – General Skills Covered

Animation – SVG animation methods include SMIL, SVG animation using the DOM as specified by the W3C, and HTML5 + CSS3. Production methods emphasize thinking of an illustration as distinct objects and movable parts so they are readily animated. The video below “The Power of Vectors” illustrates this concept and was created during the youth program.

Coding – Basic coding skills include page markup with HTML + CSS with more advanced coding concepts implemented in the development of our workflow for automating SVG production.

Computer Skills – Participants are required to set up their own computers in our lab and install, maintain and troubleshoot software and connectivity issues independently which is not generally offered in a shared computer environment where a system administrator oversees consistency across a network. This freedom instills confidence in participants and invites them to explore and invent.

Current Best Practices – Participants are introduced to concepts such as open source early in the program. They learn how to work directly in code using a text editor. They learn how to organize a project and meet realistic milestones to consistently achieve success. We emphasize superior production values and pride in craftsmanship in every endeavor as well as the importance of standards in the World and on the Web. Design is approached as a broad-ranging discipline where creative solutions to problems are encouraged. Open collaboration and communication during meetups encourages sense of teamwork and leads to serendipitous discovery.

Document Production – Although not heavily emphasized in the youth track, basic elements of document production such as scanning and optical character recognition are discussed to enhance understanding of page elements and web content.

Elements of Typography – A subset of design, typography is emphasized as fundamental building blocks and an important means to clearly communicate. Understanding at this level of granularity leads to a better appreciation of the aesthetics and functionality in web design and programming.

Extra Credit – We support and encourage extracurricular activities at #rdcHQ. These projects run the gamut and give participants an opportunity to further pursue and enhance a particular skill. One such example is building a web site for the robotics team at the local middle school. This project employs many of the skills learned in our “Codes of the World” track.

Markup (HTML, MathML) – Basic Page Markup and Advanced MathML Markup are explored. At this time, only Presentation MathML Markup has been covered in-depth.

Vector Illustration – Basic, Intermediate and Advanced skills in vector illustration are explored. We emphasize open source programs so participants can download and install the software on their own computers. Inkscape is the primary tool used in our “Codes of the World” Illustration track.

Understanding of Math Symbols – A fundamental understanding of all symbols used in MathML is acquired. This is primarily from a presentation standpoint, however it is useful on other levels.

Work Ethic – Closely related to production values, participants learn the importance of giving 100% to their project and seeing it through to completion.

Workflow Processes – An understanding of how all phases of the project work together is stressed. In 2011 and 2012, the focus of the program was developing and establishing the processes currently in use.

Video Production – Participants learn media skills in order to document work in progress. The above video “Understanding the Symbols” is an example of a tutorial video created during the youth program.

Roadmap (Historical) – Specific Techniques – SVG Art

2011 SVG Track

Our first season involved getting familiar with the Tools of the Trade. In the case of the creation and production of scaleable vector graphics, our tool of choice was Inkscape with a bit of crossover into Adobe Illustrator for specialized tasks. Illustration techniques involved basic diagrams and schematics, typographic controls, and working with blends and patterns. Concepts of open source art were introduced and the methodology for creating production ready art was put in place. The very simple concepts we developed are still in force today in our lab and have created a base for more advanced design and animation pursuits. See below for a list of “Quick Start” tutorials developed during our first year:

  1. Strokes and Compound Paths
  2. Autosave, Duplicate and Move
  3. Typography 101 and Layers
  4. Break Apart and Exclude
  5. Crosshatch and Grids
  6. Interpolate and Exclusion
  1. Patterns and Blends
  2. Interpolate and Tiled Clones
  3. Working with Paths Effectively
  4. Cloning and Layering
  5. Building Graphic Libraries

2012 SVG Track

In 2012, the focus was on more of the same material as all technical artistic skills require practice, practice, practice! We had the opportunity to expand our illustration repertoire with intermediate and advanced schematics and maps involving crosshatching, shading with patterns, and working with perspective and on a grid. Techniques such as modifying or repurposing existing art and using auto-trace to create patterns or achieve effects where precision is less important were introduced.


ART BEFORE (L) AND AFTER (R): An excellent example of how the RDC improves the art of any standard from the 2012 program.

2013 SVG Track

In 2013, we introduced “Standards Sprints” so participants could focus on an area of interest where they want to make a difference with their art. Improving safety standards was a unanimous favorite and repurposing existing art between two disability documents in the British Standard provided plenty of material to hone our vector skills. Basic SVG animation concepts were introduced to provide an understanding of technique (See BIG Update from #rdcHQ).

British Standard: Two Examples
An example of modifying existing art between two documents in the British Standard. The before and after versions show where inline descriptions are added for clarity or where the diagram has been modified to reflect an upgrade to the previous standard.

Pull the center green handle to the left and right to see the difference between the graphic in the two publications.

Another sample from the same set of documents. 10 years have elapsed between images which means that safety improvements have been developed and added to the diagram.

Roadmap (Historical) – Specific Techniques – MathML

Exercise in Accessibility: – Working with MathPlayer by Design Science in 2011. Click to hear a MathML EQ!

2011 MathML Track

As with the SVG Art Track, our inaugural year for “Codes of the World” involved researching many techniques and topics that led to our current processes. We learned how to use Amaya, the open source web editor by the W3C, and explored cross-platform presentation technologies such as MathJax for rendering in a web browser. Ultimately, we chose to create SVG representations of our coded equations to ensure accuracy when the work is translated to print. We discovered the open source SVGMath for our MathML to SVG conversion and modified it to suit our purposes.

2012 MathML Track

The 2012 season introduced document generation to enhance a greater understanding of the technologies involved in web content production. Through this knowledge, we were able to refine our method of producing MathML equations to the point where we were able to begin involving members of our youth group.

2013 MathML Track

2013 reinforced the techniques established in the previous seasons. Previously obscure concepts are now easily grasped by all age levels and are documented in video tutorials.

Roadmap (Historical) – Document Collections

Collections with Improved Art by The Rural Design Collective

Sample document set with improved art by The Rural Design Collective

California Building Standards Code – Title 24 of the California Code of Regulations contains the regulations that govern the construction of buildings in California.
California Code of Regulations – The remaining 27 Titles in the California Code of Regulations aside from Title 24.
US Public Safety Codes – Information and resources on safety and structural performance capabilities in construction in the U.S.
Eurocode (European Union) – The building code of the European Union. All citizens of Europe and those wishing to do business in the European Union must conform to the safety provisions of the Eurocode.
Public Safety Standards of India – Standards regulating the public safety of bicycles, buildings, condiments and spices, the testing of water, building safety, the control of pollution, and the proper functioning of fire fighting equipment.
Global Accessibility Standards – Standards regulating access to buildings and public facilities for [links]
European Public Safety Standards – Standards for the safety of child perambulators and wheeled child conveyances, code of practice for the design of buildings to meet the needs of disabled people, standards for fire safety and the safety of electrical installations.

Roadmap (Present and Future) – Next Steps

Codes of the World continues to have a positive impact on our program and has led to other successful projects at Rural Design Collective Headquarters and potential future avenues of exploration. Below are a few such examples.

Cobwebs College / Cobwebs The Movie

Cobwebs is an animated series being produced by creative youth at Rural Design Collective Headquarters. They are writing the script, creating the music, drawing the art and producing the movie all on-site at #rdcHQ. As they create the series, they learn new software programs and production processes. The core techniques introduced in the “Codes of the World” SVG Illustration Track outlined above are practiced in the creation of the Cobwebs artwork.

SVG Animation / SVG Markup

As our public domain library of graphics continues to grow, our interest is beginning to focus on how to take these scalable vector graphics to the next level through animation. Our tool of choice, Inkscape, is a powerful interface to building interactivity into these currently static graphics with the ability to assign object IDs to every shape, layer and stroke. The 2014 program will begin focusing on this to provide additional knowledge for our animation track.

Library Management / Similarity Engine

Over the three year eyolution of our program, we have amassed an impressive collection of production-ready graphics that are in need of a more sophisticated method of search and retrieval. As our work is intended for the public domain and is continuously published to the Internet, tools such as Google’s Image Search are useful but not particularly effective. SVG Markup and Metadata will play a role in this and we have conducted preliminary research into technologies such as OpenCV.

MathML (Content Markup)

Optical character recognition does an increasingly better job at rendering most mathematical equations and will theoretically handle more complex equations at some point and even automate MathML markup. As a result, we have de-emphasized the MathML track in our core offering, however alumni of the Rural Design Collective have pursued independent projects, most notably an application that facilitates the collaborative coding of MathML equations in a web-based interface. A Content MathML track would be interesting to explore in the future and would enhance the current repository of Presentation MathML.