3 Great JavaScript Premium Sliders

JavaScript with its jQuery and D3 libraries has had a strong set of  routines for graphics and sliders. But with the push coming from CMS and Online Commerce tools like WordPress, Shopify, and Magento, the quality of JavaScript  sliders has reached a new level of excellence. This review will look at 3 sliders[ Master Slider, Slider Revolution, and WowSlider] which run in JavaScript, WordPress and other environs with the following common capabilities:
1)Boxed, fullwidth, & fullscreen sliders that are responsive in fitting slideshows onto desktop, tablet, and phone devices;
2)Sliders supporting multiple transitions, captioning and animated layers;
3)Animated layers made-up of text, shapes, images, videos,HTML-blocks, audio, video, and other sliders;
4)Sliders with sophisticated navigation controls including arrows, tabs, thumbnails, touch swipe, keyboard, and mouse-wheel options
4)Slider layouts with distinctive and customizable stylings savable as reusable templates;
5)Slider editors that support simplified often drag and drop interactions/operations.
These sliders take the old simple fade or carousel sliders to a new level of sophistication. Here lised alaphabetically are 3 premium JavaScript sliders.


Master Slider – $17US, 1 website unlimited updates

Master slider delivers all the top notch features plus a solid UI interface:
jsslidemastsetup
As shown in the screen shot, Master Slider can draw from local files, WP Posts, Flickr, Facebook, Instagram and Woo-commerce image and other media resources. As well users can draw upon Sample Sliders for layout and design ideas.

Working on the slides  allows for a number of slider settings:
jsslidemastsetup2
This is followed by a fullscreen editor for each slide that allows for detail control of the slide transitions, captioning and adding of layers:
jsslidemastsetuplayers
Master Slider does not have all the animation objects available to Slider Revolution but certainly does have more layer options then WowSlider. Master Slider is also fairly easy to learn. Master Slider sits in the middle on costs – $17/website versus $26/website for Slider Revolution.


Slider Revolution – $14/website+$12 onetime for Visual Edit addon

Slider Revolution sits atop the very competitive premium WordPress Slider plugin market. In the last two years it has expanded it deployment reach to JavaScript,Drupal, OpenCart, Magento, and Prestashop. Here is  the setup screen:
jssliderev1stsetup
Slider Revolution provides about 2 dozen free slider templates to speed up development. Users can also load in their own saved sliders for reuse. These options do speed slider design and development.

The Slider Editor is chock full of options:
jssliderev2setup
The Slide Editor has seven tabs for editing and customizing each individual slide including use of image, video, html blocks for slide base element and then a awide range of transitions, links and navigation settings. But the biggest plus is the unlimited layers that can be scheduled to appear on the basic slide:
jssliderevslidesetup

Going beyond Master Slider, Slider Revolution offers broad options for layer animations and objects.Slider Revolution uses the Greensock.js animation interface to its advantage with the most flexible positioning, scaling and animation transition options.

There is a trade-off with so many slider options, a significant learning curve. But Slider Revolution helps in 3 ways. First, the templates provide examples of how to do attractive slider from full width using hero images to carousels with video slides. Second, the drag and drop interface considerably eases placing of animation layers and customizing their transitions. Finally, Theme Punch, Slider Revolution makers, have a good set of documentation including videos.

So Slider Revolution delivers top of the line slider features with an approachable development interface. Here is some sample results:
jssliderevresults
One hidden benefit is the ability to save sliders developed for WordPress and then use them in Magento or JavaScript.


WowSlider – $99/year for unlimited website usage

WowSlider has long had one of the widest set of deployment options including standalone HTML+JS, WordPress, Joomla, etc. It is also one of  the easiest to use slider interfaces:
jsslidewow1
Adding images and videos is very simple. Then to add captions and description for each slide is easy onto the form at the bottom of the WowSlider editor.

Next WowlSlider has a design property popup which helps complete the setup:
jsslidewow2props
Note that templates allow users to control the styling of captions, descriptions, and navigation controls for each slider. Wowslider does not allow setting these properties for individual slides. Also only captions are allowed for layer animations – not added images, videos,shapes as in Master Slider and Revoltion Slider.

But as noted the publishing options for WowSlider are quite robust:jsslidewow3pubs
Facebook support is unique among our 3 sliders.


Summary

The price and features do not determine a clear cut best sider. If you develop for a lot of websites where simple sliders and banner ads predominate, WowSliders ease of use and yearly price pays of if you are plan to develop sliders for 5 or more websites. Also the low learning curve makes WowSlider productive right away.

If layers animations are important [and its the latest trend in Web UI/UX], then its  achoce between Master Slider and Slider Revolution. Master is cheaper but S;ider Revolution has more features and deployment options- so our shop has adopted Slider Revolution.

