Thursday, 25 November 2010

Communication Technology: Evaluation

I have learnt interactivity. A wide, all encompassing word such as this can be both problematic and useful. Problematic in that interactivity essentially left me in a bit of a wilderness at first, with the word needing further definition; which is posted on my blog. It was useful however as it allowed me to learn what I wanted to learn. I was able to learn both the theory of how people interact with websites, as well as put this into practice by learning a wide range of skills.


The first major step I took to start learning was to take an existing website and get creative. In this case, I took the St. George's website, which I have some control over, and came up with ideas about what I'd improve.

 This defined what I want to learn. I went with these ideas to Simon who told me what I need to learn in order to do these things. This was a list of programs and languages including JavaScript, Flash and RSS. I left a little lost as, in honesty, I had no idea what Javascript was in reality.



Therefore I watched tutorials on YouTube for Javascript having done this for Flash. I later realised this was unwise and time wasting as JS is a case of finding codes and embedding on the whole- but I wasn't to know this then. For me it's a bit of a double-edged sword as I should have put my foot down a bit more with Simon rather than letting him tell me to 'go away and do tutorials'. A simple 10 minute crash course would have given me a springboard to learn it. Christian later did this, although by this time I had already wasted around two weeks.

My context blog shows my engagement with critical discourse surrounding this issue. Typical of me to pick the industry that is changing the fastest, technological developments in my area are happening as I type. The major change is HTML 5, which will provide a uniform way of presenting media. It was worth learning Flash as a 'base' to the learning; I suppose it's a similar case to how typographers would find it useful to learn typesetting despite on screen type being used more now. This sets up the next stage beyond the project perfectly though- get to grips with HTML 5. Thinking about PPD, I want to make sure that by the time I leave this course, I am at the forefront of new media design in terms of my skills base. Therefore, a similar Comm Tech project with HTML 5 is the next step.



I've learnt that my work patterns fluctuate. Some weeks I get hardly anything done, and tend to be content with that. As the deadline approaches or there are less problems to be dealt with, I can work loads. I suppose this says that I'm a hard worker when there are things to be done, but when I'm 'wandering around', I'm happy with that. In the last three weeks I've been doing several 0900-1800 and 0900-2100 shifts with an eagerness to get things done- but this has only come since I exited the doldrums where I was going round in endless circles trying to get Action Script to work.



I've been told by Graham that I'm perhaps not that proactive. I'm not sure if I'd agree with this though- perhaps I take things at my own pace sometimes too much, but when something needs doing I get it done and seek the relevant people. Having said this, I think there's a fair point in there somewhere as I could actually up my game and take things up a level if I took a level of risk in my learning. By trying to get mini live briefs that would facilitate my learning could speed up the learning process and make it generally more relevant.



I said earlier that the next step is to learn some HTML 5. I'm great at engaging with critical discourse. I check several news sites several times a day and am subscribed to various news providers. I'm also on a number of forums. I'm confident that there's absolutely no issue in my knowledge of where things are going in the industry. However I'm terrible at putting this into practice. If I had been more organised I could have learnt some HTML 5 in this project.



Something that always disappoints me with web is that so much learning can have tiny results. To an average passive web user, they click buttons and roll over flash elements as if they've been made and posted disposably. It's taken me weeks to learn how to make the Flash widgets I've made, but they appear rather significant. I really want to make something more impressive using the same skills for my own peace of mind and self satisfaction on a future project- and I already have ideas for this.



Throughout this evaluation, time management has cropped up many times. My time management is... unique. I don't know whether I'm organised or not- I remember everything, get everything done before deadlines, and generally do quite a good job. But I am very flexible- there's very little structure in my time. I'm not sure if this matters though? What I do know though is that if I planned things a little bit more, but still allowed flexibility, I could get more work time in and thus learn more.



The brief asks to evaluate how well I manage projects. I know fully that this is one of my skills. I have previously organised some huge events, and I'm pretty good at getting people into order and chasing things up. I'm positive about my management of projects without a doubt.

