Splash Screen

Mike Garrison (mikegarrison@alum.mit.edu) writes:
I think that splash pages may not be one of the top-10 web mistakes, but they are probably the top useless web fashion of the past year or two.
Why?
No one wants to have to access it every time, so getting to it really annoys anyone who is not a first time user.
But for the first time user, it adds a useless step between them and whatever brought them to the site in the first place. So it really annoys them too.
Most new users will come via a search engine anyway, so they'll probably miss the splash page.
If you make it the default highest page in the server (eg. http://www.useit.com/ ) then when people try to find your home page by chopping off a URL, they get the useless splash page instead.
They ruin the back button. (Your #1 new mistake.) I especially hate it when a page I have bookmarked (say: //blah.com/ ) gets moved to some URL like //blah.com/content and my bookmark suddenly starts taking me to a splash page. Then I have to edit my bookmark so that it will take me to the real home page.
Jakob's reply: I agree: splash pages are useless and annoying. In general, every time you see a splash page, the reaction is "oh no, here comes a site that will be slow and difficult to use and that doesn't respect my time."
Splash pages are a sure sign of bad Web design.

Validation

Is validation some kind of quality control? Does "valid" mean "quality approved by W3C"?
Validity is one of the quality criteria for a Web page, but there are many others. In other words, a valid Web page is not necessarily a good web page, but an invalid Web page has little chance of being a good web page.
For that reason, the fact that the W3C Markup Validator says that one page passes validation does not mean that W3C assesses that it is a good page. It only means that a tool (not necessarily without flaws) has found the page to comply with a specific set of rules. No more, no less. This is also why the "valid ..." icons should never be considered as a "W3C seal of quality".

Is validity the same thing as conformance?
No, they are different concepts.
Markup languages are defined in technical specifications, which generally include a formal grammar. A document is valid when it is correctly written in accordance to the formal grammar, whereas conformance relates to the specification itself. The two might be equivalent, but in most cases, some conformance requirements can not be expressed in the grammar, making validity only a part of the conformance.

What is the Markup Validator and what does it do?
The Markup Validator is a free tool and service that validates markup: in other words, it checks the syntax of Web documents, written in formats such as (X)HTML.
The Validator is sort of like lint for C. It compares your HTML document to the defined syntax of HTML and reports any discrepancies.

Why should I validate my HTML pages?
One of the important maxims of computer programming is: Be conservative in what you produce; be liberal in what you accept.
Browsers follow the second half of this maxim by accepting Web pages and trying to display them even if they're not legal HTML. Usually this means that the browser will try to make educated guesses about what you probably meant. The problem is that different browsers (or even different versions of the same browser) will make different guesses about the same illegal construct; worse, if your HTML is really pathological, the browser could get hopelessly confused and produce a mangled mess, or even crash.
That's why you want to follow the first half of the maxim by making sure your pages are legal HTML. The best way to do that is by running your documents through one or more HTML validators.

CSS Validation Service

What is Markup Validation?
Most pages on the World Wide Web are written in computer languages (such as HTML) that allow Web authors to structure text, add multimedia content, and specify what appearance, or style, the result should have.

As for every language, these have their own grammar, vocabulary and syntax, and every document written with these computer languages are supposed to follow these rules. The (X)HTML languages, for all versions up to XHTML 1.1, are using machine-readable grammars called DTDs, a mechanism inherited from SGML.

However, Just as texts in a natural language can include spelling or grammar errors, documents using Markup languages may (for various reasons) not be following these rules. The process of verifying whether a document actually follows the rules for the language(s) it uses is called validation, and the tool used for that is a validator. A document that passes this process with success is called valid.

With these concepts in mind, we can define "markup validation" as the process of checking a Web document against the grammar (generally a DTD) it claims to be using.

Meta Tag

What Is the Meta Description Tag?

The Meta description tag is a snippet of HTML code that belongs inside the section of a Web page. It usually is placed after the Title tag and before the Meta keywords tag, although the order is not important.

Forms in dreamweaver

In Dreamweaver CS3, you can check form input for the following types of form fields:

• Text fields. The most common type of form field, the text field is a simple one-line box used to collect information like names, e-mail addresses, zip codes, search terms, and so on. If a particular piece of information is required -- like a last name -- you can prevent a form from being submitted if the user doesn't type anything into that field. In addition, you can make sure that the information a user types into a text field is in the correct format; for example, a correctly formatted e-mail address. Dreamweaver CS3 offers 14 validation options, including e-mail address, zip code, phone number, URL, and time.
• Text area. A text area field is usually used to collect long text entries, such as comments, reviews, or blog entries. Not only will Dreamweaver let you make sure that a text area is filled out, it can also enforce a minimum and/or maximum number of letters. For example, you might want to limit feedback on a "Comments" field to 400 letters, both so it's easier for you to go through all your Web site feedback and to keep your site's database from being overloaded with too much data.
• Check boxes. Providing a simple yes/no option, a check box form field is perfect for multiple choice questions: "select your 3 favorite desserts," for example. Using Spry validation, you can enforce a minimum number ("pick at least 2 options") and/or maximum number ("pick no more than 3") of selections.
• Pull-down menus. A pull-down menu is a compact way to present a lot of options in a single line; for example, a list of states, counties, or districts. Dreamweaver CS3 lets you make sure the user has actually made a selection from the menu before submitting the form.

FLASH Proposal

I will design a online Image Slide show in Flash, using action script and basic Flash animations. The photo slide show will project my Photography. There will be different range of photos.I wanted to incorporate my Digital Photography assignment with my Digital 4 assignment.

Tutorials Links

http://www.squidoo.com/flash_cs3_tutorial_DynamicButton

http://www.frenchsquared.com/AC_index.html

Examples of the slideshow

http://flashenabledblog.com/

http://www.flashcomponents.net/component/banner_image_gallery_xml.html?ref=cpinho

Building a Flash website

Photo slide show half circle. look cool but will not suit me and my purpose. Its not that sophisticated. but like the way its animating.
































Liked the buttons, and the background image.























very colourful, but will not suit my purpose.
look clean and frensh.

















basic slide show.

















flash web layout..
will try different button style and layout




















Few Examples of Flash Slide show:
1> http://www.photobiz.com/flash-website-photographer-google.cfm?gclid=CJq_65mc9pYCFQoUbwodIC4hYQ

2> http://templates.entheosweb.com/template_number/21236.asp

3> http://templates.entheosweb.com/template_number/20300.asp

4> http://templates.entheosweb.com/template_number/19013.asp

Flash Codding

function event...
stop();

function pg1(e:MouseEvent):void{
play();}
{
btn1.addEventListener (MouseEvent.CLICK,pg1);

Web Display Resolution

Display Resolution
The current trend is that more and more computers are using a screen size of 1024x768 pixels or more.

WEB Usability

Users should be considered throughout the website design process. Usability should not be an afterthought. Testing and fixing a website after it has been built is inefficient and unlikely to produce good results. The best approach to take is to incorporate a model of "pervasive usability" into your design and production process.

The benefits of planning usability into your project are:

• Increased end-user satisfaction
• Increased end-user productivity, success, and completion
• Reduced long-term development costs (costs incurred from fixing poorly designed products)
• Reduced training and support costs
• Return business to improve your competitiveness

A Model of "Pervasive Usability" in Website Design

1. Requirements Analysis

• Determine the goals for the website from the perspective of the user and the business.
• Determine the user needs and target usability requirements.
• Evaluate existing versions of the site.
• Perform a competitive analysis.
• Perform user interviews and surveys.

2. Conceptual Design

• Sketch out a site design and architecture at an abstract level.
• Conduct a task analysis to find critical features.

3. Mockups / Prototypes

• Rapidly create visual representations (mockups) or interactive representations (prototypes) of the site.
• Evaluate usability through focus groups, user tests, and walkthroughs.
• Use the evaluation results to create more mockups or improve the prototypes.
• Repeat this process (design iteration) until the design and usability goals are met

4. Production

• Create the final product.
• Evaluate functionality through testing, quality assurance, usability testing, and field testing.
• Use the evaluation results to improve the product.
• Repeat this process (production iteration) until the business goals are met.

5. Launch and Maintenance

• Launch the website.
• Maintain and refine with user feedback.
• Use the feedback to create new requirements, and begin major design improvements (system iteration).

Evaluation occurs at every stage of the process. Similar types of evaluation can occur at different stages of the design process to keep in mind the goals of the project and the users' needs. And if it comes down to a choice, reduce the scope of the project rather than the usability.

CSS

Cascading Style Sheets

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the “learning CSS” page. For background information on style sheets, see the Web style sheets page. Discussions about CSS are carried out on the (archived) www-style@w3.org mailing list (and sometimes on the CSS blog) and on comp.infosystems.www.authoring.stylesheets.

WireFrames

Client like this layout.
According to him it is much more clear and simple.

Absolute Skin Care

Need to develop the simple clean site in CSS and XHTML for Absolute Skin Care on behalf of Catchlight Company.

Tasks:

• Research on the existing site.
• Research on variety of layouts
• Write a description of the site in max of 100 words
  
• Design the Layout in Photoshop, Illustrator
• Finally design the site in Dreamweaver.
  

Absolute Skin Care

Liked the Colours, Subtle and Sleek. I think these are dark myself. I think if we can use her existing coffee colours and contrast thaose with a deep red we'd be on the right track


















like the curve pattern here. Persoonally I'm not so sure.
















Liked the bold colours here

















This one also for the simple Clean look. Ultimately, this is what we should be aiming for. Simple and Clean.

















Clean and Simple. My thoughts are that it fits with her colours so that's probably why she chose it.

Class Note

Using CSS and Design
1> Design the layout to fit CSS (cascading style sheets)
2> Div Tags + Drewmweaver
3> one way to lay a page out

Description of the DIV Tag: The

tag in XHTML is a tag that defines logical divisions within the content of a page. What this means is that a

tag defines sections of a Web page to make it easier to manage, style, and manipulate. You can use the

tag when you want to center a block of content or position a content block on the page. The

tag is a very powerful tool for Web developers.

** Screen Resolution of Mac And Pc is different.

HTML

Designing web with style sheet is easy. A blank space with a header and a footer.Navigations down the banner. most important part of the web layout is top left, where usually the logo sits.

Meta taging

The element provides meta-information about your page, such as descriptions and keywords for search engines and refresh rates.

How to Write a Web Site Creative Brief

A creative brief is a short (one or two pages), high-level document that clearly outlines the important elements of the web site - including objectives, target audiences, requirements etc.

[Project Name] Creative Brief
Summary
Provide a brief overview of the whole project.

Current Situation
Describe the current situation - what is not working, what needs to be improved, what is working. Why the project is needed; what is hoped to be achieved.

Proposal
Describe the project in more detail. What is needed to be done?

Target Audiences
Who is the project targeted at? Are there any specific characteristics that these audiences have?

Goals
What are the main goals of the project?

Requirements
Are there any specific requirements that must be incorporated?

Promotion / Communication Plan
How will this project be promoted and communicated? What is the timing for each promotion / communication and who is involved?

Timing
What is the deadline for the project? Are there any milestones that must be met?

Content of the site

Number of pages in the site will be 6. They are namely:

Home(About Indian Jewellery)- About Us (About the Organisation)-Flash Gallery(images of different jewelleries)-Links(Other relevant jewellery sites)-Site Map(summery of the site)

Useful links for writing Scope

Digital 4 Research

What is Scope Statement?



Scope statements may take many forms depending on the type of project being implemented and the nature of the organization. The scope statement details the project deliverables and describes the major objectives. The objectives should include measurable success criteria for the project.


As a baseline scope statements should contain:
The project name
The project charter (a project charter or project definition (sometimes called the terms of reference) is a statement of the scope, objectives and participants in a project.)
The project owner, sponsors, and stakeholders
The problem statement
The project goals and objectives
The project requirements
The project deliverables
The project non-goals (what is out of scope)
Milestones
Cost estimates
In more project oriented organizations the scope statement may also contain these and other sections:
Project Scope Management Plan
Approved Change Requests
Project assumptions and risks
Project acceptance criteria

Bhaswati Ghosh
Digital 4 – 27th July 2008

Scope Statement


Project name: Absolute skin care website.

Executive summary: Absolute skin care is a Wellington based company. Its a freelance job that was out sourced to me by another company called Cathlight based in Christchurch.The proposed web site design will focus on achieving the objectives of the site and target the audience specified in the requirements analysis.

Site Objectives: The site will provide information about the Company, which will shore up readership number.

Target Audience: The existing client of the company as well as the new clients interested in the skin care.

Technical Requirements: This website will work best with a desktop or laptop computer capable of displaying 32 bit colour at a minimum resolution of 1024 pixels by 768 pixels. The website will be fully compatible with the following web browsers Microsoft Internet Explorer 5.0 or higher and Firefox 1.0 or higher, using Microsoft Windows and Macintosh operating systems. The site will need to design for optimum download using 56K modems.

• EXtensible HyperText Markup Language, or XHTML, will be primarily used for development of the site. XHTML has been approved by the World Wide Web Consortium (W3C). XHTML is a stricter and cleaner version of HTML and is aimed to replace it.

• Cascading Style Sheets (CSS) will be used for specifying display features of text content and layout on the web site. CSS that can be supported across browsers will be used on the site.

Content and Media: The site will display the following media: Logo, Photographs of the jewellery and the content of the site. The JPEG file format will be used for photographic images.

Project deliverables: The site will impress the visitors by presenting useful information with an intuitive navigation system. Further it will have a pleasing artistic treatment of photographs, images, colours and type. The site will also have a site map.



Information Architecture:
• Home→ Logo, Opening hours
• About Us → About the Organisation
• Enquiry → Form
• Contact Us→ Contact Information


Timing: This proposal will be submitted on 28th of July 2008. It is assumed that it will be accepted by next day 29th of July, and the deadline of the project will be on 25th of August 2008.

Assumptions: Tutor will provide feedback and approvals after the submission of the content and imageries. The tutor will be available for meeting at least once every week.

Scope Management: This section would include arbitration and penalty clauses:
• Delay in delivery schedule on the part of the developer.
• Delay in providing feedback and approval on the part of the tutor.
• Delay in providing content and media assets on the part of the developer.