Web Design MGS 351- Renee Cerullo. What makes the Internet work HTTP - Hyper Text Transfer Protocol...
-
date post
21-Dec-2015 -
Category
Documents
-
view
221 -
download
0
Transcript of Web Design MGS 351- Renee Cerullo. What makes the Internet work HTTP - Hyper Text Transfer Protocol...
Web DesignMGS 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. www.cheektowaga.org 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:<p>this is a paragraph of text</p><h1>News & Events</h1> <ul>
<li>structure</li><li>presentation</li><li>behavior</li>
</ul>
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: <p><font color=“#000000”
size=“10px”><b>heading of an article</b></font></p>
WITH CSS
<p class=“articleheading”>heading of an article</p>
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 browserCell 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
1973
1998 – Public law 105-220 – 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 -> <br>
XHTML -> <br/> 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:
DOCTYPEXHTML Namespace declaration<html><head></head><title></title><body> text here</body></html>
(see example)
XHTML Syntax - CASE
Case sensitive All tags must be written in lowercase
With HTML many people wrote tags in uppercase
Eg. - <TITLE> becomes <title> 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<hr width=“80%”size=“2” /> should be written<hr width=“80%” size=“2” />
XHTML Syntax - Attributes All attributes must have values!
<hr noshade> OR <option value=“option1” selected>Are INVALID
VALID MARKUP:<hr noshade=“noshade” /> AND<option value=“option1” selected=“selected”></option>
XHTML Syntax - Tags
All tags must be closed
<br> goes to <br/>
<input name=“field1”> goes to <input name=“field1” />
<p> </p>
** 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 & Ix<y = x &< y
XHTML Syntax -Links
Syntax:
Web Page Link or to a document:<a href=“index.htm”>some
text</a>
Email Link:<a href=“mailto:[email protected]
”>Renee Cerullo</a>
XHTML Syntax - Links
Relative Links – only contain the information that is required to determine the new location Eg – <a href=“/crc/index.shtm”>some text</a> OR <a href=“/crc/”>some text</a>
Absolute Links – Full URL to a page
Eg – <a href=“http://mgt.buffalo.edu/crc/index.shtm”>some text</a>
XHTML Syntax - Images
You can use bmp, gif, jpg, or png images on a web page
<img src=“/images/logo.jpg” alt=“RLC Logo” title=“RLC Logo” />
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 <br /> Use <p> 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. www.buffalo.edu/~djmurray
www.acsu.buffalo.edu/~djmurray
wings.buffalo.edu/~djmurray
UB Web Environment
URLs and files are case sensitive
because the UNIX OS is case
sensitive. www.buffalo.edu/~djmurray/INDEX.html - error!
www.buffalo.edu/~djmurray/index.html - works!
Windows servers running IIS are not
case sensitive. www.mgt.buffalo.edu/INDEX.cfm works the same
as www.mgt.buffalo.edu/index.cfm
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. https://webdfs.buffalo.edu/cgi-bin/
pub_html_on_off.cgi
Use Windows Notepad to edit the
index.html file in your public_html
folder.
XHTML Demo
Lets put together a page using XHTML