online advertising

ProgramimiCOM

Programming And Web Resources

Web Development Resource Articles

06 Aug

Posted by ProCOM bloggeraz on August 6, 2007 – 2:14 am - 714 views

del.icio.us Cool Stuff On Web Developement

04 Aug

Posted by ProCOM bloggeraz on August 4, 2007 – 12:50 am - 1,382 views

Ajax RSS reader

03 Aug

Posted by ProCOM bloggeraz on August 3, 2007 – 11:00 am - 510 views

In this tutorial, you will learn that How to build an Asynchronous JavaScript and XML (Ajax) Really Simple Syndication (RSS) reader, as well as a Web component that you can place on any Web site to look at the articles in the RSS feeds.

The first thing I thought about doing when I read about requesting Extensible Markup Language (XML) from JavaScript code on a Web page was to get some RSS and display it. But I immediately ran into the security issue of XML Hypertext Transfer Protocol (HTTP), where a page that comes from www.mysite.com can’t address pages from anywhere other than www.mysite.com. My plans to build a generic RSS reader in just the page were dashed. But Web 2.0 is all about ingenuity, and solving the problem of how to create an RSS reader with XMLHTTP teaches a lot about how to program the 2.0 Web.

Download the code for this tutorial

Ajax RSS reader

Read Full Tutorial… 

Ajax – Learn Ajax by example

01 Aug

Posted by ProCOM bloggeraz on August 1, 2007 – 11:07 am - 640 views

Ajax (Asynchronous JavaScript and XML) is a new paradigm which was introduced in 2005. The purpose of Ajax is that of giving the illusion that websites are responsive. It achieves this by processing requests which involve the sending and receiving of small packets of data without refreshing the web browser.

Ajax is founded on:

XHTML – A rigid subset of html which is used to mark-up and style the information.

DOM - The Document Object Model which can be accessed by the client browsers.

XMLHttpRequest – The object used to exchange the information asynchronously.

XML – The format used to transfer the data from the server to the client.

In this tutorial we will see how to create a piece of text that keeps changing using Ajax. Before you start this tutorial make sure that you have a text editor and a web server with PHP extensions available. The following section explains the source files, why they were created, and how to deploy them.

Download Sample code used in this tutorial

Watch the Demo

Read Full Tutorial…

The Colors Game… The Right Colors for a TOP-10 Web Design

23 Jul

Posted by ProCOM bloggeraz on July 23, 2007 – 12:14 am - 1,290 views

Even before the web, advertising pioneer David Ogilvy found that advertisements in at least four colors are 100% more memorable than ads in black and white. He also notes that white (or light) background colors with black (or dark) text color improved conversion by 100% as opposed to the reverse. Colors capture visitors’ attention, trigger emotions and when used correctly they help you keep viewers around long enough to make you money.

When visitors first load your website you have approximately 30 seconds to catch their attention. Your web design better be appealing, easy to view, and instantly captivate your visitor or you can say hello to Mr. Back Button…

So which color has a calming effect? Which one increases heart rate? Do certain colors make a customer more comfortable with buying from your site?

The colors of the layout can largely affect a users perception of how easy to use, or professional you web site looks.

The Colors Are Meaningful; The First Impression of Your Web Site

Different colors have different meanings and associations. They engage your visitors emotions, silently and powerfully… Than, What Colors Mean…

white.jpg WHITE – Cleanliness, and refinement. Brides wear white as a sign of purity as do doctors. Impressions: refreshing, clarity, and truthfulness.

black.jpg BLACK – Power, sophisticated, seriousness. Creates drama and strong emotions but too much is overwhelming. A bad background choice. Impressions: mystery, exclusive, or evil.

blue.jpg BLUE – The most popular color worldwide. Promotes business dependability; a good choice for building customer loyalty. Impressions: cooling, serene, can also be cold.

red.jpg RED – Excitement, danger, passion, energetic. Red draws attention, increases heart rate and stimulates appetite. Use it to focus attention with boldness and accents, and promote excitement. Impressions: Enthusiasm, encourages confidence, action.

green.jpg GREEN – Natural, healthy, peaceful. Green promotes tranquility, and financial stability. The second favorite color, green is easy on the eye. Impressions: renewal, harmony,relaxing.

purple.jpg PURPLE – Wisdom, royalty, spirituality or sophistication, celebration or mournfulness. Purple is made of blue (calming) and red (stimulating) and the dominant undertone will define perception. Frequently a favorite of adolescent girls and creative people; purple can promote a premium service or create a romantic, feminine appeal. Impressions: encourages creativity, uplifting, spiritual, and calming.

orange.jpg ORANGE – Warmth, energy, play, excitement. It can add fun to your site, or be a highlight on charts and graphs. Impressions: stimulates activity and appetite, and encourages socialization.

