webnelly.com blog

Maui Wall Candy Now Online

noreply@blogger.com (Kris Nelson) — Sat, 23 Aug 2008 16:30:00 +0000

After about a month of site customization and photo processing, Maui Wall Candy is now officially online. Maui Wall Candy is an online photo store where you can view and purchase photos that I have taken on our different visits to Maui. You can browse through the different galleries to find photos of magnificent sunsets, stunning vistas, great beaches and more.

And I've really only started and have about 2,000 photos yet to review from this past trip back in April. I've added a Coming Soon page to highlight some of the new photos and galleries I'm working on. To make it easier, there is a Recent Photos Feed that you can subscribe to and check out the latest photos when they're added.

The site is hosted using a SmugMug Pro Account, which means it's part of the bigger SmugMug collection of photographers and photo galleries. It's a bit of a change for me after my years using Flickr, but the site really wouldn't be possible without SmugMug.

So if you love Maui or just want to check it out, head on over and start browsing. If you're interested in buying something, you can check out the different formats and pricing available on the Pricing page. Not only can you buy full sized prints, there are also digital options available, too. Why digital? Check out the Photo Ideas page to find out.

Thanks, and happy viewing.

P.S.: Looking for more details on Maui? Don't forget to check out my Ka'anapali Dreamin' site, too. :)

New Photo Store Coming

noreply@blogger.com (Kris Nelson) — Thu, 05 Jun 2008 18:50:00 +0000

After being inspired, yet again, by another trip to Maui this past April, I'm in the process of putting up my first eCommerce site that will sell both prints and digital downloads of my many Maui photos.

The site design is still in progress, but many of the details are actually already handled for me. How? I'm planning on signing up for a SmugMug Pro account that once configured, will handle everything from the credit card processing and fulfillment, to the printing, customer service, you name it. That leaves me to pick which photos I want to sell, clean them up and adjust them for printing, and then upload to their servers. Pretty neat.

This is giving me the chance to really focus on the site design as the main effort, since they even give you the templates and page markup for the galleries as well.

More details in the coming weeks.

Breadcrumbs for Ka'anapali Dreamin'

noreply@blogger.com (Kris Nelson) — Mon, 25 Feb 2008 13:43:00 +0000

It took me the better part of a day yesterday, but I was able to update and test all the 80+ pages of the Ka'anapali Dreamin' site yesterday with breadcrumbs. Part of the work involved was related to the 5 or 6 different page templates I have setup in Dreamweaver for the site, ranging from the simple content pages that only contain one column to the section pages that have a sub navigation menu as well as a sidebar with photos.

It wasn't as complicated as I had thought it would be, since I've been dreading having to do it for a while. Once I got some momentum, it turned out to be more daunting than anything else. That will just go to show me to think of those things up front and work them into a design earlier rather than after that fact. :)

Launch of Igloo Surfing Coming Soon

noreply@blogger.com (Kris Nelson) — Tue, 19 Feb 2008 19:40:00 +0000

My initial hopes was to get the Igloo Surfing site up by the end of the year. Obviously that didn't happen.

I got back into the site development about three weeks ago, and didn't I didn't like the color scheme I was starting with so I re-did it. I also worked on the logo for a little and came up with something a little more elaborate than just the domain name in bubble letters.

I have the majority of the supporting text and pages ready now in Firefox, so it's just a matter of testing it out in IE 6/7 and working out the bugs there. Once that's set, the next step is to create the blog for the site (it will be a blog-site rather than a site with a blog), work the layout and style elements into the blog template, and off we go.

My latest target is getting it launched by the time we go on vacation (mid-April), so that shouldn't be too difficult.

Minor Design Updates to webnelly.com

noreply@blogger.com (Kris Nelson) — Tue, 19 Feb 2008 19:27:00 +0000

While it's not a full site redesign, it does feel better than what it was before.

