Uncategorized

Web designer interview questions

Posted on May 5, 2009. Filed under: Uncategorized |

Few days back, I prepared a web designer interview-questions list. We required a good web interface/templates designer for asp.net projects. Knowledge of some programming especially javascripts was bonus points. Here is the questions that I prepared.

Web Standards
– Why would you choose XHTML over HTML?
– What web standards and guidelines do you follow for designing web sites?
– Why do you want to follow W3C standards? Is it really necessary to follow these standards?

Professionalism
– What are your steps of web page designing process (photoshop template or direct HTML template)?
– How are you flexible with your process and client communication?
– How do you make your website consistent among all the browsers?
– What are the tools that you use for web development? + other third party tools?
– How do you keep up-to-date with various standards and tools?

Technical Knowledge (HTML/CSS/PHOTOSHOP):
– How comfortable are you in writing hand-coded HTML?
– What is the difference between DIV and SPAN tags?
– Explain: padding/margin, display:none and visibility:hidden, stacked layers (positioning, z-indexing), floating objects
– How do you handle transparency in web-page elements
– What is the difference between vector graphics and raster images. How would you choose filetypes for publishing in web??
– What are RGB/CMYK/HSI color models?

Extra technical knowledge:
– Do you have any experience in making skins for DNN or other CMS systems?
– (Javascript) Do you have any experience in javascripts?
– (Javascript) How do you show some dynamic text in a DIV? Showing layers, popup controls?
– (Javascript) Form validations:
– How do you disable form submission when validation error occurs?
– applying MAXLENGH in textarea
– enabling/disabling form fields
– any knowledge of regular expressions
– (Javascript) Is there any javascript library that you have used?
– (XML/XSL) Do you have any experience in XML and in XSL transformations?
– (Flash) Do you have any experience in Flash? What are symbols in Flash? Can you do basic ActionScriptings?
– (ASP.NET) Do you have any experience in ASP.NET websites? Tell about challenges while working with programmers.

Optimizations:
– Do you consider Search Engine Optimizations (SEO) when making web designs?
– What are the things that you use or avoid to ensure the web page you designed is SEOed? (Like frames, headers, alt texts, js texts)
– How do you perform page-load optimizations?

Creativity:
– Which site do you think is best designed? (In your opinion, what is a good designed website and bad designed website?)
– Do you think that creativity is part of human nature or is it something that can be learnt?
– What do you most dislike about web design industry?
– What are other creative-thinking hobbies that you have? (like painting, photography, literature, ..)

Read Full Post | Make a Comment ( 9 so far )

ASP.NET facebook application “Hello World!”

Posted on February 8, 2009. Filed under: Uncategorized | Tags: , , , |

Here is a quick article to make a quick facebook application in ASP.NET that can be added to facebook pages as well.

First you need to setup a new application in facebook. You can do so in http://www.facebook.com/developers. I am not writing details of the application setup. Here is one nice link for its help: http://developers.facebook.com/get_started.php

Then download ‘Facebook Developer Toolkit’ from http://www.codeplex.com/FacebookToolkit and add references to your web-project.

Add a new aspx page, clean up all the contents of the page, even tag and tag. Facebook application does not support those tags. In this article, I will render contents using Response.Write()

In codebehind, inherit the page class from facebook.web.CanvasFBMLBasePage

Then create a page init handler subroutine as shown below:

fb-hello-world

Read Full Post | Make a Comment ( None so far )

DDL Triggers: Logging DB objects changes in SQL Server 2005

Posted on January 12, 2009. Filed under: Uncategorized | Tags: , , , , , , , |

We, SQL Server db coders, always lacked date modified filter option in management studio (or in enterprise manager). We always wanted that feature to be availabe in next Service Pack, or if not, in next version. But that never happened.

If you still don’t have solution to this – here are some good news: SQL Server 2005 comes with a new DDL triggers, using which we can track the changes in DB objects. And best thing about it is that it will take just few minutes to setup the log.

Here is how to do it:
1. First we create a log table, with necessary log fields as shown in figure 1.

2. Then we create a DDL-Trigger on the database (fig. 2) which gets triggered on any change to the database. We simply call EVENTDATA function, that returns a xml value that contains event details. We simply run a XQuery on the xml data to get necessary info, and save it to our log table.

DDL Trigger

fig-1: DDL Trigger

Trigger

fig-2: Trigger

Here is sample data in the table:

sample data

sample data

Also, if you are still stuck in some SQL Server 2000 database projects like me, you can still make use of the trigger by installing SQL Server 2005 and having your databases in 2000 mode (version 8).

