Blog 16_Project Semester 2

FYP Project                    K00121609                          March 2017

Blog 16: Setting up of social media accounts for FYP Project: "Design Your Day Your Way."

This morning I have set up social media accounts for the FYP Project. These are: gmail, twitter and Instagram. I have set them up for desktop and mobile. These are the address/url links from my webpage:

This is the logo I have created in Adobe Illustrator for my FYP Project:

Blog 15_Project Semester 2

FYP Project                    K00121609                          March 2017

Blog 15: API & Google Maps

Part of my plan for this project 'Design Your Day Your Way-for Life Management' was to include a Google Locator Map in the project, enhancing the 'being in the present moment, for focus theme of the project.

I found that it was straightforward to input a map into the website. As this is a Creative Multimedia Course, I decided to make this map a interactive experience for the user. 

As I progressed in the research to make this happen, I found that it was essential to obtain an 'API Key' to add to the script element in my html website page. When I figured out how to obtain this key, I took screen-shots to record and describe the steps taken. 

This first diagram is of the role of an API key, where it mediates between a Google Service and the application. The Google Service I worked on was 'Google Maps.'

The following are the steps taken:

Step 1: Reading about the functioning and the requirements for the API:

Step 2: Setting up of API key instructions:

Step 3: Selection of 'Credentials' step:

Step 4: Creation of a 'New Project' which is required before obtaining an API key. I labelled my project 'SB Design Your Day' and my 'Project ID' provided is 'sb-design-your-day.' 

Step 5: This is an overview of my project page created called as above 'sb-design-your-day':

Step 6: There are a list of different application types in which 'Google Maps' and API's can be used. For this project I selected the 'Google Maps JavaScript API':

Step 7: I applied the credentials and in the 'Get Your Credentials' section you can see the 'API Key' that I have acquired.

Step 8: This screen-shot shows API date set-up details, my identifying email address, the API Key and radio-button options of which I selected  the 'HTTP reference':

Step 9: This is what my Google Project looks like in a screen-shot view:

Step 10: This is the project 'Settings' page which displays: my project name, project ID and Project Number which I then saved:

Step 11: This is a list of the credentials page where I set the name users would see as 'map.' There are also options here for displaying a project url when uploaded on a web-hosting site like git-hub: 

Step 12: input of the reference point API Key code to java script in the html website page. Here I referred to W3 Schools for the format of the API entry. Here I found that the 'https' address is inputted followed by the 'key=' , then the 'API Key' code, the '&callback=myMap':

Step 13: I have here set a default location to 'Limerick Institute of Technology, Limerick.' The co-ordinates for this are: latitude (52.6749), longitude (8.6476). This is where the red ping symbol is on the map.

Step 14: This is the result at a zoomed out version of this map, where the user can use the arrow keys at base left of screen to zoom in and out and the default I have set at Limerick Institute of Technology, Limerick as the red ping, holds its place at step 13, stated cor-ordinates as a reference point for enhanced user interaction.

Step 15: These icons are clear to find and see on the map. The + & - refer to zoom functions. The person icon has excellent user interface functioning. Here, on click of the icon, a pan hand symbol appears. This is used to drag this icon across the page to a location a user wants to view as an image, there is also a rotate function to this element. 

Step 16: I dragged the icon to Limerick Institute of Technology and on off-click of the mouse in dragging the icon an image as here appears. Also, before you click off the mouse as you drag the icon, there is a live preview image connected to the person icon, so you know what image to select.

Step 17: This image is of the right left corner of the screen in the above step 16. Here, there is an option for a full screen view using the dashed square icon and a rotation of view option of the arrows icon and then the zoom functions:

Step 19: This is an image of what appears in the top left corner of the image screen, the 'back arrow' which brings the user back to the map version:

Step 20: This is another screen-shot I took of the results screen, when I used the person icon to locate an image of LIT. This is to show that the images of locations that are possible to select can be from various angles and viewpoints and result in very high quality renders.

Blog 14_ Project Semester 2

FYP Project                    K00121609                          March 2017

Blog 14: Discussion Forum

In this blog I will display the resulting "Discussion Forum" for my FYP Project of "Design Your Day Your Way." As I mentioned in blog 13, as I fine-tune the navigation over the next few days I will be adding sub-heading tabs to the existing layout. These would be keywords like those added in search engine optimization, to categorize topics and stimulate conversation. Examples of such keys would be: life management, mindfulness, health etc. This forum is a large part of my project that uses multimedia and user interaction in the heading (on navigation diagram) of "Life Management, Media and Society." This is a minimalist design in the calming lilac colors of the website. (I will include an updated moodboard of how my ideas and actions have developed since the presentation step in an additional blog.) The following is the domain name I created for the forum:

https://designyourday.discussion.community

Next are the screen-shots of aspects of the discussion forum and its functionality:

Screen 1: 
This is the opening page the user sees on internet search. I have created a clean, clear minimalist screen as when content and conversations are added to discussion forums they can become quite cluttered looking. Here this modern design approach could act as a calm backdrop in information added.

Screen 2:

This is the page on-click of "news" in the category section above. As you can see there are not any news discussion items added as yet. It has titles of: subject, author, replies and last post. The areas of "General" and "Moderators Only" show this same screen layout and functioning. 

While in this sub-category of "News," the user can click on its main title of 'Categories' to return to the home page. They can also access other aspects of the site using the tabs at top of screen such as: calendar and latest topics.

Screen 3:

Going back to the home page (on-click of main title user is in, i.e. here "Categories") there is an area of the screen shown in this screen-shot that shows current status and actions on the site in "Current Active Users" and previous actions on the site in "Forum Statistics" sections. Here highlighted in blue text are the live links within these areas: "2 users online" in the "Currently Active Users" section and "Members List" and a welcome to newest member, in this case is "sineadb," as clickable live links for more direct information on each of these items.

