Web Design MGS 351- Renee Cerullo

What makes the Internet work HTTP - Hyper Text Transfer Protocol DNS - Domain Name Server DNS servers are used to map permanent and user-friendly names like microsoft.com to unfriendly and impermanent IP addresses Domain Names Web Servers

Domain Name Registration When you want to use a domain name you need to register it with a Domain Registrar so that everyone on the Internet can access your site Eg – Dotster, Network Solutions It is how your site visitors and customers will remember you and find you among the millions of other websites on the Internet. overseen by the ICANN (Internet Corporation for Assigned Names and Numbers)

Web Servers Computers that actually run web sites Also refers to the piece of software that runs on those computers, accepting HTTP connections from web browsers and delivering web pages and other files to them, as well as processing form submissions Types – IIS, Apache, Websphere

Web Servers Every Web server has an IP address and most likely a domain name Any computer can be turned into a Web server by installing server software and connecting the machine to the Internet Web Developers have a web server running on their desktops – comes with Windows OS Web Servers look for certain pages on a web site to load by default Index.htm, index.html, deafult.asp, index.asp, etc You can set the web server to load any page by default

Web Page Design

W3C Founded in 1994 – World Wide Web Consortium Creates specifications and guidelines that are intended to promote the web’s evolution and ensure that web technologies work well together Specifications for: HTML, CSS, XML, XHTML, DOM, etc…

W3C Not all browser companies follow or adhere to these guidelines It was not until FireFox, Netscape 7 and IE 6 did browsers truly support the W3C Web Standards This is why a web page may look different in two browsers Eg. Browsers support different standards, not all of them and support them in different methods

Designing with Standards Does not mean “designing for the latest browsers only” The perfectly designed site (w/standards) will never look identical in all browsers – both current, past, and future browsers Should always function and look pretty close in any browser

Web Standards Structural languages like XHTML and XML, presentation languages like CSS Designing with standards lowers production and maintenance costs makes sites more accessible to users who have special needs Makes sites cross platform and browser Viewable on handheld devices

Designing with Standards When you design with web standards you break the web page into 3 parts: Structure Presentation Behavior

Designing with Standards Structure: A markup language (XHTML) contains text data formatted according to its structural (semantic) meaning. Headline, paragraph, list etc.. Example: this is a paragraph of text News & Events structure presentation behavior

Designing with Standards HTML is obsolete! HTML -> XHTML

Designing with Standards Structure: When authored corrected XHTML will work in all web browsers, screen readers, text browsers, and handheld devices Valid/Semantic Code when: Contains no errors Tags are chosen according what they mean- eg – h1-> headline Code can be valid but not semantic

Designing with Standards Presentation: Presentation languages (CSS) format the web page, controlling the typography, placement, color, etc… Due to the separation of structure from presentation you can easily change one w/o effecting the other Eg – change the font type for the entire site w/o touching and of the actual web pages

Designing with Standards Presentation: Cleans up the actual web page code Eg: heading of an article WITH CSS heading of an article

Designing with Standards A XHTML template controls the document structure A CSS controls the site’s look and feel Changes can be made or new pages added w/o worrying about any presentation issues. Just add the text and the page is automatically formatted properly

Web Standards Allows you to design on web page and have it look correct on: PDAs Cell phone browsers Desktop browsers – IE, Mozilla, Netscape, Opera Screen Readers Print

Examples of why we us Standards School of Mgmt on a desktop browser: School of Mgmt on a PDA browser: School of Mgmt on a cell phone browser:

Examples of why we us Standards PDA browser Cell Phone browser Opera PDA browser

Accessibility Intended to ensure that our work will be usable and available to the largest possible number of people Hot topic in the web design industry Laws are in place to make sure companies and web designers adhere to certain rules

Who does it affect? Visually impaired – blind or limited site or elderly Physically disabled Color blind Motor impaired – rather buy online than deal w/the hassle of going to a store Any thoughts on who else? There are a whole bunch more!

Who does it affect? Search engine crawlers – extreme blind user Called the “Blind Billionaire” Biggest category of blind users PDA users Text only browsers Cell Phone users

US Section 508 Guidelines Part of the US Rehabilitation Act of – Public law – Rehabilitation Act Amendments – significantly expanded 508’s technology access requirements Covers: fax machines, copiers, telephones, ATMs, kiosks – any machines for transmitting information – including web sites

Lets talk code – XHTML Code

XHTML Tighter rules than HTML New elements Consistent unlike HTML Must open & close tags Eg – HTML -> XHTML -> Avoids browser problems w/closing tags Merges HTML and XML Cant not serve raw XML to a browser

XHTML Syntax DOCTYPE informs the validation service which version of XHTML or HTML Always written in CAPS Informs browsers which document type definition you are using – how to handle your web page so it is displayed properly Pages wont validate w/o the proper DOCTYPE stated

XHTML Syntax DOCTYPE – 3 types to choose from Transitional – more easy going and flexible. Most people are using this Strict – everything must be perfect and there is no flexibility Frameset – 90’s fad – Allows you to use frames on your page – YUK!

XHTML Traditional Closest to HTML You can use the target attribute Opens pages in new windows Used with frames Background color for table cells You can use tables

XHTML Syntax - Structure General Structure of a web page: DOCTYPE XHTML Namespace declaration text here (see example)

XHTML Syntax - CASE Case sensitive All tags must be written in lowercase With HTML many people wrote tags in uppercase Eg. - becomes If tags are not written in lowercase letters then the page will NOT validate Some Editors will do this automatically for you Warning – some OS are case sensitive too Means that your filenames must be exactly the same or it wont find the file – UNIX is like this EG – Test.htm is not the same as test.htm on UNIX

XHTML Syntax - Attributes Quote all attribute values width =200px should be written width = “200px” Must have spaces between attributes should be written

XHTML Syntax - Attributes All attributes must have values! OR Are INVALID VALID MARKUP: AND

XHTML Syntax - Tags All tags must be closed goes to goes to ** Editors will do this for you if you specified you are using XHTML not HTML

XHTML Syntax - Characters Encode all special characters Patch & I = Patch & I x<y = x &< y

XHTML Syntax -Links Syntax: Web Page Link or to a document: some text Link: Renee Cerullo

XHTML Syntax - Links Relative Links – only contain the information that is required to determine the new location Eg – some text OR some text Absolute Links – Full URL to a page Eg – some text

XHTML Syntax - Images You can use bmp, gif, jpg, or png images on a web page

XHTML Syntax Think of your markup in structural rather than visual terms Use CSS for layout/presentation Use elements for what they mean Eg – there should not be multiple h1 tags throughout the web page Don’t use a lot of Use Lists don’t have to have bullets in front of them

UB Web Environment UB provides web space for each student on the UBUNIX servers which run the Apache webserver. Your webpage can be viewed in any of the 3 locations. wings.buffalo.edu/~djmurray

UB Web Environment URLs and files are case sensitive because the UNIX OS is case sensitive. - error! - works! Windows servers running IIS are not case sensitive. works the same as

UB Web Environment Remember that a webpage is simply a file stored on a webserver in a particular location. Your UB homepage is stored in the public_html directory of your S: drive. Anything in that directory is technically on the web.

UB Web Environment It’s easiest to work from a lab computer since they have direct access to the S: drive folders. Enable your homepage first. Use Windows Notepad to edit the index.html file in your public_html folder.

XHTML Demo Lets put together a page using XHTML