Unit 68 Computer Game Design

I think that there are not significant differences between old video games and new video games. The only significant difference that separates the different generations of gaming are the improvement of the game’s graphics. Although, in my opinion, the graphics have been wrongly criticized in the old video games, it is only because of the significant improvement in graphics in previous games that have made people seem that the graphics in old video games seem poor (aka, the graphics in ‘The Legend Of Zelda’ compared to the graphics in ‘Skyrim’). The similarities that both gaming generations have is the variety of characters that have been produced, the storyline (if there is one) and all the different genre for games that make old video games and new video games not that seem not that different as people say it as. Old video games are by no means bad, it’s just the significant improvement of the graphics that have made recent games better.

The way that the game plays in the new retro games isn't that different from the old retro games. For example, in the popular old retro game 'Super Mario Bros', the storyline of the game is to conquer all 8 worlds and rescue the princess at the end. To this day, the recent 'Super Mario 3D Land' had almost the exact same storyline, conquer the 8 worlds to save the princess. Of course, the gameplay genre changed from 2D Flat to 3D Flat and while they are both of the platform genre, the latter game is more free roaming, but the enemies, bonuses, items and coins have the same purpose that they have. The bonus levels unlocked at the end of the game are also very similar, since they are of a higher difficulty and more enemies. So there are more similarities then differences in video games from the 1980's and video games from 2010 onwards, and where would present games with their graphics and there ideas come from if games from the 80's didn't exist? They probably wouldn't exist, and, in the best circumstances, would have graphics from the 80's in the present, with the present games and their graphics coming around 25 years later.

My participation in the High Game Pitch Concept

Above shows two potential level designs for our video game 'SuperBlock'. The first shows a pyramid type level that acts as a volcano with lava boulders erupting out of the volcano and crashing down the mountain. The player has to climb up the volcano via glowing green pads. Once the player reaches the top, the level is complete, the volcano will calm down, and the 'SuperBlock' jumps into the volcano, starting a 'Freefall' level. However, if the boulder hits them, then the player falls down either 1 space, 2 spaces or 3 spaces depending on the size of the boulders. There are also glowing red pads, which also bring you down a random number of spaces (maximum 3) and different power-ups and power-downs, scattered around the pyramid.

The second level example shows 'SuperBlock' avoiding different 'enemy blocks'. If the player gets hit by the blocks, the level starts over until the time limit runs out. There are also power-ups and power-downs in the level. Once the time runs out, the level is completed. There are also different modes of this level, one with fewer control pads and another in 3D/2D.

An animation that was created by me was included in the animation. It was a 2D perspective that showed the character climbing a pyramid, although it wasn't shown as a pyramid, hence why the image showing a pyramid was created for the 3D level in the game.It was one of five animation created and included in the presentation. I also created two pieces of music that was also not included in the presentation. The music links are shown below.

Evaluation for 10 page document

Overall, I am happy with my 10 page document which was transferred into a presentation. The positives of the 10 page document are that each page has a detailed description on each part on each page, a paragraph to be precise. The information specifically is very well described, in that I make my points clear and easy to understand. The images that also come with the presentation are linked with the game, for example the character design is the main character design and the pirates are the enemies in the game and what they could look like in the game. The presentation look itself looks very crisp and sharp, giving the presentation a good look, making the potential game investors interested in what is to come, gaining their attention and increasing the chances of the potential investors investing money into the game. The negatives of the 10 page document are that some of the images could be clearer, especially with the background colour could be darker. The text itself could be a little clearer to read but in keeping with the theme and design for the 10 page document as a presentation, I kept it as it was. Overall, there seem to be more positives then negatives, so as a result I am happy with the end result of the 10 page document.

Evaluation on Game Pitch High Concept

Overall, I am relatively happy with my participation in the team. I admit that other people in the team such as Luke and Michael did more work/ more important pieces of work, that was mostly because they had more experience on different pieces of software (Unity 3D). I still feel however that I was still involved in the teamwork. I also helped with the recording in our individual parts of the presentation. I felt that the overall presentation was very good. Everyone sounded confident and their punctuation was easy to understand. 

Unit 44 Website Design

http://www.codecademy.com/joeplant

I think that both Javascript and Web Fundamentals are very crucial to help design a website because the different tasks cover many areas on where to place images and even links to different sections/pages of the websites. A bland website will not attract customers and would also be criticised. That is why a good website design is so important in any business, because if you have no customers, you would have no sales.

JavaScript is what is called a Client-side Scripting Language. That means that it is a computer programming language that runs inside an Internet browser (a browser is also known as a Web client because it connects to a Web server to download pages).