In my team, we have created a simple DNN based UI, which allows us to list changes filtered by database, objects and date. Everybody simply creates an export file and puts it in svn at the end of the day. Then, all export files are combined in server database.

Read Full Post | Make a Comment ( None so far )

ASP.NET GridView multiple files upload

Posted on February 19, 2008. Filed under: Uncategorized | Tags: , , , |

This article is about implementing ajax-like files upload in ASP.NET GridView control with each row in the grid having a upload control. After so many responses to my previous articles in making ajax-like file uploads using iframe, I now am writing onto an advanced requirement. The requirement is to add a file upload control in every row of a GridView control and have ajax-like implemenation (using iframes).

I won’t be writing code lines in my blog, as there is no good mechanism in the wordpress blog editor. Hence, I would publish screenshots gif; and I will put the downloadable files at the end.

Let me start with an example db table. Suppose I have a simple table for students and I am required to upload a profile picture for each student. I am also required to show if the student already has a picture uploaded, and disable the upload feature for them. So, here is the simple db structure that I am going to use with some sample data. The column names are self-explanatory.

GridView Upload - db

In the codebehind page, I am binding the GridView control (gvUploads) with a datareader in a subroutine named BindStudentsGrid().

GridView Upload - BindGrid

In the aspx page, I have put a panel with a GridView control and a button control inside it. Once the button is clicked, each GridView row should upload the files, one at a time. In GridView control, I have one templated column, which has an iframe. The source of the iframe is the page itself, and has two parameters passed from querystring: First is MODE=UPLOAD, which lets the page to render only the upload controls (described below), and the second one is ID to pass the primary key (StudentID). If the picture is already uploaded, the iframe is not displayed, but a ‘File Exists’ text is displayed. Also, note the id and name of the iframe has the format upfrm# – the hash is for the StudentID.

GridView Upload - grid template

In the same aspx page, I also have another panel named pnlUpload which displayed the file-upload control in each row of the GridView control, within the iframe that was created above. In this panel, I have a image (imgLoader, to display upload animation), a label (lblMessage, to display upload result), a file upload control, and a hidden button (btnUpload, that initiates the server postback).

GridView upload - upload panel template

To display pnlUpload only for the grid iframe, I have a function CheckIFrameMode() and have invoked it from Page_Load handler. As mentioned above, to find out which panel needs to be displayed, I am using querystring parameter named MODE.

GridView Upload - pageload check

Now, here is the javascript function, that implements the trick. The algorithm is to find all iframes in the grid that has file specified. You can now see why the name of the frame has upfrm# pattern. To make ajax-like upload, animation is displayed by the codes in line#36-37 below. The upload of the file is triggered by hidden button, btnUpload – the code for it is in line#40 below. This function is first invoked by btnStartUpload in pnlMain. The function only triggers one file upload. Next upload is triggered after the completion of the current file upload.

GridView upload - JS function

Finally, what I have is btnUpload click handler routine, which saves the uploaded file and displays appropriate messages. At the end, the js function is called again using RegisterStartupScript() function. The js function when invoked at the client side, processes next row in the grid.

GridView upload - btnUpload handler

And that is all. Here is the screenshot of the result page. File for row#1 and #5 is already there, so there is no upload. For row#2, the file was just uploaded from the page. File for row#3 is in upload process. Row#4 is pending. Row#6 and #7 does not have file specified, so they won’t be processed.

GridView upload - screenshot

For applications like DotNetNuke or something with master pages, the generation of only the upload form (pnlUpload) is not easily possible. You can generate the form using Response.Write() (and ending the response with Response.End()) or you can use a different aspx page for the upload control section.

download the code

Read Full Post | Make a Comment ( 6 so far )

Hierarchical results in ASP.NET GridView

Posted on February 2, 2008. Filed under: Uncategorized | Tags: , , , , |

Here is one technique that I use in ASP.NET to show hierarchical data like categories tree, sitemaps listing, department/user-levels, etc. A GridView control is used instead of a TreeView control. The method does not require any complex coding and loops; and also does not require any xml file generation. It does, however, require a good stored-procedure (or a db script) to give a sorted resultset.

Lets start with the database table, Categories, which we have like shown below.
CategoryID is the primary key. ParentID is id of parent category, and if zero it is considered to be top level category.

Tree GridView - db table

First requirement is to get resultset sorted as per required. Here is a stored procedure code, which will populate the sorted resultset. This code works for three levels of depth of the categories. It can be easily changed to higher levels by adding Sort# column in the temp table and and writing additional INSERT INTO statement. One limitation of the query is that it does not handle infinite depth level.

Tree GridView - SP

