Project_Blog_K00121609

FYP Project K00121609 April 2017

Blog for 07/04/2017 to 19/04/2017

07/04/2017
MP4 Videos & u-tube:

Idea-page of website of u-tube videos on website related to the main theme to select from.
I put the url into the html document.
Advantage is it skips the ads associated with these images as compared to if you were to view them on u-tube.

Videos in HTML5:

Step 1: code(HTML5)
<video width="400" controls>
<source src=" " type= video.mp4>
</video>

Step 2: "select video"

Step 3: "Go to online converter and convert video to MP4 format, which is supported in most browsers."
Download.
Save to "images" file.
Upload into code on HTML page.

Videos: DOM -> <video> element is not supported in Internet Explorer 8 and earlier versions.

On pages -> play a video of e.g. sight and sound of water, while doing activities on the page.

Saved index28.html on memory stick - white Toshiba 16 GB.

____________________

Glyphicon for icons.
W3 Schools -> Bootstrap -> glyphicons
____________________

index28.html -> Programming code of DOM / JS / HTML
index30.html -> excellent navigation scrolling layout.
____________________

www.w3Schools.com/bootstrap - > for current development -> history section.

____________________

Novelty numbers and text page - > clicking page to pass the time.

___________________

Icons glyphicon at w3schools website.

www.w3Schools.com/icons/bootstrap_icons_glyphs.asp
_____________________

XML tutorial:
www.w3schools.com/XML/Lecture
__________________________________________________________________

Linking a Microsoft Access database to a website:
Displays MS Access DB -> on a website.
Idea -> to put a series of links to online videos in categories and on the Access DB it displays on the webpage.

How to install data into an Access folder from a HTML page.
________________________

MS Filename
"HTMLACCESS.mbd
Snap-shot styles in index26.html.

______________________

index 32.html -> HTML DOM input

-> HTML 5
_____________________
Chapter on HTML media
w3schools.com/html/html_example.asp
______________________
semantic elements tell us something about their content e.g. <form> clearly defines its content, e.g. <table>
_____________________
for loop: w2schools/js/js.example.asp

Index33.html

Angular JS

Idea: use these elements to display activities I have written about.

Example: radio buttons to act as Modals as a Creative Multimedia way to display information.

Index33.html has this code. This is using “Angular Forms.”

Angular Validation: validation of email, validation of form.

w3schools.com/angular.

Learning SQL.

______________________

08/04/2017

Process for blog for video placement:

Made my video

Into Premiere Pro of video and sound, MP4

To merge and optimize them

Compressed them in online optimizer "Climpchamp.com"

Downloaded code, added to Brackets file, used CSS3 to place.

Source other potential videos for the website, converted them to MP4 and added to website page.

File name=desktop->videosfyp

Logo Branding->add title to the brand in Adobe Illustrator.

Videos:

Lynda.com Adobe Premiere Pro video watched.

"Premiere Pro-stabilizing shaky videos using the warp effect."

A) Effects->Warp->click on video clip in timeline->warp stabilizer analyzes the movement.

B) When this is completed: clicked on "clip", clicked "effects," and I see where the analyze is grayed out based on the Stabilizing Analysis.

C) There are options for stabilization: stabilize, stabilize and crop and autoscale.

D) Smoothness: default=50%, it shows how smooth the shot is and I adjusted this using an indicator on the slider. To the left-> stabilize less and more camera movement, to the right stabilize more and less camera movement.

_______________________

Video files I took on my phone.

File name: "watervideo"

New phone-would not download to PC. I did some troubleshooting on "Huawei" and "MS" websites. Learned how to download and use "One Drive," to save and send videos to many sources. Save to Google Drive and sent video to my gmail. Downloaded to my desktop file,dropped it into timeline in Premiere Pro. Edited. Exported with maximum render quality.

Downloaded Movavi Video Converter (www.movavi.com) and installed app, trial period.

Downloaded Wondershare Video Converter.

Converting video from Premiere Pro to MP4 using "Adobe Media Encoder," and exported.

Added edited mp4 files to my images file in local route folder.

Set frame size using "aspect ratio," 16:9.

Finalized uploaded videos for Brackets and Live Preview and completed video edits.

Audio file: I converted file to mp3 for audio. In "export" unchecked the box for video so that only audio would be exported.

Combined files to make a composite nature video.

__________________________

09/04/2017

Made audio file->bird song with river in background.
To do->traffic and people talking to edit out of it in Premiere Pro.

On my Pinterest Board there is the option to make a widget. I can link up the features of: save button, folders, pin, board, profile in the widget by obtaining embed code for each of these.

Uploaded Pinterest badge, looked for official colour, #BD081C, (R189 98 B28).
Set up Pinterest App. Put in application description that this is an app for a college project on design ideas. Platform->web->site at: https://www.designyourday.com.

