Week 5: Web Development

This week, I finally managed to start my work with the website. I decided to create the structure of the website first, before thinking about the content and how to use an API and a database.

---

Landing Page 1

For LP1 (index.php), I continued with the design that I already showed in the previous blog posts about the website. On top of the website, there is the myENSCHEDE logo - when you click on it, you always end up back on the index page.

Below it is the letter carousel that you can use to switch from one letter to the next one. Last but not least, there are also small letters below the letter carousel now, so the viewer can easily select the letter of his/her interest without having to click multiple times on the left and right arrows in order to arrive there.

The expandable menu is still roughly the same, although I added a few categories: About, The Team category and the Sponsors category.

This is how far the landing page is, and apart from a few design tweaks that still need to be done, it is finished.

---

The Letter Team

The next category that I programmed was the letter team. I used a flex division with two sub divs, with a row direction for each portrait with text. Since all my measurements are in viewheight and viewwidth, the text and portraits change their size when the screen changes, so I had to make sure that they were also vertically centered. Therefore, I turned each of the two sub-divs of the flex into another flex of its own with three sub-divs, aligned in a column. The middle sub-div contains the content, whereas the top and the bottom sub-div are empty. I am pretty proud of having achieved this.

---

Sponsors and Partners

In this category are all our sponsors and partner shops. I included de Broodbode, Hubo, LEDs4Life and also George's family.

---

About myENSCHEDE

The first sub-page of the website gives information about myENSCHEDE. I started programming this one last because I did not have a clear idea in mind of what we wanted to present, but I'll finish it up next week.

---

Google Maps JavaScript API

The last thing I did was to check out the Google Maps JavaScript API. To my relief, it looked quite easy to use - you can basically use it if you have JavaScript skills. Unfortunately, the use of the Maps API costs money. I have to look a bit closer at the pricing scheme, but somewhere it said that I have €200 free budget per month. The only problem about that is that I want to include at least two nearby searches per month, and in a nearby search, every location shown counts as one call, which uses up the budget quite fast. Maybe my team mates and I can switch API keys once my free budget has expired.