Screen 4:

As a development from screen 3, this is the resulting screen from on-click of the highlighted link "2 users online." This gives details of: member name, last activity, posts/latest and when joined the discussion forum.

Screen 5:

As a development from screen 3, on-click of "Members List" produces this screen. There is a useful A-Z index bar on top which would be useful for any search for other members.

Screen 6:

As a development from screen 3, this is on-click of new member this is the profile screen that is shown. There are options in albums for adding photos, contact information general and account information. In the account information, there are options for: a search for posts and topics by this member as they are added.

Screen 7:

There are two images here for screen 7. The first is the page on-click of the "control panel" for a logged on user. The second image is a partial screen-shot to show the detail clearly of the relevant page part. As you can see, there are plenty options for the user to add the details they wish to use and to customize their area of the website like for "user title."

Screen 7_Image 1:

Screen 7_Image 2:

Screen 8:

As a development of screen 7, on-click of the preferences tab will bring up the following screen. Again I have taken an overall screenshot of the page and a partial screen-shot to show the detail. This gives the user the option to "Update" their preferences.

Screen 8_Image 1:

Screen 8_Image 2:

Screen 9:

This next screen-shot is the event reminder screen. The user has options of adding: an event, event date, event poster and a reminder date.

Screen 10:

Here is the search page in two screen-shots; the first the overall page and the section a partial screen-shot of the main information area on screen. The user can search by: keyword and username as well as conducting an advanced search. They can search by: members contributions, relevancy ascending or descending, by date and by topic or post.

Screen 10_Image 1:

Screen 10_Image 2:

Screen 11:

The next screen-shot is of when click on "Calendar" tab, this calendar is displayed. This has been CSS designed in consistency with the other pages. This is the "Monthly View."

On the far right of screen above the "Saturday" label is "Add an Event." This next is a close-up screen-shot of this functioning element. Here, as you can see is a drop-down list of options for a: single, all day, ranged, recurring event.

a. On-click of a "Single, All Day Event" this next is a close-up shot of information displayed and the options contained.

b. On-click of a "Ranged Event" the following is the screen, similar to the above, but with a start and end date and time.

c.  On-click of a "Recurring Event," there are the extra options to select: daily, weekly, monthly and yearly and time.

Screen 12:

This is a drop-down list when "Calendar Mode" is selected on the top-left of the calendar.

a. Weekly View:

b. Monthly View:

Screen 13:

This is the top of the screen for the "Chat" area of the website. Users can have online chats on topics in this chat-room area of the website. This is quite a good example of user interaction within the designed website.

Screen 14:

At this point I log out of the forum and then click on logon to show this process. This is the create account form and the next is the logon form. Both are close-up screenshots of these relevant areas.

a. Create account form which asks for minimal information for maximum effect.

b. The logon form which is clear and assistive of the user with several options including: forgot your password, checkbox for automatic logon and create an account.

Blog 13_Project Semester 2

FYP Project                    K00121609                          March 2017

Blog 13:

I have designed a discussion forum for the FYP Project. It was a lot of work but worth it. I think it will add an interesting interactive element to the project which is part of the topic on "Life Management, Media and Society." 

Initially I conducted a google search on the topic of discussion forum methods and its potentials building on the previous proposal and research steps, and decided to go ahead with fulfilling the task. 

Objectives were: user interaction, user contribution, programming work, use of multimedia content. The url domain name of my forum is:

https://designyourday.discussion.community

I found that some forums can be easily created by getting a package, downloading it and linking the forum to the website. As part of this project and learning as much as I can about IT, I selected a website forum site called "Website Toolbox," that involved more complex work than other sources researched. Here, I was able to create the forum I had planned and learned additional CSS skills along the way.

The first step was to select a theme for which I selected "soft-purple theme." Next, the customization step. Here there are 3 options: Basic Editor, Basic CSS Editor and Advanced CSS Editor. I considered and did trial runs using the three options. I found that the Basic Editor does not go into sufficient detail for the design I want to set out. The next two options are equivalent in levels of difficulty and coding results. 

The Advanced CSS Editor is what we use in class every day in our website CSS Local Route Folders. Therefore, I used the Basic CSS Editor as not being familiar with it, I could learned additional codes from the process. I think though from using this CSS procedure that a very good knowledge of HTML and CSS is required to know what exactly it is you are specifying. 

Advantages and disadvantages of this CSS procedure:

I would say that I have learned more about HTML to CSS styling references e.g. of classes and id specifications. In comparison to the CSS styling sheets I normally use, I think this "Website Toolbox" is very good, but not as practical as the styling sheets. My reasoning for this is : in using the styling sheets I can check the styling of the webpage as I go in the Brackets Live Preview. 

Using the CSS Editor means I have to save the CSS coded, go to the end of the document, save, go out of the document, open up the resulting website before I can see the result. This is a good method but is quite time consuming  as I have to go through this entire process every time I want to make a change to the CSS and to view the change.

Nevertheless, I proceeded with the Editor and am satisfied with the resulting discussion forum built. Over the next few days as I'm fine tuning the navigation, I will add the discussion sub-categories to the forum and it will be ready to be embedded in the website.

Here, next are screenshots of zoomed out version of the CSS pages I worked on. They are zoomed out as the document itself vertically scrolls and there is a very large amount of work done in it to be displayed. The following are the initial work done shown in these screen-shots. I have streamlined the colour scheme since, to an overall minimalist lilac theme which is in keeping with the theme selected and design features of my website.

Screen-shots of CSS Editor:

These above are the components of the CSS Editor. In the next blog I will show the resulting website and in the following one, the steps in adding my html page codes as well as many other required settings before embedding the discussion forum in the website.