Creating the home page (index.html)

Now that we have created the database using ‘phpMyAdmin’ and ‘Sequel Pro’ I set out the development of the home page of our web application. This home page will be used as the index, and therefore will be named index.php. It is named .php and not .hmtl because there will be php interaction on the user interface such as filling in forms. A html extension is only used when there is no interaction with the web application, such as static web pages.

To carry out such a process I first needed to work off a design that was initially developed by Seb Faull (my team parter). He has developed a wireframe for the home page of our web application using Adobe Illustrator. Here it is:

yumi-logged-out-WIREFRAME

And again, with mobile screen resolutions and aspect ratios in, Seb created the home page wireframe in mobile and tablet format. Here it is:

yumi-logged-out-mobile-WIREFRAME.fw

Once we had agreed to the final design of the wireframes, I then went onto creating a more polished version of the wireframes using colours, graphics and text of the home page using Adobe Illustrator (index.php). But before I started to develop the HTML for the web app, I needed some graphics for the web app; I used a web site known as ‘icons8.com’ to get the buttons for the different recipe categories as seen below:

What is important to consider is that the icons listed above are free to use as long as I set a link
to each page on which I use their icons on.

I also used their website to display the ‘likes’ icon, ‘comment’ icon and the ‘time’ icon. And here they are:

From there, I then started to create a more polished version from using the design of the wireframes:

logged-out

And the same with the mobile version:

logged-out-mobile

Using both of these final designs I then went to re-create them using HTML and CSS code:

Here is the HTML file for the index.html:

index

Next I needed to add the background image to our web application. Using the website ‘unsplash.com’ I was able to gain access to a libabry of high resolution photographs that have no copyright issues and were royalty-free meaning that I could use the photographs from the website without having any issues of copyright theft. Obviously our web app is a recipe community so we thought of using something related to food, and this is what we came up with this:

RpgvvtYAQeqAIs1knERU_vegetables

And here is the link to the photograph: https://download.unsplash.com/31/RpgvvtYAQeqAIs1knERU_vegetables.jpg

As I was developing the html code for the index page, I also carried out writing the code in CSS so that the div classes could have a certain style and format. As the web application develops me and Seb discussed we think it is important that we only have one CSS file for everything, therefore we do not get confused or overlap on other styles and formats. Here is the CSS for the index page:

stylesheet

And below is the Javascript code for the footer. The code itself allows the footer to be activated when the user scrolls down the page at a certain point. In this case, if the scroll is more than 100 pixels down, fade in footer. When the footer is ‘faded in’ there is a button that can activate the footer to scroll the page back to top in a nice animation transition. Here is the code:

footer.js

Combine all three files (html, CSS and Javascript) and you get the final product of the home page of our web application:

Yumi

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s