D4DME – Meet the Team (Part One)

Today I was introduced to my team mates, Mongkol (Chace) and Kyle. The first task that we have been given in our new groups is to create a ‘Meet the Team’ page.  Chace decided to start work on the design of the page(s) with HTML/CSS. The page initially looked like this:

Untitled

Screenshot

To get used to the collaborative side of this project, I asked Chase to send me his project files so that I could have a look at his code and make some additions. We identified that it would be a good idea to comment our coding so that we don’t get confused by each other’s work. I suggested that we preface each comment with an initial so that we know who has said what, e.g. /* V: verity made this comment */, <!– V: verity has made this comment –>

Chace had initially created three separate stylesheets for the three pages (Home, About, Contact). To make the coding process easier for everyone in the group, I decided to refine this down to one stylesheet that applied to all of the pages. Whilst it was a nice idea to have different coloured headers on each page, it would make it more time consuming to make changes to all three of the stylesheets, so I suggested that we compile them into one. After this I made a few changes to the HTML to make editing easier in the long run.
One of these was to move the navigation to a separate file and link it in using PHP at the top of each page.

Untitled1

Screenshot

This means that we can make a change to one of the links without having to change it on each individual page.
Aside from this, I had a look at Chace’s CSS and made some additions such as pseudo animations (by using generated code from http://matthewlein.com/ceaser/) and using the drop shadow effects that Chace had made on the main divs.

To save us some time in the long run, I added a few extra lines of CSS to make the website dynamic and scaleable with the browser. This made it so that the content of the page would adapt to fit the size of the window and wouldn’t cut anything out from view when scaled.

The final result of my additions ended up looking like this:

1

Screenshot

2

Screenshot

We agreed that it would be a good idea to wait until Wednesday, when we could all meet up, to add content to the page.

Advertisements

Workshop Compilation (Building the dummy website)

Over the last ten or so weeks, Kyle (workshop tutor) has been teaching us how to create a website from scratch. This post contains a compilation of screenshots from each step in the process with highlights over the new content added to each stage. (This is mostly here for my reference to go over what we covered but it is still relevant to the unit). 


Continue reading

D4DME Workshop (Project folder/files hierarchy)

For the first official workshop of the D4DME unit, Kyle (workshop tutor) got us to set up an example project folder to use as a starting point for any website project.

3

Screenshot of Project Folder

The layout was fairly straightforward, as we had setup a similar folder for our dummy website in the past series of workshops. The only new element to the above example was the addition of the templates folder, which allows for cleaner HTML/PHP files (as you can make separate files such as a ‘navigation’ to be included at the top of every file rather than having the same code on every page).

D4DME – The Brief

The next unit for our level C year is ‘Design for Digital Media Environments’ or D4DME for short. On the 3rd of February we were introduced to the brief of our new unit. Our task is fairly straightforward, though the means of doing so are where it is going to be interesting. This unit is to be conducted in groups of three, in which we will have to create a website that uses databases through the use of PHP and SQL.

Over the last month or so, Kyle (workshop tutor) has been teaching us how to build and structure our own webpages with the use of HTML and CSS. Having already taught myself basic practice with these two languages before starting University, I was familiar with everything that was covered in these workshops and found the sessions to be a nice revision of my prior skills.

However, after we had created the front end design for our dummy website, Kyle (workshop tutor) introduced us to the next step of building a website – PHP.
PHP is a programming language that is used to maintain the back-end of websites, as well as to include the use of databases which result in minimal HTML content.
Previously in the year, Kyle (workshop tutor) taught us the basics of Processing, which bears a slightly similar syntax to PHP in that they both frequently call on functions, except the two languages have different names and structures for them.

The focus of this unit is on our ability to work well together as a team. Rob started our morning lecture by introducing us to a vast array of free, open source software that is available to us as digital designers. Due to the collaborative nature of coding, he strongly advised us to start working with Github so that we could easily backup and make changes to our code as a group.

We currently do not know who we are going to be working with on this unit, though I decided to sign up to Github anyway and played around with the software.

GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Over eight million people use GitHub to build amazing things together.


1

Screenshot of GitHub Website

2

Screenshot of GitHub Software

Another thing that Rob suggested was to add a Wiki to our Dakar domains. Wikis are a great way to collaborate ideas and content, so I had a go at installing one on my domain directory. Wikimedia itself will be a great place for us to find content with different copyright restrictions (such as copy left) so that we will be able to use content without inflicting on any legal rights.

4

Screenshot of MediaWiki

To start the ball rolling, I asked the blue seminar group if they wanted to make a Facebook page so that we all had a place to socialize outside of our individual groups. They thought that this would be a nice idea, as it would give us a place to discuss our work without getting in the way of our actual projects. I created the page and so far most people have joined.

Hopefully we will find out who our individual group mates are within the next couple of days so that we can start to formulate some website ideas together.

References

Preston-Werner, T. Wanstrath, C and Hyett, P J., 2008. GitHub [online]. United States: San Francisco
Available from: https://github.com [2/5/2015].

Personal Project (Practicing HTML/CSS)

After completing the Codecademy course for HTML/CSS, I decided to start making my own code using ‘Brackets’. I have known about ‘Brackets’ for a while and think it is a good place to start, as it is easy to link in CSS stylesheets and JS scripts.

blogpost1

I decided to use a monochrome colour scheme for my first try, as it is much easier to make the CSS look ‘nice’ if everything works harmoniously (as opposed to ugly hues). I found a basic pattern background on a website called ‘Color Lovers’, which is a nice site to find colour schemes on.

blogpost2

The ‘Nav’ bar on the side is functional and links to a separate page for each list item link (For example, the picture above is the page that ‘LINK ONE’ directs to).

blogpost3

blogpost4


Bibliography:

Thiess, P., (Adobe Systems), Unknown date. Brackets [online]. Available from http://brackets.io/ [4th October 2014]

Codecadamy HTML/CSS (Part Two)

blog post4

I managed to complete the HTML/CSS course on Codecadamy today. Whilst I knew most of the basics that it covered, there were a few things that I picked up along the way that were new to me. The last task on the course was to create a page following loose instructions.

blog post1

Mine ended up looking like this. It’s very basic, though the idea was to show everything that the course had taught you to prove that you understood. I am now going to go use ‘Brackets’ to play around with my own coding and try to create something a bit more adventurous.

 blog post2 blog post3

Codecadamy HTML/CSS

After I had finished my workshop today, I started the Codecademy course on HTML/CSS. Needless to say, I haven’t finished the course completely yet, though I have made it over 3/4 of the way. Most of the content is stuff that I am already familiar with, though there have been a few parts that have been completely new to me and were fun to figure out.

blog post

To be brief, the few specific things that I didn’t understand before (but now do) are:

  • How to make tables properly (I was bad at this before)
  • How to use a border radius to curve edges
  • The actual different between class/ID
  • What pseudo class actually means

I will hopefully finish the course 100% tomorrow, as I want to move on to some more complicated wed design and possible start designing things for practice.


Bibliography:

Sims, Z. and Bubinski, R., 2011. Codecademy [online]. Available from: http://www.codecademy.com/ %5B2nd October 2014].