300 Word Website/Project Evaluation

The most demanding aspect in the creation of We Are Awesome, was to turn the idea of improving humankind, into something that could work online. This idea, was inspired by my own reservations on the inequality that has manifested itself among civilisation as it continues to progress. To realistically achieve this with a website, required constant re-evaluation and a leap of faith. This initial idea envisioned and worked towards, was met beyond my hypothetical expectations.

Numerous challenges were faced in achievement, particularly the design of the website and the content offered. The final layout of the website is concise and sleek, which was ensured that it would visually appeal, if the premise of the website were not to. The content created had to be inventive, as the website is purely conceptual; it needed to educate, enthuse and inspire – it confidently accomplishes this.

It is debatable if a true understanding of website skills can be derived from the creation of one, when you are necessitated by your module to create one. It was only when I initially used Notepad to experiment, did some confidence amass with the creation process and a better understanding of HTML and CSS and its relevant  tags became discernible, where it was possible to comprehend the task at hand and use Dreamweaver efficiently . Put simply, without tutorials online, the website would not have been possible.

Little of the website requires improvement, but the banner and logo could have been implemented better. Many problems were encountered with the coding of the website, which included the constant incorrect application of syntax, troubles in implementing animations and at times, an envisioned page structure, which only tutorials could fix. The next time, it would be interesting to not rely on tutorials as much, to have a greater appreciation of coding.

Word Count: 300

Finalising the Website for Submission

The website as it stands, is pretty much complete but needs some minor adjustments and demanding implementations before it is submitted.

For one, the content for all my content pages - for the "Political Analysis, "Entertainment" and "Media" pages - are all now finished and require that they simply be fitted into their relevant pages. Having done this many times before, and having pretty much structured the pages in anticipation for the content once complete, this was a matter of simply using the img tag to link the pictures from the images folder from within my site root folder into an image size previously established for the webpage, and also the <p> tag to input my headline underneath the image.

Styling the content: Difficult at first to structure it to my requirements 

What was problematic however, was ensuring that the images - or content through the images and text - on the "Home Page"  was structured to my specifications. It was difficult to get the structure of my content to look presentable and streamlined on the page and it took a while playing around with the sizing of the table width and cell padding attributes to get it to layout that I was happy with. This process was repeated across all content pages and after a few hours, my finished content was implemented onto my web pages.

Got there eventually: Page structure as envisioned

I was faced with a difficult choice with what to do with my banner. Having created one that I was happy with in Photoshop, when it came down for inclusion across We Are Awesome, it did not look like it belonged on the website.

This was down to the different type font used for the banner, not to mention the red background colour used as well. I believe two of the type fonts used heavily on the website are Aliquam and Bebas Neue and it just did not mesh well with the banner's type font. At this point, I am happy to have even got as far as I have with this website and survived the six hours it took to make the banner in the first place. Therefore, I have decided not to include my Photoshop created banner and use a text title, which I feel looks much better on the website, than the banner did.

Also, with the look of the website, I wanted to implement a visually stimulating characteristic within it to make the appearance of it, more engaging for an audience. Therefore, I decided that I would implement an animation into my background to fulfill this premise. Looking at tutorials online and W3 Schools as well, it appeared that this would be burdensome to achieve purely if I were to code it myself; so therefore, I took the easy way out and downloaded a template from Modernizr, a website offering templates to use and whacked that into Dreamweaver. The only thing that I had to do with the template was to specify the images that would link to the revolving background and cite the timing of it.

JavaScript template for the animated background

As briefly discussed in a previous post, the easiest way to input video into a website would be through the use of Youtube. All it would require is the YouTube URL to the video and details of the box size that would be displayed on the page with the use of the iframe tag, for video to become a reality on a webpage. And it really is that simple.

Easy as 1-2-3: Embedding the video into HTML and styling it with CSS

With this feature added into the web page, this brings the We Are Awesome project to an end. I must say that looking at my website I am extremely happy with it, but also surprised as well. I never thought that this was achievable when the project began, nor that this would be achievable once it ended. It just goes to show that whatever you put you put your mind to, you will succeed with the task at hand, not to mention the inner awesomeness you will find within yourself, to accomplish the impossible along the way.