I spoke earlier about my Context blog. I have three ongoing blogs that are linked together to make one organised portfolio of my work, engagement with critical discourse and assessment of typography. I find this is usually a good way to work and document things, but it became a problem for this project as my Comm Tech work is mixed in with many other things. To mitigate this I have labeled and tagged every Comm Tech post to make it as easy to view as a project as possible. I’ve not been that good at blogging through this. I have been blogging relatively regularly, and each post is accompanied with text, but to document a process fully I should have been taking screen shots much more regularly and posting these, not necessarily with text.



It's been a mixed project in conclusion. If I could do it again, I would. There was a very slow start, partly down to me but there were other factors in there too; Simon, the Flash specialist, had tonsillitis for two weeks for example. If I had got the Action Script problem sorted much earlier on in the project, I would have been able to develop my Flash skills to a much greater extent I think. It has only really been in the last two weeks I've been able to get creative with Flash after learning the bones. Despite all this, I'm really happy that my skills base has expanded. I have a good skills base as a designer and now feel I could confidently design and build a standard, mainstream website. I am nowhere near fluent in Flash, but I can build simple interfaces and make simple animations in it; which I suppose is all I need for web design. When I put this into the context of the whole year, I've gone from not having a clue about how to make even the simplest web page to being able to make fully interactive websites. With my skills in other design programs, this gives me confidence I'm going to be able to get out there and do more and better live projects as a more rounded designer. My skills base will continue to expand once this project ceases, and this is the ongoing aim for me on this course.

Wednesday, 24 November 2010

Communication Technology: RSS

Confused. I thought embedding RSS feeds would be simple- a case of just getting the code and URL and embedding it into the page. A bit of surface research suggests the process is a lot more complex. I'll seek some assistance from the technicians tomorrow as I'm rather constrained for time right now.

http://www.killertechtips.com/2008/06/09/how-to-embed-an-rss-feed-on-your-website-or-blog/

Tuesday, 23 November 2010

Communication Technology: Forms

I learnt how to build forms a while back, and I copied this to some success.

Rather annoyingly though, the boxes didn't line up so I had to find out how to align them. The code was rather different and included a bit of CSS so I copied and pasted it, then edited it to produce the submission form on the right.

Communication Technology: Building a Site

The widgets that I created in Flash I've now embedded into a Dreamweaver HTML page.

Essentially, I've modified, albeit substantially, the previous dummy site I used for practice purposes.

The concept of this site is simply to demonstrate all I can do in web.

Monday, 22 November 2010

Communication Technology: Flash Widgets

I was really excited about finally cracking Action Script, so I went straight off and created two widgets demonstrating what I had learnt.

This one has no 'links' as such within it, but all the work is done within buttons. I tried to emulate the style of the BBC's homepage banner, where a rollover results in information appearing. This can only be done in Flash as rollovers in a standard HTML format are fixed- ie the rollover replaces the background. Here, the rollover appears in another area- replacing the image- ie outside the button.

The second image on the right shows the construction of the other widget, where Action Script is much more important. Each button is coded separately using the scenes I learnt about previously. Essentially, it's a mini website within a website.

In both widgets I've used 'unsafe fonts' (ie fonts that are not often found on computers) to demonstrate how Flash can facilitate a wide range of fonts. Attention has also been given to the colour and leading of the text, which would be less possible in an HTML document- or at least not as easily achieved.

Friday, 19 November 2010

Communication Technology: Success!

Finally, with the help of Simon, I managed to get the buttons to work! Frustratingly, I still don't really know what I was doing wrong before as the code is exactly the same... Nevermind however, as at least it now works as it should.

I'm also pleased with my progress in learning Flash interfaces as I managed to create this button quickly and easily this time, remembering all the steps; although I suppose this is half expected considering how long I've spent going round in circles doing the same thing!

Wednesday, 17 November 2010

Communication Technology: Disqus


I had trouble trying to embed the Disqus code into Dreamweaver initially; not sure quite what happened originally but following the quick tutorial above sorted out the problem. I now have a live comments field embedded into one of the divs on the 'transport' page. Unfortunately you can't test this until the site is uploaded as it draws the information from an online source hosted at Disqus.


Wednesday, 10 November 2010

Communication Technology: Basic Javascript

