Class notes from June 3, 2013

Screen shots of completed Pinnacle Website:

Home Page

Forms Page



Case Studies Page

 Presentation in class went well, with the class being complementary of the color choices, general layout, and choices of photographs.  They also like the banner for the web page.





Class notes from May 20, 2013

Notes on creating a mobile website:

WIDTH

<DIV> - would be extension box

Open  <DIV STYLE = "WIDTH : 300">
Close </DIV>

Will cause it wrap (if text) or push bounds out of screen (if image) when using exact pixel dimensions.

Better to use style template:

<DIV STYLE = "WIDTH 100%">

• Will size to fit dimensions of mobile device
• Works with text
• Browsers cannot re size graphics

Size images to biggest device or have different image sizes and use a JAVA applet to read back device type to select proper image
Such as:
     IF Screen Size >= 300 THEN 1.jpg (Use larger graphic)
     ELSE Screen Size < 300 2.jpg (Use smaller graphic)
On image itself:
    WIDTH = 100%
    HEIGHT = 100%

• Browser will re size image visually, but not change the size of the file

HTML 5 is the latest Standard

Dreamweaver

• Has new fluid grid layout
• A new product that can be used on mobile devices
• Uses columns
• Responsive because templates work because of columns and grids
• Makes use of source code and style sheets to do this

Phone Gap

• Uses HTML, CSS, JAVA
• Allows a developer to write app then send it to Phone Gap where it is converted to a single set of instructions
• One set for Android, one set for Apple, etc.
• At the end of the process will have a native app for all mobile devices

APP vs Web Site

APP - To do something

• Frameworks
• Uses JAVA
• Bridges the gap between desk top and mobile
• Makes web pages look like native apps
• Examples:
• Moo Tools
• J Query Mobile

Web Site - Provide Info

• Use responsive design to display on mobile or desk top

Notes from Pinnacle Conservancy Interview May 6, 2013

Link to John Determan's form for questions to ask clients regarding a new website design:

http://determan.us/forms/project_form.html

Assorted notes from interview with Jay Highum and John Determan:

Mission of Pinnacle Conservancy: To return land to it's natural state.

Revenue Generation

• No Begging
• Income from Grants
• User fees after conversion

Mission of Website:

• Information Only
• What we do
• Contact us
• How we do it
• Past Projects - Before and after photos
• Case Studies
• Consulting aspect
• Pheasants forever or Trout Unlimited

General Facts:

• 5 State Area of Operations (Minnesota, Iowa, Wisconsin, North Dakota, South Dakota)
• Interest is mainly in restoring wetlands, but could do prairie or forests.
• 14 years in operation
• Should not be from a tree hugging perspective, but a business perspective

Forms info should include:

• Contact info
• Contact us for consulting
• Contact us for repair of land

Web Page Banner

Image of banner created in web design class using Adobe Photoshop.  Like that it shows wetlands, and had a quote form the members of Pinnacle Conservancy.

Web Page Banner

Class notes from May 6, 2013

Discuss deliverables for the group project and conduct mock interviews with John and Jay.

A) site architecture - diagram of the web site
B) home page layout

• 1. logo incorporated
• 2. imagery incorporated
• 3. navigation items incorporated
• 4. text incorporated

C) secondary page template (at least one secondary page required) 

• 1. logo incorporated
• 2. imagery incorporated
• 3. navigation items incorporated
• 4. text incorporated

D) text for the site

E) sample of a form page in the site (contact us, questionnaire, donation page, etc)

F) project summary

• 1. key points of why choices were made in web page.
• 2. team members on project.

• Group project and creating a compelling web experience

Project definition form:

http://determan.us/forms/project_form.html

Sample webpage

http://interwebmachine.com/webart/sample.html

Sample Tags:
HTML = Tells the browser what type of content to expect
HEAD = A place for commands, scripts, titles, connections to CSS files, etc.
TITLE = Text that appears in the browser's title bar
BODY = The page text you want visitors to read
H1, H2...H6 = Heading text. Includes top and bottom spacing
P = Paragraph
SPAN = Change a portion of text "in-line"
<TAG> = Opening Tag
</TAG> = Closing Tag

