What’s Splash Screen?

For those who are new to programming and haven’t heard of the term “Splash Screen”, let me first give a brief explanation about it. Splash screen is commonly found in iOS apps, as well as, other desktop applications. This is the first screen you see when launching an application. Usually, splash screen is an image covering the entire screen and disappears after the main screen is loaded.

iPhone splash screen dimensions

• Default@2x.png  ----------------------------------- 640w x 960h (iPhone 4)

• Default.png ------------------------------------------- 320w x 480h (for older iPhones)

iPad splash screen dimensions

• Default - Landscape.png   ---------------------- 1024w x 748h

• Default - Portrait.png        ----------------------   768w x 1004h

• Default - PortraitUpsideDown.png -----------   768w x 1004h

• Default - LandscapeLeft.png ------------------  1024w x 748h

• Default - LandscapeRight.png ----------------  1024w x 748h

Approximate Conversion from Points to Pixels

Here's a chart that converts points to pixels (and ems and %). It's an approximation, which will depend on font, browser and OS, but it's a good starting point.

Points	Pixels	Ems	Percent
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

How and Why to Slice Web Images

It's often debated whether or not slicing Web graphics actually makes them load faster. Some people will tell you that slicing an image does not reduce the overall size or load time and it's our human perception that makes it seem like the page is loading faster. Another group will tell you that slicing images can actually increase load time due to the additional simultaneous requests to the Web server. And then there is yet another group that will swear that slicing large images can significantly reduce the time it takes your pages to load.

 So, who's right and who's wrong?

Well, there's actually some truth in all of these arguments. It's true that the act of slicing an image will not decrease the file size in and of itself. Simply slicing and saving each section with the same compression settings is pointless; but by optimizing, you can reduce your images by several KB's and you will often get a better looking image too. In this scenario, it's not the act of slicing that reduces the download time, it's the act of compressing each slice to optimal settings.

We'll explore this further with some examples in a bit, but for now here's a brief explanation: You may have an image where some areas compress better as GIF and other areas compress better as JPEG. If large portions of the image have solid colored areas, they can be eliminated completely and replaced with a background color in your table layout. It's extremely important to understand how compression works in order to properly place your slices for the best results.

In addition to optimizing, other reasons for slicing Web graphics are:

1. when you can repeat or stretch a single small image to fill a larger space,
2. creating mouse rollovers and clickable image maps
3. animating portions of a large image.

We'll closely examine each of these scenarios in the following examples:

Example One is a splash page for a Web site that was created in ImageReady. In this example, slicing allowed us to create rollovers, make portions of an image clickable, and strike a nice balance between file size and image quality.

Example Two is a Web page with an expanding border that enhances the page without adding a great deal of load time. A small image was sliced and coded in a way that it stretches to fill the available space instead of using a large image.

Example Three is a large animation that was sliced into four sections to isolate the animated areas. This resulted in better animation, improved image quality, and less waiting time to see the image.

Related Links contains additional resources for slicing and optimizing images, creating mouse rollovers, coding table layouts, plus tutorials for slicing in several programs.

Remove google chrome yellow border from input & select tags

Use below style to remove the yellow a thicker border on :focus in Google Chrome browser.

outline: none

Differences Between HTML4 and HTML5

The standards setting body for all the latest versions of HTML, or Hyper Text Markup Language, is The World Wide Web Consortium – which is also known as W3C.

Differences Between HTML4 and HTML5

The HTML in a website helps the Internet browsers to render the web designs or webpages for the website visitors. Therefore, in order to improve this rendering experience, the W3C has introduced the new HTML5, which is believed to be far more effective, efficient and easy to use.

Various features are added in HTML5, which were not present in HTML4. Following is a list of the top 5 differences between HTML4 and HTML5.

1) HTML4 vs HTML5 – APIs

A great difference between HTML4 and HTML5 is that the HTML5 is introduced with several new APIs. Application Programming Interfaces or APIs aim to provide a better and improved web application development system. It also rectifies the shortcomings of HTML4 in this regard.
For instance, by using HTML5, you can eliminate the requirement of any third party application to play audio and/or video files. For example, Flash is no longer required to play at least the supported files.

2) HTML4 vs HTML5 – Deletion of Unnecessary Elements

HTML5 has also deleted of a couple of unnecessary elements. Many elements, which mainly focus on the presentation and visual aspect of a website, have now been replaced by more appropriate platforms.
For instance, in HTML5, the TT and U tags, acronym, applet, dir, font, strike and center etc. have been replaced by the CSS or Cascadian Style Sheets.

3) HTML4 vs HTML5 – More Flexibility

Another great difference between the HTML4 and HTML5 is that of the flexibility. HTML5 is believed to be more flexible than its predecessor. The new version is significantly more flexible when it comes to handling inaccurate syntax.
Unlike HTML4, HTML5 specifies the related parsing and lexing rules. This flexibility enables it to show similar results, even if there is a slightly inaccurate syntax.

4) HTML4 vs HTML5 -  New Elements

Unlike HTML4 that used common webpages structures like, columns and headers etc. HTML5 is preloaded with many elements to structure the webpages.
These new elements include:

• Header
• Footer
• Section
• Article
• Nav
• Aside

An important thing about these new elements in a webpage’s structure is that each element has a specified, useful and unique function.

5) HTML4 vs HTML5 – More Powerful

HTML5 is believed to be significantly more powerful than its previous version. For example, it can not only play audio and video files on its own, but it is also able to run video games in the Internet browser on its own.