Category Archives: All

WordPress

I have been planning on installing WordPress.org  on the same server as the web app, as an exercise, but I am also considering using it instead of WordPress.com, as there is much greater functionality and access to the sites code.  Today I finally installed it.  I edited the wp-config.php file with my database connection information and added authentication unique keys and salts, then copied the files to the server using Filezilla (FTP).  The installation seemed to go well, I received my email from WordPress saying successful installation and all the new tables were installed in my database, but when I browse to the site, the information is there but formatted incorrectly and I cant login.  I will continue to look into this, as I am determined to get it to work?

Advertisements

Web App Conclusions

In this conclusion I will look at what I may do differently next time and what I think went well .

– I would get my own hosting instead of testing locally, as on several occasions it worked on my local machine but not on the server.  I think this may have been because of different php versions?  I am planning to get the free GitHub education package.

– Test the whole site more thoroughly sooner, as some of the issues we are experiencing are things that were working, but now have glitches (which we are still hoping to fix before we hand in our assignment).

– Both Chris and myself commented the code quite a lot which made it easier when looking at each others code.  This is definitely something I will continue to do.

–  I have leant a lot during this process and feel that if I were to make another site using PHP, HTML, CSS and MySQL, I would be much more confident.

– I found the PHP hardest to grasp in this process and have leant a lot by actually making a web app.

–  I found some aspects of the process quite gratifying, such as when I managed to complete the form with all the features working and when I was successful in creating the homes listed in the last month feature.

Overview of Almost Finished Web App

As we approach the deadline Chris and myself are franticly trying to work out some bugs in the site, the worst being the failed login message appearing on the wrong page, it sounds a simple fix but is proving elusive?

The main features our web app has are:-

– User Sign up
– User Login / Log out
– When not logged in the menu will have a sign up button
– When logged in the sign up button will change to an add property button, allowing the user access to the form.
– A form to add a property – In the form the user can input their property details and upload an image.  If a field is not filled in the form will not be submitted.
– In the menu the user can navigate to home, about us, help, our wiki and sign up / add property.
– The properties can be browsed on the index page without logging in.
– Properties can be sorted by location and new / old descending order.
– Their is a note of how many homes have been listed in the last month.
– Their are messages informing the user, such as successful / unsuccessful login, successful / unsuccessful form submission

 

home

Index.php

 

Net Neutrality

BBC News Technology (2014) using the analogy of net neutrality as a train, suggests that all the passengers (data) would be treated equally and that  there would be no extra charges for those who can pay and continuing the analogy suggests that without net neutrality it would be like first and second class on trains. It is also suggested that ISP’s argue that it is inevitable in today’s net world that there will be a tiered internet with a fast lane. BBC News Technology (2014) also says net neutrality “enshrines the whole ethos of an open internet, free from corporate control.”

According to The white house (2015) net neutrality “says that an entrepreneur’s fledgling company should have the same chance to succeed as established corporations, and that access to a high school student’s blog shouldn’t be unfairly slowed down to make way for advertisers with more money”.  This demonstrates that without net neutrality if you don’t wont to be slowed down you will have to pay more or be penalised.

references

BBC News Technology, 2014. Net neutrality – should you care about it? [online]. BBC News. Available from: http://www.bbc.co.uk/news/technology-27397857 [Accessed 18 April 2015].

The white house, 2015. This is net neutrality: [online]. The white house. Available from: https://www.whitehouse.gov/net-neutrality [Accessed 18 April 2015].

MySQL Database

Here is an example of our database tables.  There are two tables posts and users, which contain the users login details and the information input from the form (posts).  It took a while to populate, this was one of the things Chris and I did over the Easter break.

The posts table contains the data input in the form as well as the id of the user and the id of the listing.  It has the following columns, id, user id (who listed it), title, price, location, type, bedroom number, photo (name), photo path, description and the date and time the listing was added.

The posts table

posts

 