We Are Awesome finished: Just awesome

Producing the Media Content for We Are Awesome

Along with empowering audiences by putting important issues into context, entertaining them with irreverent but enjoyable listicals, I also wanted to inspire them with heartfelt and motivational videos.

This would ensure that my website also possesses the power to inspire - which is an important theme for my website, among others - and would diversify it in terms of content, with videos to go along with the article heavy premise.

But I had a problem in conceptualising how these videos would take form. At this point into the project, my website is as strongly defined thematically, but the habit of making a video with the goal of inspiring others, can come across as cheesy and pushy. And it could more or less compromise my conceptual vision of how a website centered around fostering humankind to be more connected and powerful, should be like.

Therefore, I created a character that I felt would be better suited to discussing and proffering inspiration to an audience and make it fit into this idea of conception that I am aiming for with my website. His name is Mystery, an enigmatic character, who offers pearls of wisdom, while wearing a box on his head. The character-led approach, I felt, would be better suited to a video intended to inspire, than if I were to present it as me, as a character would give the videos a feeling of eccentricity and excitement, that a non-character approach would have trouble replicating.

Getting this character, Mystery, to become a figure of intrigue and authority on the subject of inspiration, was troublesome. I played around with the voice and the style of articulation and settled on what I can only describe as "1950's Received Pronunciation." Then there was the matter of what he would say in terms of dialogue to fulfill the motivational/inspirational premise. I looked at interesting facts on the internet and on motivational blog pages, and shaped his dialogue based on that. I felt that it was important to keep the videos to a minute or less, as to not bore an audience - and made sure the dialogue would not exceed that.

I sourced an appropriate location and background to film the video and decided that the video would be one take. This was purely in the interests of keeping me on track with life, not to mention the website, as there was the potential to get carried away with it.  A script using an analogy about a bumblebee and words of wisdom on life was written, to keep me focused in ensuring that the video would be under a minute, and have structure to it, as I brought this character to life - which was hard to do.

Upon finishing the video after many takes, it was uploaded to YouTube as this would be the best way to ensure that the video could be embedded onto my website and make the video, accessible on all browsers.

Completed video titled "Mystery Speaks: The Humble Bumblebee":

Producing the Entertainment Content for We Are Awesome

To broaden the appeal to a wider audience with my website and to diversify the offerings on it, the potential to do this would be quite narrow with articles solely on politics which, while important to the livelihood of audiences, are rather boring - not to mention would put off a large number of people from considering the website as a destination on the internet.

Initially, as mentioned in previous posts, I envisioned a "Human Interest" section on the website which would contain content that would appeal to a wider audience - but in what shape, or form, I did not quite know. The content for such a page would be very broad, and that in itself creates a problem: being a creator, as well as a coder for the website, the potential for content not to be specifically tailored for the theme of my website, is strong, due to the broadness of the term "Human Interest".

I set out to narrow the term, by conducting research as to what other article based websites are offering. Looking through a few popular websites, Buzzfeed was a massive inspiration in defining the type of content that I want to offer and produce. The type of content Buzzfeed offers is simple, but mostly entertaining: and that is the type of content that would attract a wider audience to the website, I feel: entertainment.

Thus the content tab was changed from "Human Interest"to "Entertainment" and would reflect, pretty much, the type of article listed above: a list based article, but in line with the theme of my website. I did not have much trouble producing the content, as I consider myself more at home with writing than coding; but if anything, writing the content did take up some time, on account that it fitted perfectly within the context of my website, and at the same time, was entertaining to read.

In the end, I wrote a list article on how to change your life right now and reasons as to why an individual is awesome, which is hit the type of content I aspired to create for my website.

Also, in an attempt to provide more of a variety in reading material, I created content of the same entertaining variety, but different in style. This was mainly to give content that would have a greater chance of appealing to more people and also, in getting them to come back to the site. A news-style article on how a poem helped a man beat depression and a blog-type post from an existentialist musing on the wonder of life, was made to ensure there would be a unique variety in content different from another, which I feel would entice more people to come back to the site.