I started by moving the site navigation up to the top and be horizontal rather than vertical. I started to play around with having the logo overlap the navigation a little, which led me into doing absolute positioning in CSS (of which I hadn't tried out very much). The end result took some tweaking, but I'm happy for now.

Also, to help fill out the horizontal navigation, I added two more sections that I'm expanding on. The first is Projects, which is going to feature details of the various projects I've worked on in my professional (corporate) career. This will be set up to contrast on the technologies side with what's listed in the Portfolio section, which features the personal sites I have worked on in my spare time.

The second new section I'm working on is the Technology section. This section will feature many of the technologies I use in my personal sites (to start) and provide some insight and examples of how I implemented them. They're not targeted to be full blown tutorials or anything like that (as if I have that kind of time), rather more of just an overview and inspiration for anyone else interested to want to learn more.

These sections look a little (or a lot) empty right now, and will take some time and commitment for me to get around to updating it all, but I'll get to most of it eventually.

If you're reading this, you can probably tell I updated the look and feel of the blog to match the new changes to the site design as well. If it's also your first time reading here, you probably didn't notice how blank it was before. :)

That's where I'm at with updating this site for now, short of adding all that content to the new sections. Time to spend my efforts elsewhere.

Website Previews in Portfolio Pages

noreply@blogger.com (Kris Nelson) — Mon, 28 Jan 2008 07:22:00 +0000

One of my todo items for the Ka'anapali Dreamin' website was to feature other websites in the Reviews section. As part of that, I wanted to include a way to include a preview of the site I'm reviewing.

I came across websnapr. It's just a very simple site that lets you enter in a URL and it generates an image in one of various sizes. To test it out, I used it to add previews of my own sites at webnelly.com. You can check it out by viewing one of the site pages here.

Working on Ka'anapali Dreamin' Mobile Site

noreply@blogger.com (Kris Nelson) — Sat, 26 Jan 2008 20:51:00 +0000

I started working on a mobile version of my Maui website, Ka'anapali Dreamin', and what I've put together so far can be found at http://kdmaui.mobi

I'm focusing on making much of the regularly updated content available on the mobile site, and paying close attention to keep things simple and elegant, small and speedy. So far, I've added a few things like the current date/time in Hawaii, the Hawaiian word, phrase, and fact of the day (more info), the current weather conditions, news and the daily photos. All of these things already exist on the main site, so it's partly just making it available for web-enabled phones.

The one area I'm struggling with a little bit so far is for blog posts via Blogger. I have no problem parsing the feeds available from the Blogger Data API, it's more the matter of identifying and resizing any images that existing in those posts so they're not as large in terms of download sizes on a web-based phone.

If you have a web-enabled phone and want to check it out, you can go to http://kdmaui.mobi. If you also have any ideas for new content, or maybe have a site of your own or know of a few that might be good to look at, go ahead and post them here.

Thanks.

Creating your own iGoogle Theme

noreply@blogger.com (Kris Nelson) — Sat, 26 Jan 2008 20:38:00 +0000

I found this a few weeks back, but just started playing around with it a few days ago. For Google fans like myself, the Google API section was recently updated with an API for creating your own iGoogle Themes so you can customize, create, and share your own themes for iGoogle.

The concept is pretty simple, and one of the things that I always thought was neat was that iGoogle Themes could change their displayed based on the time of day. Although the concept is simple, it's been my experience thus far that putting together and testing out these themes can be a little tedious. However, these could just be minor annoyances that I'm only experiencing because I haven't gotten the full hang of it yet, and I don't want to influence anyone who hasn't tried it for themselves yet.

You can check out the growing collection of iGoogle Themes in their gallery here, if you need a little inspiration. The one I'm working on now is a Maui theme goes along with my Ka'anapali Dreamin' website. It's likely going to take some time, so I don't anticipate it being ready for a few weeks. Once it is, though, I'll be sure to share it here.

Kris & Cindy - Dormant at the moment

noreply@blogger.com (Kris Nelson) — Mon, 03 Dec 2007 07:46:00 +0000

I think it's safe to say by now that this site has fallen dormant for the time being. It is probably overdue for a re-design as well, and as daunting of a task that feels like, I'm having trouble getting motivated to tackle it.

Hopefully after the first of the year I'll can get back to this site when I cross off things from the todo list on the other sites.

Ka'anapali Dreamin' - Next Project

noreply@blogger.com (Kris Nelson) — Mon, 03 Dec 2007 07:32:00 +0000

Time for this type of stuff is starting to dry up, especially with the holidays and all, but I'm hoping to get some time set aside for this next project for Ka'anapali Dreamin'.

I'm looking to create a Flickr game, so to speak, that pulls in different pictures from Flickr, and the player has to guess whether the picture is from Maui or a different island. If they correctly identify it as not being Maui, they get a chance to guess which island it is.

I don't think the front end is going to be that difficult, and the majority of the time will probably be around an admin app or pages that I can use to browse pictures from Flickr based on tags and either add or exclude them from the game.

For this, I'm also trying to get a new development environment running locally on my machine rather than having to upload everything to the web server for testing. Once that setup is complete, I'll be ready to dive right in.

Target for this is about January as it stands now.

Igloo Surfing - November Progress

noreply@blogger.com (Kris Nelson) — Mon, 19 Nov 2007 04:05:00 +0000

Obviously, the site isn't up yet, so all of the progress and updates are related to the initial launch of the site. At the moment, I pretty happy with the logo that I have designed and much of the main page layout. This isn't going to be an overly complex site like some of my other works, more of just a playground and photo sharing area. As with the Ciolinos site redesign, I am trying to push my limits of what I am capable of in regards to graphic design, and again not predicting that this will be the greatest thing since Google Maps, but something I want to be proud of.

For the remainder of this month, I'm hoping to finalize the main page layout for the site, slice up the comp and generate the core HTML and CSS, and get the foundation pages ready to go on a testing site. After that, it's gathering photos and planning out the mechanics of the site, and if it's up by the end of the year, I'll be happy.

Latest Site Redesign for The Ciolinos

noreply@blogger.com (Kris Nelson) — Sat, 10 Nov 2007 18:49:00 +0000

I can't help but say that I'm pretty proud of the latest site redesign for this site, which you can view here. Compared to the old site (I love archive.org), it is definitely a world of difference.

I started with the standard design process of building out the page layouts and design in Photoshop, which again, for more of a developer than a designer is still new to me. I spent some time looking for stock images or icons that I could use for the navigation icons, and ended up finding ones by TDPK at www.tpdkdesign.net that fit very well. Once those were in place, much of the site fell into place.

3D Feel
I liked the 3D feel that the navigation icons and new logo brought to the design, and wanted to incorporate that into the different elements of the site. I went with gradients (something else new for me) with both the background and the header mast, and a drop shadow around the overall page border to help with that 3D feel. I also played off the blue-orange color relationship to help those headers and links really pop.

As I have gotten into the habit of developing and testing my sites in Firefox first and then testing and hacking for both IE 6 and IE 7, that did present some challenges at first. I went forward with transparent PNG graphics, which I knew ahead of time had problems being displayed in IE 6. I didn't want to sacrifice any of the detail or quality of the design I was so proud of by limiting them to GIFs just to work in IE. Never fear.

Perhaps what I'm most proud of is how I overcame that. There are two main areas where the transparent PNGs came in to play and with what I had to do for IE 6: the gradient and icons in the header mast and the drop shadow around the page border.

Header and Navigation Images
I used the gradient in the header mast to separate it from the rest of the content on the page. I didn't want to degrade the quality of the navigation icons I was using by converting them from PNG to GIF, and the same for the logo with it's drop shadow. For those that don't know, a transparent PNG in IE 6 does not show up with the transparency you would expect, but instead it uses a nasty gray background for the transparent parts. For a quick demo, check out the logo image here by opening it in IE 6.

Although they suffered from the same issue of not wanting to be GIFs, there was actually a need for two different solutions.

First, the logo, which was a pretty easy fix. Since the logo was part of the markup of the page directly, I was able to use a find/replace technique via the AlphaImageLoader as referenced by Jeff Croft in the book, Web Standards Creativity. Essentially, it references the logo image by it's element id and uses the AlphaImageLoader to swap out the existing image for a div tag that is used to load the image into. It's encapsulated in its own javascript file and included using a proprietary IE conditional comment to run only for IE 6 and below.

For the second challenge, the navigation icons, it was different because those are included via CSS and not actually part of the viewable page markup. Essentially, I've been getting into the habit of creating navigation menus and links as unordered lists and using CSS for styling and positioning them, even the mouse-overs. So since they're not in the markup, the previous javascript find/replace technique for the header logo would not work.

What I did instead, again using the conditional IE comments, was include a separate CSS file specifically for IE 6 and below, that would style the navigation with non-transparent PNGs rather than the transparent ones. This also meant I could not have my gradient background in the header mast, so that separate CSS file also uses a plain white background to avoid that. Not the ideal design I wanted across all browsers, but it was a better solution for IE 6 users only.

Page Border and Drop Shadow
The drop shadow around the page border also consists of transparent PNGs, for this purpose to support the background gradient of the page. The page border consists of 3 images, again not in the markup but rather contained and styled in the CSS file. Those three files are:

Header border with rounded corners and no top shadow
Content border with only the left and right borders, and used to expand based on the page length
Footer border with rounded corners and bottom shadow

The background of the page consists of a gradient image repeated horizontally along the x-axis and a background color that fills in everything below it and supports the page growing vertically based on the amount of content on the page. This growth is also supported by the second image listed above, which is used as the content background for all the pages.

Based on that construction and the size of the background gradient, the header border image will always that the same amount of gradient behind it, because it never moves. For the most part, this applies to the footer border image as well because it's usually located far enough below the gradient to be the standard background color. The main issue was with the content border, the top of the content would be part of the gradient and need a different background color than content further down on the page.

This all works flawlessly for Firefox and IE 7 with transparent PNGs, but has the same issue as the navigation icons mentioned earlier. It also employs the same solution, though, with separate images for the border images in a separate IE 6 CSS file, and rather than a background gradient on the page, it uses only a consistent color. That consistent color is also built into the border images behind the drop shadows, to fit in unnoticed.

The Result
So at the end of it all, I was still able to keep the perfect design in Firefox and IE 7 that I had designed in Photoshop without having to sacrifice anything. With just a small tweaks and a little bit of degrading in the design, I was also able to have a very respectable version of the site design in IE 6 without having to duplicate much of the markup, styles and images. In a couple years from now, when IE 6 is used less, I won't have to change anything. :)

Ka'anapali Dreamin' - November Projects

noreply@blogger.com (Kris Nelson) — Fri, 02 Nov 2007 03:55:00 +0000

Wow, where has this year gone.

I just wanted to take a quick moment to post some details about the different additions I'm currently working on for the Ka'anapali Dreamin' site, all of which I hope to publish some time this month.

Sidebar Google Maps
I was looking up a local Chinese restaurant online a few weeks ago and came across a take out portal (the name escapes me at the moment) that should details about local places to order dinner. One of the little features they had was a small Google Map in the upper left hand corner, about 120x240 in size.

That got me thinking to add something similar to the different Activities posted on my site. It's going to have two smaller size maps under the sidebar pictures on the individual pages, such as the Cheeseburger in Paradise page. The first of the two maps will show a zoomed in view within about a 2-3 block radius, just to show a little of what's nearby and how close it is to the shoreline in most case. The second one will show a zoomed out view reflecting where on the island it is, whether it's in West Maui, South Maui, etc.

Google Satellite Maps
Ever since our helicopter tour above Maui, I've been mesmerized how beautiful the Valley Isle can be from above. At first, I was disappointed in the quality of aerial satellite maps on Google Maps of my favorite parts of the islands, but that recently changed.

Anyway, that inspired me to use those gorgeous satellite images from Google as art, and while they wont help people get from point A to B, I still think it can be appreciated by others. Starting with the Beaches pages, I will be adding full view Google Maps in the satellite view showing the wonders of Maui from above to compliment the details on the pages and the various photos we've taken from right on the sand. I haven't scoped out other areas like in Lahaina Town or around Hana yet, but as those get updated, I hope to post them, too.

Ka'anapali Beachwalk Photo Tour
This is perhaps the biggest of the three updates I'm working on this month, and so far, I'm pretty happy with it.

Take a quick step back to last year. We took a guided Road to Hana tour and took all these wonderful pictures. Now, when we got back to shore, we had hard time identifying most of them on a map, especially the waterfalls. There has to be a better way, right?

Now, when we were preparing for our trip this year, I did my homework. I picked up a Travel GPS Recorder to bring with us. Skipping all the geek speak, it uses GPS satellites to track your position at any given time, and when you sync up it's clock with the clock on your digital camera, magic happens. You load all the data from the GPS recorder onto your computer, and then run software that can find your pictures on a map, like Google Maps. Here's a quick sample of the results with my some of our photos at Flickr.

Okay, enough of that. What I decided to do when we would walk up and down the Ka'anapali Beachwalk was take pictures of everything; all the resorts and condos, Whalers Village, the beach, people taking surfing lessons, all of it. With all those photos, and the GPS data to place them on a map, I'm adding the finishing touches to a "photo tour", where you can view different photos from the beachwalk and see the location directly on a Google Map.

This one is currently working fine on the test site, and it's just a matter of updating the titles, captions and some of the lighting on all 100+ photos from the beachwalk. It sounds like a lot of work, but once its done, it will be pretty cool.

New webnelly.com blog

noreply@blogger.com (Kris Nelson) — Wed, 31 Oct 2007 01:15:00 +0000

Welcome to the new webnelly.com blog.

I'm putting this new blog together to keep tabs on all the new developments and changes that I'm making to my different sites, as well as some of the technologies and techniques behind them. It will also serve as somewhat of a change log for each site, since a few of the older sites that I maintain have gone through so many different updates and changes over the years, it's too hard to go back and write up everything that's gone into them.

At least this way, with this blog growing as my sites do, the history and growth of those changes will not be lost.

Thanks,
Kris.