FINISHED PARIS WEBSITE – PHP

Here’s the link to the completed website;

http://www.dynamic.artdesignhull.ac.uk/abrodie/

Advertisements

Evaluation

Creating a PHP design was a challenging prospect, it meant research had to be carried out in many things I had not considered before. The first challenge comes when you understand that you cannot design a php as straightforward as an average site since it contains sensitive information such as the database details and links to the tables within the database. I understood that I must build the PHP first to ensure full functionality. Next step would be to create wireframes that worked around the objectives of the php. For example, the gallery page was built using a white box function that allows expandable images, for the most part this was done using javascript but it also meant there was an added level of complexity. I had to consider many different variations of gallery page, and in the end scrapped the design for the gallery page as it was built around larger images and the initial purpose of my gallery page was to contain clickable thumbnails.  Once the wireframes were completed the next stage was to build the design into real user experience. This began with me starting with the PHP and making sure the functionality was there, then adding the html code around that, then adding the css to make the design work.

The design needed to be thematic, therefore I decide to create a website based around a trip to Paris, which would allow the user to get a grasp for the experience they would have if they travelled there. There is a homepage with a welcome message, explaining the purpose of the site, a gallery page with all the images and finally a search page which allows you to search the images to find the place you want to visit along with a short personal account of the landmark.

I really found the process of learning php much different to the process of learning html and css as when you ‘fiddle’ with html and css things change on the browser and you can see the effects of what you are doing. Whereas with php either does or sensate work and there is no in between, it alerts you to issues with the code, but if there are no issues with the code and it simply does not work, it is a lot harder to try and fix bugs. I found this really challenging and I believed that this to be something that motivated me to master the php.

I found that by using examples of php code and spending time creating practise sites, it allowed me to get my head round how the code was working, the purpose of variables. It meant that when the module was nearing an end, I started to feel more confident with the php and what each individual element of the code was doing. A stand out point in my development is when worked out how to echo to another page if the user had not entered anything that matched the contents of the table from the search bar.

Problems I had were that when I was unsure of something I was really stuck, because I literally wouldn’t have a clue as to what to do. Google searching the issue and looking on w3 schools and  the php website really helped. In a way it was more of a blessing in disguise because it meant I had to go and research the topic myself which mean’t i learnt the topic with much greater ease.

If I were to do this module again, I would spend a little more time developing the gallery page as it would really help the overall feel of the page, rather than being simple squares, create a better layout to create interest for the user, maybe even using a circles. I would like to redesign the top banner to be full width of the page and make the site fully responsive to create a better experience for the user.

Wireframes

Wireframes are an integral part of the design stage, these are all of the wirefreames that I created for the php based site. Take into consideration that because the designs were created for a php based site, the functionality came before design, therefore the design is nice and simple to allow me to spend the majority of my time spent coding on the technical php.

Learning PHP

The main part of this assignment was learning what the different code did. Understanding the different methods of bringing data from a table and presenting it properly on thew website was the main thing that I learnt.

Screen Shot 2015-05-25 at 12.14.28
My first attempt at a thematic php website was the following website.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/tropicalfish01/retrievetropicalfish01.php
This was a template of a table that contained the content

Screen Shot 2015-05-25 at 12.24.37
My next attempt was to use the previous method but lay the content out slightly differently.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/tropicalfish02/retrievetropicalfish02.php
You can see that I have removed the content from the table and gave it an improved structure using css.

Screen Shot 2015-05-25 at 12.26.28
My final attempt at the php Gallery feature was this one.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/disney/disney.php
I was able to set up a database by myself and include the content entirely myself meaning I have at this point a much better understanding how the php works.

Screen Shot 2015-05-25 at 12.26.52
The next stage was to code and understand how a search function works, this was an easier concept for me to grasp.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/animal/logo-search-01.php
You can see here a very basic example of a search function that I built.

Initial design research

I am creating a photo portfolio of pictures taken in Paris, I thought it would be valuable to examine a few examples of current designs online. Since we Have to have a search feature. I think that the site should be more like a search engine. The landing page is a simple image of Paris with the search bar on top allowing the user to search. Once the user has searched it will bring the relevant results back with the option to search again. Here are a couple examples of the landing pages for search engines, bear in mind that I am not providing any other content than the image so the more content heavy pages will be irrelevant so I will be looking at the most simple ones.

1 2
Firstly an clean simple landing page is vital, as you can see above from Bing and Google, there is the search box and not much else, apart from Bing strands out a little more as it has an image behind it, this works well and I think I should use this in the design I make.

