HTML-UI-CSS « Intelligrape Groovy & Grails Blogs

Posts Tagged ‘ HTML-UI-CSS ’

4 Principles of well-designed web UI

Posted by on November 30th, 2012

Web Designing is nowadays not only just the way to promote our product & services, but is designed and coded to make the website user friendly. It guides user to learn and enjoy what they are doing which makes user to visit your website regularly and explore what you have to share.

Here are few points :

  1. Placements : Placement of content is one of the most important part of designing which makes user attract or ignore your web page.  A good design is with heading, subheadings, paragraph, bullets etc. and their proper usage.
  2. Proper Vocabulary : The heading, subheading, forms, menu, links should be named according to users understanding  with the most common terms, and should not be named according to user’s likes and creativity.
  3. Typography and Whitespace : The usage of fonts and whitespace is the most important thing on the webpage, which makes the user comfortable/uncomfortable with your webpage. Your fonts should have sufficient whitespace according to your design, so that things don’t become hoch-poch and user simply gets what your website speaks.
  4. Flow : The other most important thing is flow of your page, like how your content is placed. For example – if you are working with an NGO site, the donate button should be placed on the first half of your page from the top, and should be highlighted.

Thanks.
Rajan Shergill
rajan@intelligrape.com
https://twitter.com/RajanShergill3

Tags: , ,
Posted in Grails, HTML-UI-CSS, WordPress
No Comments »

HTML5 Offline Applications – IndicThreads Conference PPT

Posted by on October 31st, 2012

Hi,

 

Recently i presented in “IndicThreads 2012″ conference on the topic “HTML 5 Offline Applications”.

 

You can view the slides at Slideshare at: http://www.slideshare.net/kushallikhi/indic-threads-delhisessionhtml5-offline-applications

 

Topics which are discussed in this presentation are:

  1. Desktop Vs Web(HTML 4)
  2. Desktop Vs HTML4 Vs HTML5
  3. Why Offline Apps
  4. Why Local Storage of Data
  5. Type Of Caches
  6. The Manifest File (Resources Cache)
  7. Invalidating The Manifest
  8. DOM Events for Offline cache
  9. Debugging
  10. Local Storage vs Session Storage vs WebSQL vs Indexed Storage vs File System

 

Hope it is useful.
Regards
Kushal Likhi

Tags: , ,
Posted in HTML-UI-CSS
1 Comment »

Using Pixel Perfect

Posted by on October 25th, 2012

Hello everybody,
For the last couple of years, I have been working with HTML and CSS and lot of times we need to match our HTML page with the client sent PSDs. Firefox provides an add-on called Pixel Perfect for this. It helps us to overlay jpg files (extracted from the PSDs) on the HTML page created by the UI developer.

This is how you can use this feature:

1. First of all, you have to install the Pixel Perfect add-on in Firefox.
2. Adding jpg file to the add-on – In latest version of Firefox the add overlay button (which used to be on the top-left corner) is missing. So in the new version, to make your file available to add-on you have to copy jpg file and paste it into user_overlays folder present in content directory of your Pixel Perfect installation folder.

Pixel Perfect

3.Now your jpg will overlay on the web page. You can set the opacity and position of the overlay with the help of Options section as shown in the above screenshot.

Hope it helps.:)
Rajan Shergill
rajan@intelligrape.com
https://twitter.com/RajanShergill3

Tags: , ,
Posted in Firebug, HTML-UI-CSS, Plugin
No Comments »

Setting count bubble in jQuery mobile Accordian Head

Posted by on October 18th, 2012

Sometimes we want to show count bubble in Accordion head that is different from the what jQuery mobile provides by default.

To add count bubble to Accordian head, we use following piece of code:

</pre>
<h2>Heading<span class="ui-li-count">10</span></h2>
<pre>

But it doesn’t give us the desired output and it looks like following:



If we want to set count bubble in Accordian head as per our use case , we have to add following css:


.ui-collapsible-heading .ui-btn-text{ display:block;}
.ui-collapsible-heading .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 10px;  border-radius: 1em 1em 1em 1em; background: linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;  border: 1px solid #CCCCCC; color: #222222;font-weight: bold;text-shadow: 0 1px 0 #FFFFFF; }

After making the changes, our Accordian head looks like following:

Count Bubble after fix

Hope it helps.:)
Rajan Shergill
rajan@intelligrape.com
https://twitter.com/RajanShergill3

