Firebug like tool for safari – Develop Menu

•July 26, 2010 • Leave a Comment

You may not know it as I didn’t till few minutes ago, but Safari has a built in Firebug like tool, you just need to activate it. If you go to the preferences in Safari  under the advanced tab there is a check box “Show Develop menu in menu bar”. Select that checkbox, now you have a “Develop” menu which is a menu of options available for developing websites in your Safari menu bar. If you select the “Show Web Inspector” from the menu you a panel will appear at the bottom of your Safari browser which is similar to Firebug for Firefox. 

Hidding the element that requires JavaScript when JavaScript is not supported

•June 7, 2010 • Leave a Comment

I was concerned how my bookmark image will react when the user’s browser JavaScript is disabled. My bookmark link uses JavaScript, and if JavaScript is disabled the user will see an image that says bookmark and after they click on it nothing will happen. This means broken functionality or non 100% accessible. One of  objectives in DMT was to develop an accessible system.   So I didn’t like what I had and was trying to fix this in a way. So I searched for various things, i.e. how to detect JavaScript is disabled, how to handle problems created with JavaScript disabled, how to redirect browser to a page if JavaScript is not there, how to use another CSS file when JavaScript is enabled and … none of them solved my problem.

Sometimes you don’t realize how a simple matter can take so much of your time, this small issue took 6 hours to figure out and finally I had to sit down, give it some deep thought, and find a solution myself. I was trying to use the <script></script> tags to show the link when JavaScript is there and show nothing when it’s not supported. But that didn’t work, i tried using <noscript><span style=”visibility:hidden”><a>bookmark</a></span></noscript>but that didn’t work either, as it did not display the link when JavaScript was enabled.   Can’t really remember how many things I tried in that six hour.

What I finally did was the easiest solution possible, but it just doesn’t come to you easily when you are new to something, in my case CSS and JavaScript.

I made the bookmark invisible in my external css file and wrote a simple javascript code that will be called on body load and if JavaScript is on it will change the visibility to visible, so if there is no javascript support there is no bookmark link to annoy the user, and if user has javascript enabled they will be able to use this extra functionality of the website.

Bookmark page with JavaScript

•May 30, 2010 • 3 Comments

In my website  I have added a link that enables the users to bookmark a page. Finding information was almost a challenge, not that there was not enough information, but finding a nice and clean JavaScript code was the problem. Lots of the ready to use codes only support one or two kind of browsers. After all the search I found two scripts that looked resealable.  This script www.dynamicsitesolutions.com/javascript/add-bookmark-script/ supports almost any browser but it is a bit complicated as well. I personally don’t like using some scripts that I don’t understand what’s going on there (even though that I am a JavaScript beginner). However, some times you have no choice. But I had a choice, I also found this script www.dynamicdrive.com/dynamicindex9/addbook.htm which is nicely written and  easy to follow and understand, the only problem is it does not support some browsers (i.e. Safari).

So as I said because the script was simple and understandable I was able to modify it and simply add an else statement to at least notify the user that their browser does not support this functionality.

else
{
alert(“Sorry! Your browser doesn’t support this function.”);
}

When I thought OK I’m done here and I can now add the script to my website and call the bookmarksite(title, url) from my pages, I noticed that because I have the “add bookmark” link in every page of my website with about 7-8 pages, now I have to add the title and url of every page when ever I want to call the function. Actually the bookmarksite function from “Dynamic Drive DHTML” is written to book mark a site not a page and I want to use it to bookmark a page. What if I want to upload my content to another site, what if the url changes, what if the titles changes, etc. In all these case I have to go through each page and modify the parameters required for the function.

So what I did was to find out how I can read/get the url and title of a page by programming. I was a nice journey and I learned a lot. To get the url the “document.location.href”  will do the trick and the “document.title” will give you the title.

So I changed the bookmarksite(title,url) to bookmarkpage(), and added var title = document.title; and var url = document.location.href; inside the function. Nicely done. This was impossible if I had decided to use the complicated but ultimate script that I mentioned before.

My script looks like this:

function bookmarkpage()
{
var title = document.title;
var url = document.location.href;

if (window.sidebar) // firefox
{
window.sidebar.addPanel(title, url, “”);
}
else if(window.opera && window.print)
{ // opera
var elem = document.createElement(‘a’);
elem.setAttribute(‘href’,url);
elem.setAttribute(‘title’,title);
elem.setAttribute(‘rel’,’sidebar’);
elem.click();
}
else if(document.all)// ie
{
window.external.AddFavorite(url, title);
}
else
{
alert(“Sorry! Your browser doesn’t support this function.”);
}
}

The  code above is a modified version of this  http://www.dynamicdrive.com/dynamicindex9/addbook.htm.

Image Popup without opening a new window using css

•May 27, 2010 • 4 Comments

As I said in my previous post I don’t like the window feel and look of an image pop up, there are so many cool pop ups which don’t have that look. So today I was searching to find something simple and nice.  I came across this nicely written article : How To Do a CSS PopUp Without Opening a New Window

It uses a little bit of JavaScript and is mostly managed by CSS.

Image popups

•May 24, 2010 • 1 Comment

Today I spent hours on designing my programming online portfolio and was trying to figure out a nice design. I have decided to add a description and a screen shot of my projects. I’m still not sure if I want to open a popup on screen shot click or not. In my opinion as my projects are focusing on programming rather than design I think it is better to only include a small picture with no enlargement. But as I did a lot of research on popups and picture enlargement I thought of sharing some of my findings with you.

Out there on the net there are a lot of free javascript codes that you can use. I personally don’t like the popup to have the look and feel of a window. However, most simple JavaScript codes, open a new window which can be programmed to be resized with the picture dimensions.

Here you can find information on these kind of popups:
Image Popup Window/DHTML Picture Pop up Java Script
Auto-Sizing Image Popup Window Script
Cut & Paste JK Pop-up image viewer
Javascript Popup Image Window

For more complex examples check these out:

visuallightbox.com

highslide js

Website mockups with Photoshop

•May 10, 2010 • Leave a Comment

Few days ago I was trying to find a mock up screen software I found mockupscreens which sounds interesting for creating mock up screens for windows applications but not very  useful for web design. So I continued googling when I found this interesting concept of using Photoshop. If you love Photoshop like me you will find these links interesting:

http://www.blog.spoongraphics.co.uk/tutorials/encoding-a-photoshop-mockup-into-xhtml-css

http://www.talk-mania.com/web-layouts/43999-old-paper-layout-great-portfolio-layout.html

http://blog.plasticmind.com/design/creating-mockups-in-photoshop/

http://line25.com/tutorials/create-a-clean-modern-website-design-in-photoshop

http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/

Use case diagrams and use cases

•May 10, 2010 • Leave a Comment

I love use cases and use case diagrams. I can never start programming without thinking about use cases and at least having a use case diagram which tells me what the system is going to do. In my opinion use cases are one of the most parts of development and they are required in very early stages of any SDLC (software development life cycle). As you might have known Agile approaches heavily rely on scenarios and usecases.

Anyway I want to share few things about uses cases that I learned from a very dear lecturer at UTS ‘Bhuven Unhelkar’.

Use cases and use case diagrams are a way of capturing requirements. Use case diagrams provides a visual overview of the requirements of the system through actors, use cases and their interactions (Practical Object Oriented Analysis, Bhuvan Unhelkar).

The main elements of a use case diagram are: Actors, Use cases, Relations, System boundary.

Who is an actor? It is often shown by a Stickman symbol. An actor is anything that is outside the system and interacts with the system. Anything initiates a transaction. Anything sends and receives messages. Any External devices and systems that the system interfaces with. Devices such as ATMs, printers, keypads, card readers can be actors. Systems might be government regulatory systems, private health insurance systems, etc. An example of an actor in a hospital management system would be a patient.

What is a use case? A use case is a series of interactions of an actor with the system. It describes what the system does, not how it does it. An example of a use case in a hospital management system would be “patient books an appointment”.

What is a system boundary? It separates the actors from the use cases. Separates inside and outside the system. Is often shown by a box.

Relations are four types: association, include, extend, inheritance and need to be covered in details. I might write a new post on relations in future.

Association is the most important and straight forward one which shows the interaction of the actor with the use cases.

For those who want to know about use cases in a simple and effective way I strongly recommend reading the book ” Practical Object Oriented Analysis by Bhuvan Unhelkar” or have a look at “Use Cases: Good & Bad” and “Practical Object Oriented Analysis“.