The way JavaScript works is interesting. Inside a normal Web page you place some JavaScript code (SeeHow Web Pages Work for details on Web pages). When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code it finds in the page and runs it.

Web page designers use JavaScript in many different ways. One of the most common is to do field validation in a form. Many Web sites gather information from users in online forms, and JavaScript can help validate entries. For example, the programmer might validate that a person's age entered into a form falls between 1 and 120.

Web design research

If you want to promote your organisation or your project, you have to be on the web. Nowadays, it is the first resource that people turn to for information. These 10 useful tips can help you communicate what you want to say.

• 1.    Define your audience: Fundamental, but many people forget it. What audience to you wan to reach? Fellow scientists? Consortium partners? Potential investors? Journalists? Institutional bodies? The target audience determines what content you present.
• 
  
• 2.    Think about your content: Most of your visitors won’t know the subject as well as you do, and have little time to spend reading. So keep it simple and short. Avoid jargon, be concise, focus on the successes and attract your audience by announcing exploitable developments or technologies and their potential benefits.
• 
  
• 3.    Plan a clear structure: This step is vital. The site should be easy to navigate. Produce a sitemap of your proposed web content. Visitors should ideally find information in 2-3 clicks maximum.
• 
  
• 4.    Make it look good: It sounds so basic, yet it matters. If it looks nice, people tend to give it more value. A good design reflects well on your organisation or project.
• 
  
• 5.    Limit graphic content: Multimedia can make your content more attractive, but don’t overdo it. Use graphics only if they support your message – whitespace has proven to be important in communications. Too large images also slow page loading for people with poor connections.
• 
  
• 6.    Offer easily searchable content: Have a ‘search engine’ box on the front page. A number of tools can be found on the web to help you do this, including Google.
• 
  
• 7.    Update your content regularly: Sites with regularly changing content attract more visitors. Archive what’s out-of-date, update with new content, ensure that you don’t have broken links and add new functions.
• 
  
• 8.    Be media-friendly: Be ready to feed content to the media by preparing press releases, brochures, CVs of relevant contact people, info about key partners and addresses to be contacted. Put them in a ‘Press’ section on your site, and don’t forget images also.
• 
  
• 9.    Make it interactive: Allow visitors to interact with the content author or producer. Host a discussion forum or start a blog – it may encourage visitors to drop in more often.
• 
  
• 10.Domain name is important: Today we remember website names as we used to remember phone numbers. So make sure that your domain name is easy to remember.

Different examples of web programming/publishing

Hypertext Markup Language (HTML)

HTML is the underlying language of Web site coding. This workshop is designed to introduce you to the fundamental concepts of HTML. Knowing HTML allows you create your Web site exactly how you want it. The first day covers basic xHTML syntax for the document, lists, links, and images. The second day covers the HTML needed for tables, forms, and CSS. Knowledge from Technologies for Web Site Construction is assumed.

Cascading Style Sheets (CSS)

CSS controls how HTML elements are displayed on your Web browser and other mediums. They allow a Web designer to control the style and layout of multiple pages all at once. You will learn the basic syntax for defining styles and how to use classes, IDs, and the hierarchical nature of HTML inheritance. The first day focuses on basic CSS syntax and properties related to text formatting. The second day covers advanced selectors and properties related to page layout. Knowledge from HTML is assumed.

Adobe Dreamweaver I

In this introductory workshop, you will learn how to use Dreamweaver to assist you in building the HTML and CSS for your Web site. This industry-leading Web development tool enables users to efficiently design, develop, and maintain standards-based Web sites and Web applications. You can also use it to quickly integrate XHTML, CSS, JavaScript and other Web languages into your site. Knowledge from Technologies for Web Site Constructionis assumed. Knowledge of HTML and CSS is not assumed, but it can be helpful.

Adobe Dreamweaver II

Once you understand the basics of the Dreamweaver workspace, making full-fledged Web site in Dreamweaver can seem daunting. In this workshop, you will learn how to use Dreamweaver's layout and formatting tools to design a functional layout from scratch (or how to change an existing one--whether it came from Dreamweaver or not). This will then allow you to use Dreamweaver to easily add and change content without worrying about the HTML or layout for every edit. Knowledge fromDreamweaver I is assumed. Knowledge of HTML and CSS is very helpful.

Podcasting

Podcasting provides an easy method to deliver digital content -- from audio and video clips to text documents -- via the Web using RSS technologies. The primary focus of this hands-on workshop is the method for distributing existing audio/video content via the Web. To learn how to create digital audio and video content, you can attend the Catalyst workshops on Apple iMovie and Apple GarageBand for Mac users, and Digital Audio Workstation Overview for PC users. Knowledge from Web Publishing at the UW is not assumed.

