Diary For Mike

Diary – Ivan Foy
06/03/18
Aim: My aim for today is to first login, check my emails, make sure my ID is on and to put away my
mobile after all of that is done, I be moving myself onto creating my logo for Fire Ice Gaming first
and then if I have time in lesson to begin on the screen icons and the explanation in how to create
them.
Evidence:
I began the lesson by looking over my proposal and

mood board for what sort of style I have to do for the
development of the logo this requires me to think
about things like colours, shape and effect for my logo
design so once I was set on the task and what I needed
to do I opened up dream weaver since that was the
program I was going to use for the development of my
website code since no other program offer the tools
and the standard colour palettes I will need to use for
the development of the site. I need to give it a
professional feel to the client and wouldn't live up to
the standard I will showing on the proposal.
Opened up Dreamweaver and clicked on

new, allowing me to set up my workspace by
adding in the dimensions to what I wanted
for the file of the current art board, I won't
be using a template like the rest of the class
since I feel this would limit me to what I can
create so I have gone with a blank document
and moving on, I set the dimensions of the
screen to 1920 with and naming the file
"FIG_HTML", the reason why I picked that
resolution size is because it's the most common screen size for websites and will be using RGB for
my colour mode since this work will be used on a website and most things on the web are set as
RGB. So, with that done I gathered the hex numbers needed for my colours luckily, I had my work
book on me so I could just look in there for my hex numbers, once I had gotten my colour palette
ready and of to the side I went to get my story boards since they were the base design to the logo I
had in mind.
Workspace:
HTML Workspace is an HTML and JavaScript™ based web application hosted on CRX™. When
Workspace URL is opened in a browser, a CRX™ resource is accessed, and the application is rendered
as an HTML page in the browser. The JavaScript libraries and the custom JavaScript code manages
the internal and external behavior of the application, such as user interface, user interaction, and
communication with LiveCycle server. For more details, see HTML Workspace architecture.
Frames:
HTML frames are used to divide your browser window into multiple sections where each section can
load a separate HTML document. A collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are organized: into rows and columns.
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines,
how to divide the window into frames. The rowsattribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which
HTML document shall open into the frame.
Head:
The <head> element is a container for metadata (data about data) and is placed between the <html>
tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, links, scripts, and other meta
information.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
Script:
The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external script file
through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of
content.
I went off to develop the first section which

was needed for the base of the page which
was the id, naming, type and the value of
the webpage and then the tables, with
these aspects I will be able to cover a few
aspects which are needed for the basic of
creating a website like the induvial frames,
as well as the sizing and colouring of the
background and the other sections so with
that done I decided to begin from the
bottom navigation instead of the navigation bar at the top of the page with this I can focus on what
needs to be done for the needed aspects of the site and how these are used for a wide range of
tools in order for users to navigate around the needed sites that the user wants to visit in order.
And so with this in mind I begun by creating different parts of code starting off with the navigation
layers and the buttons that will be used to create such a website and so with this I will be able to
cover these needed aspects that is the first div section. As you can see below I have designed this
code so that it covers the style, class and images that are needed for me to create the footer and
decided to add in the first link text which will be "Home" I am yet to create this page since I decided
to start with the fraction page for my personal reasons and so with this I decided to continue the
development of the footer.
<div class="footer">
<input name="trapit" style="display:none;" type="text" value="">
<img anima-src="./img/fraction page group 4.png" class="group4"

src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAE
AOw=="/>
<div class="group6">
<input name="trapit" style="display:none;" type="text" value="">
<div class="text-here">
Main Sites
</div>
</input>
</div>
With the foot code done for now, I planned

on moving my focus onto the other
navigation section with external and
internal styles, which will be the web
banner and so this will be able to cover the
needed sections that are on my wireframe
and so with this I will have to do it as
accurately to the wireframes design I
created in assignment 2 and so with this I
went on to developing the navigation bar
as accurately as I could with adding in the ccs for the section just yet so it went well until I hit the
search bar section this proved the most challenging for me and made me spend about an hour to
adjust the navigation bar so that it had a working search bar that would go to sections of the sites
but lucky was able to create this and now I will need to design drop downs to show that sites do
come up and work I hope to design these as soon as possible but I will need to look over some other
work that has this and adjust the language so that it suits it, with that being the only issue there I
dicide its time for me to move on and begin on the next section.
So, I moved onto the next part which is the

content so for this I thought of just doing
things like text, activities, pro players, pre
orders, best sellers and top three, the
others I saved for the next lesson since I
was already pulling ahead of my peers so
for this all I had to do was make sure that
the layout was almost matching wireframe
and decided to go from the bottom up to
the top so I did this by starting off with the
activities then moving onto the pro players from there I went onto the pre order banner and then
the best sellers before toping it off with the top three I did these all the same way and haven't
bothered to add in the links needed for these but visually those aspects are there I just need to make
them interactive then it should be all good, I will need to make the pro player section become a
slider that covers all of the needed parts of the system and so by doing this I will be able to cover the
needed parts of the site but for this to work I will have to add in the images and links for these
sections soonish after I make the layout work and not as jiggered.
Learnt: I have learnt that I have finished my first sections of the creating of the website and so
because of this I hope to develop the website with what is needed for these sections however I feel
that the needed sections are a bit of information about what tools, effects settings and options I
could use in Dreamweaver to develop my html code and how this is shown towards the client and
customer in the website format. I also learnt that the development of my assets is going faster than I
expected maybe I will be able to complete this task in a few weeks' time.
After finding out most of the topics I need to talk about are on Dreamweaver I will be adapting some
parts around that and how the vast range of software I use does include these different aspects of
Dreamweaver each in their own way after all most of the other software is also owned by Adobe.
09/03/18
mobile after all of that is done, I be moving myself onto adding in the last sections into the fraction
page and then I will move myself onto the home page and finish that off with links and everything so
that I can make the base home page and use that as the roots for other pages.
Evidence:
I began the lesson by having a look

though some ideas on the internet that I
have labelled in my sources document,
with these ideas I had in mind for the
code, so I swiftly opened up
Dreamweaver while the idea was still
fresh in my head to add onto my
fraction page html code before I begin
on the ccs. So, I did the same as before
which is keeping the same sections I just
began to add in the links to the footer as
these were the last sections I will need to cover before publishing the pages but since both of these
sections are going to be done I thought of adding in a section where animation web banner would
work and be used for this sort of work and so with that I power on a head and try and get this
section done as fast as possible.
Next section is the web banner, this are
the last on my list for the html script
section side of things, meaning I will
have to move onto css soonish within
the limits of my html document with
the coding sections needed for the code
to work, so kicking it off with the web
banner this section is used to see what
the parts of the basic traits are and
what effects are on the web banner,
these aspects that are on a singular
web banner since these effects aren't shown on all aspects it's unlikely this section will have much
error effects so that it can run as smoothly as possible when I come to test this webpage. I prefer
this sort of idea because it allows me to use it for some adjustments to my designs I have planned in
mind. Next in the frame content is the title and three categories so I used the same type of code as I
did with the top three games so as you already know copying and pasting code isn't really that easy
so I have to adjust some aspects to that the ccs side of things is easy and fast for me to develop
something with something else normally ends up not going as well as planned but this could change
if I can do the ccs correctly, this allows me to work more effectively and allow myself to edit on the
code and highlight the areas I want to cover on the webpage to see where about I stand, arranging
the code is very useful for knowing this as well since different sections can get lost very easily for me
to modifying so what I try and do is leave a small note and create the needed parts of the styling and
so with this I will be able to achieve the website that the design is going for.
style sheets: Style sheets represent a major breakthrough for Web page designers, expanding their
ability to improve the appearance of their pages. In the scientific environments in which the Web
was conceived, people are more concerned with the content of their documents than the
presentation. As people from wider walks of life discovered the Web, the limitations of HTML
became a source of continuing frustration and authors were forced to sidestep HTML's stylistic
limitations. While the intentions have been good -- to improve the presentation of Web pages -- the
techniques for doing so have had unfortunate side effects. These techniques work for some of the
people, some of the time, but not for all of the people, all of the time. They include:
• Using proprietary HTML extensions

