Archive for the 'design' Category

01st Sep 2009

CSS Support Guide for HTML Emails

The sole intent of my article is to demonstrate how one can use standards-based markup for HTML emails. Like it or not, HTML emails are here to stay. So, For those of you who are ready to improve the markup of your HTML emails, here is a quick compatability guide to HTML tags & CSS Properties for different web-based & PC based email environments.

HTML Tags PC based email environments Web-based email environments
  Outlook 2003/OE Gmail Yahoo Mail Windows Live Mail Hotmail
<style> element in the <head> yes no yes yes no
<style> element in the <body> yes no yes yes yes
<link> element in the <head> yes no no no no
<link> element in the <body> yes no no no no
           
CSS Properties          
background-color yes yes yes yes yes
background-image yes no yes no yes
background-position yes no no no no
background-repeat yes no yes no yes
border yes yes yes yes yes
border-collapse yes yes yes yes yes
border-spacing no yes yes no no
bottom yes no yes no yes
color yes yes yes yes yes
cursor yes no yes yes yes
display yes no yes yes yes
float yes no yes yes yes
font-family yes no yes yes yes
font-size yes yes yes yes yes
font-style yes yes yes yes yes
font-weight yes yes yes yes yes
height yes no yes yes yes
left yes no yes no yes
letter-spacing yes yes yes yes yes
line-height yes yes yes yes yes
list-style-image yes no yes no yes
list-style-position yes yes no yes no
list-style-type yes yes yes yes no
margin yes yes yes no no
opacity no no yes yes no
overflow yes yes yes yes yes
padding yes yes yes yes yes
position yes no no no no
right yes no yes no yes
text-align yes yes yes yes yes
text-decoration yes yes yes yes yes
text-indent yes yes yes yes yes
text-transform yes yes yes yes yes
top yes no yes no yes
vertical-align yes yes yes yes yes
visibility yes no yes yes yes
width yes yes yes yes yes
word-spacing yes yes yes yes yes
z-index yes no yes no yes

Concluding Words..

HTML emails that contain semantic markup and CSS gel very well with the most commonly used email clients. And for clients that offer poor or no support, the semantic markup allows for graceful degradation.
And, for all those who really do not want to handle the long list mentioned above, you always have these words to mention above your email “Having trouble reading this email? Click here to View it in your browser.” ;)

Posted by Posted by Supriya Agnihotri Jagani under Filed under design Comments 4 Comments »

21st Jul 2009

Creating Animation in Adobe Photoshop

