COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon)...

7/29/2019 COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon) Webster U

1/104


2/104


3/104


4/104

4


5/104


6/104

Lastweek,wetalkedabouthowimportantitwasforusalltohaveasolid

understandingofhowthewebworks,whoyouaretryingtoreach(I.e.,the

user),andwhattechnologiesareinvolvedincreatingawebsite

Withoutafirmunderstandingofallofthischancesareyourdesignisnot

goingtowork.So


7/104

LastweekIintroducedustooneofourLyndacourses,HTMLEssential

Training.Thosevideosgaveusagreatoverviewofhowthewebworkedand

thetechnologiesinvolved.

Tonightwe

are

talking

more

about

our

role

as

adesigner

and

will

soon

get

intotheWebDevelopmentLifeCycle.ThereasonIwantustowatchthisnext

clipisthatIwantyoutobeginthinkingaboutwhatyoumightuseyournewdesignskillsforandhowtheymightfitintoyourfutureprofession.Itis

importantforustothinkaboutthinkaboutthesethingsfromtimetotime

becauseIdoubtyoutookthisclassjusttolearnhowtogetanAontheterm

project.

WatchVideo

So,whoinherereallywantstobecomeaprofessionalwebdesigner?Why?


8/104

Forthepurposesofthiscourse,Iamgoingtoassumethatweallwanttobe

professionalwebdesigners.Inasecond,wearegoingtowatchavideothat

discusesaHobbyistwebdesigner.Eitherway,itisimportanttonotethat

youshouldnottakeanyshortcuts.Butagaininthiscourse,Iamgoingto

assumethatyouwanttobeaprofessional.

Sopleasedonttakeanyshortcutswhencreatingyourtermprojector

learningaboutHTML.Feelfreetogoaboveandbeyondthescopeofthis

class.Thekeyistolearnsomethingnewanduseitorapplyittosomething

thatmeetsyourneeds.


9/104

So,donttakeshortcutsandusetemplates. Whiletherearetemplatesouttherethatwillcreateabasicsiteforyouandthenallyouhavetodoisgoin

andinsertyourcontent. Thetruthisthatoftenprofessionalsdonotuse

these.Mostlikelyeachsitetheycreatewillneedtobespecifictotheuserand

theirneeds.Theseneedsdonotoftenfitnicelyintoadownloadable

template.So,

please

do

not

take

any

short

cuts

when

creating

your

website

foryourtermproject.

9


10/104

10


11/104

So,donttakeshortcutsanduseanIDE. Whiletherearetoolsavailablethatwillallowyoutocreateyoursitesvisuallyandthengeneratethecodeforyou,

e.g.,Dreamweaver,NetObjects,ExpressionWeb,Frontpage,VisualBasic,etc.

thetruthisthatveryfewofthosetoolscreateprofessionallevelcode.Ona

sidenoteifyoudoendupwantingtouseoneoftheseafteryouhavetaken

thisclass

please,

please,

stay

away

from

Front

Page.

Ataminimum,aprofessionalwebdesigner/developeryouwillneedtoknow

alloftheinsandoutsofXHTMLandCSSandsoonHTML5.Ihavedesignedthiscoursetogiveyouafoundationinthesetwoareas.Itisuptoyoutobuilduponthatfoundation.Forexample,inyourhomeworkfromlastweekInoticedthatmanyofyouwereexploringstylesandevensomeCSS.ThisisexactlywhatIwanttosee.

So,please

dont

cause

yourself

adisservice

by

using

one

of

these

until

you

leanthebasics.Perhapsyoucantakemyeditorsclassinthespring,wherewe

willlearnhowtouseDreamweaverbasedonwhatyouhavelearnedinthis

class.

11


12/104

UserAccessibility,SEO,andMultipleDevicesTemplatesandIDEscannothelpwiththeseissues.Thesearethe

responsibilityofthewebdesigner.LikeIwassayingearlier,adesignerhasto

haveasolidunderstandingofhowthewebworks,whoyouaretryingtoreach

(I.e.,theuser),andwhattechnologiesareinvolved.

12


13/104

Doesanyonewanttochangetheiranswerfromearlier?Doyouconsider

