Web Designer Interview Questions

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, ..)

ASP.NET facebook application “Hello World!”

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:

Protected Sub Init2(ByVal s As Object, ByVal e As EventArgs) Handles Me.Init

'These code lines MUST be in Init event handler

If String.IsNullOrEmpty(Request.QueryString("fb_page_id")) Then 'The user is viewing application, force them to login to facebook
'and allow the application's access to the user info

MyBase.RequireLogin = True
MyBase.Page_Init(s, e)

'contents of the facebook app
Response.Write("Hello World")

Else
'The user is not viewing the application, but facebook is requesting FBML

Dim fbPageID As Long = CLng(Request.QueryString("fb_page_id"))
Dim FB As New facebook.Components.FacebookService

FB.ApplicationKey = ConfigurationManager.AppSettings("APIKey")
FB.Secret = ConfigurationManager.AppSettings("Secret")
FB.IsDesktopApplication = False

Dim pFBML As String = "Hello World!"

FB.API.profile.setFBML(fbPageID, pFBML, "", "")

'this is the text that facebook users sees
Response.Write("You have successfully set profile FBML")

'setting FBML does not need further processing
Response.End()

End If

End Sub

DDL Triggers: Logging DB objects changes in SQL Server 2005

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.

Here is sample data in the table:

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.

ASP.NET GridView multiple files upload

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.

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

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.

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).

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.

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.

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.

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.

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.