D4DME – Initial Ideas/Research into UGC

Before meeting and discussing with my team mates about what our idea should be I thought I would go with some rough thoughts to offer up as a suggestion. I knew that the website needs to be aimed at a specific target audience and came up with various ideas, all attached to different categories.

I particularly like the babysitting idea under the ‘Services’ category due to the fact that I can’t think of many well known babysitting/childminding websites out there and so we can input unique and different ideas without being influenced at all. The fields I was thinking we could search by would be Name, Location, Price and Availability (part/full time) these would be the columns in the database. I was also thinking once the user has signed up they could upload a photo, short description and their CV.

Below is a brainstorm of the style of websites I had in mind regarding the different categories.

brainstorm of ideas

Advertisements

D4DME – Individual Roles and Team Dynamics

During reading week, our group arranged to meet up to discuss the final idea and we all brought along our individual ideas which we had come to via research into different categories and target audiences. I took along my brainstorm but mostly with my babysitting idea.

We all ‘pitched’ our thoughts and suggestions to what the website could be designed for and these were all the ideas thrown in: Babysitting, Dating, Recipe site, Book reviews, Statistics site. The two top ideas were babysitting and dating. We knew that another group were planning on doing a dating site so we thought that it would be best to go with the Babysitting idea as it’s different and unique and also won’t be compared to other groups with the same idea.

After we had decided on this we discussed which role each person should do and what would maximise the quality and workflow of the project. It was decided that Josh was best at the design and layout of the website, and me and Amy were more confident on the coding so thats how we will continue to work but will aim to try and all pull an equal weight as obviously the coding is more challenging than the design – due to me and Amy not being overly confident with it.

To succeed in all working equal amounts we are going to aim to try and complete the task when we are all together as a group so that we can freely input our different ideas and make the product the best it possibly can be.

D4DME – Project from my POV

In my opinion the project should be created equally between the team members but due to different skills and strengths and weaknesses this is challenging as not everyone is confident in the same areas. I feel that our group can produce an excellent final project, especially with the uncountable amount of tutorials out there that we can use to help us if we are stuck on particular parts of the code. Also other seminar students will hopefully be willing to help us out if they are more confident in the workshops, along with Phil and Kyle. 

I have researched into our final idea of a babysitting advertisement website and have come up with some example websites that already exist which we can gather some inspiration and ideas from. Below are the websites similar to our idea that already are up and running: ex 1

https://www.childcare.co.uk/?gclid=CJbv0Ibr9sQCFa7KtAodv0EA6g

ex2

http://www.findababysitter.com

ex3 

http://www.sitters.co.uk/inmyarea.aspx?gclid=CICOtavr9sQCFQzJtAodnjoA0Q#

The main focus is not on the visuals of the website but the functionality and the core HTML and PHP code which we will create and hopefully be able to run through databases using our servers. Once the website is fully functioning with all the required content we can focus on making the site aesthetically pleasing to its specific target audience. I feel that if we aim to complete the hardest part (PHP) together as soon as possible it will be easier to overcome issues and can get help from Kyle if need be. After that we can spend the remainder of our time making the website look professional.

D4DME – Creation of the ‘Meet the Team’ Page

I took on the role of creating the Meet the Team page as I didn’t want us, as a group, to fall behind other groups and having to catch up. I looked at previous HTML documents we previously worked on in Kyle’s earlier workshops to get a basic structure for the page. Due to all three of us not being confident using HTML we decided to use bootstrap which we touched upon a couple of months ago in a workshop. I watched a few tutorials and got some refresher tips on how it works and began to create the page using this.

Why Bootstrap? You still have to challenge of writing all the HTML code and edit some bits of CSS but its give you the basic structure to a webpage and makes it appear more dynamic and stylish. We all agreed we would continue using bootstrap for the final idea and as I wasn’t super confident with it, it will still be very challenging and we will have to work together to try and figure some coding issues out I am sure.

meet the team code

plain meet the team

I created the majority of the meet the team page as I was forward in researching how to use Bootstrap and the other members were not crystal clear on how to use it. I created a plain basic design so that when we next get together and decide on a final idea we can decide as a group what colour scheme and various buttons we wanted to have. I thought of an idea to put underneath each of our bios which was to link to each of our blogs. This increases the navigation on the page and makes it more personal.

meet the team actual page basic

D4DME – Entity Relationship Diagram (ERD)

Last Tuesday we had a seminar which revolved around Entity Relationship Diagrams (ERD). This is basically a flow-chart diagram which shows the relationships between many entities of a certain database.

An ERD is a conceptual and representational model of data used to represent the entity framework infrastructure.” – http://www.techopedia.com/definition/1200/entity-relationship-diagram-erd

erd explained

