Seventh Week – Styling Bars & Testing New System Formatting (6/26/2015)

“A thousand mile journey starts with a single step”, a old quip of motivation that is still in effect today.

I have been tackling the new formatting system with Dr. Heggen, while at the same time, I have been working on sliding top bar for image links. The major challenge of the former is not being able to generate tokens for labels, which is the critical feature of the graphs. Without this, the graphs will be indiscernible. Other than this challenge, I am still not fully convinced about the efficiency of this system, and the difficulty and workload behooved to site administrators. Contextual filter is a hard concept to grasp, and the graphs cannot be individually modified with this newly proposed formatting. Some charts need to be in stacked column format, some in pie, and some in tables, which will be hard to manage because all are formatted through one method, leading me to question the efficacy of this new system. However, I decided to put that aside until I have fully explored this option; only after that, I will weigh out advantages and disadvantages and see what would be most convenient for customers and visitors of the site.

On a different note, I encountered some obstacles in resolving the issue of sliding bar. First, it simply did not work, because the core file was misplaced in a wrong directory, so it was a easy fix after I learned to use terminal to transfer the files. Secondly, the slider bar doesn´t represent fields in the same row, but instead only in columns. I solved this issue by multiplying the rows of image link field and by editting the view setting to display all the same fields in one row. Thirdly, the last item in the row was incorrectly displayed but I resolved it manipulating the size and setting the image formatter. Fourthly, one of the biggest challenge was that the images stopped sliding after displaying the last content; however Dr. Heggen helped me solve it by filtering the field in content type. Apparently, there were some other invisible and unnecessary contents in the field. There were some bugs along the way, but I could say that all the trouble and time investment was worth it, when I finally got to see the end result. I still need some more decorations such as left and right arrows to demonstrate previous and next slides, for which I need to internally modify the core css files, and module files.

My eyes were irritated from constant staring at the screen for eight straight hours, and my brain was a little tired from all the problem solving. Nonetheless, all this was worthy of the results on the screen, so I finally switched off the server and called it a day.

Seventh Week – Drupal Core Update & Site Feature Improvements (6/24/2015)

The possibility of my drupal site not being approved by Mr. Charlie concerns me, thus I suspended my documenting process. Meanwhile, I decided to keep working on my site, expecting that it could impress and convince Mr. Charlie that it would be much of a loss to discard all of it away. I went over several components of my site to improve as much as I can. For the pie chart issue from yesterday, I re-formatted the file, reconstructed new tables, and imported the data into pie chart, which is now shown correctly. This format is neither obvious nor intuitive for novice administrators, however, I will have to pass on the details of the process and specific information associated with this “Commute – Participation Rate” in my documentation.

I finished resolving the stacked column chart on “Greenhouse gas emission for global scopes”. Though I could successfully generate this chart and eliminated the html links on x-axis labels, I am still not fully satisfied with the limited space for labels on the right side of the chart. I tried to figure out a way to internally modify the space settings of the chart and labels for a few hours, but I postponed it to prioritize another decoration issue.

Stack Column Chart

I have been working on generating a slideshow of the top style block containing images with internal links. Initially, it was made with the table format for fifteen images. For visual clarity, I am attempting to make a slideshow of five or more images per interval of few seconds. I am still sorting it out, and yet, one more issue arose near the end of the day.

During my conversation with Dr. Heggen, he suddenly suggested to me a whole different data formatting system, which I was not fully convinced that it would work without running into major issues. I was taken aback by our entirely different perceptions about drupal data formatting during our conversation. I think of fields as columns, and contents as rows, just like in excel sheet where I would assume the whole spreadsheet to function as a content type, which Dr. Heggen finds to be eccentric. It might sound a little abstract to outsiders, but it helps me understand the way drupal works.

We decided to testify Dr. Heggen’s suggested data formatting by running a small experiment in the few minutes that we got. Time flew by, and we were not aware that it was past the internship time when we found ourselves stuck with the label taxonomy issue. Though the suggested system was not fully operational with our test, it seemed plausible and useful because of the taxonomy features as contextual filters for urls and graphs. Labels were not properly working in displaying graphs, but we decided to call it a day.

Seventh Week – More Chapters (6/23/2015)

It was definitely not one of those hopeful days.

Yet, I learned some valuable things in terms of work life, and technical programming.

