Defining the Purpose for We Are Awesome

The difficulty I find with working on my website, is that the concept is not clear, or as greatly defined as it could be. The idea is that it will aim to strengthen the bond, I feel, is currently impaired among individuals in society and aspire to reconnect humankind together again and make it stronger. But, at the moment, at least, this is easier said than done. 

In my Prezi proposal I stated that We Are Awesome will "champion and then foster a collective identity that we all share, but hardly realise: We are all connected as human beings" and in my pre-proposal I said that the website will be "centred on the greatness that I know humanity as a mutual power possesses, to promote its beauty and to empower the idea of a collective unity...we have with another." This raises more questions than it answers.

In being broad and not explicit with the purpose of what the website will aim to do and how it will do it, does not bode well in proceeding with it, without a better definition and purpose. Therefore, it is important that the site and how it will reach its aim, is better explained.

There are numerous impediments that necessitate the divide among individuals, such as  socio-economic factors and a lack of education. There are surely more, but these are reoccurring. I envisioned We Are Awesome in some way plugging the divide and ensuring that its existence would narrow this and also empower individuals, to be on the same playing level. I am under no illusions that this endeavour will act as a cure for these problems, but I would like to, in some way, curb the divide and unshackle individuals in the process.

Education is a primary reason for a disconnect among individuals, as education enables the growth of a person; if one person gets an education they will grow, while the other without it, will not. Therefore, We Are Awesome will aim to fulfill this purpose; to put issues that affects the divide into a relatable manner, that will be understood  by a wider audience and hopefully, foster in a more stronger and equal society. Topics like politics and capitalism are difficult to relate and generally, do not enthuse excitement among the population. But what if, they did? This will be We Are Awesome's purpose. To make is so.

If making awkward topics understandable, empowers individuals, then stimulation will foster in a collective identity. And by stimulation, I mean celebrating and promoting this forgotten ideal to make it commemorated. Not all will be taken by an analysis of politics and wider issues, owing to the status quo that all individuals are unique, but for these, the idea of togetherness with your fellow man may just work. To do this, this will have to be done in  a way that provokes but in a covert manner, through entertainment. and lightheartedness. To show the idea of collectiveness will not just be to show, but to entertain while doing so, that individuals will more likely warm to the idea of a landscape where your fellow man is just as important as you. This will be We Are Awesome's secondary aim.

We Are Awesome will provide content through the written and video form that aims to meet the site's purpose, and also - pardon the pun - to keep humanity awesome.

Creating the Logo in Less than 6 Hours for We Are Awesome

Like the banner, the logo is significant aspect of the identity of any website. If the banner is the supporting player, then the logo is the star. Therefore, it is vital that the logo represents that onus - and so does We Are Awesome.

                                                        

Fulfilling this criteria was not as difficult as initially envisioned; for my 6 hour banner session prepared me perfectly. And creating a logo while also keeping in line with my website's theme, was difficult in thinking, but simple in execution.

I wanted my logo to be very minimalist in design and uncomplicated in structure. Less is more, is the anthem and it was one that I followed. I must reiterate again, that Photoshop and me will always have a problem with one another, but this time, we got on - and creating what I wanted, was more enjoyable than a burden.

Having made the banner previously, I more or less followed the same specifications for the banner size; if memory serves, a 150x100 logo size was chosen. I selected the text tool and wrote my Website's name into the canvas; the only difficulty being the selection of a font, I played around with a few and decided to go with a simple text and a coloured background, in keeping with the aforementioned plan.

                                 

                                 

.

There were a few hiccups in finding the right tools, notably the bucket tool which took an age to locate, but once I did, it was child's play. I played around with a few colours, but two stood out in symbolising, in my mind at least, what represents my vision for my website

In the end, I went for the red, solely as green did not give off the powerful ambience as red clearly did. It might be simple to most, but the end design is what I feel is strongest to my vision and of course, my website, We Are Awesome.

Creating a 20 minute Banner for We Are Awesome in 6 Hours

Identity plays a fundamental role in the presence of a product being memorable with audiences long after their use with a product, which upon re-introduction after a long time is instantly associated with the product and its functionality solely on the unforgettable visuals of the branding. This what We Are Awesome must achieve, starting with the banner first.

As the website's theme is based on the idea of rekindling humankind as a collective force, the banner must represent this. However at this stage, my website's purpose is not narrowly defined and that is still up in the air. One problem I see is that my website has the potential to come across as too pretentious, and another, that it might be ineffectual in achieving what I want: the championing and celebrating the idea of togetherness. See, that sounds really pretentious.

At this stage however, I want the banner to give an ambience of delight and radiance, that when looking at the banner, one will get this sensation. And thus, I sourced some images that more or less gave this feeling, and set about to make it a banner.

