User:Sumit.iitp/Pagebanner proposal for gsoc 2015
PageBanner extension for wikivoyage[edit]
This is a GSoC project proposal to create a pagebanner extension to improve the functionality provided by the current pagebanner template on wikivoyage.
Profile Information:[edit]
- Name: Sumit Asthana
- Email: asthana.sumit23@gmail.com
- IRC nick: codezee
- Location: India
- Typical working hours: 6PM to 2AM before 26th April, 2PM to 12AM after 26th April(Indian Standard Time)
Synopsis[edit]
Possible mentors:
Current Issues[edit]
Wikivoyage uses the concept of pagebanners and horizontal table of contents on each of its page, to alter the way the page is presented and for visual appeal.
However the current pagebanners are rendered using the pagebanner template which displays a banner image on top and strips the original TOC and replaces it with a horizontal TOC. The desktop version is visually appealing, but it does not render well on mobile as shown below:
Clearly, in the mobile view, the banner is being obstructed by the edit box, and size is inappropriate In order to create a generic view, which would be consistent on both mobile and desktop as well as customizable, the proposal is to move the above functionality to a PageBanner extension, which would then be responsible for the rendering of pagebanners and a horizontal TOC on each page of wikivoyage
Soultion[edit]
In order to create a generic view, which would be consistent on both mobile and desktop as well as customizable, the proposal is to move the above functionality to a PageBanner extension, which would then be responsible for the rendering of pagebanners and horizontal TOC on each page of wikivoyage
Workflow[edit]
Step 1: Create a basic skeleton along the lines of the template. This involves:
- Creating a parser function as '#pagebanner' which when supplied no argument, adds a banner image from wikitext item P:948(default)
- The wikidata image will be fetched using lua scripting supported by mediawiki
- The parser function will support additional parameters to mimic the current pagebanner template in terms of its use, so that end-users perceive minimum change(taken from the template's doc page):
- caption text: Recommended. Enter caption=description to display a description of the picture when a mouse pointer is placed over the banner image.
- page name: Optional. Enter pgname=name to display in the banner. Only enter a name if you want it to be different than the formal name of the page.
- disambiguation: Optional. Displays a disambiguation icon in the banner (a question mark) and the disambiguation hatnote after the banner. Enter disambig=yes if the name of the disambiguation page is page name (disambiguation). Enter disambig=disambiguation page name if the disambiguation page name is different from the current page name.
- star: Optional. Enter star=yes if the guide is a Star article. This displays the Star article symbol in the top right corner.
- DotM: Optional. Enter dotm=yes if the guide is a previous Destination of the month. This displays the DotM symbol in the top right corner.
- OtBP: Optional. Enter otbp=yes if the guide has been featured on [Off the beaten path]. This displays the OtBP symbol in the top right corner.
- Ftt: Optional. Enter ftt=yes if the guide has been a Featured travel topic. This displays the Ftt symbol in the top right corner.
- unesco: Optional. Enter unesco=yes if the guide is or describes a site on the Unesco World Heritage list. Only the lowest level guides in the hierarchy should be tagged (ie, Sydney/City Centre for the Opera House, not Sydney). This displays the World Heritage symbol in the top right corner and adds a category.
- TOC box: Optional. Enter box=black for the TOC to appear in a translucent black box with white type. Enter box=white for the TOC to appear in a translucent white box with black type. Enter nothing for the default solid grey box with black type.
- notoc: Optional. Enter notoc=true to stop the TOC being included in the banner and for the entire TOC to be shown within the article instead. Mainly to be used on articles with lots of sections.
- index: Optional. Enter index=yes for banners on title/index pages or pages in other main namespace article categories which do not always get banners.
- fop: Optional. Enter fop=yes for freedom-of-panorama banners which are not allowed on Commons, to remove them from applicable maintenance categories
- (from banner expedition discussion) Some thoughts regarding the sub-headings of TOC can be taken
Step 2: After the code for the banner generated, its important to detect the screen size of the user and resize the banner appropriately. This step is essential for mobile users, who are one of the important targets of this extension.
The styling for the banner will reside inside the extension, which will determine its appearance on both mobile and desktop from a single location
Step 3: Create a simple popup edit box, which will be invoked by an edit button on the banner, and will allow for choosing a banner image from here
- A switch will be provided to enable/disable the feature of choosing a banner image
Step 4: Create a special page which will show the pages having banners on the wiki and allow for their editing
Design[edit]
A rough design of the banner along with the image chooser is proposed as shown below:
Deliverables[edit]
After successful compltetion of the project, the following will be achieved:
- The pagebanner template functionality will be moved out to the extension
- A UI will be provided to select an image from the banner category on wikivoyage which stores all the banner images
- Mobile frontend will have a resized banner according to the size of the browser as well as positioned appropriately
- Horizontal TOC of the banner will suporrt sub-categories through drop-down links.
Timeline[edit]
| Period | Task |
|---|---|
| April 27-May25 | Community bonding period,Interact with the wikivoyage community and refine the banner issues |
| May 25 | Official gsoc coding begins |
| may 25-June9(1 weeks) | This will involve creating extension and the parser function responsible for creating the banner functionality(Step 1) |
| June 10-June 15 | Create the lua script which will fetch the default pagebanner from wikidata(Step 2) |
| June 15-June 25 | Add the options to the parser function mentioned in step 3 to customize pagebanner |
| June 26-July 10 | Add styling and scripts to make the extension compatible with Mobile frontend |
| July 10-July 25 | Create the UI to choose pagebanner image |
| July 25-August 10 | Create a special page to show pages having banners and allow for their editing |
Participation[edit]
I will follow the following ways to participate during the progress of the project
- The project report will be updated on the project page
- Through #wikimedia-dev and #wikimedia-mobile irc channels
- Through the wikitech mailing list
Source Code[edit]
Source code will be pushed on a gerrit repository for the extension
About me[edit]
- I'm a second year undergraduate student of computer science at IIT Patna
- I'm comfortable with coding in php,css,html and javascript(related to web)
- I'm particularly interested in web development and related technologies and like to learn and implement them
How did you hear about the program
I heard about the program from my seniors and my friend who had been gsoc students.
Will you have any other time commitments, such as school work, another job, planned vacation, etc., during the duration of the program?
By 27th April,our summer vacation of college will start and ends by late of July; I can give my full time commitment to this project,. I assure dedication of at least 40 hours per week to the work and that I do not have any other obligations from early May till mid August.
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)?
Only GSoC
Past Experience[edit]
My open source experience began with contributions to mediawiki and now I'm enjoying it. I have got quite a few patches merged in core as well as in Mobile Frontend where the project aims to solve the problem. Some are:
In core[edit]
- Database bug
- Improving the captcha view for non-javascript users on login/signup form [1]
- Fix to remove deprecated tables from category page and add responsive layout so that they render well on mobile T85496
In Mobile frontend[edit]
List of all patches to mediawiki
Other projects[edit]
- Contributed to developing the college fest website for Anwesha 2015
- Small registration portal for ecell of IIT Patna [2]
- List of other open-source contributions at my github profile