JavaScript

JavaScript is an easy way to make your Web site interactive. It allows the browser to make decisions about how to display content based on user input. You will learn how to create image rollovers and how to use the document object model to dynamically control the content and display of your Web site. This workshop focuses on the document object model, which is used to make your pages come alive. The second day continues and combines features from the popular Prototype.js framework. Knowledge from Programming for the Web and CSS is assumed.

jQuery

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. As of November 2012 it is used by over 55% of the 10,000 most visited websites. jQuery is the most popular JavaScript library in use today. It allows web programmers to target HTML elements through Javascript, and to create dynamic web applications that update content without refreshing the page.

 Different examples of good web design

Research Web Design Issues

• Aesthetic qualities: Concerned with beauty or the appreciation of beauty

• Access Speed: The speed of your connection to the Internet, determined by your modem speed

• Content is King: The things that are held or included in something

• Web Standards: Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web.

• Websafe colours: This term means that the colours used are Netscape and Internet Explorer Palette Compatible.

• Image formats: Image file formats are standardized means of organizing and storing digital images.

• Font Families: A set of fonts all with the same typeface, but with different sizes, weights and slants.

• Fluid vs Fixed: Able to flow easily (Fluid), Remaining in the same place with respect to another object (Fixed).

• Responsive Web Design: A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design.

• Layout eg HTML divs, tables, layers, CSS positioning: The way in which text or pictures are set out on a page.

• Advantages of HTML5 over older HTML versions: 

1. Defines a single language called HTML which can be written in HTML syntax and in XML syntax.
2. Defines detailed processing models to foster interoperable implementations.
3. Improves markup for documents.
4. Introduces markup and APIs for emerging idioms, such as Web applications.

• Readability: the quality of written language that makes it easy to read and understand.

• Usability: the quality of being able to provide good service.

• Consistency: The achievement of a level of performance that does not vary greatly in quality over time.

• Navigation: The process or activity of accurately ascertaining one's position and planning and following a route.

• Accessibility eg colours, navigation, target audience, fonts: handiness: the quality of being at hand when needed.

• Cross browser compliance: Cross-browser refers to the ability of a website, web application, HTML construct or client-side script to function in environments that provide its required features and to bow out or degrade gracefully when features are absent or lacking.

6 Good different web designs

Facebook:

Aesthetic qualities: Fairly simple but well organised.
Access Speed: Full access takes about 3 seconds max
Content is King: Many different content available
Web Standards: Makes good use of web standards since its social networking site
Websafe colours: Does use some colours, but mainly uses blue and white
Image formats: Sets images to fixed size but once click on is set to it's full size
Font Families: Uses same font, size can't be altered but can use bold and italic
Fluid vs Fixed: Fixed
Responsive Web Design: Very responsive, can access other sites and links
Layout eg HTML divs, tables, layers, CSS positioning: Simple but clear layout
Advantages of HTML5 over older HTML versions: Uses HTML5
Readability: Very clear, easy to read
Usability: Produces okay service, could be a little quicker
Consistency: Very consistent
Navigation: Okay navigation, can be complex if you have too many files
accessibility eg colours, navigation, target audience, fonts: Accessibility is good if given
Cross browser compliance: Could be better

Google:

Aesthetic qualities: Extremely simple layout
Access Speed: Very quick, almost less for a second
Content is King: Content is arguably the best available 
Web Standards: Again, web standards is probably the best available
Websafe colours: Doesn't use colours except on logo
Image formats: Image formats is the best available
Font Families: Uses same font-family for images and links
Fluid vs Fixed: Fluid
Responsive Web Design: Organisation is good despite many different links
Layout eg HTML divs, tables, layers, CSS positioning: Layout is good despite different image sizes
Advantages of HTML5 over older HTML versions: Google uses HTML5
Readability: Very clear and easy to read
Usability: Usability is outstanding
Consistency: Very consistent in links and images despite sizes
Navigation: Very easy to navigate
accessibility eg colours, navigation, target audience, fonts: White background with blue links, easy to see
Cross browser compliance: Doesn't lack much in terms in what you want to find

Youtube:

Aesthetic qualities: Good layout. Nice ideas with recommendations etc
Access Speed: Speed is good, 2 seconds max
Content is King: Very good content
Web Standards: Excellent web standards
Websafe colours: Simple colours used, mainly red with a white background
Image formats: Doesn't really use images, uses videos instead  
Font Families: Uses same font
Fluid vs Fixed: Fluid, but again, it doesn't use images
Responsive Web Design: Good if used correctly, if not, difficult to access
Layout eg HTML divs, tables, layers, CSS positioning: Good layout and organisation
Advantages of HTML5 over older HTML versions: Youtube does use HTML5
Readability: Clear and easy to read due to colour choice for background and font
Usability: Usability is very good, though video could take some time to load
Consistency: Consistency is poor, since website keeps changing design
Navigation: Easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Very easy to understand and get around
Cross browser compliance: Cross browser compliance is tested on youtube, since it could be difficult to use

Yahoo:

Aesthetic qualities: Good website design, has more features then google
Access Speed: Takes longer to load then google, mostly due to more features though
Content is King: Content is very good as well
Web Standards: Web standards are very good as well
Websafe colours: Uses a lot of different colours compared to google or youtube
Image formats: Image formats are excellent due to more features
Font Families: Font families are different
Fluid vs Fixed: Mix of fluid and fixed
Responsive Web Design: Response is very good, can go onto other links easily
Layout eg HTML divs, tables, layers, CSS positioning: Layout is superb, everything is nicely placed
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Like youtube, yahoo is clear and easy to read
Usability: Usability is also good, though takes some time to load
Consistency: Consistency is decent, but changes features every day (the news, sports etc)
Navigation: Easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Accessibility is good, no major complaints
Cross browser compliance: Cross browser is good

Wikipedia:

Aesthetic qualities: Decent web design
Access Speed: Depends on what you are researching for
Content is King: Content is very good, very specific
Web Standards: Doesn't really use web standards due to it being a website designed for researching
Websafe colours: Doesn't use a huge range of colours except for images
Image formats: Images are placed on certain places on the website
Font Families: Uses same font family
Fluid vs Fixed: More fixed then fluid but varies due to different research
Responsive Web Design: Very responsive, can go onto other links
Layout eg HTML divs, tables, layers, CSS positioning: Layout is similar on all research but varies
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Easy to read
Usability: Usability is decent
Consistency: Website is consistent in layout
Navigation: Fairly easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Very accessible and easy to use
Cross browser compliance: Cross browser is not tested
Amazon:
Aesthetic qualities: Excellent web design, very organised
Access Speed: Access speed is decent despite high amount of content
Content is king: Content is superb, best online shopping website currently
Web Standards: Web Standards are good, crucial for searching at what you want to buy
Websafe colours: Uses about 4-5 different colours, not massively important
Image formats: Uses many different images for each different product
Font families: Uses 2 different fonts which are both easy to read
Fluid vs Fixed: Mix of both
Responsive Web Design: Very responsive, which is important for a online shopping website
Layout eg HTML divs, tables, layers, CSS positioning: Layout is very good, well organised
Advantages of HTML5 over older HTML versions: Amazon doesn't use HTML5
Readability: Website is easy to read and understand, which is an obvious positive
Usability: Usability is superb, easy to get around to search for products
Consistency: Extremely consistent, especially in layout and search results
Navigation: Fairly easy to navigate around, can become a little confusing
accessibility eg colours, navigation, target audience, fonts: Accessibility is all good, simple and easy to use
Cross browser compliance: Cross browser is tested and works successfully under it

6 Bad different web designs