http://docs.oracle.com/cd/A87860_01/doc/java.817/a81358/05_deva.gif

Above is an image which explains the various symbols used within ERD’s and I need to become familiar with these so that I can focus my skills on the more complicated parts of the project. In the seminar we began to think what we would need to include in the database design and therefore in our ERD. We looked at a photo sharing website and came up with the following.

photo erd

For our task to complete over the next week, we had to create our own ERD – a recipe website where users upload their recipe title, description and a photo. We had to decide what would need to be included and below is what I came up with.

recipe erd

D4DME – Blog Formatting

In our most recent seminar, we were shown how to make our blogs look professional and more stylish. The majority of our blogs were untidy and all over the place so Garrett went through various ways in which we can make our pages more consistent regarding images, text and tags/categories.

  • Text: The way in which I changed the way I inserted text into the blog post is by trying to keep my blog posts short and sweet but still manage to get straight to the point. Bullet points are a great way to stop yourself from rambling on so I will definitely begin to use more of these.
  • Images: In previous units, I just uploaded images as WordPress decided to size and place them, this proved an issue when trying to fit more than 1 image on one line as they looked uneven and messy. Garrett suggested we create an image template which we import all our images and screenshots into before uploading. I had a play around an decided that a width of 800px was a perfect fit to go in line with my text. I then used the photo editor ‘GIMP’ to change all the photos I had already imported for this unit and it already looks 100x better than before. Here is the template I use.

image template ss

  • Video: A great way of evidencing research is by embedding videos onto our blogs. I discussed one video from YouTube in one of my posts so decided to actually insert the video so that readers can immediately watch the specific video I was discussing.
  • Categories: Since the start of the course I have used various categories but it was made clear in our seminar that these should be limited and there shouldn’t be too many. I had to go back to my few few tasks and categorise them all together as I didn’t grasp the point of categories until the other day. I now know that they should be generic and be able to apply to most tasks that I complete. After sorting through all my posts I managed to narrow down 18 categories to just 9 which makes my blog much more organised and structured.
  • Tags: In previous tasks I refrained from using tags as I thought that they wouldn’t help me/others if I did. It was pointed out in the seminar that tags should be used for thematic content that may run across various categories such as research, planning, internet etc. I went through all previous posts and altered the various tags so that the entire blog is now supporting the same use of categories and tags throughout – increasing consistency.

D4DME – HTML CSS Workshops

So far in our HTML CSS workshops Phil has been recapping the basic do’s and don’t’s and in-particular the positioning of our HTML pages. Below is a rough outline of where we are currently at with HTML knowledge and some examples from my own brackets files.

  • Basic Structure Elements: – HEAD section always comes before the BODY section and they must both have first and last tags (<head></head> <body></body>). The HEAD section can contain title, links, script and style elements. The BODY section contains the main content such as text and images – structured by other tags.

html ss 1

  • Block Elements: – PARAGRAPH (<p></p>) HEADINGS(<h1></h1>…<h6></h6>) PRESERVE (<pre></pre>) INDENTED TEXT (<blockquote></blockquote>) DIVISION (<div></div>) => elements cannot overlap each other.

html ss2

  • Unordered Lists: – (<ul>…</ul>) (<li>…</li>) each item has a bullet point
  • Ordered Lists: – (<ol>…</ol>) (<li>…</li>) each item has a number.

