Web Design Concepts By Josh Gallagan

The Internet

 The Internet is a global system of interconnected computer networks that use the standardized Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.  It is a network of networks that consists of millions of private and public, academic, business, and government networks of local to global scope that are linked by copper wires, fiber-optic cables, wireless connections, and other technologies.  The Internet carries large amounts of information resources and services, most notably the inter-linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support electronic mail.

History of the Internet  Started in 1969 as ARPANET. A Military and National Science Foundation experiment to connect all its computers.  ARPANET connected 2 computer networks in California. This was the birth of what we now know as the internet.

Internet vs The Web  The Internet and the World Wide Web are not one and the same.  The Internet is a global system of interconnected computer networks.  In contrast, the Web is one of the services that runs on the Internet.  The Web is a collection of interconnected documents and other resources, linked by hyperlinks and URLs. The Web is an application running on the Internet.

WWW - The World Wide Web  The computers on the Web communicate using standard protocols and languages.  The W3C (The World Wide Web Consortium) are making the rules and standards for the Web.  All the computers use a communication standard called HTTP = Hyper text transfer protocol.

History of The WWW  English physicist Tim Berners-Lee, now the Director of the World Wide Web Consortium, wrote a proposal in March 1989 for what would eventually become the World Wide Web.  He was later joined by Belgian computer scientist Robert Cailliau while both were working at CERN in Geneva, Switzerland.  In 1990, they proposed using "HyperText [...] to link and access information of various kinds as a web of nodes in which the user can browse at will", and released that web in December.

How Does the WWW Work?  Web information is stored in documents called Web pages  Web pages are files stored on computers called Web servers  Computers reading the Web pages are called Web clients  Web clients view the pages with a program called a Web browser  Popular browsers are Internet Explorer and Mozilla Firefox

Size of The World Wide Web The Indexed Web contains at least billion pages (Wednesday, 14 October, 2009). From worldwidewebsize.com

How Does the Browser Fetch the Pages?  A browser fetches a Web page from a server by a request  A request is a standard HTTP request containing a page address  A page address looks like:

How Does the Browser Display the Pages?  All Web pages contain instructions on how to be displayed  The browser displays the page by reading these instructions  The most common display instructions are called HTML tags  The HTML tag for a paragraph looks like this:  The HTML tag for a paragraph looks like this:  A paragraph in HTML is defined like this This is a Paragraph  A paragraph in HTML is defined like this This is a Paragraph

Who is Making the Web Standards?  The Web standards are not made up by Netscape or Microsoft  The rule-making body of the Web is the W3C  W3C stands for the World Wide Web Consortium  W3C puts together specifications for Web standards  The most essential Web standards are HTML, CSS and XML  The latest HTML standard is XHTML 1.0

What is W3C  W3C Stands for the World Wide Web Consortium  W3C was created in October 1994  W3C was created by Tim Berners-Lee  W3C was created by the Inventor of the Web  W3C is organized as a Member Organization  W3C is working to Standardize the Web  W3C creates and maintains WWW Standards  W3C Standards are called W3C Recommendations

Web Page Accessibility  Deals with making web pages easy to access for the blind, deaf, physically handicapped The Web Accessibility Initiative – WAI  WAI – Web Accessibility Initiative (created by W3C, in 1997) is a set of guidelines intended for web developers, authors, and designers- about how to make the web content accessible to people with disabilities.Also WCAG.  Section 508 – US Law – Everyone must have equal access to technology.

Accessibility  The needs that Web accessibility aims to address include:  Visual: Visual impairments including blindness, various common types of low vision and poor eyesight, various types of color blindness;  Motor/Mobility: e.g. difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc., due to conditions such as Parkinson's Disease, muscular dystrophy, cerebral palsy, stroke;  Auditory: Deafness or hearing impairments, including individuals who are hard of hearing;  Seizures: Photoepileptic seizures caused by visual strobe or flashing effects.  Cognitive/Intellectual: Developmental disabilities, learning disabilities (dyslexia, dyscalculia, etc.), and cognitive disabilities of various origins, affecting memory, attention, developmental "maturity," problem-solving and logic skills, etc.;

The Web Design Process 1. Define – Define you audience and consult with the client. 2. Structure – Flowchart/Sketches 3. Design – Storyboarding 4. Build and Test – Site Production/Usability Testing/Revision/Final Presentation to Client 5. Launch – Site goes online (FTP)

The Process

Concepting  Design Document – A document with the entire plan for the website. It includes a flowchart and storyboard.  Flowchart  Storyboards

Concepting Flowchart – The map of the website and how the pages flow. Flowchart – The map of the website and how the pages flow.

Concepting Storyboard – A map of where things will be placed on the webpage. Storyboard – A map of where things will be placed on the webpage.

Front End vs Back End  Front End = Design (Fireworks)  Back End = Coding (Notepad)

GUI or WYSIWYG (HTML Editor) vs Hand Coding (Text Editor)  WYSIWYG = What you see is what you get. Dreamweaver  GUI = Graphical User Interface. Dreamweaver.  Text Editor = Notepad  CSS = Cascading Style Sheets

My Name is URL –  Web Page Addresses (URL) Absolute vs Relative  URL = Uniform Resource Locator. Basically it is a web page address.  Using an Absolute URL in an tag  Using a Relative URL in an tag

Web Browsers 5 Major Browsers 1. Internet Explorer (Microsoft) 2. Firefox (Mozilla) 3. Opera 4. Safari (Mac) 5. Chrome (Google)

Web Browsers

Web Servers and FTP  Web Server is a computer program that is responsible for accepting HTTP requests from clients, which are known as web browsers, and serving them HTTP responses.  A Web Server can also be a computer that runs a computer program as described above.

Web Servers and FTP  FTP = File Transfer Protocol  An FTP progam sends files saved locally to a server that broadcasts over the entire Web.  Examples of FTP Programs WS FTP, CUTE FTP, IE, Filezilla

Filezilla

Common Monitor Resolutions  How a person sets their monitor resolution will change how a web page appears on the screen.

Common Monitor Resolutions The current trend is that more and more computers are using a screen size of 1024x768 pixels or more: The current trend is that more and more computers are using a screen size of 1024x768 pixels or more: DateHigher1024x768800x600640x480Unknown January %36%4%0%3% January %48%8%0%6% January %54%14%0%6% January %57%20%0%6% January %53%30%0%5% January %47%37%1%5% January 20036%40%47% 2%5% January %34%52%3%5% January %29%55%6%5% January %25%56%11%4%

DTD = DOCTYPE Declaration Is Mandatory to Validate Document Type Definitions (DTD) A DTD specifies the syntax of a web page in SGML DTDs are used by SGML applications, such as HTML, to specify rules for documents of a particular type, including a set of elements and entity declarations An XHTML DTD describes in precise, computer-readable language, the allowed syntax of XHTML markup

DTD = DOCTYPE Declaration There are three DTDs: 1.STRICT Use the strict DOCTYPE when you want really clean markup, free of presentational clutter. Use it together with CSS. 2.TRANSITIONAL Use the transitional DOCTYPE when you want to still use HTML's presentational features. 3.FRAMESET Use the frameset DOCTYPE when you want to use HTML frames.

HTML 1.0 DTDs Strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " " <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " " <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " "

XHTML 1.0 DTDs Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " "

Other Web Concepts  Meta Tags  Alt Tags  Deprecated Elements – Phased out and discouraged from use.  Web 2.0  Forms  CGI, SSL, HTTPS