Here is a sample resultset from the SP script:

Tree GridView - db resultset

Rest of the process in the UI is very simple. A GridView control is used and is databound to the above SP. Also, three CSS classes are required for each three levels. Then all we need to do is to define ItemTemplate of the GridView. CSS and ASPX codes are shown below:

Tree GridView - UI ASPX
Tree GridView - UI CSS

Here is the result page from the above codes.

Tree GridView - UI output page
Read Full Post | Make a Comment ( 14 so far )

ajax extensions file upload workaround

Posted on March 31, 2007. Filed under: Uncategorized | Tags: , , , |

In my previous post of “Upload files using asp.net ajax extensions,” I had written my approach that I implemented to upload files. As about 65% of the total clicks to my blog page is only to that post, I have decided to write a new post with complete codes for file upload. The code is fully functional and is tested in Firefox 2 and IE6.

The approach is much similar to my previous post, as it uses iframes. But in this project, I have created everything in a single file, so all codes can be handled easily. And coder will feel that s/he is completely implementing ajax extensions, in addition to users who will have experience of partial page postback.

In this simple project, I have written code to do file upload and display all files uploaded in a listbox without doing full page postback.

asp.net ajax extension - file upload project

 

 

 

download project file

.

.

NEW: Uploading files in a GridView (Feb 20, 2008).

.

.

Read Full Post | Make a Comment ( 48 so far )

Flash Image Streaming – Zoom and Pan

Posted on March 14, 2007. Filed under: Uncategorized | Tags: , , , |

Many flash developers are unknown to this technology – image streaming in flash. Take a look at this page:
Ch√Ęteau de Chenonceau -The pantry

Using the zoom tool, I could see all that is inside the far room that you can see in this picture. I also tried to find out the time in the clock placed in the cupboard at the right side, seems to be around 1. It is not so clear, but it is because of the type of clock.

This tool is way too cool.

Take a look at another such system:
Discovery Channel :: Alien Planet
A tool to achieve this is Zoomifyer – which you can find it at http://www.zoomify.com

There are three Zoomifyer products: Zoomifyer EZ, Zoomifyer for Flash, and Zoomifyer Enterprise.

As Zoomifyer EZ is free product, I was quick to download and test it. It even was way too simpler and quick to make zoomable flash page. The software actually cuts a large image to multiple small images, a swf movie is also created and the images are internally joined together when swf movie is viewed.

This would not be much concern for general flash developers like me (although I am not into flash for quite some time now); But I think it is not the exact image streaming. The complete product Zoomifyer Enterprise (US$795) seems to provide exact image streaming solution as it mentions to have Single-file (PFF) storage and Flash Communication Server integration.

Read Full Post | Make a Comment ( 1 so far )

Mixing your javascript into ajax extensions

Posted on March 13, 2007. Filed under: Uncategorized | Tags: , , |

After you start working deep in asp.net ajax extensions, you might sometimes need to write some of your additional javascript codes, and you will need them to integrate with the ajax extension system.

For example, suppose I need to populate a GridView control by doing an ajax callback, say with a Button click. I have the GridView in a <DIV style=”position:absolute;”> element. I want to show the DIV layer after the GridView is populated at the position where button was clicked.

Sounds simple and the old story isn’t it? But if you think little more, you might find this little interesting, because for this situation you will need to write some of your own javascript code before doing ajax callback and also after the completion of callback.

So here is my simple approach:

1. First I create the GridView control inside the DIV layer. The details of GridView in this post is not necessary. I also create the required button, and I put all of them in UpdatePanel.

<asp:UpdatePanel id=”upnlMain” runat=”server”>

<ContentTemplate>

<div id=”divLayer1″ style=”position:absolute;display:none;”>
<asp:GridView id=”GridView1″ runat=”server”></GridView>
</div>

<asp:Button id=”btnShowGrid” runat=”server” Text=”Show Grid” OnClick=”btnShowGrid_Click” OnClientClick=”return ShowGrid_Start(event);” />

</ContentTemplate>

<Triggers>
<asp:AsyncPostBackTrigger ControlID=”btnShowGrid” EventName=”Click” />
</Triggers>

</asp:UpdatePanel>

Note that I have used OnClientClick event for the button, to have javascript codes to execute before the ajax call is made, I will explain the javascript function ShowGridClick() a little later.

2. Now, in the code behind I write following btnShowGrid click handler:

Protected Sub btnShowGrid_Click(ByVal sender As Object, ByVal e As EventArgs)
‘ populate the GridView here.

ScriptManager.RegisterStartupScript(btnShowGrid, btnShowGrid.GetType, “key”, “ShowGrid_End();”, True)
End Sub