The users table contains the users details and login information that was input when they signed up and has the following columns, id, username, password, first name, last name and email address.

The users table

users

House-card-info Page

House-card-info is the page you see if you click on the image or more info link on one of the house cards Chris made for the index page.  I created the info page to expand what you can see such as the description and also to have the option to click on the image and view it full size.  First I made the images clickable on the original house cards by adding this code.(ignore pre tags).

<pre><a href=”house-card-info.php?id=<?php echo $row[“id”];?>”>
<img style=”width: 290px; height: 230px; float:left;” alt=”Oops the image is missing!” src=”<?php echo $row[“house_photo_path”]; ?> “>
</a></pre>

This code takes the id of the user and puts it in the url, resizes the image on that page and go’s to the house card info page.  For consistency the info page has a similar look to the house cards but has the description in it.

The house card info page gets the user id, runs a query and displays the results with a clickable image to see the image full size.  The most difficult part of creating this page was working with the id.  The page was made easier to create using some of the css classes Chris made for the original house cards, he also gave me a hand with the css as I had a bit of trouble aligning the fields.

 

The code for house-card-info.php

<pre>
<?php
require_once(“../include/session.php”);
require_once(“../include/connect.php”);
include_once(“../include/templates/header.php”);
include_once(“../include/templates/menuheader.php”);
require_once(“../include/house-card-sql.php”);
?>

<?php
/* Get house-card id and display relevant data */
$id = $_GET[“id”];

$sql = “SELECT * FROM posts Where id=’$id'”;
$result = mysqli_query($connect, $sql);
$value = mysqli_fetch_object($result);

/* set variables */
$user_id = $value->user_id;
$date_added = $value->date_added;
$house_photo = $value->house_photo;
$house_price = $value->house_price;
$house_title = $value->house_title;
$house_location = $value->house_location;
$house_type = $value->house_type;
$house_bedroomnumber = $value->house_bedroomnumber;
$house_description = $value->house_description;
$house_photo_path = $value->house_photo_path;
?>

<div class=”house-card2″>
<!– echo fetched data and display in house card divs –>
<div class=”house-image”>
<a href=”<?php echo $house_photo_path; ?>”>

<img style=”width: 290px; height: 230; float:left;” alt=”OOPS the Image is Missing” src=”<?php echo $house_photo_path; ?>”> </a>

<div class=”user-id-box”>
User ID: <?php echo $user_id; ?>
Date added:<?php echo $date_added; ?>
</div>

<div class=”house-price”>
£ &nbsp;<?php echo $house_price; ?>
</div>

<div class=”house-location”>
<?php echo $house_location; ?>
</div>

<div class=”house-title”>
<?php echo $house_title; ?>
</div>

<div class=”house-type”>
House Type: <?php echo $house_type; ?>
</div>

<div class=”house-bedroomnumber”>
Number of Bedrooms: <?php echo $house_bedroomnumber; ?>
</div>

</div>

<div class=”house-description”>
<?php echo $house_description; ?>
</div>
</div>
</pre>

Number of Listings in the Last Month Feature

I decided that it would be a great feature if the web app could display how many homes had been listed in the last month (30 days) from the current date.  So after a late night, for such a small amount of code, I managed to add this feature. One of the reasons it took so long was that I had trouble working out if it was the php or the query that was stopping it from working.  I resolved this by running the query from within phpmyadmin (sql tab), which showed me the query was not working, as it will report an error if the query is not valid.  After several attempts I got the query to work and with a few small tweaks to the php it worked perfectly.  I was quite surprised that I did not come across testing querys this way online?

The query uses the date in the table (input from the form) to identify listings from the last thirty days.  Its quite a simple piece of code really, but was very satisfying to see it working in the web app and it demonstrates using data from the database that is automatically updated.

This image shows it working on the site.

2Capture

This is the code (it resides in menuheader.php so is on every page)

<pre>

