Interactive comms practice

4-elements website – Further Improvements

As in every Project, when it comes to the end and everything should be finish. I have tons of ideas and changes that I would like to implement in order to improve usability of the website.

 

I haven’t created tables in Database for my booking tickets form. This is first thing I would do, including adding another page into CMS where I could read all these information from created table.

At the moment there isn’t much content added onto element pages, so I would have to add few more posts here and there with extra content on each element.

As I was planning at the beginning, I wanted to make so when you add images with posts, you could have four image size to choose:

  • small
  • normal
  • large
  • full size

I haven’t managed to do that, so this is another thing on ‘to improve’ list.

It is exactly the same when it comes to editing posts, I would like to add options of deleting image from the post, changing size of it, adding another image, or replacing it with different one.

When it comes to messages page that I have created to read messages sent by users. I would like to add additional functions to this page, where I could delete these messages and be able to respond to them from CMS, instead going onto my Email. This would require further research as well.

In manage posts page, in between post titles and post images I would like to add post text, where limited amount of post text would be displayed

 

 

 

 

4-elements website – Additional Changes

When I have added function which allows me to add images with posts, I have managed to redesign a bit ‘manage posts’ page and have added new little section between ‘post author’ and ‘delete’ button.
I am going to make so if post have any image it will be displayed there. However, currently this is how it looks:
mp1

it has to be fixed as it doesn’t look right and it shouldn’t be that hard. apart from that, main container (white/grey colour) doesn’t have set height to auto so it will have to be changed as well.

Every time I add posts this is added to manage posts page:
mp2
i have marked each section with red rectangle, and each one of these had their own div tag.
First thing i had to do was to remove ‘display: inline-block‘ from each of these and instead replace it with ‘float: left‘ and now they are in one line.

and this is how it looks now:
mp3
Now i am going to make it all symetrical and get rid of ‘Post author’ and add image label.
I have removed Post Author, modified width of other containers, including labels so they are all in one line. centralized delete and edit. also centralized post titles and changed font-style to italic.
This is end-result:
mp4

 

 

When user used contact form to send message and clicked button, he was redirected to action page of the form which was blank and nothing happened. So i have used same page that i have used for booking tickets form, made little changes. and now when user

sends message, this page opens for 4 sec and then gets user back to home page. I have added this page so users know if his message has been recieved or not.
mp5

At the beginning I wasn’t planning on placing link to Content management system on the Home page because of security issues. If this website was for real client, I would give him two separate links to Website and CMS. But because its one of my projects from course, I have decided to place
word ‘Admin’ at the right side of bottom bar (where social media links are) next to
‘2014 – 2015 Daniel Nagorski’. It will work as a link to login page of CMS.

mp6

4-elements website – CMS modifications

As i have wrote earlier, I have used already built CMS. However in order to make it work as i wanted i had to make few changes to it and new things.

I have added new page where i can read all messages that were sent to me using contact form from home page
cod 14

and here is the code that i have used as function which is pulled out on messages page

cod 15
I have removed category page because it is not requried for me. there are four categories as four different elements, and there is no need for any others.

I have changed adding posts page as well. I have removed author as this is not blog so it is not required to know who wrote certain post and managed to add feature which allows users to add picture with post.
cod 16

here is the code for adding posts

cod 17

However this is at really early stage and it doesn’t work perfectly.
i couldn’t manage to:
– make it possible to delete images from the server (it just row of information from the table)
– while editing posts, ability do delete picture or change for different one.
– allow users to set size of the image.

 

4-elements website – Building Phase part 2

As I have inserted code from the jotformeu website I have realized that nothing happens after clicking submit button. I have modified code a bit so after clicking submit it forwards user to ‘Thank you for booking’ page.
cod 7
which redirects users to home page after four second, just for sure if somehow any user got stuck I have added ‘back’ button to get back to home page.

This is code which takes users to home page after 4 seconds.
cod 8

 

Contact Form

I have created form where user insert his name (so i know at least his name) Email adress (so i can respond to him) and message.
cod 9

This is code for the form as you can see it uses doSendMsg.php action

cod 11

and here you can see doSendMsg.php code with function below

cod 10

first part is actual code from the file. what is below black line is a function that is pulled out.

4-elements website – Building Phase part 1

When I got to the point where I had to start building the website, I knew that i want my code to be as simple as possible. I am not going to go through each line of code as that is pointless.
Instead I am going to talk about certain parts of the code which gave me most of the headaches, I was struggling most or any codes that played major role in anyway in building process.
I will also present to you how some parts of my website are structured.

 

