Search

Hilton Design

Month

March 2016

Final look

16/03/16

Here is the final look of my website on both internet browsers Chrome and Safari.

Chrome

Screen Shot 2016-03-22 at 22.59.59Screen Shot 2016-03-22 at 23.02.14Screen Shot 2016-03-22 at 23.02.21Screen Shot 2016-03-22 at 23.02.25

Safari

Screen Shot 2016-03-22 at 23.03.34Screen Shot 2016-03-22 at 23.03.38Screen Shot 2016-03-22 at 23.03.41Screen Shot 2016-03-22 at 23.03.45

Advertisements

Development stage three

15/03/16

Here are the final development stages where I placed in my blog, deleted a few areas of my website which I thought were unnecessary which was actually just the one page being the about page which I may want to consider doing soon properly as I didn’t have enough time.

Screen Shot 2016-03-01 at 14.26.03Screen Shot 2016-03-01 at 14.26.09Screen Shot 2016-03-01 at 14.26.58Screen Shot 2016-03-01 at 14.28.45Screen Shot 2016-03-01 at 14.29.41Screen Shot 2016-03-01 at 14.41.39Screen Shot 2016-03-01 at 14.42.16Screen Shot 2016-03-01 at 16.44.28Screen Shot 2016-03-01 at 16.53.24Screen Shot 2016-03-01 at 16.53.42Screen Shot 2016-03-01 at 16.56.35Screen Shot 2016-03-17 at 23.32.17

 

Website accessibility

14/03/16

There are many ways in which you can make a website be accessible, although I am only designing my website and not necessarily publishing it there are limited features in which I can add in order to make it accessible.

If I were to publish my website there are a few features, techniques and tips in order to ensure it is accessible for all users. For example:

  • Good use of HTML headings
  • Accessible menus
  • Accessible forms
  • Accessible tables
  • Effective use of color
  • Accessible images
  • ARIA landmark roles
  • Meaningful link text
  • Accessible with keyboard
  • ARIA for web applications

There are also many ways in which a website can be checked to ensure that it has been made accessible that include:

  1. Validating HTML. If HTML is used incorrectly, assistive technology can have problems interpreting the page content, which can result in access problems for the users.
  2. Test with a keyboard by setting your mouse aside and use the tab key to navigate through the web pages. All interactive features such as menus, links, form fields and controls should be be accessible.
  3. Use an  online accessibility checker which will check the web pages for accessibility.
  4. Test with users by recruiting and observing the users to see how they are able to interact with the site.

Development stage two

09/03/16

Screen Shot 2016-02-25 at 20.16.43Screen Shot 2016-02-25 at 20.47.42

So here I started to place some content in and experimented with different background options as to just having pink could be a little too much on the eyes and distract visitors.

Screen Shot 2016-02-25 at 20.51.43Screen Shot 2016-02-29 at 11.13.33Screen Shot 2016-02-26 at 20.41.56Screen Shot 2016-02-29 at 19.12.32Screen Shot 2016-02-29 at 19.12.38Screen Shot 2016-02-29 at 19.42.27Screen Shot 2016-02-29 at 19.42.56Screen Shot 2016-02-29 at 20.45.33

Here’s where I updated my logo. A really annoying error occurred just before this which messed around with my typeface on the navigation menu as that when you hover over it and when it’s active it goes to plain text though I checked up on everything within muse and it was supposedly working fine there! frustrating!

Screen Shot 2016-02-29 at 22.31.34Screen Shot 2016-02-29 at 22.31.37Screen Shot 2016-02-29 at 22.31.43Screen Shot 2016-02-29 at 23.00.58

Here you can see that my website now has a kind of map to it. This is a great visual tool within Adobe Muse.

Screen Shot 2016-02-29 at 23.23.47

Components of a multi-media production and how they interact

07/03/16

The main characteristic of a multimedia system is the use of more than one kind of media to deliver content and functionality. Web and desktop computing programs can both involve multimedia components. As well as different media items, a multimedia application will normally involve programming code and enhanced user interaction. Multimedia items generally fall into one of five main categories and use many different techniques for digital formatting.

 

Images

Image files through digital media appear in many multimedia applications. Digital photographs can display content or can form part of a user interface. Interactive elements, such as buttons, often use custom images created by the designers and developers involved in the making of the application. Digital image files use a variety of formats and file extensions. Among the most common are PNGs and JPEGs. Both of these often appear on websites, as the formats allow developers to minimize on file size while maximizing on picture quality. Software such as Photoshop allow developers to create complex visual effects with digital images.