<?php //Displays how many properties have been listed in the database in the last 30 days.
$q = “SELECT `date_added` FROM `posts` where `date_added` < NOW()-30”;

$month = mysqli_query($connect, $q);

$num_rows = $month->num_rows;

echo $num_rows;
echo “&nbsp Homes listed in the last month”;
?>

</pre>

Finished Form

We assigned tasks that needed to be done for our web app, the form was one that I did myself and was quite a challenge.  The form was made using HTML, CSS, PHP and MySQL,, I have included the code that relates to the form below.  I tried to avoid screen shots of code, however when I used the <pre> tags in the text editor it did some very strange things, so I have pasted it inside the post.

The form consists of four main files:-

form.php – The page displayed in the browser which contains the actual form code, including the drop down menus, we decided to have drop downs because it means the data is consistant in the database, so if it is searched for it wont omit data because of typos.  If the price field contains anything other than numbers the form will not submit.  The box the form resides in was made using a css class.

add_property-sql.php – Contains the MySQL query and defines the variables, including error variables to display if a field is empty.  If a field is empty the form will not be submitted and the relevant errors displayed.  When the form is successfully submitted the query also stores the current users id in the table with the rest of the form data.  The users id is stored so the user who uploaded the property listing is identified, the database also stores an id for the listing itself.  This file also includes the code to get the date and time, defining the $date_added variable so the date and time is added to the table meaning the results can be sorted by date.

upload.php – Contains the code for uploading the images from the form to the images folder on the server. It also defines the $house_photo_path variable so the path is inserted into the database with the rest of the information in the form.  This is because the house cards look in the database to find the location of the image to display.  I had great difficulty in getting the images to be put into the images folder when the form was submitted, which turned out to be settings on the server which are now resolved.  These were apache settings and not php, before I was told it was apache, I determined it was not PHP by creating ini.php which is simply <pre><?php phpinfo() ?></pre>.  This page can be browsed to and displays all the PHP settings including the version.  I also tried changing the permissions of the folder to 777 but to no avail.  In the code I have left in some commented out code which makes the images directory if it does not exist, as this is what finally led me to conclude it was not the code.

congrats.php – If the form has been submitted successfully the user is redirected to this page, which is basically the index page with the message ” Congratulation’s, You’ve successfully added a property!” in large letters.  I made this page so you user is aware the form was submitted successfully and to take them back to the home page to browse if they wish.

This is what the form looks like on the site.

Capture

 

This is the code for form.php

<pre>
<?php
require_once(“../include/session.php”);
require_once(“../include/connect.php”);
include_once(“../include/templates/header.php”);
include_once(“../include/templates/menuheader.php”);
include(“../include/add_property-sql.php”);   //SQL for this form
?>

<div class=”container”>

<div class=”form-box”>
<!– Form for adding a property. Reports an error if fields are empty. –>

<h2>Create Your Listing</h2>
<p><span class=”error”>* required field.</span></p>
<form enctype=”multipart/form-data” action=”form.php” method=”post”> <!– ‘action’ = where the form will be processed –>

Listing Title: <input type=”text” name=”house_title” value=”<?php if(isset($house_title)) {echo $house_title;}?>”>
<span class=”error”>*<?php if(isset($titleerr)) {echo $titleerr;}?></span>

<br><br>
<!– ‘type=”number” – only numbers allowed in field –>
Guide Price: <input type=”number” name=”house_price” value=”<?php if(isset($house_price)) {echo $house_price;}?>”>
<span class=”error”>*<?php if(isset($priceerr)) {echo $priceerr;}?></span>

<br><br>
Location: <select name=”house_location” value=”<?php if(isset($house_location)) {echo $house_location;}?>”>
<option value=””>–Select–</option> <!– variable value set to 0 so is seen as empty –>
<option>Bournemouth Centre</option>
<option>Winton</option>
<option>Boscombe</option>
<option>Kinson</option>
<option>Throop</option>
<option>Wallisdown</option>
<option>Southnourne</option>
<option>Iford</option>
<option>Christchurch</option>
<option>Westbourne</option>
<option>Parkstone</option>
<option>Northbourne</option>
</select><span class=”error”>*<?php if(isset($locationerr)) {echo $locationerr;}?></span>
<br><br>