Sketched out various page layout and content options.

List of keyword summaries of file content as per index files:

index 6: visual graphics, radio button modals for topics and articles.
index 4: visual graphics, very good creative multimedia way of presenting the overlaps between 3 databases of information in an animated graph style.
index 3: article, word brainstorming, water animations to look at.
index 1: visual graphics, way of displaying information using artistically styled pie chart graphics that move on-click for the user to select more information on certain areas.
index 7: visual graphics calm and relaxing to look at, lots of these.
index 8: art animated graphics, when you click on them the are you click changes its direction of movement, very interactive.
index 9: visual graphics, black and white dots, on-click have certain effects e.g. dots get smaller and cluster on-click etc.
index 12: interactive online paintbox. Canvas and paint effects the user can select and draw what they like on-screen, includes editing also, very good for website.
index 14: graphic stories, here you write a story, each word is displayed one at a time, and zooms out the page each time, then starts again small with the next word. I'm not sure about this, maybe good for a short story or poem.
index 16: visual graphic, grid that moves in waves, interactive.
index 17: visual graphics, icons that move in various cube formats.

These are some pages I put in a list to remind myself of their main content and theme:

index 37: image modals, for visual accessibility to short of sight people, I added alt text to appear below the modal when opened.

index 28: programming code

how to code to get newspapers/magazines to read on the website + styling.

"The time is" code -put a wallpaper background image on this, an on-hover opacity, and style the text in keeping with the rest of the website.
Tool-tips code, to add these to page.
https://www.help.zenplanner.com->good planner for the website.
100widgets.com/calendars.

Many time examples, local time, international, orbits, planetary etc.
Ideas of clock placement-on navigation bar?

I installed Adobe Flash Player.
_____________________________________________________________

10/04/2017

Use JavaScript for the online clock. Index 40.html. Reading chapter on combining Ajax with Libraries.
______________________________________________________________

11/04/2017

Index 40: Inis Artists, idea to display their work on the website on a carousel or other image slider.

Idea to combine programming codes by combining image, flex-box and modal codes.

Life-Management Media and Society Page: add expert opinions on whats currently trending, podcasts e.g. from Clare FM this morning, add iframes, link website to "The Upgrade Community," "The Pendulum Summit," and tie to the RSA objectives of Holistic approach to health and lifestyle.

index 41: inspirational quotes 190px x 210px.
I've started using the commenting for code, very useful to follow actions:
/* */ for CSS
 for HTML.

Practicing and deciding of how I will layout my content generated.

Stars Page.
Soul Thoughts Page.
Add opacity to images for these so the user knows on hover there is a call to action (CTA) here.
I put the images into flex boxes for responsiveness in the website. The box outlines I styled as 1px in the same colour as the background page. This is so they can behave as flex-boxes and not be seen around each of the image modals. Once laid out and styled, I added a wrapper <div> to place them on the page, with padding and margins.

Each has a code as an image and as a modal. The image on-click opens to a full page modal. Each has text I centered separately on the opened page for people with sight-problems that may find it difficult to read the image poster text. Modal has an 'x' to exit back to main page.

These are all free non-copyright images. I have in this project sourced a very nice animated visual. It is protected with copyright. I wrote to the author by email to ask for use of this image. I got no reply, so I will not be including this image in the project.

Summary on this page index 19.html: quote switch statement, flexboxes on all outlines, images and modals, on-hover opacity function.

Image map generator: instead of only having one anchor link per images, using this method, it is possible to add an image that has more than one area that is an anchor link-> multiple anchor links per image. It does this by setting co-ordinates as you would on a geographic map (XY, XY) and then linking particular co-ordinates to a point or larger area to which you add the anchor link code.
Use this for the 'Chakra' section of this page. The image of the body, its each chakra area as an anchor links, on-click shows more information on each of these. A good way of presenting a lot of information in a Creative Multimedia Programming way.
Some of these can be tables: using code <ul><li> etc.

(Deciding on type of video and audio frames to use for the final product.)

Chakras, add a transparent image so that it appears to be floating on the page. Use a table of chakra colour associations and their meaning. Use coordinates to match these.

Image map co-ordinates using the HTML <map> tag-> better than the <a> tag here, as it can be associated with multiple text/ links within one image, and can target specific areas of one image.

For CSS for table use peach on-hover colour for the rows.
Mapping app->imagemap_generator.dardoni.de:
Step 1: upload image
Step 2: click into image and set co-ordinate values.
Step 3: Click on point here where I want to connect using "add area."
Step 4: Customize and network all areas.

It works. I found though that it is important to have the original image sized correctly on the webpage, otherwise it does not work if you change the sizing settings, putting a <div> on it and CSS. However, it does work with the <div> for margins layouts.