With the continuing difficulties in Flash, going round in circles and not getting anywhere there, I decided to look into another area that I need to explore.

After my tutorial with Graham this morning, we discussed about being more proactive. Today I've met up with Natasha who said she'll get back to me regarding her slideshow. In the meantime, I've had a play around with Javascript with a quick introduction by Christian.

Today has been productive in a rather unintended way. Creating the website shown in the image brushed my web skills up, revising Dreamweaver. CS5 is a bit different and took some getting used to, but I managed to remember how to create and use divs, CSS and HTML. Visually the site isn't too bad either; although admittedly there is room for improvement! Of course this is not my primary concern at this stage.

This dummy website allowed me to try out copying and pasting slideshow Javascript codes into Dreamweaver. The key is cheating; the codes are out there, it's just about knowing how/where to insert them.

Some simple Javascript actions are easily created in Dreamweaver though. On the 'economy' page I created a Javascript rollover. Both of the JS things I did today were relatively simple but it gave me a quick crash course intro into Javascript and I feel I've been able to revise the web skills I learnt in 1st year.

Monday, 8 November 2010

Communcation Technology: Comments Widget

Today I came across this service, 'Disqus'. Disqus allows you to embed a commenting service onto your website; it's currently being used on the Transparency BETA for 10 Downing Street. Seems like it may be really helpful for me in trying to create more interactive websites though. All the syntax is relatively conventional; anyone used to using Facebook or Twitter would have no difficulty in using it.

http://disqus.com/

Communication Technology: Flash Rollovers

http://www.guardian.co.uk/world/interactive/2010/oct/13/mukesh-ambani-antilla-mumbai

Unlike in HTML, Flash rollovers are used to display information extra to what is already on display. So for example, there might be a hotspot on a map that when the user rolls over the hotspot, a text box is displayed elsewhere on screen (or it can be in the same)







Saturday, 6 November 2010

Communication Technology: More work on buttons...

So despite the continuing failure of Action Script in trying to link buttons to other internal pages, I have succeeded in coding the button to link to external sites thanks to the tutorial above.







The code that you can see in the actions window relates to the black box. When the black box is clicked, it links to Facebook in the same window due to the addition of _self.

Friday, 5 November 2010

Communication Technology: Simplifying Down

It's been over a week now since I started to use this code and I'm still hitting problems after talking to both Christian and Simon. To try and clear the situation up I've made the site very minimal and essentially just a test ground to sort out the code. It's not working but I've edited the code to say if a user clicks on the button, it should go to scene 2. This is in contrast to before where actions were applied universally and resulted in the website playing like a movie and resulting in flashing images.

Communication Technology: Action Script

I spoke to Simon in the Bubble at this point. He identified that I had previously set up the document in Action Script 3.0 which is not compatible with the Action Script 2.0 coding I was using. However, after spending hours reconstructing the website in Action Script 2.0, the commands still don't seem to work.

As a result, I wasted some time attempting to learn Action Script 3.0 just to get a button to work; which as expected, was to no avail.

Communication Technology: Scenes

After speaking to Christian as the goto actions regarding the frames seemed to be failing, he suggested I used scenes. So I created two named scenes; 'home' and 'about' referring to the different pages.

Christian also showed me that the best way to code a Flash site was with one piece of script in a separate layer. Therefore I took the next logical step and created an Actions Layer. Adding code to the actions layer in reference to the home and about buttons should result in the site working. Having problems turning this theory into reality though.

Communication Technology: Copying the Tutorial


This is the first time I've ever used Flash for interfaces.

Here I am closely following the YouTube tutorial and attempting to construct a website using one scene and separate frames as taught in the tutorial.

Tuesday, 2 November 2010

Communication Technology: Flash Interface: Test

















I learnt how to build Flash interfaces in one way using different frames within one scene. It's been rather complex and I have not managed to make it fully successful as shown above. A minor technical error results in the whole site not working- but I suppose this is one of the disadvantages of using Flash.

The 'home' and 'about' buttons are separate layers, which in themselves took a while to create. There is a structure layout which contains the background, while another layer has content which changes between frames (these are the pages).