Property Type: <select name=”house_type” value=”<?php if(isset($house_type)) {echo $house_type;}?>”>

<option value=””>–Select–</option>
<option>House</option>
<option>Flat/Apartment</option>
<option>Bungalow</option>
<option>Commercial</option>
</select><span class=”error”>*<?php if(isset($typeerr)) {echo $typeerr;}?></span>

<br><br>
Number of bedrooms: <select name=”house_bedroomnumber” value=”<?php if(isset($house_bedroomnumber))
{echo $house_bedroomnumber;}?>”>
<!– values given to options so database columns will only have numbers –>
<option value=””>–Select–</option>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
<option value=”8″>8</option>
<option value=”9″>More than 8</option>
</select><span class=”error”>*<?php if(isset($numbererr)) {echo $numbererr;}?></span>

<br><br>
Add an image: <input type=”file” name=”house_photo” id=”fileToUpload” value=”<?php if(isset($house_photo)) {echo $house_photo;}?>”>
<span class=”error”>*<?php if(isset($photoerr)) {echo $photoerr;}?></span>

<br><br>
<!– text area creates a larger text box to fit description in –>
Full Description:
<br><br>
<textarea name=”house_description” rows=”5″ cols=”40″ value=”<?php if(isset($house_description))
{echo $house_description;}?>”></textarea>
<span class=”error”>*<?php if(isset($descriptionerr)) {echo $descriptionerr;}?></span>

<br><br>
<input type=”submit” name=”add_property” value=”Submit Property” />
</form>
</div>
</div>

<!– Begin Footer –>
<?php include_once(“../include/templates/footer.php”); ?>
<!– End Footer –>
</pre>

 

This is the code for add_property-sql.php

<pre>
<?php   // If property is submitted run the following code
if(isset($_POST[“add_property”])) {
$house_title = ucfirst($_POST[“house_title”]); // Insert each field into the database with upper case first letter (ucfirst).  Each variable is inserted into the Database using $query
$house_price = ($_POST[“house_price”]);
$house_location = ($_POST[“house_location”]);
$house_type = ($_POST[“house_type”]);
$house_bedroomnumber = ($_POST[“house_bedroomnumber”]);
$house_description = ucfirst($_POST[“house_description”]);
} else {
$house_title = “”;         // Leave each field empty
$house_price = “”;
$house_location = “”;
$house_type =””;
$house_bedroomnumber = “”;
$house_photo = “”;
$house_photo_path = “”;
$house_description =””;
}
?>

<?php include(“../include/upload.php”); ?> <!– Include image upload abilty –>

<?php
date_default_timezone_set(“Europe/London”); /* set timezone and date format for database entry */
$date_added = date(“Y-m-d H:i:s”);
?>

<?php     // Add user’s property to database and display on website
if(isset($_POST[“add_property”])) {   // If post has been submitted and there are any empty fields, display an error message
if(empty($house_title)) {
$titleerr  = “You’ve forgotten to add a house title!”;
}
if(empty($house_price)) {
$priceerr = “You’ve forgotten to add a house price!”;
}
if(empty($house_location)) {
$locationerr = “You’ve forgotten to add a house location!”;
}
if(empty($house_type)) {
$typeerr = “You’ve forgotten to add a house type!”;
}
if(empty($house_bedroomnumber)) {
$numbererr = “You’ve forgotten to add the number of bedrooms!”;
}
if(empty($house_photo)) {
$photoerr = “You’ve forgotten to add a house photo!”;
}
if(empty($house_description)) {
$descriptionerr = “Remember to add a house description!”;
} else {

/* If all field are populated run sql query to insert the data */
$query = “INSERT INTO posts (user_id, house_title, house_price, house_location, house_type, house_bedroomnumber, house_photo, house_photo_path, house_description, date_added) VALUES (‘{$_SESSION[“id”]}’,'{$house_title}’, ‘{$house_price}’, ‘{$house_location}’, ‘{$house_type}’, ‘{$house_bedroomnumber}’, ‘{$house_photo}’,'{$house_photo_path}’,'{$house_description}’,'{$date_added}’)”;

$result = mysqli_query($connect, $query);
if($result) {
header(‘Location: congrats.php’);
}
}
}
?>