http://pollenlondon.com/carine-marque/

Have a brilliantly designed homepage, it combines an image and a white box with the title and the category of the industry that they work within. This could work really well with the search bar for the Paris site. Since Paris is seen as luxury, romantic place to be, it would work well to market this site as a more luxury service, and this has been achieved well through Pollen Londons’ website.

3 4

Flickr has an unusual way of presenting the images, just by using a grid where the images are only aligned with vertical size, it makes for an interesting format.

5

Since I am only placing ten images on thew site, there is only going to be a small return for any searches conducted. Therefore, I have found the design of pocketsquaredesign.net to be quite relevant to mine, they have created large views of the images, with text above to describe it, I think this would work really well in my design.

6 7

Choosing the Images for my php based site.

Since I am creating a site that is thematic of Paris, I have selected 10 of the images of around the area that show off the area. I have tried to select images of architecture, food and other things I consider to be relevant. I think it is important to allow the user to search for the images in their own way, as google shows in its adwords keyword planner there are many different ways users search for the same thing. See below the many different searches carried out by users for a paris holiday.

Therefore, because the english language is so vast, I think it is vital to correctly tag my images for the user to find the relevant content. That is why in each image I have searched google keywords for the most relevant words and used them to tag my images, this will mean when I make my php database table I will have searchable words that will bring up content.

12

The first image I have chosen is a an amazing image of a really large sunset in the centre of paris.
I used google keywords to help me pick my tags, I searched for “Sunset”.

2a

The tags I will use are;
– sunset
– sunrise
– street
– tourists
– visitor
– holiday
– paris

3
The next image I have chosen is of the Gard Dy Nord, the main train station in Paris that connects England to France through Eurostar. I used google keywords to help me pick my tags, I searched for “Gard Dy Nord” and “Eurostar”.

3a

3b

The tags I will use are;
– hotel gare
– station paris
– hostels
– eurostar
– train station
– london
– paris

4
This image is of the famous Eiffel Tower, the most iconic part of Paris, this is an important image to include. I searched for “Eiffel Tower”
4b
The tags I will use are;
– eiffel tower
– restaurant
– dinner
– tour
– night
– monument
– lights
– 58 eiffel

5
This image is rarely visited by tourists and is the central business district of Paris. I searched for “La Defense”.
5a

The tags I will use are;
– grande arche
– arc de la defense
– fraser suites
– mercure
– architecture
– monument

6

This image is iconic Paris, A shot of the louvre from a distance captures the grand scale of the tourism spot. I searched for “Louvre”.

6a

The tags I will use are;
– louvre museum
– mona lisa
– le louvre
– monument

7

This image is within the Louvre, a shot of the crowd surrounding the Mona Lisa. I searched for “Mona Lisa” and used the same tags as the louvre image above.

7a

The tags I will use are;
– louvre museum
– mona lisa
– le louvre
– portrait
– hotel florence
– 1963
– monument

8

This is an image of the Arc de Triomphe, a marvellous tourist site in Paris, I searched for “Arc de Triomphe”.

8a

The tags I will use are;
– monument
– waldorf
– arc de triomphe

9

This image is of the Citroen Champs-Elysees showroom store that features a slide down the middle. I searched for “Citroen” and “Champs-Elysees”.

9a

The tags I will use are;
– monument
– citreon
– c3
– avenue de champs
– champs-elysees

10

This is an image of frogs legs that I was served in a french restaurant. I searched for “Frogs legs”.

The tags I will use are;
– restaurant
– frogs legs
– cuisine
– les cuisses de grenouilles

11

The last image I have chosen is one of snails being served in a restaurant in Paris. I have searched for “snails”.

11a

The tags I will use are;
– snails
– french
– dishes
– restaurant
– escargot

Understanding dynamic content

Dynamic content is what I am going to use for my thematic online photo gallery. It basically means a website that regular updates it’s content, there are many examples of this on the web. Since dynamic content can include text, images, sound and video I can show examples of each different version.

It has been used here by YouTube to create a personal experience of videos that you may be interested in based upon history and likes;
1
It is also used to produce results to a user specified search term such as “uptown funk bruno mars”;
2

It is also used by social media platforms to create a personalised experience with tailored content. You can see examples of this here;
3

References;
http://www.webopedia.com/TERM/D/dynamic_content.html
http://www.pardot.com/marketing-automation/dynamic-content-marketings-secret-weapon/
http://help.exacttarget.com/en/documentation/exacttarget/content/dynamic_content/