ASSIGNMENT1

RichWebApplications

JessLavillaMarruedo
B00083617

Contenido
Abstract.........................................................................................................................................2
DesignofApplication....................................................................................................................2
Wireframe.....................................................................................................................................3
Home.........................................................................................................................................3
Category....................................................................................................................................3
Project.......................................................................................................................................4
About.........................................................................................................................................4
Contact......................................................................................................................................5
WebsiteContent/Functions:.......................................................................................................5
DescriptionofApplication.............................................................................................................7
Conclusion.....................................................................................................................................7
References.....................................................................................................................................7

Abstract

Thisassignmentconsistsincreateawebapplicationforanyarea,butitwouldbebetterifit
couldbeusedinarealworldapplication.
Somychoicewastryingtohelptomygirlfriend;shefinishedhermasterstudieslastsummer
asgraphicaldesignerandsheneedsawebsitetoshowherprojects.Itwouldhelpherin
lookingforajob.Thewaytocallaplacetoshowgraphicaldesignprojectsisportfolio.
Forthistypeofwebsitesisveryimportantthestyle,thedesign,anditneedstobeassimilar
aspossibletothedesignerstyle,butforthisassignmentisalsoneededtoincludesomeother
features.

DesignofApplication

Research:
AsIsaidintheabstract,forthistypeofwebsites,thedesignisreallyimportant.Firstlythe
researchofthestateoftheart.Itisverydifficulttofindsimilaritiesbetweenwebsitesof
differentstudios.Theylookforshowtheirownstyle,butalwaysshouldhaveacoollook.
Customer:
ThenIaskedtothecustomerabouttheeightelementsofdesign,andIcomparedthemwith
herstyleofdesign.Thecolors,tone,textures,shapesusedareinthesamedirectionasher
projects.
Justfewcolors,blacktextonwhitebackgroundsforlargetextsandviceversaforthetitlesof
themainsection.Tohighlightmostimportanttitlesofthepagethecolorusedwasgreen.
Thespaceisalsotooimportant,notmanythingsinalittlespace.Homepageandprojectspage
needstobeverycleansoalltheprojectsareshownbypictureswithatitleoftheprojectin
boxes.Linesasdividerswereusedtoseparatesectionsasmenufrommain.
Allofthisaspectsareimportanttodesignaportfoliobut,asthecustomertoldme,thechosen
ofthefontisakeytocommunicatetherightmoodtothetargetaudience.Inthiscasethefont
is'PoiretOne',cursive.
Finallythefooterofthepagewasdesignedaslittlelinkediconsanditalwaysappearsinthe
bottomofthemenu.

Wireframe

Home

Category

Project

About

Contact

WebsiteContent/Functions:

Links:
Therearesomelinksinthefooterof
thewebpage.Someofthemarefor
social,onemoreisfordownloadan
archive.pdfandthelastoneisa
maillinker.

TableStripingandHighlighting:
Atablewithabriefoftheprojects
showninthepagethatyoucan
highlighteachoneinfactonthe
categorytheyare.Theyaredivides
foryearstoo.

StyleSwitcher:
Inprojectpagesthereisoneinthecorner,itallowsyoutochangethestyleofthecontentif
youhaveproblemstoseeingit.

ImageRotator:
Spacesaver,itallowsyoutoshowmanypicturesatthesamespace.Itisalsopleasingand
perfectforthiswebsite.Itappearsinprojectpageswithmorethanapicture.

ImageEnlarger:
Somethingsimilarthanimagerotator,itallowsyou
toshowapicturesavingspace.Itappearsinproject
pagestoo,butoneswithjustapicturetoshow.

MouseOverTooltips:
Atooltipappearswhenyouhovertheelementwithyourmouse.

Form:
Contactformwithfoursections:name,email,textfieldandsubjectselector.

GoogleMap:
Thisfeatureshowsamapwiththedirectionofthegraphicaldesignstudio.

DescriptionofApplication

Thefinishedwebsitehasthedesignerstylelookandfeel.Theaspectofmainpagesashome
withhoverfunctionshighlightingnicely.Thedataoftheprojectisloadedfrom.jsonand.php
filesusingAJAXandjQueryindifferentfunctionsofthewebpage.Assameastheother
featuresinthewebsitelikegooglemap,theprojectstableandthecontactform.Allprojects
havepicturestoshowbyajQueryimagerotatororimageenlarger.Aboutpage,shows
differentjQueryfeatureslikethetable,withtooltipsandhighlightingeffects,AJAXlinked
contactformandagooglemap.

Conclusion

Maybemyerrorwasthechoiceoftheareainwhichconsistthewebsite.Atthefirststeps,
whileIwasplanningthewireframe,everythingwasperfectinmyheadandinthesketchesbut
then,atthebuildingphaseIhadtospendtoomuchtimeinstyles,becauseIthoughtthatit
wassoimportantforthistypeofwebsites,butmaybenotforthisassignment.
AlsowassodifficulttointegratedifferentfeaturesandjQueryLibraryinthistypeofwebsite.
Maybeatable,maporsomefeaturesofjQueryUIarenotusedtoappearingraphicaldesigner
websites.
Mostpagesofthewebsiteshowthestyleofthecustomerwithacoollookstyleintheweb
siteandmanyfeaturesareshown.

References

1.
2.
3.
4.
5.

OrlaMcMahonRichWebAplications.NotesandExamples.
PeterRaffertyandBartlomiejSzumski.AssignmentExamples.
GoogleMapshttps://www.google.es
jQueryUIhttp://jqueryui.com/
W3schools.DifferentCSSquestions:www.w3schools.com

ASSIGNMENT COVER SHEET

Student Name: Jess Lavilla Marruedo
ID Number: B00083617
Course: Third
Year: 2014
Lecturer: Orla McMahon
Title of Assignment: Assigment 1 Portfolio Web
Due Date: 09-11-2014
Date Submitted: 09-11-2014
The material contained in this assignment is the authors original work, except
where work quoted is duly acknowledged in the text. No aspect of this
assignment has been previously submitted for assessment in any other unit or
course.

Signed: _______________________________

Date: 09 / 11 / 2014