But be forewarned, the rate of innovation in premium sliders is very high – just consider Smart Slider 3 and Layer Slider as examples. So the premium slider market is not yet a done deal.

Advertisements
Posted in coding | Leave a comment

Canva.com: Graphic Design Practice

In an earlier review, thePhotofinishes.com examined Canva.com as a a Graphic Design School and came to the conclusion:

So clearly Canva.com is not a Photoshop or Illustrator for design features. But there are enough robust options and a great set of practical, Try-It-Yourself lessons in the spirit of W3Schools for Web Development, that makes learning the elements of Graphic Design not only approachable but also creatively fun. Score two big thumbs up for Canva.com as a superb online resource for learning Graphic Design.

But how robust can Canva.com be in actual Design Practice? Well we offered as a sample the 12 designs finished during the review in about 5 to 6 hours:
canva1
These designs were certainly aided by the Canva tutorials on Fonts, Layout, and Branding. Also, design work on refining my own photo blogs like PicsofCanada.com and PixofToronto.com were influenced by Canva inspired  creative ideas.

So when Canva offered a JavaScript button to embed a Canva workspace in my Web apps, I jumped. This is an attractive way for JavaScripters  to embed a Canva button in their JS Single Page App. This enabling a Canva workspace in their app is very nifty. Aviary offers the same  embedding opportunity for their photo editor to JavaScript astute developers.

But let us return to the question of how well does Canva further Graphic Design Practice?

Graphic Design Practice

Canva.com takes the approach of learning Graphic Design by doing it. Thus even, the Getting Started tutorials have users immediately trying out some of the key Canva features and Design methods  while on hte tour. And then the next set of tutorials all have exercises set up to utilize the Canva skills while revealing basic Design theory. Thus learning about Grids draws on what was previously about Fonts while revealing the magic of order in collages and grids. This hierarchy of lessons makes getting up to speed in Canva that much faster and easier.

And Canva is crammed with lessons on every aspect of Graphic Design. Be sure to check out the Canva Teaching Materials. For example, I wanted to investigate more aspects of font usage and in the teaching materials I found a link to this Design School blog post the Ultimate Guide to Font-Pairing. In general, Canva is crammed with Workshops, Teaching Materials and Blog posts on all aspects of Design. And the only price of entry is to subscribe to Canva.

This practical teaching approach is further supported by all the templates that provide a design inspiration for dozens of tasks:
canvatemplates
This practice is somewhat counter-intuitive. Doesn’t creativity require its own pot brought to a solitary boil? Well no. The Impressionist Painters in France and the Group of 7 in Canada are but two examples of where artistic communities helped feed each others individual creativity. And the Web has seen huge websites grow around shared works like Flickr in photography, Dribbble in Design, Pinterest in branding, Tumblr in copy meets design, ColourLover for color palettes, patterns and trends, etc, etc. Seeing novel design ideas stimulates the creative juices. And every one of  Canva’s template categories has plenty of creative ideas on display.

Creative Tool Balance

Its our argument that Canva has reached a creative balance. It is the essential graphic design tool features without being overwhelming with detailed options like in Photoshop or Inkscape or Visio. Likewise the tutorials are often short and sweet, 5 steps to illustrate a design goal or tip. There is help and hints strategically placed throughout. But Canva spares no effort on graphic tips, tricks and methods and is chock full of great readings on graphic design methods and trends – be sure to check out the Blog.

Finally, this balance encourages trying things out. The templates are just a click away from editing with a rich starting point:
canvatriHere is a sample of how an Arizona postcard transformed into a Northumberland Hills Ontario ode. The key was to preserve the palpable enthusiasm of the original into a heartfelt testimonial for the landscape and countryside of Northumberland Hills. And the well balanced Canva tools don’t get in the way but rather encouraged trying things out. More and less transparency. Bold, then italics, then neither in the fonts. Deep Purple-black in the title, then sticking with Black & White. Romance in the footer script and larger size. 20 minutes and happy with the results.

Canva Extras

DABumdTJoD4 Canva has a number of extras both free and for a fee. The branding image on the left is a direct insertion using the Canva WordPress plugin.This is a free plugin which allows users to work on a design in Canva and have it placed in your Post or Page where desired. This plugin is a great way for WordPrees site managers to add style to their  designs and yet still retain the ability to edit them later in Canva.

Canva also has a free iPad app on the Apps store which provides a mobile version of the interface that emulates much of the desktop version. As well the Canva Button has become so popular that the Canva has had to close signups until it can be adequately supported.

For Designers and Photographers Canva has separate affiliate programs. For Work Groups Canva has a team option which costs $12.95/month but allows working with a brand kit and collaboratively. There is a free version available for non-profits.