Icons:
Decided against "Bootstrap" in favor of "font-awesome" as many of the later are animated and their is more of a variety. Use the class "fa" for this. In w3schools.com there is a reference section of these. Decided on those to use and put them in flex-boxes for responsiveness.

List of official colors for social media icons:

I set up Gmail, Twitter and Instagram for the website:

designyourday@gmail.com
https://www.twitter.com/designyourday8
https://www.instagram.com/designyourday8

I added: Google Search Bar->embed code
: Twitter Feed->I set the search query for "organise your day", and the top tweets will always be available to see from the postings.

Calendar: https://en.support.wordpress.com/google-calendar/

To open a page in another tab, use, <a target
website: html.com/attributes/a-target

Planning layout of these elements on the page.

Reading: www.javascriptsource.com/buttons/
______________________________________________________________

12/04/2017
Looking at lots of types of code and figuring them out. Developing codes an layouts for cards, styled radio buttons, tool-tips, carousels, image sliders, animation of images, forms, tables etc.

index 44: movies
On-screen dialogue-box to enable Flash. Its working for other things. Perhaps movies have a specific requirement.
Step 1: type "about:plugin" in Chrome Browser
Step 2: go to "details" in top corner
Step 3: Select "hash icon"
Step 4: Click "enable"
All done

Super-placeholder: these animate in a loop.
www.cssscript.com

Added twitter buttons to website.

Adding to the Google Search-bar->other search engine options, that can be accessed using radio-buttons.

Creating a Google calendar specific to "design your day." Look at index18.html about page and index12.html games page. Put into a responsive text-box.

img/owlmain.1 for website logo. Also, as a tool-tip so wherever you see an owl it indicates to the user a Call-To-Action (CTA). On-click of logo brings the user to the home page.

Reading up on how to add an Excel sheet to the website called "book 1". Tried a number of methods. Made the Excel sheet into an Adobe PDF, uploaded it in Adobe Acrobat, selected "Export to HTML webpage"-> exported it to index45.html. It works well but is not the effect I am looking for. It results in a static addition to the webpage, I am looking at putting in an interactive Excel page. There are lots of options for adding interactive dashboards if I wanted to do this but not Analytics at this stage. I read up on D3.js, its much better, but not exactly what I'm looking for.

Moved owl logo from navigation bar to jumbotron as I have increased its size to look better here.
Index 46.html is the media page, add code from index28.html here. Add RTE Player. Decided on using Cards to display these, designed them up with border-radius curved corners and box-shadows to the right and bottom of them. Put them into flex-boxes for responsiveness. Source images, sized them in "Paint," tweaked them in the cards, added codes for links and layout code. Set them to run vertically along the left side of the page.
Linking in with the RSA objectives to educate, inform, entertain and Dan Lockton's book to "design with people, rather than for them," I am planning to create a tutorial for people to create their own diary life-trackers.

These are my pages and a summary of what I'm working on with these:

Trying out poster design using "Venngage" which is good for infographics and timelines. Found at end of poster design, there's a Venngage watermark unless you sign up to a paid subscription.

Trying out "WPEngine," "Torque" plugins.

Added a BMI chart.
Checked that the "print" function was working well on the calendar.
Added a "Weather forecast" to page.

Saved everything onto a CD disc as back-up.

Idea of area for featured places to visit every month.

Add calculators and converters for organisation and a note on the history of these.

Reading up on using software "Active Presenter" for the Excel tutorial I have prepared.

Decided on page sequence:

index.html=home page
index1.html=Organisation page
index2.html=Health page
index3.html=Games page
index4.html=About page
index5.html=Star-gazing page
________________________________________________________________

16/04/2017
Development of Health Page.
Thinking of infographics, typography, cards, links.
Organised API for my "Healthfinder" widget and subsequently the code for this and placed it using CSS in the webpage.
Added BMI calculator from BMI Calculator USA. Spent a lot of time researching calculators to fit in with my overall website design. The colour scheme is a calm blue and white, it is functional, extra features of when BMI is calculated, it gives options for tips and advice. Practicing layouts for my programming code on the pages.
These are some more examples of my pages and placements I am looking at:

]

Nature videos 554px x 280px
Design of page, image of people in background covering the full page and text in the background, code written up.
Video designs: frames, scans, timings, effects.

Add a featured place to visit every month e.g. my Bunratty Project from Web Development.
_________________________________________________________________

17/04/2017
Added a : good morning, good afternoon, good evening animation in code that responds to the time of day.

__________________________________________________________________

19/04/2017
I learned how to use "ATOMI" software which is good for presenting e-learning materials:

These are notes on this process:

Project_Blog_K00121609

Thursday, 4 May 2017

Blog 20_Project Semester 2 (20/04/2017 to end of term)

Blog 19_Project Semester 2 (07/04/2017 to 19/04/2017)