PROJECT 2: Client-side Web Project

Transcription

1 IT5012 DATA HANDLING & WEB CONCEPTS Curse Level: 6 Curse Credits: 15 PROJECT 2: Client-side Web Prject IT5012Prject2_WebPrject_v4a.dcx

2 OVERVIEW The purpse f this prject is t enable yu t demnstrate the skills in designing and building a static website. Yu will need t apply the principles and skills yu have learnt frm the Web part f the curse. Learning Outcmes LO4 Design and build a website, using apprpriate techniques, taking usability and accessibility int accunt LO5 Discuss the legal, ethical and security related issues surrunding gathering, string, accessing and sharing infrmatin LO6 Test and reflect n the usability f a website fcussing n its ability t cmmunicate its cntent clearly Cnditins It is recmmended that yu spend up t 4 days t cmplete this prject. Yu have access t all curse materials and any ther resurces yu wish t use as yu wrk n this assessment. Yu can ask a tutr fr advice and t clarify the instructins but they cannt assist yu in cmpleting the tasks required yu must carry ut the tasks yurself! Success Criteria T meet the requirements f this prject, yu are required t hand-in: a prject plan and a cmpleted website based n the prject plan. This prject guide includes the marking criteria, which yu shuld cnsult at the start f each task, t have a clear understanding f expectatins. Yu must achieve at least 50% f the marks in this prject. If there are parts f the prject that yu have nt cmpleted r yur wrk is nt satisfactry, yu will be asked t imprve yur wrk in rder t meet the requirements and t resubmit the prject. Hwever, n yur secnd attempt, yu can nly get a maximum f 50% f the ttal mark alltted fr this assessment. This prject cntributes t 35% f the final curse grade. Remember that yu must pass each assessment item t pass the curse. Cmputer Pwer Plus 2

3 Submissin Fr each submissin, yu will prvide the fllwing t yur tutr: a submissin checklist (ne per submissin) a submissin sheet (ne per submissin) a marking sheet (ne per Part) the required assessment files, as listed in the checklist The submissin sheet, checklist and marking sheet are included in this PDF. The submitted files are t be upladed t iqualify, using the assessment uplad facility. Yu als need t ntify yur tutr per f yur submissin. Instructins fr saving yur assessment files In flder IT5012\Prjects n yur hme drive, create a flder Prject2 where yu will save yur wrk fr this prject. Yu may create tw further subflders Plan and Website if yu wish. Save yur planning int a dcument named IT5012_Prject2_Plan_<YurStudentID>. Save yur website files int subflder IT5012\Prjects\Prject2\Website. Befre submissin, zip that flder int a file IT5012_Prject2_Website_<YurStudentID> Cmputer Pwer Plus 3

4 INSTRUCTIONS Task 1: Prject Planning Save yur planning ntes int a dcument called IT5012_Prject2_Plan_<YurStudentID>. This is the evidence yu will submit fr marking. The steps listed belw (and the linked reading materials) can guide yu with yur prject planning 1. Determine the type f website that yu will design and build by identifying what type f infrmatin yur site will prvide. It can be a niche website (e.g. a site abut cats), r any frm the type mentined in the article What are the Varius Types f Websites. Nte: Unfrtunately, the fifth type (Mbile Device Website) is cvered in anther curse and therefre, fr nw yu may nt be able t develp such a site. It als needs t be emphasised that yu will be develping a static website, s any cntent that yu will be prviding will have t be hard-cded in the html dcument. 2. Identify the target audience by chsing a specific demgraphics and psychgraphics t target. (The article Hw t define yur target market prvides sme inf n this.) 3. Use the cncepts f User-Centered Design (see tpic Interface Design Cncepts n mdule Web Design Fundamentals) and identify what type f infrmatin yur target audience may want (abut the specific area yu have chsen) and hw will they want t access that infrmatin. 4. Check and briefly evaluate existing websites similar t yur wn planned website, and take ntes n what ideas yu want t include, avid, r d differently in yurs. 5. Apply the web design principles t create the wireframes fr yur pages. (The article 10 design cncepts that every web develper needs t knw is a supplementary reading n design principles.) 6. Create yur prject plan which includes the fllwing: The purpse f the site A brief descriptin f the cntent the site will prvide The target audience A brief discussin f the research cnducted and the sites visited and what ideas yu have gathered The time plan shwing time estimates (in hurs) f each step f the website develpment including the details fr planning, site build, and testing The wireframe sketches, t let yu plan carefully what cntent yu will prvide and hw yu will lay them ut n the page, befre yu actually build the page A brief test plan indicating hw yu intend t cnduct yur testing and what brwser(s) yu will use fr testing yur site. 7. Shw yur prject plan t a tutr. Cmputer Pwer Plus 4

5 Nte: It shuld be emphasised that crss-brwser testing (testing fr cmpatibility acrss brwsers) is an imprtant aspect f usability testing. This means ensuring that the website design wrks prperly and that its appearance is errr-free and functinal n any platfrm used t view it. Hwever, because f time cnstraint, it will be acceptable fr this prject t be tested nly using the brwser(s) f yur chice. Fr purpses f marking, yu need t indicate the brwser(s) and the specific versin that yu will use fr testing the site. Cmputer Pwer Plus 5