Making the banner was such a difficult endeavour; one that took 6 hours. My inexperience but also my resentment with using an application such as Photoshop played a massive role in this. It was not clear to me that I had selected the incorrect specifications until a few hours in, as my computer continuously crashed under Photoshop's incessant demand for  more RAM space; the crashing typically instigated by the placing of an image onto the banner that took upwards of 30 minutes to place.

                               

                              

But design wise, I like the idea of the maxim "less is more", which would imply a minimalist approach. Therefore, I wanted my banner to be simple and streamlined - and be minimal in design. This, upon deliberation with the pictures I sourced, necessitated that the images be placed alongside one another and was my aim for the design of the banner. But this was problematic in reaching as my computer kept crashing.

It was only until I decided to canvas tutorials and forums online that the problem became clear. For Photoshop to be efficient on a computer, it must not run off the computer itself. And so, I set the program to run through an external hard-drive and the crashing stopped. But another problem emerged; the logo I had created would not save under the "save for web and devices" tab. At this point I was 5 and a half hours in, and the inconvenience of creating your logo and finding it could not be saved, to be used on a website that you have trouble working on anyway, was indescribable.

Again, I looked through the forums and it became clear: I had selected the wrong banner size which could not be saved for the web, no matter how hard I tried. So, I had to start all over again. But having realised and understood the problems which got me nowhere in 5 and a half hours, the banner was then created in 20 minutes.

And I feel, that the banner is perfect for my website - it emits a genuine sense of happiness and radiance. It took me 6 hours to make a 20 minute banner, but from looks of it, by God was it worth it.

Trying out HTML and CSS Some More

My confidence with coding is still in its infancy, but its growing the more I practise. I'm still trying to grasp the basics, but my last foray into coding - as detailed in an earlier blog post - was not as bad as I had initially envisioned. Which gives me the hope that I will get to a competent - but mainly habitable - level which will enable me to bring what I have planned with We Are Awesome, to become a reality.

The problem I'm finding at this stage, is the use of Dreamweaver and its complexities. The program has a lot of functions and tools to make the creation of a website easy in practice, but the overkill in functions, does not instill within me the greatest of confidence when using the software. Therefore, I decided - as I've seen on many tutorial videos on Youtube - to have a go at creating a very basic home page in Notepad, to inspire me that regardless of program, creating a website can be possible even in something as simple as Notepad.

I followed a tutorial I found on W3 Schools that simplified the structuring of  HTML and CSS. The instructions were very simple to lead on from. The tutorial about creating a homepage for a website, introduced  some challenging aspects to me which I had not encountered up until this point, such as font and colour types, but mainly the implementation of a style sheet within the HTML page, which Dreamweaver enables you to keep separately.

Working through the tutorial my understanding on how to use certain tags improved and opened my eyes to the possibility of more functions that could be implemented into a website in the future. To change the font of a particular section of text, you would have to have to define that area first; then using the "font-family", you would specify the font by adding a font type such as "Georgia" and in the event the browser were not to be compatible with this font, you would add in another font type like "Times New Roman" just in case.

Having  inputted the <ul> tag to act as my navigation tabs for the corresponding headers , I set about to style them on the page using CSS and move them to the left of the page. To do this, the "padding left" tag was needed and the position of the navigation tabs could be set to a particular distance on a page, using the "absolute" tag. And repeated the process changing the position if necessary, and in the end, I ended up with a very basic, but important web page which will bode well for my expedition into coding, to end up with the vision for We Are Awesome.

Cheating to Win

With the barriers of inhibition broken and the plunge taken into the the depths of a project that had brought worry to a person of my primitive proclivity, I managed to establish a web page despite of my presumption beforehand that such a task would be tremendously difficult: But what I noticed more than anything, was the time it took to accomplish this feat.

This is down to lacking a conclusive knowledge of the function of specific tags needed to create elements to structure my webpage, which often left me having to resort to online resources, so that I could input correct markup language in order to build what I wanted, ensuring that an extensive amount of time that could have been saved, was expended.

What I do not have is a cheat sheet, which would reduce the time spent checking to ensure that correct markup language is inputted, and to avert a situation where wrong code has consistently been entered, making the entire project incredibly demanding to proceed with.

To ensure that such a thing would not happen and to leave me with more time to expend on areas in my life of far more importance than this website project, I made my own "tag" description cheat sheet consisting of the markup language that I would likely need to use frequently, and which is found below:

Div: The <div> tag is used to separate a HTML document into sections on a working webpage and allows that particular line of code to be styled with CSS. 

Par: The <p> tag allows text, in the form of paragraphs, to be inputted into the HTML page. The use of the <br> tag permits the text to be broken up into smaller paragraphs - if that is what is desired - by forcing a line break. 

Li: The <li> tag enables a list to be placed, in either an ordered or unordered format, into an HTML document. For example, the <ol> tag will place a list of the colours red, blue and yellow into a list form prefaced with the number of their position in that list. The <ul> tag will list the colours in the same list format, but will be prefaced with bullet points instead. 

