The most challenging part of designing a personal website is deciding what the focus should be – what message the website should convey. My earlier website had a clever (?!) illustration of a fish jumping from “development” to “design” jars. However, I realized that the kind of development I was referring to was software development, which will not be clear to everyone. Also, what I was doing before is not of primary interest to my potential employers. For a beginner, the portfolio must highlight what you enjoy doing now.

The next challenging task is planning the website – content, navigation and overall look-and-feel. I liked how I had the portfolio as the primary content and with primary navigation. The secondary navigation had “Blog” and “Resume”. I preferred to add a few brief “about me” lines and contact information in the footer. In my last portfolio site, I had a page dedicated for every project. To view a project, one had to click and get to a new page every time. I decided to have categories in the new website and added only 4 projects in every category. Adding few selected projects is better than adding all the projects. Adding categories is helpful when you have a broad range of skills.

Many well designed portfolio websites have a theme that is closely associated with the website owner. For example, a web developer who likes to hike and climb mountains can have mountains as the theme. I was inspired to have  Shoreline, Mountain View as my theme. I go for runs on Shoreline. I wanted to add the lake, Amphitheater, NASA, etc in my landscape, but was falling short of time (I finished this website in 1 week). So I just added some clouds and a plane.

I will be revising my website soon. So here are a few screenshots of my most favorite portfolio – version 3 -

Hack the Future at The Tech Museum

The event was a big success and the team decided to go for another such event “Hack the Future 2″. The event website used my design as the header. Here’s a snapshot -

The team needed some changes in the T-shirt designs – using a new logo in the designs and adding the sponsors logo for the main T-shirt. The mentor T-shirt will have the text “Hack the Future” to scale the design to future events. I decided to use the silhouette from the previous design to keep the consistent look. I adjusted a few colors to include the new logo. Here are the final designs.

Here are some pictures of the event -

Here’s mine -

The review process included 5 steps -
1) HTML validation
2) CSS validation
3) Using tools like TAW and Color Contrast Analyzer
4) Manual WCAG 1.0 Priority 1 checklist evaluation using Firefox
5) Using Fangs screen reader emulator

I presented the findings and recommendations systematically. I also identified few bugs on their website.

Summary of the evaluation

This Web site is close to meeting WCAG 1.0 Level A. Accessibility features in which
this site is strong include using alternative text for images, using headings, using 2
or 3 column submenus to fit everything in the screen, using ‘Skip navigation’ and
‘Skip to main content’ links, etc.

Recommended priorities for addressing inaccessible features of site -
1) Revise the text equivalent for some images.
2) Ensure all videos have closed captioning.
3) Resolve all the issues found during HTML validation, CSS validation and
manual assessment.
4) Use better color contrast between text and background images.

The dialog box designed is for building a ship.

Approach to the problem

The first step was to play the ‘Kingdom of Camelot’ game and get a feel of the important rules of the game. The next was sketching some ideas and writing down the key concepts related to pirate theme. After getting a rough idea of what I would be doing, I searched flickr and google images for the relevant images. Then I started the rough layout and experimented with it to progressively arrive at the final design layout.

Color theme

Colors suitable for a pirate theme are mostly dark. The look is grungy and old. The color palette used is

Typefaces

Helvetica – for explanatory text. Reason – It is very legible. Sometimes, fancy typefaces cannot be read easily. Rapscallion (downloaded from dafont.com) – for title to reflect the pirate theme. It has an old look and because of the jagged edges, it fits the pirate theme. It is also used for the ‘stealth mode’ header text, to draw the player’s attention.

Images

The ship and the background grungy map images were free downloads. The skull image is actually a font (pirates pw – downloaded from dafont.com).

Grouping data

The dialog box can be divided into 3 sections -

• Objective of the dialog box

  The title is clear and in big font size. The image makes the dialog box engaging. The text explains what to expect after the task completion in this dialog box. This is important because we want the players to know right away what to expect.

• The building phase

  The information here is put on a lighter canvas to highlight its importance. The information is grouped in 3 parts.

  • The ‘Level 1 Requirements’ tell the player the level of the ship buildingphase. It also shows the tabular data of the amounts if different resources needed and how much is available for the player. The green indicates the eligibility. Explanation about the eligibility status is not required as the green color makes it self-explanatory. If any of the numbers are displayed in red, the ‘build’ buttons should be disabled.
  • There is also a ‘ask help’ option and the player gets to know what he can expect. ‘Pirates don’t help for charity’ line adds some attitude to the game. I made a choice between ‘threaten others for help’ and ‘ask for help’. Just a play of words! But wanted to liken the language to the pirate world as much as possible. Finally, decided to stick with ‘ask’ because ‘threaten’ would probably be too much attitude.

