You can grab it on GitHub here …. The link is actually to a repo for my WordPress-related Bash scripts, but I’ve only written one so far. I have a few others that I use daily, but they’re written specifically for my particular set-up. I’m working on making them more flexible so they can be used on any system. I should have a few more up there in a few days.

Hope it helps a little!

Technorati Tags: Bash, WordPress

Nivo Slider

For this tutorial, we’re going to use the Nivo Slider from Dev7 Studios ( http://nivo.dev7studios.com ). There are tons of sliders available, but I really like this one and it’s SUPER easy to set up.

Since I’m a TERRIBLE designer, I’m going to use the styles from an awesome tutorial by Gilbert Pellegrom called Skinning the Nivo Slider. The only thing I had to change was the way I’m rendering the captions, which I had to change because of limitations with BC.

Demo

Source

The Setup

Ok, let’s set everything up on your page. I’m not going to get into all the details of page templates and all that… I’m assuming you’ve got that down pat, so you can go about adding jQuery, the Nivo slider javascript file and the Nivo slider CSS file however you want. Just make sure you call the nivoslider.js after jQuery and call the nivo-slider.css before your main stylesheet. I generally just drop the nivo-slider.css into my main stylesheet and save myself an http request.

Now let’s go into Business Catalyst and create a new web-app. I’m calling mine slider, but you can call yours whatever you want. You want to set up 3 fields: Slider Image (image, required), Slider Caption (text, optional), Slider URL (text, optional).

The Slider Image field will create an upload button so that your client can easily add images. You may want to set up a folder for slider images and show them how to select that folder when uploading. The Slider Caption field is self-explanatory, and the Slider URL will be the URL someone will be sent to when the slide is clicked on.

After you  set up the web-app, lets go to Advanced Layout Customization and edit the List View template for the Slider web-app. Delete everything in there, make sure you’re in the HTML editor and add this code:

The tag ‘slider image_value’ tells BC that we just want the URL for the image. Without that we would get the entire ‘img’ tag and that would prevent us from adding a title attribute to the image which is how we generate our captions. The ‘?Action=thumbnail&Width=630&Height=235′ tells BC to resize whatever image is uploaded to that particular size. That way you don’t have to tell your clients to make images a certain size, they can just upload whatever they want. Of course, they’ll still need to be conscious of proportions, but that shouldn’t be too difficult.

The part that says ‘&algorithm=fill_proportional’ just tells BC to keep everything proportionate so we don’t get crazy squashed images.

Now go to the page template that you want to add the slider to and add this markup where you want the slider to appear:

Inside of Business Catalyst, go to a page ( create a blank one, or use an existing one, it doesn’t matter. All we’re doing is grabbing a tag) and insert the list view module for the Slider web-app into the page. Make sure you’re in the HTML editor, cut the generated tag out and paste it into your page template in place of the comment “Module Code Here”. Your markup should now look like this:

Obviously, your module number will be different…

So that’s it for the markup… I told you it was SUPER easy! All we have left to do now is activate the slider. To do that, place the following snippet in your template file just before the closing HEAD tag:

Now go add some items to your Slider web-app and watch the magic unfold!

Feel free to let me know if you’re having any trouble figuring something out and I’ll be happy to give you a hand!

Technorati Tags: adobe business catalyst, jQuery, Nivo slider

Open up Nautilus and then check the top panel in the menu, click on File and about halfway down you’ll see “Connect to Server”.

Here’s a screenshot:

Technorati Tags: linux, natty narwhal, ubuntu

It didn’t take me long to realize that a) just because you could design a website didn’t mean that you could build one, and b) I SUCKED as a designer. I had a design education and a firm grasp on the principles of design, and I really had no trouble understanding how to apply those principles to the web… but, I’m not an artist. I would spend hours looking at designs on sites like CSS Mania and CSS Remix and then duplicating parts of them in Fireworks. Not to copy them and use their designs, but to learn how things like subtle gradients, or 1-pixel lines were used to enhance a website’s design. Although I learned a lot, I quickly began to see that I could never put out those kinds of designs. I knew how to now, I could look at a design and totally re-create it, but I didn’t have the artistic creativity it took to think up those designs in the first place. But I still wanted to build websites for a living! So I decided to focus on web development.

Now, I don’t want you to get confused on the time-line here. During the that period of time, I was also learning to code websites, so it’s not like I gave up on design and then switched to development. I was doing both, however while I struggled with design, I soaked up code like a sponge. I could go through a tutorial one or two times and get it. I had a knack for it and it seemed to come naturally. It didn’t start out that way though. Remember, the last time I had ‘built a website’ was around 1995. It was now 2008! I had no idea what CSS was, or web-standards, or cross-browser compliance, or 1-pixel jog bugs, or the box model. In short… I knew NOTHING! But I’m not the kind of guy that lets a little thing like that stop me. I was going to build websites. I just needed to learn how. So, I went to my ALL TIME MOST VALUABLE TOOL- Google.

The following sites, blogs, podcasts are a just a few of the resources I found over the years that have helped me learn my craft. These are the sites that I visited daily, and because I’m still learning and still trying to improve and add more skills to my toolkit, I’m still visiting them regularly.

Nettuts

