tour.html 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. {% extends "base.html" %}
  2. {% block content %}
  3. <div class="grid_16">
  4. <h1>Take the tour! Here's what MediaGoblin offers...</h1>
  5. <div class="tour-block">
  6. <div class="grid_8 alpha">
  7. <h2>Start sharing </h2>
  8. <p>
  9. You can easily get started sharing your media with the world using MediaGoblin. <a href="https://wiki.mediagoblin.org/EasyDeployment">Run your own site</a>, use one by a friend or family member, or <a href="http://wiki.mediagoblin.org/Live_instances">something public</a>.
  10. </p>
  11. </div>
  12. <div class="grid_8 omega">
  13. <h2>Explore, Conserve, Create</h2>
  14. <p>
  15. Browse galleries curated by other MediaGoblin users and create your own, by simply uploading your media files or compiling collections from the works of others.
  16. </p>
  17. </div>
  18. <div class="clear"></div>
  19. <div class="grid_8 alpha">
  20. <p class="tour-screenshot">
  21. <a href="/images/tour/profile2_cropped.png"
  22. ><img src="/images/tour/profile2_cropped_thumb.png"
  23. alt="Profile of a user with short description and latest media" /></a>
  24. </p>
  25. </div>
  26. <div class="grid_8 omega">
  27. <p class="tour-screenshot">
  28. <a href="/images/tour/jpope_gallery2_cropped.png"
  29. ><img src="/images/tour/jpope_gallery2_cropped_thumb.png"
  30. alt="An image gallery" /></a>
  31. </p>
  32. </div>
  33. <div class="grid_8 alpha">
  34. <h2>Show What Matters</h2>
  35. <p>
  36. MediaGoblin's design aims to put the spotlight on your creations, free from distractions. Because it's in your works where detail really matters.
  37. </p>
  38. </div>
  39. <div class="grid_8 omega">
  40. <h2>Goblins of a different kind</h2>
  41. <p>
  42. Media isn't just pictures. MediaGoblin also supports audio files, videos, books and presentations or even 3D-models and ASCII-art. On the backend, it can use powerful tools to transcode or convert your files.
  43. </p>
  44. </div>
  45. <div class="clear"></div>
  46. <div class="grid_8 alpha">
  47. <p class="tour-screenshot">
  48. <a href="/images/tour/image_media1_cropped.png"
  49. ><img src="/images/tour/image_media1_cropped_thumb.png"
  50. alt="A photo" /></a>
  51. </p>
  52. </div>
  53. <div class="grid_8 omega">
  54. <p class="tour-screenshot">
  55. <a href="/images/tour/audio_screenshot_cropped.png"
  56. ><img src="/images/tour/audio_screenshot_cropped_thumb.png"
  57. alt="Playing an audio file" /></a>
  58. </p>
  59. </div>
  60. <div class="clear"></div>
  61. <div class="grid_8 alpha">
  62. <h2>A community of Goblins</h2>
  63. <p>
  64. But MediaGoblin is also social. We have a built-in <a href="http://mediagoblin.org/news/mediagoblin-0.5.0-goblin-force.html">comment system</a> which supports Markdown formatting, comment previews and notifications. So you can get an idea what others are thinking about your creations.
  65. </p>
  66. </div>
  67. <div class="grid_8 omega">
  68. <h2>Learning new things is fun</h2>
  69. <p> MediaGoblin is more than just software, it's a community of
  70. people like you! Everyone loves learning from others, be they programmers, artists, translators,
  71. administrators, or writers.
  72. </p>
  73. </div>
  74. <div class="clear"></div>
  75. <div class="grid_8 alpha">
  76. <p class="tour-screenshot">
  77. <a href="/images/tour/caminandes_cropped.png"
  78. ><img src="/images/tour/caminandes_cropped_thumb.png"
  79. alt="Caminandes video" /></a>
  80. <br />
  81. <i>(Image from <a href="https://www.caminandes.com/">Caminandes</a>, an independent Open Movie Project, released under
  82. <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported</a>)
  83. </i>
  84. </p>
  85. </div>
  86. <div class="grid_8 omega">
  87. <p class="tour-screenshot">
  88. <a href="/images/tour/presentation1_cropped.png"
  89. ><img src="/images/tour/presentation1_cropped_thumb.png"
  90. alt="A presentation document in PDF" /></a>
  91. </p>
  92. </div>
  93. <div class="clear"></div>
  94. <div class="grid_8 alpha">
  95. <h2>Define your own boundaries</h2>
  96. <p>
  97. MediaGoblin is built with extensibility in mind. You can easily add a <a href="http://mediagoblin.readthedocs.org/en/latest/pluginwriter/media_type_hooks.html">new media type</a> or <a href="http://mediagoblin.readthedocs.org/en/latest/pluginwriter/authhooks.html">new authentication provider</a>. Even further, you could <a href="http://mediagoblin.readthedocs.org/en/latest/#part-3-plugin-writer-s-guide">write plugins</a> for all purposes, like <a href="http://mediagoblin.org/news/pump-api-progress.html">connecting to another platforms API</a>.
  98. </p>
  99. </div>
  100. <div class="grid_8 omega">
  101. <h2>Everything within your hands</h2>
  102. <p>
  103. As will all free software projects, you can just grab a copy of MediaGoblin and set it free in the wild of the web. A <a href="http://mediagoblin.org/news/mediagoblin-0.6.0-lore-of-the-admin.html">comfortable admin interface</a> ensures that you stay in control in case of misbehaviour. Once federation is fully implemented, users will be able to communicate in between different installations.
  104. </p>
  105. </div>
  106. <div class="clear"></div>
  107. <div class="grid_8 alpha">
  108. <p class="tour-screenshot">
  109. <a href="/images/tour/3dmodel_cropped.png"
  110. ><img src="/images/tour/3dmodel_cropped_thumb.png"
  111. alt="A 3D-printable Gavroche" /></a>
  112. </p>
  113. </div>
  114. <div class="grid_8 omega">
  115. <p class="tour-screenshot">
  116. <a href="/images/tour/mediagoblin_0.6.0_admin_user_panel-scaled.png"
  117. ><img src="/images/tour/mediagoblin_0.6.0_admin_user_panel-scaled_thumb.png"
  118. alt="Admin panel to control user privileges" /></a>
  119. </p>
  120. </div>
  121. <div class="clear"></div>
  122. <div class="grid_8 alpha">
  123. <h2>No compromises in taste</h2>
  124. <p>
  125. Just <a href="http://mediagoblin.readthedocs.org/en/latest/siteadmin/theming.html">change the looks of MediaGoblin</a> in any way you want by creating a new theme. The appearance of your creation's surroundings should gracefully support your personal expression and make it stand out.
  126. </p>
  127. </div>
  128. <div class="grid_8 omega">
  129. <h2>Excited? Jump In!</h2>
  130. <ul>
  131. <li>
  132. <b>Run it</b> --
  133. Learn more about running your own instance of MediaGoblin.
  134. Check out our step-by-step
  135. <a href="http://docs.mediagoblin.org/">guide to installing MediaGoblin</a>
  136. on your own server.
  137. </li>
  138. <li>
  139. <b>Use it</b> --
  140. Get started using MediaGoblin with an existing community.
  141. <a href="http://wiki.mediagoblin.org/Live_instances">Find
  142. sites already running MediaGoblin</a>.
  143. </li>
  144. <li>
  145. <b>Join us</b> --
  146. MediaGoblin is built by a vibrant and friendly community of people like you!
  147. Learn more about <a href="/pages/join.html">getting involved</a>
  148. or <a href="http://wiki.mediagoblin.org/HackingHowto">setting
  149. up a local instance for development</a>!
  150. </li>
  151. </ul>
  152. </div>
  153. <div class="clear"></div>
  154. <div class="grid_8 alpha">
  155. <p class="tour-screenshot">
  156. <a href="/images/tour/jpope_train_cropped.png"
  157. ><img src="/images/tour/jpope_train_cropped_thumb.png"
  158. alt="jpope's theme featuring a photo of a train turning around the corner'" /></a>
  159. </p>
  160. </div>
  161. <div class="clear"></div>
  162. </div>
  163. </div>
  164. {% endblock content %}