User:Linkdude101

I am a participant in the 2013 Google Code-in challenge. You can find my submission for the "Convert two pictures of diagrams into Wikitext" task at https://www.mediawiki.org/wiki/User:Linkdude101/Project:New_contributors_diagrams

Essay:

When I first heard about the 2013 Google Code-in challenge, I was very interested, but worried that it would focus on programming languages like Java and C++. Although I have experience with those languages, I am more skilled in languages such as HTML and CSS. As I looked into the contest, however, I learned that web design and user interface tasks were available in a wide variety. I was extremely excited, because now I had a way to practice the areas in which I am most skilled. I noticed Wikimedia as a sponsoring organization. Like many others, I use Wikipedia for everything -- learning random information, settling bets, and more. However, I had never edited an article or gotten involved in the community. When the contest began, I went straight to Wikimedia for a task, and found one that caught my eye: "Convert two pictures of diagrams into wikitext." The objective of this task seemed relatively simple: examine two diagrams that had been drawn by Wikimedia employees on white boards, provide a transcript of them, and convert them into HTML and CSS diagrams. This seemed like a fun, but challenging task, so I requested to work on it. While waiting for my claim to be approved, I went to mediawiki.org and read about the site.

From what I could tell, it appeared to be some sort of open-source collaborative project that uses PHP and wikitext and is affiliated with Wikipedia and other Wikimedia projects. I read the introductions, tutorials, and talk pages to give myself an idea of what I would be working with. By the time my claim on the task was approved, I felt that I was ready to take on the challenge. I began by planning out my diagram design on paper. Once I had my general ideas, I created the wiki page and began my diagrams. For the first one, I used an ASCII art picture to transform the original drawing into text. While I was working on it, I received a message on the task page from my mentor, Quim Gil. He asked me how it was going and informed me that communication was key to a good project. Heeding his advice, I showed him my work so far and asked him what he thought.

Quim told me that using ASCII art limited the editability of the diagram, so using a design that could be easily edited would work better for the next diagram. I reworked my idea and came up with an outline format design. Using tags inside table cells, I was able to make a clean, aesthetically-appealing, and functional diagram. It was difficult to get the design right. Every time I tried to fix a minor mistake, something else (spacing, color, etc.) got messed up. My mentor's advice, however, helped to guide me through the process of perfecting my design.

In addition to Quim's help, I received a great deal of assistance from pages on MediaWiki. Tutorials showed me how to use the site's available tools to expedite the process. A color guide showed me what hues of colors to use to improve the aesthetics of the diagram. Talk pages showed me tricks to improve my project. Without the help of these sources, my diagrams would never have been as good as they ended up being. I think that the ease and simplicity of MediaWiki's editing page greatly assisted me. With a few clicks, I could change my text to a paragraph or header without having to worry about complicating things with and tags. I also liked the community aspect of the site. The "discussion" tab promotes sharing and collaboration, and the ability for anyone to edit pages allows everybody to combine their skills and efforts.