InBeta

danjasker.blogspot.com

FW5: Fading Slideshow

This week has been a super busy week as I've been wrapped up in a project that required some serious unexpected attention. Although it has been busy, I haven't forgetten about my screen-cast's so this week it's a brief run through of using Weaver's Fading Slideshow Action in Freeway 5 Pro. This Action can be found on Weaver's website and can be used in Freeway Pro and Express. In exactly three minutes and four seconds you'll learn how to create an excellent Javascript scripted DHTML-based fading slideshow as an alternative to a Flash based one. Also, did I mention it works on the iPhone, and it's free?

Based off the Dynamic Drive website the description reads that this is a robust, cross browser fade-in slideshow Javascript-based DHTML script. It allows you to have multiple slideshows on the same page, optional linking for certain images, and the ability to randomize the display order. It also has the ability to pause when the mouse is over it and did I mention that it's compatible with major browsers like IE, NS6+, Firefox, Safari? One final feature, specifically in Weaver's Action, is that it allows your Freeway image that you import to be the first slide in your slideshow or as the image to be shown in-case a specific browser has Javascript turned off.

Another great alternative if you're out there and not comfortable with Flash or can't afford to pay someone to do it. It's all laid out nice and easy and all done in Freeway. A brief disclaimer is that the photo's used within the screen-cast are not mine and if these photos are yours then I can remove them. I take no credit for the photography.

So now that that is out of the way, devil in and enjoy another screen-cast.

Mediafire Links:

http://www.mediafire.com/?twmyi1it1yz

Password: apple

Action Link:

Found Here

**UPDATE** Now available at FreewayCast.com

http://freewaycast.com/screencasts/view/27-fading-slideshow

Comments are welcome. Enjoy!

FW5: Meta Tags

Today I'm releasing a screen-cast on entering META tags into both your Freeway Pro and Express documents that can be used to help describe and promote your published web pages. Although the Google giant has re-written the book on the dying Meta Tags, there are still a few tags you can use that won't affect your search-ability, in-fact it may help it. This screen-cast covers the basics of META tags, what they are, what they look like, and how you can use them to create a professional looking indexed website in either Freeway Pro or Express.

Although Google has re-written the book, they haven't authored it completely. Meaning that other major search engines still use META tags and have their own methods as far as rankings and page views. It doesn't hurt to have them in there and as mentioned in the screen-cast there are ways to effectively work together.

Overall this can be done either using Express or Pro versions of Freeway and with an effective understanding of proper site promotion you can have a professional and searchable website that shows a proper description tag while being indexed that will draw users to the information they need.

Also, all of my future screen-casts, for now, will be posted over at FreewayCast.com. A great site, just starting out, has offered to host my screen-casts for free. Thank you to them for their time and dedication to making Freeway better.

So, enjoy!

http://freewaycast.com/screencasts/view/25-meta-tag-entries-in-pro-and-express

*/ On A Side Note /*

I would like to personally thank Victor Hooper for the donation submitted today. It goes a long way and I greatly appreciate your giving attitude in these trying economic times. His website can be found here and looks to have lots of great things happening on it.

*/ End Side Note /*

Thanks again to everyone for their comments and suggestions and stay tuned as more screen-casts will be released shortly.

FW5: MooTools Preview

One of the hardest parts about buying software is not being able to see how it's more popular features work in your own personal workflow. Usually a demo of the software is offered with some-functionality with a 30-day limit to try it out. Within those 30-days you hope to walk away with an understanding of what you're going to be paying for and if it's procedures are manageable for your business.

However, when it comes to purchasing 3rd-party Freeway actions, there are not any demo's. You may get some documentation, but you really need some time to mess around with it. So, this week I'm taking on a product showcase to those people contemplating whether or not they need to buy the MooTools Action Suite ($15). I've taken the liberty to show one of the more popular features of building an "Accordion" style menu.

Essentially what MooTools does is that it uses several open-source javascript library files to create some great effects with no coding on your part for your website. The Action Suite comes with easy to understand documentation as well as a thorough change-log for it's features and new additions. MooTools has some simple demo's found here to give you an idea of what can be done. Although some of the effects from the demo site are not included in the Freeway actions, the important and simple one's are.

In this screen-cast I cover it's most popular feature and that is building an "Accordion" style menu. What this means is that it's a menu system that has hidden content that is "expanded" on the click of a link. It can be used to build a rather clever navigation system and I've used it on several of my own sites. So download the screen-cast and check it out.

A disclaimer for Freeway 5 users:

MooTools currently has issues with "Scriptaculous Actions." A bullet-point for FW5 notes the inclusion of Scriptaculous Actions. Fundamentally, these are incompatible with the Mootools Suite. To have the Suite and these other Actions play nice, you must avoid using an 'effect' (ie 'fade' or 'pulsate') in any of the 'xxx.FX' Actions that ship with FW. Work is being done to make the Suite intgrate seamlessly into FW5 and its new Actions (at the very least alert the user during the design phase).


Files for "MooTools Action Preview"

http://www.mediafire.com/?792mxebydss

Password: apple

Also I may have a new place for my screen-cast video's to be hosted so new links may be available shortly for all screen-casts. There are still some issues I have to work out, but I hope to have them up and streaming as soon as possible.

FW5: Horizontal Lists

In my last screen-cast I laid out the way to style a vertical list that had colored rollovers without using the CSS Menu Action. It could then be used, for example, as a link list for a recent entries section within a CMS built site. Although there are several other uses for vertical lists, a horizontal list can serve as a way to present a CSS based navigation that is simple but elegant. Lists are one of the most versatile items found on the web and by understanding the basics of styling them one can achieve some great effects while keeping high on search-ability.

Starting on a simplistic level you can style a list by first targeting "li" or "ul" or "ol" HTML tag elements and then you can style those specific elements using CSS attributes. As we've learned from the previous screen-cast that "ul" (unordered list) or "ol" (ordered list) deals with telling the browser that a list is here and "li" (list item) stands for each item in a list, either ordered or unordered. As we've learned in Freeway 5 Pro, they've made it easy to create a list but your options kind of end there. We've learned how to identify lists by id and class and that they can go either horizontal or vertical directions.

Changing a vertical list into a horizontal list involves merely changing one CSS attribute. When we created a vertical list we set the "display" CSS attribute to a value of "block." This meant that the list item will be displayed as a block-level element, with a line break before and after the element. Meaning it will keep the enter down's we put in there and put the next list item directly underneath it. When it comes to creating a horizontal list we simply change that display attribute to "inline." What this does is put the list items in one straight horizontal line with no line breaks before or after it. Then by simply adding margins and paddings to our "li a" or "li" tags you can then space things out a bit, remove those border styles, and begin styling away.

Instead of doing a screen-cast about this, please watch the vertical list styling video and simply change the "li a" or "li" CSS attribute of "display:block" to "display:inline."

Your list items are important in setting up a professional styled website as well as a way to present items neatly and organized.

*/ On A Side Note /*

I had received word a few days ago that my CMSMadeSimple sample Freeway files were corrupt and/or not working in adding META tags to it. I have since redone and updated the files so if you're having trouble with that it should be fixed now.

Also I am seeking full-time design-based employment opportunities so don't hesitate to view my resume or view my portfolio and see if I can fit into the design needs of your company or agency.

*/ End Of Side Note /*

I'd also like to add that I will be attending a concert tonight featured Cheap Trick, Heart, and Journey. I'm super excited to see these groups and will report how it all went down.

Have a great weekend.