I was almost finishing my third chapter on using views to construct graphs and charts for my documentation when Dr. Heggen suggested that we could pay a visit to Ms. Pauly to discuss about the portal. During our walk to the meeting, I learned that he had not met Ms. Pauly in person, but only through email for portal request. I was a little surprised because I usually make appointments before dropping by and meeting with people. I never knew before that it was germane and efficient to personally pay a visit once in a while. Because when we did that today, we actually managed to sit down and have a small discussion over the portal. It was better than hanging and waiting around for her email response, which I had not gotten in the past week. I observed closely about how my supervisor fluently communicated with the customers though it was a surprise visit and they had not met before. It is not exactly that I am socially challenged or awkward, but I have a lot to learn when it comes to socializing and communicating.

For take-home messages from our brief meeting, we still need to talk with Mr. Charlie to convince him about our alternate plans for syncing drupal with wordpress. Initially, Ms. Pauly seemed to be reluctant of having a different system than wordpress because Mr. Charlie admonished her against using a different system than wordpress, but after we showed her the convenient features of drupal, she became interested in it and was happy to use drupal with Mr. Charlie’ approval. If not, I will have to redo all the work in wordpress, which would be heartbreaking. The documentation that I am currently working on will be in vain as well. This saddens me, but I will have to wait and see about the discussion with Mr. Charlie. Ms. Pauly commented about this possibility with one of the saddest quips,  “This is life.” Not too encouraging, but she probably meant it to be comforting.

As I was demonstrating the features to them, I noticed that I had an issue with having “Commute – Participation rate” display correctly in pie chart, but I figured out the root of the problem later. Pie chart demonstrates data for the second column of excel sheet, labels for the first column, and does not take into consideration the rest of the columns. Hence, I will need to improve my work on reformatting that part of the portal. Ms. Pauly appreciated my work and enjoyed the features, to my relief, but I decided to work more on it, especially after recognizing the pie-chart issue.

Dr. Heggen and I decided also to pay a brief visit to Mr. Charlie, but he was not in the office. So, we grabbed some coffee and got back to our work space. He suggested to me some interesting ideas about the portal, but how excited could I be when my almost-two-months of work is at stake?

Seventh Week – Documenting Part I (6/22/20)

I was taken aback by the awareness today that I have never actually written a manual guide or a documentation before. This made me excited to start this little adventure though I was clueless how to start, which led me to research on internet and to appreciate online resources. I am very grateful to google for always being there in my need, offering me a wide variety of advice, solutions and answers from around the globe. Not all of them prove to be informative or interesting, but at least, it got me started somewhere.

I started working on my documentation linearly; introduction, content table, chapter 1, chapter 2, etc. My targeted audience is the site administrators from Berea College sustainability department. After completing the introduction section, I created a content table where I cross-linked the content headers with the headers from each chapter so that the audience can conveniently navigate through the document. Subsequently, I moved on to explaining content types which was Chapter 1 of my document, and demonstrate an example of creating one while encouraging the audience to create his/her own as well. I provided visual assistance by adding screenshots as I proceeded from one step to another. I kept my writing tone light and cheerful to keep the readers interested throughout the documentation.

In Chapter 2, I explained about feeds import which is essential for data transfer and import. As in the previous chapter, I led the audience step by step with visual assistance. I focused on the importance of consistent naming throughout the process for data mapping purposes, and reminded the audience to save each step as we advanced further.

This documenting made me feel like a tour guide leading a group of foreigners, and I find this experience to be bizarrely different. As I consummated the chapter 2 of my document, I realized that it was time to switch off my laptop and call it a day.

Sixth Week – Documentation & C# Set up (6/19/2015)

As I am embracing the end of this sustainability project, there are still a few things hanging around to be resolved. First, I am awaiting a meeting with Ms. Pauly to receive the feedback and suggestions for her requested website; and secondly, I am trying to develop a feature for dataviz graphs since Ms. Pauly suggested that she would like to see a target line in the column charts. Nonetheless, dataviz module powering the graphs on the sustainability portal does not come with her desired feature.

Hence, I attempted to import a target line in dataviz chart by manipulating the google API files, view files and dataviz files, to no avail. It was not as easy as I imaged, to internally modify the codes of Google API and view files. As I dug through the codes and experimented with those files, I left traces of my changes by commenting my name before the sections of my codes, which turned out to be a headache saver when I inadvertently demolished the graphs. After struggling with this tangle for some time, I decided that it was best to take a break and think of a way out. I needed a little break. So I posted a question regarding this matter on Drupal organization forums, and tried to focus on something else. I am hopeful that someone will help me out, and this issue will be resolved at some point.

To my dismay, I really had nothing more to work on. Since the start of the internship, I have been autonomously operating, occasionally seeking for advice from my peers and supervisors, to accomplish the major goals of my project. I have enjoyed the liberty of setting my own sub goals for the big project, and working towards them without constant supervision, which is different from my experience with college life. There, we have constant reminders such as homework, deadline and assignments to make sure that we stay on track. I, as a student who normally takes six or seven classes, find that keeping up with all the deadlines could be stressful, and I sometimes found myself striving forward for the sake of meeting deadlines and obtaining good grades, other than living the moment and enjoying the learning aspect itself.

