Graphic Design Production II

Overview

Web pages (HTML) contain the code that talks to the web browser and the unstyled written text for the site. The style sheets (CSS) hold the instructions for styling the content, the page layout and other effects. Script (JS) enables user input, interactions and some animations to take place. For simple websites, the web pages, content and instructions all live together in a folder or directory. This main website folder referred to as the root folder, Inside the root folder there are also other folders for the different kinds of content and instructions.

Organizing and Naming for Web

Code demands that you write it in a very particular way. A single character out of place can result in a whole web page displaying incorrectly or not at all. You need to know that the naming conventions for web pages and files are also prescribed and are not optional. Specified methods must be followed and names assigned so web browsers can ‘read’ the files. Files, documents and folders have special names. The root folder is called that, or the root directory, but it is not usually named that. We call the first page of a website, the home page. This page uses a special naming convention. It is either named ‘index’ or sometimes ‘default’ or ‘home.’ Browsers read these names as a signal to open this page first.

Rules for Naming

When naming files or folders for the web, just say ‘no’ to: special characters, spaces, long weird names, varying cases. Commonly all lowercase is used for file naming, but not always. Some people use what is called camelCase and some use all UPPERCASE. It is important, however, to keep your naming method constant.

HTML Basics

Tags

Tags are recognized by their use of angle brackets containing these inside: html, h1, p, etc. They also come in pairs with a start tag and an end tag.

Elements

Elements are the parts made from using tags, such as the actual name of the website within the title tag.

Attributes

Elements have attributes. Attributes provide additional information about the element. An example f an attribute would be: body bgcolor="FF0000".

Page Structure

boiler plate

Links

Hyperlinks are the fundamental interactive parts that enliven web pages and serve a site's navigational functions. Links are made by using the anchor element. The anchor element uses an 'a' to stand for 'anchor' along with the letters 'href' meaning 'hypertext reference' to designate the place the link goes. Absolute links reference a page outside of the root folder of the web site. Relative links reference a page within the website (inside of same root folder). Anchored links 'anchor' a navigational link to another element within the same page.

Meta Tags

Meta tags give important information about the website to browsers.

viewport

Color

The color space on screens is RGB (Red, Green, Blue). The Hexadecimal color system, which is rooted in the RGB color space, was developed when computer monitors were pretty limited in the range of colors they could represent. Web designers often designate colors using the values for each of the colors R, G, B (or the Hex # or will sometimes use the color names). Transparency can be designated along with the r, g , b values by setting the alpha value. Then you would set the r, g, b, and a (for alpha) values.

CSS Basics

CSS stands for Cascading Style Sheets. CSS like HTML, has a syntax to it’s language that needs to be learned. It is the skin and muscle to the HTML bones. You can style the tags on the HTML from here.

css

Padding

Padding is the CSS Property that controls the space inside the box around the content. It's the packing peanuts inside the box around the content.

Border

It's a line that can be thick, thin, solid, dashed, dotted, etc. It is the CSS property used to style the outer perimeter or edge of an element. So, if our content is in the center of the box, and padding is wrapped around the content, the border is then wrapped around the padding. The border is like the kind of cardboard.

Margin

It's the space between the boxes. Every element has a margin by default.

Unordered Lists

Unordered lists use bullets to indicate each of the list items. This is great in some cases, but for navigation this just gets in the way. Use the UL section in the CSS to remove and style the unordered lists.

unordered list

Class

Class styles a specific area on the HTML page. The other areas of content on CSS are being styled all together. This allows for more control over certain areas on the webpage. There is usally a .(word) { } on the CSS page that has further instructions. We can create a div or a section and put class="word" and it will work.

ID's

When we use the element or HTML tag, along with an id attribute, we can target an element very specifically. Giving an element and id attribute (id=), means you are giving it a name. Most importantly, a name for an id is an absolutely unique name. Once the id name is used on a page, it should not ever be repeated. You can think of the id like a license plate or a VIN number, because every car has one that is unique to itself.

Float

The most basic positioning method we can use is called floating. This command allows any element to be positioned inside its enclosing element to either the right or the left. Floating an element changes its default behavior and allows other elements that are below the floated element in the HTML to also “float” up and sit next to it – creating a wrap effect around the floated element.

Custom Fonts

Websites have been, in the past, dependent on the fonts installed on the user’s computer. In the last decade or so, the ability to specify exact fonts has evolved. There are two general methods: hosted and self-hosted. Hosted — This means that the font doesn’t live on our root folder, but instead that font lives somewhere else on the internet. Font companies or services (like Google fonts) provide designers with access to fonts by providing a way to link to them on their server. Copyright issues are managed and monitored by the hosting company. There are hosted fonts that are paid and those that are free. Some examples would be Google Fonts and Adobe Edge Webfonts. Self-Hosted — This means that you are actually uploading your own font files (in a folder, just like your images) for browsers to download and display in your webpages. There are both paid and free models for this as well.

Favicon

Short for "favorite icon" a favicon is that tiny little image or graphic associated with a website you see when you bookmark the page. Web browsers use favicons in the address bar, on tabs, and in the book mark lists to identify sites visually. It is really an extension of the brand. favicon.cc, favicon-generator.org, or faviconer.com are good resources to use to generate one.

Special Styling

Opacity

This property is used to create transparency either with the background of an element, or an image. Usually with images they are used when the mouse hovers over the image. When adding opacity to the background of a box, for example, all of the elements inside inherit the same transparency. This can make text inside hard to read. If you would like the text to be readable, use the RGBA (red, green, blue, alpha) values. For this, put in the RGB color value as normal, but for the alpha, put in a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Javascript

Something that is complicated and is basically magic in code form.

App Process

My app inspiration came from my personal love to cook, and also my need for variety in my meals. I chose the name Cuisine Hacked to give a more personal yet sophisticated feel. I then branded my entire app around that concept. The colors were chosen to give a warm and inviting yet sophisticated feel along with a hand-drawn personal feel. Less is more is both the motto for cooking on our app, along as the recurring theme throughout the design. If any of my app coding friends are interested in creating an app like this, I’m open to collaboration!!

cuisine hacked app screens