Saturday, 19 May 2012

Transform Your Website Background Into a Slideshow | ChurchMag

Transform Your Website Background Into a Slideshow | ChurchMag



bgstretcher

Yesterday’s post about Backstretch, a jQuery plug-in that dynamically-resizes your background image, got me thinking more about the slideshow options. Backstretch could be easily configured to a slideshow, but lacked some extra creative effects you would want if you implemented the slideshow option.

If you want your background image to change or implement a dynamically-sized slideshow, bgStretcher II is what you’ll want to try:

bgStretcher II

As the web is viewed on multiple screen sizes and mobile devices, tools like this are awesome.
bgStretcher II is easy to setup and has plenty of creative options:
  • Speed
  • Transition Effects
  • Slide Direction
  • Prev & Next Selectors
  • Anchoring
  • Preload
  • More!
I find it curious you can initialize the plugin for custom DIV use. This would be good if you wanted to draw on bgStretcher II for a slideshow.
Also, with the ability to implement the Prev and Next selectors, you could use bgStretcher II to setup a photography demo reel. Drop in some hi-res images, and the demo reel would dynamically fit fullscreen no matter the size of screen.
There’s a lot of potential and flexibility with some creative bits of code and bgStretcher II.
Check it out!

SEO For RapidWeaver Video Course: Walkthrough Search Engine Optimization Course

SEO For RapidWeaver Video Course: Walkthrough Search Engine Optimization Course

Watch Videos

Watch the Video Tutorials Below

Tip! Stay up to date with new video sections and software: Join our newsletter.

Introduction

  1. What is Search Engine Optimization (SEO) and how we will apply it to our sites - (2:57)

Planning Strategies

  1. Finding profitable keyword phrases - (5:00)
  2. Choosing a professional domain name - (2:27)

On Page Optimizations

  1. Search engine friendly page names - (2:26)
  2. Making an easy to follow navigation menu - (2:34)
  3. Creating content search engines love - (2:13)
  4. Targeting specific geo-locations for better rankings - (0:58)
  5. Optimizing image file names for universal search - (1:08)
  6. How keywords in links can boost your search engine rankings - (2:32)
  7. Title tags, the most important optimization technique - (2:17)
  8. Adding a captive description - (2:02)
  9. Meta keywords and how to use them - (1:32)
  10. Header tags for additional classification - (3:25)
  11. Alternative text for images - (1:14)
  12. Splash screens and how they hurt your website - (0:32)

Off Page Optimizations

  1. How to properly get listed in search engines with XML sitemaps - (4:11)
  2. Know your website visitors with Analytics - (4:21)
  3. NEW: How your site speed effects your search engine rankings - (2:34)
  4. Popularity contest: How your site popularity affects your rankings - (4:01)
  5. Track your overall success with search engines - (2:32)
  6. Exploring the social web and bookmarking - (2:01)
  7. Get right to the top of Google Places - (1:58)
  8. Get instant visitors with directory listings - (1:02)
  9. Write about your expertise to build your site credibility - (1:16)
  10. Announcing your website to the world with Press Releases - (1:13)
  11. Let users discover your products with Google Product Search - (2:23)

Social Media Marketing

  1. Create A Custom Facebook Fan Page For Your Business - (7:56)

Conclusion

  1. Conclusion - (0:59)

Bonus Videos

  1. The most common SEO mistakes and how to avoid them - (2:39)
  2. Add an Image Map to Your RapidWeaver Site - (1:39)
  3. Add Google Analytics to Your RapidWeaver Website - (1:43)
  4. How to verify your website with Bing - (1:41)

Building Your Own Website: Sandvox, RapidWeaver or Flux? | Mac.AppStorm

Building Your Own Website: Sandvox, RapidWeaver or Flux? | Mac.AppStorm

Building Your Own Website: Sandvox, RapidWeaver or Flux?