yourselfmoreofahobbiestorprofessional?


14/104

Soletsgetstartedtodaybyrecapingwhatthosethingsarethatwedesign?

So,aswebdesignerswhatdowedesign?

Ans:RawcontentforthewebthroughtheuseofHTML,CSS,etc.


15/104

15


16/104

16


17/104

Wedesigntheseforthewebnotnecessarilycreatethecontentitself.

17


18/104

18


19/104

Sowhatdoweuseallofthesedesignsfor?Whatdotheyworkon?Whoare

theyfor?Etc.

Ans:Multipledifferenttypesofuseragents,e.g.,browsers,screenreaders,

pads,phones,

etc.

ALL

USER

EXPERIENCES


20/104

20


21/104

21


22/104

22


23/104

23


24/104

24


25/104

Nowletsdiscusshowthesedesignsfunction?Whatdotheydo?Whatdotheyallowtheusertodo?Ans:Ecommerce,forms,databases,searching,navigation,etc.Whatabout

embeddingservices

from

other

sites?


26/104

26


27/104

27


28/104

28


29/104

Sothepurposeofthisslideisjusttohithomethefactthatthispurposethat

wehavebeendiscussingistheheartofthewebsite.Whatarewewithoutour

hearts?Arewesuccessful?

Soplease

know

that

awebsite

is

more

than

just

its

HTML

and

CSS

is

has

aspecificpurposetosolveausersproblem.

Thepurposeofawebsiteistheveryreasonforitsexistence!Everyother

elementshouldbebuilt,createdanddesignedtosupportthatpurposein

someway.Ifitisnotsupportingthepurpose?Thenwhatisitdoing?

29


30/104

30


31/104

31


32/104

32


33/104

33


34/104

Allofthesethingsshouldaddvaluetotheusersexperience.Ifitisntadding

valuethenwhatisitdoing?Itisdistractingthem.

Soyes.Ifyoufindsomethingthatisdistractingyouavoiditlikean

advertisement.You

close

the

window,

hit

the

back

button,

and

move

on

34


35/104

Whataresomethingsthataredistractingonwebsites?Whatarethingsthatyouhateonwebsites?

35


36/104

36


37/104

37


38/104

38


39/104

39


40/104

40


41/104

41


42/104

42


43/104

43


44/104

Thereisevenadebategoingontoday.Whichismoreimportant?Thecontent,

thedesign,orthefunctionality?Thiscouldbeaveryengagingdiscussionfor

COAP2150,WebDesignPrinciplesI.

Ultimatelyit

really

is

just

abalancing

act

between

creating

something

that

is

visuallyimpressivewebsitewithoutjeopardizingtheusability.Butalsowhatif

somethingisvisuallyimpressivebutthecontentispoor?Whatthen?

HonestlysubliminallyIhaveputcontentuphereatthetopforareason.This

iswhattheuserismostlikelylookingfor?Theydontgosearchingforatea

kettleandbuyonefromthemostimpressivevisuallystunningwebsite?Do

they?Areusersthatsuperficial?

Thinkaboutit.Ifthewebsiteseemstobetootrickytonavigate?What

happensthen?

They

may

then

leave

the

site

altogether,

which

defeats

the

purposeofthewebsite.ItshouldbeRULE#1.Givetheuserwhattheyneed

beforetheyleave!

44


45/104

Youwouldthinkitwouldbeanobrainer,butaftersomeresearchwehave

discoveredthatfunctionalitygoeshandinhandwithknowingyourtarget

audience.Thisiskeytothedesignoftheentiresite,asdesignerswillneedto

makethewebsiteaccessibleandappealingourusers.

45


46/104

Witheritisateenagerlookingtobuyteeshirtsfromhisfavoritecartoonsor

someonelookingforwaystheycanitemizetheirdeductionsontheirtaxes.

Thosewebsitesshouldhelptheuseraccomplishwhattheyneedtodo.

46


47/104

Itisimportanttonownotethattheusercanchoose.WhatImeanbythatis

thatWebDesignisdifferentthangraphicdesignwherethedesignisahard

copy.Forawebdesignersdesigns,theusercanchoosetheirOS,browser,

fonts,fontsize,internetspeed,whereandwhentonavigate,etc.

