IMAGES for WEBSITE

24/8/13

Scalable Vector Graphics(SVG)

Scalable Vector Graphics(SVG) are a great solution for creating high-definition images for your website. SVG images are an XML-based file format that use code to create graphics.If you have Adobe Illustratoror CorelDRAWyou can use those applications to create an image and save it as an SVG. If you don't have one of these editors, I recommend using the open source editor Inkscapeto create your SVG. You can download it for free at http://inkscape.org/.
1. First create a simple vector image within your graphics editor and save the file as vector.svginside of your /images/folder within the /retina/folder.
2. Then create an HTML document called svg.htmlinside the /retina/folder. Inside the basic HTML structure, we'll embed the SVG graphic that we created in our image editor.
<object data="images/vector.svg" type="image/svg+xml"></object>
3. Next we'll create a circle and a rectangle using SVG.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="300" r="100" stroke="black" strokewidth="1" fill="orange" />
<rect x="300" y="200" width="200" height="200" fill="#009933" />
</svg>
4. If you open the page within your browser you'll see the graphics we just added. Try zooming in or resizing the page to see how sharp they remain.

If you'd like to use scripting with your SVG image you can use the <embed>tag. The embed tag (<embed src="vector.svg" type="image/svg+xml" />) still works with the same set of browsers, but if you're using an HTML4 or XHTML doctypeat the beginning of your page it is invalid code. This code is allowed if you are using HTML5. More information on this topic is available at
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML.

High-resolution web apps