As noted before the blog is full of great references and resources. Latest discovery – Free Stock Photos: 73 Best Sites To Find Awesome Free Images. The blog is invaluable.

Finally, Canva has a Teaching Materials page where free and for-a-fee workshops are available. The workshops are embedded in Canva and  provide both a slide presentation and lesson notes. There are other references and related links. This is a fitting closing feature about Canva and its dedication to teaching Good Design.

Summary

In our first review of Canva, it was rated as a super tool for learning the basics of Graphic Design especially as they apply to Print and the Web. This review raised the question whether the site is a good place to practice Web Graphic Design. And the conclusion is that Canva provides Design Tool balance – not too much detail  so that good design gets lost in the confusion; but more than enough to arrive at some very pleasing [and dare I say well-designed] works. Last, but not least, Canva provides solid export tools for design output to PDF, PNG, JPG and even WordPress pages and posts.

 

Posted in coding | Leave a comment

TO Style Graffiti

TOScenesNifty graffiti ? All over TO Town.

See more here!

Posted in commentary | Leave a comment

JavaScript Comes To WordPress

What Calypso means to WordPress Users

JavaScript has always been a part of WordPress. But within the last 5 years WordPress has expanded its use of 3rd party JavaScript libraries as seen in the current list of supported JS libraries:
Backbone.js – handles much data table operations
cropper.js – key part of media library Crop tool
emoji.js – manage emoji icons
html5.js – checks HTML elements
jQuery .js- most frequently used JavaScript library
jQuery.imageareaselect – part of Media library edits
jQueryUI. – many admin interface ops
swfupload (deprecated) – Adobe Flash is disappearing
ThickBox – Gallery views
TinyMCE.js – Visual editor features
This list of JavaScript routines varies widely depending on  the theme and plugins being used in your WordPress website.

Enter Calypso

calyp2In November of 2015, a new Calypso UI/UX interface was introduced on WordPress.com  as the screenshots below show. Matt Mullenweg,  WordPress creator and curator, has announced, JavaScript has become the dominant coding tool for the WPAdmin Client and other user interface functions at WordPress.com.

So when you  use  one of your blogs at WordPress.com you will have a choice whether to use the JavaScript-based Calypso interface or the traditional PHP-based admin and edit  interface. The key question is what does this mean in the long term to the PHP-Centric WordPress  Core and the 42,000++ PHP-based WordPress plugins currently available to WP users.

So now with WordPress.com, users have all the major WP screens and operations but with new JavaScript driven interfaces. Much of  the Calypso interface reproduces the classic WP Admin UI but there are some major changes. Here is a Calypso Post Edit screen:
calypsoMost of the PHP-based traditional Post and Page edit interface is faithfully reproduced in Calypso JavaScript but with new left versus right sidebar orientation. Unfortunately I was surprised to discover that many of the WordPress Edit Annoyances are preserved in the new Calypso editor. If you want to check this out on your WordPress.org hosted website, just add the JetPack plugin and enable the Manage Jetpack option.

Calypso is used throughout the new admin interface. Here is a sample:
wpcalmenu

In the screenshot above the drag and drop Menu interface now has  a + icon driven placement of new menuitems. In the Page/Post editor, the Visual Edit tab looks very much like the classic WP editor but the Text or HTML tab is now stripped of all its edit commands:
wpcaledithtmml

Also note that the Editor sidebar is on the left and most of the commands are contained in an accordion pulldown. However, many of the classic WP  commands have changed position,  layout or even have yet to appear in the current Calypso interface.

For example, the gallery command in the media library sees a simpler interface:
wpcalgallery

Even more useful, now there are 7 gallery layouts including tiled mosaic and slideshow layouts that are simple and easy to use. But these layouts cannot be configured at all while there is still no list of galleries . So this  removes  some of the luster for Calypso gallery support.

Major New Calypso Features

In the past few months a number of Calypso features have snuck out the door including changes to the editor  and JetPack configuration/settings, etc. But with  the Calypso unveiling, all of WordPress.com  admin interface has changed. And the new Admin interface [you can still revert to the classic old WPAdmin] takes on new functionality.

First, using a special Calypso Mac App or WordPress.com in any major browser, and a JetPack plugin enabled hoste WordPress.org website, users now can tryout many parts of the Calypso interface have a multisite admin interface for many WP tasks:
wpcaladmin

So from my WordPress.com MySites page I am able to edit my PicsofCanada.com website which is hosted on an  external server. This is attractive because it means I can go to one place to administer a host of my own and client websites. There are restrictions, see here for details.

Second Calypso key feature is that JetPack now has a uniform JavaScript base with a common setting/configurtaion interface. But this raises a question, that Matt Mullenweg is not prpapred to answer – will JavaScript replace PHP as WordPress’ Core language?