Thetermuseragentsisoftenmentionedherewhichbasicallymeans

somethingusedtoaccesstheWWWandtheyallfunctiondifferently.

47


48/104

So,weshouldunderstandthatweatsomelevelhavealackofcontrolover

theenvironmentwearedesigninganddevelopingin.Sowhatdowedo?

Weneedtolearnallthatwecanaboutthisenvironmentanddesigning

specificallyfor

this

medium.

So,weneedtolearnhowpresentationiscontrolledontheweb.Howto

maximizereadabilityandusabilityforourcontent.

Soweneedtounderstandwebstandardsthatgoverntheweb.Keepinmindthattheseareconstantlychanging.Itisbestforustoevolve.Weneedtoutilizewebdesignprinciplesfordifferenttypesofwebsites,e.g.,

howaecommerce

site

looks,

how

ablog

looks,

how

ainformational

site

looks,etc.


49/104

Comprehensiveplanningand analysisensuresthatdesignersanddevelopers

willprovidewhattheiruserswant.IfyoustarttocodeyourWebpages

withoutthoroughplanningandanalysis,youruntheriskofmissingpertinent

information.ItismuchlessexpensivetomakecorrectionstoaWebsiteinthe

earlyphasesofaprojectdevelopmentthatitistoalterWebpagesthatare

completed.

Itsallabouttheuser.Alwaysabouttheuser.Thewebsiteisfortheuser.Not

forthedesignerortheclient.Amazonswebsiteisnotforthecompany

Amazon.Itisfortheircustomerstheusers.


50/104

Ifyouaregoingtocreateawebsitemakesurethatitissomethingthatwill

actuallyhelpsolveaproblemfortheuser.Thisthenisessentiallythepurposeofthewebsite.Thenthesolepurposeofthewebsiteistomakesurethatthe

usercandoX.Thatiswhythewebsiteisthereinthefirstplace.Thenknowing

thiswecanleverageourentiredesignandfunctionalitybasedonthat

purpose.

Soaswebdesignerscanapproachworkingwithaclientbythinkingoftheir

siteassolvingaproblemfortheuserandthewebsiteisthesolutiontothat

problem.Thisthenallowsustoconsiderhowthewebsitefunctionsasa

meansofsolvingtheproblemoransweringaquestion, ratherthanjust

havingcoolfunctionalityforfunctionalitysake.

AsIhavebeenteachingthiscourseformanyyears,Iseestudentsfallintothe

snareof

designing

and

developing

functionality

in

their

sites

bases

on

apple

pickingofthecoolestfeaturesfromdifferentsitesallovertheinternet.When

IstartseeingthisIquicklyremindthestudentofthedangerindoingso.JustbecauseNikedoesitontheirsitedoesntmeanitwillworkforyours.Thesitemaycapableofdoingallsortsofreallyinterestingthings,butthe


51/104

functionalityisalmostcertainlygoingtoseemlikeadisjointedconfusingmessfortheuserwithoutpurposeorvision.Theusercantaccomplishwhattheyoriginallysetouttodo.Soremember,thisquoteonpage14ofyourbookwillhelpusstayontrack.

50


52/104

Whenwedesignwebsitesweshouldbecreatingsomethingthatsatisfiesthe

needsforboththeclientandtheuser.Forthepurposesofthiscourseweare

mostlythinkingabouttheuser.

Weshouldalwayshaveafirmunderstandofoursites goals.Thisinformation

oftenwillcomefromtheclient.Whydoestheclientwantitonline?Forthepurposesofthiscourse,weareourownclients.Anotherkeyelementtoknow

hereiswhataretheuserssupposedtodo?BuyingthebandsCDs,finding

theirconcerts,readingtheirrecentnews,ordiscussingonthemessage

board?Theclientwillhelpusunderstandwhichgoalisthemostimportant.

Knowingthiswilldrivetheorganizationofthesite.

ThisiswhatyouwillbediscussingwiththeclassinyourTPjournalseach

week.

Weshouldunderstandtheaudienceofoursites.Remember,yourtextstates

onpage14.

51


53/104

Soafteralloftheanalysislegworkwethenneedtomakesurethatour