1. Adding a Retina favicon is quick and simple, so we'll start with that. To add a highdefinition favicon you'll just need to save your 32 x 32 image as an .icofile. If your graphics editor doesn't let you save in that format then save it as a PNG instead. You can find tools online to convert the file from PNG to ICO, such as http://www.icoconverter.com/. Put the favicon.icofile in the root directory of your site.
2. Next save your app icon as four PNG files in the /retina/folder with the following sizes and names:
‰ 144 x 144 pixels – apple-touch-icon-144x144-precomposed.png
‰ 114 x 114 pixels – apple-touch-icon-114x114-precomposed.png
‰ 72 x 72 pixels – apple-touch-icon-72x72-precomposed.png
‰ 57 x 57 pixels – apple-touch-icon-precomposed.png
3. After you've created all four app icons, create a new HTML document called appIcons.htmlinside the /retina/folder. Within the <head>tag of the basic HTML structure we'll add the code to run as a web app.
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
4. Next within the <head>tag we'll add the code for each of these icons.
<link rel="apple-touch-icon-precomposed" href="apple-touch-iconprecomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="apple-touch-icon-144x144-precomposed.png" />
5. Then we'll add your startup images. Save your startup image as seven different PNG files inside the /retina/folder with the following sizes and names:
‰ 1536 x 2008 pixels – apple-touch-startup-image-1536x2008.png
‰ 2048 x 1496 pixels (landscape) – apple-touch-startup-image-1496x2048.png(rotate this image 90 degrees clockwise before saving)
‰ 768 x 1004 pixels – apple-touch-startup-image-768x1004.png
‰ 1024 x 748 pixels (landscape) – apple-touch-startup-image-748x1024.png(rotate this image 90 degrees clockwise before saving)
‰ 640 x 1096 pixels – apple-touch-startup-image-640x1096.png
‰ 640 x 920 pixels – apple-touch-startup-image@2x.png
‰ 320 x 460 pixels – apple-touch-startup-image.png
6. Now we'll add the code inside the <head>tag to display our startup images.
<link href="apple-touch-startup-image.png" media="(device-width:
320px)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image@2x.png" media="(devicewidth: 320px) and (-webkit-device-pixel-ratio: 2)" rel="appletouch-startup-image">
<link href="apple-touch-startup-image@2x.png" media="(devicewidth: 320px) and (device-height: 568px) and (-webkit-devicepixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-768x1004.png"
media="(device-width: 768px) and (orientation: portrait)"
rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-748x1024.png"
media="(device-width: 768px) and (orientation: landscape)"
rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-1536x2008.png"
media="(device-width: 768px) and (orientation: portrait) and
(-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-1496x2048.png"
media="(device-width: 768px) and (orientation: landscape) and
(-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
7. Finally we'll add a paragraph after the <head>tag so that our website has some content.
<p>Testing out some app icons</p>
8. If you open this page on your device and save it to your home screen as an app (in the Safari browser in your mobile press the box and arrow icon) you'll see the icon and startup image displayed.

Fonts as icons( RSS button )

Web fonts are typically used for applying different typefaces to your designs, but they can also be used to add high-definition icons. Typefaces that are made up of symbols and shapes are called dingbats.Web designers can find useful sets of dingbats that are specifically tailored for building websites. These include icons for social media, shopping carts, e-mail, zoom, print, and other images that are useful for designing user interfaces. You could even create your own font with custom icons for your site.
1. To get started, move the .eot, .svg, .ttf, and .wofffonts that you downloaded, into your /retina/folder. Then create a new HTML document called dingbats.html inside the /retina/folder. Within the basic HTML structure we'll add some CSS code to include our web font.
<style>
@font-face {
font-family: 'ModernPictogramsNormal';
src: url('modernpics-webfont.eot');
src: url('modernpics-webfont.eot?#iefix') format('embeddedopentype'),
url('modernpics-webfont.woff') format('woff'),
url('modernpics-webfont.ttf') format('truetype'),
url('modernpics-webfont.svg#ModernPictogramsNormal')
format('svg');
}
2. Then we'll add a class that lets us create an RSS button.
.rssButton {
background: #ff9c00;
border-radius: 8px;
cursor: pointer;
height: 50px;
width: 50px;
margin: 20px;
font-family:'ModernPictogramsNormal';
font-size: 50px;
color: #fff;
line-height: 15px;
text-align: center;
}
</style>
3. Then we'll add the HTML code to display our button. The RSS icon is a "^" character,
which is Shift+ 6on the keyboard.
<div class="rssButton">^</div>
4. If you run this code inside of your browser you should see the RSS button. Notice that
the button is just as sharp on a Retina device while zooming in

Embedding fonts

To add CSS web fonts, @font-faceis used. It has been around for a while now, but the drawback has always been a lack of browser support for various font formats. These options include .eot, .otf, .ttf, and .woff. Web Open Font Format(WOFF) is the latest standard that has been adopted by most font foundries and web browsers. WOFF will likely be the primary format in the future. This recipe will cover how to add a web font to your page that includes support for older browsers and then we'll discuss font services
1. To get started, move the .eot, .svg, .ttf, and .wofffonts that you downloaded, into your /retina/folder. Then create a new HTML document called cssFonts.html inside the /retina/folder. Within the basic HTML structure we'll add our CSS code to include our web font.
<style>
@font-face {
font-family: 'BevanRegular';
src: url('Bevan-webfont.eot');
src: url('Bevan-webfont.eot?#iefix') format('embeddedopentype'),
url('Bevan-webfont.woff') format('woff'),
url('Bevan-webfont.ttf') format('truetype'),
url('Bevan-webfont.svg#BevanRegular') format('svg');
}
2. Then we'll add a class to display our new font as a large header.
.largeHeader {
font-size: 40px;
font-family: 'BevanRegular', Arial, sans-serif;
font-weight: normal;
}
3. Next we'll add a final class for a small header.
.smallHeader {
font-size: 22px;
font-family: 'BevanRegular', Arial, sans-serif;
font-weight: normal;
}
</style>
4. Then we'll add the HTML code to display our new headers.
<h1 class="largeHeader">Our New Large Header</h1>
<h2 class="smallHeader">This header isn't as large</h2>
5. If you run this code inside of your browser you should see the new fonts. Notice that the text looks just as sharp on a Retina device.

Using code instead of images

1. To get started, create a new HTML document called cssGraphics.htmlinside the /retina/folder. Then inside the basic HTML structure we'll add some CSS code to create a button.
<style>
.buttonArea {
margin: 50px;
}
.button {
background: #7999ff;
background: -webkit-linear-gradient(#7999ff 0%, #002c62 100%);
background: linear-gradient(#7999ff 0%, #002c62 100%);
border-radius: 60px;
box-shadow: 1px 1px 4px #666;
cursor: pointer;
padding: 10px 40px;
color: #fff;
font-size: 20px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 2px #000;
}
2. Then we'll create a diamond for our first CSS shape.
.diamond {
background: #000;
margin: 40px 20px;
width: 50px;
height: 50px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
3. Next we'll create a circle with CSS.
.circle {
margin: 20px;
background: #000;
border-radius: 50px;
width: 50px;
height: 50px;
}
4. Finally, we'll create a triangle in CSS.
.triangle {
margin: 20px;
width: 0;
height: 0;
border-bottom: 25px solid transparent;
border-top: 25px solid transparent;
border-left: 25px solid #000;
}
</style>
5. Then we'll add the HTML code to display the button and shapes we created.
<div class="buttonArea">
<a class="button">Click Me</a>
</div>
<div class="diamond"></div>
<div class="circle"></div>
<div class="triangle"></div>
6. If you run this code in your Retina device you should see all the elements we just created. Note that for our example we only added a vendor prefix for Webkit (Safari and Chrome). You'll need to add other browsers' vendor prefixes for additional support.

CSS image-set

1. First, we'll create an HTML document called imagesetTest.htmlinside the /retina/folder to test our images. Inside of the basic HTML structure, add the CSS code to create a box and backgrounds to apply to it.

2. Then create some divtags in HTML with your two backgrounds to test them out.

3. If you are working on a Retina device (running Safari 6+, Chrome 21+, or another browser with image-setsupport) you will be able to open this page locally; if not, upload the folder to your web server and open the page on your device. You'll notice that the second background is much sharper than the first.

CSS media query

To build our media queries we'll be using the images that we have previously created. These include a Retina and normal version of a background image, an image sprite, and a border image with a photo to wrap it around.
1. To get started, create a new HTML document called mediaQueries.html inside the /retina/folder. Then inside of the basic HTML structure we'll add the non-Retina CSS code for a background image, an image sprite, and a border.
2. First, we'll add a boxstyle to hold our background image and the non-Retina version of the background image code.

3. Then we'll add the CSS code for our non-Retina image sprite.

.icon {
background: url(images/mysprite.png);
height: 40px;
width: 40px;
}

4. Next we'll add the code for a non-Retina border image.

.imageBorder {
border-width: 10px;
-webkit-border-image: url(images/myBorder.png) 10 repeat;
border-image: url(images/myBorder.png) 10 repeat;
}

5. Now we're ready to add a media query that will replace these images if the user is on a Retina Display.

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.background {
background: url(images/myBackground@2x.jpg) repeat;
background-size: 250px 150px;
}
.icon {
background: url(images/mysprite@2x.png);
background-size: 80px 80px;
}
.imageBorder {
-webkit-border-image: url(images/myBorder@2x.png) 20 repeat;
border-image: url(images/myBorder@2x.png) 20 repeat;
}
} /* END OF MEDIA QUERY */

To complete the CSS, we'll add the styles to position our icons and the closing style tag.

.icon1 {background-position: 0 0;}
.icon2 {background-position: -40px 0;}
.icon3 {background-position: 0 -40px;}
.icon4 {background-position: -40px -40px;}
</style>

6. To finish our code we'll just need to add some HTML to display our three types of images.

First, @mediabegins the media query statement. Then only screenspecifies that the device being used must be a screen (another media type could be print). Next, we specify that the min-device-pixel-ratiomust be equal to or greater than two. This targets the Retina Display (or any other similar display) because it has a pixel density that is two times greater than a standard display (some other devices use a ratio of 1.5). We also included the -webkitvendor prefix to make sure that our code works on older Safari browsers. To keep our code short we only included one vendor prefix, but if you want full support you may need other prefixes (-o, -ms, -moz). You can find out more about browser support at http://caniuse.com/. Finally, the brackets will enclose any style that we would like applied if these conditions are met