Your Ad Here

Posts Tagged ‘internet’

The most basic mistake in CSS

The most basic mistake in CSS

Well, we use CSS, no matter how complex the style sheet becomes, we tend to do some very basic mistakes that might result into catastrophic results. Today I will cover a very simple mistake. Let us assume this piece of style which seems correct

#pa {

Background: red;

font-family: Arial,georgia,sans-serif;

font-weight: bolder;

font-style: normal;

text-decoration: underline;

font-variant: ;

font-size: 0px;

width:500px;

height:300px

overflow: auto;

}

It seems like a perfect style sheet, but it will not actually have a scroll bar in it. No matter how much text is entered. So where is the problem, the problems exists in the line

height:300px

it has no terminator at the end of the property.  The property overflow is treated as being related to height some how. But this is wrong.

So the correct code is

#pa {

Background: red;

font-family: Arial,georgia,sans-serif;

font-weight: bolder;

font-style: normal;

text-decoration: underline;

font-variant: ;

font-size: 0px;

width:500px;

height:300px;

overflow: auto;

}

Now on entering excess text we see there is a scroll bar. Regardless of the number of property, you should always put the terminator (i.e. ; ) at the end of each property so when you decide to add a property later you don’t get to face any problems. It is a basic problem that we often face.

Posted on June 24th, 2009 by Mutedart  |  No Comments »

Connecting a style sheet with a HTML file

Connecting a style sheet with a HTML file:

Today I will tell you how to import a style sheet into a HTML file, it is very simple. There are a few ways of doing it. So let us being…

Method 1: Writing a style sheet within a HTML page

Well after the <title> in the <head>, we mention that we are giving a link to a style sheet and start coding there. This is what the html code will look like

<html>

<head>

<title>Untitled-1</title>

<link rel=”stylesheet” type=”text/css”>

<style type=”text/css”>

h1{

background:black;

color:white;

}

background:black;

/** and so on and so forth the styling can be continued**/

</style>

</head>

If your web has not a lot of styling involved then only I recommend, because if your webpage is totally based on a lot of styles, then it gets rather complicated or if the style is being imported to many pages.

Method 2: Linking to an external style sheet

In the head we can import an external style sheet. The advantage to this is that it can be applied to as many pages without having to put the whole CSS code into the HTML file.

<html>

<head>

<title>Untitled-1</title>

<link rel=”stylesheet” type=”text/css” href=”/style/style.css” media=”all”>

</head>

Well if you see href=”/style/style.css”, this is more like a hyperlink to the style sheet. Well indeed it is a hyperlink to the style sheet. Now an important piece of information, you should place the link in the href from the root to the web site. Most of the websites use this method, as it is better and easier to implement. And changes can be made much more easily as compared to method 1 of adding styles to your web page.

We can multilink that is connecting multiple style sheets; here is a specific pattern by which results comes. We can embed 2 or more style sheets by the following code

<html>

<head>

<title>Untitled-1</title>

<link rel=”stylesheet” type=”text/css” href=”/style/style.css” media=”all”>

<link rel=”stylesheet” type=”text/css” href=”/style/style_new.css” media=”all”>

</head>

Method 3: Importing a style sheet

This is a built in declaration that we can use to import a style sheet into a HTML page. The syntax is as follows

<html>

<head>

<title>Untitled-1</title>

@import url(styles/style.css);

</head>

Method 4: Inlining style sheets

We can put our styles individually to elements, this can be done as follows:

<p STYLE=”color:red; background: black; align: center”>This paragraph will be styled as red text on black background.</p>.

So this is about it. I hope you understood the basics of connecting a style sheet with an HTML file. In case of any questions feel free to contact. Have a great day .

Posted on June 12th, 2009 by Mutedart  |  1 Comment »

Website development a few tips



We often have to design website. What we should think? there are many books on how to make websites. Many tutorials for how to make websites and there are good ones.

