Class Notes for Wednesday 9/12/18
- Cascading Style Sheets - used to define the design of a web site.
- 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):
- Commercial (for-profit) websites
- Network-related domains (Internet service providers, Web-hosting companies, etc.)
- Non-profit organizations
- Educational institutions in the US
- US government entities
- US military use
- small business Web sites
- signifies a resource web site
- File Transfer Protocol - FTP allows you to copy or send files from one computer to another via the Internet.
- HyperText Markup Language - markup language for describing web documents (web pages).
- 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.
- Internet Service Provider - it’s the company that provides you with access to the Internet.
- Search Engine Optimization - refers to the practice of tweaking website coding and content to achieve the highest possible ranking in search engine result.
- 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)
- 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.
- 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
- 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
- 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.
New “Export As” dialog
Choose PNG, JPG, GIF, or SVG.
- For PNG, specify whether you want to export assets with Transparency enabled (32-bit) or export smaller-sized images (8-bit).
- For JPEG, specify the desired image quality (0–100%).
- GIF images are transparent by default.
- Note: While exporting PNG assets, remember the following:
- Selecting Transparency generates 32-bit PNG assets
- Selecting Smaller File generates 8-bit PNG assets
- Leaving the above options deselected generates 24-bit PNG assets
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.
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.
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.
- 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.
- 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.
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:
- You’re exporting icons that have various sizes, but that need to be centered within 50x50 px boxes.
- You’re exporting banner images that are smaller or larger than the required dimensions.
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.
Specify whether you want to embed metadata—copyright and contact information—in the exported assets.
Specify the following:
- Whether you want to convert the exported asset to the sRGB color space. This option is selected by default.
- Whether you want to embed the color profile in the exported asset.
Basic HTML structure & tags
- HyperText Markup Language, represents the root of an HTML document - defines the whole document
- Represents a collection of metadata for the document - this is the information in a web page people do not see
- Represents the document’s title or name
- Allows authors to embed style (design) information in their documents
- Represents the content of the document - this is the information in a web page people see
- 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
- Represents a paragraph
Represents a link
- hypertext reference
Specifies a link’s destination. The specific link address is indicated in the href attribute, for example:href="http://www.example.com"
- Inserts a single line break. It is an empty tag which means that it has no closing tag img represents an image
- Defines a division or section
- 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