Tuesday, November 22, 2016

OUGD504: Design Production Design for Screen - Coding

Languages
HTML - Hyper Text Markup Language
CSS - Cascading Style Sheets
Java - Animated language
SQI - Database language
PHP - Server based language
iOS - Apple language
Ruby - Twitter

Interactive php
Not so much iOS, Java works across different devices

If you access a website on your phone, desktop what you see comes from HTML or CSS, or a combination of both. HTML and CSS is what you see the rest is functional. You would need to have a minimum understanding of HTML. If you do you have an understanding of the limitations of what you can and cannot do.

When you're designing for screen it's easy to think you're just designing for screen. You need to think about how it's going to be deployed. Primarily you are designing for browsers. Usually use a web browser. Chrome, firefox, internet explorer, safari, opera. They design a website in 4 different formats so that it activates a certain format of that website so they have control over that it looks like. Most would only design two versions a mobile version and a web version. If you access it on different things it would look amazing on one and problematic and may not work on another. Devices like desktops, laptops, tablets, mobile phones, televisions. The main things you need to think about are screen proportions and orientations.

Responsive - word for websites that adapts, the website responds to what it's accessed to.
You need to design that response.

Resolutions
72 pixels per inch
300 for print

They haven't changed but they are the wrong resolutions. Retina screens are around 246ppi.

Timeframe user decides whether they're gonna stay or leave. It used to be 2.6 seconds. If the images wouldn't load within that then the user will just go somewhere else. That's bad design and bad development. Everything should come up instantaneously.

Accessibility. Screen readers are programs that read out the contents of computer screen to a user. If someone is 100% blind they have to be able to use the website. Why would you use a typographic composition instead of typing the text out - for consistency. On the internet you don't have control over kerning, leading, tracking and most of the time type size - pt isn't translatable to screen. Screens work in pixels so you work in pixel ratios you need a range of type sizes for it to be specific.

You would have to use standard fonts that are accessed on every computer in the world.
If you put an image on their example skyline of leeds on the homepage has to be useable by people that are visually impaired. Typographic composition saved as a jpeg and tagged. What happened recently was you got this functionality css/javascript you could add a font to your website. In theory it opens it to everyone but then you distribute that typeface to anyone in the world. If it is on license you would get a fine for distributing to people. You can only use it if you own the license to use it online or unless it's 100% royalty free to use. License to use it for print wouldn't be as much because you are ONLY using it for print whereas if you distribute it to screen the target audience is infinite, the license fee goes up.

HTML
divides each element of a webpage within an open and close tag. Tags act like containers. They tell you something about the information what lies between the opening and closing tags.
Opening:
<p>

closing:
</p>

Tags
<html>

<head>
isn't actually visible - key words, metatags - the words you type into google, websites make your metags visible to the rest of the world

<title>
visible

<body>


for each of those open tags you would need a closed tag.

WYSIWYG - What you see is what you get

try line up your separate tags
<html>
 <head>
  <title>
   title
  </title>
 </head>
   <body>
   Insert body text here
   </body>
</html>

Generally when things go wrong with a website something is open and hasn't been closed.
Homepage needs to be called index.html - if it isn't called that it will never load up. First page has to be called index the rest can be whatever you want.

No comments:

Post a Comment