6 Task 2: Website Develpment Save yur website files in flder IT5012\Prjects\Prject2\Website n yur hme drive. Befre submissin yu will zip the flder int a file called IT5012_Prject2_Website_<YurStudentID>. This is the evidence yu will submit fr marking. Build yur website by ding the fllwing: 1. Gather/create sme assets t put n yur site. (The article Hw t gather yur website assets tgether can help guide yu n this.) 2. Develp the web pages by creating yur web dcuments using HTML and CSS based n the wireframes in yur prject plan. 3. Ensure all the prject requirements are met. The cmpleted site shuld include the fllwing: minimum f fur web pages that are written using apprpriate HTML5 structural and ther elements relevant and accessible text cntents (in paragraphs and lists) that cmmunicate infrmatin clearly relevant and accessible multimedia (graphics and vide) cntent that lads crrectly navigatin links that cnsistently wrk at least tw external links pinting t different sites with related cntent and each pens n a different tab at least tw internal links (r intra-page navigatin) a web frm that ges t a 'Thank yu' page when submitted an HTML table that shws data apprpriate fr rw and clumn presentatin at least three elements that use CSS3 prperties 4. Test yur website fr usability and utility. Crdinate with a tutr t get tw ther students t test yur site Schedule an ral presentatin f yur site where the testers can give their cnstructive feedback. In general, prduct develpers will appreciate feedback given cnstructively s that they are able t imprve their prduct. At anther time, yu will als be asked t give feedback t anther student's prject. The marking sheet at the end f this guide (see last page) will als be used fr this purpse. Prtfli Yu are strngly encuraged t g beynd this minimum requirement as this prject can be part f yur prtfli that can be presented t a prspective emplyer later n. Cmputer Pwer Plus 6

7 References Xisle Graphix. (n.d.). What are the Varius Types f Websites. Retrieved frm Prta, M. (n.d.). Hw t define yur target market. Retrieved frm Creative Blq. (2013, Nvember 14). 10 design cncepts that every web develper needs t knw. Retrieved frm HubSpt Academy. (2016, June 13). Hw t gather yur website assets tgether. Retrieved frm Cmputer Pwer Plus 7

8 SUBMISSION CHECKLIST Befre yu present yur wrk t yur tutr, make sure yu have cmpleted all the tasks and included all the required elements, as listed belw. Incmplete prjects will be returned t yu, and yu will need t cmplete the missing elements befre resubmitting yur prject. Task Task 1: Prject Planning Planning ntes prvided in a file named IT5012_Prject2_Plan_<YurStudentID> and upladed t iqualify Dne Cver page with prject and website title, student name and date Site purpse and descriptin Site s target audience Evidence f research Time plan r schedule Test planning ntes Wireframes fr the required 4 pages Task 2: Building the Website Web prject files zipped int a file named IT5012_Prject2_Website_<YurStudentID> and upladed t iqualify Site is develped accrding t the prject plan and wireframes The site is made up f at least 4 pages There are least tw internal links There are at least tw external links pinting t different sites with related cntent and each pens n a different tab There is a web frm that uses the actin attribute There is a an HTML table that shws data apprpriate fr rw and clumn presentatin There are text, lists, images and multimedia cntent There are at least three elements that use CSS3 prperties Site is navigable, functinal and presentable (there is nthing bviusly brken n the site) Cmputer Pwer Plus 8

9 MARKING SCHEME Task Mark Available Task 1: Prject Planning (10%) (10) Clear descriptin f the prject (site purpse and type f cntent t be prvided) Site s target audience identified 1 Evidence f research prvided (sites visited and ideas gathered) Time plan r schedule included 2 Wireframes fr 4 pages prvided 2 Test planning ntes include brwsers and versins t be used Task 2 - Marking Criteria 1: Web Design (25%) The site shws a cnsistent style between pages Pages shw a visual balance in terms f prprtin, apply a prper spacing between elements t highlight separatin f cntent, and the page layut fllws natural eye flw (Z flw). Clurs used are harmniusly and lgically related. Small number f similar fnts and fnt-sizes selected, text is readable, cntrast is used fr imprved readability. Primary navigatin is easy t find and understand, and vailable n all pages. Task 2 - Marking Criteria 2: User Experience (20%) Usefulness f cntent (cntent fulfils a need) 2 Usability - Site s purpse is clear - All text cntents use standard fnts, are legible and cmmunicates infrmatin clearly Desirability (images and multimedia are used t evke emtin and appreciatin) (25) (20) 4 2 Mark awarded / 10 / 25 / 20 Cmments Cmputer Pwer Plus 9

10 Task Mark Available Mark awarded Cmments Accessibility f cntent - All images have descriptive alt attributes - Labels are assciated t the crrect frm elements - Links make sense if read by themselves Vide and audi cntent have prper captins and transcripts, etc. Credibility f cntent - All spelling and grammar are crrect - Cntents adhere t cpyright and privacy principles (e.g. - cntent lifted frm ther sites are prperly cited n the page and n the cde) 4 4 Overall user experience 4 Task 2 - Marking Criteria 3: HTML and CSS (45%) All pages have prper title tags and meta descriptin (i.e. cntents are SEO-friendly) HTML elements and dctype are used apprpriately, fr example: - dctype fr HTML5 used and HTML5 structuring elements - (e.g. sectin, article, etc.) used as apprpriate - apprpriate HTML text and list elements used - frms used apprpriate elements and attributes - table is used fr tabular cntent and created using apprpriate table elements - links and image elements are used crrectly - there are n deprecated elements and attributes used, etc CSS style rules are stred in an external file, and are used: - fr laying ut the cntent f the page - t give the site a cnsistent lk - t enhance the visual presentatin f the cntent - with selectrs written accrding t best practices All functinality wrks crrectly (all images and multimedia lad crrectly and there are n brken links) SIGN -OFF (45) 5 20 / Ttal Marks / 100 Cmputer Pwer Plus 10