Mainly my code consist of <div> tags, and I have been trying to use more of these than usually as it helps me with controlling the content on the website. As you can see on the picture below, Nearly every part of the header has its own <div> tag. So every time I had new idea to try, it takes
me much less time to implement it and test it.

cod 1

 

cod 2

 

 

Another changes started to come during building the website

cod 3
i changed few things in elements section. i have added main background for this section, and another background for each element.

Between contact and elements sections you can see I have added another thing that i wasn’t considering earlier at all. This little bar with ‘are you interested in booking tickets now?” and button on the right side was placed there on purpose. As we know this website was created in order to encourage and welcome people to the upcoming exhibition. I have decided to put this bar nearly on every page of the website, so there is more chance of people booking tickets.

On top of that, In the navigation bar (was supposed not to use Navigation bar at all) i have added button with red text to booking tickets form, because as a designer, creator or even owner  if I am creating this type of welcoming website for upcoming ehxibition, my main goal is to get users attention on booking tickets.

 

I have created my booking  form tickets using free form builder (www.jotformeu.com).

cod 4
I am not really sure why I have decided to use this builder but in retrospect i couldn’t regret it any more.There is more negatives than positives in every single aspect.

First of all – CODE
the amount of code that I had to insert onto page which i have created for this form is unbelievable. It is just one simple form with few text boxes, so if I was about to create it on my own it would have maximum of 20/30 lines of code. maybe with bit of CSS here and there it would have maximum of 40 lines.

Now look at this
Here at line 50 code given to me by jotformeu.com starts.

cod 5

and it goes all the way down to line 611 which in total is 550+ lines of code for simple form.

cod 6

There is like six javascripts used within the form (don’t know what  for)
And amount of CSS code used is just stupid. more than 400 lines of code to decorate form..

That is not all, as we know more code used within website, is just slowing down loading speed of page.
Another thing is that every time someone use this form, I  get email informing me about this. Because i have my email linked to my phone. everytime i have internet access on the phone, and someone use this form.

I get these notifications:

jotform msg

Overall I am considering using this form as a FAIL. and creating my own form and replacing it with current one would be my first thing on the ‘to improve’ list.

4-elements website – Design Phase part 3

DESIGN 3

Untitled-8

I have removed the lates post section and instead i made about section full width of the main container.
Below is elements section,  where i have made major changes. i have added titles to each element with little bit of description and read more button which takes user to page with certain element..

Also few changes were made to contact form. on the right side i have added the zeus statue which was earlier used next to about section.
bottom bar where social media links are has also been modified. I have moved links to the left side and on the right side i wrote little text ‘All rights reserved..” and added background to the title.

DESIGN 5
Untitled-10

I have added bit more white space to the page
Created title for elements with two lines at the top & bottom.
changed the text of the button from ‘purchase tickets online” to “book tickets online!”
added border around ‘read more’ buttons in elements section.
This wasn’t my final design because i know that during creating website i will constantly come up with another ideas to try them out.
my final design is my website.

4-elements website – Design Phase part 2

 

DESIGN 3

Untitled-5

This is another design I have created However this time you can see I have designed and added Latest news section.
I wasn’t really planning on creating this However i was just playing and wanted to see how it would look like to have such a section on home page (Where previously Greek god statue was).

This section was supposed to show the latest post added onto website. However at the end of the day I have decided to get rid of it as in my opinion home page should be more as Welcoming/Advertising page.

Another changes that were made are:

– removal of the two lines in the middle (it looks more fresh and clean)
– changed the background colour of contact form from purple to white
– increased the height of the design

4-elements website – CMS (content management system) – concept

at the beginning i was planning on creating my own CMS, but I have decided to use very simple
content management system created by someone else, as I will be able to focus more on other important aspects of the website.
However, I will have to make few little modifications to meet my needs and these are:

– ability to upload and delete images while adding and deleting posts.
– create contact form where users will be able to write messages and page inside CMS where I can read these messages and delete them.
– Adding posts to four different sections (elements) as there are going to be four individual pages, each for each element.
– removal of author (from adding posts page) as this is not Blog and that is simply not required.

If everything go as planned, these are things i would like to add as well:

– ability to change your password in CMS.
– replaying back to user without leaving pagee (cms would be [if possible] synchronized with email)
– choice of uploaded image size (small, normal, large, original)
– improved security