User:Flavien Bossiaux

From WikiEducator
Jump to: navigation, search

Hello !

My name is Flavien Bossiaux, and I plan to apply for the Theming project idea for GSoC 2014 !

First of all, I would like to apologize for my english skills, I'm not a native, but I hope it would be still ok !

[GSOC] Project Proposal : Theming


  • Full name : Flavien Bossiaux
  • IRC : BFlavien
  • E-mail / gTalk : bossiaux.flavien (at)
  • Website : (full resume)

Project Idea : Theming

Problem Description

WikiEducator is an international online community project for the collaborative development of learning materials, which educators are free to reuse, adapt and share without restriction. WikiEducator was launched in 2006 and is supported by the non-profit Open Education Resource (OER) Foundation. A variety of learning resources are available on WikiEducator: direct instructional resources such as lesson plans and full courses, as well as learning-support resources, such as individual school portals and funding proposals.

WikiEducator's stated goal is to build a thriving and sustainable global community dedicated to the design, development and delivery of free content for learning in realisation of a free version of the education curriculum by 2015. The project purports to focus on building capacity in the use of MediaWiki and related free software technologies, developing free content for use in educational institutions and elsewhere, facilitating the establishment of community networks and collaboration, and fostering new technologies.

As WikiEducator is used by more of the OERu partners for course delivery, there is a desire to customize the look and feel on either an institutional basis, or perhaps even a course-by-course basis. A prototype extension has shown that a partner institution can provide custom CSS (and optionally Javascript) to dramatically alter the way a student sees a course. A very useful project for someone familiar with front-end web technologies would be to add features that improves the authoring experience for educators. A developer familiar with Mediawiki extensions could extend the project to provide more flexibility in theming selection, while maintaining security against cross-site vulnerabilities.
There is reuse of WikiEducator material in other content management systems. One of the easiest ways is to embed an IFrame drawing content from WikiEducator. The current system Javascript detects when a page is being displayed in an IFrame and strips off navigation and other wiki-specific elements. A welcome development would be an IFrame-friendly bare skin.

This project would be to reskin MediaWiki course contents in order to be able to embed them into different environments (such as wordpress, moodle, blogs, ...) in a smart way by proposing a custom navigation made by the user.

Implementation plan

The project is already based on existing prototypes, and then can be divided into three parts : the theming part, the embedding part, and the navigation one.

This part could be changed, since WikiEducator work very iteratively, lot of things won't be definitive, but just base for experiments for later feedback and modifications.

Theming part

Goal : Theme a page (or collection of pages) in a page-specific CSS/Javascript/skin-like way, that would let each university to style their courses with their own graphic style.

One possible starting point could be for the beginning.

Another option could be to connect this extension to MW skin system with a tag on the page that overrides / supplements the original skin. These custom skins could be stored into protected namespace where OERu universities would be able to edit their skin (CSS, JS) in the wiki.

Embedding course content

Goal : Have a Javascript or "bare-skin" way of exporting content for embedding in other venues.

It can helps for accessibility for people with low-bandwidth connection such as mobile phone, or countries that are not lucky enough to have our infrastructure.

It seems decent, and a cleaner solution to not have to download data only in order to hide it.

Another reason could be that JavaScript is not under control (can be disabled, user performance issue, ...).

Custom navigation

Goal : Providing a way to display an ordered collection of pages (based on an outline) that has menus, navigation, etc.

This part would use the first part in order to customize the style of the pages and second part to make it embeddable. Based on a user-defined order would let the professor to determine the order of the course content as they wish to fit their needs.

I would prefer maintaining the first two parts according to user feedback instead of this feature. The first two parts seems to be more important, so if there is no more time for this part, this could easily be done after the GSoC as a first contribution as contributor.

Technical details

The languages used would be HTML / CSS / PHP / JS for most of the things running on a MediaWiki environment (MW extensions).

I would like to separate each part and make one extension for each, and make a bigger one that used the three other one as the final submission, like a all-in-one tool.

The extensions would be tag extensions thanks to their flexibility.

During the whole project, the implementation needs to be flexible as well, because we will have to deal with two mantras :

  • Keeping the ability to customize look / behaviour of pages for OERu universities.
  • Maintaining the ability of the pages to be reused and embedded.

This two goals might lead us to try many experimentations than end product coding, agile methodology will be applied, and I will take benefit of having many mentors to get a lot and quick feedback (rules of agile methods).

The whole system should be scalable as well (many OERu universities).

Namespaces are more scalable than subdirectories but have its own disadvantages as well. The other side would be server-side by not flooding the server with requests so relying on the MW skin system might make sense. Another solution could be to work with JS, but it's not my favourite option.


MediaWiki extension with clear end-user documentation and examples, or, according to the implementation, one extension per feature, and top extension managing the little ones in order to provide a single-extension solution, but dividing the project makes it more maintainable, reusable, understandable and customizable for other developers.


/* Need some help on estimation */

It's actually pretty hard to define a timeline while using agile methods since there is no actual defined plan. I plan to follow the rythm of feedback, and when I'll have enough, start another iteration on the extension.

About me

Bonjour ! My name is Flavien BOSSIAUX, and I'm an engineering student in computer science. As you have probably already notice, I'm from France, so I'm sorry for my English skills.

Academic background

