We have been rehearsing with applying styles in Commons. While not keeping
up-to-date with the implementation of the styles across sites, I presume
they are not yet in use in Commons.
But if anyone feels like it, please tell us what our chances are to create
the kind of infobox on a Commons File page, as described here:
https://commons.wikimedia.org/wiki/Template_talk:Map/Proposal#Georeferencin…
Thanks!
Cheers,
Susanna
I just love this Google I/O 2013 talk on human perception and
cognition, and its implications for interactive and visual design. It
is accessible, but with a lot of information and applies very well to
us I think.
I'm sure that many designers know all about this and some have
probably seen the clip before, but it is also very good for
developers, because many of these things we know subconsciously, but
it's not really part of our vocabulary.
https://www.youtube.com/watch?v=z2exxj4COhU
DJ
Since we had the luxury of having several people in the office,
Trevor, Juliusz, Rob Moen, Ed Sanders, Shahyar, May, Monte and I sat
down to talk about the problem we currently have of having no standard
way to create icons. Here is my write up of this meeting, again, if
you attended please add/correct me on anything and if you were not
please ask for clarification where needed.
Currently we have two modes of creating icons in MediaWiki
1) Using a font
2) Using SVGs with PNG fallbacks
and the markup varies depending on what extension you look at.
We discussed both approaches and advantages and disadvantages of each.
One of the major disadvantages of the WikiFont is the additional HTTP
request it creates to download the font and cannot be embedded in the
stylesheet using data uris like SVGs can (due to URL size
restrictions).
One of the major advantages of WikiFont is you can design a grayscale
icon, and style it using font colour. Shahyar was happy to move Flow
to using SVG based fonts if we could build grayscale SVGs and change
their colours using ResourceLoader. One concrete example is when you
have an icon used in a constructive anchor. The icon needs to be
green, but when hovered over a lighter green.
Another advantage brought up by May was that currently she finds it
much easier to build icons in this way, and that having to maintain
separate coloured versions of the SVGs is a pain point to her.
We decided that we should push towards using SVGs that can be built
into fonts for the purpose of the app.
As next steps
1) Monte to explore using SVGs in the Wikipedia apps. He will create
font from SVGs. He will work with May to ensure her workflow is as
easy as before.
2) Trevor is going to look into how we can automatically generate
different colour versions of SVGs and automatically create PNGs from
them.
3) I am going to aim to agree on a standard icon HTML markup for
mediawiki ui. We still have an issue with the fact that everyone is
using different HTML markup to create icons. After reviewing all our
current approaches [1] it was clear that we were relatively closely
aligned and that it simply is a case of agreeing on class names.
We aim to get all the above done by Sept 15th, 2014 so please poke us
on the mailing list if you haven't had a follow up then.
Full disorganised notes can be found here [2].
[1] https://www.mediawiki.org/wiki/Icon_standardisation
[2] http://etherpad.wikimedia.org/p/Icon_standardisation
In the profile page of mobile [1] we have a button at the bottom of the page.
Is there any reason for it having blue text?
When you take a look at the styleguide it seems like an
mw-ui-progressive or just a simple mw-ui-button [2]
We currently have a bug [3] associated with this button due to its
uniqueness, so I'm keen to work out how to make this button be
consistent with other buttons and opened a standardisation bug [4].
Can someone chip in on the bug report with how it should be styled in
the language of the styleguide and if needed, provide a new icon for
talk that isn't blue?
Thanks!
[1] https://en.m.wikipedia.org/wiki/Special:UserProfile/Jdlrobson
[2] http://tools.wmflabs.org/styleguide/desktop/section-2.html
[3] https://bugzilla.wikimedia.org/70947
[4] https://bugzilla.wikimedia.org/71071
Several of the engineers and advisors developing components for front
end standardization met Friday to check status, set direction, and
identify upcoming obstacles
Big take aways:
= MediaWiki theme for OOjs UI =
* Should be finalized this week by Trevor and Bartosz
* Server side to follow in the next couple of weeks
= Icon system =
* Bartosz has done the early work for a Grunt task that takes SVGs
and a JSON config to generate colored SVG and PNG renderings and the
corresponding LESS markup for them
Notes and additional items from the discussion can be found on mw.org [1]
Follow up items:
* Generate prospective roadmap [Trevor]
* Raise Template RFC w/ arch committee and make a decision [Brion]
* Find out if Derk-Jan (cc'd) can join us next time
* Discuss Server-side OOUI at next meeting
Please update as necessary if you attended and I've forgotten or
misrepresented anything.
thanks all
--tomasz
[1] - https://www.mediawiki.org/wiki/FrontEndStandardsGroup/Weekly-Sept_19_2014
Hi,
Disclaimer: Though I worked in an accessibility software company for three
years, I know almost nothing about color blindness, so this question may be
silly.
A participant in a recent workshop for new Wikipedia editors workshop in
Israel complained that he cannot tell red links from blue links because he
is color-blind.
Has this issue ever been noticed or addressed by anybody?
The only related thing I can think of is the option to show links to
nonexistent pages with a question mark, which was disabled on Wikimedia
sites a year or two ago. Is there anything else?
Thanks.
--
Amir Elisha Aharoni · אָמִיר אֱלִישָׁע אַהֲרוֹנִי
http://aharoni.wordpress.com
“We're living in pieces,
I want to live in peace.” – T. Moore
If you've ever looked at Wikipedia articles for music, I'm sure you've seen
the following icon:
https://commons.wikimedia.org/wiki/File:Gnome-mime-sound-openclipart.svg
See, for example, https://en.wikipedia.org/wiki/Goldberg_Variations
The icon is fairly sloppy and isn't even symmetrical. I tried to clean it
up a few months ago, but I've never really been happy with it. While this
icon is not technically part of the MediaWiki software, it's use on our
projects is ubiquitous. If any designers feel inspired to create a
replacement, please let me know!
Ryan Kaldari
Several front end engineers, designers, and others got together again
to update on their progress to standardize icons across projects
today. This was a follow to the previous conversation on 8/27 [1].
Big take aways:
* Monte iterating and almost completing his SVG->Font python scripts
* Trevor & Bartosz finalizing an npm module for customizing SVG generation
* Jon needing additional support from Sam to move forward on mw ui icon markup
Notes from the discussion can be found on etherpad [2]
Follow up items:
* Finish up SVG2FONT2SVG script (hopefully done in a week) (Monte)
** Create manifest for padding and other small options (Trevor)
* Review Trevor's SVG/PNG generation (Everyone present once its out)
* Followup with Sam for standard icon html mark-up (Matt)
* Schedule team discussion follow up (Tomasz)
Please update as necessary if you attended and I've forgotten or
misrepresented anything.
thanks all
--tomasz
[1] - https://lists.wikimedia.org/pipermail/mobile-l/2014-August/007922.html
[2] - http://etherpad.wikimedia.org/p/IconStandardization
I'm committed to killing the global variable $wgUseMediaWikiUIEverywhere
Prateek asked me today how he could help so in case it is not clear
this is how developers/designers can help.
Essentially as a first step we need to identify problems with form
interfaces across MediaWiki and fix them.
1) Enable MediaWiki UI everywhere
Developers: Add $wgUseMediaWikiUIEverywhere=true into your LocalSettings
Non-developers: Explore http://mwui.wmflabs.org/wiki/Main_Page or
http://en.m.wikipedia.beta.wmflabs.org/ (the mobile site already
enables these to be the default)
2) Navigate around the site and make a note of interfaces that look wrong.
Please file bugs against them here [1]
* Places where buttons are constructive when they should be
destructive / progress
* Take screenshots of interfaces that look cluttered/cramped.
* Identify pages which do not use MediaWiki UI styles at all
3) Let's fix the bugs
4) When this is all done, we will need to engage the
community/communicate this change. We might need to run a beta
feature. I'm hoping Jared or Steven can oversee this. Alternatively we
might just want to turn it on if we do not consider it a massive
change.
[1] https://bugzilla.wikimedia.org/enter_bug.cgi?product=MediaWiki&component=Me…
That's totally awesome :)
- Jonathan
On Mon, Sep 15, 2014 at 11:36 AM, Abbey Ripstra <aripstra(a)wikimedia.org>
wrote:
> Hello Everyone,
>
>
> It is with great happiness, and excitement that we announce Daisy Chen is
> joining the UX Research team as Associate Design Researcher!
>
> Since April, 2012, Daisy has been working at the Foundation on the Legal
> team as a paralegal. With a BA in Sociology providing relevant
> facilitation, observation and research design experience, Since April 2014,
> she began contributing time and effort to UX research projects and in
> support of design iteration with the UX team.
>
> Along with collaborating through her role in Legal to support setup, and
> vetting of UX Research tools, policies and processes, Daisy has recently
> contributed to some larger UX research projects. With this work, Daisy
> has already been making important contributions to the UX Research team.
>
> Daisy’s design research capabilities and enthusiasm are a very welcome and
> important addition to this growing team.
>
>
> Welcome Daisy!!
>
>
>
>
> Abbey Ripstra
>
> Lead Design Research Manager
>
> Wikimedia Foundation
>
>
> _______________________________________________
> Wmfall mailing list
> Wmfall(a)lists.wikimedia.org
> https://lists.wikimedia.org/mailman/listinfo/wmfall
>
>
--
Jonathan T. Morgan
Learning Strategist
Wikimedia Foundation
User:Jmorgan (WMF) <https://meta.wikimedia.org/wiki/User:Jmorgan_(WMF)>
jmorgan(a)wikimedia.org