<?php /* echo for testing the form

echo $house_title;
echo “&nbsp &nbsp”;
echo $house_price;
echo “&nbsp &nbsp”;
echo $house_location;
echo “&nbsp &nbsp”;
echo $house_type;
echo “&nbsp &nbsp”;
echo $house_bedroomnumber;
echo “&nbsp &nbsp”;
echo $house_photo;
echo “&nbsp &nbsp”;
echo $house_description;
echo “&nbsp &nbsp”;
*/
?>
</pre>

This is the code for upload.php

<pre>
<?php
if(isset($_POST[‘add_property’])) //If the add property form is submitted, the image is uploaded to the images folder and defines the path of the image
{
$filetmp = $_FILES[“house_photo”][“tmp_name”];
$house_photo = $_FILES[“house_photo”][“name”];
$house_photo_path = “images/”.$house_photo;

/*    if (!is_dir(‘images/’.$house_photo)) {    // make the directory if it does not already exist
mkdir(‘images/’.$house_photo);           //This helped to establish dakar was the reason image upload failed
} */

move_uploaded_file($filetmp,$house_photo_path);
}
?>
</pre>

MAMP or XAMPP

Due to currently not being able to access the server for testing I have decided to install software that will enable me to test locally using php and MySQL.  I will be using a mac and have narrowed my search down to MAMP and XAMPP.

Both of these software’s are free.  MAMP is a combination of free software and is released under the GNU General Public licence and contains Apache which is open source.  XAMPP  is an open source package, which also contains Apache.

It was a close call but after looking at forums and reading various reviews of each of these software’s, I have decided to go with MAMP on the mac as it seems to be the least fuss to install and straightforward to use.  I partly made this decision based on real users opinions.

https://www.mamp.info/en/

https://www.apachefriends.org/index.html

First Git Upload

Today I made the first contribution of code to my groups Git repository.  First I uploaded the file structure for the site , such as the includes, public, css and images folders and populated them with files, I did this so we would have a solid organised base for our app.  I also uploaded the Header, Navigation and logo I created.  The header and navigation were based on what Chris and myself did in our last meeting.  This was the first time I have uploaded files to Git other than editing  the readme file using GitHub.  I found it a little more complex than I first though it may be, as I quickly found out that GitHub is quite limited compared to Git and I had to learn how to use git before I could upload my work.

GitHub

 Our Repository in GitHub.com

Property web app so far, I created this as a starting point.

Screen Shot 2015-03-09 at 20.46.05

New Wire frame

The new wire frame below was created collaboratively by my group when we met up during reading week.  Being a wire frame it is subject to change during production, however we spent quite a while considering things like how it should look, features and were they should be placed, so it should be a good base.

index

Index Page

signup

Sign Up Page

login

Login Page

loggedin

Logged in page

results

Results page

aboutus

About page

help

Help page

Final Pre-Production Plan – Property Selling site

As previously mentioned we are going to develop a property selling web app.  We have discussed this in detail and have decided this is the best choice for us.. This decision was based on meeting the criteria of the brief and our current skill level.  I also liked the idea because once we have made the web app, time permitting we can be more adventurous with it by adding more complexity to the back-end.

