Week 2ART 239 Web Design I

Class Notes for Wednesday 9/12/18

Web terminology

css
Cascading Style Sheets - used to define the design of a web site.
dns
Domain Name Server - converts IP addresses into domain names. When someone types a domain name into a web browser, the DNS translates the domain name to the IP address and points the browser to the correct web server.
domain name
The name that identifies a computer or computers on the Internet. These names appear as a part of a Website’s URL. It allows people to enter the easier-to-remember domain name, instead of having to remember the IP address. For example, apple.com is the domain name in the URL http://www.apple.com. Domain extensions include (there are many, many more):
.com
Commercial (for-profit) websites
.net
Network-related domains (Internet service providers, Web-hosting companies, etc.)
.org
Non-profit organizations
.edu
Educational institutions in the US
.gov
US government entities
.mil
US military use
.biz
small business Web sites
.info
signifies a resource web site
ftp
File Transfer Protocol - FTP allows you to copy or send files from one computer to another via the Internet.
html
HyperText Markup Language - markup language for describing web documents (web pages).
http
Hypertext Transfer Protocol - a standard method used to transfer information on the internet.
ip address
Internet Protocol - refers to the actual number that a web address name translates to. The IP number is the real address, which is a unique string of numbers separated by periods that identifies each computer. For example: 172.18.254.1.
isp
Internet Service Provider - it’s the company that provides you with access to the Internet.
seo
Search Engine Optimization - refers to the practice of tweaking website coding and content to achieve the highest possible ranking in search engine result.
url
Uniform Resource Locator - used to specify addresses to pages or elements on the World Wide Web, for example: http://www.adobe.com or an extended version to get to the Dreamweaverapplication would be: https://www.adobe.com/products/dreamweaver.html.

GIF/JPG/PNG/SVG, transparency, antialias

When the web started, files had to be small. So the engineers came up with all sorts of compression schemes for images. Much like music and video compression now, these where indispensable for delivering content effectively over very limited bandwidth (like dial up)

gif
Graphics Interchange Format - an indexed color format that works best for solid colors and, of course, animation
  • Reduces the number of colors in an image - limited to 256
  • supports transparency
  • supports animation
  • When possible, avoid GIF and use the PNG format, which does nearly everything better.
jpeg
Joint Photographic Experts Group - a lossy compression that works best with photographs and complex images
  • support up to 16.7 million colors
  • removes information that the human eye will not notice
  • if you decrease the quality of a JPG too much, you will begin to lose important color information that cannot be recovered
  • does not support transparency
  • does not support animation
png
Portable Network Graphics - a lossless image compression format that works best for higher resolution images and full alpha transparency
  • PNGs allow for greater compression than GIFs with a wider range of colors.
  • supports alpha transparency
  • does not support animation
  • PNG-8: [8 bit color] - supports up to 256 colors, similar to GIF
  • PNG-24: [24 bit color] - support for 16 million colors
  • PNG-32: [24 bit color with an extra 8 bit alpha channel] - full support for alpha transparency - highest quality most of the time, but that also means large file sizes
  • While PNG 24 or 32 can be used for photographs, they tend to be larger than JPG - be sure to compare size/quality
svg
Scalable Vector Graphics - XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
  • does not lose quality if zoomed or resized
  • every element and every attribute in SVG files can be animated

Here’s an excellent post regarding the above information

RGB and Indexed colors

RGB color is an additive color model in which red green, and blue are added to each other to create different colors. 100% of each color added to each other will equal white.

Indexed color is a means of image compression that limits the amount of colors available in an image (thus making it smaller). GIF and PNG 8 are exampls fo this.

Photoshop Export procedures


Legacy “Save for Web” dialog.

Save for Web view

New “Export As” dialog

Export As view

Format
Choose PNG, JPG, GIF, or SVG.

Format-specific setting

Size
Specify the width and height of the image asset. Width and height are locked together by default. Changing the width automatically changes the height proportionately.

Scale
Choose how big the exported image should be. This option is useful for exporting larger- or smaller-resolution assets. Changing the scale impacts the image size.

Resample
Choose a resampling method. Resampling refers to changing the amount of image data as you change either the pixel dimensions or the resolution of an image, typically while resizing an image.

Bilinear
Adds pixels by averaging the color values of the surrounding pixels. This method produces medium-quality results.
Nearest Neighbor
Fast but less precise method that replicates the pixels in an image. This method is for use with illustrations containing edges that are not anti-aliased. It preserves hard edges and produces a smaller file. However, this method can produce jagged effects, which become apparent when you scale an image or perform multiple manipulations on a selection.
Preserve Details
While resizing the image, this method places primary importance on the preservation of image details and sharpness.
Bicubic
Slower but more precise method based on an examination of the values of surrounding pixels. Using complex calculations, Bicubic produces smoother tonal gradations than the Bilinear or Nearest Neighbor resampling methods.
Bicubic Smoother
Good for enlarging images based on Bicubic interpolation, but designed to produce smoother results.
Bicubic Sharper
Good for reducing the size of an image based on Bicubic interpolation while enhancing sharpening. This method maintains the detail in a resampled image. If Bicubic Sharper oversharpens some areas of an image, try using Bicubic.
Bicubic Automatic
Automatically chooses the Bicubic sampling method appropriate for the image.

Canvas Size
If your asset needs to occupy a certain width and height, specify those values as the Canvas Size. The Export As dialog updates the preview to center the image within those bounds. This option is useful in several scenarios, such as the following:

If the image is larger than the canvas size, it is clipped to the width and height values set for the canvas. You can click Reset to revert the values to those set in Image Size.

Metadata
Specify whether you want to embed metadata—copyright and contact information—in the exported assets.

Color Space
Specify the following:

Basic HTML structure & tags

<html>
HyperText Markup Language, represents the root of an HTML document - defines the whole document
<head>
Represents a collection of metadata for the document - this is the information in a web page people do not see
<title>
Represents the document’s title or name
<style>
Allows authors to embed style (design) information in their documents
<body>
Represents the content of the document - this is the information in a web page people see
<h1>
Represents headings for sections. These tags have a rank given by the number in their name. Think of these as a way to break up your outline - heading tags are like you indents. The <h1> tag has the highest rank, <h2> the second highest, <h3>, the third highest and so on. Two tags with the same name have equal rank. Only ever have a single <h1> tag on your page
<p>
Represents a paragraph
<a>
anchor
Represents a link
href
hypertext reference
Specifies a link’s destination. The specific link address is indicated in the href attribute, for example:href="http://www.example.com"
<br>
Inserts a single line break. It is an empty tag which means that it has no closing tag img represents an image
<div>
Defines a division or section
<span>
Used for grouping and applying styles to inline elements.
The span tag is like the div tag - it has no meaning at all and is mostly used for styling by using a class. The difference between the two is that a div is a block element, it is on a separate line (normal document flow) while the span is an inline element, meaning that it can be on a line with other elements - it surrounds what is to be changed