wdprop/wdprop.html at master · johnsamuelwrites/wdprop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About WDProp</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="wdprop.js"></script>
</head>

<body vocab="http://schema.org/" typeof="Website">
    <div id="mobile-menu-toggle" onclick="toggleMobileMenu()">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div id="header">
        <div id="logo"><a href="./index.html">WDProp</a>
            <span id="subtitle">Everything about Wikidata properties</span>
        </div>
        <div id="theme-toggle" onclick="toggleTheme()" title="Toggle theme"></div>
    </div>
    <div id="sidebar">
        <div id="sidebarlinks">
            <ul>
                <li><a href="./index.html">📊 Dashboard</a></li>
                <li><a href="./languages.html">🌍 Languages</a></li>
                <li><a href="./datatypes.html">📊 Data types</a></li>
                <li><a href="./properties.html">🔧 Properties</a></li>
                <li><a href="./classes.html">📦 Property Classes</a></li>
                <li><a href="./provenance.html">📜 Provenance</a></li>
                <li><a href="./search.html">🔍 Search</a></li>
                <li><a href="./compare.html">⚖️ Compare</a></li>
                <li><a href="templates/translated.html">💬 Property Discussion</a></li>
                <li><a href="./wikiprojects.html">🚀 Wikiprojects</a></li>
                <li><a href="./wdprop.html">ℹ️ About</a> </li>
            </ul>
        </div>
    </div>
    <div id="content">

        <!-- ─── Hero ─── -->
        <div class="about-hero">
            <div class="about-hero-inner">
                <div class="about-hero-logo">WDProp</div>
                <p class="about-hero-tagline">A visual interface for understanding and improving multilingual property development on Wikidata</p>
                <div class="about-hero-badges">
                    <span class="about-badge">🌐 Multilingual</span>
                    <span class="about-badge">📊 Live Data</span>
                    <span class="about-badge">🔍 Searchable</span>
                    <span class="about-badge">📱 Responsive</span>
                </div>
            </div>
        </div>

        <!-- ─── What is WDProp ─── -->
        <div class="section about-narrative">
            <div class="about-narrative-content">
                <p>
                    Every Wikidata property carries three critical pieces of information that need translation: <strong>labels</strong>, <strong>descriptions</strong>, and <strong>aliases</strong>.
                    A property may have none, some, or all of these in any given language — making it challenging to track progress across hundreds of languages.
                </p>
                <p>
                    WDProp queries the <a href="https://query.wikidata.org/">Wikidata Query Service</a> in real time to surface live statistics, identify gaps, and guide contributors toward the properties and languages that need attention most.
                </p>
            </div>
            <div class="about-narrative-image">
                <img src="./images/wdprop.svg" alt="Wikidata Properties" />
            </div>
        </div>

        <!-- ─── Features ─── -->
        <div class="about-features-header">
            <h2 class="about-section-title">Features</h2>
        </div>
        <div class="about-features">
            <div class="about-feature-card">
                <span class="about-feature-icon">🌍</span>
                <h4 class="about-feature-title">Language Coverage</h4>
                <p class="about-feature-desc">Browse all supported languages and their translation statistics at a glance.</p>
            </div>
            <div class="about-feature-card">
                <span class="about-feature-icon">📊</span>
                <h4 class="about-feature-title">Translation Stats</h4>
                <p class="about-feature-desc">Live counts of translated labels, descriptions, and aliases per language.</p>
            </div>
            <div class="about-feature-card">
                <span class="about-feature-icon">🔍</span>
                <h4 class="about-feature-title">Multilingual Search</h4>
                <p class="about-feature-desc">Find properties by keyword in any supported language instantly.</p>
            </div>
            <div class="about-feature-card">
                <span class="about-feature-icon">⚖️</span>
                <h4 class="about-feature-title">Language Compare</h4>
                <p class="about-feature-desc">Compare translation progress across languages with animated bar charts.</p>
            </div>
            <div class="about-feature-card">
                <span class="about-feature-icon">📦</span>
                <h4 class="about-feature-title">Property Classes</h4>
                <p class="about-feature-desc">Navigate properties organised by their class groupings and datatypes.</p>
            </div>
            <div class="about-feature-card">
                <span class="about-feature-icon">📜</span>
                <h4 class="about-feature-title">Provenance</h4>
                <p class="about-feature-desc">Trace how translation information flows through property paths.</p>
            </div>
            <div class="about-feature-card">
                <span class="about-feature-icon">🚀</span>
                <h4 class="about-feature-title">WikiProjects</h4>
                <p class="about-feature-desc">Discover and explore active WikiProjects related to Wikidata properties.</p>
            </div>
            <div class="about-feature-card">
                <span class="about-feature-icon">🔗</span>
                <h4 class="about-feature-title">Bookmarkable URLs</h4>
                <p class="about-feature-desc">Every view supports URL parameters — share or bookmark any search or comparison.</p>
            </div>
        </div>

        <!-- ─── Technology ─── -->
        <div class="section about-tech">
            <h3 class="about-section-title">Technology</h3>
            <p class="about-tech-desc">Built with vanilla web technologies — no frameworks or bundlers required. Download the HTML files and run locally on any modern browser.</p>
            <div class="about-tech-pills">
                <span class="about-tech-pill">HTML5</span>
                <span class="about-tech-pill">CSS3</span>
                <span class="about-tech-pill">JavaScript</span>
                <span class="about-tech-pill">JSON</span>
                <span class="about-tech-pill">SPARQL</span>
                <span class="about-tech-pill">Wikidata API</span>
                <span class="about-tech-pill">MediaWiki API</span>
            </div>
        </div>

        <!-- ─── Conferences ─── -->
        <div class="section">
            <h3 class="about-section-title">Research &amp; Publications</h3>
            <div class="about-timeline">

                <div class="about-timeline-item">
                    <div class="about-timeline-year">2021</div>
                    <div class="about-timeline-content">
                        <h4 class="about-timeline-title">WDProp: Web Application to Analyse Multilingual Aspects of Wikidata Properties</h4>
                        <p class="about-timeline-meta">OpenSym 2021 · Madrid · 15–17 September</p>
                        <a href="https://figshare.com/articles/presentation/WDProp_Web_Application_to_Analyse_Multilingual_Aspects_of_Wikidata_Properties/16641502" class="about-timeline-link">📄 Presentation slides</a>
                    </div>
                </div>

                <div class="about-timeline-item">
                    <div class="about-timeline-year">2018</div>
                    <div class="about-timeline-content">
                        <h4 class="about-timeline-title">Analyzing and Visualizing Translation Patterns of Wikidata Properties</h4>
                        <p class="about-timeline-meta"><a href="http://clef2018.clef-initiative.eu/index.php?page=Pages/accepted_papers.html">CLEF 2018</a> · Avignon, France · Lecture Notes in Computer Science, vol 11018, Springer</p>
                        <a href="https://link.springer.com/chapter/10.1007%2F978-3-319-98932-7_12" class="about-timeline-link">📖 Read paper</a>
                    </div>
                </div>

                <div class="about-timeline-item">
                    <div class="about-timeline-year">2018</div>
                    <div class="about-timeline-content">
                        <h4 class="about-timeline-title">Towards Understanding and Improving Multilingual Collaborative Ontology Development in Wikidata</h4>
                        <p class="about-timeline-meta">Wiki Workshop 2018 (The Web Conference) · Lyon, France · 24 April</p>
                        <div class="about-timeline-links">
                            <a href="http://wikiworkshop.org/2018/#papers" class="about-timeline-link">📄 Paper</a>
                            <a href="https://doi.org/10.5281/zenodo.1219239" class="about-timeline-link">🌐 Open access</a>
                            <a href="https://figshare.com/articles/Towards_Understanding_and_Improving_Multilingual_Collaborative_Ontology_Development_in_Wikidata/6171080" class="about-timeline-link">📊 Slides</a>
                        </div>
                    </div>
                </div>

                <div class="about-timeline-item">
                    <div class="about-timeline-year">2017</div>
                    <div class="about-timeline-content">
                        <h4 class="about-timeline-title">Collaborative Approach to Developing a Multilingual Ontology: A Case Study of Wikidata</h4>
                        <p class="about-timeline-meta">MTSR 2017 · Communications in Computer and Information Science, vol 755, Springer</p>
                        <a href="https://link.springer.com/chapter/10.1007%2F978-3-319-70863-8_16" class="about-timeline-link">📖 Read paper</a>
                    </div>
                </div>

            </div>
        </div>

        <!-- ─── Demonstrations ─── -->
        <div class="section">
            <h3 class="about-section-title">Demonstrations</h3>
            <div class="about-demo-card">
                <span class="about-demo-icon">🎤</span>
                <div class="about-demo-body">
                    <p class="about-demo-title">How can I contribute to Wikidata properties? Introducing the WDProp tool.</p>
                    <p class="about-demo-meta"><a href="https://www.mediawiki.org/wiki/Wikimedia_Hackathon_2018/Program#Sunday_20_May_2018">Wikimedia Hackathon 2018</a> · Barcelona · 20 May 2018</p>
                </div>
            </div>
        </div>

        <!-- ─── Source &amp; Team ─── -->
        <div class="about-bottom-row">
            <div class="section about-source">
                <h3 class="about-section-title">Source Code</h3>
                <a href="https://github.com/johnsamuelwrites/wdprop" class="about-github-btn">
                    <span class="about-github-icon">🐙</span>
                    <span>GitHub Repository</span>
                </a>
            </div>
            <div class="section about-team">
                <h3 class="about-section-title">Team</h3>
                <div class="about-team-member">
                    <span class="about-team-avatar">👨‍💻</span>
                    <span class="about-team-name">John Samuel</span>
                </div>
            </div>
            <div class="section about-ack">
                <h3 class="about-section-title">Acknowledgements</h3>
                <ul class="about-ack-list">
                    <li>🌍 Wikidata community</li>
                    <li>🛠️ Wikimedia Hackathon 2018</li>
                </ul>
            </div>
        </div>

    </div>
    <div id="footer">
        <p id="footertext">Powered by <a href="https://www.wikidata.org/">Wikidata</a> and <a href="https://mediawiki.org/">MediaWiki</a> API</p>
    </div>
</body>

</html>