Key information about the web app

  • Centralised MySQL database.
  • Created using HTML, PHP and CSS.
  • The site will be selling properties and targeted specifically at Bournemouth.
  • Users must sign up / log in to add a property to the site or to edit one of their current  property’s.
  • Users do not need to be logged in to view property’s.
  • There will be filtering options such as, area of Bournemouth, price, date added and number of beds.
  • There will also be sort options such as, most recent, lowest / highest price.
  • The site will be easy to navigate, by having an uncomplicated design.
  • On the results page the properties will be displayed in coloured boxes to aid simple
    viewing by separating them.
  • There will be the ability for the viewers to communicate with the sellers from within the site.

Property Site Research

Now that we are definitely gong ahead with a property web app I have done some research to give me some ideas.

The site I liked best was Right Move, This site has a simple home page with the main feature being the search box at the top of the page.  This appears to be so users can quickly search for property to buy or rent without getting bogged down by other information.  If users want to sign in or register there is just a small link at the top, which is obvious if you look for it but doesn’t distract from the main feature being the search.

right move

http://www.rightmove.co.uk/

Another site I looked at was Zoopla, this site has a very different feel to Right Move but maintains the concept of having the search the dominant feature.  This appears to be a trend in sites that offer services, I would suggest that it is because the purpose of the site is to help people find a property and advertisers would want this to be the main feature.  I also noted that this site also has a deliberately clean feel to it, in that the home page is not cluttered and everything is easy to find.

zoopla

http://www.zoopla.co.uk/

Although these are not the only sites I looked at they seem to optimise what I would want in such a site.

Wiki

My group now has our own DokuWiki on the University servers, this was setup by Charlotte but Chris and myself have access to use it.  We will be updating the wiki with information about our group meetings, group research and the progress of our web app.  As a result I will be posting less detail regarding group meetings to this blog.

 

 

Change of Theme -Dating to Property

After discussing the dating site further we decided it was getting more and more complex regarding the back-end and ultimately to change to a less complex theme.  The decision was made as a team to change to a property selling site.

This decision was based on the following:

  • If we are going to change the theme, now is the time as we are not yet committed.
  • The team as a whole felt confident with the property site.
  • We may have been over reaching in back-end complexity for our first attempt?
  • The property site requires less tables which makes it less complex and simplify s linking them with PHP.
  • The property site relates more closely to what we have learnt so far.

Although this does mean we will be doing more work with regard to planning, I think this is part of working collaboratively and am pleased we are able to discuss and work things out as team.

ERD (Entity Relationship Diagram)

ERD stands for Entity Relationship Diagram and shows “the relationships of entity sets stored in a database. An entity in this context is a component of data. In other words, ER diagrams illustrate the logical structure of databases” (Smartdraw 2015).

This is the resulting ERD from our group meeting, which Chris has put into an image.  It took longer than I anticipated as there was a lot to consider when deciding what needed to have its own table and which values to use.

erd

 

References

Smartdraw, 2015.  Entity Relationship Diagram [online]. Smartdraw. Available from: http://www.smartdraw.com/entity-relationship-diagram [Accessed 03 March 2015].

Group Meeting 3

We had another group meeting today.

  • We all brought in our own wire frame designs for the web app, discussed them and started to design a wire frame to put into production, based on our combined thoughts and ideas.  We have put a lot of thought into the design so far in order to have a solid base to start with.
  • We also decided to incorporate our meet the team exercise into the about page of the web app.
  • The decision to make the dating web app more niche was also agreed upon, in order to refine our target audience.  It will now most likely be related to Bournemouth and students.
  • Based on my own research into current popular dating sites I suggested that it may be worth considering having a separate index page, this was received well but we will make a final decision in our next meeting.
  • We also discussed other decisions that need to be made, such as work that each of us will be assigned.
  • During the meeting we also started to create an ERD (Entity Relationship Diagram) by noting down all the data that would need to be put into the database and the relationship between the data, paying particular attention to items that would need to be in drop down menus, as they would need separate tables.
  • Decided make a wiki instead of a blog, but have it accessible from the site we create.

