Soo Kim's List: Web design

How the web works-

the web is built upon a client and server relationship

popular clients - browsers mobile devices. chat clients.

trying to keep up with the new clients and how they access and render your content is one of the challenging aspects of web design

wide range of web servers.

applications that deliver web content to the clients.

process of requesting and receiving user content

-your browser requests content using a URL

and the url is passed into a DNS server

then the DNS server translate the url into a IP address

the IP address is used to locate the host surver (PHP) and send a request for the content

-if its a simple html page that is requested.

the html text(which may include css java images etc) is just sent to the browser where its rendered and presented to the user via the browser.

if its something that needs to be processed using php or coldfusion .net etc then before the content is saved to the browser. the content is processed and then the appropriate data is rendered

------------

what is a url.

uniform resource locater.

http - is known as the protocol. the protocol tells the server what type of file it is requesting.

there are many protocols but the http is primarily used for html files.

www.example.com is known as the resource name

www is the subdomain

example is the domain

.com is the top-level domain

now the subdomain is no longer needed.

a subdomain is simply a folder where your web content is located in.

url path may be homeiewcourses.aspx

and then the parameters(text that is attached to the end of a url) tell the server what it is requesting

example: if somebody is searching for something on a site for music.

the data of different artists are each given a specific number. that number ends up in the url and tells what info the server needs to retrieve based on what the user inputs.

absolute url is the entire file path http:www.example.com

relative url are used within the same domain homeda.php

THE DNS

domain name server

when we register a domain. the site appoints it a unique ip address and registered with the DNS

computers use these long strings of number.

in order to make the web more useable we have text associated with each ip address.

DNS, the internets phoen book

example. if you are on your browser and type in a url. it'll send a request to your local ISP DNS. and if it recognizes the ip number then you keep going but if it doesn't. it'll move over to the ROOT NAME SERVER where it will search for your ip number through the .COM NAME SERVER based on your top-level domain (.com)

http

hypertext transfer protocol

your browser is a http client

and your host is the http server

the http client (browser) sends an http request explaining what resources it requires prompting the server to include a http response.

question (so if http is responsible for requesting html files from the server and the dns server gets the ip address.. how are the two connected and how do they work together within a url)

other protocols : ftp smtp rtp

ftp: file transfer protocol

ftp connects to a file server instead of a web server so is ideal for transferring big files

(question: what is the diff. between a file server and web server)

for this reason. designers use ftp servers for uplaoding and downloading things to their site.

smtp - simple mail transfer protocol

used for sending mail

pop - used for receiving mail

http is a stateless protocol so once a request is sent and received. it is discarded by both the browser and server.

so if you need data to persist through browsing sessions..you'll have to account for http's stateless nature.

------

how does the browser work

the browser uses its internal rendering engine to render the html file given from the server onto the browser.

browsers behave differently because they were designed independently of eachother. so there are different rendering engines for each browser.

they may behave differently based on their DOM support of java interpretor

DOM(document object model)

the javascript interpretor works differently in different browsers.

different rendering agents are trident (ie), presto gecko(mozilla) and web kit (chrome safari)

web history: ie and netscape (browser wars)

so they each invented proprietary features that were "better and cooler" than their counterparts.

this led to designers having to design for both browsers.

so a group of designers started "web standards" w3c

by browsers following these web standards. design will be consistent.

web standards are constantly evolving..

----

WHAT IS HTML

w3c introduced xhtml

xHTML was meant to move html to a xml approach

html5 is considered to be the new standard.

<.head.> contains the non visual elements that help the page work

like links to external documents like css

it includes metatags

the body tag contains the images.

the visual aspect of the html file is included int eh body.

-------------

DTD

document type definition

in order for the client to know

document type declaration

this will tell browsers which markup language you are using.

strict, transitional frameset doctypes. (dunno research more on this)

------

CSS

p{font-family:Arial;}

{property:value;}

selector {declaration}

html controls the structure

css controls the style

and with more and more clients coming out. you can use the same style sheet with different clients.

------

XML

eXtensible markup language

RSS feeds are XML documents that conform to a specified standard

---

RSS

rss is a standardized xml file designed for distributing content.

feed creation is typically a server-side process like php

most blogging platforms have feed creation built in

most individuals consume rss feeds through news feeds. or aggregators

if you want to integrate an rss feed onto your site

you will need javascript or server side solution to translate the xml file to readable content on your site

-----

JPEG GIF PNG

jpg- joint photographic experts group

millions of colors

making it ideal for photographs

jpegs are compressed with 'lossy' compression

data is thrown away when it is compressed

one area that have similar colors is tagged and the remaining area is discarded

as the jpeg is decompressed. the tagged area plugs in the remaining area with that color

jpg's are compressed each time they are saved.

so you should save the original file somewhere and override whenever you update thei image.

gif's are 8bit graphics

only use 25six colors

typically used for logos or icons

support transparency and animation

png support transparency

lossless compression format

supports millions of colors

larger file sizes

png transparency is not supported on older browsers.

-------

what is javascript

javascript usually happens in the browser or client side

so people dont have to refresh in order for changes to occur

javascript frameworks make it a lot easier

basically getting the basic code and implementing the code onto your site making a few changes based on what you need

popular frameworks:

prototype.com

jquery

mootools

spry.com

have a strategy in order to provide alternate content for those browsers that don't support java interpretors.

WHAT IS AJAX

development of interactive applications using exisiting technologies and languages.

most ajax applications use heavy use of html css DOM java and xml.

javascript does not require a page refresh

data can be stored in an xml file or a javascript object with data being sorted within the client.

---

WHAT IS SQL

structured query language

it is what is used to get data from databases.

how its used:

when you have certain information in a database and when you request a certain command like "data that is under 200$ and order in alphabetical order" the sql will set up a 'dataset' which comes with the requested command which in this case would be the list of under 200$ results in alphabetical order.

utilizing server side software allows you to design pages that are dynamic.

dynamic pages are much more engaging and you can process forms on your site. and make shopping carts.

PHP-

hypertext preprocessor

php is open source (what does that mean)

JSP - java server pages

for bigger companies

.NET - microsoft

---

know your audience

find out your site demographic

do they have disabilities

what browser do they use

do they have access to a mobile phone

what age range are they in

what do they like

etc

progressive enhancement-

making sure that at least your content is accessible to everyone without the external embellishments like java css and html

web hosting--

shared server. dedicated server

if you are on a shared server. see who your neighbors are and who you are sharing with

see if your server side software is supported like php coldfusion etc

make sure they have good customer service.

make sure you own the domain name not the hosting company.

publichtml and ww are the same folder. root folder

tier one page

tier two page - sub folder

CONFUSED

all file names should be lowercase

always back up

use care when moving files