WEB DEVELOPMENT

LESSON 23/30/15

BELL WORK Who is Tim Berners-Lee?

WEB PLANNING STEPS

1. Assessing needs 2. Determining content structure 3. Determining site structure 4. Determining navigation structure 5. Creating a wireframe 6. Selecting the appropriate development tools

WHO IS THE WEBSITE FOR? What is the purpose of the website? Who is the target audience? Are you providing a products or service? Determine the primary and secondary

purposes of the website. Then make goals are the results

expected in a given time frame. Goals are measurable, such as to increase sales by 10 percent by the end of the year.

CONTENT STRUCTURE Primary page – generally indicates who

owns the website, what is available on the site, and where the information is located within the site (navigation).

Secondary pages – should include the same visual identity indicators as the primary page (name, logo, colors, fonts).

CONTENT CON’T. What content (text, images, multimedia) is

needed to satisfy both the purpose of the site and the expectations of the target audience?

What existing content is available? What new content is required?

What content (logo, name, color scheme) is needed to establish the site’s visual identity consistently on all pages?

Mind mapping can help generate ideas for website pages and content. http://www.art-is-fun.com/create-a-mind-map.html

Create a Mind Map Assignment

CONTENT CON’T. Card Sorting : http://

www.usability.gov/how-to-and-tools/methods/card-sorting.html

Each page should: Contain at least one heading to identify its contents. Be appropriately titled (for search engine optimization

and bookmarking). Contain a header that includes the organizational logo

and name in the upper-left corner of the page. Logos are usually linked back to the home page.

Include contact information or a link to the Contact page.

Contain a footer that provides copyright information as well as text links that match the main navigation structure.

CONTENT CON’T.• Include page titles and content section headers that are

consistent with the website purpose and goals. • Contain a site content navigation menu, generally as a

distinct left panel or as a horizontal menu across the top of the page.

SITE STRUCTURE Linear structures present webpages in a

specific order. This structure controls the navigation of visitors by progressing them from one page to the next. The linear structure is best suited for tutorial or chronological information that needs to be presented in a certain order.

Hierarchical structures organize webpages into categories and subcategories by increasing level of detail.

http://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html

NAVIGATIONS STRUCTURE Can I determine where I am now? Can I

easily determine the proper route to take me where I want to go? Can I see where I have been and where to go next?

Navigation assignment.

CREATE A WIREFRAME A wireframe is a visual representation of

a webpage layout. It is used to connect the content and site structure.

Page Schematic http://en.wikipedia.org/wiki/

Website_wireframe

TOOLS The available tools include HTML text or GUI

web editors A web host is a server computer that houses all

the files for a website. Text Editor - You can use a plain text editor, such

as Notepad for Windows to type all content and HTML tags manually. Your other choice is to use an HTML editor with enhanced features that simplify the steps for entering markup language.

GUI web editors provide designers with a visual approach to creating webpages. These applications, such as Adobe Dreamweaver and Kompozer, behave similarly to a word processor or desktop publishing application

TOOLS CONT. Online or offline site builders, and content

management systems (CMSs). • Online site builders usually contain a variety

of pre-designed templates for designers to use and customize. Ex.Weebly, Go Daddy, Google.

o Offline site builders require you to download and install the software on your computer. Once you have designed your website, you transfer the files to the web host.

TOOLS CONT. Content Management System (CMS),

such as Drupal or WordPress, has some similarities to using a web host's site builder. Many offer pre-designed templates and allow you to connect to your site with your browser for modifications.

CMSs are not tied to a web host. You can choose where to host your site.