Now that I found myself available to take on more projects, I could not be happier. I decided to learn C# that Dr. Heggen suggested to be useful for the next proejct, and to start documenting the site management of the sustainability portal for whoever may be responsible from the sustainability department, to administer the website.

Sixth Week – Migrating the Site and Obtaining a Permanent IP Address

We managed to obtain a fixed IP address for my website today!

I spent my first half of the day on finalizing the looks of the website, especially on the image buttons. I customized the color and designs on my own with Adobe Photoshop, and provided each of them with faded black borders to give better-refined looks of buttons. When all the buttons are aligned together, the appearance of the front template is enhanced. Additionally, the top style bar buttons are also updated for the same purpose.

Enhanced Buttons – Front Page

Enhanced Buttons – Top Bar

For the site migration, I zipped up all the drupal database online, and also local folders, which were transferred to the server. Dr. Heggen and Austen helped me a lot with site migration and obtaining the IP address for the site. In order to operate the program files on the server, Dr. Heggen recommended me to learn how to use terminal. FileZilla and MobaXterm were downloaded so that I can administer the site and internally modify the files on the server, but there is still much to learn how to manage these softwares. All the credits of site transfer, and generating IP address of my site belong to Dr. Heggen and Austen, because I had meager knowledge of operating the terminal.

During the site migration process, everything initially seemed to be advancing smoothly. However, we were impeded by a major obstruction when we could not access anything from the site though we could see the front page. We assumed that the files were not properly imported or some crucial files were missing, but it was not my area of expertise. This is where Austen and Dr. Heggen stepped out and resolved the issue. As they were tackling the problem, I got an opportunity to watch and learn how they approached the problem. They tried to get the hints from the web error message, used online resources, made plausible hypotheses for the root of the problem, came up with possible fixes, and tried them out until they resolved it. Though I was uncertain of technical details revolving around the problem, I had a slight grasp of how they were tackling it and what the problem itself was. They modified some config files based on the drupal 7 migration manual and relaunched the server, which finally worked at the end of the day.

The website can be now publicly accessible with the link below.

http://54.88.72.110/sustain/

Sixth Week – Styling and Table Boundaries Removal (6/17/2015)

Yesterday, we spent first half of the day arranging the office, and hence, all of us were unproductive in terms of programming. Yet, the great part of that day was getting to know each other more and having a great team bonding time together.

The second half of the day, I kept working on styling and decorating the image links. I tried different image sizes to improve the looks of the front template without debasing the resolution much. Adobe photoshop and paint are the main softwares for the image resize.

Today, I made the top style bar with all the collections of buttons on every page, except for the main page. I had to modify the css file of the theme because slideshow bar was disabled for all pages except for front pages, which is anomalous compared with several other drupal themes. For this as well, I had to work on resizing images to a suitable pixel dimension so that they could all fit in the bar without ruining the appearance of the template.

Below is a screenshot of the top style bar which is made into a block positioned in the slideshow region.

Top Style Bar – Block

I spent a good amount of time consummating the features of the website. The front page contains images embedded with internal links, which are customized with table format. However, the borders surrounding the images were visibly distracting, in other words, I found them highly undesirable for the exquisite look that I yearn to give to the web portal. Hence, I attempted to remove the table boundaries, which I found to be the biggest challenge of today. I researched all the forums and tried a plethora of methods, which only turned to disappoint me. It seemed to me that I was on the right track of researching because the other programmers shared the same issue. But the methods would not work for me. After trying a surfeit of suggestions and yet obtaining no success, frustration crawled to the back of my mind. Then, I stopped and thought that I should track the issue on my own and debug it, and not solely rely on other suggestions because the methods implemented might be entirely disparate though they acquired the same result. The situation was similar to trying to treat a superficially look-alike wounds with similar methods while the roots of the wounds are exclusively divergent.

So, I began looking into all the files in drupal directly that are related with system themes, system modules, additional themes and modules that were installed externally. This method seemed to be plausible for a fix, but it was quite inefficient. I could look into all the files all day long, yet I could still end up not getting it fixed.

It was only then that I stumbled upon an astounding epiphany. Rather than blindly looking through all the directories for possible fixes, I could obtain some clues from the web page, with the help of “inspect element” feature! I was never fully aware of such powerful impact of that feature until today because only today, I was rescued from a possibly endless debugging. By inspecting the specific areas of features that I needed to remove, I could track down which part of the files and programs were responsible, and also, I could see immediate changes and test my presumptions by manipulating the inspect tools on the right side.