• Converting text into images
• Using images for white space control
• Use of tables for page layout
• Writing a program instead of using HTML
Custom styles: If you care to modify the style of any CCS element, include the default stylesheet as a
link and declare any style modifications below that link. These style declarations can be in other
linked stylesheets or in style tags. In addition, construct your map with options that include theme:
null. This will disable the default method of loading the stylesheet and allow you to declare style
rules in your own linked stylesheets or style tags.
This example shows how to declare the font family, size, and color for the mouse position. Note that
only the style keys that you want to modify (change from the default) need to be specified.
Cascading styles: CSS is an acronym for Cascading Style Sheets, which indicates that the notion of the
cascade is important. At its most basic level it indicates that the order of CSS rules matter, but it's
more complex than that.
1. Importance
2. Specificity
3. Source order
External and internal styles: Internal CSS code is put in the <head> section of a particular page. The
classes and IDs can be used to refer to the CSS code, but they are only active on that particular page.
CSS styles embedded this way are downloaded each time the page loads so it may increase loading
speed. However, there are some cases when using internal stylesheet is useful. One example would
be sending someone a page template – as everything is in one page, it is a lot easier to see a
preview. Internal CSS is put in between <style></style> tags.
Probably the most convenient way to add CSS to your website, is to link it to an external .css file.
That way any changes you made to an external CSS file will be reflected on your website globally. A
reference to an external CSS file is put in the <head> section of the page.
That is all of my tabs and how I use them in that set order for the development of an html from top
to bottom, if you have the same tab layout with the same tool box I have then completing this task
will be swift and easy to complete within no time for the next few.
Now I have finally moved onto the style