4th year engineering school ( 2013 / 2014 )

Exchange year in University of Windsor (Windso, Ontario, CANADA)

Expected graduation in 2015 as Computer Science Engineer specialized in Human - Computer Interface (focused on web interface). My french degree would be equivalent to a Master of Science / Master of Engineering.

Computer Science major

  • Object-Oriented Analysis / Design using JAVA and C++
  • Software engineering
  • Web system development
  • Webdesign
  • Android development
  • Networking
  • Databases management

Award of Excellence for the first term (second one is not finished yet, but I'd like to get one again !).

3rd year engineering school ( 2012 / 2013 )

Polytech Nice - Sophia Antipolis, Nice - Sophia Antipolis University (Nice, FRANCE)

Computer Science major

  • Mathematics (discrete, algorithms, data structure, ...)
  • Object-Oriented Design using JAVA
  • Software engineering (tools such as GIT, JIRA, Stash and developing using Kanban method (agile))
  • Assembly
  • OS (Bash, C POSIX)
  • Video game development for blind child project

With honors

2-Year University Degree ( 2010 / 2012 )

Polytech Clermont-Ferrand, Blaise Pascal University (Clermont-Ferrand, FRANCE)

Computer Science major

  • 2-year preparatory course for the entrance into an engineering program
  • General engineering knowledge, team work

With honors

2-Year University Degree ( 2010 / 2012 )

Blaise Pascal University (Clermont-Ferrand, FRANCE)

Computer Science major

  • Programming language (JAVA, C)
  • Web development (HTML, CSS, PHP, MySQL, JS)
Baccalaureat (equivalent to a High School diploma) ( 2010 )

Lycée Madame de Staël (Montluçon, FRANCE)

  • Science, specializing in maths

With honors

Relevant work experience

RedBull France ( 2013 and 2014 )

Web Developer / Designer

Creation of an online leaderboard for RedBull rallye simulators in order to promote MonteCarlo WRC.

  • HTML, SASS/Compass (CSS), PHP, MySQL, jQuery (AJAX)
Google Summer of Code 2013 ( 2013 )

Google / GMOD

  • Creation of 4 MediaWiki plugins for the need of GMOD.
  • Creation of a responsive MediaWiki skin for the visual identity of GMOD.
  • Creation of a website in order to share my Google Summer of Code experience :

  • HTML frameworks (Foundation, Bootstrap), LESS / SASS/Compass (CSS), PHP, MySQL, jQuery (AJAX), MediaWiki environment

All the informations relative to this project (such as code repositories, methodologies, weekly reports, proposals, ... ) are available on

Weekly reports are not detailed because my mentor didn't need it because we were using a Kanban Board (Todo / In progress / Done) in order to chat about tasks, priorities, getting feedback, etc...

In my opinion, a task board is better than a simple report. It needs less time, and it's usually more precise (more feedback for each task, let you track time, way more clear, ...).

The board is available here :

Co-organizer of the Mediterranean Free Software Days 2012 (JM2L) (2012)

Linux-Azur ( )

Organizer of the days dedicated to high schools students, and helper for the others.

Website of our team (GANTT, activity reports, ...) (In french, sorry...) :

Webdesign / Web development

Miscellaneous little jobs

  • Restaurant website (Responsive)
  • Company website
  • Education website (translation of a GRE Physics test for student of my school)

My interests and strengths

I should have put this part on top, but for me it makes sense at the end, because according to my experience and my education, it's really easy to get why I'm interested in applying.

I love web development / web design, and I'm doing a daily technology watch about it. My education is going to be more and more specialized into web design (human - computer interaction focused on web interface), and my work experience is relevant with it (GSOC 2013 project which is improving UX of a MediaWiki website, several projects using web technology, ...).

I'm also involved in open source project (organizer of the Mediterranean days of free software, GSoC 2013, ...) as much as I have free time.

This particular project, which is an open source one will let me work using technologies and languages I like (web technology) or I already work with (MediaWiki environment) in order to provide a goal that match my field of study (I'm pretty sure this project will enhance the UX of the OERu Universities, and the UI experience of students reading the course).

I was told that this project was an high priority one, so if I could be useful, I would be really motivating for me! As a student, I'm a bit bored of school projects that have no impacts, and nobody use once it's graded, and this kind of project is perfect to learn new technology, new community, to exchange and learn from each other, and help people with things I learned for things that matter, and will be used for real.


I'll be able to adapt the WikiEducator methodology, but if I'm free I would like to reproduce the method I used last summer for my GSoC project because it was successful, and my mentor seemed to be happy with it as well. I used a Trello Board to list the task To Do, In Progress, and Done. That let me and the mentors see if we need to rethink about things, what it's remaining to be done, what is accomplished, ... Mentors track my work easily, they can see if I'm stuck on a part if the same task is always in "In Progress" really easily, or on the contrary, if a feature was faster to be done than we thought.

That let me send quick messages to mentors, and ask for feedback really on really precise things (better than weekly detailed reports). That also help me for reports because I can see which tasks I've done, at which moment, how long I worked in, the feedback, and lot of useful informations.

You can see the board I used last summer here :

That helps to work in an agile way, for example, for each new significant feature, I can get quickly some feedback about it, and prepare the specs for the next sprint, or fix it right away if the fix is small enough.