The buttons are scripted to go to the relevant frame on the content layer when clicked. I'm having problems with making this work practically though. I'm not sure why it isn't working as it should, particularly as I followed a tutorial. I have found out that different versions of Action Script are incompatible with each other though, and this is a different version of Flash. Having said that, I have stayed within one version of Action Script.

Sunday, 31 October 2010

Communication Technology: Creating Forms

I learnt how to make forms in which users can submit information today. Pretty simple really. The image below shows the coding I've learnt.

There are two tags that are needed: <form> and <input>. Form dictates that it is a form simply, and input tells the computer that these are user-defined fields.

Inputs are defined by the user. I've used name and age, but it could be anything.

Finally, there's a submit button. A whole host of other directions can be given such as <password> or <file>. Using previous knowledge of CSS, I quickly changed the font to Arial from Times New Roman- this is what the span class style 1 bits are; merely telling the browser to show the text in Arial.

The coding... (click to enlarge):



...and here's the information as it appears in preview (click to enlarge):

Wednesday, 20 October 2010

Communication Technology: Collapsible Widgets

Communication Technology: Website Design

The designs shown below are purely design work and demonstrate what I would ideally like to learn. It shows how some of my ideas based on the theory I've been learning could be applied to future websites.

Development One:
  • Tahoma
  • Media Column
  • Events Column
  • Widgets/Features- white background/black outline
  • Light grey background
  • Flexible







Development Two:

Changes:
  • Georgia headings with a more defined hierarchy. 
  • More padding around narrower columns; space to breathe
  • Slightly lighter grey background
  • No black outlines around widgets; attempt to make the headings more legible

Development Three:

Changes:
  • More padding around headers, and clipped tabs to improve legibility 
  • Deep grey widgets to improve contrast and visual effect, with white text
  • More space between columns

Tuesday, 19 October 2010

Communication Technology: Javascript

Let's make a start with Javascript.

I've never used Javascript before, nor do I have any clue about it. I know the basics of some web languages like XHMTL, PHP and CSS, but Javascript requires a completely different syntax and is used for different things.

To learn Javascript, I'm following tutorials by thenewboston on YouTube, who also taught me Flash and After Effects. I found YouTube tutorials really helpful in developing my last website and learning CSS, so I hope this approach will be to some success! Here's part one:

Communication Technology: Interactivity

I have chosen to learn 'interactivity for web'.

What is interactivity?

Interactivity is the way people engage with something; in this case the web. Learning interactivity will allow me to explore further how people use websites, what they actually demand from a website, and how easy a site is to use.

Technical Skills

I intend to start to scratch the surface of web languages that can help me to create widgets. This week I've started to look at Javascript. I'll learn how RSS Feeds can be used, and how to embed existing codes into my website code- for example if I want YouTube videos within my app. Although the advent of HTML 5 makes the future of Flash unclear, I will learn how to manage and design interfaces in Flash.

Theory

Interactivity is not just about programming, it is about how the viewer uses the site. I will learn the principle of type and layout on the web. The web can also be accessed from different hardware like tablets and phones, so I'll need to consider this too.

I want to take website design up a gear from developing simple sites that 'do the job', to visually engaging sites that are easy to use.

Wednesday, 1 September 2010

Statement of Values

As a Visual Communicator I recognize my role in society. My decisions affect the well-being of individuals inside and outside my practice, today and tomorrow.

Therefore:

  • I will design and communicate with loyalty and care, and will not advance my personal interests at the expense of society.
  • I will understand and uphold, in letter and spirit, the regulations and contracts governing my conduct and that of my practice.
  • I will refrain from corruption, unfair competition, or practices harmful to society.
  • I will protect the human rights and dignity of all people affected by my practice, and I will oppose discrimination and exploitation.
  • I will protect the right of future generations to advance their standard of living and enjoy a healthy planet.
  • I will report the performance and risks of my practice accurately and honestly.
  • I will invest in developing myself and others, helping visual communication continue to advance and create sustainable and inclusive wellbeing.
  • I recognize that my behavior must set an example of integrity, trust and esteem from those I serve.
  • I will remain accountable to my peers and to society for my actions.