contentiscentraltoourdesigns.RememberContentIsKing!Oursitescould

havereallycoolimagesandvideosbutifourcontentisntclearand

accessible,thenoursitesfail.Itisimportanttonotethatasitescontentis

basedontheresultsofthepreviousphases,e.g.,thepurpose&analysis.Itis

alsohighly

possible

that

asite

design

and

development

team

might

have

to

go

backwordsandrethinkthepreviousphasesbecauseofwhatisfoundoutin

thedesignphase.

Sometimesasitesdesignactuallyrestrictswhattheuserislookingfor.Agood

designisclear,concise,anduncluttered.Thevisualsofasiteshouldenhance

theuserexperienceanddrawattentiontothecontentandnotdistractthem

fromit.Ifyoucannotjustifyusingsomethingthatcreatesmorecompelling

anddirectcontent..dontuseit.Becauseitscoolisnotajustification.

OnoursyllabusImentioninthetermprojectsection:

If there is ever a question about whether an image, video, color, etc. meets the

needs of the user, then discuss it with your instructor. It may be determined

that the object or tag should not be included. All attributes of a web site should

52


54/104

always be purposeful and not distracting to the user.

52


55/104

Tomakesurethatyoursitedoeswhatitneedstodo,itneedstobetested

withyouruseranddeterminewhatneedstobechangedsothattheycando

whattheyneedtodo.Forexample,howwillyourtargetaudiencewantto

navigateyoursite?Byknowingthis,youcanfinetunethesitesfunctionality.

Therecouldbebarriersthatyoumightnotofmeanttobeputupthatwould

needto

be

taken

down.

LastweekIwastellingyouaboutagoodfriendofminewhoworksinaweb

designfirminIllinois.Heisadesignerinalargewebdesignshop.Clients

cometothemforhosting,sitedesign,maintenance,etc.Eachdayhegets

informationfromthesalesteamonwhattheclientwants.Becausehehasa

trainedeye,heoftenfindsthingsthatwillbedistractingornotworkforthe

userandwillsendthedesignbacktothesalesteamforthemtoreconfigure

withtheclient.Soitisimportanttonotethatthewebsitedevelopmentcycle

cangobackwards.

Onthelastdayofclassthistermwhenyoupresentyourwebsitetotheclass,

anotherclassmatewillcompleteausabilityformforyoursiteastheytestits

functionalityanddesign.

53


56/104

54


57/104


58/104


59/104

Soletsgooutandgetsomesampletexttoplaywith.Iamgoingtograbsome

andplaceitinmysample.htmlpageasonelargeparagraph.

Makesuretogivethepageadescriptivetitleandsaveaswithanewfilename

inyour

Week

2folder.


60/104

Ifyouhaventsavedanewfileinawhile,letssavethisoneaslists.htmlaswe

playwithlists.


61/104

RobertDeNiro

Thisismyfavoriteactorbecauseofhisearlywork:

MeanStreets(1973)

GodfatherII(1974)

TaxiDriver(1976)

DeerHunter(1978)


62/104

RagingBull(1980)

OnceUponATimeInAmerica(1984)

Saveaslists.htmlinyourweek2folder.

59


63/104

Letsuseoneofourfilesandpracticeaddingcomments.

Whyisitimportanttousecomments?


64/104

61


65/104

Sobeforewegetstartedweneedtogetoursample.htmlpagefromlastweek

andopenitupinsaveitinafolderthatwewillcallweek2onthedesktop.We

willcreatemanydifferentpracticepagesthisweekandsavetheminour

practicefolderforthisweek.


66/104

Samewiththisone.Letscreateanewfileandcallitnoncharacterentities

andsaveitinthesamefolder.


67/104

64


68/104

Letspracticeputtingintwodifferenttypesofimages.Theyreallyarenot

differentimagestheyaredifferentintermsofwheretheyarelocated.Are

theyinthedirectoryofthesite?Oraretheyfoundsomewhereexternallyon

theinternet?SorememberallwearedoingiscodingourXHTMLsothatthere

willbeawindowtowherethatimagewillbefound,I.e.,thesourceofthe

image.

