Live Streaming Blogging Site User Interface Project
Live Streaming Blogging Site User Interface Project
Please refer to the attachment for the completed question
Question 1
AsabuddingnewfrontenddeveloperforanewStartup,youhavebeentaskedtobuildtheuser interface for a new LIVE streaming bloggingsite.
The UI designer has provided you with the following visual design of the site.
ApplyingyourknowledgeofHTMLandCSS,constructaSTATICHTML/CSSpage thatpresentsthe“HomePage”ofthesite, using theinformation that youcan derive from the User Flow and User Interaction diagrams in thedesign.
(i)A project folder should be created to keep the required resources (i.e. html,css,
images)requiredforthestaticpage.Youshouldcreatetherelevantimagesand textualdescriptionsthatcanbeusedtodemonstratethecontentforthesite(e.g. banners,profileinfo,termsofuse).Forthevideosamplecontent,youshould reference the following sample linksdirectly:
https://github.com/mengchoontan/school–239/blob/master/lady–walking.mp4?raw=truehttps://github.com/mengchoontan/school–239/blob/master/lady–with–phone.mp4?raw=truehttps://github.com/mengchoontan/school–239/blob/master/man–on–bike.mp4?raw=truehttps://github.com/mengchoontan/school–239/blob/master/man–sunrise.mp4?raw=true
(2marks)
(ii)TheHomepageshouldcontainTHREE(3)sectionsshowingtheadvertisement
banners,themaincontentsectionswithuservideosandafootersection.You shouldusetherelevantHTMLandCSSto build thesections proportionally based on the layout illustrated in FigureQ1.
(10marks)
(b)
BasedontheUserInteractiondiagramabovethatyouhavebeenprovided,younotice that several sections of the Home Page have dynamic content. Improve the HomePage that you had created in (a) by adding the following dynamiccapabilities:
(i)ThemaincontentsectionshoulddisplayFOUR(4)uservideos.Thevideo
should start playing when the mouse hovers overit.
(ii)Eachvideoareahasa“Profile”buttonthat“floats”overthevideo.Whenthe
Profile button is clicked, the user’s Profile information will bedisplayed.
(iii)The header section should havebanners that will change automaticallyevery2
seconds.
(iv)The footers ection should have TWO(2) subsections with links to the“Terms
ofUse”and“AboutUs”content.The content should be displayed whenauser
clicks onit.
(10marks)
(c)
UsingtheChromebrowser’sdeveloperdebuggingtools,captureascreenshotthat shows:
(i)The title of the Home Page that you havecreated.
(ii)The DIV or Class name or id for thebanners.
(iii)The content of the “Terms ofUse”.
(3marks)
Question 2
TheStartup(Question1)hassincereceivedadditionalinvestmentstofurtherdeveloptheLIVE streaming site and hence the Product Manager has requested you to enhance the static sitethat youhavebuiltearliertoallowrealuserstologintothesiteandallowthemtouploadandshare their own profile information andvideos.
(a)
UsingyourunderstandingofthePythonMVCframework–Flask,designtherelevant Models which will enable the site to keep informationabout:
– Registeredusers – Videoposts
– User profileinformation
– Banneradvertisements
(8 marks)
(b)
EmploytheFlaskFrameworkbyusingtheModelsthatyouhavecreatedin(a).You shoulddefineanappropriateprojectstructuretoorganisethemodels,controllersand viewtemplates.Createtherequiredtemplate(s)toreplacethestaticHTML/CSS Homepage that you have done inQ1.
(6marks)
(c)
CreateanewRegistrationinterfacethatwillallowusertoregistertheirusernameand password.Theusernameenteredshouldbebasedonaemailformat(i.e. user@mail.com)andthepassword enteredmustbelongerthan8charactersbut less than16characters.Thepasswordshouldnotincludeanyspecialcharactersotherthan alphabets andnumbers.
You should also add the required controllers to support this registrationinterface.
(6marks)
(d)
Createaloginauthenticationinterfacethatwillallowtheusertologinusingtheir username and passwordcreated.
You should also add the required controllers to support this logininterface.
(2m
(e)
Asasecuritymeasure,youwouldliketo“lockup”theuseraccountiftheuserhastyped intheincorrectpasswordformorethanTHREE(3)times.Enhancethenecessary controllersandmodelstosupportthisadditionalsecuritymeasure.
(3marks)
Question 3
YourProductManagerbelievesthatthewaytoattractuserstoregisterandusethesiteistoget theuserstosharevideoaswellasashortdescriptionaboutthevideo.Inaddition,auserwill only be able to view the other user’s Profile information when he/she is logged into thesite.
(a)
CreateanewPostVideointerfacethatwillallowusertouploadavideoclipaswellas tokeyinadescriptionaboutthevideo.Youshouldcreateorenhancethenecessary controllers and models to support thisrequirement.
(8marks)
(b)
Create a new Edit Video interface that will allow the user to edit the description ofthe video or delete the video which he/she hascreated.
Create another new Edit Profile interface that will allow the user to edit his/herprofile information (text) and picture(image).
Youshouldcreateorenhancethenecessarycontrollersandmodelstosupportthis
requirement.
(8marks)
(c)
Toensurethatthesitehassufficientstoragecatered,theProductManagerwouldlike tohavealimittothetotalsizeofALLvideofilesuploadedbyeachusertobecapped at50mb.Inaddition,hewouldalsoliketoknowhowmanytimesareeachvideoviewed.
BasedonyourunderstandingoftheHTTPwebrequestandresponseobject,analysethe relevantobjectandenhancethePostVideorelatedcontrollersandmodelstokeeptrack ofthetotalstoragesizeusedbytheuserandthenumberoftimesthevideohavebeen viewed.
If the user exceeds 50mb, no upload operation should beallowed.
(6marks)
(d)
EnhancethesitebychangingtheHomePageinterfacesuchthatonlywhenauseris logged in, the “Profile” button on the video section appears as shown in FigureQ3(d).
Question 4
Nowthatthebasicuserfeatureshavebeenbuiltforthesite,theProductManagerwouldlike toexperimentwithnewvisualizationtechnologytohelpwebmasterstoanalysethesiteusage.
(a)
CreateanewAdmininterfaceaccessiblefromtheroute/adminwhichwillbeavailable totheuser“admin”(youcanassumethatthepasswordis“password”).FigureQ4(a) shows the page when the “admin” user logsin.
(b)
Basedontheinformationthatyouaretrackingwithinthemodels,designand demonstratethevisualizationofdataonthisnewAdminPage–Chart1which answers the followingquestion:
– What is the number of videos post created by eachuser? – What is the size of storage used by eachuser?
YoucanuseSVGandD3.jstechniques/methodscoveredinyourStudyUnitsor
opensource libraries likeChartjs.org.
(10marks)
(c)
Basedontheinformationthatyouaretrackingwithinthemodels,designand demonstratethevisualizationofdataonthisnewAdminPage–Chart2whichanswers the followingquestion:
– Which are the most popularadvertisements?
– What is the breakdown of views of theadvertisements?
YoucanuseSVGandD3.jstechniques/methodscoveredinyourStudyUnitsor opensource libraries likeChartjs.org.
(10marks)
"You need a similar assignment done from scratch? Our qualified writers will help you with a guaranteed AI-free & plagiarism-free A+ quality paper, Confidentiality, Timely delivery & Livechat/phone Support.
Discount Code: CIPD30
Click ORDER NOW..
