GIF / JPEG

Most designers wonder about one thing about their graphics. Should you use GIF or JPEG? Well, let us help you answer that question.

First of all, Compuserve’s 8-bit GIF (Graphics Interchange Format) supports 256 colors and has good compression but still has holds excellent picture quality. However, just because a GIF is 256 colors does not mean that it conforms to the 216 Internet color pallete. That pallete can be found here. The 24-bit JPEG (Joint Picture Experts Group) supports all 16.7 million colors, and has a greater compression ratio. However, the tradeoff is that JPEG doesn’t hold its picture quality as good as GIF.

Also, it depends on what kind of graphic you want to make. For regular pictures and graphics that have long stretches of the same color, JPEG is not the format to use. Here’s an example. The graphic below was created with only 73 colors:


GIF
Colors: 73
Size: 3.54K

JPEG
Colors: 73
Size: 2.74K

See the blemishes all over the JPEG, and see how clean the GIF is? But, if you’re scanning in a lot of photographs and multicolored graphics, then JPEG might be a better choice. Here’s another example. The graphic in this example was created with 4984 unique colors.


GIF
Colors: 249
Size: 6.41K

JPEG
Colors: 4667
Size: 6.54K

As you can see, this time the blemishes aren’t as visible in the JPEG because of the constant color variations. However, when you look at the file sizes, you can see that although the JPEG has more colors, it still can keep file size down. Conclusions:

 

  • If you’re concerned with how your picture will look, and its under 256 colors, use GIF.
  • If the picture is more than 256 colors try GIF first, but if it still looks grainy, use JPEG.
  • If only concerned with file sizes, use JPEG.
Read More
Domain Name Registries (K-Z)

K

.ke Kenya
.kg Kyrgystan
.kh Cambodia
.kz Kazakhstan

L

.lb Lebanon
.lc Saint Lucia
.li Liechtenstein
.lk Sri Lanka
.lt Lithuania
.lu Luxembourg
.lv Latvia
.ly Libyan Arab Jamahiriya

M

.mc Monaco
.md Moldova
.mg Madagascar
.mh Marshall Islands
.mk Macedonia
.mm Myanmar
.mn Mongolia
.mo Macau
.mq Martinique
.mr Mauritania
.ms Montserrat
.mt Malta
.mu Mauritius
.mw Malawi
.mx Mexico
.my Malaysia

N

.na Namibia
.nc New Caledonia
.nf Norfolk Island
.ni Nicaragua
.nl The Netherlands
.no Norway
.nu Niue
.nz New Zealand

O

.om Oman

P

.pa Panama
.pe Peru
.ph Philippines
.pk Pakistan
.pl Poland
.pm St. Pierre and Miquelon
.pn Pitcairn
.pr Puerto Rico
.pt Portugal
.py Paraguay

Q

.qa Qatar

R

.re Reunion
.ro Romania
.ru Russia
.rw Rwanda

S

.sa Saudi Arabia
.sb Solomon Islands
.sc Seychelles
.sd Sudan
.se Sweden
.sg Singapore
.sh St. Helena
.si Slovenia
.sj Svalbard and Jan Mayen Islands
.sk Slovakia
.sm San Marino
.sn Senegal
.so Somalia
.st Sao Tome and Principe
.su USSR (former)
.sv El Salvador
.sz Swaziland

T

.tc The Turks & Caicos Islands
.td Chad
.tf French Southern Territories
.th Thailand
.tj Tajikistan
.tm Turkmenistan
.tn Tunisia
.to Tonga
.tp East Timor
.tr Turkey
.tt Trinidad and Tobago
.tv Tuvalu
.tw Taiwan
.tz Tanzania

U

.ua Ukraine
.ug Uganda
.uk United Kingdom
.um United States Minor Outlying Islands
.us United States
.uy Uruguay
.uz Uzbekistan

V

.ve Venezuela
.vg Virgin Islands British
.vi Virgin Islands U.S
.vn Vietnam

W

.wf Wallis and Futuna Islands

Y

.yt Mayotte
.yu Yugoslavia

Z