• • The last part is the buttons. Earlier layout (shown above) had the ‘build’ button first and then the ‘ask help’ option (which I was going to put as a button just below the original ‘build’ button). I realized that the player must be provided the two options at the bottom, so that he/ she does not rush into clicking it without even glancing at the ‘ask help’ option. Additionally, it must be clear that the player has to select just one button of the two.
  • Final design does that. I thought it was important to let the player know that he/ she can choose only one of the buttons and not both. The text on the button is self-explanatory. Right next to the buttons, the time for completion is also added. A helpful message ‘remember to ask help’ is next to ‘build’ button, just in case some player does not glance on the right side message.

• Monetization (optional)

  The monetization option is highlighted because of the title, the big button and the skull image. Without the image, the bottom part would not have caught the eye. There is a brief explanation (at the bottom of the button) of what to expect when the ‘buy’ button is clicked.

Buttons

The buttons are dark and the text on them is embossed. The buttons cast a little shadow. They look rugged. I decided not to do glossy buttons as they do not go well with the pirate theme. The round corners add a soft touch to the design. This is also the reason why I decided to not have the boxy table and instead just float the tabular data on the canvas.

Overall look

The window has jagged edges on the top and bottom. This torn paper look goes very well with pirate theme. Even a burnt paper effect can go well. All the elements, except a small part of the ship are completely within the rectangle defined in the map. This composition gives the ship a 3D effect, as if it is coming from somewhere. The rest of the elements are aligned properly and grouped together.

My very first website (let’s call it version 0) was done using Drupal framework. I used an existing template and added my content as nodes. The website was not nice to look at, but I learned how to use Drupal.

My second version of website, let’s call it version 1, (which was live from Sept 2010 to Jan 2011) was entirely hand-coded. Here are some screenshots of that website version.

My design process for the version 2 website began with identifying what was wrong with this earlier version. The next step was drawing out the wireframes (sketches) on paper and mocking it up in HTML/ CSS. Here’s my html page. I used CSS fluid layout. I also used PHP to get the latest blog entry. I used JQuery to design the button. However, I wasn’t happy with the design.

So I did some mock-ups on Illustrator. With this new design, I also created my own icons. Here’s my html page.

However, I felt the design was not creative and clever enough. I drew some sketches and really liked the idea of a fish jumping from ‘development’ waters to ‘design’ waters. I then mocked it up in Illustrator. The waves with the bubbles were inspired by the ‘Book of Kells’ animated movie. The fish, the waves and the clouds were done using Illustrator. I felt the waves idea did not look as nice as I had expected, especially because of the ‘Design’ and ‘Development’ texts.

Then I thought of the jar idea, where I create the jars out of the texts, thus integrating the text into the design. I created the mockups in Illustrator.

I drew wireframes for the remaining pages and then started coding. I hand-coded version 2 website using HTML, CSS and JavaScript. I have used Illustrator and Photoshop for creating the graphics. The website was compliant with the web standards and WCAG guidelines.

In the last week of May, we had gone to Caramel and here’s a fancy tap from one of the cafes we went to. Innovative, yes, but perhaps not a practical design.

I also sketched when I was at the cafe. I gave speech #6 at the Toastmasters and designed 2 more newsletters. One of them will go for the TM newsletter contest. We had our APA pool league finals on one weekend and I won 2 matches out of 4. Our team lost, so that was disappointing, but my game improved suddenly over that weekend. Thanks to A! I have also been training for the Sept  half marathon. I attended BayCHI’s talk “How to create awesome products” and learned about “Verify” product’s design process. I attended Adobe’s “Data insight” event last weekend – it was a good experience, but would have enjoyed even more if our team could have finished executing the idea. Today I will be attending HackerDojo event “Design for Developers: How to hire a designer”.

Now about the work I have been doing – I have been working on creating a website for someone and also some research work at LEF Associates. That’s all I can tell right now.

On a personal note, June is a special month for me. We had our 1st anniversary on the 1st. N’s birthday was on the 8th. My baba’s birthday is on the last day of the month, ie today. Wish he was around.

I started working on building a shopping cart application two months back, but got around to finish the styling just yesterday. Since this was the first PHP/mySql/ AJAX application I was building, I started to follow the steps from the book “Bulletproof AJAX”. Soon, I ended up writing my own code.