Producing the Political Analysis Content for We Are Awesome

Arguably one of the main reasons why I set out to make We Are Awesome, a website about trying to strengthen and reconnect humankind,was that I felt humankind could be more powerful if it were on the same page, if there was a place where important issues were disseminated and contextualized.

But to achieve this in some form is challenging to pinpoint, as there are a number of issues that all have merit to be discussed and explained better. All I know with the site is that the content was likely to be in the form of articles, as I enjoy writing and writing about issues that are likely to affect society. And this was a strong point going forward with the website, but as to what type and subject of articles that would be included on my website, was a matter of defining.

And thus, I looked at other established websites out there and a few that I read regularly, became the focal point of what I more or less wanted to produce and how it would be shaped on the page. BBC News - which I read almost daily - is structured as block of content on top of another, with pictures alongside the content to give it a visual presence on the screen. This design is simplistic and as such, gives the website's almost sole focus on written content, more power in suggesting the article's importance.

The Guardian, a news outlet, has articles which are shaped by its liberal political orientation, is fascinating to read and interesting to behold, as the media is known to air on the sensationalist side - but not the Guardian. This type of enticing and moral content, is what I had in mind as to how the main content would more or less be written like for the "Political Analysis" page; a page that would aim to shine a light on important political issues in society today.

I than began to research what is to considered important in this sense and came back with what seemed to make the grade. The 2015 General Election and conglomerates exploiting society in the name of capitalism were definitive of meeting this criteria, but I also wanted to try something different with an old concept and blend it with the a new one. And an article about kindness in the digital age was born.

A challenge with writing these articles is that I didn't want it to sound like it was written by an indulgent, pretentious, intellectual, suggesting what needs to be done in relation to these issues. That would put off a lot of people from reading more content on the website - and even navigating through it, in the worse case. So my aim with producing the content was to write on the aforementioned issues as to point them out and not state the obvious. It would not be wise to state to readers as to what needs to be done; they already know what needs to happen. This approach, I feel, does not insult the intelligence of readers and makes the articles produced, more readable to audiences. Not to mention all the more powerful.

Creating the About Page

Throughout making We Are Awesome, I have gone through a number of emotions: the beginning was filled with fear and worry; the middle packed with dread and penitence of the decision of continuing Digital Media as a module, to now, near the end, a feeling of a calmness among a pre-envisioned madness. While the idea of making a website still does not sit well with me, I surprised to get this far, and now the end of this madness, is only a "About" page away.

The purpose of an "About" page, from my research into it, appears to be a page explaining the purpose of the site, the inspiration behind it and generally, information on how to to get involved either by email or the following of social media accounts linked to the website.  

With this in mind, I envisioned how We Are Awesome's page should look like with a a wire frame. As shown below, the the adage of which I have been following throughout - "Less is more" - takes its form in a very basic page layout of which I have tried to maintain this web design theme and while the premise is a good starting point, it is not the end point, as the page needs more content to make it look like it is the end point of which it can be presented to a web audience.

There is something that could be added to this to make it more powerful and looking around at other websites for inspiration,, I felt that a picture fitting in with the theme of the website above a description explaining the purpose and aim of We Are Awesome, would work better than if it were not to be implemented. In the so-called "Digital Age" we find ourselves in, I decided it would work well for my website to include social media tabs at the bottom of the page, so that when they are clicked, they would open the relevant social media accounts for people to follow.

Bringing the page to life is now as easy as it is going to be, as my previous experience in coding this website, has brought my confidence and efficiency to a level I thought was not possible.

I sourced an appropriate image that perfectly represents the theme of my website, a silhouette of man atop of a mountain, standing boldly amid a descending cloudy sunset, and set that to the width and height for images placed on pages previously, onto the page.