Title: The <title> tag essentially gives a name to your HTML document and without a definition of your HTML document using the <title> tag, your webpage will not validate as an HTML file.  

Link: The <link> tag does exactly that: it links a document to an external style sheet, to style the structure of the HTML document. 

Button: The <button> tag warrants a functional button to be embedded into a HTML document and styled with an image file, to later be clicked on by users to either be told something or directed somewhere. 

Col: The <col> tag makes it easier to set the background properties of columns within an HTML document and makes it troublesome to apply styles to an entire column. 

Foot: The <footer> tag defines the bottom part of a HTML document, referred to as a footer. It is typically used in webpages as a location to place information about the website and its contact details. It is notable that this tag can contain more than one element within it. 

Trying Out CSS and HTML

Having grasped a rudimentary understanding of the theory behind the use of HTML and CSS, it seemed fitting to engage in pragmatism and begin work on my website, We Are Awesome.

Fortunately, as I have Dreamweaver on my personal computer, the inauguration of process is and was, able to be enacted without the dependence of University computers, making progress and completion of the website,  less of a burden than it would have been.

Having a rudimentary but not comprehensive understanding of HTML and CSS, trouble was likely to arise, especially to begin with. At this stage into the project, I would liken my knowledge of the intricacies of Dreamweaver and insight into HTML and CSS, to that of a gazelle; the former and the latter, to that of a lion: my chances of not surviving when it comes to both, are not great.

But, persisting with experimentation, eventually, the ball began to roll. Remembering the minimal education that I was given on the subject, a root folder was created containing an index, when selected, would launch my website into a browser and folders containing files for images and videos was also produced before proceedings got too serious. Without the root folder and folder files within it established beforehand, it would make maintaining and also and managing the project, rather difficult as a root folder stores all your progress and content in one place.

Having done that, the aim of the session turned to bringing the wireframe to life, I laid out the title of the website to go in the centre of the webpage, which was more easier than initially envisioned. Once I realised the functionality of the "div" feature, which acts as a wedge in-between content, did speed with coding pick off and quickly lead to establishing "tab" buttons, to go on the top of the webpage.

Getting to grips: crude HTML look at We Are Awesome

                            

Understanding CSS and HTML

To ensure that the vison set out in the pre-proposal for We Are Awesome is met, it is important that a basic, but fundamental concept is learned: the use of CSS and HTML.

Despite of the valiant intention to create a website with the intention to promote - or even to restore- the idea that humanity is an inclusive and intimately collective force, which is not always realised, using videos and the written word to do so, such a task would be futile if the language required to do this in website form, was not learnt nor understood. 

To ensure that this project would not end before it even had a chance to begin, and to grasp a better understanding of the markup language in order to bring the vison of We Are Awesome to life, a lot of time was exerted into being better acquainted with CSS and HTML.

Using handouts, scrutinising online resources and visiting Lynda.com, gaining an understanding of the role of both - and how to use them - was not as difficult as I had envisioned, despite the predilection of my constant insistence of referring to myself as a "caveman."

HTML, or Hyper Text Markup Language in its lengthened form, denotes the content - font, pictures and written text, to list just a few - that will be displayed on a web page, once read by an internet browser. This content, to use a paragraph of text as an example, in order to be displayed, is put in-between two "body" tags, and the written paragraph of text, is enveloped on either side with a "p" symbol in brackets. This is the method and also language of how a paragraph on a web page is read by the browser, allowing it to be displayed on a webpage, in a basic but crude form.

Cascading style sheets, condensed to CSS, is the markup language which affects the presentation and structure of a website, as I came to understand from my research. For example, the look of a website - the font, the colour and spacing of content, on a web page, to name just a few, is directed by the CSS, allowing the HTML content to be structured and shaped into a webpage that is visually appealing.

In order to do this effectively, the "selector", which defines the specific area of the page that is to be altered, is chosen and works in conjunction with the "declaration", which defines the value of the content - the font used and colour displayed, for example. If I wanted to make a colourful overhead title for a webpage, I would first input the title text into HTML, then using CSS, I would envelop the word "color" with the word of the colour I would want to use, which could be red for example, with curly brackets to essentially create a title that would be red-coloured: it's that simple.

Having grasped a basic, but fundamental knowledge of how to use HTML and CSS, the initial dread of reception with something so difficult in thinking, was proven to be so simple in practice. It would now be appropriate to continue in this unexpected wave of triumph having now conquered my hesitancy in embracing something other than my wooden club, and proceed with putting my understanding into real practice, with Dreamweaver. The long journey to the completion of my website, has begun, and slowly, I get there...

Ceysun Dixon (KU ID: K1326851). 

Wire Frame, Mood Board and Flowchart for We Are Awesome