menian.eu

Portfolio Version 5.0

New design, changed content on pages, changed pictures and text on blog posts. I had to make this redesign as the older was from template with small tweeks (made by ProductiveDreams, the theme was BlakMagik). Now, I took a theme called constructor and changed its design completely. This is my first custom hand crafter theme for Wordpress. While doing it I learned a lot more about this CMS.

First I started by brainstorming ideas on a piece of paper. Most of the ideas were from older impressions I had on other web sites, articles or books. For a pity, I couldn’t release all of them, but the most important are present.

Here is extended explanation of the features in this 5-th version of my portfolio – less things in quantity but better in quality, I don’t want to flood my viewers with useless and not impressive works – browser and screen compatibility. The web site was tested on the following browsers and versions:

Safari 3.2.1,

FireFox 3.5.8, 3.0.11, 3.6.8

Google Chrome 4

Opera 10.10

Internet Explorer 6, 7, 8

That's how the web site was looked like from PhotoShop

The only problems that are present are under Internet Explorer 6, which doesn’t support png images and shows them with a background color on the transparent part. In Internet Explorer 7 is fixed this problem, but the solution for version 6 is to used gif instead of png images. Anyway, since there is very small number of people using this version of IE nowadays, I’ve skipped fixing that problem. There were some other bugs that I had to fix. One that is not so important is the round corners of the container box. If you are with Internet Explorer (no matter which version), you will not see any rounded corners. I’ve considered this as not so big problem and left it as it is. More important is the content than the design.

The web site is without any problem on the following resolutions: 1024 x 768, 1152 x 864, 1280 x 1024. You will have to scroll horizontally, on smaller than 1024 x 768. Still, there is almost nobody that uses 800 x 600 screen resolution.

For developers: maybe you wonder how I’ve installed all those browsers and different versions. Well, I keep only FireFox and IE on my computer. All the rest, were started from http://spoon.net/browsers/. Spoon is a quite useful web site for testing web sites on different browsers without having to install them.

Somebody might want to print a page from my portfolio. There is a special css style for this media, which makes the display value of the header, footer and other useless parts (on print) hidden. To test this style you can simple open the web site, go to File -> Print Preview. I haven’t created that style, it’s from the theme by default.