The text that would be placed below describing the website, was burdensome to get right. On the one hand, I wanted to make the explanation of the website as simple to understand as brief as it would be to read. And on the other hand, I needed to ensure that the explanation of We Are Awesome and its purpose did not get lost in translation and would be condensed to be readable for audiences, who are known for their short attention spans. At the end of writing this text of explanation, it was three paragraphs long and honestly, too much for it to be left in that form; in the end, I removed a reference to my exposition of why inequality has manifested throughout society, and that did the trick, as shown below.

Putting in the social media icons and making them link to their social media page was rather simple. I decided to have three popular social media icons at the bottom of the page - Twitter, Facebook and PinInterest. I downloaded JPEGS for these icons and saved them to my images folder, Next I created dummy accounts for these three social media icons that give these icons some functionality when clicked. I ensured that I put in a "table cell" tag so that these icons could fit where I wanted them on the page. I wanted them to be at the bottom of the page, but spread out so that they would be equally divided. For this I specified a "td" tag to ensure that the icons were aligned were I wanted them. I put in  a "href" to make it so that when the image was clicked, it would take you to the relevant social media account.

Having completed the page with the addition of the social media icons, this brings me to the end of structuring and styling my content and pages to meet a vision that has changed many times for how I imagined We Are Awesome would turn out to be. It looks really good, but in trying to meet the deadline, I have had to facilitate the time spent on each page in the name of progression. Some of the pages - including this one - have not been completed to a standard I feel is adequate enough to be submitted in its current form, and they will need to be bettered before the deadline submission.

Creating the Media Page

The difficulty I had in working on this page, was not the structuring and styling of it, but figuring out what function it will serve. At this stage, the idea is that the "Media" page will provide multi-media content based on the theme of the website, through pictures and videos.

I solely intended the "Media" page to broaden the content that would be provided for visitors, as the written articles would not be for everyone, and thus, I felt it was important that my website had something else to offer. The problem with this, is that I do not want to provide the intellectual property of others just to fulfill the pages's premise, as that would be irresponsible not to mention, legally foolish.

But I am adamant that this page will have videos in some form, but in what shape remains bleak to be pursued with intent. However, there is this idea that is in my head of what could be filmed and also fit in with the premise of the website. But is it is just an idea at this moment in time; and like all ideas it must be pursued to see what could come out of it. That idea is to provide filmed content that inspires and encourages people to realise their potentials to reach their dreams, but in what way or in what style, I am unsure of.

This would entail - at the least - that it would be me to personally act as the giver of inspiration and encouragement to others in these videos. These videos will need to be filmed later, but in the meantime, to facilitate the creation of this page, I have decided that I could not personally impart such powerful wisdom as myself, and only a character propositioned to be wise and mysterious could stand a  chance of effectively invigorating visitors in the manner that would work best for the site. Therefore, to have some content to work onto the page in anticipation of these to-be-filmed later videos, I took a few pictures of a character I created and feel would work best on the website, but yet still needs to be better defined to fulfill this premise of inspirational content that the page is intended to provide.

The plan with the content on the page is that it will have a Youtube video embedded onto the page. Looking at W3 Schools and tutorials online, this process is more simple than troublesome. The problem with putting video content into HTML is that not all video formats work well with it, with most requiring that it is converted into an appropriate video format to work efficiently within it. However, if the video were to be put onto Youtube, it would simply need the link for the video to be embedded within HTML and the size of the video box to be specified - and you would be able to have video your website.

As I am not that far into the process of making the videos and embedding them into HTML, I decided that I would embed a picture into my website to show where the videos will go once they are filmed. Again, working with code is much more simple having established a template having worked on the "Home Page", so that this process was of imputation was trouble-free. Unfortunately, the picture I took was taken with the camera in a vertical position, so it does not look right on the web page.

Using the "img src", I implemented the images onto the page and decided that the size of the picture - for now at least, having experimented with it - looks decent enough at a width of 180 and a height of 300 and ensured that the "td" tag gave a specific width to each image so that they could be separated on the page.

                                  

Essentially, the picture above, represents how the finalised "Media" page will end up as, with only the YouTube embedded videos replacing the images. Having scoured endless tutorials on how to implement such videos, I am confident that when I produce the video content, they will be able to be applied into the web page with little-to-no hassle.