Introduction to Web Site Development

Huda M Elmatsani

huda.elmatsani@gmail.com

Course Objective The course explores how to

develop a website, from planning a website, designing a website, building a website, to publishing a website.

Web Site Development What is a Web Site How to Develop a Web Site

Definitions A method of posting and

accessing interactive multimedia information, the "Web" is a true "information superhighway," allowing users the world over to access a wealth of information quickly and easily.

Webpage(s) on web server identified by it’s address name (URL) accessed via Internet using web browser.

What is a Web Site Features:

Open standards Protocol: HTTP Format: HTML

The ability for publishing and downloading, sharing, participating, manything.

Ease of use; just point and click on your browser to access the information you need.

What is a Web Site Advantages:

Publish and make frequent updates to on-line documents

Connect with a diverse, global audience

Keep abreast of the latest news Reference other Web resources

easily Access otherwise obscure

information not readily available in other media.

Download useful software at little or no cost.

What is a Web Site Web Page Web Server Web Browser

What is a Web Site Web Page

A document written in HTML that can be accessed on the Internet. Every Web page has a unique address called a URL. Web pages can contain text, graphics, and hyperlinks to other web pages and files.

HTML, HTM, PHP, ASP, CFM, JSP, CGI, …

What is a Web Site Web Server

A Web server is a program that, using the client/server model and the World Wide Web's Hypertext Transfer Protocol (HTTP), serves the files that form Web pages to Web users (whose computers contain HTTP clients that forward their requests).

Every computer on the Internet that contains a Web site must have a Web server program. Two leading Web servers are Apache, the most widely-installed Web server, and Microsoft's Internet Information Server (IIS).

Apache, IIS, …

What is a Web Site Web Browser

Software that gives a user access to the World Wide Web. Web browsers provide a graphical interface that lets users click buttons, icons, and menu options to view and navigate Web pages. FireFox, Netscape Navigator and Microsoft Internet Explorer are popular Web browsers.

FireFox, Netscape, IE, Opera, Konquer, …

What is a Web Site Web Ecosystem:

Web Site :: Content, Presentation, Logic, …

Tools :: HTML, Programming, Database, … Infrastructure :: Internet, Hosting

Server, People :: Owner, Web Master, Designer,

Programmer, … Management :: Objectives, Guidelines,

Cost,

Live Cycle :: Planning, designing, building, publishing, marketing, maintenance, RIP, …

Web Ecosystem Web site:

Content/Data News, Articles, Agenda, …

Visualization/Presentation Layout, Graphics, Animation, …

Control/Business Logic Programming Language (PHP)

Web Ecosystem Tools:

Planning Diagram, Storyboard, VISIO, …

Design HTML, Dream Weaver, Photoshop, ..

Programming PHP, ASP, JSP, …

Publishing/Deployment Web server, ftp server, smtp server, …

Marketing Search engine, …

Maintenance Web stat, … Content Management System,

Web Ecosystem Infrastructure:

Internet Dial-up, lease line, ADSL, …

Web hosting/web server Shared web hosting Dedicated web hosting Co-location

Web Agents /browser Computer based Mobile based Server to server

Web Services XML-based service exchange JSON-based service

Web Ecosystem People:

Owner Web project manager / web coordinator Web master / administrator Web designer Web programmer Web auditor Web marketer / customer service Content provider Content developer Community administrator

Web Ecosystem Management:

Rule, Role, and Guidelines Budgeting and Compensation Organization

Web Ecosystem Live Cycle:

planning, designing, building, publishing, marketing, maintenance, …

How to Build a Web Site Live Cycle:

plan design build publish market maintain …

Planning a Web Site Background Audience Resource Competition Content

Planning a Web Site Background:

Goals Institutional Vision/Mission/Goals

Fit Deadlines Funding Measurement

Planning a Web Site Goals

Develop a ranked (from most- to least-important) Goals Master List.

Create a mission statement for the site.

Identify how the mission and goals of the site might change from short-term to long-term, given the direction of your organization and industry.

Planning a Web Site Audience:

External. Who is your EXTERNAL audience? Consider: current customers, potential customers,

suppliers, professional/trade organizations, investors, competitors, children, schools/educators …

Internal. Who is your INTERNAL audience? Consider: all employees, management, marketing/sales,

operations, and IT. Sub-groups. Determine all subgroups within

the audiences identified above. Define. Identify the interests, technical

skills and special issues for each audience group and subgroup.

Planning a Web Site Resources:

Project Roles. Who are the resources that will be responsible for content management and technical support (include their names, titles, roles, and contact info)?