Tags: , , ,
Posted in Android, Design Pattern, HTML-UI-CSS, Javascript/Ajax/JQuery, jQuery Mobile, Phonegap
4 Comments »

Getting started with jQuery Mobile

Posted by on September 15th, 2012

JQuery mobile provides set of features which are supported on almost all smartphones such as touch UI, ajax navigation, animated page transitions. Building jQuery mobile page is very simple, here’s how:

  1. A jQuery Mobile site must start with an HTML5 ‘doctype’ to take full advantage of all of the framework’s features.
  2. First of all you need jQuery, jQuery mobile, mobile theme stylesheets from CDN.
  3. Reference all styles & scripts in the head of page.
    4. <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.css"/>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
</head>
  4. A meta viewport tag in the head sets the screen width to the pixel width of the device.
  5. Inside body of html page a div with data-role of page is used as a wrapper for whole page.
  6. For header bar add a div with data-role of header.
  7. For content region add a div with a data-role of content & add content between this div.
    8. <body>
<div data-role="page">
        <div data-role="header">
                Header
        </div>
        <div data-role="content">
                <p>This is jquery mobile test page</p>
        </div>
        <div data-role="footer">
               ©intelligrape
        </div>
</div>
</body>
  8. There are many features provided by jQuery mobile. Here i am explaining one of them which is list. For list, simply add ul tag with attribute data-role of listview between

    .
  9. To make it look like an inset module add an attribute data-inset=”true”.
  10. For dynamic search filter just add another attribute data-filter=”true”.
    11. <div data-role="content">
    <ul data-role="listview" data-inset="true" data-filter="true">
          <li>Blue</li>
          <li>Black</li>
          <li>Green</li>
          <li>Yellow</li>
          <li>White</li>
    </ul>
</div>
Tags: , , , , ,
Posted in Android, Javascript/Ajax/JQuery, Phonegap, Plugin
No Comments »

Making a text vertical aligned in a DIV

Posted by on September 12th, 2012

Recently in my project I had to implement one page in which an image and the related text had to be shown side by side using the DIV tags, where the text needed to be centered vertically with respect to the image.

Example : Let’s take a scenario where we cannot use vertical-align with DIV to display the text in center adjacent to the image.

Here we are having an unordered-list having 2 DIV components containing an image and text respectively.


<ul><li>

<div class="image"></div>

<div class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</li></ul>

To make the DIV adjacent to each other we have applied the following CSS. But still it does not solve our use case to centrally align the text in DIV as specified above.


ul{ list-style:none; margin:0px;}

ul li{  margin-bottom:20px;}

ul li .image{ border:1px solid #666; height:100px; width:100px; float:left; margin-right:10px;}

ul li .details{  color:#000;  font-size:14px; min-height:100px; }

ul li .details p{ margin:0px;}

Here is the output of the above CSS. The text will start from top of the DIV and will be displayed as follows:

Image without vertical alignment of text

If we want the text to be centrally aligned in the text DIV, you need to do the following steps:

  1. Add following CSS property display:table to the LI element.
  2. Then you need to add CSS properties display:table-cell;  vertical-align:middle;  to the class named ‘details’ which is applied on DIV containing text.


ul li{  margin-bottom:20px; display:table;}

ul li .details{ display:table-cell; vertical-align:middle; color:#000;  font-size:14px; min-height:100px; }

After applying this CSS to your HTML, your output will look like this :

Image with vertical-align DIV

Hope it helps. :)

Regards.
Rajan Shergill
rajan@intelligrape.com
https://twitter.com/RajanShergill3

Tags: , , , , ,
Posted in HTML-UI-CSS
No Comments »

Common JSP/HTML & Javascript Problems

Posted by on August 31st, 2012

Some of the commonly faced problems are:

1) In case we give different width combinations for cells of different rows, the width combination of first row is accepted and subsequent combinations are neglected.


<tr>
<td width="30%">1.1</td>
<td width="50%">1.2</td>
<td width="20%">1.3</td>
</tr>

<tr><td width="50%">2.1</td>
<td width="40%">2.2</td>
<td width="10%">2.3</td>
</tr>

In this case width of first, second and third cell would be 30%, 50% and 20% for both the rows.

2) If we have defined width combinations for first row cells and we use both colspan and width attribute for cell of other row, then width attribute becomes ineffective.

Different cell width table