This is an EXCELLENT resource with high-quality tutorials and screen-casts about everything, for FREE! Part of the Envato network. I They have a premium membership available for $9 a month, which I’d highly recommend if you can afford it, but don’t worry if you can’t. There’s more than enough information in the free sections to keep you busy. The screen-casts are awesome, and Jeffrey Way is by far my favorite ‘screen-cast guy’. He’s upbeat and extremely knowledgeable and really knows what he’s doing. There are screen-casts and tutorials from other developers as well, and they keep right in line with the standards I’ve come to expect from Envato.

If design is your thing, they’ve got PSDtuts, Vectortuts, and much more.

CSS Tricks

I can’t believe all the sites I see and ‘professional web designers/developers’ that are still using tables! I can understand why (CSS can be a little frustrating to learn), but a ‘professional’… I’ll just stop right there.

Chris Coyier of CSS tricks is the man! He’s extremely knowledgeable when it comes to web development, and WordPress and he breaks CSS down and makes it understandable. There are plenty of tutorials on the website, and he also puts out a podcast. You’ll be amazed at the wealth of information available on his site!

Boagworld

This is where I learned about ‘web standards’ and a lot of the other bits about the business of web design and development that people may not think about at first. They used to put out a weekly podcast (up until a month or two ago), but it’s currently not in production. There are 200+ episodes available on iTunes that are chock-full of information that will bring you up to speed with the ‘industry’. The also have a forum and post articles on their website.

W3Schools

This site is awesome! They’re slug-line says it all:

“THE LARGEST WEB DEVELOPER SITE ON THE NET

Full Web Building Tutorials

- ALL FREE!”

W3Schools offers excellent tutorials about almost everything. I’m not even going to try to list everything you can learn there, just go check it out and see for yourself!

CSS Globe

I love this site! The tag line says it’s “your daily source of css news”, which it is, but there’s also great information on other areas of front-end development and best-practices.

The Blog of Soh Tanaka

I’m not really sure how I found this blog, but I’ve found some really great tutorials here. Soh Tanaka is a designer and front-end developer based in Los Angeles. His tutorials are great and easy to understand, and I also like his design style.

<!DOCTYPE>

These guys get an honorable mention because they weren’t around at the beginning. However, they put out a great screencast and I’ve found it to be very informational and up to date. They do a segment on design and then a segment on development, so it provides good information for both.

Twitter

Yep, Twitter! Follow good designers and developers and you’ll learn. See Quick Tips below.

Quick Tips:

• Subscribe to RSS feeds. There are all kinds of feed readers out there. I use Google Reader and FeedDemon, both free and synchronized with each other. On my iPhone I use NetNewsWire which also syncs with my Google Reader account. It’s not free, but there are several feed readers for the iPhone that are free and more than sufficient. You can download an OPML file with all of my subscriptions here if you want it.
• When you come across blogs that you like and are informative, take a moment to follow them on Twitter. I’ve gotten TONS of information as a result of tweets or re-tweets from developers that I follow that pointed me to articles that I might never have read otherwise. New articles mean new writers, which means new subscriptions, which means new sources of information! Your feed reader is your friend!
• Practice! Don’t just download the source code from tutorials and copy and paste them into your projects. Take the time to read and understand the tutorial. One thing I used to do is type out everything myself. Even if I was just doing the tutorial for practice and it wasn’t something I was trying to learn for a project, I would print out the source code and type it out myself. I believe this really helped me when it came to learning clean coding practices and understanding syntax.

So there you have it! I hope this has been a good source of information for budding developers. There are tons of sites and blogs and podcasts out there that can help you learn web development, this is not a complete list by far. What it IS, is a list of the sources of information that helped me the most. I hope they’ll help you as well.

My next post is going to give you even MORE resources… forums! Forums are a great way to plug in to your industry and I’ll give you a list of the forums I go to regularly to get great information on web development.

Technorati Tags: css, html, javascript, jQuery, web design, web development

One great feature that BC has is the ability to create an XML feed from a photo gallery, and that’s what I’ll be utilizing to build my fully customizable Business Catalyst photo gallery. I’ll also be using jQuery which is hands-down my favorite JavaScript library, and Shadowbox which is a pretty cool lightbox.

This is my first tutorial so please bear with me. And if anyone knows of a better way of doing this, I’d love to hear it. I did a lot of Googling and couldn’t find anything, but I’m always up to learning better solutions!

View the Demo

Demo Source Files

Let’s start with the back-end stuff inside of BC. I’m going to assume that you already know how to create a photo gallery. After you’ve done so, generate an XML feed from that gallery and copy the URL of the XML file.

Now that we’ve gotten our feed, let’s start writing some markup. First, you’ll need to either download Shadowbox here or use the version I’ve included with the source files. You can put the Shadowbox folder anywhere you want, you just have to make sure you keep all of the Shadowbox files within that folder.

Now let’s include jQuery and the Shadowbox files in our document head along with the JavaScript file we’ll be using for the gallery… I’ve just called it ‘gallery.js’.

And we’ll add the code to initialize Shadowbox at the bottom, just before the closing ‘body’ tag.

We’re going to load the photos as list-items into an unordered-list, so let’s add the unordered-list to our markup where we want the gallery to appear.

Here’s the fun part. We’re going to use jQuery to parse the XML feed and output each photo as a list item inside of our unordered-list. I put my JavaScript code inside a separate file called ‘gallery.js’.

Now let’s add some styles to make our photo gallery look good. Obviously, you can style the gallery however you want. Here’s the CSS I used for the demo.

So there you have it. A custom photo gallery in Adobe Business Catalyst!

Technorati Tags: adobe business catalyst, jQuery, photo gallery