There are 3 main modules in my program:

1) Get product listing
I used JQuery’s $.ajax plugin to make it cross-browser. This was the first significant improvement, suggested by a friend. As soon as the body loads, I pass my backend code url “processing.php” in the ajax call and get JSON object.

In processing.php, I am reading all the data from the “books” table and dumping it in JSON format. Using JSON was another significant lesson. On success (that is after receiving the data from the backend), it will call an anonymous function and this is where I wrap the html tags around the json data. Very neat!

You will notice that I have wrapped a div with class =”item” around each book entry. I would have been better off using a list. While doing the CSS, I put a border-bottom for each div with class=”item”. There was an ugly border-bottom for the last item. To work around this, I put the if statement check to add another class for the last item and then setting border: none for that item.

2) Cart module

My earlier design was to use sessions to persist the cart data. It worked, but using database was a better choice. Also, my code was a mess as I tried to keep track of all the bits of information using sessions.

So, with the new design, I have another ajax call for body onload event ie. to check if the cart has any existing data. If yes, I get all the cart data and dump it on the webpage.

3) Click handler module

The third module, is to set up click event on the “add to cart” buttons. I learned that since the data for books was loaded dynamically, it is best to use a live() jquery method to set up events on the elements from this dynamically loaded content.

I have added some code for validating the integer entered in the Number of copies text box. I also added “Edit” and “Delete” buttons for each of the entries added in card. I programmed the logic to present a single row entry for a book if multiple clicks are registered on the same book. Also, depending on the number of copies, it will display “1 copy” or “x copies”. If the cart gets empty, then I display “cart is empty” message. I have also added the “loading …” message, which you will see when the cart loads (only if your connection is slow). I have tried to use unobtrusive Javascript most of the times.  Minor things, yes, but definitely adds more credibility to the application.

The backend code was relatively straightforward. I used all 4 CRUD mySQL operations.

CSS and design

This is my most favorite part. I decided to call this “Bookworm”. So I started designing the logo. These sketches were done while I was having dinner at a restaurant.

I liked the 2nd one the best. I started designing it in Illustrator. The worm was done using basic circle shape. So easy, no? But the tricky part was doing its rear end which curled around the book. I tried sending half part behind the book and half part before it. The tail still looked broken. So, I wound it up in a green circle and that encapsulated my basic logo design. I chose red for the book cover because it has the highest contrast. You will see my final logo on the webpage.

Doing CSS was fun. I remembered all the good practices I had read about. The colors used were hand-picked, rather than using someone else’s color palette. I chose the Google web font for the headings.

Here are the screenshots -

Ofcourse, there is still room for improvement like adding gradients in styles, compressing the code a bit more by modularizing  further, making input validation bulletproof, etc. For now, I am happy and very proud of my creation. It took me a lot of effort to get till here in Web Development and Design. Looking forward to do more such projects in future.

1) on signin, pull all connections
2) for each connection, get twitter id if available and the current location
3) show all the connections on map using locations
4) show last twitter update on hover on the map

Linkedin does not allow us to get twitter ids of our connections. So, I skipped part 2 and 4 in my development.

Here is the link to my application. Here are 2 main  screenshots of my application -

I will document few important steps here -

Get API keys

Get Linkedin API key. Google Maps (use v3, since v2 is deprecated) does not need API key.

Note: I tried Yahoo maps first, but it wasn’t very accurate in plotting locations. I have blogged about it previously.

On login

When the user clicks on the login button, few things happen -

1. Hide the “Login to see” text. The Linkedin button goes away automatically.
2. Open the map in the div. Set the options to center it. Also, set the property minZoom: 2, to avoid the map to become very small (thus avoiding displaying the background image).
3. Call API to obtain self profile information (like first name and last name – to go with the Welcome message) and to obtain all the connections of the logged in user.

Logic and code

1. Get all connections.
2. Find all unique locations from the connections data and put them in array. I used Jquery’s inArray plugin (found online)  to add unique location names to the array.
3. For every location name, send a request to Google Maps api to mark that location. This request is done using $.getJSON, but there is a cross-domain restriction. So,we cannot send the request directly. That’s why, I pass the location name to my proxy php file. In the php code, I use curl to send the http request and I get the markers array from Google maps.
4. Parse the json data ie. markers array and fetch the latitude and longitude for each.
5. Mark the positions on the map and set up event listeners on each marker for the click event.
6. On click, get all the connections belonging to that location and display them in html.