At the end of the day, I felt accomplished with a sense of victory for this table-boundary-removing achievement, and designing the custom template of the web page.

Sixth Week – Front Page Button & Template (6/15/2015)

My major accomplishment of today was that I resolved the front page template with images linked to respective urls for the website.

I researched different articles and forums this morning to have a front page template with buttons, but I didn’t find anything germane to achieve what I desired. As I was tackling this and working on different possibilities, an idea suddenly lightened up my mind: I needed to test if the table format can support “image link” for field setting. Because, if so, I could go from there to achieve my objective of front page template. Thereafter, I put my query to test, which was fortunately proven to my advantage.

There must be different ways of achieving this, but my method is web-friendly with technologically challenged customers and administrators, i.e., if the site manager desires to have different sets of buttons with preferred images and urls, they can conveniently attain this by creating a new content or editing the existing ones in the “front page button” content type.

I manipulated the view module with table format, and added the button fields I created earlier for the front page button content type. I created two different contents (each with five fields) to make ten buttons on the front page, and I also worked on finding pertinent logos for different sections of sustainability, formatting the image sizes, improving the photo resolution and the appearance, and adding relevant titles to the images.

Below is a screenshot of the dashboard with ten button-image-links that redirect to corresponding links.

Dashboard – template with image links

This accomplishment has made this Monday a great starting day of the week!

Fifth Week – Finalizing Data & Front Page Buttons (6/12/2015)

The button field module which works with rules in configuration does not meet my expectations because all the buttons lead to only one url link. It is made for generalized uses, and not for specified images with unique links. Therefore, I cannot use it to design the front page of the sustainability website.

However, link image module is a great replacement which resolves the issue in button field. Image buttons can be individually embedded with distinct links, but there remains one drawback. The buttons are to be posted on the front page in a neat format: to serve as attractive directories to any data displays that the visitors desire. However, the front page only publishes the summarized version of the content, in this case – the titles of the buttons, which, when clicked, are then directed towards the pages with their image buttons.

For example, I created two buttons; commute and paper. Below is the front page of the website.

Front Page — Undesired “Read more” buttons instead of image buttons

Clicking on “commute” will then lead to the page with the associated button, as shown in the image below.

After clicking on “commute” from the front page, the page to button is redirected.

Further clicking on the commute button will then lead to the data and graphs on commute. This is a superfluous route with redundant paths to get to the desired destination, which is highly undesired.

Graph of Commute – Berea College Sustainability Department

My goal is to make an attractive front-end for displaying the data with linked image buttons as in this example template: University of Washington Sustainability. I tried inspecting the elements of the page to make a customized theme which cannot be saved through web inspection. I practiced more of css and html in code academy with the hopes of warming up my learning a few weeks ago. Even as I am learning them through code academy, I am convinced that, without practice, the knowledge will not stay long with me. Experience is what embeds the rules and regulations of the programming languages into my brain, so I kept writing some web pages. I can write images with links, and design the pages as I desire on my own, but drupal works differently. Since the template needs to be read and understood by drupal system, I need to learn to abide by its rules to sync the front page to the rest of the configurations. I will need to research more and talk to Dr. Heggen regarding this matter, but meanwhile, I contacted Mr. Charlie to set up an appointment with me and Dr. Heggen to resolve the issue of wordpress and drupal.

Fifth Week – Drupal Backup & More Data Mapping -Formatting (6/11/2015)

I have been constantly worried about losing the drupal database along with my website since after my first horrible calamity of database destruction a week ago. This morning, I researched about backing up the database, and I exported the whole database into compressed zip file which is now stored in the cloud storage shared by the accounts of Berea sustainability (the one I created for the project) and my personal account.

I have been entirely working on importing all the data and managing the nodes within the site for the past few days up until this point. During this process, I learn something new everyday. Today, I figured out how to import, export tables and how to attach the graphs to contents through eva (entity views attachment) in view.

Below is a screenshot of Greenhouse Gas Emission – scope table & scope comparison graph.

Greenhouse Gas Emission –
Scope Table & Scope Comparison (2009-2012)

I changed the data formatting of the commute files so that all the files and graphs can be easily updated through local file upload. As of today, I finished working on complete portions of commute, greenhouse gas emission, electricity consumption, recycle & compost, and solid waste for a variety of display.

Though all the data importing has been made to be as convenient as possible, I would still need to give Tsering a short training over how to manipulate the portal. Ms. Pauly requested that I make a documentation so that whoever would be responsible for the site management could use it as a manual guide, especially after my graduation which is next year.