• HOME
• DesignDiary
• PORTFOLIO
• CV
• contact
• Photography

512

Main nav in editable region using php includes

I've finally figured out how to use Perch properly. I really wish I could have gone to the lab classes to get help with his as I know Nick is really knowledgable in this area. php & I do not have a good history so I was rather aprehensive about having to use it with Perch. However it was important this time becuase the client being able to edit the content themselves was a major stipulation of this project.

I figureD out how to add the tags, then adjust the templates accordingly. But once I had worked it out I then was able to share the editable region across all the pages and use for both my primary and secondary navigation. Superb! Thanks so much perch. What I was doing was amending each page individually, which can prove to be rather laborious and time-consuming when you make as many mistakes as I do. Now all I have to do is edit the links the once and the entire site is updated. Fantastic.

I also created some editable regions on the news page, so Ernie can go in after the shows and update the site himself. I'm still trying to work out how he can add images too but I'll get there eventually.

Guest book

www.websitetoolbox.com

Another stipulation from Ernie & jane was that they have guestbook on the site rather than a forum. This is mainly so the photos could be commented on etc. So I found a really nice on websitetoolbox.com which let me customise the layout in keeping with the ardville brand.

custom 404 page 'file not found'

I thought it might be nice to create a custom 404 page in keeping the rest of the site. The idea being should I have a missing link on the site then I would have a page which would redirect the user back to the homepage. I checked with my web hosting and this is supported.

contact form php code

www.raymondselda.com/php-contact-form-with-jquery-validation/

jalbum for gallery page

sitemap

http://astuteo.com/slickmap/

Div comments

I did have all my divs nicely commented but after much investigation as to why some of my divs wouldn't display properly in Mozilla, I found these to be the culprits. So I had to take many of them out. So much for being organised... Ah.. I have a habit of creating really long comment lines as I use these as page and section breaks in the code, so it would appear Firefox doesn't like these. (Now that I think of it didn't Chris mention something like this in one of the lectures when he was criting Gerard Dunleavey's work)?

Project Management

Over the past few days I've been investigating different methods of project management. I was originally using basecamp and it's pretty good however I would like something more visual that provides a graph and/or a gantt chart. For the Major Project Proposal I used Microsoft Project, this was OK but I prefer using excel as so I downloaded some templates and applied the Ardville colour scheme to them. After spending ages playing around with the templates I still wasn't happy with the layout so the next day I sat down in the library and just did one out from scratch. It took me a full day but it was so worth it!

Costings

I've added a costings column into my Design Document/Project Gantt which I will fill in as I progress though the project. As I complete each item off the list I'll note how long it took me. It will calculate the total project cost based on a formula calcuting an hourly rate of £12.

Backing up Files

This week I spent some time once and for all reaching an effective method of backing up all my files. I'm always losing memory sticks and forgetting which one has the most up-to-date version of my work. Also I work from several different pc's and need to keep them all updated. I'm also paranoid about losing my work! I've had a dropbox account for a while and was just using it for key files of mine, but I've decided to upgrade my account to a 50gb storage capacity. Since doing that I've relocated all my Uni files into my dropbox folder. This means I can now work dynamically and my work is backed up as I work. It's uploaded to the cloud but most brilliantly of all it's then downloaded to my other pc's as well. Goodbye memory sticks!

---

Back to Top

Week 8

Well this week is the is soft launch week. I've been really busy at work because we're launching a new product range (I have to work to survive I have a mortgage etc). Anyway I was really hoping we would have until after Easter to work on our projects and only realised last week that we had to have it ready for Thurs 25th March. I didn't want to just jump straight into dreamweaver and start coding I want to do this project using the methods we've been taught so I spent ages doing a comp in photoshop. I think this is how I would work in the real world.

Now that I've got the comp done I know exactly what way my divs should be structured so I shall spend Easter getting the mark-up ready and then applying the css. I get some time off work which will give me a chance to catch up with everybody else. I want to learn as I make the site so I want to challenge myself using new methods and technologies I haven't tried yet such as j-query, rss feed, a different design process and different css techniques such as a 3 column layout.

---

Back to Top

Week 7

As I'm progressing through my project I'm compiling a "New Website Starter Kit" of relevant files that I will be able to use every time I want to create a new website. This includes wireframe, comp, css, form and standard html page. The idea is so I won't have to start from scratch each time I begin a new project and will also adopt a standard process. This was inspired by "The Ultimage Package" by Erskine Design which I thought was a really cool idea.

Perchased Perch

A Content Management System is a really important element of this site. My Mum wants to be able to update the site herself. I also want to look into user generated content. Will probably be much too difficult but I'll have a look anyway. I had a look at a few different CMS's such as frog and cushy but Paul advised me Perch was the best so i was happy to pay the £41. Now all I have to do is work out how to use it. I've downloaded all the files and uploaded the folder to my web server. Let's see if I can disipher the tutorials.. The very mention of php induces feelings of sheer panic.

Set up email

Wireframe

I used balsamic Mock-ups as per Lee Munroe for this:

Post-it Sitemap

Colour Pallette

Gather Content

I have been really busy gathering content for the site, much of which is images of the ponies in their natural habitat and also at shows. I've narrowed down some good ones which I've re-sized as thumbnails to use on featured areas. It's quite difficult to photograph ponies becuase they must be standing in a certain way to have the desired effect. Pony people are very fussy! When a pony is standing the ears must be pricked, the head must be held high and the 4 legs should be squared. Not always easy!

I also sat down with my Mum and she dictated lots of content for me. I have to convert it to mark-up and then will add it to the site hopefully over Easter.

Photoshop Comp

Favicon and other icons

I've found a really good program called Axilas Icon Workshop that I was able to download a free trial of for 30 days. I've it to create a favicon using the new Ardville Logo and have also created an icon library for use both with this project and future projects.

 

Updated my hosting from those blaggards Fasthosts to 000 Web Host.

Update Holding Page

 

New Website Startup Kit

---

FET Week 11

This week I've been spending some time trying to put into practise what I've learnt so far on this module to create some HTML5 pages and also some accompanying CSS3... It's harder than I thought! I'm really glad I decided to pick these as my FET topic though as I feel they're very relevant both to the course and also to my future as a web designer. I think my research will stand me in good stead by preparing me for future standards of web design. The module will leave me well equiped and well informed to progress as a designer using the very latest emerging technology and standards. This topic also has the added bonus of being relevant to the design module of this course and ties in very nicely with the work I am doing for it. It's very refreshing to be able to incorporate the work from one module and apply it in real terms in another. This is my fourth consecutive year as a full time student and this is the very first time I've been able to do that.

My original idea was to do my blog in HTML5 and perhaps add a little CSS3 styling... however I have now abandoned this idea because this blog page is the most basic of pages with very little styling... The HTML5 standard contains pre-named "sections" of the page such as NAV and SECTION, so apart from the new declaration it seemed a rather pointless excercise. Instead I'll appendice some practise pages I've done in my final hand-in./p>

---

FET Week 10

APIs

HTML5 includes several new APIs that are integrated with some of the new HTML5 elements. Here?s the complete list straight from W3.org:

2D drawing API which can be used with the new canvas element.

API for playing of video and audio which can be used with the new video and audio elements.

An API that enables offline Web applications.