I believe that we are working well together, as we are all contributing, making time to meet up and prepared to compromise if necessary.

My Wire Frame Designs

I looked at various dating sites looking for common trends and inspiration.  Some of these sites include eHarmony, Match.com, Elite, Zoosk, Uniform dating, mature dating and POF.  The most common trend in the design of the sites was that they had no user profiles on the home page and that it was there almost entirely to get people to sign up, containing not much more than  sign up form.  I also noted that it was common to use a large image and that the Headers and footers were larger than when logged in.  My theory for this design is that it looks cleaner (less complex) with the focus on signing up and that people are now freer with their details than in the past, so they can get away with this strategy.  Even when people don’t use the site much after signing up, the site has obtained their details and can promote offers to them.  Another observation was that it is rare to see the whole form, usually they try to entice people by appearing to only require a few details, but ask for more after they click next.

An example of this is eHarmony.  I found it interesting that with this particular site, if you refresh the page it loads a different home page.  This could be to keep a fresh image to visitors returning or to test which pages convert to sign ups best.

Capture

http://www.eharmony.co.uk/

Below are my first wire frame ideas.  The first two are for home pages, the third is once logged in, viewing a profile.  As can be seen, I decided to adopt the trend I observed of a simpler homepage for these wire frames.

Picture5
First home page wire frame

Picture6
Alternate home page wire frame

Picture3
Logged in viewing a profile

Post System

Since going to a recent seminar I have decided to standardise certain aspects of my posts and also incorporate some style changes.

Text
* Use bullets points more to simplify posts.
* Sub Headers to make posts easier to read, as people often scan through blog posts.
* Avoid long body’s of text, as this can be unappealing.
* Bold text to highlight important sentences.
* Continue using a sans-serif font, as it is easier to read from the screen.

Images and Video
* The standard size of images and videos will be 660 x 400, which will fill the whole width of the post and enable them to be clearly seen.
* Continue to ensure that the high-resolution version of images is available when an image is clicked on.
* Continue to scan any sketches and avoid phone images.

Categories and Tags
* Continue to use categories to organise the site, but I will start to use tags for thematic content that spans across categories.

Group Meeting 2

In this group meeting we:

  • Finalised the decision to make our web app a dating site.
  • Discussed the design.
  • We also discussed whether to have a blog or a wiki to document our progress.  I thought a wiki best, but Charlotte and Chris thought the blog.  I suggested we consult a lecturer, which was agreed.
  • Agreed to all have wire frame sketches of our own ideas to discuss and compare in the next meeting.

 

 

Meet the Team – Task

The meet the team task was to create a web page that was a bio for each of us.  I believe this was to help with introductions as much as get us started.  Chris was quick to instigate this and requested that myself and Charlotte write and email our pic and bio to him.  He was quick off the mark and created the page shown below.

Once he had shown me the page he created we discussed the format critically, looking at how we could improve upon it.  I made a few suggestions such as having the image at the top of the text, so you can see the person before reading about them, moving the text between the names and the bio’s, as it separated the names from the bio’s and having rounded edges on the boxes for a smoother look.  I also commented on how much I liked the colour scheme and how for a first attempt I was impressed.

Screen Shot 2015-02-16 at 22.22.45 (2)

Group Meeting 1

I have now met my the other members of my team, Chris and Charlotte.

In our first proper meeting we discussed where to start with this assignment and decided to start with the theme of the web app we will make.  I put forward my initial ideas (as mentioned in my first post) and listened to theirs, the result being, that we would make either a job site or a dating site.

This was a slight compromise for me as I was leaning toward creating a house sitting site, however I had no problem with this as I could see the potential to meet the brief and where we could take this idea.

An important step we made in this meeting was to exchange email addresses so we could communicate easily.

Participatory Culture