.za South Africa
.zm Zambia
.zr Zaire
Read More
Domain Name Registries (A-J)
.ac Ascension Island
.ad Andorra
.ae United Arab Emirates
.ag Antigua and Barbuda
.ai Anguilla
.al Albania
.am Armenia
.ao Angola
.ar Argentina
.as American Samoa
.at Austria
.au Australia
.az Azerbaijan
.ba Bosnia and Herzegowina
.be Belgium
.bf Burkina Faso
.bg Bulgaria
.bh Bahrain
.bi Burundi
.bm Bermuda
.bn Brunei Darussalam
.br Brazil
.bt Bhutan
.bv Bouvet Island
.by Belarus
.bz Belize

.ca Canada
.cc Cocos (Keeling) Islands
.cd Zaire
.cf Central African Republic
.cg Congo
.ch Switzerland
.ci Côte d’Ivoire
.cl Chile
.cm Cameroon
.cn China
.co Colombia
.cr Costa Rica
.cu Cuba
.cx Christmas Island
.cy Cyprus
.cz Czech Republic
.de Germany
.dj Djibouti
.dk Denmark
.do Dominican Republic

.ec Ecuador
.ee Estonia
.eg Egypt
.es Spain
.et Ethiopia
.fi Finland
.fj Fiji
.fk Falkland Islands
.fm Micronesia
.fo Faroe Islands
.fr France

.gb United Kingdom
.ge Georgia
.gf French Guiana
.gg Guernsey
.gh Ghana
.gi Gibraltar
.gl Greenland
.gn Guinea
.gp Guadelope
.gq Equatorial Guinea
.gr Greece
.gs South Georgia and the South Sandwich Islands
.gt Guatemala
.gu Guam
.hk Hong Kong
.hm Heard and McDonald Islands
.hn Honduras
.hr Croatia
.ht Haiti
.hu Hungary

.id Indonesia
.ie Ireland
.il Israel
.im Isle of Man
.in India
.io British Indian Ocean Territory
.ir Iran
.is Iceland
.it Italy
.je Jersey
.jo Jordan
.jp Japan
Read More
ASCII Chart

The ascii chart below displays the ascii code to use on your web sites for maximum compatibility. By using the proper ascii value rather than cut and paste, you can assure that your code will properly validate and even more importantly render correctly in all browsers. Updated to include Euro Symbol – #128.


CharacterHTMLAlternate HTMLExplanation
 � –  Unused
 	 Horizontal tab
 
 Line feed
  –  Unused
 
 Carriage Return
  –  Unused
