Graphic Designer - vit-e - Lebanon

vit-e are looking for an enthusiastic graphic designer to join the vit-e team.

- Come up with innovative and relevant creative solutions to various types of briefs.
- Collaborate with colleagues such as copywriters, designers, photographers and web developers.
- Continuously seek to expand your horizons as a designer

Responsibilities
- Design corporate identities, layout structures for publications.
- Think and design interesting websites.
- Have a knowledge of the relation between designing and implementing a website, relative to the platform planned for development.
- Follow-up on the communication pertaining to a project and ensure any change associated with the project is well managed.
- Communicate effectively with external organizations and clients.
- be happy.

Skills
- Seeking a motivated, organized and pro-active person to work with and contribute to our team.
- Education and/or training in Graphic Design in a reputed accredited university in conjunction with an outstanding portfolio.

Essential
- Wide knowledge of the local and international graphic design scene.
- Demonstrated high level of competence in interpersonal skills, consultation, negotiation and effective communication with the team and clients.
- Good knowledge of printing production techniques and processes.
- Evidence of the capacity to work professionally and harmoniously with a small team of staff to ensure projects and deliverables are well handled.

Desirable
- Experience working for multi type of projects
- Good knowledge of Internet technologies such as HTML, Flash, XML

hello@vit-e.com

HTML Producer - ProFed - Lebanon

- Building HTML web pages
- Using industry standard tools
- Creating and updating HTML files
- Using CSS formatting and layout techniques
- Editing and preparing web images and coordinating with the design team
- Make the necessary QA with the designers on the produced web pages
- Managing and updating websites content
- Using jQuery as needed
- Optimize code for best performance

Qualifications
- University degree in computer science, multimedia or equivalent
- Good knowledge of HTML, CSS and JavaScript
- Good knowledge of Adobe Dreamweaver
- Good knowledge of Adobe Photoshop for image editing
- Knowledge of jQuery
- 1/2 years of experience in website production
- Flash knowledge is a plus

hr@profedme.com

blogspot: unlocking the header widget so that you can place it in a different location

Oooops! A couple of posts ago I was talking about making a vertical header and completely forgot to mention something very important related to that: In order to move your header to a different location on the site you will have to do some sniffing around inside the HTML editor (with expanded widgets!), where you need to find this line:

<b:widget id='Header1' locked='true'
and change it to
<b:widget id='Header1' locked='false'

.................................................................................................................................

HTML Producer - ProFed - Lebanon

- Building HTML web pages
- Using industry standard tools
- Creating and updating HTML files
- Using CSS formatting and layout techniques
- Editing and preparing web images and coordinating with the design team
- Make the necessary QA with the designers on the produced web pages
- Managing and updating websites content
- Using jQuery as needed
- Optimize code for best performance

Qualifications
- University degree in computer science, multimedia or equivalent
- Good knowledge of HTML, CSS and JavaScript
- Good knowledge of Adobe Dreamweaver
- Good knowledge of Adobe Photoshop for image editing
- Knowledge of jQuery
- 1/2 years of experience in website production
- Flash knowledge is a plus

hr@profedme.com

HTML/CSS starter kit

I have prepared a simple webpage including a header, footer, navigation area and 3 columns. It is written in W3 standards and shows all the simple actions such as ordered lists, unordered lists, image placement, use of header and paragraph texts, linking, styling using css and also inline styling. Of course there are hundreds of layouts to be explored and it is up to your imagination. This is only an example to get you started and familiarized with the structure. You can download it from here. Alternatively here.

The .rar file also includes a commonly used styles.txt for a reference point. But it is impossible for me to explain how each one of them is used or what their variables are. I highly recommend that you take a look at this. It will give you a great insight on how you can use them efficiently, if you are planning on coding your own website. 

.................................................................................................................................

custom header for blogspot

As you will see up top we now have a custom header. Not just a plain header text image, but also a second line with a menu and image rollovers. 

Very easy (and also very tough) to make: The tough part was getting things aligned properly and it basically just involves a lot of trial and error. Lots of going back and forth between photoshop, dreamweaver, blogspot and picasa to where I uploaded the blog title image which I kept tweaking to get right and then re-uploading. Still not completely there - but it will have to do, I guess.

I used a basic table*** inside dreamweaver to assemble this, from where I copy pasted the entire code (also including what was in the <head>) into a custom HTML/Javascript gadget. The gadget will automatically delete unneeded info as it saves, except for one line at the top - the document title, which you have to then go back and get rid of manually.

Something to remember when you do this is that you have to put all the images that you are using online first, and then embed the image URL's into the correct table cells in the HTML editor. The menu is actually a direct copy paste from the HTML gadget which we had on the sidebar, into a table cell in dreamweaver, and the images which that one uses are also online, of course.

Dreamweaver, with it's split window is wonderful of course, and I have been looking around to see if there is a comparable software which is free. However, no such luck so far. The best that I have been able to find is called Page Breeze and you can download it from here >>>. You do have a visual interface on this, which helps, however no split window, I'm afraid.

And finally, you can see the full code of the header, where I am also highlighting a few important parameters which you need to pay attention to in order for everything to properly work, here >>>.