brown.jpg BROWN – Effectiveness, stability, and richness. It’s associated with natural, organic things. Impressions: a connection to the earth, wholesome feelings, and orderliness.

Now that You know your colors will have an immediate effect on visitors, what are your winning Color Schemes…?

Some Effective Color Schemes

So what’s the right color scheme for a positive effect? First, carefully consider colors to promote your image. Use a background color and text color that contrast but work in harmony. Variations of one color don’t provide enough contrast.

A light background color (instead of white) maintains contrast, but is easier to read since it softens the screen’s brightness. Gray’s a favorite background choice, although, green is gaining favor as the “new gray.” Choose a text color that stands out and is easy to read against your background. Use bold, primary colors to draw attention to important page elements. But be careful: Too many colors can distract and reduce readability. In addition, colors should enhance site usability. Establishing a color for headings and a color for links allows visitors to navigate quickly and easily.

Accommodating the Color Blind Online

Web sites with good balance and color schemes have the usability and appearance. Similarities in hues and brightness harmonize colors and create attractive color schemes. However, they’re not “user-friendly” for the visually impaired. Nearly one in 12 visitors to your site will have some form of color-blindness. Most commonly, the inability to distinguish between red and green. So a red-green combination is a bad choice for usability. If links are a different color, but aren’t identifiable as links, color-blind visitors may not realize that they are links. Blue is recognizable by everyone, and the standard usage of blue, underlined lettering for links gives all visitors the same usability.

With all colors, it’s best to keep them bright and distinct to clearly separate headings, links, and text, and increase functionality.

Use the following links to help choose your winning color schemes.

Give thought to what emotions your colors will trigger, and how the colors enhance your site’s usability. When you consider your viewer’s needs, select a color scheme that is appealing, and is easy for them to use, you’ll have the winning edge to convert visitors into customers.

HTML Beginner Tutorial – Getting Started

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 8:42 pm - 915 views

Most of the stuff on the web is no different than the stuff on your computer – it’s just a whole load of files sorted into a whole load of directories.

HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor.

 

Notepad is a common text editor (on Windows this is usually found under the Programs > Accessories menu).

Type this in to your text editor:


This is my first web page

Now create a folder called ‘html’ in your C drive (or anywhere else you fancy) and save the file as “myfirstpage.html”. It is important that the extension “.html” is specified – some text editors, such as Notepad, will automatically save it as “.txt” otherwise.

To look at HTML files, they don’t even need to be on the web. Open a web browser such as Firefox or Internet Explorer and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example, “c:\html\myfirstpage.html”) and hit return. Alternatively, go to the File menu of the browser, select Open, and browse for the file.

Pow. There it is. Your first web page. How exciting. And all it took was a few typed words.

We’ve said here to use a basic text-editor, such as Notepad, but you may be tempted to use a dedicated software program such as Macromedia Dreamweaver or Microsoft Frontpage.

You should be very careful when using these programs, especially if you are a beginner, because they often throw in unnecessary or non-standard code to “help” you.

If you’re serious about learning HTML, you should read through a tutorial such as this first, so that you at least have a basic understanding of what is going on.

Software programs such as these will never give you the same control over a web page as coding by hand.

HTML Beginner Tutorial – Tags, Attributes, and Elements

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 8:39 pm - 524 views

Although the basics of HTML are plain text, we need a bit more to make it a valid HTML document.

 

 

Tags

The basic structure of an HTML document includes tags, which surround content and apply meaning to it.

Change your document so that it looks like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
	This is my first web page
</body>
</html>

Now save the document again, go back to the web browser and select “refresh” (which will reload the page).

The appearance of the page will not have changed at all, but the purpose of HTML is to apply meaning, not presentation, and this example has now defined some fundamental elements of a web page.

The first line on the top that starts <!DOCTYPE… is to let the browser know that you know what the hell you’re doing. You may think that you don’t actually know what you’re doing yet, but it’s important to stick this in. If you don’t, browsers will switch into “quirks mode” and act in a very peculiar way. Don’t worry about this just yet, you can learn more about “document types” in the HTML Advanced Tutorial if you really want to. For the moment, just remember to shove this line at the top of your web pages and you’re laughin’.

To get back to the point, <html> is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. The stuff between <body> and </body> is the main content of the document that will appear in the browser window.

Closing tags

The </body> and </html> close their respective tags. ALL HTML tags should be closed. Although older versions of HTML lazily allowed some tags not to be closed, latest standards require all tags to be closed. This is a good habit to get into anyway.

Not all tags have closing tags like this (<html></html>) some tags, which do not wrap around content will close themselves. The line-break tag for example, looks like this : <br />. We will come across these examples later. All you need to remember is that all tags must be closed and most (those with content between them) are in the format of opening tag ? content ? closing tag.