If we want to have table as shown above, we can have each row with one cell and each of the cells would have a table with single row. That ways, the cells of the row can be arranged as per our specifications and requirements.


<tr>
<td>
<table border="2px" width="100%">
<tr>
<td width="80%">New</td>
<td width="20%">Few</td>
</tr>
</table>
</tr>

<tr>
<td>
<table border="2px" width="100%">
<tr>
<td width="40%">New</td>
<td width="60%">Few</td>
</tr>
</table>
</td>
</tr>

3) One of very common problems that we face in when working with javascript is that we do not get to know what error exactly occurred if the script is not working as expected. We can use try-catch blocks, just as we do in java.

A very basic example:


function division(){
try{
var c = 1/x;
alert(c);
}

catch(e){
alert(<a href="http://e.name" target="_blank">e.name</a> + " " + e.message)
}
}

Some javascript errors and their description:

Javascript error description

Hope it helps. :)

Regards.

Vivek Sachdeva

vivek.sachdeva@intelligrape.com

@vivek_sach

Tags: , , , ,
Posted in HTML-UI-CSS, Javascript/Ajax/JQuery
No Comments »

Appending anchor tag to the url on server side using fragment parameter in Grails

Posted by on August 28th, 2012

Hi,

Recently I had come across one of the cool grails redirect parameter named ‘fragment’ providing cool feature of forming relative link with an anchor tag/name.


Generally, we can simply call 

window.location.href=http://yourLink#anchorName

It will focus you to the anchor name specified in relative link means scroll the page to the anchored tag who’s anchor name is specified by you on HTML element as attribute id.

 
“anchorName specified here in url will specify the initial focus on the content whose anchor name is specified in url after loading of the page”
 
For Example :
Suppose we have three divs with id tea, colddrink and coffee. When this page load with its url ending with hash tag #coffee, it will focus on the page content containing the div with id coffee . i.e Page will be scrolled to the content where div with id coffee is found, while loading the page.
 
To generate the url with anchor name on server side, we use grails redirect parameter named ‘fragment’.

Defined as in Grails Docs for redirect , Fragment : The link fragment (often called anchor tag) to use.

we simply need to write in our grails controller : 

redirect(controller:'product',action:'list',fragment:'coffee');

It will form the url http://domainname.com/product/list#coffee. When the view is being rendered and while loading of HTML, page will be scrolled to the content where div with id coffee is found.

I hope it will help you in solving your use cases related to it :)

Thanks,
Tarun Pareek
tarun@intelligrape.com
http://in.linkedin.com/in/tarunpareek
https://twitter.com/TarunPareek_
More Blogs by Me

Tags: , ,
Posted in Grails
No Comments »

Replace All using JQuery and Regex

Posted by on August 24th, 2012

I recently found out that use of Regex with jQuery and replace function can turn out to be a very powerful tool for replacing/loading data in html dynamically

The use of replace is made like 

var a = "Some text here text";
a=a.replace(/text/g,"one")

This will replace all “text” with “one”

Now imagine how good it would be if we could replace the part of html like “##title##” with a title’s value in a JSON.
We would be able to replace/load an entire html code dynamically by merely sending a JSON (or a list of JSON) that would replace the content of HTML in javascript.

Let us consider that we have a html code which is somethinng like: 

<a title='##title##' onclick='showRecipeDetail(\"##friendlyUrl##\", this)'> <img src=\"##imageUrl##\" height='75' width='75' /><div class='recipeTitle'>##title##</div></a>

And we want to load this html with JSON content:

{{title:"abc", friendlyUrl:"xyz", imageUrl:"123"},{title:"pqr", friendlyUrl:"stu", imageUrl:"456"}}

What we will do is that we will identified the values to be replaced by using regex and then replaced all of them using replace function. For eg.:

var data= [{title:"abc", friendlyUrl:"xyz", imageUrl:"123"},{title:"pqr", friendlyUrl:"stu", imageUrl:"456"}]
var HTML_Template = "<a title='##title##' onclick='showRecipeDetail(\"##friendlyUrl##\", this)'> <img src=\"##imageUrl##\" height='75' width='75' /><div class='recipeTitle'>##title##</div></a>";
jQuery(data).each(function(index, recipe) {
			var html = HTML_Template;
			jQuery.each(recipe, function(key, value){
				var regExp = new RegExp("##" + key + "##", 'g');
				html = html.replace(regExp, value)
			});
        });