Remember iWeb? This former iLife member’s lofty goal was to translate the intimidating task of building a website down to the “drag and drop” simplicity of the Mac experience.

Apple’s brief foray into the world of DIY websites was impressive at first, but aged quickly and was eventually abandoned altogether. Discounting professional developer software like Dreamweaver, this leaves Mac users with three primary options for WYSIWYG website building: Sandvox, Rapidweaver and Flux. Today we’ll take a brief look at each and offer some advice on which you should use.


Sandvox

screenshot

Conceptually, Sandvox is the closest thing to iWeb on the market. The workflow here is very familiar: choose a theme, edit the text, drag in some images and hit the “Publish” button.

Sandvox has plenty of built-in themes and can easily be expanded via third party designs. As a designer, I’m definitely not crazy about the available Sandvox themes, the overall aesthetic quality of the set feels dated, but there are some gems. Non-designers will likely find something fun and simple that’s perfect for their needs.

The professional features here are limited, but very close to what you saw in iWeb. The app definitely isn’t geared towards coders or designers who want to start from scratch, but you can “inject” snippets of HTML, JavaScript or even PHP into the pages on your site.

Who Should Use Sandvox?

Anyone who used and loved iWeb should definitely check out Sandvox. The two apps are close enough that you’ll have very little trouble transitioning from one to the other.

In fact, Sandvox’s marketing heavily targets iWeb users. The website welcomes “iWeb graduates” and even has a guide for iWeb switchers.

RapidWeaver

screenshot

Occasionally, it seems as if a third-party developer understands the true “Mac experience” better than even Apple. RapidWeaver is not a slightly different version of what iWeb was but rather everything that iWeb should’ve been. It’s simply a beautiful program that is a joy to use whether you know anything about building websites or not.

To build a site in RapidWeaver, you add one page at a time, each of which conforms to one of eleven page types (blog, photo album, etc.) and the overall visual theme you choose. The interface is customized for each page type and the controls are simple enough for anyone to use.

The professional features here are pretty extensive. Overall, the design of your site is definitely driven by the chosen template, but you can customize code fairly easily and really bend the site to your will if you need that kind of flexibility. It really helps that the auto-generated code is actually human readable and conforms to web standards.

Extensions

The killer feature of RapidWeaver is definitely its expandability. The RapidWeaver Add Ons Library is not only full of gorgeously designed themes, but also some amazing plugins like that really stretch what’s possible. For instance, the Blocks plugin brings full-on freeform page layout to RapidWeaver and is a must-have for anyone who wants true control over their design. 

Who Should Use RapidWeaver?

RapidWeaver is an app for a wide range of users. If you don’t know anything about building a site and aren’t crazy about the idea of going to school to learn web development, RapidWeaver will help you create a great site with little effort.

Also, if you’re a designer who knows his/her way around an HTML document but aren’t really the code-from-scratch type, RapidWeaver with the addition of a few powerful plugins could really help you convert your designs to basic but functional websites.

Basically, if you’re a newbie, RapidWeaver welcomes you with open arms and a user-friendly workflow and if you know enough to need some advanced features, they’re ready and waiting for you to dive in.

Flux

screenshot

Flux is by far the furthest app from iWeb in the bunch. In fact, it’s so different that it’s hard to group with the two apps above.

iWeb, Sandvox and RapidWeaver are all primarily aimed at making website creation available to the masses. They’re tools that allow everyone to get a taste of web design without necessarily becoming professionals. Flux on the other hand, really is a professional web design tool.

It has much of the charm that you get from a RapidWeaver-like WYSISYG, only it gives you complete freedom to design and code your own site. There are some templates available, but the strength of the app is that it isn’t in any way template-dependent.

In fact, you can import existing web projects that you’ve coded by hand right into Flux and then shuffle objects, add styles or create dynamic objects with easy-to-use tools. Think of it as an awesome visual front-end to your code.

Who Should Use Flux?