Team Skills. What are the technical and content management skills of each resource?

Planning a Web Site Competition:

Identify Competitors. Identify the sites of competitors and others that may provide direction for your site.

Important Elements. Identify the important elements of each competitor site: functional features, technologies used, breadth of content and look-and-feel.

Planning a Web Site Content Plan / Information Architecture:

Functionality. Which functional features should your site offer? Consider: site search, customer service, discussion forums,

newsletter, catalog/information order forms, feedback form, member logon, password protected areas

Information. Which informational elements should your site contain? Consider: About Us page, Contact Us page, copyright notice.

Organization / Structure/Navigation. What is your site's hierarchy? For each of the 4-7 (though you can have more or less) main areas of the site, identify: each main menu item, all submenu, and additional

content.

Planning a Web Site Content:

Describe in detail each functional feature. What exactly will it do?

Identify the resources required, and any technical and budgetary issues associated with each functional feature.

Provide detail for each informational element.

Assign content responsibilities to the resources identified above.

Planning a Web Site Information (News, Press

Release, White Paper, Article, Tutorial, Schedule, …)

Products (Catalog, E-Commerce, …)

Services Sharing & Participating

Planning a Web Site Content is :

Content is by far the most important component of any website

Content is where the real money will made in the Internet, just as it was in broadcasting

Contents are:not just software and news, but also games, entertainment, sports programming, directories, classified advertising, and on-line communities devoted to major interests.

Planning a Web Site Content Caracteristics:

Compelling (Menarik perhatian) Convincing (Isinya dapat dipercaya) Comprehensive (Isinya lengkap) Complete (Isinya tuntas) Useful/Valuable (Isinya

bermanfaat/berharga) Motivate (Selalu menggunakan rujukan

silang) Unique (Isinya hanya ditemukan di website

anda) Original Updated regularly. Organized properly.

Planning a Web Site Content … Avoid

Use any cursed language Address your audience improperly Improper use of typography Using someone else's content without

their permission Rushed production of content Grammar and spelling errors Lots of advertising inside content areas Content so old and outdated Irrelative content

Planning a Web SiteContent Writing Tips:

Provide useful information The more specific, the more useful Make sure people know what your

site (and each page) will do for them

Write conversationally

Designing a Web Site Web design Graphic Design

Designing a Web Site The Value of Web Design

Good design is valuable. It is worth something. It is important. Good design isn't superficial. It solves problems. It creates solutions. It adds value.

"We see that the most popular products are those which seem unique in terms of style or functionality.“

We all know that packaging is important. The Web is the same way—if we like the way a site looks, if it's interesting, distinctive, has personality, is exciting, stimulating or comfortable, we respond to it.

Designing a Web Site The Value of Web Design

You're creating a "brand," which you want to be unique and immediately recognizable.

You can have the best content in the world, but if it looks bad, it has a lot less value.

In web design, a good site design needs to be based on good site structure. How you're arranged and grouped your information. What you've named your sections. How your navigation works to help people get around the site and find what they're looking for.

Designing a Web Site

Definition of a good Web site: A site that delivers quality

content for its intended audience and does so with

elegance and style.

Designing a Web Site Web Site Goals Target Your Audience – Visually Navigation Consistency & Predictability Readability Consider Connections Consider Browser Compatibility

Designing a Web Site Elements of Web Design

Layout Navigation Links Logo Header/Footer Background Fonts Color Schema

Designing a Web Site Top 8 Tips

Keep graphics files small :: 20K Keep text files small :: 10K Design for easy reading Use "ALT" tags on graphics Include contact information on every

page Be backward compatible Test your site as visitors will see

it

Designing a Web Site Top 9 Mistakes

Using Frames Gratuitous Use of Bleeding-Edge Technology Scrolling Text, Marquees, and Constantly

Running Animations Complex URLs Orphan Pages Long Scrolling Pages Lack of Navigation Support Non-Standard Link Colors Overly Long Download Times

Building a Web Site Static Web Site

HTML, Dreamweaver, Dynamic Web Site

PHP, Database, Content Management System

Publishing a Web Site Prepare a domain name Upload web site to web server Launch the web site … press

release

Marketing a Web Site Announce on various forum and

social media (facebook, twitter, …)

Promote on conventional media Register to search engines Banner exchange Give free stuff to Internet

community

Maintenance a Web Site Technical:

Monitor the website visitors Monitor the web server performance Monitor the most requested pages

Managerial: Budgeting and Compensation

Content: Update regularly … timely based is

the best