*** No lovely CSS <div>s for me. My skills do not go that far - not even close... ouch!

.................................................................................................................................

splitting up the header in blogspot

Today seems to be shaping up as a Fırat Gunal day here on easy peasy. While he is busily developing his own site he has been fabulous about finding some really useful stuff which we can share here as well: 

You may want to add a button or a search box onto the header of your website. In which case you need to split it. Here, as re-blogged from BloggerSentral, is how to do this:

Go to Dashboard > Design > Edit HTML. Make sure the Expand Widget Templates check box is un-checked. Look for the following lines in your HTML code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/>
</b:section>

Insert the following code right under (after) it:
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

So the final code should look like this:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

You now have two sections in the header, the section with the existing blog title on top and the new section below it. You will now need to position the sections side by side, by floating the section containing the blog title to the left,  and the new section to the right. To achieve that, locate this line of code:

]]></b:skin>

Add the following CSS code right before (on top of) the line:
#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

Now it is time to add the banner, search box, or whatever it is that you want to add. Go to Design > Page Elements and click the Add A Gadget link to add your widget. If the added widget shows up under the blog title (instead of on the same level, on it’s right), go back to the CSS code, and change header and header-right widths and experiment with different values until you get it right. And you can see a screenshot of how this looks on Fırat's post.

 (Extra little tip from Fırat:  You can also do this by going to Design > Template Editor > Advanced > Add CSS where you will see the newly added code and also how the header looks on the page. Much easier to tweak values when you actually see what you are doing at the same time!  ;-) 

seo: post title before blog title, or how to get google to like your blogspot site even more

Here is another little code snippet which will make it possible for a search engine to search the contents of your posts as well as your blog's title and keywords. Result: Even better web visibility. All you need to do is find this line in your HTML code under the 'Design' tab:

<title><data:blog.pageTitle/></title> 
And then replace it with this:
<b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
Save. Done!

 (Tip:  It will of course help if there is some indication in your post title as to what you will be talking about. As an example, a title such as "nice code" would not have gotten me very far with this one right here. So, as you can see, I made a point of mentioning all the relevant stuff in the post title itself.  ;-) 

.................................................................................................................................

nice clean search box

I don't know about others, but I was hugely bothered by the way the default search gadget looks on blogspot - the way the 'search' button shoulders its way into the actual search area and then all that 'powered by google' stuff below...

So, here is the code for a squeaky clean one, no buttons, no nothing, just a plain empty entry field. And as is usually the case - "less is more" once again! Simply copy/paste this code into an HTML/Javascript gadget. Change the value highlighted in red to get the correct width and you are all set to go:

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="18" type="text" /></form>

.................................................................................................................................

how to get google to like you

Want to get a top ranking in search engines? Be sure to have proper meta tags included in your html. Meta tags are not a magic trick to get you to become the top website on search engines, however they provide search engine crawlers with the desired information which proves that you deserve to be thereabout.

Definition & Usage (as explained on w3schools.com)

• Metadata is 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 <meta> tag always goes inside the head element.

Most Important Tags: (What you need to fill is highlighted in red)

identifier-url This tag provides google-bot with the information on where to start indexing your website.

[meta name="identifier-URL" content="http://www.yourwebsiteurl.com"]

description Provides the description of your website, you can use a maximum of 255 characters.

[META NAME="description" CONTENT="yourdescription"]

keywords Write a maximum of 12 keywords separated by commas, which are directly connected to your content.

[meta name="keywords" content="keyword1,keyword2,keyword3,keyword4,etc"]

language Provides the language of your website, if it is English, this is not very important but still it would be good to have. 

[META NAME="Language" CONTENT="english"]

revisit This tag is important for bloggers such as yourself and for those who update their sites very frequently, otherwise it is just a waste of space. It tells google-bot, how frequently it should visit your website. Having a short interval means, you will have updated content much faster on google search engines.

<meta name="revisit-after" CONTENT="X days" />

Other than these there are many more meta tags, however they do not have much of an impact. If you are interested you can see the whole lists here and here. Also you can use the online meta tag generator to get a proper code which than you can copy/paste into your website.

.................................................................................................................................

playing around with (HTML) type

I haven't really been looking too carefully at the compose tab when I am entering a post, I guess. Just noticed now that (unlike wordpress) blogspot allows you to change the fonts and sizes of bits inside the text intuitively.

Great news! Means you can have custom designed block quotes on your posts, without having to write too much code! (The default block quote command does not look too clever since it pushes the text inside, so it is usually quite tough to get things correctly aligned with it).

Of course, one would need to be very careful when doing any of this because it might end up looking absolutely awful if you don't get it right. Still, I cannot resist and am trying one out right now. The body text on this blog is Arial so I will use Times New Roman to get a nice contrast between sans-serif and serif. Usually works very well - especially if serif is also set in italic:

______________________________

And now I will make this quite big, so that it really stands out from the body text.

______________________________