Flux has a little bit of a learning curve and will make the most sense to those that are at least partly familiar with how CSS works. If you’re a graphic designer who is either intimidated by or bored with the process of coding entire sites by hand, you should absolutely give Flux a shot.

I personally code sites by hand and generally avoid WYSIWYGs like the plague. That being said, I love Flux. It’s a really innovative concept and once I took the time to really learn how to use it properly I was surprised at how much you could accomplish with a really simple workflow.

Obviously, none of these options are going to replace traditional text-based IDEs for hardcore coders. If you fall into this category, check out Coda or Espresso instead. 

Conclusion

To sum up, there are three primary applications in the realm of Mac-centric WYSIWYG website building apps: Sandvox, RapidWeaver and Flux.

Sandvox is probably the most iWeb-like tool on the market. Users that were sad to see iWeb go should definitely take a look at Sandvox. RapidWeaver is like a really slick iWeb upgrade. It’s more attractive, more powerful and more amazing in just about every way. It’s easy enough for complete beginners to pick up and powerful enough that users who are slightly familiar with web development will find the features that they need, especially given the wealth of plugins that are available.

Finally, Flux is the most advanced and most flexible option, affording you complete template independence. If you don’t know a thing about web development, stay away from Flux. If however, you’re looking for the best non-Dreamweaver WYSIWYG around for the Mac, give Flux a download.

Leave a comment below and let us know what you think of these three apps. Where do you fall on the web developer spectrum and which app do you think is best suited for your needs?

Sunday, 13 May 2012

rapidweaver ref - menu center-submenus-html5

menu.com/center-submenus-rapidweaver-html5

Overview

CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features. No longer will we have to rely on so much JavaScript and images to create nice looking website elements such as buttons and menu navigations.
You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation. This menu works perfectly well with Firefox, Opera, Chrome and Safari. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. CSS3 transitions could one day replace all the fancy jQuery animation tricks people use.

Menu Features

  •  No Javascript is required
    Works in browsers with disabled Javascript or if a browser has no Javascript support at all.
  •  Cool CSS3 properties
    Multi-level dropdown menu is created using CSS3 rounded corners (CSS3 border-radius), CSS3 shadow (box-shadow and css3 text-shadow).
    Opacity, backround and font colors, linear gradient and radial CSS3 gradient are also supported.
    CSS3 only effect for dropdown appearance, Fade,Slide, etc.
  •  Mega Menu with Multicolumn Submenus
    Create Mega Menu with multicolumn submenus. Specify the number of rows you want to have.
  •  SEO friendly
    Search engines and text-only browsers friendly.
  •  100% CSS-driven designs
    The menu is based on HTML list of links (UL/LI structure) and CSS only. No additional non-css params are used.
  •  Small size
    Immediate loading of the menu. Doesn't use additional files.
  •  Browser support
    Supports all modern browsers (in IE6 top-level items are accessible only).
  •  Supported Devices
    Supports all modern devices (iPhone, iPad, Android, BlackBerry, Windows Phone).
  •  GUI interface
    Visual design user interface allows you to create your menus without the need for complex hand coding. Use the preview window to view your menu design while you are developing and customizing.

Rapidweaver ref - TSOOJ | What about loading speed and image file ...

TSOOJ | What about loading speed and image file ...

Support Center

What about loading speed and image file size?

Last Updated: Mar 30, 2012 01:50PM CEST
To achieve fast loading pages and normal image transistions, it is best to optimize your images before uploading to your website or adding them into the RapidWeaver 5 Resources.

You can achieve this using your favorite image editor and choose "Save for Web & Devices". Set the DPI value at 72 and use a maximum height/width amount of 1200 pixels. Of course it's best to test your full screen Slideshow on multiple devices and try to lower the maximum amount of the heigth/width when possible. Try to strive for a file size that is below 200kb, keep you image file size small and your website visitors happy.

When you don’t have Photoshop or another image editor you can resize your images online for the web, for example with www.webresizer.com.