Participatory culture when referring to the internet could simply be described as web 2.0, it is a culture that has developed of contributing, participating and sharing.  There are many, many different types of sites that encourage this culture, such as Wikipedia and Facebook.  However participatory culture is not limited to just websites, it also encompasses open source software.  I was surprised by how much software I’ve used recently was open source, these include, Firefox, WordPress, PHP, MySQL, Processing, Adobe Brackets, Filezilla and Git.  GNU/Linux is an open source software that interests me as it is an operating system made by users for users, which has led to a lot of different distros, made for different needs and it is free.  Different licensing has also come about with participatory culture, such as creative commons licences.  These allow people to protect their intellectual property while allowing others different levels of freedom to distribute or remix their work, rather than just stating it is copyrighted which is far more restricting.

 

Design for Digital Media Environments

Today I received the brief for a new unit called Design for Digital Media Environments.  For this task I will be collaborating with two other students.  The task is to create a website that is a shared public/social space using HTML 5, CSS, PHP,  JavaScript and MySQL.

Prior to finding out who I will be working with next week, I have decided to start by thinking about possible themes for our website. The site will need to contain a database, login, various sorting options etc.

My initial ideas are: –

  • Car site (listing cars for sale)
  • House sitting site (listings for both home owners and house sitters)
  • Job site (Listing both jobs and people looking for jobs)
  • Shopping site
  • Property rental site

 

 

 

 

 

Almost Complete

My poster is now complete other than a title and a timeline label. The only major change I made that deviated from my final plan was that the whole image has now been rotated to try and give the impression of momentum or movement. I have managed to resist to urge to add extra things like little meteors, in order to stay true to the idea of keeping it simple and uncluttered.
There are some things I would do differently next time. These include analysing the data thoroughly sooner and using the software to flesh out ideas sooner. I would use the software to try my ideas out sooner because although it is was faster for me to do quick sketches of ideas, I think I relied on them too much and seeing it on the screen can sometimes help with eliminating ideas or help to progress them faster. Now that I have gained some experience using Adobe Illustrator in workshops and by myself it should be easier to do this.

Final Changes

I have now reassessed my design and the data I will use and decided to use a different set of data. The data I am going to use is the date meteorites were found and not the date they impacted with the earth. I am also simplifying my design.

Here is a list of changes and new ideas.

  • The timeline is now behind the lines, with the lines touching it and the date of each find shown. The dates are shown so the viewer does not have to work them out, helping with the simplicity.
  • The meteors scattered around the image have been removed because it took the focus away.
  • There was going to be a very large meteor placed close to the viewer, but this may look as if they were viewing the image from the meteor. So I will not be putting it in.
  • There were going to be sparkling stars in the black background but when I created some in illustrator I thought they would clutter the image, so have opted for a simpler starry effect. This will also help to create space around the image helping to portray some vulnerability of another impact.
  • There will no longer be lines intersecting the tails, as in order to simplify the poster I am now only showing location and time.
  • I have chosen to only have the three largest meteors found from each location and only around 5 locations as too many lines will ruin the athletics of the image and make it harder to read.  This also has the benefit of making it easier to have a smaller date range for the timeline.
  • The data I am now using is from http://www.lpi.usra.edu//meteor/metbull.php. I will be using the data from Northwest Africa, South Africa (Angola), Russia, Yemen and Lithuania.
  • I considered having each line a different colour but decided that one colour for each country would make it easier to read.

Creating Final Poster in Illustrator

When it came to creating this poster I started by creating the image of the earth. Originally I used the trace tool in Illustrator to create a vector image and changed the settings until I was satisfied, fortunately I learnt a lot on this in a workshop. However I decided that I would prefer to have an image that was less complex and drew my own by drawing over the traced image, discarding it and adding colour.

nospin_1-lg

Original image from http://www.allthingsnow.com/week/reference/shared/32180280/http-www-esri-com-news-arcuser-0610-graphics-nospin_1-lg-jpg

traced

Image after being traced and edited.

drawn

Drawn image.

The rest of my poster I created using Illustrators tools.