Audio

Audio files and streams play a major role in some multimedia systems. Audio files appear as part of application content and also to aid interaction with people who may have difficulty with reading. When they appear within Web applications and sites, audio files sometimes need to be deployed using plug-in media players. Formats include MP3, WMA etc. Web services can also stream audio, so that users can begin playback before the entire file is downloaded.

Video

Digital video appears in loads of multimedia applications, particularly on the Web. the same as audio, websites can stream digital video to increase the speed and availability of playback. Digital video formats include the likes of Flash, MPEG, AVI, WMV and QuickTime. Most digital video requires use of browser plug-ins to play within Web pages, but in many cases the user’s browser will already have the required resources installed like adobe flash player. Placing video’s within websites can help your visitors navigate through your website or give them more information about yourself.
Text

Text content is by far the most common media type in computing applications, it’s usually forgotten about seeing as we use it so much. Most multimedia systems use a combination of text and other media to deliver functions. Text in multimedia systems can express specific information and can act as reinforcement for information contained in other media items. This is a common practice in applications with accessibility requirements. For example, when Web pages include image elements, they can also include a short amount of text as information about the image for the user’s browser to include as an alternative, in case the digital image item is not available.

Animation

Animated components are common within both Web and desktop multimedia applications and are kind of new to the scene. Animations can include interactive effects, allowing users to engage with the animation action using their mouse and keyboard to make websites a lot more interactive. The most common tool for creating animations on the Web is Adobe Flash, which also facilitates desktop applications. Using Flash, developers can author FLV files, exporting them as SWF movies for deployment to users. Flash uses ActionScript code to achieve animated and interactive effects which is rather tricky.

Coding

06/03/16

As the brief tells us that we must be able to understand slightly on how code works. This is great for me as that I have studied Computer Science for the last three years, so this will play in my advantage greatly.

In computing, source code is any collection of computer instructions (possibly with comments) written using some human-readable computer language, usually as text. The source code of a program is specially designed to facilitate the work of computer programmers, who specify the actions to be performed by a computer mostly by writing source code. The source code is often transformed by a compiler program into low-level machine code understood by the computer. The machine code might then be stored for execution at a later time. Alternatively, an interpreter can be used to analyze and perform the outcomes of the source code program directly on the fly. Most application softwares are distributed in a form that includes executable files, but not their source code. If the source code were included, it would be useful to a user, programmer, or system administrator, who may wish to modify the program or to understand how it works. Aside from its machine-readable forms, source code also appears in books and other media, often in the form of small code snippets, but occasionally complete code bases, a well-known case is the source code of PGP.

Source code is primarily used as input to the process that produces an executable program (i.e., it is compiled or interpreted). It is also used as a method of communicating algorithms between people (e.g., code snippets in books). Computer programmers often find it helpful to review existing source code to learn about programming techniques. The sharing of source code between developers is frequently cited as a contributing factor to the maturation of their programming skills. Some people consider source code an expressive artistic medium. Porting software to other computer platforms is usually prohibitively difficult without source code. Without the source code for a particular piece of software, portability is generally computationally expensive. Possible porting options include binary translation and emulation of the original platform. Decompilation of an executable program can be used to generate source code, either in assembly code or in a high-level language. Programmers frequently adapt source code from one piece of software to use in other projects, a concept known as software reusability.

ref: https://en.wikipedia.org/wiki/Source_code

There are two broad divisions of web development – front-end development (also called client-side development) and back-end development (also called server-side development).

Front end development refers to constructing what a user sees when they load a web application the content, design and how you interact with it. This is done with three codes being HTML, CSS and JavaScript. HTML, short for Hypertext Markup Language, is a special code for ‘marking up’ text in order to turn it into a web page. Every web page on the net is written in HTML, and it will form the backbone of any web application. CSS, short for Cascading Style Sheets, is a code for setting style rules for the appearance of web pages. CSS handles the cosmetic side of the web. Finally, JavaScript is a scripting language that’s widely used to add functionality and interactivity to web pages.