Third key feature  is the fact that WordPress now has a more general Notifications system. Users go to one place to see clients reactions and comments to messages and posts online. This messaging  answerback  page   could be extended to other social media like Faceboook, Google+ and Twitter.

In sum, WordPress with its JavaScript for admin and  client side  operations now has a new state of the art interface using the latest JavaScript libraries. Just a little future proofing by adding and/or intensifying the use of server-adept JavaScript libraries like angular.js, node.js , React.js, etc. More broadly, JavaScript after 24 years of Web evolution, emerges as the driving programming language for WordPress and also  broader Web  development.


Calypso Resources:
Definitive Overview
GitHub Open Source
Matt Mullenweg talks Calypso among other things
The Future of WordPress in 2016

Posted in coding, ui | Tagged , , , , , , , , | Leave a comment

Eco-Scroll jQuery Plugin

I have been looking for a robust jQuery plugin that would allow me throw up a wall of images very quickly – no fuss, no muss, just display them quickly in a Window. And with thef Eco-Scroll  plugin plus the Photoscape‘s Batch Image Editor I have found a very nifty solution to my problem:
ecoscroll1 Now here are the features of the Infinite Image Wall:
1)It is responsive, expanding and shrinking the image wall to fit the viewport;
2)It allows developers to determine the size of the images displayed;
3)The display size of the images can be different from the actual size;
4)The actual image sizes do not have to exactly match, the resize operation, shrinks and expand image automatically. However, mixing landscape and portrait will lead to distortions depending on what image display size is chosen;
5)For non-touch screens, mouse drag and drop moves the images in any direction; for touch screens, swipes work;
6)For developers it is easy to add lightbox or other functions to respond to clicks on any image as shown in the screenshot below;.
ecoscroll2
7)Developers can easily add “momentum” to the swipe/mouse-drag operations
In sum, there is a lot to like in this free jQuery plugin. But there is more.
ecoscroll3
Bootstrap-like Carousel with Touch and Drag support. And there is more, the Wall of YouTube.
escroll4
This again turns out to be handy because you can collect your favorite JavaScript Tutorials or Tonight Show Lip Sync Battles and put them on your online, responsive, and swipeable Youtube Wall and watch all the user traffic roll in.

Summary

I like Eco-scroll because it more than delivered on being able to quickly setup an Image Wall full of useful features. The icing on the cake was all the added features and functionality. Check it out here.

Posted in coding, reviews, ui | Tagged , , , , | Leave a comment

All the Free Lectures in the Past Year

Well being an advocate of Open Source I had not realized the number of free tutorials and lectures I have given until I gathered all the posters together. Here is what has happened from Feb 2014 to Feb 2015:

Posted in coding | Leave a comment

CodyHouse – A New JavaScript Framework?

JavaScriptures has followed the fast development of JavaScript frameworks with UI based frameworks like DHTMLx and Sencha with their nifty page oriented Visual Designers. There is also the responsive SPA-Single Page Applications JavaScript frameworks like Bootstrap, Foundation, and Ink . Well a new Web Design website CodyHouse has appeared with some striking similarities to the SPA Javascript frameworks – free, design oriented, HTML5, full CSS, JavaScript components. Here is a sampling of CodyHouse components.

cody2libraryThere are currently 36 of these components available – but a new 1-3 appear every month

And CodyHouse provides a demo of how each of their components work -doing one better than the other JavaScript frameworks :
cody1

There is a detailed explanation of the HTML, CSS, and JavaScript involved:
codydetailsClick on the above screenshot  to find one of the CodyHouse co-founders.

In addition the CodyHouse getting started page provides a HTML/CSS/JavaScript test harness for embedding CodyHouse components  for rigorous testing . Again a screenshot is worth a thousand words:
cody3start The getting started guide and test harness are  refreshingly  complete

CodyHouse components have a test harness that is quite general. And all that an adventuresome Web developer would have to do is add the various  CodyHouse components together, check the responsiveness of the code ensemble, create a small templating system – and you have another very good HTML5/CSS/JavaScript framework.

Summary

Coders who use Bootstrap, Foundation Zurb, and Ink should take a careful look at the CodyHouse’s UI components. Trust me, CodyHouse works well for SPA-Single page Apps as well as more complex multi-page designs with one proviso- be careful with the CSS.

Likewise WordPress sites [but not WordPress.com users] and Blogger users will find that CodyHouse components can bring design flare to their websites. There are several plugins and PHP code snippets in WordPress for importing CodyHouse components while Blogger allows iframe code/component embeds among other ways to add HTML/JavaScript/CSS components in.

So JavaScript coders plus Web designers and developers have with  CodyHouse  a great new source of both design ideas and viable UI components …Oh and maybe the makings of a new JavaScript framework.

Posted in coding | Leave a comment