Throughout my whole website I used my own font. I did this through a CSS rule, before CSS3 we could only use a certain amount of fonts, but CSS3 allowed us to use our own.
I used one called OratorStd.Otf, this is kind of typewriter font I felt like this represented myself quite well.
The colour scheme of my website, is more or less black and white with a few greys thrown in, I used black for text, and different colours for my header.
I used a fixed element on my nav bar, this is so it will follow you throughout the whole website, not matter where you scroll too.
Wednesday, 12 February 2014
My website
Taking what I've learnt from research I have compiled my own portfolio website.
With good use of JavaScript and jQuery I've managed to create a portfolio website that I am proud off.
This described what I have done, and this is the final result
With good use of JavaScript and jQuery I've managed to create a portfolio website that I am proud off.
When you first load up the website, it will show this page. This page tells you about who I am, and what I can do. I have put my skills within the same page, when you click the arrow, on 'Who Am I?' it will then scroll up and you will get my skill set, this tells you what I am able to do. I have used jQuery Slide toggle effect to achieve the effect of the page scrolling up.
On my Portfolio page, ive used a jQuery library called fancybox this allows me to display my own images within a Lightbox.
When you first get to my Portfolio you will be see some images which I have taken, these are attached to jQuery library called fancybox. Fancybox allows you import your own images into the library, add the code required to make Fancybox work, you need 2 files in your main website hub, one called Thumbnails and one called FullScreen, this allows you to organise what is a thumbnail and what you want fullscreened.
Using this screen you are able to look through my photography work.
I have created a web design section, and a audio visual section within the web design section I have used Fancybox again, just so i am able to show some work.
In my Audio Visual section I've included my work that I have done, with links from YouTube, however they aren't working, this is to do with YouTubes side rather than mine.
Within my contact page I have used HTML mail:to function so people are able to email me, I did first include my phone number, but then thought different due to spambots. I have included links to my FaceBook and Twitter.
Everything is clickable and links are working. The phone number has a slideToggle within it so you are able to click to show and hide.
Sunday, 9 February 2014
HTML5, CSS Validation
Before you put anything online you should validate your code to ensure that there isn't any mistakes.
To do this you go to http://validator.w3.org/
This is mainly for HTML, XHTML, XML and HTML5.
Once here you should upload your file onto the website and hit validate, once you have done this it will pick up any mistakes within your code.
You must always ensure you do this otherwise, you might be putting broken code on to the web.
You are able to validate your CSS using http://jigsaw.w3.org/css-validator/validator
The same applies for this one as the HTML validator, you upload your file, and it will check for errors.
To do this you go to http://validator.w3.org/
This is mainly for HTML, XHTML, XML and HTML5.
Once here you should upload your file onto the website and hit validate, once you have done this it will pick up any mistakes within your code.
You must always ensure you do this otherwise, you might be putting broken code on to the web.
You are able to validate your CSS using http://jigsaw.w3.org/css-validator/validator
The same applies for this one as the HTML validator, you upload your file, and it will check for errors.
jQuery Plugins
jQuery Plugins are used for all sorts of things,
They are used to make our websites more visually stunning, allowing us to use what someone else has created but change it to customise onto our own sites.
You can find a jQuery Plugin for more or less anything out there, some will be more easier to configure than others however I found if you are persistent you can get the majority of them to work.
Often enough they will come with instructions to set it up, although sometimes they aren't very clear. However you might find one which doesn't work for you but not to worry, there will be more out there which will do the same thing.
Some plugins are easier than others, the trick is to start easy, and work your ways towards the more complexed ones.
They are used to make our websites more visually stunning, allowing us to use what someone else has created but change it to customise onto our own sites.
You can find a jQuery Plugin for more or less anything out there, some will be more easier to configure than others however I found if you are persistent you can get the majority of them to work.
Often enough they will come with instructions to set it up, although sometimes they aren't very clear. However you might find one which doesn't work for you but not to worry, there will be more out there which will do the same thing.
Some plugins are easier than others, the trick is to start easy, and work your ways towards the more complexed ones.
Opacity and Font Rules!
CSS3 has now allowed us to use our own fonts on the web.
This means we now aren't limited to certain styles on the web, and we can set our own font family.
There is a whole range of fonts on www.dafont.com, just ensure you have a otf file for that font. Once the font has been downloaded be sure to put it within your root for your website.
Create a rule in CSS this is done by using a '@' after you have added this then continue to add 'font-face', proceed to add
font-family: (Add the name of your font here)
You then need to provide the source for this font this means you need to add
src: url(YourFont.Otf);
Using CSS we are able to change opacity of objects within our HTML, meaning the personalised text you have just created you are able to create a pseudo class to enable this change opacity when hovered, visited etc.
This is simple done by changing a opacity, which is done like;
opacity: 0.5;
This will set the opacity to .5 lower than the original colour if this is used well you can create very nice effects.
This means we now aren't limited to certain styles on the web, and we can set our own font family.
There is a whole range of fonts on www.dafont.com, just ensure you have a otf file for that font. Once the font has been downloaded be sure to put it within your root for your website.
Create a rule in CSS this is done by using a '@' after you have added this then continue to add 'font-face', proceed to add
font-family: (Add the name of your font here)
You then need to provide the source for this font this means you need to add
src: url(YourFont.Otf);
Using CSS we are able to change opacity of objects within our HTML, meaning the personalised text you have just created you are able to create a pseudo class to enable this change opacity when hovered, visited etc.
This is simple done by changing a opacity, which is done like;
opacity: 0.5;
This will set the opacity to .5 lower than the original colour if this is used well you can create very nice effects.
Sunday, 29 December 2013
CSS Positioning
CSS is such a powerful tool for web design it allows you to customise a website and create pretty cool effects.
Positioning is done through CSS, there is 3 types of positioning you can have these are;
Fixed
- Fixed fixes something into position so wherever you scroll on the screen, the object which is fixed into position and will stay in the position you have set.
Absolute
- When you set an object to use absolute positioning it uses the position within the browser, ideally you would use absolute position within relative positioning, otherwise you may find the bigger the computer screen or browser screen the more your object moves around.
Relative
- When you place something with HTML it automatically gains a position, using fixed positioning you are able to move it around without it losing its original position.
Positioning is done through CSS, there is 3 types of positioning you can have these are;
Fixed
- Fixed fixes something into position so wherever you scroll on the screen, the object which is fixed into position and will stay in the position you have set.
Absolute
- When you set an object to use absolute positioning it uses the position within the browser, ideally you would use absolute position within relative positioning, otherwise you may find the bigger the computer screen or browser screen the more your object moves around.
Relative
- When you place something with HTML it automatically gains a position, using fixed positioning you are able to move it around without it losing its original position.
Sunday, 22 December 2013
Jquery Effects Research
Jquery is a big part of our websites, I wanted to include what I could into it.
I need to look at jQuery effects, although I know some I'm not 100% on how to implement them.
Smart use of jQuery will allow for a site to look visually amazing.
Jquery has many effects
such as;
jQuery Hide/Show
- This allows you to hide and show a object, these can be set to onclick functions amongst others. You are able to control the speed that something will hide or show by using the syntax 'fast' or 'slow'.
Fade
- Similar to what Hide/show fade allows you to fade a object out or in. You can also control this by using the same syntax 'fast' or 'slow'. Fade also allows you add millinseconds within the script, meaning you can control how many milliseconds after it will fade in.
Slide
- Slide lets something slide down and up, you are able to use the same values throughout this either "slow", "fast" or millisecond.
Animation
- Animation allows you to set parameters to animate a piece of text, you have to first set the position you want it move, and then how much you want it to move by.
Stop()
- Stop does what says, it will stop a animation, it can be done using a stopAll parameter which specifies which will stop everything in the queue. There is also a goToEnd parameter which specifies whether or not to complete the current animation immediately.
Callback
- JavaScript statements are executed by line. However, with effects, the next line of code can be run even though the effect isn't finished. A callback function is executed after the current effect is finished.
Chaining
- Chaining allows you to chain multiple jQuery commands, one after the other, one the same elements(s). To chain an action, you simple append the action to the previous action.
I need to look at jQuery effects, although I know some I'm not 100% on how to implement them.
Smart use of jQuery will allow for a site to look visually amazing.
Jquery has many effects
such as;
jQuery Hide/Show
- This allows you to hide and show a object, these can be set to onclick functions amongst others. You are able to control the speed that something will hide or show by using the syntax 'fast' or 'slow'.
Fade
- Similar to what Hide/show fade allows you to fade a object out or in. You can also control this by using the same syntax 'fast' or 'slow'. Fade also allows you add millinseconds within the script, meaning you can control how many milliseconds after it will fade in.
Slide
- Slide lets something slide down and up, you are able to use the same values throughout this either "slow", "fast" or millisecond.
Animation
- Animation allows you to set parameters to animate a piece of text, you have to first set the position you want it move, and then how much you want it to move by.
Stop()
- Stop does what says, it will stop a animation, it can be done using a stopAll parameter which specifies which will stop everything in the queue. There is also a goToEnd parameter which specifies whether or not to complete the current animation immediately.
Callback
- JavaScript statements are executed by line. However, with effects, the next line of code can be run even though the effect isn't finished. A callback function is executed after the current effect is finished.
Chaining
- Chaining allows you to chain multiple jQuery commands, one after the other, one the same elements(s). To chain an action, you simple append the action to the previous action.
Subscribe to:
Posts (Atom)