sheets also known as the css section of
the code since the html has now been
completed for the faction page I now
must move onto this section this will
require me to develop my own custom
styles that are needed, colours and
heights/widths of the sections and
images as well as I will need to nest the
needed colours this will be a key part in
how the site looks and works for users
wanting to use the fire ice gaming site so this really is the key part in order for everything to look
good and work correctly. So, I began with the base site so with this I began on the needed sections
of the site that will require the needed parts that such for the fraction page I had to list it under.
fraction-page this allows me to work on the background of the website allowing me to develop the
needed aspects that I will need to use such as width which is how wide the website is for most sits
which is 1920px and for height I did how much as I did within my adobe XD file so I went along with
this I was able to have something to stick to, with that done its time for position I did this so that it
was relative to the position this means that everything added in will be alligned in the middle unless
shown or adjusted otherwise making the creation of the website easy and simple to work with
whistle developing and so by doing this I can have some aspects added in quickly, so for things like
overflow I have hidden since this means I don’t have to adjust the way that this is shown to been
hidden if some aspects are overflown and this will allow me to..
.fraction-page {
width : 100%;
min-width : 1920px;
height : 100vh;
min-height : 5387px;
position : relative;
overflow : hidden;
margin : 0px;
background : rgba(255, 255, 255, 1.0);
Alt text: This function works very similarly to how a posit note works it gives the coder a reminder
what this function does without having to mess about with the names of the assets so very useful in
my case and in doing so I could be able to develop a wide range of aspects and in doing so I would
expect the needed parts to be developed from a wide range of aspects.
Colours and contrast: In HTML, a colour can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the colour between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the
others are set to 0.
To display the colour black, all colour parameters must be set to 0, like this: rgb(0, 0, 0).
To display the colour white, all colour parameters must be set to 255, like this: rgb(255, 255, 255).
And then for contrast you just add it onto the end of the rgb code in ccs - color: rgba(254, 255, 255,
1.0);
Use of validation tools: For this I would either preview or open it up in the site its self so that I can
get the best possible view of how my project is developing and what needs adjusting. I normally
press F12 to preview the site and use that for a guidance.
Learnt: I have learnt that I have finished the html section with a bit of information about what
sections of code I used and what options I could use on Dreamweaver to develop the code that I
need to develop with and how they are shown towards the client and customer in that way. I also
learnt that the development of my code is going faster than I expected maybe I will be able to
complete this task in 2 weeks' time.
13/03/18
mobile after all of that is done, I be moving myself onto creating my logo for Fire Ice Gaming first
and then if I have time in lesson to begin on the screen icons and the explanation in how to create
them.
Evidence:
Moving to the next section of ccs

this section I will be cover all of the
button and a few of the imagery
sections which will be filled in
soonish but first I will need to
develop the needed sections that I
don’t will require a lot of adjustment
once this section is complete about
that aspect and so with this I will be
able to develop the needed section
and with this I will be able to allow
the user to see the section that is needed for the product to be sold and so because of this I hope to
develop the needed parts that are used for such a type of product like a pre order web banner.
.fraction-page .Webbanner .Webbanner_Base {
background : rgba(255, 255, 255, 0.0);
top : 0px;
height : auto;
width : auto;
position : absolute;
margin : 0;
left : 0px;
font-family : "Helvetica", Helvetica, Arial, serif;
font-size : 21.0px;
color : rgba(0, 0, 0, 1.0);
text-align : left;
line-height : 25.0px;
As you can see these sorts of sections do rely on the needed sections such as position which means
that the sections fit perfectly with in the html code allowing it to be developed for the needed
aspects for the next section so for me to develop the esports section I will need to do the same sort
of thing but may not need to add in the needed margin section but Ill add it in just in case.
Next, I will be moving onto the next section which will be the search bar and the additional aspects
that will be cover once the ccs is complete but with this means that this page is complete for now
and I can move onto another.
So now I have reached the keyframe sections these aren't being used now so they are being
deactivated by editing code in to notes by adding <-- --> but later on when I plan on adding material
design elements in I will be using the needed sections such as an anchor point that allows the user to
travel up the site swiftly and add in
the search bar section as well as the
needed parts such as some
animated sections like sending an
email to the company or doing a
review of the site.
With all of that done I go off and

try out the different types of font
and characters aspects to see if
these works correctly and if
everything is positioned correctly
unfortunately some parts were not
correctly positioned so will need to
adjust these aspects before I will be
able to move onto the products
page.
Text: HTML also defines special

elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
• <b> - Bold text

• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Small text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
Tables:
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows
and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows
and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by
default.
Forms:
HTML Forms are one of the main points of interaction between a user and a web site or application.
They allow users to send data to the web site. Most of the time that data is sent to the web server,
but the web page can also intercept it to use it on its own.
An HTML Form is made of one or more widgets. Those widgets can be text fields (single line or
multiline), select boxes, buttons, checkboxes, or radio buttons. Most of the time those widgets are
paired with a label that describes their purpose — properly implemented labels are able to clearly
instruct both sighted and blind users on what to enter into a form input.
Characters:
Many mathematical, technical, and characters, are not present on a normal keyboard.
To add such symbols to an HTML page, you can use an HTML entity name.
If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.
Media:
So, with all of the images adjusted

so that the website looks more
appealing to the customer/user of
the site and so with this I hope to
develop the needed sections and
now with that page complete I can
now use this code as a base for
other pages and develop with these
sections and use this for the needed
parts that I want to cover, so next
on my list is the product page and
implement the forms into the next website with some cascading styles,
Learnt: I have learnt that I have finished the fraction page for now and will be coming back to it to
implement the needed links and effects for the website with a bit of information and images added
in I can now move onto the home page and create three lots of these so that it allows me to be done
with the needed parts that are always on the floor and so with this I hope to develop these aspects
but I will need to do this task in order for me to move on and make these aspects work and allow me
to see if all of the aspects covered before the deadline.
16/03/18
mobile after all of that is done, I be moving myself carrying on with the development of the home
page which will be quick since most of this already been completed in the fraction page (Footer,
Header).
Evidence:
So, I started by adding in the needed code for the navigation bar for the aspects such as the search
and links to work and so with this I was hoping to develop the home page so that it works well with
the fraction page and so that I can fully focus on the needed aspects that are at my full attention
when I plan on adding into these sorts of aspects and so with this I hope to complete most of the
needed parts which are on this page I will do this by first linking the correct ccs page to the correct
section and link in the social buttons at the bottom of the website to the needed aspects and with
this hope to develop the needed aspects that are needed for these sorts of things, but before I go
into developing the next page I feel that I needed to retouch some aspects which are needed for all
of the pages and that means things like the search bar which I was hoping to adjust by changing it to
a bar to a more button like and then a pop-up bar appears allowing users to search using that
however how I do that requires me to do some development with JavaScript so I began working on
the needed aspects that I will need in the ccs sheet and then develop off of that and hopefully this
could help me out in what I need to do for so with this I hope to cover the needed range and so with
this I hope to fully understand what I need to do for the JavaScript because currently I have not got a
clue how I can do this and develop the needed aspects which I need for the aspects I am looking for
so I began my search for some boost strap java script text files since this is a very useful site to find
what I need to use and apply to my work for these aspects to work, once I found what I was looking
for I went to find the needed jQuery document that this was linked to and then link these two files
together with my HTML document.
I then went looking for the java script that I would need to edit and adjust so that the design works
for my code otherwise I would just have random jigsaw pieces that are there but don’t yet fit
together but I can adjust the pieces so that these aspects will all fit together within the list menus
and the behaviours, and then use these aspects to develop the needed parts of the bootstrap code
and so with this create something really cool and would cover things like animations and personal
font styles. The reason why I am doing this is that my mentors showed me a year ago about material
design and with it how I was able to develop the needed aspects for these sorts of ideas to work and
use for the needed aspects and why it's important to me, because since I have been working at my
job I have always wanted to work with this sort of elements so I was hoping to use some of these
elements for this project and I hope to do it by using the search section and use this for adjusting
some aspects that I feel will need to be cover as I go along with the development of the site with the
ease of use for the user.
Meta Tags:
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on
the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document,
last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services.
HTML5 introduced a method to let web designers take control over the viewport.
Links to established sites:
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
For a website - <a href="https://www.google.co.uk/">LINK TO GOOGLE</a>
For a document - <a href="Products Page.html">LINK TO PRODUCT PAGE</a>
Navigation structure:
I created a nav bar so that there was some navigation structure on my site as well as the footer to
add in some additional help, Convey the menu structure, typically by using a list. Such structural
information allows assistive technologies to announce the number of items in the menu and provide
corresponding navigation functionality.
With most of the coding section done now for the java script text, I moved onto the ccs sheet and
adjusted it a few more times until...boom it was complete the Fire Ice Gaming search icon and
section was now complete using this I hoped to create the needed aspects for all of the pages and
use this for the next section which was the home page, so with that done I moved onto adding the
code for the needed sections and so by using this I was able to move onto the next frame of work
which was the footer, for this I hope to adjust the way that the user sees the needed aspects and
that these aspects are always needed for what I was hoping to adjust and use for the needed type of
design and develop with these sorts of aspects and so by doing this I will be able to develop the
needed parts that I am hoping to cover and so by doing this I was hoping to cover the needed
aspects that the email update sheet and so with this I was able to focus on the needed aspects that I
was hoping to look into by doing this I would need to set up some sort of aspect that would
requirements for that sort of needed aspects. What I needed to focus on is the is the social buttons I
did and the email sign-up sheet I plan on tackling this by using the java script from what I developed
with the nav bar but also use this for the development of the email sign-up sheet by not going as
advanced and using the needed aspects to create an opening for a way in which I will be able to use
the needed parts so for example the java script understands what's and email address and what isn't
so it will be looking for characters in which I will be able to develop the needed parts that I will use
to cover for when I need the particular aspects to be covered and by doing this I will be able to do
the same sort of thing but as for the social icons I will need to think of a way in which I can pick
particular segments of the picture to be links so I will have to do some thinking gin order for that
part to be able to be done for all of the pages.
I was able to do a bit of research into what sort of coding I could use for this issue and I managed to
come across something a few minutes later with this I was able to develop on this sort of code,
<img src="Socailbuttons.png" width="145" height="126" alt="Social Buttons"

usemap="#planetmap">
<map name="Buttons">
<area shape="circle" coords="12,23,82," href="www.FaceBook.co.uk" alt="Facebook">
<area shape="circle" coords="90,58,3" href="www.Twitter.co.uk" alt="Twitter">
<area shape="circle" coords="124,58,8" www.Youtube.co.uk" alt="Youtube">
</map>
With this code I am able to pick the shape, coordinates and the link address, allowing me to create
four for the needed buttons that I was hoping to develop for these needed aspects for the required
elements for the what I was hoping to develop and use these aspects and how we will be able to
develop these sorts of aspects which I feel I would need to adjust for the sorts of things I am hoping
to develop for what I was willing to develop, however I feel this is a really good idea but I can see
one major downfall of this idea and that’s the rolled over version and this would look really
disconnected from the original thing and so with this I was able to completely develop the meaning
of the aspects but I can't see another way around this apart from spending hours developing on this
small aspects and take the time in using the needed aspects for this to work and develop in different
ways, but with this I will need to develop the needed parts of this but overall I am very pleased with
how the navigation bar turned out since there were some parts that I personally feel could have
been adjusted for the needed parts I was hoping to develop the needed aspects for the needed parts
that I would be using for these sorts of aspects and so with this I really want the aspects to help me
in to doing so and that these could have been done in different ways and how this could have been
develop I mean after all I would need this to be used for all of the pages in which I hope to develop
so this is what I could really do with using and why it's used for different ways and changed to be
adjusted so that it works great and would be used to a very high standard if I adjust the properties
correctly.
Properties:
The attributes are special words used inside the opening tag to control the tag's behaviour. HTML
attribute is a modifier of an HTML element type. An attribute either modifies the default
functionality of an element type or provides functionality to certain element types unable to
function correctly without them. In HTML syntax, an attribute is added to an HTML start tag.
Several basic attributes types have been recognized, including: required attributes, needed by a
particular element type for that element type to function correctly; optional attributes, used to
modify the default functionality of an element type; standard attributes, supported by a large
number of element types; and event attributes, used to cause element types to specify scripts to be
run under specific circumstances.
Some attribute types function differently when used to modify different element types. For
example, the attribute name is used by several element types, but has slightly different functions in
each.
Linking:
A webpage can contain various links that take you directly to other pages and even specific parts of a
given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images.
You can create hyperlinks using text or images available on a webpage.
Integration and import of different media formats:
Multimedia comes in many different formats. It can be almost anything you can hear or see.
Examples: Images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
In this chapter you will learn about the different multimedia formats.
Ease of use:
Usability is the ease of use and learnability of a human-made object such as a tool or device. In
software engineering, usability is the degree to which a software can be used by specified
consumers to achieve quantified objectives with effectiveness, efficiency, and satisfaction in a
quantified context of use.
Interactivity:
Adding interactivity and animations to a design doesn’t have to be complicated or make the website
inaccessible when you use modern Web standards. In this article, we’ll explore several examples and
theories that employ CSS, HTML, SVG, the canvas element and JavaScript. Some of these techniques
you’ll know, others you may not have considered. Let’s start with the basics.
Learnt: I have learnt that I have finished the adjustments to the navigation bar and the footer so
with this the home page would be completed very easily, I hoped to develop a way in which I would
use for these sorts of things and so by doing so I hope to develop the needed aspects for the tasks at
hand, I hope to now develop these aspects but I will need to do this task in order for me to move on
and make these aspects work and allow me to see if all of the aspects covered before the deadline.
20/3/17
mobile after all of that is done, I plan on completing the home page and maybe start implementing
aspects into the products page.
So, I began the file by making sure that everything is working on the fraction page before I started to
devilling deep into I haven’t used this software since beta so they could have added something in
after I worked on it after the launch of the published version of the product. Lucky there doesn't
seem to be any changes since my last use of the product so I carried on with the creation of the wire
frame.
Evidence:
So, begun on the home page and I took about half an hour in adding in all of the needed code since I
had to link all of the different sections together like java script, ccs and the html all together but then
I was ready to go and develop the look and feel of the site and so with this I quickly added in the
needed aspects since I had already done one I found creating the second one just so easy since I
wasn't testing to see if the code would work instead I use this sort thing for the needed aspect which
I would need to develop on and use this for what I will be able seek out and adjust if I need to
correct these sorts of things and so by doing this I will be able to create all sorts of aspects which I
feel needed to be covered when I develop these sorts of thing but I would need to focus on this
otherwise I can't really focus on much and so by doing this I feel that having a sort of styling thing it
just makes things a lot easier for me to focus on and develop.
I began by creating the navigation bar also known as the head, which included the logo, title, drop
down categories, log-In, Sign-Up and search, for the time being I thought of keeping the logo a grey
circle with the words logo in the middle of it since I wanted to keep things simple until I created the
whole homepage, same for the title and search icon, since its unpractical, I didn't want to mess
about with all of the little details at the start of the creation of the wireframe because things could
change so I kept it simple and just carried on with the creation, below the nav bar there's the web
banner and I used lines to symbolize that there will be a graphic here later on when the site will be
created, at my work my mentor normally does this for graphics because for designers it tells us that
there will something going there and that the thickness of the lines doesn't matter but as long as
those lines are there it symbolizes that there will be some sort of imagery or animation going there.
Next, I added in some text over the call to action web banner, to show how the text would be shown
to a viewer and used in the way that it is to draw in the customer, I positioned the text to be 60px
away from the left side of the website since this is aligned with the left side of the logo as well I will
be calling this the gap edge, at my work this is used to create an edge for some content to keep
within the content line and not go off the edge since that would make the look of the website look
terrible and unprofessional. Next, I created three rectangle squares using the rectangle tool and
crossed the boxes to show that images would be placed within them and added in buttons to allow
the user some indication to go onto these games, the reason why these three games are at the top is
that these three games are either new releases or featured games on a deal within the store since
companies would pay for their games to be at the front of the store and want as many people to buy
the game as possible so having three slots creates a competition to gain those slots for a week or
two meaning that companies would compete with one another to get one of those slots, raising the
price and allowing Fire Ice Gaming to earn a few dealerships with different companies expanding
their trade and franchising around the world about their website. Next is the new realises this is
where customers can view 12 different games that have been recently added to Fire Ice Gaming
allowing small indie companies a shine in the spot light on the homepage of Fire Ice Gaming. I have
done 12 since there is a wide range of games being realised every week so having about 12 seemed
reasonable, I did the title of the game on the front with a bit of imagery shown by the crosses on the
first 3 and on the fourth box I have done a rolled over version that would use a darkened overall of
the original imagery of the game and remove the title of the game as well a bit more information
about the game and the price of the game as well since, instead of wasting time I went on to just
using some text to show that all of these boxes were for game titles and placed the text in the centre
of the boxes, I then went on to add in the title text for these two new sections at a font size of 18
since that size isn't too overwhelming to read and not too small to read, next on my list of things to
do was spacing I had to make sure that the spacing between the banner was at least 60px or more
so that it didn't seem like all of the content was crammed together and the same for the gap
between featured games and new games so spacing between the titles of sub sections meaning that
what I do here must apply to other parts of the website since keeping consistent is key for website
creation.
Then I went on to creating the next part of the website which was the fire ice sign up to a fraction
section that allows users to pick fire or ice and get deals off particular games and allow users to vote
for games on their fire/ice rating creating a sense of what a fire game looks like and what an ice
game looks like, for this I will use two boxes that has a short description and comparison part to see
which fraction is more like you and aligns with your sort of games to draw in the customer. I will be
keeping the titles to a font size of 18 and the text size a 12 or 14 depending on what type of content
it is, as for the sign-up buttons I will be using size 24 font for that part so that it draws in customers
to want to sign up to a fraction. Next on my list of things to do was the game charts for the two
fractions and the serenity game chart, the serenity games are picked by staff but this idea is still in
beta in my mind and not set in stone, so it could change so I will add it in but not set on the idea of it
just yet. Moving back onto the charts I have kept it to three for each fraction since having more than
3 will take up more time and effort for the Fire Ice Gaming team to deal with and three is a nice
number to use since things like the Olympics use three winners for bronze, silver and gold so I am
hoping to implement this into the website and the style that I am going to develop for Fire Ice
Gaming. I need to adjust the width of the boxes as you can see on the image so that the boxes reach
the content edge and creates a line of where content can go and where the edge is, as for the
spacing between the boxes I have kept the spacing as 25xp since this seems a very reasonable size
between each box making all of the content not seem too crammed together.
Moving onto lower part of the home page this is where I was hoping to add in a web banner to
adverse smaller parts of the website such as esports or gaming company news such as new ideas or
beta keys, I began this particular section by having a grey background with a cross to indicate that
there will be some sort of graphical content to be placed there once that was done I added in arrows
to remind me to know where to place arrows not in that particular spot but to add arrows in once
complete with that done I went onto the text part so starting off with the title I picked this size to be
24 since it was going to be used as a title on a web banner to draw in viewers since this above the
average size I didn't want to make it a big deal so I will be just limiting this to banners so that its
more outstanding to the viewer ad draw in a crowd of viewers about the topic although it is located
near the bottom of the page, after going over the title I went onto looking into sub text to add a bit
more detail into this particular topic I kept this font size at 12-14xp because I want to keep
consistent throughout the wireframe designs. I then added in a button to allow the viewer an
indication that you can click on the button and it will take the viewer to the full report. After looking
at the web banner I thought of idea to add to the web banner to make it better which is pagination
to allow users see what report they are viewing on which section and see which report they are on
in the rotation of the pagination. Next section is a bit about the Fire Ice Gaming and some
information that is related to how the company was formed as well as a video to go with it. So, I
added in a play button with some text underneath to indicate what the video is and is about, I have
set the text size to 14 since I felt like that seemed to be a reasonable size for text and keeps in line
with all of the other font size on this page, I also set the size of the title to 18 since that is the same
size as the other title font sizes. So back on with spacing I set the size of the rectangle size to... since
that seemed reasonable and cover the content that was there on that sub section, I think that I
could have added a few more pixels to balance out the space around the edges of rectangle. So, for
the width edges I did 25xp on the sides and the top and bottom of the spacing would be 25xp as well
so that it's all equal and looks better for the viewer to view and feel more appealing to the viewer.
The last two parts of the home page is the Fire Ice Gaming Blog and footer, so starting off with the
Fire Ice Gaming Blog, this is where users can add in particular topic that they want to share and talk
about with the community so I had an idea of using cards to show users ideas so I designed the cards
to be 225xp high and 120xp wide so it creates a perfect square for the imagery which is represented
by grey background and a cross, with one side of the card being used for imagery and the other side
containing a link and the title as well as some text to explain what the topic is about. The spacing I
used in between each of the cards was 20xp since I wanted the cards to be close and for the text I
placed it the title 10xp away from the imagery and the link 20xp from the button of the card and
20xp away from the left side of the card for both link and title so that they are both aligned so once
that was done I made sure the bottom part of the card had a stroke line around the card so the
viewer can tell how big the card is and can very unclear see what part is the card and what part isn't.
Next part is the footer I started off by using the rectangle tool to create a rectangle that would cover
the width of the webpage and but have 50xp of height away from the blog report cards, after I
figured out the size I wanted it to be I then went onto think of what I could add onto the footer and
with this I thought of added in a call button and a request a call back button for users to do a call
over the internet and allow users to call customer services if needed but I will have to ask the click if
it will needed or not so this idea is still in beta and using these as buttons I find is the most effective
way of use on a website and setting the button colour as a slightly dark colour makes it seem a good
way of letting users see that it’s a button but it's not that too important. Moving onto the footer I set
the footer up to have different sections with titles and then a line to show some sort of boarder
between the title of the section of links and the links, so for example Your Store, Games and
Software will all be under main pages, pages such Privacy & Cookie Policy, Terms & Conditions will
be placed under legal so pages and contact information is what I will putting in the footer. So I began
by adding the link topic title and text to symbolize the place where the links would be placed using
the text tool and with 25xp space between each link (down) and a 115xp gap between each link
topic, once I did that I used the grouping tool to group each topic together so that moving each topic
about would be easier, after that I selected all of the groups and moved these to the left side of the
UI design since on the right I would be creating the newsletter signup and adding in the social media
icons, I began by creating a rectangle using the rectangle tool with a width of 350xp and a height of
85px this would do for a template design and size could be adjusted at a future date, once that done
I went on to adding in the rounded corners which is at a size of 24 and then added in the text to tell
the user what to do and using some sample text to fill in space. Then for the last part of the footer
was the social media icons so I gathered icons like twitter, Facebook, YouTube and even google+
once done I set the colour of these icons to a light shade of grey since this UI is still set as a template
but these will be white once the UI of the website is conformed.
Once the creation was complete I added in some assets such as colours, font family and symbols
(title, logo and screen icons), I did this by going on the view section at the top and then click on
assets this allows to pick up assets that have been set into the document so I placed all that I
needed onto one page and then deleted the page once all of the assets had been uploaded onto the
assets tab, so that I will be ready in for the all go once the client a proves of the UI and assets I have
creates, but I will be holding back a bit now on the development of Fire Ice Gaming since there isn't
really much I can do unless Fire Ice Gaming would like a to design a mobile website UI for them then
I would happily design that but I will have to a skype talk with them about how this will affect our
deal with Fire Ice Gaming since mobile website develop is an addon from our original deal with the
integration and import of different media formats.
Learnt: I have learnt that I have almost finished the home page due to parts being very easy to find
and implement into the page. However, the next stage in which I will need to focus on the video
section which I think will need to changes and adjustments to make sure that this works correctly
and perfectly with the page otherwise this could go horribly wrong.
23/3/17
mobile after all of that is done, I plan on completing the home page since I have already
implemented the aspects I needed for the products page, and maybe if I have time begin on the
categories page.
Evidence:
I moved swiftly onto this visibility page due to me thinking more time than I already had in order to
complete the project but this its quick thinking came quick typing allowing me to adjust the ccs, html
and JavaScript to the point of where I would need some particular aspects to be cover in order for
these sorts of things will need to be adjusted and fulfilled in order for me to carry on with what I
wanted to do with the video and fraction sign-up for this I would need to drag and drop.
Next, I added in some text over the call to action web banner, to show how the text would be shown
to a viewer and used in the way that it is to draw in the customer, I positioned the text to be 60px
away from the left side of the website since this is aligned with the left side of the logo as well I will
be calling this the gap edge, at my work this is used to create an edge for some content to keep
within the content line and not go off the edge since that would make the look of the website look
terrible and unprofessional. Next, I created three rectangle squares using the rectangle tool and
crossed the boxes to show that images would be placed within them and added in buttons to allow
the user some indication to go onto these games, the reason why these three games are at the top is
that these three games are either new releases or featured games on a deal within the store since
companies would pay for their games to be at the front of the store and want as many people to buy
the game as possible so having three slots creates a competition to gain those slots for a week or
two meaning that companies would compete with one another to get one of those slots, raising the
price and allowing Fire Ice Gaming to earn a few dealerships with different companies expanding
their trade and franchising around the world about their website. Next is the new realises this is
where customers can view 12 different games that have been recently added to Fire Ice Gaming
allowing small indie companies a shine in the spot light on the homepage of Fire Ice Gaming. I have
done 12 objects and properties since there is a wide range of games being realised every week so
having about 12 seemed reasonable, I did the title of the game on the front with a bit of imagery
shown by the crosses on the first 3 and on the fourth box I have done a rolled over version that
would use a darkened overall of the original imagery of the game and remove the title of the game
as well a bit more information about the game and the price of the game as well since, instead of
wasting time I went on to just using some text to show that all of these boxes were for game titles
and placed the text in the centre of the boxes, I then went on to add in the title text for these two
new sections at a font size of 18 since that size isn't too overwhelming to read and not too small to
read, next on my list of things to do was spacing I had to make sure that the spacing between the
banner was at least 60px or more so that it didn't seem like all of the content was crammed together
and the same for the gap between featured games and new games so spacing between the titles of
sub sections meaning that what I do here must apply to other parts of the website since keeping
consistent is key for website creation.
Then I went on to creating the next part of the website which was the review section that allows
users to pick fire or ice and get deals off particular games and allow users to vote for games on their
fire/ice rating creating a sense of what a fire game looks like and what an ice game looks like, for this
I will use two boxes that has a short description and comparison part to see what their thoughts
were on the game is more like you and aligns with your sort of games to draw in the customer. I will
be implementing radio buttons to allow users to write reviews and by keeping the titles to a font
size of 18 and the text size a 12 or 14 depending on what type of content it is, as for the sign-up
buttons I will be using size 24 font for that part so that it draws in customers to want to sign up to a
fraction. Next on my list of things to do was the game charts for the two fractions and the serenity
game chart, the serenity games are picked by staff but this idea is still in beta in my mind and not set
in stone, so it could change so I will add it in but not set on the idea of it just yet. Moving back onto
the charts I have kept it to three for each fraction since having more than 3 will take up more time
and effort for the Fire Ice Gaming team to deal with and three is a nice number to use since things
like the Olympics use three winners for bronze, silver and gold so I am hoping to implement this into
the website and the style that I am going to develop for Fire Ice Gaming. I need to adjust the width
of the boxes as you can see on the image so that the boxes reach the content edge and creates a line
of where content can go and where the edge is, as for the spacing between the boxes I have kept the
spacing as 25xp since this seems a very reasonable size between each box making all of the content
not seem too crammed together.
Moving onto lower part of the home page this is where I was hoping to add in a web banner to
adverse smaller interactivity parts of the website such as esports or gaming company news such as
new ideas or beta keys, I began this particular section by having a grey background with a cross to
indicate that there will be some sort of graphical content to be placed there once that was done I
added in arrows to remind me to know where to place arrows not in that particular spot but to add
arrows in once complete with that done I went onto the text part so starting off with the title I
picked this size to be 24 since it was going to be used as a title on a web banner to draw in viewers
since this above the average size I didn't want to make it a big deal so I will be just limiting this to
banners so that its more outstanding to the viewer ad draw in a crowd of viewers about the topic
although it is located near the bottom of the page, after going over the title I went onto looking into
sub text to add a bit more detail into this particular topic I kept this font size at 12-14xp because I
want to keep consistent throughout the wireframe designs. I then added in a button to allow the
viewer an indication that you can click on the button and it will take the viewer to the full report.
After looking at the web banner I thought of idea to add to the web banner to make it better which
is pagination to allow users see what report they are viewing on which section and see which report
they are on in the rotation of the pagination. Next section is a bit about the Fire Ice Gaming and
some information that is related to how the company was formed as well as a video to go with it. So,
I added in a play button with some text underneath to indicate what the video is and is about, I have
set the text size to 14 since I felt like that seemed to be a reasonable size for text and keeps in line
with all of the other font size on this page, I also set the size of the title to 18 since that is the same
size as the other title font sizes. So back on with spacing I set the size of the rectangle size to... since
that seemed reasonable and cover the content that was there on that sub section, I think that I
could have added a few more pixels to balance out the space around the edges of rectangle. So, for
the width edges I did 25xp on the sides and the top and bottom of the spacing would be 25xp as well
so that it's all equal and looks better for the viewer to view and feel more appealing to the viewer.
The last two parts of the home page is the Fire Ice Gaming Blog and footer with some
implementation of tick boxes, so starting off with the Fire Ice Gaming Blog, this is where users can
add in particular topic that they want to share and talk about with the community so I had an idea of
using cards to show users ideas so I designed the cards to be 225xp high and 120xp wide so it
creates a perfect square for the imagery which is represented by grey background and a cross, with
one side of the card being used for imagery and the other side containing a link and the title as well
as some text to explain what the topic is about. The spacing I used in between each of the cards was
20xp since I wanted the cards to be close and for the text I placed it the title 10xp away from the
imagery and the link 20xp from the button of the card and 20xp away from the left side of the card
for both link and title so that they are both aligned so once that was done I made sure the bottom
part of the card had a stroke line around the card so the viewer can tell how big the card is and can
very unclear see what part is the card and what part isn't. Next part is the footer I started off by
using the rectangle tool to create a rectangle that would cover the width of the webpage and but
have 50xp of height away from the blog report cards, after I figured out the size I wanted it to be I
then went onto think of what I could add onto the footer and with this I thought of added in a call
button and a request a call back button for users to do a call over the internet and allow users to call
customer services if needed but I will have to ask the click if it will needed or not so this idea is still in
beta and using these as buttons I find is the most effective way of use on a website and setting the
button colour as a slightly dark colour makes it seem a good way of letting users see that it’s a
button but it's not that too important. Moving onto the footer I set the footer up to have different
sections with titles and then a line to show some sort of boarder between the title of the section of
links and the links, so for example Your Store, Games and Software will all be under main pages,
pages such Privacy & Cookie Policy, Terms & Conditions will be placed under legal so pages and
contact information is what I will putting in the footer. So I began by adding the link topic title and
text to symbolize the place where the links would be placed using the text tool and with 25xp space
between each link (down) and a 115xp gap between each link topic, once I did that I used the
grouping tool to group each topic together so that moving each topic about would be easier, after
that I selected all of the groups and moved these to the left side of the UI design since on the right I
would be creating the newsletter signup and adding in the social media icons, I began by creating a
rectangle using the rectangle tool with a width of 350xp and a height of 85px this would do for a
template design and size could be adjusted at a future date, once that done I went on to adding in
the rounded corners which is at a size of 24 and then added in the text to tell the user what to do
and using some sample text to fill in space. Then for the last part of the footer was the social media
icons so I gathered icons like twitter, Facebook, YouTube and even google+ once done I set the
colour of these icons to a light shade of grey since this UI is still set as a template but these will be
white once the UI of the website is conformed.
frame content:
HTML frames allow authors to present documents in multiple views, which may be independent
windows or sub windows. Multiple views offer designers a way to keep certain information visible,
while other views are scrolled or replaced. For example, within the same window, one frame might
display a static banner, a second a navigation menu, and a third the main document that can be
scrolled through or replaced by navigating in the second frame.
check boxes:
<input> elements of type checkbox are rendered by default as square boxes that are checked
(ticked) when activated, like you might see in an official government paper form. They allow you to
select single values for submission in a form (or not).
radio buttons:
<input> elements of type radio are generally used in radio groups—collections of radio buttons
describing a set of related options. Only one radio button in a given group can be selected at the
same time. Radio buttons are typically rendered as small circles, which are filled or highlighted when
selected.
list menus:
The HTML <menu> element represents a group of commands that a user can perform or activate.
This includes both list menus, which might appear across the top of a screen, as well as context
menus, such as those that might appear underneath a button after it has been clicked.
Layers:
The HTML <layer> tag is used to position and animate (through scripting) elements in a page. A layer
can be thought of as a separate document that resides on top of the main one, all existing within
one window.
Naming:
The name attribute specifies a name for the element.
This name attribute can be used to reference the element in a JavaScript.
For form elements it is also used as a reference when the data is submitted,
For iframe element it can be used to target a form submission.
For the map element, the name attribute is associated with the <img>'s usemap attribute and
creates a relationship between the image and the map.
For the meta element, the name attribute specifies a name for the information/value of the content
attribute.
For the param element, the name attribute is used together with the value attribute to specify
parameters for the plugin specified with the <object> tag.
Nesting:
The easiest way to understand nesting is to think of HTML tags as boxes that hold your content. Your
content can include text, images, etc. HTML tags are the boxes around the content. Sometimes, you
need to places boxes inside of other boxes. Those "inner" boxes are nested inside of others.
If you have a block of text that you want bold inside a paragraph, you'll have two HTML elements as
well as the text itself.
Key frames:
The @keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent, or with the keywords "from" and "to", which
is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is
complete.
Objects:
The HTML <object> element represents an external resource, which can be treated as an image, a
nested browsing context, or a resource to be handled by a plugin.
Behaviours:
The behaviours functionality allows an administrator to create one more or behaviours. A behaviour
defines how fields behave for issues in a given project or issue context. Some examples of
behaviours are:
• Making a field mandatory depending on other data entered on the issue screen (i.e during an issue
creation or an issue transition)
• Making a field read-only dependent on user role or group
• Doing server-side validation of field data, before the issue screen is submitted
• Setting a field value dependent on other issue screen data
Once the creation was complete I added in some assets such as colours, font family and symbols
(title, logo and screen icons), I did this by going on the view section at the top and then click on
assets this allows to pick up assets that have been set into the document so I placed all that I
needed onto one page and then deleted the page once all of the assets had been uploaded onto the
assets tab, so that I will be ready in for the all go once the client a proves of the UI and assets I have
creates, but I will be holding back a bit now on the development of Fire Ice Gaming since there isn't
really much I can do unless Fire Ice Gaming would like a to design a mobile website UI for them then
I would happily design that but I will have to a skype talk with them about how this will affect our
deal with Fire Ice Gaming since mobile website develop is an addon from our original deal.
Learnt: I have learnt that I have almost finished the home page due to parts being very easy to find
and implement into the page. However, the next stage in which I will need to focus on the video
section which I think will need to changes and adjustments to make sure that this works correctly
and perfectly with the page otherwise this could go horribly wrong.
27/3/17
mobile after all of that is done, I plan on completing the home page since I have already
implemented the aspects I needed for the products page, and maybe if I have time begin on the
categories page.
Evidence:
Since most of the project is about complete now, it will allow me to look at particular aspects of the
site and adjust these parts so that these are useable for people to use and have as a useful aspect
when developing this sort of site and so with this I can create a range of different designs using this
sort of aspect I had in mind and in doing so it will allow me to see and develop their very own sort of
thing that would allow this sort of code to be used for a wide range of aspects that are used for a
few thing one of these aspects being the integration of me and adding in material design elements
that are useful but will need help if we are going to be developing a wide range of aspects that I will
need to look closely into and sort these things out but there are a few things that will need to be
taken care of if this is to work out, one of these being that I make sure all of the aspects I implement
work and can flow between pages but for me to do this first I will need to seek out different aspects
and use these as building blocks for what is next on my list of things to do and so by doing this I plan
on being used by a wide range of ideas will need to be used for this sort of stuff but I will need to use
this sort of aspect for some reason.
But the aspects I plan on using are what I need to been looking closer into for this to work as well as
what I need to do in order to complete linking and the other aspects.
These sections will also allow the user to change so aspects that will need to be looked at when I
have a closer look into the code, however these aspects I was going over would need adjusting for
me to allow myself to develop the needed points to make sure that aspects like this work and in a
way where it would be too much of a hassle in doing so and so with this I want to develop the
needed parts for sections of the page such as the search section and the news/article section.
As you can see from the work I have been working on it requires a lot of JavaScript and ccs work
since each element has to work effectively, but there are tools that I have learnt from doing this
website that don’t always work like the YouTube videos so I have to do it through Vimeo key frames
instead, I can do this media aspect for particular parts to show the client via using some code I was
able to develop over a few days as shown below:
<div class="Ekko Promo Video Card">
<article class="card blog-post post-format-video shadow-z-1">
<div class="card-image">
<div class="video-wrap">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="http://player.vimeo.com/video/131301107"></iframe>
</div>
</div>
</div>
<div class="card-content pd-md">
<div class="entry-metas hidden-xxs">
<span class="posted-on">13 April 2018</span>
<span class="byline">by League of Legends</span>
<span class="cats">in Games</span>
</div>
<h3 class="title"><a href="#">Ekko: The Boy Who Shattered Time</a></h3>
<p class="mg-t-sm no-mg-b pd-t-xs">A prodigy from the rough streets of Zaun, Ekko
manipulates time to twist any situation to his advantage. Using his own invention, the Zero Drive, he
explores the branching possibilities of reality to craft the perfect moment.</p>
</div>
<div class="card-footer pd-md no-pd-t">
<a class="subtext" href="#">
<span class="text-primary">Read More</span>
</a>
<span class="meta text-light">
<i class="material-icons">chat_bubble_outline</i>56
</span>
</div>
</article>
</div>
As you can see I used a wide range of css aspects for this sort of card since these elements do look
very appealing and neat for users and will require a wide range of aspects in order for it to work and
be adjusted for me to work on and so with this I can develop the style sheet but I must say I will
need to develop the text a little bit more for this to work otherwise I feel the reader may lose
interest. after reading about the fraction sign-up and so with this I will have to develop the needed
parts in order for the reader to keep interested in what stories are there to talk about and how this
will affect the needed parts.
I think that there will be a needed aspect that will need to be cover in order for this to work and so
by doing this it allows me to see where I need improvement and what I could do to develop the
needed parts that I could do with working on and how these parts are used for the site with this I
can create a needed part for the site which will be the rest of the blog posts so the quote and the
slideshow imagery post and so with this I can create the needed parts for these aspects and will
need to be developing the needed parts for this to works and why this is important for the
development of the site and so with this I shall begin the development of the google maps site this
will require myself to gather a API key and develop the needed parts for this site but apart from that
it should be easy to finish up on, this will require java script and some ccs work for this to be done
but apart from that the html should be very easy.
So currently this this how much I have developed:
<div class="Google Map">
<div id="map" style="width:1450px;height:600px"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwDsFe0ksP5QayGgry-
qyLGZPqYxxjKGQ&callback=myMap"></script>
</div>
By doing this I can adjust the java script within the sources document and still develop the needed
parts for the site and so with this I can develop all of the needed part for this to work and develop on
with this site but I feel that the needed work will not be enough for me to develop on and will
require myself to develop this code a little bit more in order for this to be complete and so with this I
can truly implement the needed parts for this section but it will require me to develop the needed
parts but I could do with ease once I get the ccs up and running since so sections of that still need
working on and so with this I shall do my final touches of the site and do the web banner.
With the web banner I wanted it to have to abilities to make the arrows disappear and reappear
animation once a user hovers over the web banner and so with that I have be able to do that very
easily with this work and moving onto the number of cards I have added for this web banner I was
able to create a grand total of 3... I know right three? Ye well I didn't want the user to feel to
overwhelmed with the cool features of the site otherwise it may feel like there is a bit too much
content for this to work out and so with that I was able to these web banners using this code:
div class="web-banner">
<article class="card blog-post post-format-gallery shadow-z-1">
<div class="card-image">
<div class="carousel-nav">
<a class="btn prev carouselPrev">
<i class="fa fa-angle-left"></i>
</a>
<a class="btn next carouselNext">
<i class="fa fa-angle-right"></i>

</a>
</div>
<div class="owl-carousel owl-theme">
<img class="item activator" src="assets/img/Web_banner_01.png" alt="">
</div>
</div>
</article>
</div>
Using the article classes I was able to create a perfect aspect for what I wanted to develop the
needed aspects for this site and so by doing so I can design and develop the needed parts for me to
be ready for this to work and how to do something like this for the user to work with and how it's
important for myself and some other aspects for me to be able to develop the needed points.
But as you can see from the development of the ccs these aspects too me a very long time to create,
with a team of people this would be a lot faster and easier.
Here's the ccs if you were wondering why and what I am on about:
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
/* position relative and z-index fix webkit rendering fonts issue */
position: relative;
z-index: 1; }
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y; }
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0; }
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
/* fix for flashing background */
-webkit-transform: translate3d(0px, 0px, 0px); }
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }
.owl-carousel .owl-item img {
display: block;
width: 100%;
-webkit-transform-style: preserve-3d; }
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
display: none; }
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel.owl-loaded {
display: block; }
.owl-carousel.owl-loading {
opacity: 0;
display: block; }
.owl-carousel.owl-hidden {
opacity: 0; }
.owl-carousel.owl-refresh .owl-item {
display: none; }
.owl-carousel.owl-drag .owl-item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel.owl-grab {
cursor: move;
cursor: grab; }
.owl-carousel.owl-rtl {
direction: rtl; }
.owl-carousel.owl-rtl .owl-item {
float: right; }
/* No Js */
.no-js .owl-carousel {
display: block; }
/*
* Owl Carousel - Animate Plugin
*/
.owl-carousel .animated {
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; }
.owl-carousel .owl-animated-in {
z-index: 0; }
.owl-carousel .owl-animated-out {
z-index: 1; }
.owl-carousel .fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut; }
@-webkit-keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
/*
* Owl Carousel - Auto Height Plugin
*/
.owl-height {
transition: height 500ms ease-in-out; }
/*
* Owl Carousel - Lazy Load Plugin
*/
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity 400ms ease; }
.owl-carousel .owl-item img.owl-lazy {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; }
/*
* Owl Carousel - Video Plugin
*/
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000; }
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url("owl.video.play.png") no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: -webkit-transform 100ms ease;
transition: transform 100ms ease; }
.owl-carousel .owl-video-play-icon:hover {
-webkit-transform: scale(1.3, 1.3);
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3); }
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
display: none; }
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity 400ms ease; }
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%; }
You may be wondering owl carousel but I make up names as I go along to help me remember them
otherwise it's just confusing with digits and so with this code I am able to create a carousel for the
web banner and develop the needed parts I wanted to cover and look closely at when developing
the needed parts of the work, and so with that I finish off the development of the fire ice gaming
website if required from the client I am able to create more pages if needed for the client and have
control the site management and development.
Learnt: I have learnt that I have finished the whole website and have been able to gather wide range
of skills by doing these aspects of work so that I can develop the needed parts for my though the
development of the needed parts and how this is going to be used for my users work and why this is
such a key part of work for me to be able to do so and why its important for this topic and how it will
affect my work later on in life.

