Web Application Project: May 2018

Wednesday, May 30, 2018

Review and Check

After publish the website, we realize there is some part that need to be improved:

1. Share button

Problem: Link share are not compatible (link to WordPress used)
Solution: Coding for share button redesign and rewrite
Reference to the coding: https://www.addtoany.com/buttons/for/website

2. Calendar widget

Problem: Calendar widget non-functional

Solution: Coding for calendar redesign and rewrite
Reference to the coding: http://www.instantcal.com/widgets.html

Problem after editing: Webpage browers need to allow load script to view calendar

(due to unsecured transfer protocol "http://")

3. Contact form

Problem: Contact form non-functional (fail to send e-mail after submit)

Solution: Coding for contact form redesign and rewrite
Reference to the coding: https://www.quackit.com/html/codes/html_form_to_email.cfm

Thank you page after form contact submitted successfully.

Saturday, May 19, 2018

Publish

As we keep doing the pt2 assignment and keep updating the website, we had done it. The website first draft using theme in WordPress, then the source or HTML code are copy and edit in Sublime. We decided to publish the website into a free server by uploading all webpage.html. Few types of free server had found and we decided to use the free domain 000webhost.com as the server of the website of our project.

This is how the website looked once open with this link:

https://a160640.000webhostapp.com/

Thursday, May 17, 2018

Page Content

HOMEPAGE

welcome the viewers with the “Hello” in Korean Language, 안녕하세요!
using a gif image generated from online animated text generator
welcoming and introduction of YG founder
related image added.

PROFILE

utilises the <table>, <tr> and <td> which create 2 columns 2 row
first row content : title and description of parts of profile
second row : related image of the title
on click of the image would bring user to the page of the detail of the profiles
image shown will have the image hover effect with opacity

ALBUM

details of album song title and album image
usage of <table> creates table with 2 columns
column left : image of album
column right : song title
icon link to official album selling site

GALLERY

picture show in an onclick slideshow
image would have hover effect with shadow effect
a dialog box/popup window displayed on top of the current page when images are click

music video of Yang Hyun Suk from Youtube embeded in the content
user can watch the Music video by clicking the video or watch the MV in Youtube page.

OTHERS

introduce other famous companies such as SM Entertainment, JYP Entertainment and Big Hit Entertainment
logo of each company are used and put in a table with 4 columns 1 row
logo pictures will have the image overlay effect when the mouse move to the picture
clicking the logo of the company will direct to the corresponding page with brief company’s details.

CONTACTS

form created using <form>
input include name, email address and comment from users
all inputs are required before submitting

Wednesday, May 16, 2018

Sharing Button & Page Content

Sharing button

Sharing button are placed at the end of contents. These buttons allow users to share the page and information via different ways or social media.

Popular social media button such as Facebook, Twitter and WhatsApp placed.

Page Content

After doing the layout of the website, we continue to do the parts of the page content.

The page content mainly focus on the details of Homepage, Profile, Album, Gallery, MV, Others and Contacts. We will start to discuss about what framework and details should we use on the specific page of website. We will continue to do this pt2 assignment and keep going update our website.