TobefullyXHTMLcompliantweneedtohavethealternativetextattribute.Whydoyouthinkthatisrequired?Welloneofthew3sgoalsistomakethe

webaccessibleforallusers.Someusersarevisuallyimpairedandthealt

attributewillreadythedescriptionoftheimagetotheuseriftheyareusinga

screenreader.

Goourandrightclickonanimageandsaveitinyourweek2rootfolderina

newdirectory

called

images.

We

also

need

to

find

an

image

that

is

on

the

internetandgetitsuniversalresourcelocator,I.e.,URL.

Togetthewidthandheight,rightclickandviewproperties.

65


69/104


70/104


71/104

RobertDeNiro

Thisismyfavoriteactorbecauseofhisearlywork:

Saveasaddingimagesintheweek2folder.


72/104


73/104

Thereare4typesoflinks.


74/104


75/104

Syntaxisthesamebutthelinkisnotwithintherootofthesite(sitesmain

directory)


76/104

Allexternallinksshouldhavethetargetattribute.

Yourusershouldneverleaveyoursiteaccidentally.Ifyouownastoreatthe

mallandsomeonecomesintotryonsomejeansyouwouldntwantthemto

gointo

the

dressing

room

and

then

accidentally

leave

the

store

would

you?


77/104

Twostepprocess

1. Findwhereyouwanttoanchorto

2. Placethe

link

that

will

direct

the

user

to

the

anchor.

Youcanevenanchorauseronaspecificpageonaspecificlocation.


78/104

Showtheemailaddressandnotclickhere

Invitetheusertoemailyou


79/104

BesurethatyoucheckoutRobertonInternet

MovieDatabase

(IMDB).

WanttoknowmoreaboutRobert?Pleaseemailmeat [email protected]

BackToTop

Saveaslinks.htmlintheweek2folder.


80/104

77


81/104

Saveasdir_image.html

78


82/104

79


83/104

Mostlikelyasitehasmultipledirectoriesforimages,scripts,files,etc.But

thereshouldnotbeanewdirectoryforeverypageofoursite!!!


84/104

WecanalsocreatestylesforvariouswebpageelementsusingCascadingStyle

Sheets.Theserulesdefinehowallparagraphsorlistsmightlookonapage.These

dealmorewiththeappearanceofawebpage.CSSisnotcontent.

Forexample,HTMLiswhatisunderthehoodofawebsite.CSSisthecolorofthecar.

Youcan

take

the

car,

what

is

under

the

hood,

the

body

and

add

color

to

it.

Add

leatherseats,chromewheels,convertibletop,coloritred,etc.Butontheslipitstill

saysitsaFordMustang.Nowmatterwhatcosmeticthingsyoudotoit,itisstilla

MustangandfunctionslikeaMustang.Whileitlooksdifferent,itisstillaMustang.

Toillustratethispoint,letsallcheckoutCSSZenGarden.com

81


85/104


86/104


87/104


88/104


89/104


90/104


91/104

WhatwouldbeadeclarationthatIcouldusetostylethisheading?

88


92/104


93/104

90


94/104


95/104


96/104

WhatwouldbeadeclarationthatIcouldusetostylethisheading?

93


97/104

HavestudentsgotoAppendixDintheirbook


98/104

Saveasinline_styles.html


99/104

96


100/104

Aswebdesignersanddevelopersweshouldalwaysbeobservantofwhatis

outthereontheweb.Doessomethinglookincorrect?MaybeIcancontact

themandhelpout?WowthatisreallycoolmaybeIcouldlearnhowtodo

thatandaddittomysite.

Weshouldespeciallybekeepinganeyeonthefunctionalityanddesign.This

weekweexploredsitestoseegoodandbadexamplesofsiteswith

meaningfulcontent.Thisiswherewekeepaneyeonthefunctionalityand

design.Aswedevelopoureyesforthesethingsitwillhelpustomakesure

ourfutureclientsanduserswillgetwhattheyneedandusallagreaterreturn

onthewebsiteinvestment.


101/104


102/104

99


103/104

100


104/104

COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon)...

Documents

Transcript of COAP 2000 Fall 1 2013 Week 3 Lesson Creating Web Pages with Text, Links, & Images (Dave Hallmon)...