By Phimwipha, Shi Ya, Siang Lin
Marketing Director - Wipha Lead Programmer - Ong Shi Ya Lead Designer - Ng Siang Lin
To design an application that makes it easier forSingaporeans to navigate around Singapore.
Target: General Public, Singaporeans
The application aims to help Singaporeans travel aroundSingapore with ease.
Website:
- Home
- Applications a. Navigation Map b. Bus Timings c. Bus Routes d. Taxi Information e. Traffic Information
- Forum
- Navigation Map
- Link to Promotion Website
● The design makes use of the colour blue mainly. Thecolour blue represents the sky
when travellers look up at the bluish sky. The designincludes arts that are related to
transports as well such as the maps’ markers, maps,and travelling tools. The design
of this application is aimed for a casual and relaxingfeel that will ease the eyes of
the travellers when they are using the application.
- Bluish of colours
- Professional
- Neatly arranged
- Friendly
- Warm
- Light
- Playful
- Relaxing to use
Resources: Google Fonts, Animate.css, Hover.css, Animista,fontawesome Type of Programming Language used: HTML, CSS, Javascript Main API: gothere API and plugins are needed to functionthe map. Other APIs used: ● Traffic Images API from data.gov.sg ● Bus Arrival API from Land Transport DataMall ● Bus Routes API from Land Transport DataMall ● Bus Stops API from Land Transport DataMall ● Train Service Alerts from Land Transport DataMall ● Estimated Travel Time API from Land Transport DataMall ● Traffic Incidents from Land Transport DataMall ● Taxi Stands from Land Transport DataMall ● Taxi Availability from Land Transport DataMall Documentation and training in use of maintenancesystems are included.
This project will take roughly a month (4 weeks) tocomplete.
Phrase 1 :Research 1st Week - Day 1 to 3: Research documents, PowerpointPresentation, Planning Materials: Google Slides, Research Findings documents
Phrase 2 :Sketching 1st Week - Day 4 - 7: Logos, Banners, Icons, Low-fidelitywireframes Materials: Pen, Paper, Sketches, Digital Photoshopsketches
Phrase 3 :Design 2nd Week: High-fidelity Wireframes, Logos Materials: Photoshop, Adobe illustrator Submission: Beta Version
Phrase 4 :Coding 3rd Week - 4th Week: Promotion Website, Application,APIs Materials: Visual Studio Code, HTML, CSS, APIs
Phrase 4 :Presentation of Project 4th Week: PowerPoint Slides and Demonstrations Materials: Promotion Website, Application
Logo Designs: $200 for finalised design Sketching and research of design costs fall underwebsite design. Website Design: $20/hour Includes research, sketching, presentation Website Development: $30/hour Promotion
● Technical arrangements
● Metadata
● Documentations
● Training
● Wireframes
● Demonstrations
Main Page:
Map Input Form:
Map:
Forum:
-
Index Page
-
Application Page where all features are inside.
-
Form for Navigation function
-
Navigation Function
-
Bus Timings Search by Bus Stop Code
-
Available Taxi and Taxi Stands
-
Traffic Situation Search
-
Traffic Estimated Travel Time by Expressway
Resources: https://fonts.google.com/specimen/Lemonada?selection.family=Lemonada https://fonts.googleapis.com/css?family=Advent Pro'rel='stylesheet https://fonts.googleapis.com/css?family=Bubbler One'rel='stylesheet https://data.gov.sg/developer https://www.mytransport.sg/content/mytransport/home/dataMall/static-data.html https://gothere.sg/api/maps/reference.html#GMap
https://animista.net/play/text/flicker https://fontawesome.com/v4.7.0/ https://css-tricks.com/snippets/css/typewriter-effect/ https://ianlunn.github.io/Hover/# https://daneden.github.io/animate.css/ https://codepen.io/widhi_allan/pen/ltaCq
Images: https://p7.hiclipart.com/preview/864/527/828/package-tour-history-of-the-republic-of-singa pore-borneo-and-the-indian-archipelago-travel-singapore-vector.jpg https://pngimage.net/singapore-skyline-png-4/ https://i.pinimg.com/736x/1b/60/9c/1b609c74e1a806851c2f284fc02c3e24--cyberpunk-art-n ight-moves.jpg https://dribbble.com/shots/3935594-Animated-Backgrounds
https://www.iconfinder.com/icons/3496404/display_information_empty_signboard_informa tion_sign_sign_board_signage_icon https://www.narberthpa.gov/leafgif/ https://gfycat.com/stickers/search/google+maps https://giphy.com/gifs/kimPrHNUDksc14FXCB https://giphy.com/stickers/8JQOVahM4wGC99GF0o https://giphy.com/stickers/google-maps-google-googlemaps-kZiJRIVDoCQd3fvl7j https://www.aic.sg/sites/silverpagesassets/SilverPages%20Assets/Content%20Images/Care giver%20Symposium%20Assets/Psychological%20and%20Health%20Impacts%20of%20Car egiving_Dr%20R%20Malhotra.pdf https://www.jakpost.travel/vwall/iRwhJoT_8-bit-wallpaper-hd-blue-pixel-background-gif/ http://www.fubiz.net/2015/08/05/everyday-life-in-japan-8-bit-gifs/
Searches: https://www.youtube.com/watch?v=ecT42O6I_WI https://www.youtube.com/watch?v=4UoUqnjUC2c
https://www.w3schools.com/jsref/met_his_go.asp https://www.w3schools.com/jsref/event_onclick.asp https://www.w3schools.com/jsref/prop_win_localstorage.asp https://www.w3schools.com/jquery/eff_hide.asp https://www.w3schools.com/html/html_comments.asp
https://www.w3schools.com/w3css/w3css_slideshow.asp https://www.w3schools.com/howto/howto_css_responsive_text.asp https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp https://www.w3schools.com/jsref/jsref_getmilliseconds.asphttps://www.geeksforgeeks.org/ how-to-convert-milliseconds-to-date-in-javascript/ https://www.w3schools.com/graphics/google_maps_intro.asp https://www.w3docs.com/snippets/html/how-to-create-an-html-button-that-acts-like-a-link. html https://developer.mozilla.org/en-US/docs/Web/CSS/z-index https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts https://javascript.info/localstorage https://api.jquery.com/click/ https://hyperorg.com/misc/myFirstApiScript/myFirstAPIScript-HarvardLibCloud/myFirstApiS cript_article.html https://rapidapi.com/blog/how-to-use-an-api-with-javascript/ https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/ https://www.mathworks.com/matlabcentral/answers/351941-how-to-store-values-from-loo p-in-an-array https://medium.com/@gianpaul.r/fetching-from-multiple-api-endpoints-at-once-ffb1b 0f https://medium.com/@LewisMenelaws/a-beginners-guide-to-web-apis-and-how-they-will-h elp-you-23923a0da https://tympanus.net/codrops/css_reference/animation-iteration-count/ https://matthewjamestaylor.com/bottom-footer https://clubmate.fi/detect-click-with-pure-javascript/
https://forums.asp.net/t/1988848.aspx?Javascript+If+Statement+for+different+button+click ed+ https://forums.asp.net/t/1988848.aspx?Javascript+If+Statement+for+different+button+click ed+ https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-u sing-javascript https://stackoverflow.com/questions/7960208/jquery-if-checkbox-is-checked https://stackoverflow.com/questions/19299147/how-to-call-a-onclick-function-in-a-tag https://stackoverflow.com/questions/12945825/adding-an-onclick-event-to-a-div-element https://stackoverflow.com/questions/11419998/text-decoration-none-not-working https://stackoverflow.com/questions/9800261/jquery-how-to-check-if-no-option-was-explici tly-selected-in-a-select-box/9800457 https://stackoverflow.com/questions/38281782/jquery-check-if-nothing-selected-in-select-b ox https://stackoverflow.com/questions/351058/space-between-two-rows-in-a-table https://restdb.io/blog/object-relations-in-a-nosql-database https://restdb.io/docs/parent-child-relations https://restdb.io/media/restdb-cheat-sheet.pdf https://restdb.io/blog/working-with-hierarchies-in-a-nosql-database