I just thought of sharing a few tips:

  1. Never have too many links on the first page
  2. Some times it is better to have some clean space rather than trying to fill it up force fully
  3. Keep your color scheme aesthetic. But what is aesthetic? Keeping it simple, elegant and professional(often i call it sep)
  4. Never use funky fonts in normal text. as not all fonts are with users. if you want ur site to be as a text one that is users shall be allowed to be selected. Than having all these funky or even fonts that are elegant but not default will be unknown to your audience’s pc. So use fonts that are already installed in every pc.
  5. It I never a requirement to fill a page up, so be cautious. You might loose visitors because of this.
  6. Knowing which technology to use when? Well this is not really a tip but it is an important aspect in website development. Why? If you know there are many technologies in the market. Which one to use? Well it depends all on your requirements… there are many technologies now. Go through tutorials for help regarding what technology.

7.      Pick a host that suits you, your requirements as it matters. Don’t forget google about the hosts reviews etc…

8.      Keep sites name easy to remember if I have a site called xyz.com it is easy to remember rather than a2D3sdfs1d4333.org.pk

9.      See professionals work. Highly recommended. They are the pros. Look at how they do it. You might get inspired by some gurus.

So good luck and start designing, developing and coding a website.:)




Posted on May 31st, 2009 by Mutedart  |  No Comments »

Software’s for web coding/designing



Which one is the best? No one can argue, every one has his/her own taste. And all the software’s that allows web development have their advantages and disadvantages. So which one to choose? That’s a question that you have to answer. Often professionals recommended trying as many compilers as possible, why? There is a reason for it. They are the experienced gurus, they know what they suggest. But why in web? It’s simple, not all tools work the same way. Yeah we say WYSIWIG (what you see is what you get) but we never want that to be the case. We also want to code.

So there are many in the market. I personally like notepad, Macromedia Dreamweaver, and when the amount of work is less, Front page does the trick. These are the one’s I used; but there are like

Software

Link

Amaya

http://www.w3.org/Amaya/

BBEdit

http://www.barebones.com/

Rapidweaver

www.realmacsoftware.com/rapidweaver/

Notepad++

http://notepad-plus.sourceforge.net/uk/site.htm

Adobe Dreamweaver

www.adobe.com/products/dreamweaver/

Adobe HomeSite

www.adobe.com/products/homesite/

CoffeeCup HTML Editor

www.coffeecup.com/

Eclipse with the Web Tools Platform

www.eclipse.org/

EditPlus

www.editplus.com/

EmEditor

www.emeditor.com/

Microsoft Expression Web

www.microsoft.com/expression/

Microsoft Visual Web Developer

www.microsoft.com/express/vwd/

NoteTab

www.notetab.com/

PSPad

www.pspad.com/

Quanta Plus

http://quanta.kdewebdev.org/

SCREEM

www.screem.org/

Smultron

http://tuppis.com/smultron/

skEdit

www.skti.org/skedit

TextPad

www.textpad.com/

Adobe Contribute

www.adobe.com/products/contribute

Adobe Golive

www.adobe.com/products/golive/

NVU

www.net2.com/nvu/

Kompozer

www.kompozer.net/

Namo WebEditor 2006

www.namo.com/

Evrsoft First Page 2006

www.evrsoft.com/

Microsoft SharePoint Designer

www.microsoft.com/Sharepoint/default.mspx

Freeway

www.softpress.com/

Seamonkey Composer

www.seamonkey-project.org/

WYSIWYG Web Builder

www.wysiwygwebbuilder.com/

Microsoft Frontpage

www.microsoft.com/Frontpage

Notepad

Built in windows

So this is just a small list, there are plenty more out there. But which one is the best depends on you, use the on in which you feel comfortable coding or designing. If you would like me to add it to the list, leave it as a comment here, and I will surely add that editor to the list.




Posted on January 9th, 2009 by Mutedart  |  3 Comments »

Unilever website reviewed: they make good products but do they have a good website?



Unilever, a famous company for making many things. Their products are used almost in every sector of our life. Let it be cooking, washing, etc. But do they have a good website? Being honest the first thing I noticed, it is good at some places, and at others really looks horrible. It has been neatly arranged, not a fuss any where, apart from the fact unnecessary stuff has been placed on the main page. They can organize their content even more. It’s not sort of professional, it is not aesthetic. No multimedia exists, that’s not an issue that will irritate or ruin the whole website.

I did not like the way the announcement panel was placed, and it was showing only one announcement. The background is not good; it gives the website a weird look. Background is very weird.  A simple gradient would have looked better. The background was not matching at the bottom and the top. It’s a mixture of a pattern, and a gradient. Buttons, act as the link, images or headings can also be used as the links. It’s not bad but it can be better. The hovering is very irrelevant and unaesthetic especially at some places. The hovering tends to cover the image which makes it annoying.

