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.

Introduction to New Unit Breif – D4DME

The next unit is Design for Digital Media Environments which requires us to work in groups of three and create a Web Application which addresses a problem of a target audience of our choice. In order to create this we have to utilise the skills we learn in the HTML CSS and PHP workshops each week. Wider reading will also be beneficial in this unit as it will further our skills when working in HTML/PHP, both Lynda.com and Code Academy will be visited frequently throughout the task.

In our small groups we must use a centralised database in order to achieve a social application, and on this application, there should be a basic authentication system which can run different levels of read/write access.

Despite the fact we are working together collaboratively, we are keeping individual analytical blogs. Blog posts should reflect on all aspects of our creative, intellectual and technological development throughout the course of the unit. Evidence is needed in blog posts such as code snippets, sketches, screenshots and research into our target audience.