User:Protnet/Frontend for Vector skin CSS customizations

I am currently in the process of putting together my proposal. I hope I will manage to finish it in time.

Are you interested in mentoring this? Please leave a message on the talk page.

I have 2 different proposals for GSoC 2014, both in MediaWiki.

Frontend for Vector skin CSS customizations

 * Public URL: https://www.mediawiki.org/wiki/User:Protnet/Frontend_for_Vector_skin_CSS_customizations
 * Bugzilla report:
 * Announcement: (link to the announcement of your proposal at the wikitech-l mailing list.

Name and contact information

 * Name: Ioannis Protonotarios
 * Email: ioannis@protonotarios.eu
 * IRC or IM networks/handle(s): protnet on irc.freenode.net
 * Web Page / Blog / Microblog / Portfolio: My business website (Greek): http://office.protonotarios.eu My personal blog-like wiki (Greek/English): http://meta.protonotarios.eu
 * Resume (optional):
 * Location: Athens, Greece
 * Typical working hours: 8:00-15:00 (till mid-June), 9:00-13:00 & 18:00-24:00 (July, August) (EET)

Abstract
Appearance is most important for any site. Unfortunately, while MediaWiki is very advanced in functionality it lacks flexibility in terms of appearance. Vector skin is great, no doubt about it, but it seems there is no other alternative. Almost all wikis in the world look like Wikipedia. Of course one can apply their own CSS and customize the site's layout or even create their own skin in PHP but both solutions demand a lot of knowledge and effort and in the end nobody really does so except maybe for some big commercial sites.

My proposal is the creation of a frontend that will help users with little or no experience at all to easily produce all the CSS needed to change their wiki's layout.

Proposal
Vector skin is now a mature skin and along with its many enhancements is by far the default, if not the only choice for modern wikis.

Therefore, the creation of a new skin, besides the fact that is a difficult process for anyone, will only take them back to the start and also miss all the fancy and functional enhancements Vector has. Instead, one with lots of CSS knowledge, can manipulate the styling of Vector skin and make a wiki "template" out of it that may resemble nothing to the original skin but be closer to a Wordpress or a Joomla template. With CSS it's easy to hide unnecessary components such as menus, tabs, logos etc, or move them to othes positions or even tranform them to some other component type (for example tabs can be transformed to a drop down menu).

The idea of using CSS is the wiki way because:
 * CSS is stored on a wiki page,
 * and thus can be accessible by any (i.e. manipulations can be transparent and easily reused to other wikis).
 * Registered users can create or use their own template by using their personal CSS page.
 * Different user groups can have different templates via the user groups CSS pages.

An example of the latter can be found in my personal blog-like wiki. For this particular site I wanted to make a template where visitors would see no tabs, or menus, and on the other hand, wiki admins would see the full wiki page components and be able to edit and navigate to special pages. This was done by adding some hide commands to page MediaWiki:Common.css and undoing them in MediaWiki:Group-sysop.css.

Part of the problem is that Vector skin lacks a proper map of the positions of all its components, like the ones can easily be found in Joomla templates. See for example, the latest Joomla 3 Protostar template map. In our case the Vector skin map should be more detailed with a complete list of all the CSS classes and subclasses and their default values employed by the original skin.

Having the map is a good start to begin customizing the layout but one should be an expert in CSS to make something worthy.

The idea is to create a frontend that would do the job instead.

The frontend itself could be:
 * a standalone program,
 * a standalone web page, or
 * a MediaWiki extension

The frontend inteface could be either:
 * Text, or
 * Graphical

How it works
The user, using either text or graphical interface, after making the desired changes has the option to preview the new layout on their wiki.

If the user has finished editing the layout can then save the changes. What the program does then is that it creates the desired CSS code and appends it to the appropriate CSS pages of the wiki, depending on the user selection and rights. For instance, if the user is an admin, they have the option to apply the new layout to the whole wiki, or to a specific user group or just for this user.

So the whole idea is that the program creates the code for you.

More than just layout
Having and interface that creates CSS code, it's easy then to add more features. So, via the frontend the user also has the ability to:
 * Change the wiki's font using Google fonts
 * Change colors of
 * text
 * backrounds (site, content etc)
 * lines
 * Enchance titles and boxes with CSS3 effects (shadow, curvy rectangles etc)
 * Apply images to backrounds

A step further would be to be able to create new classes for various other elements such as tables, divs etc.

Saving settings
In order for the user to be able to re-edit their custom layout, settings must be saved.

In its simplest form, the interface stores all settings as XML in a special wiki page (in a similar way as the extension Page Schemas does). More specificaly, the user is asked to provide a name for the settings and then the frontend creates a special settings page with that name. When user wants to edit a layout is given a list of all pages with saved settings to chose from which to edit.

Sample XML used for saving settings

Retrieving current layout
A more difficult approach would be for the frontend to get current settings directly from the CSS pages. This involves the danger that those pages may have been altered manually with custom CSS code not recognizable by the frontend. So the challenge here is first to parse the CSS and get all recognizeable settings from, and second, leave not recognizable settings intact.


 * Possible mentors: Not found any yet. If interested please let me know.

Deliverables
Please describe the details and the timeline of the work you plan to accomplish on the project you are most interested in (discuss these first with the mentor of the project):

About you

 * Education completed: Electrical & computer engineer MSc.


 * Education in progress: Currently a student in post-secondary level (though irrelevant to IT - I study education) while waiting to start my second master's in IT coming October.


 * How did you hear about this program?: I knew about this program from various extensions I have used in the past but I heared about this year's applications from a friend in Greek Wikipedia.


 * Will you have any other time commitments, such as school work, another job, planned vacation, etc., during the duration of the program?: I have school till mid June but only during the evenings. I also work but as a free-lance engineer so I am able not to undertake any jobs during the summer which is a dead period anyway for my line of work.


 * We advise all candidates eligible to Google Summer of Code and FOSS Outreach Program for Women to apply for both programs. Are you planning to apply to both programs and, if so, with what organization(s)?: No

Past experience

 * Please describe your experience with any other FOSS projects as a user and as a contributor: I am a proud FOSS user and supporter for many years. As a contibutor I have done many little things in many projects. The last 3 years I have focused mainly on MediaWiki when I setup my first wiki. I now maintain 7 live semantic wikis on various subjects. This forced me to get my hands dirty and start dealing with bugs, coding, patches etc. I have not yet created a complete extension (well maybe a hello-world-ish one) but I have succesfully moded a couple of those. In terms of Semantic MediaWiki I have created complex ontologies (and more complex templates to support them). Last but not least I am an active Mediawiki translator and I have translated most of semantic extensions to Greek myself. I have also created a MediaWiki glossary and many translation guidelines. As a wikipedian I have started a Greek Wikipedia Education Program focused on adult education.


 * Please describe any relevant projects that you have worked on previously and what knowledge you gained from working on them (include links):


 * What project(s) are you interested in (these can be in the same or different organizations)?


 * My main interest is MediaWiki, Semantic MediaWiki along with some major extensions such as Semantic Forms, Semantic Maps etc, as well as the Translate extension and on the other hand CSS capabilities in site design. That's why I couldn't resist and tried to apply to both areas.


 * Another topic that I am very interested in is duplicate image finding. My thesis was on image processing and I have done some personal research on this but for the moment I'll stick with wikis.