We then moved on to the CSS side of the unit and went through the basics of Cascading Style Sheet.

  • CSS helps convey the meaning within HTML and allows developers to separate the content from the design.
  • There are 3 ways to attach a CSS to a HTML: 1) External Style Sheet (used to control styling on multiple pages). 2) Internal Style Sheet (used to control styling on just one page). 3) Inline Style Sheet (CSS is used directly within the HTML tags).
  • IDs and Classes: IDs (#) are unique and can only be used once on the page. Classes (.) can be used as many times as they are needed. Usually, each HTML page is made up of boxes (DIVS) and each <div> is assigned an ID or an Class.

css ss 1

After we had gone over the basics we moved on the typical layout of a web page and Box Model. This is the idea that the whole page is made up of boxes and you have to figure out how all the boxes will fit into your page in an efficient way taking into consideration the margin, border, padding and content. html pp2

After this we then moved on to creating a rough web page with a container, banner, navigation, content and footer. Below is my outcome along with the code used to make it happen.

html screenshot

In the most recent workshop, we went through Positioning in more detail and Wireframes. We learnt that User Experience is built from various layers; Surface, Skeleton, Structure, Scope and Strategy.

  • Surface Layer: describes finished visual design aspects.
  • Skeleton Layer: describes screen layout and the functional compartments in the screen.
  • Structure: defines navigation from place to place around the website (user interface).
  • Scope: places in the user interface which are built to support user task-centric scope (eg. enter numbers/text, graph data, save data, print etc..).
  • Strategy: business goals, user constituencies and usage contexts.

html pp1

Wireframing is a quick sketch, a visual representation of the written requirements. It is how designers begin to create their webpage by being able to visualise what you’re creating enables you to immediately evaluate which parts succeed and what needs to be altered. We were then given paper web browsers to have a go at wireframing our ‘Meet the Team’ page and then each group member could show each other their designs and then a final design can be sketched up incorporating parts of everyones ideas.

D4DME – PHP SQL Workshop 1&2

In this weeks and last weeks workshop we were introduced to phpMyAdmin which “is a free and open source tool written in PHP intended to handle the administration of MySQL with the use of a web browser. It can perform various tasks such as creating, modifying or deleting databases, tables, fields or rows; executing SQL statements; or managing users and permissions.” (en.wikipedia.org/wiki/PhpMyAdmin)

We have been introduced to MySQL before but I wanted to do a bit of background research so that I could be exactly clear on what I am using in this project.

MySQL “is a popular choice of database for use in web applications, and is a central component of the widely used LAMP open source web application software stack (and other ‘AMP’ stacks). LAMP is an acronym for “Linux, Apache, MySQL, Perl/PHP/Python.

On Tuesday we began by navigating around phpMyAdmin, we learnt that the Structure tab is where you build your table, SQL tab is where you can input SQL statements – similar to the Query tab where you insert queries. The Search tab allows you to search the entire database for a specific piece of data. Insert tab allows you to insert information into the database manually. Finally, Export and Import tabs render out and download your database.

phpmyadminform

We used Brackets and FileZilla to run the php file on the internet. Brackets is a modern text editor which allows you to design web pages. We worked in a folder called project and it contained various pages: index.php, connect.php, header.php, footer.php and normal.css.

php screenshot

We created out form on phpmyadmin which requires the user to input their name, description, city and gender. We then transfer and create the webpage for this form within our index.php page. We have to first connect to the phpmyadmin database using our username and passwords and then we insert some if statements. We also learnt how to make a message pop up and say “invalid gender” using an if statement. Within the index.php file we were also able to sort the database results in order from ASC and DESC user ID’s. Below is all the code which outputs this function.

code2

code3

D4DME – Task 1

We have been set a task to upload and make a contribution to a community based UGC platform, we could decide whether to upload a photo/video/diagram to Wikimedia, add detail to openstreetmap, add a recipe to Wikibooks or a reading list to Zotero.

I decided to add in my old primary school to my local area on openstreetmap.com as it had not yet been identified. Openstreetmap is an interactive website which allows users to insert different landmarks and street names – similar to Google maps but giving users more control and responsibility.

osm13

I also decided to post an image to Wikimedia. In order to do this I had to create an account and go onto Wikimedia Commons which allows you to upload files, photos and videos at your own discretion and enables other users of wikimedia to use your uploads without the worry of copyright issues.

wikimedia2

wikimedia1

I uploaded the above image of Bournemouth beach sunset which I took a few weeks ago, the image is good quality and captures a perfect amount of lighting – perfect for someone to use as a screensaver image or in their own work.

D4DME – Participatory Culture

In Tuesdays lecture, Rob discussed Participatory Design Culture and explained how the internet has progressed over the years. Web 2.0 is the network which runs all connected devices. Web 2.0 applications deliver software which continually gets better and better the more people use and update it. This is the idea of Participatory Culture as people are constantly changing and remixing existing data from multiple sources. Web 2.0 enables audiences to become interactive with the internet and improve their user experience.

An example of a Web 2.0 application which was given was a Wiki. This is a social software which allows collaborative modification and is created and built by no defined owner but by multiple.

CC image

 – http://creativecommons.org/videos/a-shared-culturestates

We watched a video about A Shared Culture which discusses Creative Commons and why it allows a more ‘shared culture’. It is concluded in the video that CC covers anything that basic copyright laws hold. It allows creators to decide whether others can copy, use or remix their creations. Each licence states that if you use someones work then the creator must be referenced and given credit for it. CC makes people feel more comfortable with using other peoples work without having the law get in the way of someones creative flow.

I decided to look further into Participatory Culture and discovered an interesting ‘Ted Talks’ video from Henry Jenkins who has been researching into this prospect for 20 years now, before the internet was widely recognised. He stated that in 2006 around 50% of US teens produced media content versus 65% in 2008. A third of that 65% have shared media content with more than just their friends and family. He described this change as the communicational shift.

participatoryculture


http://www.youtube.com/watch?v=AFCLKa0XRlw

He showed this image which are his 5 ideas as to what participatory culture is and ironically someone had created this online which he now decides to use to emphasise how important and useful the sharing of content can be.