Posts Tagged ‘web development’

Website Review of the Day – Speak Visual

Monday, November 2nd, 2009

speak_visSpeak Visual -
http://www.speakvisual.com

NVIDIA, a computer company that builds graphics cards has recently created a website to promote its technology. The theme, Speak Visual is centered around several [people speaking about how they use NVIDIA cards to “Speak Visual” to the world. The vibrant color, contrast, and use of white space all work together to create a very well rounded site that is full of video clips, graphical imagery, and animation. Basically the company is visually introducing you to some of the things that their graphics processors can do and why you should upgrade your PC. The site is captivating and very realistic, with movement, video of people, and interviews. This is what I believe thaat the web will evolve into, a high definition portal to visually interact with.

Modal Windows for opening images and websites without leaving your website

Tuesday, September 22nd, 2009

I have been working with and designing Modal windows for quite some time now. For the most part I have designed what I want them to look like and then I have used some type of open source to make them work. There are several different types of modal window javascript library’s to download, however I have chosen to use 2, mainly due to thier flexibility and ease of adaptation.

The first type of modal window is what I specifically use to show images. The beauty of a modal window is that you can open an image or a webpage without ever leaving that page or openinig up a pop up window. The modal window can be closed easily by the user and usually it is very light and easy to work with. For the first type of modal window, I would like to promote the Lightbox JS provided by http://huddletogether.com. This is a javascript library, that is open source to the public. It is customizable and works great. I currently use it on my site for some of my images; check out the logo links on the right hand side of this page: http://scottlassiter.com/logos.php. Here you will see that whenever you click on a link it darkens the screen and opens a box the size of your logo or image on the fly. It is very easy to set up and requires intermediate web developing skills to implement.

The second type of modal window I would like to talk about is called “graybox”, you can download it at http://orangoo.com/labs/GreyBox/.  This is a very powerful modal window that provides the ability to open a window to another website. Lets say that you want to promote a certain website, or want to preview a website you have developed or designed. Implement the graybox code on your website and wallah, you can provide a “window” into just about any website. For example, I use this on my website to provide previews of some of the websites that I have developed and designed. Check out “Web Design” on my portfolio page: http://scottlassiter.com/portfolio.php, to see it working in action. Basically, you have to set it so that the window is smaller that the web page you aqre previewing on. In many cases you will have to use the “scroll bars” in the graybox window, however this works great if you just want to show another site as an example and do not necessarily want the user to leave your page, which is key!

Do you have a modal window application that you specifically like or think is easy to work with? Drop a link here or give me a review

CSS text kerning for your web pages

Wednesday, July 22nd, 2009

Have you ever felt like you were limited in the things that you could do with your typography on a web page? I have, and before I knew what CSS was to apply a form of “kerning” to my web pages without having to create a custom text graphic. Custom graphical text is always going to look cooler, however for particular reasons you may not want to do a graphic for every time you create some text, such as a dynamic photo caption pulling from a database. Now with CSS3 becoming more browser compatible, the use of typography will begin to expand more and more.

The CSS parameter you want to use is called letter-spacing. Yes, it is that simple!

Anyways let begin. Lets say I want to have a caption for my photo that looks cool and well designed. The first photo caption is standard.

CSS Kerning tutorial

Our beautiful lake

Now Check this out!

CSS Kerning tutorial

Our beautiful lake

Doesn’t this look much better?

Anyways, here is the CSS
Take your text and wrap it in a <span> tag. This tag helps you apply a style to the text easily, however this is not the only place to use style. </span>

<span>Our Beautiful Lake</span>

Next add a style and the line spacing (int his example we are using Inline Styling, however the same styleing can be used in an external style sheet):
<span style=”letter-spacing: 5px”>Our Beautiful Lake</span>

The result is:  Our beautiful lake

It’s that easy! Hope this was helpful.

Again, there are many new features that are coming available in CSS3 that will enhance the ability of typographical design without having to create textual images and such. Please return to http://scottlassiter.com/blog in the future to learn more about CSS3 features.

How to refresh or reload an iframe that works in Firefox and IE

Monday, June 8th, 2009

Ever have a problem where an iframe that you have in your web page will just not refresh or reload? This is definately a problem if you have updated the source file of the iFrame, yet it does not show recent changes. How do fix this, with a little bit of Javascript!

All you need is just a few lines of code.

First set up your iframe:

&lt;iframe id="yourframe" src="yourframe.html" width="840px" height="3200px" frameborder="0"&gt;&lt;/iframe&gt;

Next drop this javascript above your body tag:

&lt;script type="text/javascript"&gt;
window.reload = refreshFrame;
function refreshFrame() {
document.getElementById('yourframe').src = "yourframe.html";
}
&lt;/script&gt;

What reloads the frame, its the window.reload call. By defining the id of the frame and calling it to window.reload will automatically reload the frame every time you refresh or come back to the page. Very easy and it works great. Good luck!

CSS vs Tables 2009

Thursday, April 16th, 2009

Today I had an interesting debate with a developer regarding which is superior using tables or CSS. The particular website we were reviewing uses both, DIVs and tables, however the main structure/container is a table, with DIVs within. It has been known that developing websites with DIVs rather than tables creates a much faster load time, more SEO friendly, and is more 508 compliant. These are all somewhat true to a certain extent. Each website is subjective to how it is built, how many graphics are present, and how much data is involved. Also if your web sever is generally slow or you have to many users for how much bandwidth you have, will make a difference as well. I personally prefer to develop with CSS now, however there are several websites I update that still contain tables. The one nice thing about developing with CSS is that once you get your general structure down, you can easily change the look of your website in some cases without even touching the PHP, HTML, or ASP file you are working on. How is this so? The CSS file that is linked to your wesbite provides all of the styling, size, and looks. You can easily change the parameters of this CSS file with different graphics. CSS Zen Garden s a great reference for this.  So, when are you going to say, hey look Mom, no more tables?

How to mask images in PhotoShop

Sunday, March 8th, 2009

Masking 101

Ever wanted to have an image within an image? Lets say you have a background image of something, yet you want a certain part of another picture to peek through it. You could easily cut part of the picture and paste, however masking gives you the benefit of moving around the image underneath, and re-aligning the “portal” that you are looking into.

First Step: Define the background image

Open an image that you want to use:

Second Step: Draw a portal. You can use just about any shape tool to do this and use a color that is easy to see against the background image. I will use the circle and select yellow as the color.

Photoshop mask step 2

Third Step: Add another picture to the file. Choose another picture that you want to use. make sure it is larger than the portal, however smaller than the background. I recommend opening the image, resizing it to something smaller than the original background, then either copying the whole image onto the background or dragging it to the background image. You can easily re-size the image by pressing CTRL T and then while holding SHIFT, dragging the image. I would only recommend reducing. If you need enlarge it there may be pixelation.

Masking Step 3

Step 4: Applying the Clipping Mask. Open your Layers pallet. You should have 3 layers, one for the background image, 2 for the circle, and 3 for the overlaying image. Make sure that the top image is a layer above the shape, in our case the yellow circle. Right click on the top layer (the image) in the layers palette and select Create Clipping Mask.

Masking step 4

Step 4: Save your file to whatever format you want, however make sure to keep a PhotoShop source file saved! If your image is not in the correct position, now worries, you can easily move either the masked image or the circle to your specifics. This is a lot easier than cutting and pasting. You can also adjust the size of your shape as well if it is too large or small.

Masking Final Step

Good luck masking!