Other samples:
http://interwebmachine.com/webart/sample2.html
http://interwebmachine.com/webart/sample3.html

Class notes from April 22, 2013

Definitions:
IP: Internet Protocol
HTML: Hyper Text Markup Language.
Domain Name: Each web page needs to have a unique domain name.
DNS: Domain Name Server, keeps track of domain names.
Each website is a series of files on the Internet.
Index.html is the starting file of the website.
FTP: File Transport Protocol, used to the file (website).
FTP Address: Address of where to send the file (website).

Elements of Website Design

• Use Live type on website, so it can be cut and pasted.  (Search Engines can then find it.)
• When using a logo, can convert the type into an image so it shows the same in all displays
• Images: Can use own photos, can go to a stock image company to purchase the rights to photos
• Use Adobe Illustrator to manipulate images.  (Illustrator is a vector file, hard edge, allowing it to be blown up.  As opposed to a raster file (bit map) which is composed of dots.

First Attempt using Adobe Illustrator

Photoshop Notes:

• Make sure Photos are in RGB, not CMYK.
• For printing need 300 DPI, but for web need resolution of 72 DPI.
• Use Revert Command to go back if file hasn't been saved.
• When designing for web use pixels, when designing for paper use inches.

First Attempt using Photoshop

Group Project Start

Group Project Logo

Pinnacle Conservancy is an organization that purchases and restores the lands and waters it owns as well as manages and informs the public about our connection to the natural world.

This is all of the information we currently have about the fictitious company we are to design a website for.

Some starting ideas are::

• The L in Pinnacle looks like a tree, so there should be images of trees on the website.
• Green and Blue are good color choices for the web page due, to the use in the logo and the conservancies mission of restoring land and water, as well as portraying a connection to the natural world.
• Pinnacle needs a section on the website where they can solicit donations form visitors to fund their mission.
• A page of past accomplishments (land and waters restored) should be included.  This page (or pages, maybe one project per page?) should be very picture heavy and ideally would show before and after restoration photos to have the most impact.
• The home page needs to include the mission statement of Pinnacle.  Maybe include "who we are" as well as "our story".

Fair Use Info

What is Fair Use:

Fair use is a legal exception to the exclusive rights an owner has for his or her copyrighted work

It governs the use of pictures (and content)  found on the internets (as well as other places).  Running afoul of it will cause a person to get a cease and desist notice due to the The Digital Millennium Copyright Act (DMCA).  (Or sued, or worse.)


Resources:

Wikipedia article on Fair Use

Fair Use legal article

Fair Use Analysis Tool by Purdue University

Web Team Roles

Web Developer Team Roles  (Media Design Team)

• Copy Writer/Client Liaison - Responsible for writing content for website.  Person responsible for contacting client and responsible for client communication
• Photography/Imagery Director - Responsible for assembling images for website. 
• Website Designer/Developer - Responsible for usability and design of website.
• Marketing Director - Responsible for translating the website to a money making business.  Responsible for incorporating existing images and print items into the web page.

Class notes from April 15, 2013

Best Practice of Web Design

• Clear, consistent navigation
• Consistent use of shapes
• Imagery that compliments message of site, does not distract
• Use of correct text with keyword content
• Do not make user guess or wait
• Color scheme that is consistent (or not) to direct attention

User Experience

• Make your site easy to find - Search Engine Optimization (SEO)
• Address and phone on ALL pages
• Large video or other large resources belong on secondary pages
• Graphics (images) that capture the eye and help to tell the story
• How does you site flow?
• Monitor size and color calibration
• Browser issues
• Need contact page including google other mapping page
• Make sure page is mobile friendly
• Update site frequently and make the information on website relevant and current

Classic Design (Print) vs. Web Design

• Print - more detail, more text
• Print - eye travels across the page differently than on web
• Print - more time to study/read content
• Web - images push the ideas
• Web - text enhances the idea
• Web - Down loadable files/secondary pages carry the content
• Colors on Websites: use primary colors and complimentary colors
• Yellow is not a good website color
• Use colors that convey the idea of the website (earth tones for earthy products, blue for water, orange for food, etc.)
• Color Wheel