Web Design Lesson Plan
Content
Title: Fundamentals of Web Design Topic: Basic Web Site Construction & Tec!ni"ues #rade: $%
Subject/Course: Business & Computer Science Interactive edia Designer&s': Tarena (uff
Stage $) Desired (esults Established Goals: BCS-FWD-1. Students will demonstrate an understanding of the planning de!elopment and implementation of web sites. a. Define "e# terms in web site de!elopment in$luding $lient-side ser!er-side %&'( CSS databases and CG). b. Demonstrate "nowledge of essential web site na!igation issues. $. Demonstrate "nowledge of do$ument and web site file stru$ture. d. Demonstrate an understanding of $reating and using h#perlin"s in web sites. e. Create a flow$hart*stor#board. f. Des$ribe one or more target groups. g. +resent web site. ,$ademi$ Standards: E(,1-.C/. &he student a$0uires new !o$abular# in ea$h $ontent area and uses it $orre$tl#. E(,1-(S11. &he student parti$ipates in student-to-tea$her student-to-student and group !erbal intera$tions. E(,1-(S1-. &he student formulates reasoned 2udgments about written and oral $ommuni$ation in !arious media genres. &he student deli!ers fo$used $oherent and polished presentations that $on!e# a $lear and distin$t perspe$ti!e demonstrate solid reasoning and $ombine traditional rhetori$al strategies of narration e3position persuasion and des$ription. E(,1-W-. &he student demonstrates $ompeten$e in a !ariet# of genres. 4nderstandings: , web site that is well $onstru$ted is per$ei!ed to be professional $redible and appealing to its audien$e. Essential 5uestions: Wh# is it important to $onsider #our audien$e before designing a web site6
&he )nternet is be$oming more of a pla$e to e3$hange What $aused the popularit# of so$ial networ"ing sites information rather than a pla$e to simpl# retrie!e su$h as Fa$eboo" '#Spa$e (in"ed)n6 information. )n what wa#s are web sites a better sour$e of Website users ha!e $ome to be more $omfortable information than other media6 ,re web sites with a predi$table na!igational stru$ture. ne$essaril# a better sour$e of information6 +ersonal and professional web sites differ in design and stru$ture. Different audien$es will re0uire different web stru$tures la#outs and a$$essibilit# standards. %ow do web sites help or hinder human $ommuni$ation6 What are the pros and $ons of publishing information on the )nternet6
Students will "now7 • &erminolog# in web site de!elopment • Web site na!igation issues • Web site file stru$tures • Good $oding pra$ti$es • )maging te$hni0ues • File formats and e3tensions • 4ses of web site tags*elements
Students will be able to 7 • Create a web site using a simple te3t editor • Create and use internal and e3ternal h#perlin"s • Create a web site diagram*la#out*stor#board and present to an audien$e • 4pload web site files to a ser!er • Create a web form and $olle$t user input using a database
+erforman$e &as":
Stage %) *ssessment +vidence =ther E!iden$e: • • • • • • • • • • 4nit terminolog# 0ui9 Sour$e $ode assignment Blogger assignment Simple web page assignment CSS assignment 'odif# Blogger template assignment Web form results Class presentation of web site la#out*stor#board >?eopard#@ pre and post assessments +erforman$e tas" rubri$
#oal: 8our tas" is to design a website for a $harit# that will benefit disabled orphans in %aiti. (ole: 8our role has a web de!elopment manager is to present #our web site diagram and la#out to the organi9ers of a non-profit organi9ation and a group of #our peers gain feedba$" and $reate the web site using a simple te3t editor. *udience: 8our audien$e is the general publi$. )n #our web design #ou must $on!in$e the general publi$ to gi!e a monetar# donation online to support the efforts of the non-profit organi9ation whose primar# mission is to raise mone# for %aitian orphans. Situation: 8our $hallenge in!ol!es stru$turing a web site that will e3plain the mission of the non-profit organi9ation the need for monetar# support for %aitian orphans and $on!in$ing people to donate online. 1isit http:**www.ahomeinhaiti.org* and !iew the sour$e $ode. Determine what information is $ontained in the web site. Fo$us on the loo" and feel of the website and e3plain wh# it has been su$$essful in raising $lose to :1;; ;;;. ,roduct- ,erformance- ,urpose: 8ou will $reate a web site stor#board*la#out and de!elop the site using a simple te3t editor or graphi$al user interfa$e program. &he web site should ha!e at least < pages $ompan# logo a web site form and a lin" to an e3ternal web sour$e. Standard: 8our peers whom will a$t as members of the nonprofit organi9ation will 2udge #our wor". Student Self-,ssessment:
?ournal: What web sites do #ou !isit often6 What is appealing about them6 Wh#6 ?ournal: )f #ou were tea$hing this unit what would #ou do to ensure that #our students $ould de!elop an effe$ti!e professional web site6 ?ournal: What did #ou learn that #ou did not "now prior to this $lass6 What $on$epts do #ou still struggle with after $ompletion of this $lass6 )n what wa#s was this $lass !aluable6 Do #ou thin" #ou would be able to appl# the s"ills and performan$e tas"s to #our e!er#da# life6 )f so how6
Stage .) /earning ,lan • • • • • • • • • • • • • • • • • • • • • • • )ntrodu$e unit +re-assess prior "nowledge with >?eopard#@ game )dentif# tags in sour$e $ode )ntrodu$e "e# terminolog# De!elop a blog using Blogger )ntrodu$e graphi$ optimi9ation $on$epts 1ideo pod$ast on file e3tension names and e3tensions ,dminister "e# terminolog# 0ui9 Students wor" independentl# to de$onstru$t web sites Students wor" in pairs to produ$e web diagram and stor#board*la#out Chara$teristi$s of %&'( and A%&'( 1iewing web sites using !arious web browsers Student dis$ussion on best $oding pra$ti$es Build a simple web page using a te3t editor )ntrodu$e Cas$ading St#le Sheets 'odif# Blogger template ,ppl# Cas$ading St#le Sheets BCSSC to simple web page 4sing CSS with images and te3t De!elop a web form using a CG) s$ript De!elop and present web site design stor#board for non-profit organi9ation Constru$t web site from appro!ed stor#board Student .efle$ti!e ?ournals +ost-assessment with >?eopard#@ game
0rgani1ing t!e /earning 'onda# Wee" 1
1iew !ideo pod$ast: )ntro )ntrodu$e standards for the unit and as" essential 0uestions. (ead student dis$ussion on the importan$e of learning web de!elopment and how it $ould be appli$able to realworld e3perien$es. +re-,ssessment: >?eopard#@ game on web site terms file names and e3tensions. E EE1 %1 W%
&uesda#
1iew !ideo pod$ast: &erminolog# Students !isit !arious web sites of their $hoi$e and $op# and paste sour$e $ode and identif# the tags in the $ode. Demonstrate the !iew sour$e menu item in Firefo3 browser to promote understanding of A%&'( stru$ture. )ntrodu$e "e# web de!elopment terminolog#.
Wednesda#
1iew !ideo pod$ast: Simple Web +age Students will build a simple blog using Blogger to get familiar with standard site la#outs and templates. Dis$uss wh# Blogger is simple to use and the benefits of $reating $ustom Blogger templates.
&hursda#
1iew !ideo pod$ast: Web =ptimi9ation. E3plain the importan$e of optimi9ing graphi$s to "eep file si9es to a minimum. Displa# the different t#pes of files used in web site de!elopment.
Frida#
5ui9: Web De!elopment &erminolog#. ,dminister 0ui9 and go o!er answers in $lass. Determine what $on$epts students ha!e grasped and what is misunderstood. ,llow students to !isit and de$onstru$t web sites on their own.
Wee" -
E3plain the importan$e of de!eloping the la#out and diagram of a web site before attempting to $ode. %a!e students wor" in pairs to produ$e a web site stor#board.
1iew !ideo pod$ast: A%&'( Dis$uss how the !arious web browsers and how web $ontent ma# be displa#ed differentl# between ea$h browser. ,s" students to e3plain wh# A%&'( is better $oding pra$ti$e than %&'(. ,s" students to dis$uss wh# it ma# be important to use $oding pra$ti$es that will allow the effe$t displa# of web sites in multiple browsers.
Students will $omplete a simple web page with basi$ A%&'( tags using a te3t editor Bi.e. DotepadC
,llow students time to $omplete the simple web page assignment.
1iew !ideo pod$ast: CSS )ntrodu$e Cas$ading St#le Sheets. E3plain how and wh# there are used. .efer ba$" to Blogger a$ti!it#. %a!e students open Edit &emplate in Blogger to e3periment with $ustomi9ing their blogs. .efle$ti!e ?ournal 1: What web sites do #ou !isit often6 What is appealing about them6 Wh#6
E1 % E1 E1 E& E. &
Wee" /
,ppl# Cas$ading St#le Sheets to pre!ious A&%'( font elements in pre!ious simple web page assignment.
1iew !ideo pod$ast: ,dding )mages. Students will $reate a web page with a .2pg image a stati$ gif image and a .gif animated image. , paragraph e3plaining the uses of ea$h image must be presented to the left of ea$h image. CSS must be used to $ontrol the pla$ement of the images and the paragraphs.
,llow students time to $omplete CSS assignment.
1iew !ideo pod$ast: Creating Web Forms Students will build a web form that allows users to submit information to a web ser!er. Students will be introdu$ed to CG).
,llow students time to $omplete Web Forms assignment. .efle$ti!e ?ournal -: )f #ou were tea$hing this unit what would #ou do to ensure that #our students $ould de!elop an effe$ti!e professional web site6
E1 E1 & E1 E1 & . % E1
Wee" <
Students wor" in groups to design web site stor#board*la#out for a $harit#. Students will present their web site to the $lass and re$ei!e peer $riti0ues.
,llow students time to $omplete web site presentations.
Students will begin building web sites using a simple te3t editor based on re!ised web site stor#board*la#outs.
,llow students to $omplete web site de!elopment. Students will upload web site files to free ser!er. Students will $olle$t form submission information and print out results.
+ost-,ssessment: >?eopard#@ game on web site terms file names and e3tensions. .efle$ti!e ?ournal /: What did #ou learn that #ou did not "now prior to this $lass6 What $on$epts do #ou still struggle with after $ompletion of this $lass6 )n what wa#s was this $lass !aluable6 Do #ou thin" #ou would be able to appl# the s"ills and performan$e tas"s to #our e!er#da# life6 )f so how6
& E1 . E1 % E1 E. & &
Si2 Facets of 3nderstanding
Facet $: +2planation Description Sophisticated explanations and theories *ctivit4 • )dentif# tags in sour$e $ode • Chara$teristi$s of %&'( E A%&'( • 1iew web sites in !arious browsers • Students present wor" to peersF gi!e and re$ei!e $riti0ue of stor#board*la#out ,erformance/+vidence Criteria • %igh s$ore earn in ?eopard# pre and post assessment • Student formulates and $ommuni$ates $oherent ideas and is able to use proper terminolog# • ,ble to e3plain $on$epts to la#persons and web de!elopment professionals • Student $an easil# answer 0uestions about web site $ontent and pro$edures • E!iden$e of best $oding pra$ti$es for multiple browsers and user a$$essibilit# in web assignments
Facet %: Interpretation
Interpretations, narratives, and translations
• Chara$teristi$s of %&'( E A%&'( • Student dis$ussion on best $oding pra$ti$es • De!elop a blog using Blogger • Build a web page using te3t editor • ,ppl# CSS to simple web page • 4sing CSS with images and te3t • 'odif# a Blogger template • De!elop a web form using CG) s$ript
Facet .: *pplication
Use knowledge in new situations and contexts
• +ages load 0ui$"l# Bunder 1; se$ondsC • Graphi$s related to purpose and theme of web site • Da!igational stru$ture is attra$ti!e and eas# to maneu!erF important elements are eas# to lo$ate • Web site produ$es no error messages bro"en h#perlin"s or images • )nformation from web form properl# re$ei!ed and stored into database • Students show respe$t for othersG ideas • Wor" di!ided fairl# • Student re-e!aluate the pro2e$t based on group and instru$tor $omments
Facet 5: ,erspective
Critical and insightful points of view
• Students wor" in pairs to produ$e web site stor#board*la#out • Students present wor" to peersF gi!e and re$ei!e $riti0ue of stor#board*la#out • De!elop and present web site design stor#board for non-profit organi9ation • De!elop and present web site design stor#board for non-profit organi9ation • Students $onstru$t web site using a simple te3t editor based on peer $riti0ues
Facet 6: +mpat!4
Ability to get inside another person's feelings
• Web site wor"s in most $urrent web browser !ersions for 'a$s and +Cs • Student designed and $oded site with a$$essibilit# issues in mind • Web site su$$essfull# illustrates the goals $auses and mission of $lient representing non-profit organi9ation • S$ore earned on pre E post >?eopard#@ game • ,bilit# to lo$ate A%&'( and %&'( elements in web sites independentl#
Facet 7: Self)8no9ledge
To know one's ignorance, pre udice, and understanding
• >?eopard#@ game postassessment • Student refle$ti!e 2ournals • He# terminolog# 0ui9 • )ndependent wor" on de$onstru$tion of web sites
(esources ?ames H. B-;1; ?une 1IC. Website optimi9ation. &he wh# and how B+art 1C. .etrie!ed Do!ember -I -;1; from http:**doteduguru.$om*idI-JK-wh#-websiteoptimi9ation-is-important.html .efsnes %. .efsnes S. E .efsnes ?.E. B-;1;C. CSS tutorial. )n !"Schools. .etrie!ed Do!ember -/ -;1; from http:**www.w/s$hools.$om*$ss*default.asp .efsnes %. .efsnes S. E .efsnes ?.E. B-;1;C. %&'( forms and input. )n !"Schools# .etrie!ed from http:**www.w/s$hools.$om*html*htmlLforms.asp .efsnes %. .efsnes S. E .efsnes ?.E. B-;1;C. %&'( tutorial. )n !"Schools# .etrie!ed from http:**www.w/s$hools.$om*html*default.asp .efsnes %. .efsnes S. E .efsnes ?.E. B-;1;C. A%&'( tutorial. )n !"Schools# .etrie!ed from http:**www.w/s$hools.$om*3html S"oda" S. E (ane S. '. BEds.C. B-;;JC. Site de!elopment foundations: ,$ademi$ student guide. +hoeni3 ,M: +rosoft (earning.
Subject/Course: Business & Computer Science Interactive edia Designer&s': Tarena (uff
Stage $) Desired (esults Established Goals: BCS-FWD-1. Students will demonstrate an understanding of the planning de!elopment and implementation of web sites. a. Define "e# terms in web site de!elopment in$luding $lient-side ser!er-side %&'( CSS databases and CG). b. Demonstrate "nowledge of essential web site na!igation issues. $. Demonstrate "nowledge of do$ument and web site file stru$ture. d. Demonstrate an understanding of $reating and using h#perlin"s in web sites. e. Create a flow$hart*stor#board. f. Des$ribe one or more target groups. g. +resent web site. ,$ademi$ Standards: E(,1-.C/. &he student a$0uires new !o$abular# in ea$h $ontent area and uses it $orre$tl#. E(,1-(S11. &he student parti$ipates in student-to-tea$her student-to-student and group !erbal intera$tions. E(,1-(S1-. &he student formulates reasoned 2udgments about written and oral $ommuni$ation in !arious media genres. &he student deli!ers fo$used $oherent and polished presentations that $on!e# a $lear and distin$t perspe$ti!e demonstrate solid reasoning and $ombine traditional rhetori$al strategies of narration e3position persuasion and des$ription. E(,1-W-. &he student demonstrates $ompeten$e in a !ariet# of genres. 4nderstandings: , web site that is well $onstru$ted is per$ei!ed to be professional $redible and appealing to its audien$e. Essential 5uestions: Wh# is it important to $onsider #our audien$e before designing a web site6
&he )nternet is be$oming more of a pla$e to e3$hange What $aused the popularit# of so$ial networ"ing sites information rather than a pla$e to simpl# retrie!e su$h as Fa$eboo" '#Spa$e (in"ed)n6 information. )n what wa#s are web sites a better sour$e of Website users ha!e $ome to be more $omfortable information than other media6 ,re web sites with a predi$table na!igational stru$ture. ne$essaril# a better sour$e of information6 +ersonal and professional web sites differ in design and stru$ture. Different audien$es will re0uire different web stru$tures la#outs and a$$essibilit# standards. %ow do web sites help or hinder human $ommuni$ation6 What are the pros and $ons of publishing information on the )nternet6
Students will "now7 • &erminolog# in web site de!elopment • Web site na!igation issues • Web site file stru$tures • Good $oding pra$ti$es • )maging te$hni0ues • File formats and e3tensions • 4ses of web site tags*elements
Students will be able to 7 • Create a web site using a simple te3t editor • Create and use internal and e3ternal h#perlin"s • Create a web site diagram*la#out*stor#board and present to an audien$e • 4pload web site files to a ser!er • Create a web form and $olle$t user input using a database
+erforman$e &as":
Stage %) *ssessment +vidence =ther E!iden$e: • • • • • • • • • • 4nit terminolog# 0ui9 Sour$e $ode assignment Blogger assignment Simple web page assignment CSS assignment 'odif# Blogger template assignment Web form results Class presentation of web site la#out*stor#board >?eopard#@ pre and post assessments +erforman$e tas" rubri$
#oal: 8our tas" is to design a website for a $harit# that will benefit disabled orphans in %aiti. (ole: 8our role has a web de!elopment manager is to present #our web site diagram and la#out to the organi9ers of a non-profit organi9ation and a group of #our peers gain feedba$" and $reate the web site using a simple te3t editor. *udience: 8our audien$e is the general publi$. )n #our web design #ou must $on!in$e the general publi$ to gi!e a monetar# donation online to support the efforts of the non-profit organi9ation whose primar# mission is to raise mone# for %aitian orphans. Situation: 8our $hallenge in!ol!es stru$turing a web site that will e3plain the mission of the non-profit organi9ation the need for monetar# support for %aitian orphans and $on!in$ing people to donate online. 1isit http:**www.ahomeinhaiti.org* and !iew the sour$e $ode. Determine what information is $ontained in the web site. Fo$us on the loo" and feel of the website and e3plain wh# it has been su$$essful in raising $lose to :1;; ;;;. ,roduct- ,erformance- ,urpose: 8ou will $reate a web site stor#board*la#out and de!elop the site using a simple te3t editor or graphi$al user interfa$e program. &he web site should ha!e at least < pages $ompan# logo a web site form and a lin" to an e3ternal web sour$e. Standard: 8our peers whom will a$t as members of the nonprofit organi9ation will 2udge #our wor". Student Self-,ssessment:
?ournal: What web sites do #ou !isit often6 What is appealing about them6 Wh#6 ?ournal: )f #ou were tea$hing this unit what would #ou do to ensure that #our students $ould de!elop an effe$ti!e professional web site6 ?ournal: What did #ou learn that #ou did not "now prior to this $lass6 What $on$epts do #ou still struggle with after $ompletion of this $lass6 )n what wa#s was this $lass !aluable6 Do #ou thin" #ou would be able to appl# the s"ills and performan$e tas"s to #our e!er#da# life6 )f so how6
Stage .) /earning ,lan • • • • • • • • • • • • • • • • • • • • • • • )ntrodu$e unit +re-assess prior "nowledge with >?eopard#@ game )dentif# tags in sour$e $ode )ntrodu$e "e# terminolog# De!elop a blog using Blogger )ntrodu$e graphi$ optimi9ation $on$epts 1ideo pod$ast on file e3tension names and e3tensions ,dminister "e# terminolog# 0ui9 Students wor" independentl# to de$onstru$t web sites Students wor" in pairs to produ$e web diagram and stor#board*la#out Chara$teristi$s of %&'( and A%&'( 1iewing web sites using !arious web browsers Student dis$ussion on best $oding pra$ti$es Build a simple web page using a te3t editor )ntrodu$e Cas$ading St#le Sheets 'odif# Blogger template ,ppl# Cas$ading St#le Sheets BCSSC to simple web page 4sing CSS with images and te3t De!elop a web form using a CG) s$ript De!elop and present web site design stor#board for non-profit organi9ation Constru$t web site from appro!ed stor#board Student .efle$ti!e ?ournals +ost-assessment with >?eopard#@ game
0rgani1ing t!e /earning 'onda# Wee" 1
1iew !ideo pod$ast: )ntro )ntrodu$e standards for the unit and as" essential 0uestions. (ead student dis$ussion on the importan$e of learning web de!elopment and how it $ould be appli$able to realworld e3perien$es. +re-,ssessment: >?eopard#@ game on web site terms file names and e3tensions. E EE1 %1 W%
&uesda#
1iew !ideo pod$ast: &erminolog# Students !isit !arious web sites of their $hoi$e and $op# and paste sour$e $ode and identif# the tags in the $ode. Demonstrate the !iew sour$e menu item in Firefo3 browser to promote understanding of A%&'( stru$ture. )ntrodu$e "e# web de!elopment terminolog#.
Wednesda#
1iew !ideo pod$ast: Simple Web +age Students will build a simple blog using Blogger to get familiar with standard site la#outs and templates. Dis$uss wh# Blogger is simple to use and the benefits of $reating $ustom Blogger templates.
&hursda#
1iew !ideo pod$ast: Web =ptimi9ation. E3plain the importan$e of optimi9ing graphi$s to "eep file si9es to a minimum. Displa# the different t#pes of files used in web site de!elopment.
Frida#
5ui9: Web De!elopment &erminolog#. ,dminister 0ui9 and go o!er answers in $lass. Determine what $on$epts students ha!e grasped and what is misunderstood. ,llow students to !isit and de$onstru$t web sites on their own.
Wee" -
E3plain the importan$e of de!eloping the la#out and diagram of a web site before attempting to $ode. %a!e students wor" in pairs to produ$e a web site stor#board.
1iew !ideo pod$ast: A%&'( Dis$uss how the !arious web browsers and how web $ontent ma# be displa#ed differentl# between ea$h browser. ,s" students to e3plain wh# A%&'( is better $oding pra$ti$e than %&'(. ,s" students to dis$uss wh# it ma# be important to use $oding pra$ti$es that will allow the effe$t displa# of web sites in multiple browsers.
Students will $omplete a simple web page with basi$ A%&'( tags using a te3t editor Bi.e. DotepadC
,llow students time to $omplete the simple web page assignment.
1iew !ideo pod$ast: CSS )ntrodu$e Cas$ading St#le Sheets. E3plain how and wh# there are used. .efer ba$" to Blogger a$ti!it#. %a!e students open Edit &emplate in Blogger to e3periment with $ustomi9ing their blogs. .efle$ti!e ?ournal 1: What web sites do #ou !isit often6 What is appealing about them6 Wh#6
E1 % E1 E1 E& E. &
Wee" /
,ppl# Cas$ading St#le Sheets to pre!ious A&%'( font elements in pre!ious simple web page assignment.
1iew !ideo pod$ast: ,dding )mages. Students will $reate a web page with a .2pg image a stati$ gif image and a .gif animated image. , paragraph e3plaining the uses of ea$h image must be presented to the left of ea$h image. CSS must be used to $ontrol the pla$ement of the images and the paragraphs.
,llow students time to $omplete CSS assignment.
1iew !ideo pod$ast: Creating Web Forms Students will build a web form that allows users to submit information to a web ser!er. Students will be introdu$ed to CG).
,llow students time to $omplete Web Forms assignment. .efle$ti!e ?ournal -: )f #ou were tea$hing this unit what would #ou do to ensure that #our students $ould de!elop an effe$ti!e professional web site6
E1 E1 & E1 E1 & . % E1
Wee" <
Students wor" in groups to design web site stor#board*la#out for a $harit#. Students will present their web site to the $lass and re$ei!e peer $riti0ues.
,llow students time to $omplete web site presentations.
Students will begin building web sites using a simple te3t editor based on re!ised web site stor#board*la#outs.
,llow students to $omplete web site de!elopment. Students will upload web site files to free ser!er. Students will $olle$t form submission information and print out results.
+ost-,ssessment: >?eopard#@ game on web site terms file names and e3tensions. .efle$ti!e ?ournal /: What did #ou learn that #ou did not "now prior to this $lass6 What $on$epts do #ou still struggle with after $ompletion of this $lass6 )n what wa#s was this $lass !aluable6 Do #ou thin" #ou would be able to appl# the s"ills and performan$e tas"s to #our e!er#da# life6 )f so how6
& E1 . E1 % E1 E. & &
Si2 Facets of 3nderstanding
Facet $: +2planation Description Sophisticated explanations and theories *ctivit4 • )dentif# tags in sour$e $ode • Chara$teristi$s of %&'( E A%&'( • 1iew web sites in !arious browsers • Students present wor" to peersF gi!e and re$ei!e $riti0ue of stor#board*la#out ,erformance/+vidence Criteria • %igh s$ore earn in ?eopard# pre and post assessment • Student formulates and $ommuni$ates $oherent ideas and is able to use proper terminolog# • ,ble to e3plain $on$epts to la#persons and web de!elopment professionals • Student $an easil# answer 0uestions about web site $ontent and pro$edures • E!iden$e of best $oding pra$ti$es for multiple browsers and user a$$essibilit# in web assignments
Facet %: Interpretation
Interpretations, narratives, and translations
• Chara$teristi$s of %&'( E A%&'( • Student dis$ussion on best $oding pra$ti$es • De!elop a blog using Blogger • Build a web page using te3t editor • ,ppl# CSS to simple web page • 4sing CSS with images and te3t • 'odif# a Blogger template • De!elop a web form using CG) s$ript
Facet .: *pplication
Use knowledge in new situations and contexts
• +ages load 0ui$"l# Bunder 1; se$ondsC • Graphi$s related to purpose and theme of web site • Da!igational stru$ture is attra$ti!e and eas# to maneu!erF important elements are eas# to lo$ate • Web site produ$es no error messages bro"en h#perlin"s or images • )nformation from web form properl# re$ei!ed and stored into database • Students show respe$t for othersG ideas • Wor" di!ided fairl# • Student re-e!aluate the pro2e$t based on group and instru$tor $omments
Facet 5: ,erspective
Critical and insightful points of view
• Students wor" in pairs to produ$e web site stor#board*la#out • Students present wor" to peersF gi!e and re$ei!e $riti0ue of stor#board*la#out • De!elop and present web site design stor#board for non-profit organi9ation • De!elop and present web site design stor#board for non-profit organi9ation • Students $onstru$t web site using a simple te3t editor based on peer $riti0ues
Facet 6: +mpat!4
Ability to get inside another person's feelings
• Web site wor"s in most $urrent web browser !ersions for 'a$s and +Cs • Student designed and $oded site with a$$essibilit# issues in mind • Web site su$$essfull# illustrates the goals $auses and mission of $lient representing non-profit organi9ation • S$ore earned on pre E post >?eopard#@ game • ,bilit# to lo$ate A%&'( and %&'( elements in web sites independentl#
Facet 7: Self)8no9ledge
To know one's ignorance, pre udice, and understanding
• >?eopard#@ game postassessment • Student refle$ti!e 2ournals • He# terminolog# 0ui9 • )ndependent wor" on de$onstru$tion of web sites
(esources ?ames H. B-;1; ?une 1IC. Website optimi9ation. &he wh# and how B+art 1C. .etrie!ed Do!ember -I -;1; from http:**doteduguru.$om*idI-JK-wh#-websiteoptimi9ation-is-important.html .efsnes %. .efsnes S. E .efsnes ?.E. B-;1;C. CSS tutorial. )n !"Schools. .etrie!ed Do!ember -/ -;1; from http:**www.w/s$hools.$om*$ss*default.asp .efsnes %. .efsnes S. E .efsnes ?.E. B-;1;C. %&'( forms and input. )n !"Schools# .etrie!ed from http:**www.w/s$hools.$om*html*htmlLforms.asp .efsnes %. .efsnes S. E .efsnes ?.E. B-;1;C. %&'( tutorial. )n !"Schools# .etrie!ed from http:**www.w/s$hools.$om*html*default.asp .efsnes %. .efsnes S. E .efsnes ?.E. B-;1;C. A%&'( tutorial. )n !"Schools# .etrie!ed from http:**www.w/s$hools.$om*3html S"oda" S. E (ane S. '. BEds.C. B-;;JC. Site de!elopment foundations: ,$ademi$ student guide. +hoeni3 ,M: +rosoft (earning.