Space  Space
!! Exclamation mark
"""Quotation mark
## Number sign
$$ Dollar sign
%% Percent sign
&&&Ampersand
'' Apostrophe
(( Left parenthesis
)) Right parenthesis
** Asterisk
++ Plus sign
,, Comma
-- Hyphen
.. Period (fullstop)
// Solidus (slash)
:: Colon
;&#59; Semi-colon
<&#60;&lt;Less than
=&#61; Equals sign
>&#62;&gt;Greater than
?&#63; Question mark
@&#64; Commercial at
[&#91; Left square bracket
\&#92; Reverse solidus (backslash)
]&#93; Right square bracket
^&#94; Caret
_&#95; Horizontal bar (underscore)
`&#96; Acute accent
{&#123; Left curly brace
|&#124; Vertical bar
}&#125; Right curly brace
~&#126; Tilde
 &#127; Unused
&#128; Euro Symbol
 &#129; Unused
&#130; Low single comma
quotation mark
ƒ&#131; Function sign
&#132; Low double comma
quotation mark
&#133; Ellipses
&#134; Dagger
&#135; Double dagger
ˆ&#136; Caret
&#137; Per mile sign
Š&#138; Capital S Hacek
&#139; Less-than sign
Œ&#140; Capital OE ligature
 &#141; – &#144; Unused
&#145; Single beginning
quotation mark
&#146; Single ending
quotation mark
&#147; Double beginning
quotation mark
&#148; Double ending quotation mark
&#149; Dot, middle
&#150; En dash
&#151; Em dash
˜&#152; Tilde
&#153; Trademark symbol
š&#154; Small s Hacek
&#155; Greater-than sign
œ&#156; Small oe ligature
 &#157; – &#158; Unused
Ÿ&#159; Capital Y,
diæresis / umlaut
 &#160;&nbsp;Non-breaking Space
¡&#161; Inverted exclamation
¢&#162; Cent sign
£&#163; Pound sterling
¤&#164; General currency sign
¥&#165; Yen sign
¦&#166; Broken vertical bar
§&#167; Section sign
¨&#168; Diæresis / Umlaut
©&#169; Copyright
ª&#170; Feminine ordinal
«&#171; Left angle quote,
guillemot left
¬&#172; Not sign
­&#173;&shy;Soft hyphen
®&#174; Registered trademark
¯&#175; Macron accent
°&#176; Degree sign
±&#177; Plus or minus
²&#178; Superscript two
³&#179; Superscript three
´&#180; Acute accent
µ&#181; Micro sign
&#182; Paragraph sign
·&#183; Middle dot
¸&#184; Cedilla
¹&#185; Superscript one
º&#186; Masculine ordinal
»&#187; Right angle quote,
guillemot right
¼&#188; Fraction one-fourth
½&#189; Fraction one-half
¾&#190; Fraction three-fourths
¿&#191; Inverted question mark
À&#192;&Agrave;Capital A, grave accent

Read More
Apache Custom Error Messages

Most of the users that come to your site, will not know what a “Internal Server Error” or “404″ error is. They will not bother to check out the Apache manual either.

Custom error messages are not something to (just) show off with. In terms of (web-)usability, you are able to display a more friendlier or meaningful message to your users, and everyone will live happier ever after.

A lot of people still ask me how to add custom error pages to their website. Since some ISPs charge an arm and a leg to add them, here is how it is done – for free!

You log onto your shell and create a file called .htaccess in your document root. This can be achieved if you type “pico .htaccess”, “ee .htaccess” or “joe .htaccess” on the shell prompt. Let’s assume that you want to display a custom error page for “File not found”-errors (code: 404).

Put the following code inside the .htaccess:


ErrorDocument 404 /path/to/error/document.html


Save it. Viola! It’s all done.

You may also refer to a remote document:


ErrorDocument 404 http://errors.domain.com/404.php


The syntax is as follows:


ErrorDocument <3-digit-code> action


Can’t get enough of them?

Successful Client Requests
200 OK
201 Created
202 Accepted
203 Non-Authorative Information
204 No Content
205 Reset Content
206 Partial Content
Client Request Redirected
300 Multiple Choices
301 Moved Permanently
302 Moved Temporarily
303 See Other
304 Not Modified
305 Use Proxy
Client Request Errors
400 Bad Request
401 Authorization Required
402 Payment Required (not used yet)
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable (encoding)
407 Proxy Authentication Required
408 Request Timed Out
409 Conflicting Request
410 Gone
411 Content Length Required
412 Precondition Failed
413 Request Entity Too Long
414 Request URI Too Long
415 Unsupported Media Type
Server Errors
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported

Have fun!

Read More
Sorting database results

Databases offer a lot of flexibility when dealing with data. By spending some time upfront on the database design, it will save you plenty of headaches later on. Since the object of this to tutorial is not to elaborate on the advantages of using a database, I will skip to its limits.

The operations you can run on a database are always based on logic and numbers. So for example, when you run a store and sell T-Shirts, and you sort by size, “M” will always be sorted before “S”, even though it is not correct from a humanistic point of view.

Assuming we have a table called “Products” in the database, here is a set of data that you would typically deal with and a solution for sorting the data in a more useful way using the MySQL database.

Name    | Size

T-Shirt | L

T-Shirt | M

T-Shirt | S

T-Shirt | XL

T-Shirt | XS

And here is how you typically retrieve records:

SELECT Name, Size FROM Products ORDER BY Size

This query returns all products, however, not sorted “XS, S, M, L, XL” but in “L, M, S, XL, XS”.

The solution to this problem is a simple CASE (see: Control Flow Functions):

SELECT Name, Size,

CASE Size

WHEN XS THEN 1

WHEN S THEN 2

WHEN M THEN 3

WHEN L THEN 4

WHEN XL THEN 5

END

AS Sort_Order

FROM Products

ORDER BY Sort_Order ASC

This returns the products in order of their sizes. Use ASC (ascending) or DESC (descening) to change the order from smallest size to largest size or vice-versa.

That’s it, enjoy.

Read More
Javascript Status Bar

JavaScript gives you the ability to modify the status bar. For example it can be useful to display information about a link, when the user moves his mouse over it or you can display a small amount of information about the page the user is on in the status bar. You can also trick people into clicking a link, so be careful how you use it. If you play too many tricks on your visitors, they might not come back.

Status Bar Example:

<html>
<head>
<title>JavaScript Status Bar</title></head>
<body onLoad="window.status='Welcome!';return true">
  
</body>
</html>

onLoad tells the browser that as soon as your page finished loading, it will display in your current window’s status bar (window.status) the message “Welcome!”. The return true is necessary because with out, it won’t work.

Status Bar Example:

<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
  <a href="http://www.htmlcenter.com"
   onMouseOver="window.status='HTMLcenter';return true"
   onMouseOut="window.status='';return true">

  HTMLcenter

  </a>
</body>
</html>

Our second script listening shows how to modify the status bar using onMouseOver and onMouseOut with links. When the user moves his mouse over the link, it will display “HTMLcenter” in the status bar. When he moves his mouse away from the link the status bar will display nothing.

You could also have another message displayed in the status bar, when the user moves his mouse cursor away from the link. You have to change the onMouseOut statement in the link to for example: onMouseOut=”window.status=’You moved your cursor away from the link.’;return true”.

Read More
Javascript No Frames

This script is very important for you, if you have problems protecting your own pages and their content. People will just link your page in a frameset and make it seem that it is their own work. To break out of their frameset we use the following script.

Break Out of Frames:

<html>
<head>
<title>JavaScript - Break out of frames</title>
<script>
<!-- Hide Script
	if (top.location != self.location) {
	  top.location = self.location
	}
//End Hide Script-->
</script>
</head>
<body>
  A very important page,
  which you don't want to
  have stolen.
</body>
</html>

if (top.location != self.location), the script checks if the location of the current (self) page is the top most in the browsers window hierarchy. If so, there’s no need to change anything.

But if it does not match, your script will assign self.location to top.location (top.location = self.location) and make the current window reload and display your page and your page only! You can see a nice working example, if you try to load CNN’s site in a frame. You will see that the page reloads and displays CNN only.

Read More
Javascript Values

A piece of information in JavaScript is a value. There are different kinds of values, for example numbers or string. A string value is a word or words enclosed in quotation marks.

Variables contain values. For example variable siteName is assigned the string ‘HTMLcenter’. Another way to express is siteName = HTMLcenter, where the equals means ‘set to’, the variable siteName now contains the value HTMLcenter.

Keep in mind that JavaScript is case sensitive. Variable MyName is not the same as myName or myname. Variables can not contain spaces and you shouldn’t choose one of the JavaScript reserved words as name for a variable.

Values

TYPE

Number

String

Boolean

Null

Object

Function


DESCRIPTION

Any numeric value

Characters in quotes

True or False

Empty / No meaning

Any value associated with an object

Value returned by a function


EXAMPLES

1.23456789

“Hi, HTMLcenter!”

False

Read More
Javascript Redirection

The redirecting is a good way to check for the presence of JavaScript and in this case also for the version of JavaScript the user has.

window.location=”js_test_true.html”) resets the location property of the current browser window. In this case it sets it to “js_test_true.html”.

If the user doesn’t have the version of JavaScript required, which is JavaScript 1.1 in order to redirect, or JavaScript is turned off, it will display “Your browser doesn’t support JavaScript, it’s turned of in your browsers preferences or you don’t the latest version of JavaScript.”.

To specify the minimum requirement you just have to set language in the <script> tag as you can see in the Script Listening above. You can have different language versions in different scripts on your page, but there’s no way to say that for example our redirection script should only run with JavaScript 1.1, it will run with JavaScript 1.1 and greater.

Redirection Example:

<html>
<head>
<title>JavaScript Redirection</title>
<script language=javascript1.1>
<!-- Hide Script
	window.location="js_test_true.html")
//End Hide Script-->
</script>
</head>
<body>
  Your browser doesn't support JavaScript,
  it's turned off in your browsers preferences
  or you don't the latest version of JavaScript.
</body>
</html>
Read More

Join our team

Do you enjoy technical writing? Care about cross platform mobile apps, HTML5, Javascript and Ninja's? Write for us! We would like to hear from you, get in touch!