Back-end development controls what goes on behind the scenes of a web application. A back-end often uses a database to generate the front-end. Here’s an example. Say you log into your Facebook account, and you are greeted with the latest updates in your News Feed. They’re not going to be the same updates that you saw yesterday. How did the page change? Did a Facebook employee manually edit the page to update your news feed? Of course not. A script on the Facebook back-end would have received the updates and re-generated the front-end accordingly. Back-end scripts are written in many different coding languages and frameworks, such as:

  • PHP
  • ASP.NET
  • Perl
  • Java
  • Node.js
  • Python

ref: http://www.codeconquest.com/what-is-coding/web-programming/

Now with my code it looks slightly jumbled as that I have been doing my website through a front end software (Muse), if I was to code then it would look a little less busy as that I’d be short coding most of it, so here are a few screenshots of my CSS code which shows the customisation of the website going through text fonts, colours, sizes, spacing etc.

Screen Shot 2016-03-16 at 22.37.53

Below is an area I can change the content in my website through coding.

Screen Shot 2016-03-16 at 22.44.30

And below is the PHP code for a form which you can make in a variety of text editors, I used to create these in windows visual basics.

Screen Shot 2016-03-16 at 22.52.13

 

File keeping and organising

04/03/16

Here I will be showing how I’m organising my website on my desktop and portable hard drive.

Screen Shot 2016-03-16 at 20.10.42

 

Screen Shot 2016-03-16 at 20.10.55

 

Screen Shot 2016-03-16 at 20.13.14

 

Screen Shot 2016-03-16 at 20.13.30

 

Saving content for the Web

03/03/16

I am briefly going to go through the stages on how to save an image for a website. Muse fortunately offers a great feature which believe it or not lets you place .psd files into your website and what this does is as you update your .psd file Muse will automatically update your site, great right?! But what happens if you have an image created in an application such as Illustrator which there files aren’t supported to go on to the web straight away, well it’s pretty straight forward thanks to Adobe and I will show how I did it here!

Screen Shot 2016-03-02 at 15.50.04Screen Shot 2016-03-02 at 15.50.32

Here all these file types are supported for the web so you can chose any but if you want a transparent background choose PNG, if not choose JPEG. GIF’s are usually moving images that move for approximately 10 seconds.

Screen Shot 2016-03-02 at 15.50.41

It’s also handy to tick the box above where it says “Transparency”.

Screen Shot 2016-03-02 at 15.50.52

You can also split the screen so you can make sure it looks exactly the same as the original piece, sometimes colour shading may change, not so sure why. After getting it how you want it to be simply hit the save button and choose where you want to save the image, preferably the same file that your website is in to keep it all organised and avoid dead links.

To input a .psd into your website you must do the following and make sure it’s in the right format to proceed.

Screen Shot 2016-03-07 at 16.19.44

Make sure you have your image mode as RGB Color as that the other modes are not supported on Muse yet.

Screen Shot 2016-03-07 at 16.20.04

If you choose to flatten all the layers then it’ll make the image hard to edit but all the colours will stay exactly the same as shown below. What I did is I just saved it as another version so I could still always go back to the original if it needs changing.

Screen Shot 2016-03-07 at 16.20.38

If you choose to not flatten the image then it will unfortunately lose some colours as shown below but you’ll still be able to edit the file and not worry to update it manually.

Screen Shot 2016-03-07 at 16.20.22

 

Web design software choice

02/03/16

Here I will be saying what software I’m going to use and why I chose it. It was a pretty easy choice as that it’s a website for myself so it’s personal I could really choose anything I wanted but I want my website to look professional so that’s Weebly and Wix out of the picture! Also the time to make the site had to be bought into thought as that coding takes a very long time to do so I don’t want to raw code the whole site so that’s Sublime Text off the list too. As that dreamweaver was my first ever software I used to create a site I won’t be choosing that as that when I was using it back in school I had no help whatsoever and it scarred me from using it again for a while!

So my two choices are Brackets and Muse! I find muse’s user interface great to work with and is very friendly to new users. It’s also very easy to just jump into and get creating with many features included, there is also a huge free widget library on the adobe website for extra third party features. I have also worked a little on Muse in the past and back then I felt well invited to what it had to offer. Though there are some glitches here and there they are all relatively easy to fix and clear up in code which I will be using Brackets for. I haven’t really touched upon Brackets but I believe it’s the same as Sublime just a little less complex in certain aspects. This will be a good opportunity to take the dust off my skills of coding as that it has been a while since.

 

Create a free website or blog at WordPress.com.

Up ↑