And hence we will have a our html replaced by merely few line of javascript code and a list of JSON (which we might be getting from ajax responce).

Hope this blog was helpful to you.. :)

Thanks and Regard,
Gaurav Sharma
(gauravs@intelligrape.com)

Tags: , , , ,
Posted in HTML-UI-CSS, Javascript/Ajax/JQuery
3 Comments »

Sprite Up !!! Automate your process of creating sprites.

Posted by on June 23rd, 2011

Hi all,

In the past few days, I was given a push to find a suitable method that allowed us to automate the much needed but  painstaking of creating sprites for webpages to improve their performance.The problem was that going through the process of spriting images was a tedious process for a person not used to Photoshop tools and meticulous image adjustments in the corresponding Css.
After spending some time with Mr Google, I stumbled upon an application that allowed us to automate the process, leaving the task of spriting images and adjusting the corresponding css upto the application.

Lets take a look at it. I’m sure that even if you give it 1 shot, you are bound to appreciate the ease of spriting your images to give it another go.

First things first, get SMARTSPRITES : - http://csssprites.org/.

Once you’ve got that done, all you’ve got to do is put in place holders to indicate that a particular image is to be included in the spriting process.
To do that indicate where you would like the sprite to be placed with something like this at the top of your css …

 /** sprite: myspriteVertical; sprite-image: url('../images/myspriteVertical.png'); sprite-layout: vertical */ 
sprite: myspriteVertical  - This is the reference for the final image to be used in the css
sprite-image: url(‘../images/myspriteVertical.png’)  -This specifies the path of the final image.
sprite-layout: vertical  - It specifies the layout of images in your sprite. It can be vertical, horizontal or repeating.

Next go to the place in the css where you have an image. For example, my Css had something like

.home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px; background:url("../images/header-top.png") no-repeat 0 0;}
Now for this to application to recognize candidate images the background image property needs a separate line of it’s own. Although the refactor doesn’t take time, it becomes easier if you start off with separate lines the next time you create a css.
So I split it into something like
.home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px;
background-image:url("../images/header-top.png");
background-repeat: no-repeat;
background-position:0 0; }

Note that this image specifies a positioning of top,left. We need to provide that for our image position in the final sprite.

Now simply add placeholders as shown below.
.home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px;
background-image:url("../images/header-top.png");/** sprite-ref: myspriteVertical; sprite-alignment: left */
background-repeat: no-repeat;}
sprite-ref: myspriteVertical – This is the reference to the final sprite where it will be included as one of the images.
sprite-alignment: left – This specifies that the image is to be aligned on the left in the final sprite. This corresponds to the background-position attribute. Other than left, it can be top, bottom or right.

Now that we have provided an alignment in the placeholder, we need to delete the  ’background-position’ attribute in the original implementation, so that it doesn’t override the new changes.
Now here we need to take care that images that are positioned to align on the left or right have to be arranged on a vertical layout.
Images aligned top or bottom are to be horizontally aligned.
This arrangement needs to be taken care of otherwise you might have images popping out in the webpage at unwanted places.
Now repeat the procedure or putting placeholders for all the images you want to be sprited. Make sure to keep left/right positioned images in a vertical layout and top/bottom images in a horizontal layout

Once that’s done, we simply need to issue a command to generate to sprite and adjust the css properties to accommodate the new image. It will contain the css you have modified as an argument.
  ./smartsprites.sh ~/Desktop/Demo/web-app/css/demo.css

It will create a new file with the same name appended with a default extension value. The original files in the CSS will remain unchanged. To switch your design to CSS sprites, link these CSS files instead of the original ones in your HTML.
A plethora of options has been provided on the home page along with helpful documentation. Go through them if you encounter any problems.

Thats it .!!!! Check out your sprites

Notes :
1) Make sure to check the output of the sprite command. You should watch out for Warn and Error messages. It might show why your output isn’t coming out as it should.
2) Try to keep separate sprites for  horizontally aligned , vertically aligned and repeating images. Combining them will more often than not result in error-prone images.
3) Repeating images can be tricky. I had to redo a sprite since my image wasn’t repeating properly. Give it more than 1 shot and you’ll definitely get it right.

Hope this helps!!

Manoj Mohan
manoj(at)intelligrape(dot)com
Tags: , , ,
Posted in HTML-UI-CSS
No Comments »
« Older Entries