This article will explain how to publish tutorials on the Away3D site, and which guidelines to follow to ensure the site’s content is consistent.
User Access
If you are a registered away3d.com user, you can email the Away3D team at info@away3d.com and request that you are granted privileges for publishing articles in our tutorials wiki. Once this is done, you can create a new tutorial by typing the name of the article you want to create in the “Find or Create Tutorial” search box on the top-right of this page. If a page named like that does not previously exist, you should see an edit button. Once you press it, you enter edit mode for the article and will be able to submit your tutorial.
Tutorial Writing Guidelines
The following sections in this article will enumerate the guidelines to follow when writing articles for the tutorials wiki.
Using Other Tutorials as Templates
The first thing you should do is enter edit mode for one of the older tutorials and extract its html code. This will show you a general structure to follow including css styling, usage of swf demos within figure elements, structure of sections, etc. Having the source of one of such tutorials should be of great help while you are developing your own.
No p’s
Since this is a wiki, there is no need to use html p elements. The white space in whatever you enter in the edit window will be maintained, meaning that you can use line breaks to specify paragraphs and should not manually split lines within a paragraph.
Sections and Navigation
Have a look at how older tutorials put content within sections and have a nav element on top in order to quickly see and navigate to the sections within the tutorial.
Aside
If you see the source of one of the older tutorials, you will see an aside section that specifies the difficulty of the article, requirements etc. This is an important section of your article and is required. This section should include a link to the sources of the tutorial on github as well as a downloadable zip file. More on the sources section.
Sources
You can embed code snippets in the article using the appropriate pre tag ( see older tutorials for how to link it to syntax highlighter ). When listing entire classes or demos, you should provide a link to the file in away3d-tutorials-fp11. To upload the files to this repository, please contact the Away3D team who will upload it for you or give you write access to the repository.
Special Terms and Code
See how older tutorials use the code html tag and styling for dealing with words that refer to new concepts or language variables.
Demos
All swf demos are image links within figure html tags with related captions. Images should be 540x400px big. The caption includes a description of the demo and a link to its sources. The image triggers a shadowbox overlay that contains the demo. The size of the demo should be around 800x600px. See the code on an older tutorial for this setup and please pay attention to the styling of the image, its size, and the size of the demo. Demos should also be hosted in away3d-tutorials-fp11.
BBCode
Notice how at the start of articles there is a div with class “tutorialMetadata” that specifies the category of your tutorial. If you do not include this, your article will not be categorized and will be more difficult to find. You can also use BBCode tags to link to other pages in the wiki. Follow this link to learn more about BBCode usage in the wiki.
Template for tutorials
<div class="tutorialMetadata">[[Category:Misc]]</div> <article> <aside> <span class="requirement">User Level</span> ... specify the skill level ... <span class="requirement">Prerequisite knowledge:</span> ... any required knowledge ... <span class="requirement">Required tools</span> ... software tools required ... <span class="requirement">Sources</span> ... a link to the source files preferably on github ... <span class="requirement">Downloads</span> ... a link to the project zip or other media for download ... </aside> ... Enter a brief objective of the tutorial - 1 sentence ... <h4>Contents</h4> <nav><ul> <li><a href="#sect1">... section heading 1 ...</a></li> <li><a href="#sect2">... section heading 2 ...</a></li> <li><a href="#sect3">... section heading 3 ...</a></li> <li><a href="#sect4">... section heading 4 ...</a></li> <li><a href="#conclusion">Conclusion</a></li> </ul></nav> <section id="sect1"><h4>... section heading 1 ...</h4> ... Enter the paragraphs for the section content separated by blank lines ... ... Such as this one ... ... Figures to open in a lightbox should be implemented as follows ... <figure> <a href="... url of the item to open ..." rel="shadowbox; width=800;height=600;"><img class="interactiveFigure" src="... url to an image to click on ..."></a> <figcaption> Listing 1. ... discription of the figure <a href="... url to the source code for the figure if appropriate ..." target="_blank">Source code.</a> </figcaption> </figure> </section> <section id="sect2"><h4>... section heading 2 ...</h4> ... To show code, pleas use the following <pre> tag ... <pre class="brush: as3;"> /* Some code snippet * embedded in the tutorial */ ... AS3 code goes here ... </pre> </section> <section id="sect3"><h4>... section heading 3 ...</h4> ... To arrange thumbnails horizontally use the following ... <div class="thumbnails"> <figure><a href="... main image 1 - with dimensions ..." rel="shadowbox; width=512;height=512;"><img src="... thumbnail image 1"/></a><figcaption>... caption for image 1 ...</figcaption></figure> <figure><a href="... main image 2 - with dimensions ..." rel="shadowbox; width=512;height=512;"><img src="... thumbnail image 2"/></a><figcaption>... caption for image 2 ...</figcaption></figure> </div> ... When referencing classes, use the <code>Classname</code> tag ... </section> <section id="sect4"><h4>... section heading 4 ...</h4> </section> <section id="conclusion"><h4>Conclusion</h4> ... Conclude the tutorial, reviewing what has been covered ... </section> </article>