I made a version for mobile phones which is with completely different design from the one you will see on computer. The content is different to some extend as well. The idea is to make it faster to load. This version was made thanks to the free tool onbile (http://www.onbile.com/

The logos in the design section are made by usind cu3er (http://getcu3er.com/). This is a free 3D flash image slider. I spent quite some time exploring, learning and experimenting with it. I hope you like the result. Similar product on the web is the piecemaker (http://www.modularweb.net/piecemaker/).

The graphic design in the design section is presented by using the plugin for WordPress called FlippingBook (http://pageflipgallery.com/

The prepress in the design section is presented by using a web site called issuu. This is a web site for storing and sharing pdf and other documents in interactive way. Similar to it is SlideShare (http://www.slideshare.net/

There is a feature I tried to implement but got everything quite wrong so it was disabled. There is a css style that targets only external links and can place a small icon to each external link in a way to inform the user that, you see it will open in a new page. What got wrong in my case was that that icon appeared next to each image, too. If you want to know the fix – contact me, I got it in another web site. Here is the starting code to use for the trick (even works in IE):

a[href^="http:"]{background-image: url(external.png);

background-repeat: no-repeat;

background-position: right center;

padding-right: 20px;}

Header. The header was the hardest part to tweek. One of the reasons was that it was the first thing I started to work on, and I still didn’t know that much about making new themes under WordPress. The organs you see are connected with different senses – eyes for visualizing the design, brain – coding, the heart is connected with personality and the core of it all (that’s why it’s named About). I’m sure that this menu makes the web site unique and easier to remember. The organs are from freely distributed brush set. The red color is not incidental, in that day when I was making the menu, my nose started bleeding and after taking a picture of the blood and using some filters for getting more realistic color balance. I took the hex code (fa4225) from the picture and used it in the web site.

The theme of the web site is Nature. The idea is to make the visitor more relaxed, and to take him far from the computer and technical world, into the comfort of nature, where he/she probably goes with the family on holidays and free days.

The final result. I’m not that proud of the final result, because I was looking at it for many hours and I’m already tired of it. I can evaluate it as humble and average. What about you? Please, write a comment and let me know what do you like and what not.

What’s next: In the next days I’ll be working on a new logo, custom 404 error page, business card and I will dive into the ocean of server based coding.

General about Film production

This week we were studying at a Film Schol in Lyngby, Copenhagen. They were teaching us only film theory, showing us some short parts of movies and discussing them, but there was no filming, shooting, or teaching of programs to edit.

Anyway, you know that you need first some theory to start work in certain area, so it was alright.

Here I think to rewrite my notes from the note book I took on the second day. There are some cool things about movies that I haven’t thought about before. So, here we go!

Cause & effect

There is something happening, this something makes other characters to act in other way they would act otherwise. The first thing is cause, the second an effect. Here is an example: small kid goes in the middle of a high way, a dude who sees it runs to catch it and put in a safe place. This buddy wouldn’t go to risk his life, if it’s not the cause of the kid, so that’s making an effect that he acts like hero. To get a better picture I’ll tell you the example they gave us (it’s better).

Thief breaks into a house. (cause)
Woman comes back from work (cause)
The thief hides in the bath (effect) – because we saw the woman coming home
The woman goes to take a shower (cause)
The thief kills the woman (effect) – if she wasn’t going to take a shower he wouldn’t kill her

So that’s kind of sequence of a movie. Kind of a communication between the characters.

Types of situations

Dramatic ommision: somebody is going to do something bad (“man hangs his hand on the button of a bomb”)

Threat: something bad is going to happen, no person (“a meteorite is going to hit the Sun”)

Must / cannot: there is no other way, dude (“a police man must save a hostage”, “the breaks don’t work when he drives with 200km/h”)

Opposition: two sides against each other (“Fred vs Jason”, “Alian vs Predator”, a movie about certain sport)

When somebody asks about a what’s the dramatic question of a movie, you can answer that it’s a opposition of the elfes against the bad n ugly orks for example, or that it’s a dramatic omition where bad terrorists are going to drop a bomb on a big city etc.

The dramatic question can have 3 possible solutions – positive, negative and the 3-rd solution. The positive could be, killing the terrorists and preventing the attack, negative – BOOM, and the 3-rd way is most interesting and unexpected, for example dropping the bomb, but the town is evacuated already and there is no body to day, or the bomb is turn aside and fells in water or just other place. Through the whole movie there got to be kind of balance between possibility of avoiding the attach and lose, so that will keep the viewer interested. Imagine you got a small terrorist dude, against a big squad of FBI or SWAT, SAS soldiers – that’s going to be boring.

Give an expected ending (all those American action movies are so boring for me, so easy to predict everything, like watching one and the same movie).

Commercials

Addressing human values – accosiations = feelings, linking emotions to a product

Value categories: personal, relationship, social, global, ethical. Brand certain emotions n values with certain product.

Target group: old customers, competative consumer, new consumer

Few steps to create a commercial

Decide on the product
Decide on the target group
Discuss what values are needed in this target group
Link the need to the product
Makes sure that the dramatic question centers around the main “theme value”
Create a “hook” using one of the four basic techniques (dramatic ommision, a threat, opposition, must/cannot)
Create a surprising ending in which the product is the solution

Ubuntu 9.10 + new machine

I bough something more powerful like 4gb DDR3 RAM and some sort of processor but it was with Windows 7. Well it’s not windows 7 that I don’t like, it’s Microsoft. So after pushing some time with it I switched completely to Ubuntu 9.10.

Let me tell you why – you feel the freedom, that if you know how you can customize it totally and even improve it, you can have fanciest visual effects, multiple desktops and many free programs for coding html, css, php working with SQL. You don’t need to buy Microsoft Office, because you already got Open Office installed which can work with doc, ppt files and more. You don’t need to install PhotoShop, because you have the GIMP which is as good as Adobe’s product, you just need to learn it (and it’s free compared to the expensive PhotoShop). With few clicks you can install for free Movie, Sound editors and 3D Blender with which you can make 3D modelling and animation. Tell me after that that it’s not worth it.

Ups, I forgot, there are no viruses under Ubuntu, so you don’t have to deal with antivirus programs, scanning and stuff. The default browser is FireFox – best choice for developers.

I just checked how much time it takes to start the OS from clicking the start button and it’s 46,3 (considering that I have a boot loader and I have to press Enter to chose Ubuntu) seconds and 6,2 seconds to shut down.

On the other side. There is a sweet program called Wine which can help you run Windows applications under Ubuntu. It’s true that it’s not perfect for the moment, but still, it’s for free. I managed to run Warcraft 3, Counter Strike, Winamp, Internet Explorer, PhotoShop CS2. After more work on it, some people manage to use their CS3 or CS4 packages – well I still cannot do it. But you can get an overview how good is that OS. One strange thing was that I didn’t needed to install any drivers, everything was working all right.

Text size on the net

I just read an interesting article about the text size on the web. What my teachers where telling me was that the type should be small, otherwise it looks like child’s book – not serious, formal and so on. But by reading the article Relative readability, by Wilson Miner I found out that the opposite is true as well.

I wrote already what was the argument of my teachers, but here is what Miner says. He makes one cool test – take a newspaper and put it next to your screen – on the same distance. Now, try to read both of them. You will see that the text on the screen on 12px looks too small and hard to read. So, that’s why it’s better to boast up the size of the body text. But when it’s only the body text big and the rest on the site small, it looks funny and bad, so you need to put everything up, to look nice. The Relative readability article itself is with body text on 16px and it’s alright.

Another good side I can add to this is, that when you have 12px body text, you need to make the columns quite smaller to fulfill the rule for 52–78 characters per line. With the size 16 you can easily fill the space on your page. Give it a try.

I was readying a book called Bulletproof Web Design by Dan Cederholm. There he is writing a lot of stuff, but what I want to mention here is about text size. He is saying that by using px for text size on browsers is not good, because when you try to scale the web site, the font will stay the same. As solution he gives keywords small, smaller, large and so on. His suggestion is to use text size as “small” which is actually equal to 12px (approximately). Well, you see again the difference between 12 and 16px, but in this case by Dan Cederholm, you can be sure that the user can scale the size without any problem. So, try those two ways for making your typography nice and decide which one is best for you. Good luck!

Colors and meanings

I was reading some articles about colors and writing down about the feelings each color involves in us. Hope this list is useful to you.

Warm colors – red, orange, yellow – reflect passion, happiness, enthusiasm, and energy

orange - dynamic, change, movement, autumn, friendly, health
yellow - most energizing color, happiness, associated with danger, Summer

Cool colors – green, blue, purple – colors of nature, relaxing

green - new beginning, growth, lack of experience, envy, jealousy,

blue - sadness, calmness, responsibility, peace

bright blue – energizing, refreshing
dark blue – corporate sites, strength, realiability
light blue – relaxed, calming

purple - royalty, imagination, creativity, romantic

dark - wealth, luxuty
light - romance, spring

Black - power, elegance, formality | evil, death, mystery

White - purity, cleanliness, virtue, health care industry, goodness, angels, Winter

Grey - depressing, conservative, formal, modern,

Brown - eath, wood, ston, natural color, warm neutral, dependability, reliability, feeling of warmth, cousy

Anatomy of Colors in Web Design: Green and Environmental Concept

The Meaning of Colours

Green

19.04.2010

Here is some more I found on my PC as extract from unknown article, for a pity.

* Red: Passion, Love, Anger
* Orange: Energy, Happiness, Vitality
* Yellow: Happiness, Hope, Deceit
* Green: New Beginnings, Abundance, Nature
* Blue: Calm, Responsible, Sadness
* Purple: Creativity, Royalty, Wealth
* Black: Mystery, Elegance, Evil
* Gray: Moody, Conservative, Formality
* White: Purity, Cleanliness, Virtue
* Brown: Nature, Wholesomeness, Dependability
* Tan or Beige: Conservative, Piety, Dull
* Cream or Ivory: Calm, Elegant, Purity

* Hue is color (blue, green, red, etc.).
* Chroma is the purity of a color (a high chroma has no added black, white or gray).
* Saturation refers to how strong or weak a color is (high saturation being strong).
* Value refers to how light or dark a color is (light having a high value).
* Tones are created by adding gray to a color, making it duller than the original.
* Shades are created by adding black to a color, making it darker than the original.
* Tints are created by adding white to a color, making it lighter than the original.

Rollip – cool filters for editing pictures

Hi! I found out something that could be useful to you. It’s called Rollip. There you can upload a photo and choose from 40 filters from vintage to some with modern touch. It’s quite cool, instead of doing that on Photoshop, just to work with that web site. http://www.rollip.com/ Hope you find it useful, too.

Here are some examples and you can check yourself all the 40 on the web site:

The second image is the original