Anyone who knows me is going to find it extremely strange that I of all people should post a math formula! When it comes to managing your projects though there doesn’t seem to be any way around it. Your client is always going to want to know how long the project is going to take. You’re going to want to know too since you don’t really want to work for peanuts. It’s difficult at times when the projects are complex and lots of factors involved. I was discussing this with a friend the other day and it made me remember a formula they taught us that I think it pretty useful. I thought I would share it with you just in case you haven’t heard of it and are having trouble figuring out how to estimate your time on a project.
Expected time = ( Optimistic + 4 x Most likely + Pessimistic ) / 6
The time you would tell the client is the expected time after you factor in the optimistic time (time it would be done if everything goes smoothly) plus the mostly likely that you are sure it could be done (x4) plus the time if everything goes wrong. Then you would divide all that by six and it comes up with a pretty accurate number of a length of a typical project!
Ever want to know what a particular type face is? Then this is a great resource! I saw a design on the internet and liked the font for the word photographer. I took a screen grab of the word and then uploaded it to myfonts and it worked great! See for yourself:
I’m currently putting together a fairly large site for a college that has “mega list”. I will post more about that in another posts but basically mega lists allows you to see columns of information all at once. It’s different from an old style drop down menu in that items are broken up into categories of content much like you would see categories in a supermarket. It helps people to scan the categories in a store and think about which isle they might find something.
off-site link example
Another helper in making websites more usable is to standardize icons and visual cues to let readers know what will happen when they click on a link. What I have been seeing more and more of lately is icons that let a reader know they are going somewhere else other than your website to get the information they need. The importance of this is that your navigation and style may be drastically different than where you are sending them. For example in the sliced view of the mega list to the right I am working on you can see as I hover over the words “human resources” there is a little square icon to the right of the words. This gives a visual cue that information for this topic is not housed on this site. In this case it’s housed at the district office where information can be somewhat buried. The user can make a mental note before they click the link that they are going to be sent off somewhere else to look for the information they seek.
So far there is no one standard icon that web developers use that I have found but what does seem to be consistent is that it’s a little square the size of your font with a little arrow that points up and to the right to signify off-site. The more this icon is used by web developers the more the general public will know what the meaning of this image is.
Some examples that you may download and use:
You could just add this to any link that is off-site manually but with a little CSS you can add it automatically.
#main a[href^=”http://”] {
background: url(external.png) center right no-repeat;
padding-right: 13px;
}
What this says above the any HREF tag in the main area of the website that begins with http should use this external icon to the right of the link and the pixel width of the icon plus a little space.
This is fine if all my links are relative where one links points to this file name and that file name however sometimes for various reasons the full URL is inserted and therefor anything with the full absolute URL – even to your own site is going to show the off-site link. How pointless!
So to make it so not every absolute link shows you need to add this after the above code to get rid of the icon for anything that has your domain in the URL.
I have tested this in all the major browsers on both Mac and PC but noticed that it does not work on IE 6. The only thing that happens is that it doesn’t show. So they loose that extra nice thing of the modern age but if they are still using IE 6 I guess they know the limitations.
It never ceases to amaze me that I can work in the Adobe products day in and day out and still learn little tricks. Forgive me if you are already know this but just learning this helps to save me time and to save my eyes so I need to share it with you.
Have you ever wanted to select a portion of code from one page and paste it into another? Have you ever tried to scan the code with your eyes finding it difficult especially if you didn’t comment your code out or space it out very well? The easiest way for me has always been to scan the design view for the section that I want in the layout and then see what dreamweaver is highlighting in the code. Then I would touch the code view and select the text. The only problem then is that I would loose my selection and invariably I would miss a character or some angle bracket and I would have to figure out what went wrong. It wasn’t until the other day that I discovered that you must touch the center scroll bar between the code view and the design view to switch the active window that has the selection. Your selection will remain in tact but the focus will be different.
In the example above I selected the listed items on the right side that is the design view and it highlighted the code on the left that made this text. If I were to then touch the middle of the code view on the left I would loose my selection and would have to reselect. If instead I touch the scroller in between I can now copy the contents of the code view to the clipboard. If I touch the scroller to the right of the design view I shift my focus back again in design view and I can copy that.
Whew! It’s the little things in the day that can make it for ya huh?!!
In this tutorial I am going to show you how to make your text float in a cloud but really you could do this with any object.
Start with a good photo of some clouds or download the source files at the end of this post to try it for yourself. Make sure there are areas of the clouds that are very white so you can get it to wrap around better. I played with the level in the photo to adjust for this slightly.
Make sure that your clouds are on the bottom layer in photoshop. This will work with CS4 as well at CS5. I am not sure about CS3.
Click the T tool and type something. This will make a new layer of type but you won’t see any clouds around it yet. 🙂
The next step is to couple click on the type layer to bring up the layer styles. Make sure the settings looks follows with slight adjustments on the slider for the effect.
The most important thing is the area I have circled above to blend the underlying layer if. You’ll need to split that white point slider by holding down the option key on a Mac or the Alt key on the PC and you can split the slider. Notice as you slide the lighter areas of the cloud will waft around the type.
Perhaps you like the effect but some portion is covered up more than you would like. Your not done then so you can do a little more adjusting by duplicating your type layer and making a mask of only what you want to show through.
After duplicating the layer and making sure it’s selected click the “layer mask” icon in the layers palette.
Fill the layer mask with black and then select a soft brush that has white as the foreground color and paint on the mask the parts of the type that you would like to reappear. Download the source file here. (3.4 mb)
I currently use Adobe Dreamweaver for a lot of my repetitive tasks in web design. It’s a great tool for managing lots of files and links between them all but as with all the Adobe products it can be a little too helpful at times. For example it formats your HTML for you so it’s easy to read. When you try and make a simple table it makes all the indent so it’s easy to see where are all the headers and rows are etc. So a simple two row, two column table looks like this when created in Dreamweaver
This is great to see exactly where the second row is for example to change content in a table. For example if there is a listing of events and a client needs a date changed I can easily find it in the code and change it.
Then I had a unique problem is that one of my clients uses the content management system called Teamsite. I don’t know if it has to do with the way it’s set up or if this is the quirky nature of teamsite but none-the-less teamsite renders these white spaces in the code as extra paragraph tags. It shouldn’t matter if you have white spaces in your HTML code or not. The browser only reads the commands between the opening and closing tags of HTML. This is not so with teamsite. Once you paste in your HTML with the formatting above teamsite will change each line break a
tag and create many paragraphs where you didn’t want them. This “bug” as I call it creates unsightly gaps in your content.
To solve the problem above you must create one long continuous line of code with no line breaks for it to render the way you want. That means a bunch of manual edits and a lot of room for typos. After googling I found a great online resource called “textfixer”.
It turns out I am not alone in wanting my code to look like one long string with no breaks. Having all that nice formatting above can add bulk to the speed your web page load time. I really am not sure how true this is but anything that helps with speed I am all for but more importantly this web tool solves my problem of code formatting and cleans up any large blocks I want to clean up in other ways.
Now the above code looks like this:
Problem solved and in a fraction of the time that is usually needed! You must paste all of your code in the page for it to work though including the head content. In addition to “compressing” the HTML it also decompresses it so I can make all that stuff human readable again!
So go check out textfixer.com and see what other tools they have!
I needed a solution for one of my clients that I built a site for quite a while ago using plain old HTML. Johnny Frank Neilsen is a brilliant photographer residing in Denmark. I made simple gallery of thumbnail images that when you clicked on a thumbnail it gave you a larger image on it’s own page. Not only did you have to make a small and large image for each unique image and a page for each large image and a forward and back link for each page it was very difficult to move images around as you added them.
Old thumbnail style gallery - not easy to update
To be able to move images around is imperative for a photographer to show their new work. There are plenty of great services out there that would like you join for a monthly fee to use their databases like smugmug or zenfolio but that was way more than my client needed. He didn’t need all those services like storefronts and customer packages. He just needed a way to easily show off his work to his buyers so he could land a contracts with an agency. He didn’t want to spend hours modifying his site. He just wanted to upload the photos and get away from the computer to go take more pictures.
Picasaviewer allowed me to to do everything above and still have it look like it was part of his site and not just an embedded Google gallery. Since the look of the galleries are driven by CSS you can customize it to look like your site. It also makes use of the slimbox script (a visual clone of the lightbox script) so the photos pop-up in the same window eliminating the need to make separate HTML pages. > See the scripts in action.
Place them in the directory will upload to your server later
Copy the link location to the javascript and CSS files into the head of your document that will house your gallery.
Paste the table code that has the ID of container into the body of your web page
In the file “picasaViewer.js” find the line that starts with var and change the part after the = to your account name. For example if your picasa login is “myphotos” change it to that.
“var username = ‘accountname’;“
Upload all your files to your web server and viola! You should have an interactive easy-to-maintain gallery that matches your exiting site!