Graphics

I created the logo and the background image to reflect what the application does. In the logo, I have created Linkedin-logo look-alike “IN” and then I have “World” with a little twirl on the “O” representing the equator of the world.

The background image depicts that you will get to see your 1st point contacts from linkedIn.

]]> http://prajaktagodbole.com/blog/2011/05/linkedin-google-maps-mash-up/feed/ 0 http://prajaktagodbole.com/blog/2011/05/html11/ http://prajaktagodbole.com/blog/2011/05/html11/#comments Sat, 21 May 2011 23:03:51 +0000 admin http://prajaktagodbole.com/blog/?p=629 I learned about the html11.org website in Microsoft’s web camp. The concept is very funny and stretches our imaginations. There are endless possibilities with the elements like <wind>, <taste>, etc. The website also has cool usage demos.

This is a screenshot of the <wind> tag demo.

• 3 colors
• Chest print
• 300dpi
• Event is called “Hack the Future 1″
• It’s about hacking and creativity
• Incorporate the sponsor’s logo 

The main shirts are for the kids, but a similar design was needed for the “Mentors” with the word “Mentor” on it (most likely a bright color, something easily distinguished in a crowd, so the kids know who to ask for help).

I sketched some ideas-

This was the first time I did a T-shirt design, so I looked up online to understand what’s expected. Few pointers are -

Colors

Use minimum colors – maximum 3 or 4 colors. Use high contrast colors. Choose bright colors to make the t-shirt stand out. Use safe colors ie primary colors

Font

Font has to be readable. The size of the text/ message should be big.

Design

The design should not be “busy”. It should be clear and obvious to create maximum impact. It should not be complicated.

I have used these pointers to create my designs. Here’s my first pass at the designs -

I decided to use a 3D font to make it look like a kid event. I also used both girl and boy silhouettes in the designs. I sent my first pass designs and got some feedback. That was very helpful.

Few suggestions from the event organizers were -

1. They had many black T-shirts, so I needed to use a black background.

2. Make the silhouette unisex. Change the hair like an anime hero.

3. Use the logo.

I made those changes. I decided to use the logo as background and hence, keep the silhouette as black. Thus, for the kids shirt, I am using 4 colors and for the mentors shirt, I am using 3 colors.

Fine-tuning the designs

I downloaded another free 3D font, because the one I used before had a minute underline below the text. I did some adjustments to the hands and feet, made them smaller. I changed the hair to resemble an anime hero. I changed the nose a bit.

Here are my final designs -

My designs have been accepted. 60 black shirts and 27 blue shirts will be printed for the event.

My own opinion about my newsletters was as I was trying to get better with more techniques in Illustrator and Indesign, I was sometimes creating less-than-perfect layouts. Newsletter designing has been an activity I look forward to. I feel its engaging because I am forced to think of clever ideas about that week’s context. Sometimes, the final output had disappointed me as it wasn’t exactly what I had in mind. Sometimes, there were no clever ideas. Nonetheless, I would still send it out to the group. Being consistent is important.

This week, I create a 5-page newsletter in Illustrator. If you are a regular reader of “A list apart” like me, you will immediately note the similarity. I like that website’s clean layout and just by copying the exact layout has already made me feel better about working with colors and typography.

Here’s a snapshot of “A list apart”

I also learned a trick in Illustrator to save all the Artboards together. Click Export and then choose a file name. I chose “Newsletter16-all”, when the 5 artboards were saved, they had names like “Newsletter16-all-01.jpg”, “Newsletter16-all-02.jpg”, etc. Select “Use Artboards”  with “All” option and then export.

Finally, here is my newsletter -

]]> http://prajaktagodbole.com/blog/2011/05/toastmasters-newsletter-inspiration-a-list-apart/feed/ 0 http://prajaktagodbole.com/blog/2011/05/nice-to-have-features-gmail-and-facebook/ http://prajaktagodbole.com/blog/2011/05/nice-to-have-features-gmail-and-facebook/#comments Wed, 11 May 2011 18:12:23 +0000 admin http://prajaktagodbole.com/blog/?p=556 Gmail :

Let’s say, I send an email to contact#1. Then, I copy the same content and send to contact#2. Ofcourse, I change the email address and the greetings – I say “Hi contact#2″, without changing the title. The text sent to contact#2 will look like “Hi contact#2, <show quoted text>, which on click, will show the copied text in purple color. I don’t like this feature/ bug at all. It makes me look lazy, even if my content is well written.