Diary For Mike

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Diary For Mike

Uploaded by

Copyright:

Available Formats

Diary – Ivan Foy

I began the lesson by looking over my proposal and

Opened up Dreamweaver and clicked on

The <script> tag is used to define a client-side script (JavaScript).

I went off to develop the first section which

<input name="trapit" style="display:none;" type="text" value="">

<img anima-src="./img/fraction page group 4.png" class="group4"

<input name="trapit" style="display:none;" type="text" value="">

With the foot code done for now, I planned

So, I moved onto the next part which is the

I began the lesson by having a look

• Using proprietary HTML extensions

Now I have finally moved onto the style

background : rgba(255, 255, 255, 1.0);

rgb(red, green, blue)

Moving to the next section of ccs

.fraction-page .Webbanner .Webbanner_Base {

background : rgba(255, 255, 255, 0.0);

font-family : "Helvetica", Helvetica, Arial, serif;

color : rgba(0, 0, 0, 1.0);

With all of that done I go off and

Text: HTML also defines special

Formatting elements were designed to display special types of text:

• <b> - Bold text

So, with all of the images adjusted

Metadata is data (information) about data.

Links to established sites:

HTML links are hyperlinks.

You can click on a link and jump to another document.

For a website - <a href="https://www.google.co.uk/">LINK TO GOOGLE</a>

For a document - <a href="Products Page.html">LINK TO PRODUCT PAGE</a>

<img src="Socailbuttons.png" width="145" height="126" alt="Social Buttons"

Integration and import of different media formats:

The name attribute specifies a name for the element.

This name attribute can be used to reference the element in a JavaScript.

For iframe element it can be used to target a form submission.

The @keyframes rule specifies the animation code.

<div class="Ekko Promo Video Card">

<article class="card blog-post post-format-video shadow-z-1">

<div class="embed-responsive embed-responsive-16by9">

<div class="entry-metas hidden-xxs">

<span class="posted-on">13 April 2018</span>

<span class="byline">by League of Legends</span>

<span class="cats">in Games</span>

<h3 class="title"><a href="#">Ekko: The Boy Who Shattered Time</a></h3>

<div class="card-footer pd-md no-pd-t">

<a class="subtext" href="#">

<span class="text-primary">Read More</span>

<span class="meta text-light">

So currently this this how much I have developed:

<div class="Google Map">

<div id="map" style="width:1450px;height:600px"></div>

center: new google.maps.LatLng(51.5, -0.12),

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

<article class="card blog-post post-format-gallery shadow-z-1">

<a class="btn prev carouselPrev">

<i class="fa fa-angle-left"></i>

<a class="btn next carouselNext">

<i class="fa fa-angle-right"></i>

<div class="owl-carousel owl-theme">

<img class="item activator" src="assets/img/Web_banner_01.png" alt="">

<img class="item activator" src="assets/img/Web_banner_02.png" alt="">

<img class="item activator" src="assets/img/Web_banner_03.png" alt="">