An API that allows a Web application to register itself for certain protocols or media types.

Editing API in combination with a new global contenteditable attribute.

Drag & drop API in combination with a draggable attribute.

API that exposes the history and allows pages to add to it to prevent breaking the back button.

Cross-document messaging.

The main purpose of APIs is to facilitate web application creation. As you can see from the above list the 3rd API in the list enables offline web apps. This is great news for users and programmers alike because it enables the use of rich, internet-driven applications in an offline environment.

Back to Top

What's all this fuss about HTML5 and CSS3 anyway?

"The big deal is that the specifications are at least moving in the direction of how we have been using the web for the past five years or more, e.g. video, audio and user generated content. Developers have started to fall into habits (some good, some bad), and so the specs are trying to make those habits easier and more standardized. The structural tags, web forms, and advanced CSS are all letting us do the same things we?ve been doing for years, just in an easier, more standardised way."

HTML5 DOCTYPE Declaration (DTD)

The DOCTYPE Declaration is a line of code that sits at the top of an HTML document. It defines what is and isn't allowed in a particular version of HTML. There's 2 versions, strict and transitional. Transitional is for developers transitioning from older versions of HTML and allows use of older elements. Browsers us this line of code when parsing a web page to check the validity of the page and act accordingly. Put simply, it tell's the browser what version of HTML/XHTML you are using.

HTML5 doesn't need a doc reference or a URL so this line of code is in essence, no longer requried although it is good practise to include a simple HTML reference. The current HTML4 DTD looks like this:

But the new HTML5 DTD will look like this: (which is in keeping with the semantic rule that less code is more)

The HTML5 Superfriends

The big players in development community have come together to debate practical elements of the emerging specification, argue over the inclusion of controversial elements, and assess the timeframe over HTML5 elements will be released for the rest of to use:

"We, the undersigned, wish to declare our support for the direction in which the HTML5 specification is heading. Its introduction of a limited set of additional semantic elements, its instructions on how to handle failure, and its integration of application development tools hold the promise of richer and more consistent user experiences, faster prototyping, and increased human and machine semantics".

---

FET Week 9

"HTML5 won't be Ready until 2022"

Ian Hickson, the editor of the HTML 5 specification, recently outlined the time table for HTML 5:

• First W3C Working Draft in October 2007.
• Last Call Working Draft in October 2009.
• Call for contributions for the test suite in 2011.
• Candidate Recommendation in 2012.
• First draft of test suite in 2012.
• Second draft of test suite in 2015.
• Final version of test suite in 2019.
• Reissued Last Call Working Draft in 2020.
• Proposed Recommendation in 2022.

However I have found in my research that some browsers will fully implement HTML 5 long before 2022. Safari and Firefox already offer support for many HTML 5 elements - see below for analysis.

However according to www.webmonkey.com there are also good reasons why the standards groups behind HTML 5 have put its final release date so far in the future.

Part of the reason for the long timeline is that HTML 5 attempts to do something HTML 4 never did — not only does HTML specify new tags for HTML authors, it dictates how a browser should render a page, how it should handle errors and more.

The end result is that it may well take 13 years for browsers to comply with every line in the HTML 5 spec. However, there’s a good chance web developers will be able to use the new HTML 5 tags long before the browsers implement every recommendation in HTML 5.

Take your design capabilities to the next level with CSS3..

According to Chris Spooner over at Smashing Magazine there are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification. However, we won't in practise be able to use these on all of our projects for another few years yet, but for design blogs and websites aimed at the Web design community, these features will help us push the boundaries of modern Web design today, adding something special to our designs and helping the industry move forward..

5 top CSS3 techniques:

(Source www.smashingmagazine.com)

Border Radius

Probably the most common CSS3 feature currently being used is border-radius. Standard HTML block elements are square-shaped with 90-degree corners. The CSS3 styling rule allows rounded corners to be set.
pre class=”brush: css;”
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

Border-radius can also be used to target individual corners, although the syntax for -moz- and -webkit- is slightly different:
pre class="brush: css;"
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Supported in Firefox, Safari and Chrome.

Border Image

Border-image allows an image file to be used as the border of an object. The image is first created in relation to each side of an object, where each side of the image corresponds to a side of the HTML object. This is then implemented with the following syntax:
pre class="brush: css;"
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

The {border: 5px} attribute specifies the overall width of the border, and then each border-image rule targets the image file and tells the browser how much of the image to use to fill up that 5px border area.

Border images can also be specified on a per-side basis, allowing for separate images to be used on each of the four sides as well as the four corners:
pre class="brush: css;"
border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Supported in Firefox 3.1, Safari and Chrome.

Box and Text Shadow

Just like the drop shadow in photoshop!

pre class="brush: css;" -webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

The first two attributes determine the offset of the shadow in relation to the element, in this case, 10 pixels on the x and y axis. The third attribute sets the level of blurriness of the shadow. And finally, the shadow color is set.

Also, the text-shadow attribute is available for use on textual content:
pre class="brush: css;"
text-shadow: 2px 2px 5px #ccc;

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only).

Transparency & Opacity

The use of PNG files in Web design has made transparency a key design feature. Now, an alpha value or opacity rule can be specified directly in the CSS.
pre class="brush: css;"
rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);

The first three numbers refer to the red, green and blue color channels, and the final value refers to the alpha channel that produces the transparency effect.

Alternatively, with the opacity rule, the color can be specified as usual, with the opacity value set as a separate rule:
pre class="brush: css;"
color: #000;
opacity: 0.5;

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes).

Custom Web Fonts with @Font-Face

The safe fonts that can be used on the Web are Arial, Helvetica, Verdana, Georgia, Comic Sans etc. Now the @font-face CSS3 rule allows fonts to be called from an online directory and used to display text in a whole new light. To avoid any future copyright issues there are only a handful of specific fonts that can be used for @font-face embedding.

Here's how to put the styling into practise::
pre class="brush: css;"
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

The rest of the font family, containing secondary options, is then called as usual:
pre class="brush: css;"
h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;

Supported in Firefox 3.1, Safari, Opera 10

Back to Top

CSS3 Cheat Sheet

