Commit 9297f60d95d0c338e5868c2e73d8fde0d939403a
Update home page to have better description and UI
| | | | | 49 | margin-bottom: 25px; | 49 | margin-bottom: 25px; |
|---|
| 50 | } | 50 | } |
|---|
| 51 | | 51 | |
|---|
| | 52 | .home-links { |
|---|
| | 53 | text-align: center; |
|---|
| | 54 | } |
|---|
| | 55 | |
|---|
| 52 | #sweet-list { | 56 | #sweet-list { |
|---|
| 53 | margin-bottom: 10px; | 57 | margin-bottom: 10px; |
|---|
| 54 | } | 58 | } |
|---|
| | | | | 78 | <!-- <p> --> | 78 | <!-- <p> --> |
|---|
| 79 | <!-- <a class="btn btn-info btn-lg" href="#/search">Start Searching and Tagging</a> --> | 79 | <!-- <a class="btn btn-info btn-lg" href="#/search">Start Searching and Tagging</a> --> |
|---|
| 80 | <!-- </p> --> | 80 | <!-- </p> --> |
|---|
| 81 | <div class="col-md-12 center-block"> | | <div class="col-md-12 center-block"> |
|---|
| 82 | <h4 class="col-md-3"> | | <h4 class="col-md-3"> |
|---|
| 83 | <a href="#/search"> | | <a href="#/search"> |
|---|
| | 81 | <div class="row home-links"> | | | 82 | <div class="col-md-4"> |
|---|
| | 83 | <a href="#/search" class="btn btn-info btn-lg"> |
|---|
| 84 | <span class="glyphicon glyphicon-search"></span> | 84 | <span class="glyphicon glyphicon-search"></span> |
|---|
| 85 | Search | 85 | Search |
|---|
| 86 | </a> | 86 | </a> |
|---|
| 87 | </h4> | | </h4> |
|---|
| 88 | <h4 class="col-md-3"> | | <h4 class="col-md-3"> |
|---|
| 89 | <a href="#/play"> | | <a href="#/play"> |
|---|
| | 87 | </div> | | | 88 | <div class="col-md-4"> |
|---|
| | 89 | <a href="#/play" class="btn btn-info btn-lg"> |
|---|
| 90 | <span class="glyphicon glyphicon-user"></span> | 90 | <span class="glyphicon glyphicon-user"></span> |
|---|
| 91 | Personal PlayArea</a> | | Personal PlayArea</a> |
|---|
| 92 | </h4> | | </h4> |
|---|
| 93 | <h4 class="col-md-3"> | | <h4 class="col-md-3"> |
|---|
| 94 | <a href="#/linked-data"> | | <a href="#/linked-data"> |
|---|
| | 91 | Personal PlayArea | | | 92 | </a> |
|---|
| | 93 | </div> |
|---|
| | 94 | <div class="col-md-4"> |
|---|
| | 95 | <a href="#/linked-data" class="btn btn-info btn-lg"> |
|---|
| 95 | <span class="glyphicon glyphicon-globe"></span> | 96 | <span class="glyphicon glyphicon-globe"></span> |
|---|
| 96 | Linked Data</a> | | Linked Data</a> |
|---|
| 97 | </h4> | | </h4> |
|---|
| | 97 | Linked Data | | | 98 | </a> |
|---|
| | 99 | </div> |
|---|
| 98 | </div> | 100 | </div> |
|---|
| 99 | </div> | 101 | </div> |
|---|
| 100 | <div> | | <div> |
|---|
| | 102 | <hr/> | | | 103 | <p> |
|---|
| 101 | <h3> | 104 | <h3> |
|---|
| 102 | <p> | | <p> |
|---|
| 103 | <span class="glyphicon glyphicon-search"></span> | 105 | <span class="glyphicon glyphicon-search"></span> |
|---|
| 104 | Search</p> | | Search</p> |
|---|
| | 106 | Search | | 105 | </h3> | 107 | </h3> |
|---|
| 106 | <h4> | 108 | <h4> |
|---|
| 107 | Search uses search.opencultuurdata.nl to look for images from | | Search uses search.opencultuurdata.nl to look for images from |
|---|
| 108 | the OCD collection. One can then start annotating an image of | | the OCD collection. One can then start annotating an image of |
|---|
| 109 | interest. Such an image is marked and is available in the play | | interest. Such an image is marked and is available in the play |
|---|
| | 109 | Search uses <a href="opencultuurdata.nl">opencultuurdata.nl</a> | | | 110 | APIs to look for images from the datases provided by OCD collection. |
|---|
| | 111 | One can then start annotating an image of interest. |
|---|
| | 112 | Such an image is marked and is available in the play |
|---|
| 110 | area [<span class="glyphicon glyphicon-user"></span>] of the user. | 113 | area [<span class="glyphicon glyphicon-user"></span>] of the user. |
|---|
| 111 | </h4> | 114 | </h4> |
|---|
| 112 | </div> | | </div> |
|---|
| 113 | <div> | | <div> |
|---|
| | 115 | </p> | | | 116 | <p> |
|---|
| 114 | <h3> | 117 | <h3> |
|---|
| 115 | <p> | | <p> |
|---|
| 116 | <span class="glyphicon glyphicon-user"></span> | | <span class="glyphicon glyphicon-user"></span> |
|---|
| 117 | Personal PlayArea | | Personal PlayArea |
|---|
| 118 | </p> | | </p> |
|---|
| | 118 | <span class="glyphicon glyphicon-user"></span> | | | 119 | Personal PlayArea |
|---|
| 119 | </h3> | 120 | </h3> |
|---|
| 120 | <h4>A user can view all annotated images. The tags used in | | <h4>A user can view all annotated images. The tags used in |
|---|
| | 121 | <h4> | | | 122 | A user can view all annotated images. The tags used in |
|---|
| 121 | annotations are also shown as a list and can be used for filtering the | 123 | annotations are also shown as a list and can be used for filtering the |
|---|
| 122 | set of images. User can also choose to annotate an image outside the | 124 | set of images. User can also choose to annotate an image outside the |
|---|
| 123 | OCD collection by using the image URL. | 125 | OCD collection by using the image URL. |
|---|
| 124 | </h4> | 126 | </h4> |
|---|
| 125 | </div> | | </div> |
|---|
| 126 | <div> | | <div> |
|---|
| | 127 | </p> | | | 128 | <p> |
|---|
| 127 | <h3> | 129 | <h3> |
|---|
| 128 | <p> | | <p> |
|---|
| 129 | <span class="glyphicon glyphicon-globe"></span> | | <span class="glyphicon glyphicon-globe"></span> |
|---|
| 130 | Linked Data | | Linked Data |
|---|
| 131 | </p> | | </p> |
|---|
| | 130 | <span class="glyphicon glyphicon-globe"></span> | | | 131 | Linked Data |
|---|
| 132 | </h3> | 132 | </h3> |
|---|
| 133 | <h4> | 133 | <h4> |
|---|
| | 134 | All images that are tagged by all users are available for browsing, |
|---|
| | 135 | filtering based on selecting or deselecting users (and their |
|---|
| | 136 | annotations); and also by selecting and deselecting tags of interest. |
|---|
| | 137 | </h4> |
|---|
| | 138 | </p> |
|---|
| 134 | | 139 | |
|---|
| 135 | All images that are tagged by all users are available for browsing, | | All images that are tagged by all users are available for browsing, |
|---|
| 136 | filtering based on selecting or deselecting users (and their | | filtering based on selecting or deselecting users (and their |
|---|
| 137 | annotations); and also by selecting and deselecting tags of interest. | | annotations); and also by selecting and deselecting tags of interest. |
|---|
| 138 | </div> | | </div> |
|---|
| 139 | <footer> | | <footer> |
|---|
| 140 | <p>This app is part of the <a href="http://www.opencultuurdata.nl/challenge-english/"> | | <p>This app is part of the <a href="http://www.opencultuurdata.nl/challenge-english/"> |
|---|
| | 140 | <hr/> | | | 141 | |
|---|
| | 142 | <footer style="text-align: center; font-size: 0.9em;"> |
|---|
| | 143 | <!--p>This app is part of the <a href="http://www.opencultuurdata.nl/challenge-english/"> |
|---|
| 141 | Open Cuultur Data challenge</a> | 144 | Open Cuultur Data challenge</a> |
|---|
| | 145 | </p--> |
|---|
| | 146 | <p> |
|---|
| | 147 | We use <a href="https://login.persona.org/about">Mozilla Persona</a> for identifying |
|---|
| | 148 | users, <a href="http://annotorious.github.io/">Annotorious</a> for image annotation and |
|---|
| | 149 | <a href="http://janastu.org/technoscience/index.php/Sweet_Web">SWeeT Web</a> |
|---|
| | 150 | for assimilating the linked open data announced by users. [opensource cc] |
|---|
| 142 | </p> | 151 | </p> |
|---|
| 143 | <p>We use persona.org for identifying a user; Annotorious for image | | <p>We use persona.org for identifying a user; Annotorious for image |
|---|
| 144 | annotation and SWeeT Web for assimilating the linked open data | | annotation and SWeeT Web for assimilating the linked open data |
|---|
| 145 | announced by users. [opensource cc] | | announced by users. [opensource cc] |
|---|
| 146 | </p> | | </p> |
|---|
| 147 | <p> | 152 | <p> |
|---|
| 148 | Clink: [Middle English clinken, probably from Middle Dutch klinken, of | | Clink: [Middle English clinken, probably from Middle Dutch klinken, of |
|---|
| | 153 | [<b>Clink</b>: Middle English clinken, probably from Middle Dutch klinken, of | | 149 | imitative origin.] | 154 | imitative origin.] |
|---|
| 150 | </p> | 155 | </p> |
|---|
| 151 | </footer> | 156 | </footer> |
|---|