Here, the code calls the shared (static) method of the ScriptManager to register the javascript code, which will be executed in client side after the callback is completed. The only code is to call the javascript funtion ShowGrid_End().

3. So, as you might have understood the simple principle for our custom javascript codes: set required variables before ajax call in function ShowGrid_Start() and finally write final codes in function ShowGrid_End(). So here is the javascript code:

<script type=”text/javascript”>

function ShowGrid_Start(e) {
// store the mouse coordinates when button was clicked.
if (document.all) {
X = window.event.clientX + document.body.scrollLeft;
Y = window.event.clientY + document.body.scrollTop;
} else {
X = e.pageX;
Y = e.pageY;
}
document.GetElementById(“divLayer1”).style.left = X;
document.GetElementById(“divLayer1”).style.top = Y;

// return true to proceed with ajax call :: returning false would not trigger it.
return true;
}
function ShowGrid_End() {
document.GetElementById(“divLayer1”).style.display = “block”;
}

</script>

Read Full Post | Make a Comment ( 3 so far )

Uploading files using asp.net ajax extensions

Posted on March 13, 2007. Filed under: Uncategorized | Tags: , , , |

The current ajax extension (Version: 1.0.61025.0) does not support file upload within the UpdatePanel. I am not so sure why, but I have heard it to be because browser security limitations. As browsers do not allow direct access to user file system via javascript codes, and due to this reason the <input type=”file”> cannot be modified by javascripts and also the details of file cannot be accessed without any activex, not working of file uploads in ajax approach is quite obvious.

But, most of us all have seen the new generation internet mailbox system, which does upload files (attachments) in background without page refresh. The method then should be ajax implementation or some other trick. I have no idea!

When GMail was in baby stage, I had heard that it uses hidden frames to implement ajax like infrastructure – due to browser security reasons. (But I think, GMail now uses ajax). Knowing this rumor, I once happened to create multiple files upload system using hidden iframe and javascripts – user would provide a list of files and they would get uploaded to the server one by one. The creation easily solved the problem of maximum file size limit, and also errors when doing large file upload.

Now, as I am onto ajax extensions and as the uploading is not working within UpdatePanel, I went to give the same approach a try. And after some good amount of time, I was able to do it. Here is my approach outline in basic form:

1. I first created an upload form in separate page which is like this (myIframe.html):
<form method="POST" target="_self" enctype="multipart/form-data" action="main.aspx">
<input type="file" name="fileUpload" />
<input type="submit" value="UPLOAD" />
</form>

2. In my main page (main.aspx), I put an iframe and loaded that page in it. I also made borders invisible so it did not look like it is an iframe.
<iframe name="iUploadFrame" src="myIframe.html" frameborder="0" onload="iUploadFrameLoad();"></iframe>

Note that I am also specifying onload event handler function of javascript. I will explain it below.

3. For testing, in main.aspx I also have UpdatePanel with a button and label like this:
<asp:UpdatePanel ID="pnlMain" runat="server">
<ContentTemplate>
<asp:Label id="lblMessage" runat="server" />
<asp:Button id="btnUploadComplted" runat="server" style="visibility:hidden;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUploadCompleted" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Note that I have hide the button using CSS style, but not setting visible=”False” attribute. This is because I still want to have the button html in the output document and would want to trigger the ajax callback via that button.

3. I then define the click event hander of the button in the codebehind as:
Protected Sub btnUploadCompleted_Click(s As Object, e As EventArgs)
lblMessage.Text = "UPLOAD PROCESS COMPLETED SUCCESSFULLY"
End Sub

4. Now, to save file I write following code in the code-behind:
Protected Sub Page_Load(s As Object, e As EventArgs)
If Request.Files.Count = 1 Then
' process to save file
Response.Write("SUCCESS")
Response.End()
End If
End Sub

5. Now all that we need to do is create javascript function to integrate the process into ajax implementation. The event will trigger when upload process is complete, and it will, in turn, triggers btnUploadCompleted’s click event, which is responsible for making our ajax call.
<script type="text/javascript">
function iUploadFrameLoad() {
if (window.iUploadFrame.document.body.innerHTML == "SUCCESS") {
document.forms[0].elements[btnUploadCompleted].click();
}
}
</script>

.

.

NEW: I have written a new post with complete source code for this process. View post.

.

.

NEW: Uploading files in a GridView (Feb 20, 2008).

.

.

Do write me comments and suggestions on this article.

Read Full Post | Make a Comment ( 32 so far )

Liked it here?
Why not try sites on the blogroll...