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.

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.

Jquery Sliders

Whilst I've taken some time to think about how I want my portfolio website to look, one thing I have definitely decided on is that I want a jQuery slider within the portfolio page, so I am able to show off my photography work in a nice sleek and simple way.

I've used the jQuery function slideToggle within my website, however I need to research on how to create a image gallery, I am going to use the image gallery on the portfolio part of the page, allowing me to show my photography work off in a interactive gallery.

I've been playing with opacities through CSS for my navigation and have been able to use them to my own advantage to create a good looking navigation.

jQuery sliders allow us to show content through a slider. Sliders are often use for pictures, allowing us to see a bunch of pictures within a set div, which you can interact with using right and left arrows.

Portfolio Websites

For our assignment we have been asked to design our own portfolio websites, so that we have somewhere we can show off our own work.

Before I can start designing and developing my own websites I must analyze other peoples, from this I can decided personally what I like and what I dislike.

The first website I looked at was

http://www.weberica.net/web-design-en.html

Now for my this website is hugely visual and personally slightly over the top, although it does look very nice and you can tell there has been a lot of time put into this website.

The homepage has nothing but basic information on it, he mentions that his other website is in Croatian, when you press the portfolio tab you get directed to a separate page which is a jQuery gallery showing off all of the work he has done. Within the gallery you can click the image and it will enlarge, you are then able to navigate through the gallery using the arrow buttons at the side, there is also a link which will take you back to the homepage, on this guys website he also offers freebies of Photoshop templates he has created.

The second website I looked at was

http://alexarts.ru/en/index.html

This website has everything on it, it is visually stunning, it breaks the mould of a traditional website, by clever use of HTML5, CSS3, jQuery and JavaScript this website is only one page, but looks as if it could be 4-5 pages.

The designer has impeccable attention to detail which is extremely obvious throughout the whole website, this design is simplicity at its finest, Users are able to navigate through without getting lost due to it being only one page big, they can access all the information they need too in a obvious way.

When I create my portfolio website, I definitely will be using the style of website he has used, by this I mean breaking the mold of a traditional site, but still having a effective and well made website.