Recently I was able to collaborate with a wonderful project carried out by my University to create an Audio Book Library For The Visually Impaired students. You can view that website at manusathhanda.rotaractmora.org
Since I had a great time contributing to the project, I thought I might as well share my experience with the internet. Let’s take a look at what goes behind the scenes during such a website development project, so that you can get some inspirations for your own website!
First things first, a plan.
We got an idea, but we had to select some like-minded people for the dev team. What on earth is better than to call for volunteers? There were 4 volunteers including myself. But I only had a very basic knowledge of the required technologies for such a project, namely,
- HTML
- CSS
- JavaScript
- PHP
We had a team meeting. According to the knowledge each team member had, we divided the tasks among ourselves; Division of Labour.
“A team is only as strong as its weakest link”
Mark Grey
I think it was the most important step of all.
Website templates, the good friends
Next, we downloaded a freely available website template, Industrious. This helped us to meet our deadline, which was due in about 10 days.
GitHub, where the code lives
Without doing anything else, what we did was host our code on GitHub. Wooooh!!! what’s that? Don’t panic. GitHub is a very good friend of yours if you get to know it. GIt is a version control system, and GitHub is where the code Is stored online (hosted). Using Git and GitHub, it is easy to manage various versions of your projects (including source codes and other various files) without any hassle. If you made a mistake, you can also roll back to a previous version without any problem. Also, when you have to do a team project, GitHub is definitely going to make your life a whole lot easier. Our team initially used GitHub Desktop, but later decided to use GitKraken, which supports visually showing a roadmap of our development. Quick Fact: GitHub gives a free pro version for university students!
The Host, A shelf for our website
After that, we needed a hosting platform. We chose netlify since we had a simple static website at first and just wanted to see it work like other normal websites. Whoooh! What’s static website?
It did! Wow! What a great first step. We then moved onto Heroku platform, since it supported .php programming language natively.
But since our efforts to host the audio files in google drive were in vain because google didn’t allow so many request calls for the same file in a short time period, we had to host our audio files in one of our university ftp servers. To manage files on the ftp, we used FileZilla. Whooo! What’s ftp?
https://filezilla-project.org/
The Code, what makes all the difference
For coding, we used the VSCode which is free.
https://code.visualstudio.com/
Then we edited the template that we’ve downloaded, to suit our needs. It was a very good template and editing it was really straightforward. Since we were new to web development, we hit many obstacles countless times. In those times,
were there for help.
We used <style> tags in HTML files for decoration. Ooh! What a mistake! I’ll tell why in a minute. After we’ve got a decent website for our project, we showed it to our project managers. Obviously, they needed several edits done to it; different colours, different fonts and different layouts. Guess what? There were more than 10 web pages at the time and we had to change the <style> tags of each and every one of them. It was after sometime that we realized using a separate .css file for all the styling was very useful. Then we only needed to change the relevant code in one place and all the web pages are updated at once. No hassle.
Audio Library, you say?
The audio files were stored in an ftp server which our University has bought. So we needed a system to auto-generate the audio elements (audio players) for each audio file, from the files in the ftp server, rather than adding audio elements for each audio file by hand manually. Since .php files were not working on the local machine (our home PCs), we had to upload php files to the server everytime we wanted to test them. We do not know much about phpMyAdmin. After sometime, we got a fully-functional website.
To make the audio files downloadable, we used a download.php file.
Since this is an Audio Book Library For The Visually Impaired People (mainly students), we are planning to implement a voice assistant feature in our next stage.
Final touches
To beautify the homepage, we added two carousels, using bootstrap library. OMG Bootstrap! What’s that? Bootstrap is a css framework which allows cool things like auto-adjusting the website contents to fit mobile devices, have awesome widgets like carousels and much more.
Another big obstacle was “how to support mobile viewers”? It turns out, that most of the users who visited our website were mobile users. So obviously we needed to support mobile devices. Being beginners in this web dev arena, we struggled at first. But then we got to know about @media tag. Within a few minutes, we could get our website to perform well in mobile devices also. We also used an online tool to find out the threshold pixel value at which we want to switch from desktop view to mobile view.
After some minor tweakings in the colours, the website was finally done. It was a great experience for the team. We learned so many things in web dev, but we know there’s a whole lot more.
Conclusion
At the end of the day, you don’t have to be a genius to get a website up and running. Although you don’t know all the programming techniques and technologies, just get a glimpse of something and try building with it. That way you can really learn something. And we could successfully create Sri Lanka’s first Audio Book Library For The Visually Impaired Students.
You can view our website at manusathhanda.rotaractmora.org