But the good thing was the website was very fast. It tended to load very quickly, and it didn’t consume a lot of my bandwidth.

So in general there are a lot of things they can improve on. So the final scores are:

Organization:              6/10

Navigation:                             7/10

Interface Design:                   3.5/10

Speed:                                     9.5/10

Content Presentation 6/10

Total Score                             6.4/10




Posted on January 9th, 2009 by Mutedart  |  No Comments »

The making of my portfolio: http://mutedart.zendfree.com



URL:http://mutedart.zendfree.com

I won’t be going through the whole process that is I won’t explain how I did every thing since this is not a tutorial to make a website. But just a quick over view of how I made the website.

I started of with an A4 sheet right in front, on which I drew the whole interface that was the proposed interface on paper. Designed my logo on rough A4 so I knew what I was going to design and develop. This is one of the most important stages. Why? It’s because this stage actually tells the developers, designers, (i.e. the web team) what to do. And w hat is required at the final stage. Then I continued with what will I be using in the development of my website? By saying this I am referring to the technologies that I will be using. Choose wisely as the choice made now matters a lot. So I decided to use Html for almost every thing and CSS for buttons. I used notepad as my editor for CSS, there are others like Macromedia Dream weaver, etc.  Then for the designing of my logo, I used Adobe Photoshop. After this I designed the rough layout using tables, Front page, and fire fox for checking the interface.  Than I designed the buttons; the theory behind the buttons:

I knew I was going to use CSS for my buttons; I divided my buttons in two parts. One being the menu from where navigation is allowed and the other being all other links in the web page.

Now before starting to code for the web site, I decided for the color theme, that I will be using in my web page. So I decided the following were the RULES I will be using inn the buttons

a:link {}, a:visited {}, a:hover{}, a: active{}

then for the main buttons that  act as the buttons to transfer I made a list, changed it to inline, the list-style-type property to none. So the bullets don’t come up than placed a border on both left and right to give it a button look. I used the same rules as before. But there is variation in the properties that I used.  One important thing I used external style sheet as that saves a lot of code and does not create a lot of fuss. And I used one style sheet for the whole website.

This is it, I am done with the template then I moved to save page as. Since my template will be the same by referring to template I am saying the basic layout will be the same. Only the area of content will vary. Even that wont vary that much. So I started saving my template as other pages changing the title. I made changes as well as I continued to complete my website. When all my pages were done, I came back for hyper linking. I connected the pages. For images I had decided I won’t open them in he same tab/ window. So in the <a href=”xyz/jpeg”>image thumbnail here</a>I included the target=”_blank”, this opens that particular link in a new tab/window.  The code became <a href=”xyz/jpeg” target=”_blank”>image thumbnail here></a>.

I was done with the site; I was consistently checking my site in fire fox. Now was a time to run a quick run. So I TESTED the whole website clicking on links randomly going from one menu to another. After testing the site, I uploaded my site to my server.

So all the best, happy coding. :)



Posted on January 7th, 2009 by Mutedart  |  No Comments »

Rolls royce website Review: is it worth million of dollars as well?



URL: www.rolls-roycemotorcars.com

They make million dollar motors, one of the most reputed companies for developing the most beautiful and most luxurious cars. They have potentially the talent in engineering beautiful cars. But do they have a page for worth a million dollar as well? Do they meet international standards as well?

To start of I was really stunned with the website at first glance. Not at all impressed was I impressed, I expected some good web engineering as well. The website was totally made in flash. The idea for the interface was good very neatly organized. But the color combinations were bad. Light gray on a little dark gray and it giving me a hard time to read. The worst thing was it was loading at every page. A pre loader on every page is never a good option. As it totally looses customer interest, the site got boring as all the pages were loading before I could see them.

Another problem is the site was designed at 1024 x 768, when viewed at 800*600 (though this resolution is out of date), but half of the web page was out of the screen.

Apart from this the material is very well organized. Simple and easy to follow the menu. it is Very easy to navigate the webpage. The presentation of the content is very good. This is the place I was impressed by Rolls Royce. They did convey the information in a very professional manner. Apart from this at the initial stage they have options of which bandwidth website you want to use. Another good thing is they have partial 3d view of their cars. Exterior and interior, though it is not 360o, it would have been better if they gave a better 3d view as that will lets users view the cars without much hesitation. The more options they put the better it gets. But options should be put in such a way that they don’t look bad. But they look professional. So to conclude there are a lot of places where they can put more effort into and make their website the perfect one.