Facebook : I like to send private messages to my contacts on FB. Sometimes, I would like to add a contact to the ongoing message exchanges. Is there a way to do that? I dont think so. This will be a nice to have feature. If we can add contacts on each other’s walls, why not have it in messages, I ask!

Here’s the api link that can be used to get the latitude and longitude of a given address/ location: http://where.yahooapis.com/geocode?location=INSERT_LOCATION&flags=J&appid=INSERT_API_KEY

Using the Yahoo maps, if you try “San Francisco Bay Area”, it is fairly close, but points to Mt. Diablo location in east bay.

If you try “Greater Chicago Area”, the marker points to a location in Virginia State.

Google map is very accurate and I will be using Google map api for my little demo.

Tomorrow it’s Cinco De Mayo. In keeping with the festivities and the mood, I designed the newsletter with the vivid colors and patterns. The image of the man dressed in the authentic western dress was taken from Google images.

You can view the source code (with lots of comments) to see how I did this.

—————————————————————————————-

6th May 2011

Found an uncovered corner case in my code. Here’s a screenshot of the results for a trending topic like ’5DaysForMileyInBrazil’.

Added an if statement and now the news feed won’t be blank.

The point of the post is -

I am joining SJSU HFE program in Fall 2011. I met with the the program director today. I also got to look at some of the students’ projects. I have joined the HFES yahoo group and browsing the archive now.

It was so exciting to be there at SJSU. A positive sign of what will follow in the next few months. Stoked!

What is Human Factors?

The event started with HTML5 video demo by Doris Chen. Doris showed us how the html5 video tag worked on different browsers. It didn’t work on Firefox 4. She also mentioned IE’s developer tool (press F12). She demoed the various video effects like the cropping effect, hover effect, reflection, fade-ins, etc that can be used for the video.

The next presentation was by 2 thirteen year olds. Very impressive! They had developed a JS application that created a .wav file based on user’s input and played it in browser. Great stuff. Here’s the link: http://sound-weaver.appspot.com/. There was another link to the demo they showed us, dont remember what it was.

Tab Atkins showed us an implementation of WebGL – a customizable aquarium ( you can customize the number of fish). This was awesome! He also demoed a multiplayer space-war game built with HTML5 web sockets. Many of us joined in the game. Very engaging! He then demoed drag-n drops, CSS properties like gradients, shadows, etc. Tab’s blog : http://www.xanthir.com/blog/.

Doris announced another Microsoft sponsored event – 2 day web camp on 20 – 21 May 2011.

The next speaker Giorgio Sardo showed us many examples of the what can be done with HTML5, JS, SVG. To check the examples, see beautyoftheweb.com. He demoed the Expression Superview – (snapshot – the left and the right pictures are the same html/ css code rendered in older and newer browser. This demonstrated what can be done with simple divs and newer CSS and how the older browsers dont recognize these new specs).

Great talk @gisardo, packed with humor and lot of useful information!

The last talk “HTML5 for skeptics” by Scott Stanfield was very entertaining and informative too. He showed us some examples of how different browsers will render the same code differently. He shared with us some links – html5boilerplate.com, html5test.com, html5doctor.com, caniuse.com, etc. Great slides and talk!

I am glad I attended this event. I look forward to more such events. Very good learning experience!

In the sign-up page, I check if the typed username exists, check the password for the minimum requirements, not allow copy paste in the password fields, generate a captcha and verify it. I have used AJAX calls to do these validations and display helpful messages. When the user enters all the fields correctly, the ‘signup’ button is enabled. On submit, the form is posted and an account is created for the user. The user will be redirected to the sign-in page immediately. If there is an error while creating the user account, it stays on the sign-up page and displays the error message.

In the sign-in page, the ‘sign-in’ button is enabled only when both the fields are filled out. The form is submitted using the get method. The server side script checks if an account exists for the given username and redirects to the dashboard page if there exists such an username. If the username/ password combination is incorrect, the sign-in page displays an error message.

The dashboard starts out as empty with links to pages link ‘Create new post’, ‘View blog’, ‘Sign out’.

The ‘Sign out’ link will delete the session for the user and redirect the user to the sign-in page. The ‘Create new post’ link opens a new page. The text-editor used is a YUI component.

When the user clicks on the ‘Post’ button, the blog article is posted ie. a new row is created in the database for that entry. The user is redirected to the blog page.

If you go back to the Dasboard page, you will see the two blog posts and you can click on the links to edit or delete it.

There is still a lot of scope of improvement in this project.