Voyage - feedback stage 3

I showed the third draft website to my lecturer, David, today and he told me the overall design was fine but I should add an extra index page for accessibility so browsers without javascript enabled can view some content. There is a line of code which checks if the browser supports javascript and either diverts it to a different page with full js content if enabled or stays on the same plain index page if not enabled. Here is the code I used:

<script language="javascript">
document.location.replace("index2.html");
</script>

Index is my plain splash screen with no js content and index2 is the full version with js. The plain index page is basically just the text that is contained within the map page and nothing else.

Here is a screen shot of the plain index page;

At this stage I have shown my design to all my class mates and lecturers. I received some very helpful feedback and implemented more or less everything that was suggested. I am confident that this 4th draft website will be the final version and I look forward to the presentation in a week.

Voyage - Feedback Stage 2

Today I showed my Second draft voyage website to my lecturer, Giselle, and got some useful feedback with tips on how I can improve my design. Here are the points that were raised:

- Put a space around the text in the header.
- Make the 'click on the map to enter' text in the header a different colour to make it stand out more.
- Make the text on the map page larger.
- Make city names standout more, try a different coloured text.
- Make Wikipedia links more visible, try underlining.

I implemented all these changes during my seminar this morning and also tidied my file structure by placing all images within my images folder.

Week 6 Task: Design a marketing strategy for your personal website

I have had my own website set up since November 2011 under the domain name http://nimahedayati.com. The site has evolved from being a simple portal to share my music to a full online portfolio showcasing all my multimedia work. The website was most recently updated earlier this month in preparation for the hand in of my Context 2 portfolio assignment.

My website currently serves the purpose of sharing my artwork and selling myself as a multimedia practitioner; this is to prepare me for placements and eventually full time employment after completing my degree.

Since the website launched I have thought of ways to promote it; this includes linking it from other existing social networking sites such as Facebook, Twitter and Reverbnation. I have also made sure that my page titles include my name and had a simple domain name which helps bring my site to the top of the list when searching my name in Google. Today I have set up an account with Google Analytics and copied a bit of javascript onto each of my website pages to allow Google to track the number of visits I get and the demographic of my visitors. Here is the overview page on my analytics account:

At the moment the stats all say zero visits as I have just set up the tracker. I will visit this again every few weeks and hopefully see detailed reports of visits made to my website.

As well as promoting my website I am thinking of ways of making my name well known online as this will generate more Google searches and ultimately more visits to my website. One way I am doing this is through a new volunteer journalism job I have just started. I have started writing album reviews for a website called Metal Shock Finland which primarily reviews albums for worldwide metal bands. My first review has been published and can found at this location:

http://metalshockfinland.com/2012/11/21/review-hologram-earth-ep-2012/

The good thing about this job is that it gives me an opportunity to network and build friendships with musicians and Metal Shock staff worldwide which in the long term will help me build a reputation in media and hopefully find clients for web design work.

At this moment I believe my unique selling point is my dedication to promotion of music through blogs and effective web design. My target audience is anyone who shares my interest in music and wants to promote their work online; in the future I hope to expand my audience to all business sectors.

I expect my website and overall marketing strategy to evolve and improve as my skills improve in web design and journalism.

Voyage Feedback Stage 1

I showed my first draft website to a few classmates and my lecturer and got some very useful feedback. As I already suspected I was told that the index page doesn't look very good but the main map page got some good reviews and seems to be good enough to keep as it is. I was told the button image looks very outdated and the header logo doesn't quite fit in with the overall design of the site. My lecturer specifically told me that I should replace the images on the index page with one background image of my world map and create a transition effect between this page and the map page. After the lecture I spent some time resolving these issues as best I could. Here are the steps I took:

• I created a new index page and used a reduced size world map as the background image; this image was made to cover the screen using css.
• I created a new header logo with text underneath. I added a line of css3 code to the word 'Voyage' to create a drop shadow and also a box shadow around the wrapper that surrounded the header.
• I kept the slideshow but reduced the size of the images to make it fit to the right of the logo within the header; the text was floated left and the slideshow was floated right to create this alignment.
• I added a new jquery routine to both of my pages which added a cross disolve between each page; I am very happy with this effect as it looks quite slick. I learned how to do this through an online tutorial which can be found at http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

  Here are the three javascript routines I have used on my website so far:

1. Jquery cross-fading slideshow on index page.
2. Jquery cross disolve page transition on index and map pages.
3. Jquery image map scrolling on map page.

Here is a screen shot of the new index page:

At this stage I am happy with the outcome of this project but I will again seek more feedback from other lecturer's and make any necessary changes.

Voyage Project Development Stage

After extensive online research into jquery I have managed to put together my Voyage idea in Dreamweaver. The website does exactly what I intended it to do but in a very simple yet interactive way.

Here are screen shots of the two main pages of my website:

The image above is my index page which acts as an introductory splash screen. I have incorporated two separate javascript elements into this page; one is the slideshow and the second is the rollover button. The slideshow is a simple jquery script which enabled me to layer 5 images of the same size on top of each other on the z axis and then cross-fade between these images every 2 seconds. The rollover button is a simple javascript element which switches the image from a red button to a green button when the mouse hovers over it.

The image above is my map page which is the main section of my website. Instead of having 5 separate html pages for each city, I have created one page with a separate div area for each city; as you click on the city name on the navigation or click on the red location pointers the screen scrolls across to the selected area and brings up a text box with a little information about each city. At the bottom of each text box there is also a link to a Wikipedia page with extensive information about that city.

Unfortunately my knowledge of javascript is very limited at the moment and it would have been impossible for me to write a code from scratch that would achieve this effect; therefore I downloaded a jquery plug-in from the following website: http://www.jscraft.net/plugins/craftmap.html

I made adjustments to the code to tailor the website to my own design and content. I changed the navigation list to the specific cities I was using, changed the background image to a large world map image of my own choice, changed the co-ordinates of the city markers and the content within each text box. Finding the exact co-ordinates for each city was the lengthiest process as I had to cross reference with google maps and used trial and error to get the pointers as close to the actual city locations as possible; this was tricky over a map that was 8192 px by 4096 px.

I now have a better understanding of how image mapping and scrolling using jquery works.

Evaluation 

Overall I am very happy with the outcome of this project. I feel my final website conveys my original idea effectively. I will seek feedback from my peers and lecturers before the project deadline and make any necessary changes.

Voyage Project Idea

The above image is a background image I have chosen for my 'Voyage' project. My website will navigate through different areas of the world where I have lived or visited; for each place there will be some text and images to describe the location and why I was there. The five locations I have chosen are: Zahedan, Iran; Nottingham, England; Haifa, Israel; Perth, Australia and Florida, USA.

This will be a one page layout with each location being an area (div) within this background world image; as you click on each location the page will scroll to the location, zoom in and bring up some information about that place. I am currently learning how to create the jquery code to achieve this in my Tuesday seminars with David.

I hope to create a wire-frame of the website in the next few days and then will start putting all the text and images together. Watch this space for further development on this project.