Week 5 & 6: Inkscape mockups and implementing the UI

It has been a bit too long since my last post! My last post was about some updates on the user stories and the wireframes.

I had been using Pencil to make most of my wireframes. More often than not,I would end up having to search for a lot of other wireframing tools since not all elements in the wireframes could be achieved with Pencil itself. So,if Pencil did not fulfill my requirements,I would move to Chrome extension of Balsalmiq and a lot more other extensions which I did not use more than once. This was frustrating and I finally decided to learn to use Inkscape for creating better high-fidelity mockups. Before starting to use the application directly to create mockups, I read Máirín Duffy’s tutorial on creating mockups. This is a great starting place to learn the basics . But the more you use Inkscape, the more you learn.

In the following iterations,we also moved from a tabbed layout to putting the two features parallel to each other to the current layout. The current iteration has the “Access Port” feature on the top and the “Traffic log” at the bottom. Here is a snippet of the mockup iterations:

A) This is more like a wireframe than a mockup and was made using Pencil.

port-1

 

B)Second Iteration: Parallel layout of features. This mockup has a lot of inconsistencies .I was still learning to create objects and move them,but Inkscape’s “Cusp to the corner” feature would frustrate me especially because I still hadn’t realised that I could simply use the arrow keys to move around the objects. Silly,right?! add_port

C)Third iteration:  This is the most current mockup and I have been able to modify lots of small (but important)details in this iteration. The error states for the “Traffic Log” needs some more work to include cases where the data present is large. ti

Meanwhile,I had also started implementing the UI to get a feel of the mockups in Cockpit. While it was comparatively easy to implement tables and insert content using HTML,it was a bit difficult for me to get the dialog box for “Add port” running. This week I finally (FINALLY!) got it running and that made me super happy 😀 One more lesson I learnt while trying to get the code working is that the best way to learn to code ( faster and better) is to read ,understand and play around with codes of existing applications ( definitely in your fork of the application’s repo 😛 )

More to come in the next week!

 

 

First Open Source Contribution and Outreachy!

Hi there! This is my first post on the blog and an introduction is mandatory. I am Bhakti and I am in my final year of engineering undergrad. Although I have been using open source operating systems since almost 6 years,I did not know how to actually contribute to open source projects until a friend taught me the basics.

The first step before even finding a project to contribute was to prioritise in what way I could contribute. There is design,documentations and of course,coding. Although I have done a bit of programming during my graduation,I am much more passionate about UX( User Experience)  and wish to continue in UX. After focussing on one field,it became fairly easy to choose an organisation, that was design-driven,to contribute to.

For newcomers like me,Gnome has an extremely resourceful page at Get Involved. Similarly,you can also browse the organisations that had previously participated in Outreachy and GSoC. 

My first contribution in the open source world was for Cockpit . Cockpit is an interactive server administrator interface. The installation for Cockpit is fairly simple:

1.Install Cockpit:

sudo dnf install cockpit

2. Enable Cockpit:

sudo systemctl enable --now cockpit.socket

3.Enable the ports through firewall,if required:

sudo firewall-cmd --add-service=cockpit
sudo firewall-cmd --add-service=cockpit --permanent

My mentors Dominik Perpeet and Andreas Nilsson helped to narrow down the task for my contribution. I designed the UI for the Network Manager. The current user interface contains jargons for the different modes. Our aim was to describe the modes for beginner users or system administrators.

Current UI
Current UI
Proposed UI
Proposed UI

The fonts in the proposed UI isn’t in sync with the current fonts used ,but that will be changed when making the final changes. The backend code is still under progress and I will get to it on one of the coming weekends.

Now would also be the time to mention that I have been accepted into Outreachy internship with Cockpit and I am ecstatic.

Outreachy is intended to help newcomers and new contributors to open source applications and projects. Outreachy specially focusses on providing equal opportunity for under-represented groups in the open source community. This is a full time internship for three months and participants work remotely from home. The Cockpit community has been very welcoming and has helped me to get involved in contributing to the Cockpit project. Being accepted into Outreachy is an honour and it has only motivated me to learn more  and contribute to the open source community.

Not only do I get to contribute to the project but also learn more about user experience. My Outreachy project is to build a UX focussed interface for the firewall in Cockpit. The internship started on 6th December 2016 and I have started working on my project. So far,I have listed similar applications that have a GUI for firewall and the user stories. The next step is to search for patterns in all the applications listed which will be followed by shortlisting the requirements,workflow and then the mockups.

Although I will be blogging regularly about my project,you can also find all the information about the firewall support here.