You can follow the below mentioned steps, to create an animation in adobe photoshop:
[1] Create a new file in photoshop.
111
[2] Write some text, using text tool. For example “DIGICORP Information Systems Pvt. Ltd”
222
[3] Now create an duplicate layer of this text.(Click on window menu and click on “Layer”, It will open an “Layers Pallet”. In “Layers Pallet” there will a text layer which you have written. Now write click on the layer and click on duplicate.)
333
[4] Convert both the layers to “Rasterize Type” (Write click on the texts layers in layer pallet and click on “Rasterize Type” )
444
[5] Apply filter “Gaussian Blur” to the main text layer (Switch off the duplicate text layer and select the main text layer then go in filter menu > Blur > “Gaussian Blur”. Type value 3.5 and press ok)
555
[6] Now swich on the duplicate text layer and select both layers. Draw a circle selection
(For drawing circle selection, go in toolbox and select “Elliptical Marquee Tool” now click and drag on canvas. It will create circle)
666
[7] Now apply “layer Mask > Reveal Selection”
(Go to Layer menu > layer Mask > Reveal Selection)
777
[8] Remove the chain from layer
(In Layer Pallets, there is a chain in the duplicate layer with mask. Click on the chain to remove it. Also make sure that the mask area is selected)
888
[9] Now open “Animation” pallet
(Go to window menu and click on “Animation”. Now you can see the “Animation Pallet”. If you are using Photoshop CS4, you can see a Toggle button at bottom-right. It shows toggle button of “Timeline Animation” and “Frame Animation”. Select “Frame Animation”. You can see the red colored circled button in the image below.)
999
[10] Now, Create a new frame
(Click on create new frame button, highlighted in the image below)
000
[11] Now move the circle towards the right side of canvas
(Click on masked circle in canvas and drag it towards the right end of canvas)
1011
[12] Apply “Tween” Animation
(Click the top-right side on Animation Pallet, highlighted in image below. Now click on “Tween…” and tween dialog box will open. Here “Frames to add value” has default value of 5. This value shows how many frames you want to create between 2 given frames. The higher the number of frames you add, the smoother & slower will be the animation speed. Here, in this example we will keep the value as 25. You can also set the animation speed. Look at bottom of the Frame, there is “0.sec.” link; it shows the duration of the frame. You can also set the duration of each frame individually. For this example we will keep it as 0 to bring a smooth effect.
1012
[13] Now, Test your animation.
(Click on play button highlighted in image below to test the animation.)
1013
[14] Save your animation in gif format
(Go to file menu, click on “Save for Web” or “Save for Web & Devices” and select “gif” and also go to bottom side at “Animation > Looping Option” and select “forever” instead of “Once”. Press “save” button to save your file.
1014
Your gif animation is now ready to use!!
animation

Posted by Posted by rohit.dubariya under Filed under design Comments 8 Comments »

11th Jul 2009

Enclose inline javascript in valid XHTML

With HTML pages on the web, you can just include the required Javascript between <script> and </script> tags.

When you validate the HTML on your web page, the Javascript content is considered to be CDATA (character data), therefore ignored by the validator. But this is not true, if you follow the XHTML standards in creating your web page.

With XHTML, the code between the script tags is considered to be PCDATA (parsed character data) which is processed by the validator. Because of which, you cannot include Javascript between the script tags on your page(I mean inline javascript), without breaking your web page; as far as the validator is concerned.

This problem can be fixed by 2 different ways.

Make the Javascript external to the page, so that there is nothing between the script tags to stop the page validating.

Moreover, If it is just one or two lines of code, then it is probably not worth making an external script. So you would prefer to keep the content between the script tags and ask the validator to ignore the particular code. This can be done by placing the Javascript code within a CDATA tag like this:

script1

This fixes the validator.
The problem is that, some older web browsers don’t understand the CDATA tag and so this breaks your Javascript in those web browsers. Fortunately, Javascript multi-line comments start and finish with characters that do not cause validation errors. We can therefore comment out the CDATA tag, while leaving the Javascript content defined as CDATA as far as the validator is concerned. We do it like this:

script2

Now your Javascript code will be handled correctly by both newer browsers and validators that actually understand the XHTML DTD as well as by older web browsers that don’t understand XHTML and consider everything on the page as HTML.

Posted by Posted by Supriya Agnihotri Jagani under Filed under design Comments No Comments »

13th Jun 2009

Rounded Corners Using XHTML CSS (No Images)

Following is the script that I used in one of my recent projects. I had to create an rounded corner box with css (no images) & it had to be compatible in Firefox, IE 7, Safari & Chrome. I tried using different java-scripts & css coded available on “The net”.

Finally, I succeeded with it (combining the best code lines from all of them) & amazingly, without using any javascript :) .

Here is the code:

XHTML Required:

<div class=”box”>
<b class=”rtop”><b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b></b>
CONTENTS GOES HERE
<b class=”rbottom”><b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b></b>
</div>

CSS Required:

.container {background:#ccc; color:#fff; margin:0 15px}

.rtop, .rbottom{display:block; background:#fff}

.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background:#ccc}

.r1{margin: 0 5px}

.r2{margin: 0 3px}

.r3{margin: 0 2px}

.r4{margin: 0 1px; height: 2px}

and you are done..

You can click here to see the demo of above example.


Rounded corners done in this style will work on the following types of elements:

  • floated elements
  • absolutely positioned elements
  • fixed width elements
  • percentage width elements

Where The Rounded Corners Don’t Work

You can’t use this exact style with a fixed height or with padding on the container element. But you can solve that problem by creating a second container element that assigns your height or padding.

This technique doesn’t work on IE 5.x for Windows.

There are also some problems(not much visible) with text-indent in Internet Explorer.

I hope, this will be a useful piece of XHTML/ CSS code; for you guys out there who had to slice the images everytime the developer asked for an dynamic box with rounded corners.

Posted by Posted by Supriya Agnihotri Jagani under Filed under design Comments 1 Comment »

01st Jun 2009

First Trial To Objectize Objectville

We have our small menu ready now, we know what all we are going to serve in Objectville. Oops, it may seem strange if you are new here in Objectville. New readers, just have a look at New Restaurant In Town and continue here. Lets prepare class for each item
Classes we need to create:

    DoubleCheesePizza
    ItalianPizza
    FreshVeggiePizza
    Vegetable Sandwich
    Cheese Sandwich
    Aalu-matar Sandwich

We also need to take care of our ordering system in hotel so we need one attribute called “cost” in all of the above classes. We will have descriptions of each item. Keeping in mind likings of customers, we need to have thin crust pizzas, as well as thick crust pizza. So lets have a look at these classes.

Read More >>

Posted by Posted by vishal.shukla under Filed under Code, Uncategorized, design Comments No Comments »

30th May 2009

Objectville – New Restaurant In Town

Hi again,

After thinking for quite a while for what to post in the blog, I thought its not bad to go in Kathy’s way. :) If you didn’t ever try then just have one eye on any book of Kathy Sierra or you can say synonym of Kathy is “Head First” books. Just google out any of the “Head First” book and you will surely get “never read before” books.

So I finally decided that I will open one restaurant Objectville soon. But to make Objectville rock in the town, we will be serving very few fastfood only in the initial stage, however, we want to go long way so we need system with strong architecture. But we don’t even want to increase complexity of the system unnecessarily by just piling up different patterns without thinking whether its needed.

Read More >>

Posted by Posted by vishal.shukla under Filed under Code, design Comments No Comments »

29th May 2009

Shorthand css in Margin and Padding Properties

margin1 • In this property’s value takes for four side like top, right, bottom and left with 10px
margin1 • This value takes only from top with 10px
• This value takes only from right with 15px
• This value takes only from bottom with 20px
• This value takes only from left with 25px
margin2 • This value takes from top 10px, right 15px, bottom 20px and left with 25px
margin3 • This value takes from top and bottom with 10px and left and right 25px
margin4 • This value takes top 10px, right and left 25px and bottom 50px
[Note : Same thing we can use it in Padding also]

Posted by Posted by rohit.dubariya under Filed under design Comments No Comments »

29th May 2009

How to create a vector shape from a raster graphic image using Adobe Fireworks.

Creating vector shape from a raster graphic image:

Step 01

Open image in Adobe Fireworks,
Select magic wand tool from tools, click the cloud (or any object and convert it into path).

Incase you want to select more than one object, keep the shift key pressed & selct the objects with the magic wand.

Step 02

Go to the Select menu, convert marque to path.

Step 03

Vector shape (path) is now ready.

Step 04

You can change the colors from the properties (as shown in screenshot)

Posted by Posted by Amol Vinod under Filed under design Comments No Comments »

29th May 2009

Welcome To Object Oriented Era

Introduction :

My name is Vishal Shukla. I completed Bachelor Of Engineering studies in Information Technology from Gujarat University, in June 2008. I am working with Digicorp Information Systems Pvt. Ltd. since December, 2008 as Java Developer.

Its my hobby to tell others about my hobby :) . I love singing, playing musical instruments. Basically I am a Key board player.  I like to play Guitar, Flute also. In sports, I play cricket and table tennis.

Object Oriented  Programming had always been my favorite subject and so eventually I  biased towards Java. Java, OOPs and Design Patterns are my core competency. I have cleared SCJP certification with 93%.  I have worked with technologies like Struts 2.0, Hibernate 3.0, GWT. I am not having almost no experience in software industry compared to other writers in the blog. But I like to share my knowledge with other and I feel comfortable with OOPs concepts and it is my passion to design classes in object oriented way and keeping the code as much manageable as possible.

Why I Am Here:

Post title may seem strange as object oriented era is began since long time. As far as I have seen, software professionals (usually in java) generally love object oriented concepts and design patterns, however, there are really very rear who does truly understand what object orientation is, what patterns are meant for, what it demands in really implementing it and how easy your life becomes if we really use these. Most of the my posts will be towards implementing patterns in practice and how to code with object oriented methodology.

Posted by Posted by vishal.shukla under Filed under design Comments No Comments »

29th May 2009

HMVC Pattern For GUI Of Swing/GWT/Desktop Application

Why Pattern?

When developing client tier of application using html,  there are certain limitations in using patterns because code is going to be in xml so while developing Swing/GWT/Desktop application’s GUI, we have support of Inheritance, Polymorphism and other constructs of language, so in this world, we can play around with patterns, so if we use patterns properly, reusability can make our life easier and it may get worst if not used properly.

HMVC(Hierarhcical Model View Controller) Introduced:

HMVC can be seen as extended version of MVC pattern. We can divide our GUI into different GUI objects some of which will be for navigation purpose (Menubar), some for displaying/editing data(Grid/Tree/Forms) and others may be use for just layouting purpose. So we clearly identify three major aspect of GUI objects.

  1. Layouting – It is taken care by View in HMVC.
  2. Handling user interactions – Its Controller’s responsibility.
  3. Server Interactions And Hold Data Being Displayed – Model handles this.

In HMVC, we assign dedicated Controller and Model for each of these objects. It is not necessary to provide each of the GUI object its own controller and model. To keep it simple, we can give dedicated controllers and models only to all the Pages, Grid, Dynamic Tree and other major navigation areas e.g. ContentPanel.

Read More >>

Posted by Posted by vishal.shukla under Filed under design Comments No Comments »

« Previous Entries