Codes of the World Overview & Roadmap
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.
Read more at “Decoding Unicode”
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:
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
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.