Just like HTML5 the good people at Smashing Magazine have produced this extremely useful CSS3 cheat sheet (I'm going to run out of wallspace at this rate)..

Browser support for HTML 5 & CSS3

IE9 promises greater CSS3 Support

Thurs 19th Nov 2009

Microsoft has offered developers an early glimpse of Internet Explorer 9 (IE9) at their 2009 Professional Developers Conference.

Although only at an early stage of development, the IE9 team already looks to have made some impressive leaps forward in terms of web standards support, particularly with regard to CSS3 selectors which, by the looks of the image below (taken from the IE blog), IE9 appears to score an impressive 574 out of 578 in our CSS3 selectors test, a vast improvement over IE8 which scored only 330/578. (Source www.css.info)

Deep Blue Sky launches Modernizr.

Deep Blue Sky have launched an awesome application called moderinzr that checks your web brower's for CSS3 & HTML5 and reveals it in easy to follow format. Further to that they've gone ahead and tested all the major browsers and checked all the features for each one. They've published state of current support, here's some of their findings:

Safari (win)

Safari (on Windows) has by far the best feature set in the current market, outdoing competitors like Firefox 3.5 and even Google Chrome. Excellent support for CSS3 animation properties such as CSS Transforms & CSS Animations, which enable the developer to define javascript-like rotation, movement and easing via CSS. HTML5 features are well supported with Canvas, Video and Audio all implemented

Mozilla Firefox

Firefox 3.5 has good support for features such as @font-face, box-shadow, rgba() and border-radius. It isn't as good as Safari regarding CSS animation, but it makes up for this with the implementation of HTML5 media(video and audio). Firefox 3.5+ implements the first public draft of the Geolocation specification from the W3C specification.

Google Chrome

Chrome has excellent support for all of the Modernizr tests generated by findmebyip.com. They go on to say that the big let down is the lack of support for @font-face. This has been widely documented and there are known work arounds for it. Google has promised that the next version of Chrome will add native support for web fonts.

Opera 10

By and large overall support for CSS3 is quite poor with Opera and it was the general concensus that they would have to make some changes if they wanted to be taken seriously by the web developer community.

IE 6, 7 & 8

Unlike some other contenders, Internet Explorer supports @font-face (all be it only in .eot format). In fact it's supported it for a while. However with the exception of font-face, Internet Explorer does display a marked lack of support for almost every kind of advanced/progressive feature..something they'll hopefully be addressing the future.

Summary

The guys at Deep Blue Sky have concluded that there is nowconsistent level of support for many of the CSS3 and HTML5 features that the average developer might use for progressive enhancement. From their survey the most widely supported features were:

• rgba()
• hsla()
• opacity()
• border-radius (except Opera)
• canvas

Outside of these however, support is patchy and is largely dependant on the whim of the browser manufacturer. Some browsers are way ahead of the game (Safari), whilst others have a intermediate (Firefox) or even poor(?) support (Opera).

Last week I concentrated on HTML5, so this week I'm going to focus more on css3. What I found out about HTML5 really excited me and I can't wait to start using it. I want to completely learn everything I can about the 2 technologies at the end of the semester I can sit down and write a paper with authority and the research to back it up. I want to be able to stand up at work and discuss the advantages of using HTML5 and CSS3 and better still I want to be able to use them in future projects!

---

FET Week 8

Wed 11th Nov 09

HTML5 is... POSH!

The HTML5 standard has been under development since 2004 and is now starting to recieve support from some of the major browsers. It is strictly semantic and adheres to the POSH Principles of web design, ie

• Plain
• Old
• Semantic
• HTML

In order for a page to be POSH, it should conform to the following:

source: www.wikipedia.org

• POSH pages should be validated, which can be done automatically via the W3C Markup Validation Service
• All presentation should be handled by Cascading Style Sheets (CSS), not done in HTML (this means Tables should be used only for tabular data, not for page layout; similarly, spacer GIFs should never be used)
• Emphasis tags, such as <b>, are presentational, so should be omitted; the same applies to <br>
• All links (anchor tags) should point somewhere—a link which has an empty href attribute (linking to nowhere) should not be used
• Class names should describe what the data is—not the way it should appear

To start writing semantic HTML5 markup, you need to:

• Validate your HTML
• Stop using tables for layout
• Use semantic elements and attributes for their intended purpose
• Use semantic class names and id values
• Use as little HTML as will get the job done

A few semantic HTML tips I got from www.456bereastreet.com

• Use heading elements (h1 - h6) for headings, and make sure they create a logical outline of the document.
• Use tables to mark up tabular data, and use the full set of features (caption, th, scope, headers etc.) provided by HTML 4.01 to make sure that the tables are accessible.
• When marking up a quote, use q or blockquote.
• For images, make proper use of The alt and title attributes.
• Use HTML list elements (ul, ol, dl) to mark up lists.
• Use the em and strong elements for emphasis, not to make text bold or italic (i.e. do not replace i and b with em and strong).

HTML 5 shiv

HTML5 does not render in IE (shocker)... so the HTML5 shiv technique has been devised which forces IE to use the specified styling. Simply place a line of javascript code into the top of each page and viola!

New features & elements of HTML5

source http://www.turtleblog.co.uk

Well the thing that stands out the most to me is the reduction in div tags and the introduction in new page structure elements which in my opinion clean up the code and give each page defined structure in a meaningful and constructive way. The new HTML5 page elements are:

• < header >
• < nav >
• < article >
• < aside >
• < section >
• < footer >

Some new features...

< audio > < video >

The audio and video element allows you to easily embed videos and audio without the need for flash while retaining certain features like autoplay and loop. A great example of where this is being used is: www.dailymotion.com/openvideodemo it doesn?t use flash only HTML5, JS and CSS3.

< canvas >

This is a javascript controlled drawing area allowing you to make graphs easily. A example of the canvas element with RGraph can be found at www.phpguru.org/static/canvas.html.

< !doctype html >

This replaces the original DOCTYPE and HTML elements, combining the two into one streamline starting point.

The following are obsolete in HTML5

• < acronym >
• < barefont >
• < center >
• < font >
• < frame >
• < strike >
• < u >

HTML 5 Cheat Sheet!

Download pdf here

I found this brilliant HTML5 cheat sheet on smashing magazine:

Here's some good HTML5 sites::

• http://html5gallery.com/
• http://html5doctor.com/
• http://diveintohtml5.org/
• http://www.whatwg.org/

---

Back to Top

FET Week 7

Have just been to see Dr George and he's confirmed that I can research CSS3 & HTML5 which I'm delighted about as I think it's very relevant to me a student web designer. He gave me some very good food for thought and advised me on what angle from which I should approach the paper. Things that I will need to consider and include are:

• Where has the technology come from and how has it evolved
• Emphasise that these are very much STANDARDS based technologies
• Semantic
• Good and bad examples of each
• Why are these 2 technologies linked together
• What is good about them in comparison to previous versions (provide examples)
• Why is it useful to me and my career in multimedia

Dr George also told me about a new technology called Web GL which will integrate 3D into HTML without the need for a seperate plug-in so I'll do a some research on that as well.

Hmmm... my chosen topic for the stage 1 report was holographic storage.. but I've been reading up on CSS3 and I'd really like to research that instead for the second half of the assignment on that as I think it's also very relevant to me as a student web designer. Think I'll ask him on Wednesday in our designated time slot with him.

---

Back to Top

FET Week 6

What is expected of us for the second half of the assignment:

A much more detailed look at the topic selected & the sort of areas to cover.

What is the technology - in good detail.

How does it move things forward - what's new or interesting about it.

What does it do for multimedia - why is it of interest to this module - web standards/css.

Comparison to current technologies - in relation to what's out there already.

strengths

weaknesses

Evaluation of the technology, (in context).

We won't be generating any new information - just integrating, understanding and recreating what we have already researched.

We can put our own thoughts in.

DESCRIBE THE TECHNOLOGY

Clearly describe the technology, what does it do, hardware element etc

Take a look under the surface, eg using algoithms, hardware, syntax

(show a strong confident understanding of the technology, you should show the reader you know everything about it)

WHY IS IT AN FET

What's new about it

Why is not just an existing technology repackaged - eg mobile tv

What does it enable and how.

What does it fix or improve upon - does it meet a gap in the market.

RELATE THE TECHNOLOGY TO MULTIMEDA

"In relation to MM, this is why as someone who is going to be working in the MM industry, i need to know..."

"This is what interested me... the technolgy I'm thinking" etc etc

COMPARE AGAINST A CURRENT TECHNOLOGY

Compare against a suitable existing technology, (don't need a detailed knowledge of the existing technology)

The focus is on the new thing but have a working understanding...

What can each do, their features

How well does each technology work

Strenghs and weaknesses

Evaluate the comparison

STRENGTHS AND WEAKNESSES - gathering data

Test the technology, conceptually, see what other people are saying

This is not evaluation, that comes later, this is just TESTING the product, see how it performs, gather evidence & data

How good/bad it is

State the results of the above consideration

EVALUATE

This is done by each of you individually

Now evaluate your findings, evaluate other peoples findings

State opinions found during your research

Start your own opinions and evidence them

Draw conclusions

Say what your conclusion is of the topic, not "i liked it because..."

REPORT CONTENT

2000 words, excluding references and cover

Diagrams, code snippeets, images, tables, examples, make it look nice!

REPORT FORMAT GUIDELINES

2cm margin

12pt body

Headings a little larger

1.5 line spacing

Harvard Citation Method

bibliography

PRINTED VERSION

Include a completed cover sheet

Then the report

Finally the reference section

Staple pages together in the top left hand corner

PDF VERSION

Send email

Make file name my name eg sandraharrisonburcombe.pdf

Subject: FET report for Sandra Harrison-Burcombe

Also include all group and individual work on the disc

Do not include a covering wallet or folder

Back to Top

---

FET Week 5

The lecture today was really good because Dr George outlined all the possible FET topics. He did this in week 2 as well but I didn't take notes that week so I was really glad he outlined them all for us again. He also went through the second half of the assignment and what would be required of us in terms of research. I was glad I took my laptop into the lecture becuase I was able to take take detailed notes electronically.

This is a copy of the notes I took in the lecture:

3D TV will be interesting for next year but the mechanics for how it works are simple.

holographic - a good topic - clearly defined - projected images etc

3d holographics - be clear about what your're talking about.

laser tv - don't do this! same as lcd and plasma.

OLED - interesting technology, but hard work to make best use of, fairly safe but will need to be comfortable with the physical process.

e-paper - one of those things like laser tv that needs to be broadened out - new types of medium.

Advances in real time rendering - fairly specific -

*make use of time-slots!!

INTERACTION INPUT:

Touch sensidtive projections - be careful..

Motion control for computer games - a bit too familiar, eg microsoft majestic.

Motion sensing - need to think of something new.

Gesture regognition - a good choice - most of the current technology doesn't use this - some nice things you can do with this..

Biometrics - security, fingerprinting etc

Brain computer interface - headset, good access to information for this online.

Artificial eye - maybe a bit too specific

INTERACTION OUTPUT

Haptics - popular - good topic - lots of new things coming out and lots of new thinking - some of the better stuff is hidden away..

Mobile device access - making mobiles accesible - a good choice.

Augmented reality - the largest choice - lots of info - watch out to only view at application level and not the actual prodeucts - quite a broad topic.

AR & BCI in computer games -

AMBIENT & ARTIFICAL INTELLIGENCE

Ambient intelligence - too broad a choice -

RFID - too specific - good starting point but there are other ways of getting sensor networks more interesting.

AI for games - good potential but you'd need to be more specific.

MOBILE

4g - fine - but be careful it's not that well defined

Mobile tv - ketchup tv - not a great choice - a service

WEB

css3

COMPUTING TECHNOLOGY

Wireless electricity - not a good choice - it has relevance but how would you explain how it works?

So what next?

Start to research how your chosen technology works

What's on the surface

Make use of the sessions

---

FET Week 4

Have heard on twitter that The Jedi training game using brainwaves to control 'The Force' will be on BBC Click this week... should be interesting and fit in nicely with our FET topics. Enjoyed the Gadget Show last week I'd really love Susie Perry's job or even better to win one of their competetions!

Handed in the first part of the assignment.. I find working in a group really difficult, especially with strangers. There was 5 in our group so it's difficult co-ordinate the workload and even to get us all in the same place at the same. We met after the lectures every week so it wasn't too bad. The topic closest to my heart was holographic technology becuase that was something I felt would really benefit the multimedia world due to the ever increasing large file sizes. It is something I could definetely see myself using going forward as a potential designer.

---

FET Week 3

After the lecture this week the group got together in zest to discuss our findings of the week. As mentioned below we decided as a group on 6 potential FET subjects that interested us. We took a group vote and the 3 topics will be... Gesture Recognition, Wimax and Holographic. Conor is really interested in Haptic technology so he's taken the decision to add a fourth topic to our group report.

Over the weekend we are going to study in detail our topics and e-mail our research over to Conor who is going to construct the report. It's quite hard to co-ordinate who writes the report, in my view it's giving more work to one person. Conor says he's more than happy to do it as he's a journalist. As a group then we're going to ask Dr George if what we have produced is sufficient.

I'm really excited about holographic technology - anything that I can see myself using in the future is good - my interprtation of it is it's the next generation of dvd - the fact that you can fit up to 2 terrabytes onto one disc is simply mind blowing... I'm also looking forward to exploring 4g and wimax to see what we can expect for our iphones in the future!

---

FET Week 2

This week we were split into our groups.. I'm in group 2.. there seems to be a few boffins in the group. We got together to discuss all the FET topics and to throw out some suggestions as to what area we might delve into.. The rest of the group visited Dr George on Wednesday, I couldn't make it as I had to work. Anyway we've narrowed it down to 6 topics.

In the display technology category we will be researching either Electronic Paper or Holographic Technology. Within the Interface Technology category we'll be researching either Gesture Recognition or haptic Technology, and within the Wireless & Mobile Technology section we will be researching either Promixity chips or WiMax. Conor is very excited about proximity chips... personally I'm much more interested in 4G and WiMax technology. After all we all sit with our iPhones and wireless internet connections so it will be interesting to see what is coming next.

---

FET Week 1

Well we had our first lecture this week with Dr George in a too small lecture theatre so we all had a chance to get suitably acquainteds as we were literaly sitting on top of each other. Dr George explained what the module was about and what the research topics were going to be... they seem really interesting, especially ambient intelligence and mobile & wireless - hope my group gets one of these topics....

---

Week 6

Viva la Viva!

Well this week was all about the VIVA. I was truly petrified. When I stood up to speak I started shaking uncontrollably, I couldn't believe it. I hate being the centre of attention and having lots of people looking at me waiting for me to talk, it's truly my worst nightmare. I'm DREADING the 10 minute presentation we have to give a the end of the semester but at least it will only be in front of a panel and not all the other students!

---

Week 5

Feeling very sorry for myself...

This week I got no Uni work done as I was sick.. feeling very sorry for myself indeed.. I don't think I'd last too long over in Afghanistan..

---

Back to Top

Week 4

Le Portfolio Shizzle

Well this week is all about the Portfolio. I stupidly thought it was due next thursday and not this thursday so consequently mine is rather lacking compared to everyone elses.. (I was too busy reading all my Valentines Cards).. I did a rough draft up last semester but I wasn't happy with the coding as I ended up styling in the html instead of the css so decided to re-code it again from scratch.

I traced some nice vectors from iStock photo and wanted these to be the centrepiece of my design. However I CANNOT get them to display.. I spent all day Monday in the library trying to get it to work.. I really need to go to the lab class tomorrow to get help but work won't let me out.. joy. Anyway I drew up a few wireframes in http://www.balsamiq.com and then did my comp in photoshop:

Cross Browser Testing

I went over to the very excellent https://browserlab.adobe.com to carry out some cross-browser testing. I tested my homepage in all the main browsers and it looks pretty much OK... naturally it doesn't render as good in IE but that's to be expected. Chrome is really impressing me at the minute!

 

Mark-up Validation

Went over to the WC3 Validation Service to validate my markup.. quite a few errors, however it's a really brilliant service, most of them are just typos and unclosed tags etc. Will FTP amended page and re-validate when I get home.

Contact Form

I want a really pretty contact form so I drew this comp up, I haven't coded it yet though:

This is my branding, I did it in December.. I saved this as a desktop background:

But then I saw the pc world ad with a similar branding thing so I've changed my branding on my portfolio to "myfolio". Very original I think you'll agree hahah.

Back to Top

Viral Marketing

What is Viral Marketing?

Viral marketing describes any strategy that encourages individuals to pass on a marketing message to others, creating the potential for growth in the message's exposure and influence. Like viruses, such strategies take advantage of rapid multiplication to explode the message to thousands, to millions. In terms of the Internet, viral marketing has been referred to as "word-of-mouse," "creating a buzz," "leveraging the media," "network marketing." But on the Internet, for better or worse, it's called "viral marketing." Viral Ads are a form of social advertising on-line, which can really make users warm to a brand, unlike the often detrimental side-effects of a typical on-line ad push.

A well-executed and planned viral campaign can achieve hundreds of thousands of unique views within a matter of days. A successful viral not only communicates a message to a target audience, it actively propagates it to their friends and colleagues.

Viral video is watched actively not passively, a player of a viral game engages with your brand, unlike traditional forms of on-line advertising such as banners or pop-ups. With viral, an audience will interact directly with the brand.

According to a recent survey by Forrester Research; "Viral advertising is a more effective way of engaging customers than many other forms of advertising". The report also goes on to say; "Consumers are getting more annoyed with advertising, but less so with viral marketing, and consumers who like to exchange viral messages also have a higher appreciation of advertising in general. Marketers can improve general ad campaign targeting and results by "pre-seeding" it with a viral campaign".

Viral Mediums

Social News Voting Sites

Sites like Digg, Reddit, Sphinn, etc, are great places to seed viral content because they focus around links to the actual content, allowing readers to spread exact copies of the original message. They tend to have not only huge audiences, but also extremely savvy ones, and links on social news sites not only remain visible indefinitely, but they also allow social proof to build in the form of votes and users can comment on individual stories.

Blogging

Blogs are probably the most obvious example of a viral medium, high-copying fidelity, permanence, conversation, large and savvy audiences. The trick is to get bloggers with large audiences to mention our creative. This would involve making a list of key bloggers and building relationships with them and ask if they're open to spreading our content.

Microblogging Sites

Microblogging systems like Twitter and Plurk are newer than voting sites, but the have their own advantages for seeding viral content. Permanent links, large and savvy audiences, verbatim copying in the form of "retweeting", social proof in the form of follower totals and of course, plenty of conversation and communal recreation. Seeding content on a site like Twitter can function much like viral blog promotion, developing a high-reach profile and/or reach out to personalities with built-in audiences.

Social Networking Sites

While research shows that Facebook is not an extremely popular source for virally shared content, it would still be foolish to disregard its potential as a seeding mechanism. Most of the above mentioned criteria are present, particularly with Facebook groups and pages. The general social network audience is not as savvy and prolific as the Digg or Twitter audience, but the potential audience is much bigger on a site like Facebook.

Social Media Sites

Sites like Youtube present an interesting intermediary seeding platform, in that a video can be posted to the site and then the Youtube link can be promoted through the above-mentioned seeding mechanisms. At its core however, Youtube itself is a great platform. Increasing a videos audience on a site like Youtube generally requires getting it into featured or most-popular lists, a process which can be accomplished in a range of ways.

email

Email is the original online viral medium and for many audiences and messages still the most powerful. What it lacks in a prolific audience it more than makes up for in sheer potential audience size, as nearly everyone who uses the web uses email. The forward button ensures copying fidelity and forward headers promote social proof. When a purely mainstream audience is desired email is often the best viral medium, with blogs and social networking sites coming in a close second.

So how can we apply this to the Raging Bull project in order to gain maximum exposure?

We could put together a seeding plan that will identify where the UUJ racing audience are lurking on the internet- which includes interest blogs, eZines, social networking sites and portals. There are two types of seeding methods:

Natural seeding

Using our viral network - a network of sites we have developed over the semester, which we can seed to. The network is is a mixture of blogs, forums, communities and aggregators. We will contact the sites with great new pieces of content which they can then post on their sites to keeP their readers entertained. These placements give the viral presence on the internet and longevity as the project is linked and updated to from numerous places.

Paid for placement

We could place the Raging Bull event on key high-traffic sites and newsletters, targeting the core demographic audience. These paid placements always result in a sharp spike in traffic and spark immediate email traffic and conversations. Once these placements have run their course, we can remove them and no further direct traffic will be sent.

Other ways to Viral Market the Raging Bull Website

• Encouraging Links by registering with search engines and seeking reciprocal links.
• We could write articles and encourage other to post them free as content for their site. Then offer the articles to complementary sites to post on their site as free content, so long as the article contains links back to the Raging Bull site. YThe article could go far and wide, especially if it is carried on the wings of e-mail to others who will distribute the same article to their network of contacts.
• We could set up an affiliate program to encourage links. Affiliate programs are a form of network marketing that provides financial incentive for other sites to link to back to our site. However we will have to ensure we pay enough to make this attractive to already-saturated siteowners.
• Another option would be to send out news releases concerning a free service or product available. We would need a newsworthy event, contest, free service, or digital download. If a news release is carried by just 5% of the media it's sent to, the URL could be in front of tens of thousands of readers quite inexpensively.
• Word-of-mouth (on the Web it's "word-of-mouse") is considered the very best advertising, because it is unsolicited. As students with a large network of contacts we are in a prime position to offer this.
• We should make it easy to e-mail or fax the webpages to a friend, this will encourage readers to e-mail our webpage to a friend.
• We could write up a newsletter then encourage our network to forward it to their friends via e-mail.
• Offer Desirable Products or Services that Spread the Message such as blue-tooth advertising, memory sticks and online storage.
• We could enable visitors to e-mail post cards or greeting cards from the website. Such scripts are not very expensive. Using this method we could carve out some real interest and traffic.
• We could offer a digital game or utility for free download that carries the Raging Bull message. Games or screen savers open up a whole world of possibilities whereby users can e-mail them to their friends.
• Finally, we could provide free services or products on your site that help spread the message to an increasing number of people who hear about it. Several companies offer free e-mail addresses using a domain name. Similar to the phenomenal success of hotmail and hushmail, the free services could attach their own ads onto the free e-mail messages.

**Sources danzarrella.com and wilsonweb.com

Back to Top

Web Usability

This week we have been discussing website usability. Tim gave us a really good lecture the other week on it and how it is fast becoming a major area of concern and consideration for today's designers. Tim's lectures are great they teach us stuff from the real world from a real designer who is out there on the design frontline. In particular we liked Tim's 10 Commandments of Web Design - brilliant!

1. Thou shalt be clear about what the hell thou art presenting to the user.
2. Thou shalt design the site so that it's appropriate for your audience.
3. Thou shalt not force a user to wait for a megabyte or more of Flash file downloading as the first thing they experience at your site.
4. If thou must use a splash screen thou shalt make it easy for the user to get into to site.
5. Thou shalt learn as much as possible about typography, layout, and colour as soon as possible.
6. Thou shalt not use too many colours. Thou shalt attempt to learn something about colour harmony..
7. Thou shalt proofread, proofread, proofread.
8. Thou shalt look at thy site on a variety of browsers.
9. Thou shalt make sure your images are clear, and free of those dreaded Mad-Cow disease causing jaggies.
10. Thou shalt have clear and easy to use navigation which does not change with each new page.

According to webcredible.com, "Web usability is about making your website in such a way that your site users can find what they're looking for quickly and efficiently. A usable website can reap huge benefits on to your website and your business.

Webcredible.com goes on to give some good advice on how you can make your site more user friendly by adopting the following approaches:

Make the site easy to Navigate

• Organisation logo is in the top-left corner and links back to the homepage
• The term 'About us' is used for organisation information
• Navigation is in the same place on each page and adjacent to the content
• Anything flashing or placed above the top logo is often an advertisement
• The term 'Shopping cart' is used for items you might wish to purchase

Pages must download quickly

• Use CSS and not tables to lay out your web page
• Use CSS and not images for navigation items

Information should be easy to retrieve

• Headings
• Link text
• Bold text
• Bulleted lists

Restrictions should not be placed on users

• Don't use Frames
• Don't open links in a new window becuause it disables the back button which is used for navigation 50% of the time by users

source webcredible.com

Brand Identity Application and Control

This week we have been discussing the importance of corporate branding and how it is essential to maintain a consistent look and feel whilst always adhering to a specific set of guidelines, those of which become instantly recognisable

More often than not, printed literature or a website is the first piece of visual communication people receive from a company. Therefore it's often their first impression of what that company stands for.

For this reason, it's crucial we as designers develop material that communicates the corporate values effectively, and has a consistent visual look and feel. We can achieve this by always using the key elements of corporate identity such as wordmark, logotype, corporate colour and typeface. If this isn't adhered to, it creates a poor impression and weakens the overall corporate brand. By always including key identity elements, we can create a family of literature which clearly comes from one source.

Website Usablity

Website Usability can be defined as "Making web content available to a wide audience regardless of physical abilities, web clients, and personal preferences"

To simplify our tasks as accessible web designers, there a few specific categories that can be helpful as we evaluate some of the different types of users:

Visually Impaired

Those with low or no vision. These users may use screenreading software or may use the browser's functionality to increase text size and contrast.

Hearing Impaired

Those with low or no hearing. These users will need to be able to see a textual representation of any audio that is part of the site.

Physically Impaired

Those who lack the physical dexterity to use a mouse or a traditional keyboard. These users may use a variety of interface devices, many of which parallel the functionality of the traditional [TAB] key.

Alternative Web Client Users

Those who may be using a mobile device, tablet PC, specialty browser (such as a retail point-of-sale device), or gaming console. The dimensions and orientation of the browsing window on these devices may be unconventional.

Technologically Limited

Those who may have low bandwidth or low network reliability, such as users in remote locations or in developing countries. These users may turn off the presentation layer to have better access to content.

To design an accessible site, one of the most important things we can do is to separate content from presentation. People are visiting our site for the content. By separating the presentation from the content, we are giving users the ability to use whatever client is appropriate to access your content, whether it is a screenreader, mobile device, or tablet PC.

Back to Top

Usability Testing

• Turn off images but make sure image place holders are turned on
• Turn off support for JavaScript
• Tab through the page, try navigating without a mouse
• Try to change the standard font colors and styles in your browser
• Try to increase the font size by using the browser (view > text size > increase)
• Turn off support for stylesheets

source justcreativedesign.com

Page Layout and Design

When beginning the design of a site it is a good idea to step away from the computer and sketch a layout using good old paper and pencil. Pages should be based on a grid, with space allocated for navigation, headers and footers, body text and whatever other elements will be repeated throughout the site. This sketch will serve as a pattern for the site's appearance and should not change very much, if at all, from page to page.

Once we have decided where everything will go we can start thinking about our tables, and pencil in cell widths that will be required for fixed elements, and also decide which elements can be included in the page using shared borders or include pages. In the majority of cases using tables is the preferred method of laying out pages, though this is something that may change in the future as browser support for CSS positioning improves.

Taking this approach means we can essentially have our site designed by creating a single page that can be reused, with perhaps minor modifications, as a template for all the other pages in our site. We need to consider how the various content types of different parts of the site will be accommodated within the design and be sure that it meets the needs of all sections.

Consistent Design

Consistency is at the heart of good web design and this applies not just to layout but to every aspect of a site. If there are major shifts in the appearance or color of any part of a site it will be assumed by the user to have a meaning. This is fine if we are using it to highlight information or to indicate that the user is in a different part of the site, it can be very confusing otherwise.

Even where color changes are used to indicate location these changes should have some inbuilt consistency if they are to work. For example the colour used in a specific section of a site should be the same throughout that section and/or the color change should be reflected in the navigation bar.

As well as consistency in colour, positional consistency is important. Navigation bars, navigation text, location indicators, logos, footer information and so on should be in the same place on each page. The width of margins, the positioning of images within articles, the size of photographs, the amount of space around text and images, the positioning and style of captions for images and so on should also be consistent.

We should carefully consider and decide upon all these things at the time we are making our original sketch and by plan how we will include these elements in various pages.

Using Cascading Style Sheets (CSS) to control as many aspects as possible of the page design is helpful in achieving overall consistent design.

source outfront.net

---

Week 4 Lecture Review

Making Presentations

Have a logical Sequence:

Beginning

Middle

End

Presentation Skills..

Know your stuff

"Breath the Room"

Find out who's on the panel, find out what they're looking for. Do the groundwork, know the company and know your stuff What are the objectives of your presentation and what are the main points you're trying to make? It is imperative you know this!. If the panel asks if there'a any question then ask some!

Key Phrases and Cue cards

Get some key phrases - it doesn't hurt to have some cue cards so if you get stuck you can look down at the card for a quick reminder.

Show Enthusiasm

You want to care about the subject. You want to share that enthusiasm with the audience. Even if the audeince wouln't be competetly interested in you subject your enthusium will be infectious. You will make a better presentation if you care about your subject matter.

Practise

5 minutes in front of a mirror can help. Use a timer because the 5 minute timeline is being strictly adhered to. You will get a zero for the time-keeping mark. Often in real life people will ask for a certain length of time to see how well-prepared and organised you are. It shows you have the disicpline to control yourself and your speech. Cue cards help to balance out the time. Another way to practise is to video yourself. Don't write notes on your hand ala Sara Palin.

Perception

Perception is important at a job interview. Make an effort with your appearance. Looking confident is important too. Altervatively you don't want to be over confident either!

The Basics

Believe in what you say. If you can tell the truth and back up your statements, really stand behind your words. Honesty is the best policy!

Remain Calm

Envision you're "painting a wall at the back of the room" to help remain calm. Breath the room!

Introduce Yourself

Hand out business cards to everyone on the panel. This is so they remember you.

Speak Slowly (but not too slowly)

Pause for effect

Listen to your audience and adapt

Make sure you can be heard

Try to project your voice to the back of the room.

Engage the audience.

Try and make eye contact. If you're really nervous hone in on one person. Eye contact is important becuase you need to make sure that everyone on the panel gets eye contact with you at least once. Use your hands to chanel a zone between you and them.

Rhetoric

Speaking techniques. You can use certain things to make your point, such as REPETITION, ALLITERATION, (a technique to remember what you have to say), PACING (how you pace your delivery ie don't say everything at the same speed), METAPHORS (likening something to something else), RHETORICAL QUESTIONS, HUMOUR.

Use your hands

You need to be aware of your body language whilst making the presenation. Another good reason to practise with a video. Cue cards give you something to do with your hands! Use you hands to communicate, use your hands together with your voice.

Handouts

Bring printouts of your presentation. They are a good distraction for the audience. You don't want people to know what's on the last page of the presentation before you present it. Handouts are good becuase after you've left the room they will be able to go back and re-look at them after you've left.

Preparation

Correct preparatation is imperative. if you have gone through the slides, you know your stuff and you've practised it will come across in the presentation. Naturally you're very nervous, your hands are shaking etc, if you've done it many times in practise it will be easier.

Fight or Flight

Try to get peoples attention onto the slides and the message you're delivering intead of you!

Less is more..

Do not overload your slides with information. They are there to support you, not to do your job. You are not supposed to support the slides! Make slides that REINFORCE words you're speaking and not just repeating it.. SEVEN WORDS per slide should be the maximum. Conside the typography and keep it simple"

"Handouts are easy marks"

Major Project Presentation

5 minutes. 10 slides gives you 30 seconds per slide.

Policy: PowerPoint

No videos. No sound effects or music. Just use text and images.

---

Back to Top

Week 3

Portfolio Content

I spent some time before Christmas and collated all my past work for the portfolio. I haven't decided way I want to display it yet. Since I only digested how to use lightbox during the Deborah Thomason project I imagine I may be using something like that.. I love photography (as you've probably noticed web design is not a career path I will be pursuing) so I would like to display primarily my photos and artwork. I see my photographs as my raw materials and I love being creative with them in photoshop once they are taken. Web Design? Not for me! However I've come this far so I may as well finish my degree.

CMS

I spoke to Paul in the lab about Content Management Systems. I was going to use FROG because it's free but I was finding it quite hard to learn so he suggested I try Perch instead. There's a £35 one-off cost but it's much easier to implement and maintain. Of course ideally the best solution would be to create a custom one in php but I struggle with css so that is not a viable solution for me. Anyway I think for web design there are so many things you need to be good at. Design, coding, sales & PR, and you also need to be motivated, organised and have good business acumen. Well I'm only OK at some of these things and altogether useless at others. However I think that there are so many people good at different things it's also possible to achieve a nice workable design by collating readily available resources. I'm talking about things like js libraries, existing CMS, istock photo, things like that.

For my project I am learning new skills such as CMS, database and maybe some php, as well as jquery in the other modules, but I'm also investigating what existing resources are available to web designers to help with their work, such as brush libraries, code libraries and images. Previously I've tried to create similar items from scratch but they just don't look anywher near as good. I think it would prove useful to learn how to harness existing resources to achieve a professional finished project at every level. Anyway whilst conducting all this research I've realised I will never be at a standard required to make any money from web design, but I think I could use the skills I have picked up to explore other avenues.

Ardville Business Cards

Got some business cards printed up... The green didn't print out properly and is rather putred.. However they shall do as a first draft. I used the vector outline of Riathans head for the image but I might change this to the new logo for the second print run. I got them printed at RW Pierce's through work, they were bloody expensive too!

---

Back to Top

Week 3 Lecture Review

The Brazilian Wax Strategy

This weeks lecture is called "Brazilian Wax", which is about strategys to get viewers for your website.

Who are we targeting?

Who are the sneezers? (early adopters, thought leaders, influencers)

How can we find the sneezers?

Make a list

keep track of responses, it's not enough to have a 'rough idea', you need to know exactly

Research

Found out what makess these pople tick - what do they like - whose work do they admire. How can we make an impression - they must get lots of e-mails every day! How can we turn a cold call into a warm call? 6 DEGREES OF SEPARATION! Friend of a friend of a friend.... Chris sets up first contact e-mails with "hello from Belfast" as the subject line. He then filters any replies to this subject line which automatically places all such replies into a specified area.

Fine tune the list:

Bloggers Conference Speakers Designers Educators Tailor each mail for each individual!

"It's hard work"

lots of email, networking, getting out there, you have to be prepared to strike up a conversation with people.. Be a nice person! Always say thank you, gestures go a long way! Not just to your tutors but to clients etc, and generally in life!

The market is a conversation. Building a community can help your business, thanks to twitter you can get your stuff heard pretty much anywhere.. Be selective, identify the people you want to have a conversation with... be strategic! Do it well enough to get a lot of attention. Thanks to Viral Marketing the word can spread really quickly.

Get Organised... have a strategy!!

It takes time.. don't rush it.

Make PR easy... write a press release.

---

Back to Top

Week 2

This week I have been reading up on Frog CMS (because it's OpenSource) and Ajax. I've also been doing some reading on jQuery. Yes this is from our COM601 module but it is also relevent to this module in that I will be able to incorporate what I've learnt into my MP. At time of writing I have absoloutely no idea how to integrate an CMS into a website, so I'm going to toddle off now and see if I can learn it...

Ah. Problem. It appears I have to set up my database first using something like phpMyAdmin, which strangly enough, I have no idea how to do either. So I shall delay learning Frog and instead switch to phpMyAdmin. Have just found a useful lookin tutorial on http://www.bicubica.com/apache-php-mysql/index.php so will have an attempt at that.

www.ardvillestud.com

Today as well I've changed the hosting for www.ardvillestud.com. It's currently with those scoundrels fasthosts (hey they were recommended to me by my Tutor at Belfast Met..) Anyway I've been, ahem, paying for hosting as I had to wait for the subscription to end (like I say, scoundrels). Anyway the hosting package is thankfully set to expire soon, well April so I wanted to get alternative FREE hosting set up in the interim. I did have a look at DreamHost as recomended by the Standardistas but for now I'm going with 000WebHosting, I currently have a few other domains registered there and I'm fairly happy with them.

Back to Top

Week 2 Lecture - Personal Portfolio

What will it look like

What are you good at

Who are you? What do you do? Play to you strengths!

What drives you?

Spend some time now working all this out.. This is a site about you - your personal promotion site - who you want to be out in the workplace - if you don't have that kind of idea it's going to be very hard to build a site that communicates that effectively. The natural thing to do is what's expected like other web designers, but what the guys are looking for is something that goes beyond this column metaphor. Start by thinking about this, and what they want to present. Remember anything that you do will be a commitment on your time, ie using multiple brands or using twitterfeeds.

Your Branding

"The Brand is everything"

Think about your brand. It's not just about the logo/wordmark, it's what you stand for, what you are. It's really critical you consider your brand, spend time thinking about it, write down key values, identify your brand values, what you stand for and who you are. What will represent you and your work. The brand is absoutely everything!

Branding covers the words you use, the attention to detail, the tone, the copy, perfection, even how you sign an e-mail. You're constantly building an aura! Establish who you are - define the brand with a starting point of who you are etc. Sit down and THINK.. Spend time doing this so everything is perfect.

BRAND STRUCTURE

Content and structure feed each other... Get the best stuff you've done, use the kind of stuff you want to do in the future as this is what people will look at. There are many ways to handle this.. when you have the content and structure together you need to think about how is this going to be placed on the site? One page sites are quite nice.. How do you communicate to the client to say something is still work in progress? Have a really strong idea to start with and follow it through.

IDEA

Something that ties everything in together. Use pen and paper.. sketch!! Pay attention to the grid. Know who you are. Think "what am I?" and how do I bring that through. Any element on the site should be interrogated to see if there's anything that needs improved upon.

Typography & The Grid... USE THEM!

Jewell

Making sure it's perfect - pay attention to everything - don't accept second best.

The Fold

Think about the stuff that is most important and put it at the top. Prioristise content - eye grabbing stuff at top of page. "The tease above the fold" But the tease has to be good enough! You have a short time to make a lasting impression. If the stuff about the fold is crap then they may not scroll down.. so think about what's on the top and on the first page.

Once you grab their attention you have to think about how to keep them there. Show detail of the work, be careful in the way you choose to do this. You can tell if someone has spent a lot of time and paid attention to detail, especially in photoshop. Remember what we learned in first year in the image module! Describe the work in an appropriate way, what was your role? Be honest, and say "I took part in this", or "I did this bit", mention who the client was but be honest about what you actually did. When you're showing work, don't just use a cropped image, show the actual work, ie link to a website/work.

People will look at your mark-up! Sell yourself as someone who gives a personal service as opposed to a big agency, hence the use of friendly language. But consider your tone and the way you're speaking. Don't fall into the trap of sounding like all the other designers. You need to know what your doing in terms of code as well as your source code will also be viewed as part of the hiring process.

"You only have a short time to make a lasting impression"

Contact Details

Second most important thing... if people are impressed with your work it's important that they can contact you easily from your folio site. Just an e-mail address is not enough. Have some other way to reach you straightaway, ie a phone number! You could use a pay as you go mobile specifically for this purpose, then you will have a business mobile. Leave a voicemail. Or a skype number will do the same thing.

Contact Form...

This isn't always a good idea, ie did the submit button work? Good in they show professionalism, but the client don't know when they're going to hear back from you.

Lee Munroe - top Portfolio sites

Airside Process Posts

Cultured Code

Back to Top

Project Management Week 1

For the first week I plan to create a basecamp account where I can plug in the milestones for the MP. I plan to use it to schedule my workload and to give me a live working document detailing what I will be doing over the 12 weeks and when. I'm going to read over my inital MPP and plan how I am going to divide the work up over the semester. The soft launch is 25th March which is only 52 days away so there's quite a bit of work to be done. I'm pleased to see that we're learning jQuery over in com601 as this is something I really wanted to learn and it will have an impact on my MP.

Frog Content Management System

I've been looking at Content Management Systems, and I think Perch seems quite a viable option but you have to pay £35... So I'm thinking I'm going to use frog becuase it's free. Now all I have to do is learn how to use it!

---

Week 1 Lecture Review

For the first lecture back the guys outlined what would be expected of us this semester. The detailed the deliverables and the credit points attached to each. They gave us our deadlines and also gave us some advice in how we should conduct ourselves throughout the semester, ie in terms of time managament etc.. essiental skills for the real world of work!

This semester we effectively have 2 design modules which means they are worth a total of 40 credit points, which bascially means 2/3 of the workload will be applied to design.

512 Major Project (30 points)

Technical Integration 40%

Innovation, Creativity & Design 40%

Project Management 20%

Technical Integration Considerations

Covers appropriate choice of technology, what should I use to build this project. Does it work, is it a good source of experience, what does the source code look like, how well does it function etc

"The right tool for the right job"

Innovation, Creativity & Design Considerations

This involoves using stuff in a new and intersting way, instead of just covering old ground. A good way for us to evidence our progress is to maintain our "plog" - weekly progress report. We are encouraged to build, check test, build, check test..

Design Appreciation

Even if design isn't our strong point and we more towards programming, there are rules we can follow such as grid, line-height, typography, colour, headings and of course CONSISTENCY. We are encouraged to practise our flair and to have the confidence to try something new!

"Dare to Do"

Project Management Considerations

This covers both effective time management and Quality Assurance (QA)

Quality Assurance

Attention to detail, spelling and grammer, link checking & testing, no 404's, make sure everything lines up on the page and everything is consistent. We also need to ensure our content is all present and correct.

Post Project Report

500 words reflecting on how the project went, how I spent my time, the good and bad points, what I would have done had I more time, this is what I set out to do etc We also have to supply a bibliography and reference section detailing any outside assets we used for the project, for example javascript libraries, images etc.

---

Brand Identity Application and Control

This week we have been discussing the importance of corporate branding and how it is essential to maintain a consistent look and feel whilst always adhering to a specific set of guidelines, those of which become instantly recognisable

More often than not, printed literature or a website is the first piece of visual communication people receive from a company. Therefore it's often their first impression of what that company stands for.

For this reason, it's crucial we as designers develop material that communicates the corporate values effectively, and has a consistent visual look and feel. We can achieve this by always using the key elements of corporate identity such as wordmark, logotype, corporate colour and typeface. If this isn't adhered to, it creates a poor impression and weakens the overall corporate brand. By always including key identity elements, we can create a family of literature which clearly comes from one source.

Website Usablity

Website Usability can be defined as "Making web content available to a wide audience regardless of physical abilities, web clients, and personal preferences"

To simplify our tasks as accessible web designers, there a few specific categories that can be helpful as we evaluate some of the different types of users:

Visually Impaired

Those with low or no vision. These users may use screenreading software or may use the browser's functionality to increase text size and contrast.

Hearing Impaired

Those with low or no hearing. These users will need to be able to see a textual representation of any audio that is part of the site.

Physically Impaired

Those who lack the physical dexterity to use a mouse or a traditional keyboard. These users may use a variety of interface devices, many of which parallel the functionality of the traditional [TAB] key.

Alternative Web Client Users

Those who may be using a mobile device, tablet PC, specialty browser (such as a retail point-of-sale device), or gaming console. The dimensions and orientation of the browsing window on these devices may be unconventional.

Technologically Limited

Those who may have low bandwidth or low network reliability, such as users in remote locations or in developing countries. These users may turn off the presentation layer to have better access to content.

To design an accessible site, one of the most important things we can do is to separate content from presentation. People are visiting our site for the content. By separating the presentation from the content, we are giving users the ability to use whatever client is appropriate to access your content, whether it is a screenreader, mobile device, or tablet PC.

Back to Top

Usability Testing

• Turn off images but make sure image place holders are turned on
• Turn off support for JavaScript
• Tab through the page, try navigating without a mouse
• Try to change the standard font colors and styles in your browser
• Try to increase the font size by using the browser (view > text size > increase)
• Turn off support for stylesheets

source justcreativedesign.com