Attributes

Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their value is always inside quotation marks. They look something like <tag attribute=”value”>Margarine</tag>. We will come across tags with attributes later.

Elements

Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in-between and includes the <body> and </body> tags is the body element. As another example, whereas ‘<title>‘ and ‘</title>‘ are tags, ‘<title>Rumple Stiltskin</title>‘ is a title element.

HTML Beginner Tutorial – Page Titles

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 8:37 pm - 492 views

All HTML pages should have a page title.

 

To add a title to your page, change your code so that it looks like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>My first web page</title>
</head>

<body>
	This is my first web page
</body>

</html>

We have added two new elements here, that start with the head tag and the title tag (and see how both of these close).

The head element (that which starts with the <head> opening tag and ends with the </head> tag) appears before the body element (starting with <body> and ending with </body>) and contains information about the page. The information in the head element does not appear in the browser window.

We will see later on that other elements can appear inside the head element, but the most important of them is the title element.

If you look at this document in the browser (save and refresh as before), you will see that “My first web page” will appear on the title bar of the window (not the actual canvas area). The text that you put in between the title tags has become the title of the document (surprise!). If you were to add this page to your ‘favourites’ (or ‘bookmarks’, depending on your browser), you would see that the title is also used there.

HTML Beginner Tutorial – Paragraphs

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 8:34 pm - 548 views

Now that you have the basic structure of an HTML document, you can mess about with the content a bit.

 

Go back to your text editor and add another line to your page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>My first web page</title>
</head>

<body>
	This is my first web page
	How exciting
</body>

</html>

Look at the document in your browser.

You might have expected your document to appear as you typed it, on two lines, but instead you should see something like:

This is my first web page How exciting.

This is because web browsers don’t usually take any notice of what line your code is on. It also doesn’t take any notice of spaces (you would get the same result if you typed “This is my first web page How exciting”).

If you want text to appear on different lines, you need to explicitly state that.

Change your two lines of content so that they look like this:


<p>This is my first web page</p>
<p>How exciting</p>

The p tag is for paragraph.

Look at the results of this. The two lines will now appear on two lines.

Think of the HTML content as if it were a book – with paragraphs where appropriate.

Emphasis

You can emphasise text in a paragraph using em (emphasis) and strong (strong emphasis). These are two ways of doing pretty much the same thing, although traditionally, browsers display em in italics and strong in bold.


<p>Yes, that <em>is</em> what I said. How <strong>very</strong> exciting.</p>

Line breaks

The line-break tag can also be used to separate lines like this:


This is my first web page<br />
How exciting

However, this method is over-used and shouldn’t be used if two blocks of text are intended to be separate from one another (because if that’s what you want to do you probably want the p tag).

Note that because there’s no content involved with the line-break tag, there is no closing tag and it closes itself with a “/” after the “br”.

HTML Beginner Tutorial – Headings

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 8:31 pm - 606 views

The p tag is just the start of text formatting.

If you have documents with genuine headings, then there are HTML tags specifically designed just for them.

 

They are h1, h2, h3, h4, h5 and h6, h1 being the almighty emperor of headings and h6 being the lowest pleb.

Change your code to the following:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>My first web page</title>
</head>

<body>
	<h1>My first web page</h1>

	<h2>What this is</h2>
	<p>A simple page put together using HTML</p>

	<h2>Why this is</h2>
	<p>To learn HTML</p>
</body>

</html>

Note that the h1 tag is only used once – it is supposed to be the main heading of the page and shouldn’t be used multiple times.

h2 to h6 however, can be used as often as you desire, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.

Page 4 of 8« First...«23456»...Last »
« Previous Entries
Next Entries »

Translator

English flagItalian flagKorean flagChinese (Simplified) flagChinese (Traditional) flagPortuguese flag
German flagFrench flagSpanish flagJapanese flagArabic flagRussian flag
Greek flagDutch flagBulgarian flagCzech flagCroat flagDanish flag
Finnish flagHindi flagPolish flagRumanian flagSwedish flagNorwegian flag
Catalan flagFilipino flagHebrew flagIndonesian flagLatvian flagLithuanian flag
Serbian flagSlovak flagSlovenian flagUkrainian flagVietnamese flagAlbanian flag
Estonian flagGalician flagMaltese flagThai flagTurkish flagHungarian flag
By N2H

Links

Blogs We Read

Recent Articles

Recent Comments

Tag Cloud

MixedSoup Site Uptime - Web Site Monitoring Service

Options

Enter your email address:

Delivered by FeedBurner

Technology Blogs - BlogCatalog Blog Directory

Text Link Ads

Pages

Categories

Blog Information Profile for programimi

Entries (RSS) and Comments (RSS).
Copyright 2007-2008 © ProgramimiCOM - Names of companies and products mentioned herein may be the trademarks of their respective owners.• Powered By ShqipoNET