The Afterlife:
Aesthetic qualities: Website design is the worst at the present
Access Speed: Access is slow takes around ten seconds to load up fully
Content is King: There is no accessible content
Web Standards: Web standards are also very poor
Websafe colours: Uses an array of colours, but that isn't always a good thing
Image formats: Uses a huge amount of content, which is why it is slow to load up
Font Families: Doesn't use font families
Fluid vs Fixed: Fixed
Responsive Web Design: Website is not really responsive
Layout eg HTML divs, tables, layers, CSS positioning: Layout is the worst for a website at present
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Doesn't have any fonts, so you can't read it
Usability: Can't use the website
Consistency: Consistency is very poor
Navigation: Can't move around, only goes up and can't move down
accessibility eg colours, navigation, target audience, fonts: Accessibility is poor, can't navigate etc
Cross browser compliance: Cross browser is not tested
Don Swanson Racing School:
Aesthetic qualities: Untidy layout, poor colour choice
Access Speed: Access speed is slow
Content is King: Content is very poor
Web Standards: Web standards are poor
Websafe colours: Colour choice is wrong, doesn't work well with background
Image formats: Doesn't use images
Font Families: Font is clear and easy to read
Fluid vs Fixed: Fixed
Responsive Web Design: Website is not very responsive
Layout eg HTML divs, tables, layers, CSS positioning: all text set in align centre
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Is easy to read, but colour choice puts the text off
Usability: Usability is not good
Consistency: Consistent, but still poor
Navigation: Difficult to navigate around
accessibility eg colours, navigation, target audience, fonts: Colours are poor, difficult to navigate
Cross browser compliance: Cross browser is not tested
Hyperbubble:
Aesthetic qualities: Very simple web design
Access Speed: Takes 2 seconds to load, which is slow considering the content available
Content is King: Small amount of content
Web Standards: Web standards are not good
Websafe colours: Flat, simple colours used
Image formats: Few images used
Font Families: Uses different fonts, which are somewhat clear
Fluid vs Fixed: Mix of both
Responsive Web Design: Responsive, but due to lack of content. Web design is very simple
Layout eg HTML divs, tables, layers, CSS positioning: Layout is boring, uses no imagination
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Easy to read
Usability: Usability is of average standard
Consistency: Very consistent
Navigation: Easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Colours are flat, navigation is easy
Cross browser compliance: Cross browser is not tested
The Bombshell Manual Of Style:
Aesthetic qualities: Website design is ugly, flat and disappointing
Access Speed: Access speed is average, then is slow
Content is King: Little amount of content available
Web Standards: Web standards are not there
Websafe colours: Colour choice is wrong, doesn't look good
Image formats: Images are incorrectly placed and are pix-elated
Font Families: Uses same font but is difficult to read
Fluid vs Fixed: Fixed
Responsive Web Design: Web design is not very responsive
Layout eg HTML divs, tables, layers, CSS positioning: Layout is not good, images are pix-elated
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Difficult to read
Usability: Usability is very poor
Consistency: Not consistent at all
Navigation: Difficult to navigate around
accessibility eg colours, navigation, target audience, fonts: Colour choice is poor, difficult to navigate around
Cross browser compliance: Cross browser is not tested
Feng Shui Interior Design:
Aesthetic qualities: Website is not good looking, uses bland colour for background
Access Speed: Access speed is average
Content is King: Decent amount of quality, could be much better though
Web Standards: Web standards are poor
Websafe colours: Colours are wrongly placed. Background colour choice is wrong
Image formats: Not great image choices
Font Families: Very clear, very simple font choice
Fluid vs Fixed: Mix of both
Responsive Web Design: Website is sort of responsive
Layout eg HTML divs, tables, layers, CSS positioning: Layout is average, could be placed better
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Very easy to read
Usability: Usability is average
Consistency: Consistent, but could be better
Navigation: Difficult to navigate around
accessibility eg colours, navigation, target audience, fonts: Too many colours, difficult to navigate around
Cross browser compliance: Cross browser is not tested
Ric Campus Store
Aesthetic qualities: Website isn't bad looking, just very flat and boring
Access Speed: Access Speed is also average considering small amount of content
Content is King: Has a decent amount of content, however it could have more
Web Standards: Web standards are poor, could be much better
Website colours: Colours are bland and boring, could have more flair to make it look appealing
Image formats: Not bad images, but could be better and have more
Font Families: Uses different fonts, but all are easy to read
Fluid vs Fixed: Fixed
Responsive Web Design: Website is actually quite responsive
Layout eg HTML5 over older HTML versions: Layout is decent, but could be tidier
Advantages of HTML5 over older HTML versions: Doesn't use HTML5
Readability: Quite easy to read due to similar fonts
Usability: Usability is quite good
Consistency: Not very consistent, but having different website designs is fine
Navigation: Quite easy to navigate around
accessibility eg colours, navigation, target audience, fonts: Colours are bland, other features are decent though
Cross browser compliance: Cross browser is not tested

These images above are each of the pages for my website. Overall, I am relatively happy with the overall design of my website. The positives from my website is that the colour scheme combines well together, there are not too many different colours to dazzle the eyes of the reader and make the website look simple and sharp. The font is very clear to read, giving the reader little trouble to read and the image slider is slick and clean, although it is slow to change images (due to the image size and content). The negatives are that the black lines are off-putting and are clear to see, which makes the look of the website untidy. The pages themselves have different sizes which changes the size of the font and the width itself to make it look bigger. It is unknown as to why two of the pages are slightly bigger then some of the other ones. The images need to be resized and repositioned. For example, many of the images in the image slider are too big, which slows the website down, annoying the reader. The images on the 'Other Stuff' template are perhaps too small, making it difficult for the reader to read the text on the images. Overall, for a first website design, I am slightly happy since this is not what I wish to do in the future, but I know that there are several features that needed to be improved, however time restrictions and confusion/difficulty to understand the HTML and CSS coding were the reasons why as to why the website design looks like the images above.