Since this is a special element, a strong color should be OK to use for type: So, I made this a dark blue for added accentuation. Now, I will go back to the regular font size/color and write some more, so that I have enough text to fill the post - a block quote needs a lot of text to nest inside properly. Notice that I also added lines to top and bottom to give it even more definition. While the body text is justified, the big text is flush left since at such a big size it would be very difficult to justify the type and not get "white rivers", which are the lines that run through and break up body text vertically. Very clumsy whenever that happens...

Although I started out on the compose tab I ended up tweaking the code in the HTML tab of the post editor quite a bit: Changed the font size from x-large to a pixel value, and also I changed the line height with an added <div> tag. So, here is what the code for this ended up looking like (the stuff that I added/tweaked is marked up in black):

<div style="line-height: 30px;"><i><span class="Apple-style-span" style="color: black; font-family: 'Times New Roman', serif; font-size: 38px;">And now I will make this quite big so that it really stands out from the body text.</span></i></div>

.................................................................................................................................

all kinds of menus

You can find some very nice custom menus at http://bloggerhowtotips.blogspot.com/

The image above shows you a selection from the available styles which you can generate on the site. On the left are vertical HTML/CSS menus and on the right are drop down vertical menus. Both pages give you the codes for all of the different design styles and also tell you exactly how to use them, which incidentally is through yet another HTML/CSS gadget - love these things!

And then there is also a smoothly animated multilevel drop down menu; again you can obtain the code for this from here, and again, this too works through the HTML/CSS gadget.

.............................................................................................................................

HTML codes for the ASCII

or simply put, how to get any symbol, letter etc. to show up properly on your website.

Writing simple blocks of text into your site is no problem at all, but what happens if you want to use symbols or letters such as; ¢, ¥, ¼, æ...

On some platforms such as Blogspot, you are in luck, you can open your character map or search the web for the symbol you want to use (which is a huge waste of time) copy/paste it and there it is. However you won't be so lucky if you decide to hard-code your website which will result in these symbols appearing jumbled up when you put them online. So here is the solution for both coders and those who don't want to waste precious time looking up the symbol.

Go to this link: http://www.ascii.cl/htmlcodes.htm

Look up the symbol you want and copy either the html-name or html-number (both works) and paste it into your code to wherever you want it to be.

This next part is for those who will use it on Blogspot: While you are on the "New Post" or "Edit Post" Screen, where you have the title box and the text box, there are 2 options towards the top-right end of the text box; originally you always have Compose selected. Whenever you are going to paste one of these codes, select Edit HTML and paste it, then return to Compose and it should be there. You can keep on writing normally back in Compose and switch back and forth whenever you want.

.................................................................................................................................

perfectly clean images at all sizes for blogspot

A small but highly annoying problem comes along when you upload images from your computer to your blogspot blog. Linking images from other sites will not do this by the way, with that you don't have to worry at all. However when you upload directly from your computer, the code will look like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGqMgqN_at_AzT8hWn4upnn527C6Wq9-2lIg2HY_dGm91vO3_Dv_e3AIWmvtqaXD9HxkNXUDsKTiHnDQXUO5mv2APbiV56hNmy8PCUaD97kXWlnyjvgt8sdi76ZS4pRVaZkbvjvXN_mjo3/s1600/site-areas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGqMgqN_at_AzT8hWn4upnn527C6Wq9-2lIg2HY_dGm91vO3_Dv_e3AIWmvtqaXD9HxkNXUDsKTiHnDQXUO5mv2APbiV56hNmy8PCUaD97kXWlnyjvgt8sdi76ZS4pRVaZkbvjvXN_mjo3/s320/faststone.jpg" width="320" /></a></div>

Your image will be 320 pixels wide. The height can change depending upon your image aspect ratio, but the width is always 320 - no matter what, even if the width of your post is 1000 pixels! This is the default state and should be fixed, of course. Which needs to be done by hand in the Edit HTML tab of your post editor:

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGqMgqN_at_AzT8hWn4upnn527C6Wq9-2lIg2HY_dGm91vO3_Dv_e3AIWmvtqaXD9HxkNXUDsKTiHnDQXUO5mv2APbiV56hNmy8PCUaD97kXWlnyjvgt8sdi76ZS4pRVaZkbvjvXN_mjo3/s1600/site-areas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="406" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGqMgqN_at_AzT8hWn4upnn527C6Wq9-2lIg2HY_dGm91vO3_Dv_e3AIWmvtqaXD9HxkNXUDsKTiHnDQXUO5mv2APbiV56hNmy8PCUaD97kXWlnyjvgt8sdi76ZS4pRVaZkbvjvXN_mjo3/s1600/faststone.jpg" width="500" /></a></div>

The bits you need to tackle are highlighted in black in the above code snippets. You obviously change the height and width. However, there is another little thing you need to change also and unless you take care of it your images will look really bad and blurry. This is the s320, which needs to get changed to s1600. Don't ask me why, this is how you get it to work.

 (Tip:  Need to know how to get the correct measurements when you resize your images? You can of course do it in photoshop by going to Image > Image size and pretend that you are resizing the image from the pixel values on the top. And then you can also install the opensourced Faststone Image Viewer (greatest app in the universe - please make a donation!), right click on the image, and...  ) 

.................................................................................................................................