Being honest their website was not what I expected as a big fan of Rolls Royce.

Organization: 7.5/10

Navigation: 8/10

Interface Design: 6/10

Speed: 5/10

Content Presentation 9.5/10

Total Score 7.2/10




Posted on December 31st, 2008 by Mutedart  |  No Comments »

Stop.pk website reviewed : not introductory, serious issues.



Well i did not feel like writing a review for the website as i was really disappointed with many things. A few things will include

The interface is not that impressive, the color scheme is not very good. The number of options available is normal; all other social networking sites offer the same things. There are more launches being done rather than bugs in the older ones being fixed. A lot of spamming was what i noticed. Even though i saw admins, and moderators there. But not much of actions were taken by them against spammers.  The interface is very messy, unorganized and contains a lot of misplaced ads. The shortcuts are not wanted. As they ruin the flow of the website.  In the forum section there are too many smileys.  It’s fine with the fact that it looks good but it is not at all a sign of professionalism. There are many unwanted banners that give the users a hard time. The worst thing is that it wastes my bandwidth. it takes around 5-10 times to open a page and post a reply without any hesitation. So to be honest stop.pk really needs to improve… I hope they do improve there interface otherwise all the effort might be wasted.

well i can just say there were very few things considered to be good.

Here are the scores

Organization:                          4/10

Navigation:                             3.5/10

Interface Design:                   2/10

Speed:                                     1/10

Content Presentation             3/10

Total Score                             2.7/10




Posted on December 29th, 2008 by Mutedart  |  No Comments »

Sun Microsystem: www.sun.com

URL: www.sun.com

The famous company Sun Microsystems, that develops many of the things being commonly used, in the market. Let it be hardware such as storage system or a server or software or an operating system. The company also offers certifications in the technology that they have made.  The company is currently expanding and developing more technologies with more complexities and improvements being made. But the power increases as well. And it all gets fun as we continue to learn more about the technologies.

We often have to go to the website of Sun Microsystems. But what may be reason for it? Internet is full of applications called applets. These applets are programs made in java. Now Sun Microsystems has introduced JavaFX which allows developers to create internet rich applications. And in order to run such applications we need to have the Java Virtual machine or JavaFX. These are just two examples of the many applications of java. The JVM is often called as J2RE (Java 2 Runtime Environment). We also have an operating system by Sun Microsystems called Open Solaris. Other products and services are also available. Sun Microsystems also provide an SDK for Mobiles and other development kits. Called the J2ME (Java 2 Micro edition) which allows us to create games, software’s for mobile and cellular phones. Getting back to Sun’s Website; the background is pale blue on which the whole website lies.

We have a quick menu to login to different accounts that users can have, beside this is the innovating at sun, community voice, how to buy menus which take the user to different things.

Below that is sun logo. And on its right, is the menu which allows the user to navigate through the entire website. This includes the Downloads & Trials, Products, Services, Solutions, Support, Training, Sun For… menus. And then the shortcut to download to famous things exists on the left below the logo.  These downloads include the things that are downloaded very often which can include Java, Net beans, Glass fish, open Solaris, xVM  VirtualBox, open office, JavaFX. Apart from this is the news panel which has the headlines of the latest innovations, or discussions at Sun Microsystems.

Though the thing that I did not like was there were too many panels. The number of panels can be reduced to make the site look neater. In a nutshell, the website has been organized in a very good manner to give us a better looking site; its cleanliness is very good apart from the factor of the panels. The website has no welcoming screen, which is not bad. As not all the websites require a welcoming screen. So here is the overall rating of the website

Organization

8/10

Navigation

8.5/10

Interface Design

9/10

Speed

8.5/10

Content Presentation

8.5/10

Total Score

8.5/10






Posted on December 29th, 2008 by Mutedart  |  No Comments »

JavaFX examples video by Sun Microsystem



The video discusses about the examples that are in the JavaFX website. very informative video about JavaFX

Posted on December 16th, 2008 by Mutedart  |  No Comments »

« Older Entries