The assignment this term was to make a portfolio documenting all the work done during the semester including the process of creating this portfolio.

Brainstorm

Second try:

While brainstorming I was thinking about scope, content, functionality, wireframe and presentation of the site.

Then I got down to the main skeleton of the site

looked through different fonts for heading, nav bar and text

then implemented the ideas using code

I added html code to every text in every text box

and styled using code which I added to the code page. The final code looks like this:

Result:

I played with background and header image, and my page transformed into this:

As you can see it looks like my final result.

Difficulties with Hotglue
So I was happy with the new look of my webpage, but unfortunately at this moment something went wrong with my page and the objects on it misbehaved: when I clicked one object, Hotglue chose another one. I spent much time trying to solve the problem. As I couldn’t find a cure I made a decision to start all over again. Later while working on my newly created copy of the page I found out what the problem with my first try was: somehow some of HTML I added to text boxes disappeared and div didn’t have a closing tag. When I added the missing tag, the page went back to normal.
To prevent misbehaving of the website, first of all I filled the pages with the content and left coding and “make object appear on all pages” option for the last moment. It worked and now you can enjoy the result!
Another problem I came across is that edit mode and view mode look different. When you move from one mode to another the objects on the page change their positions slightly. The difference is not big but it can get a bit upsetting when you realise your efforts in adjusting objects is pointless.

Hotglue
Hotglue has got pretty much easy tools which makes it easier to describe them. While making my Introduction to Hotglue page, I quickly described the tools and options this website provides.

Processing
While doing the tutorial in Processing I made 7 screenshots which took a huge space when I added them to my Hotglue page. So I decided to make a slideshow video. I imported my screenshots to Adobe Premiere and moved them to the timeline so that they got positioned one by one. I recorded an audio reading the text I prepared to put on Hotglue describing the process of the tutorial and the screenshots content. Then I searched Google and found 2 high resolution images with Processing icons. I used them as title sequence to the video. I stretched all the images to match the audio and added captions at the end of the slideshow. Then I applied video transitions between images and cross dissolve video effect at the beginning and the end of the video to make it smoother.

Mobile Application Development
While creating my Mobile App I was documenting it straight away capturing screenshots and describing work I’ve done. This was good from the point of view that everything was still fresh and I didn’t forget any details. Even though it may look a bit monotonous, but I liked the way it was and decided to keep it this way.

Conclusion
Though I had fun with Hotglue, I think it is more for those who has never developed a website. In a couple of clicks one can create blocks with images and texts, embed video and change background. However, for large scale multipage web project, I would look for alternatives. There is a possibility to put code, but Hotglue default settings can override added code and the objects start to misbehave. Overall, it was very useful to work in Hotglue and I learned a lot from both positive and negative experience.