Quick 'n Easy Web Builder 2.0

What is new in Quick ‘n Easy Web Builder 2.0?

After months of hard work, we have released the new version of Quick ‘n Easy Web Builder in January 2014. This document gives a brief idea of what you can expect in this major new release. Quick ‘n Easy Web Builder 2.0 has more than 100 new features/improvements. Thousands of new options and possibilities! Here’s a list of some of these new features.

General features

- Improved: For many objects we’ve moved the inline style attributes to the style sheet, resulting in cleaner HTML code.

- New feature: Added 'Recent colors' to color picker. For quick access to the 14 last used colors.

- New feature: Added zoom functionality to the workspace.

- New feature: Added the possibility to select all objects above, below, left or right of the selected object. This can be useful if you want to insert a new object between other objects.

- New feature: Added 'Check for updates online' in help menu.

- New feature: Added ‘Enable HTML beautifier’ to HTML options. Formats HTML so it looks better and is easier to read.

Unformatted HTML:

Formatted HTML:

- New feature: Added 'Optimize inline styles' to HTML options. This is option attempts to clean up the HTML code by moving inline styles to the page's style sheet.

Mac version

- The software is now built with cocoa instead carbon.

- Mac App Store version now is sandboxed (a requirement of Apple!).

Please read the sandbox notes in the manual.

Linux version

- Improved: Linux version now also supports shadows in shapes and box shadows in other objects (just like the Windows and Mac versions).

- Improved: The software is now compatible with Ubuntu unity menus.

Page features

- New feature: added 'direction' property to page.

- New feature: added stretch background option to page properties.

- New feature: You can now set the 'theme' for all jQuery components within the page.

See also: Theme Manager.

- New feature: Added 'Compatibility' selection to Internet Explorer specific Page Properties. This option enables IE to emulate previously versions of this browser: http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx#SetMode

Web Fonts (@font-face)

- New feature: Added the ability to manually configure @font-face web fonts. Supports EOT, WOFF TTF and SVG fonts.

- New feature: Added support for 'Google Fonts'. If this option is enabled then the software will assume that all non web safe fonts you are using are Google Web Fonts and it will automatically generate a link to the font in the HTML code, so you do not have to do that manually.

Merge Objects

- New feature: Added the ability to merge multiple objects into a single image! This can be useful for merging multiple (layered) shapes into a single image, so this will reduce the number of generated images and speed up loading of the website page. Although this was mainly for use with image and shapes, it works for other objects as well. You can use the ‘Split’ command to convert the merged objects back to the original objects again.

jQuery UI Theme Manager

- New Feature: Added jQuery UI Theme Manager to create themes for jQuery objects directly from within the application. And although the Theme Manager was designed to create themes for jQuery UI widgets, other objects do also support the themes!

Object Manager

- New feature: Added "Toggle Visibility' toolbar button in the Object Manager.

Asset Manager

- New feature: Added Asset Manager to manage the locations of images and other files. This can be useful when moving files to another computer or update the location of image (and other files). It can also be used to clean up orphan files from the project folder that are no longer used in the project.

Events

- New feature: Added 'Easing' options to ShowWithEffect/HideWithEffect event actions, more than 30 easing functions to control the animation process. This option can be used for example to create 'bounce' effects.

Error reports

- Improved: Error Reports now includes the name of the file in filename related errors.

- New feature: Error reports will display an error if the 'index' page has upper case characters ('Index' or 'INDEX' is invalid).

- New feature: Error reports will check for common errors in custom HTML code. For example: Scripts should not be placed at the start of the page or the use of HTML tags inside the body tag. It will also check for duplicated <html>, <head> and <body> tags in the Page HTML.

- New feature: Error reports will display an error if a form is using 'mailto:', because it's unreliable. Consider using the built-in form processor instead.

Extension Manager

- Improved: Added 'Display updates only' option to Extension Manager.

Flash Video Player

- New feature: Added HTML5 support to Flash Video Player. The player is compatible with most platforms (Flash for the desktop and HTML5 for mobile devices and modern browsers).

HTML 5 version of the player (HTML5 video and CSS3 styling):.

HTML5 audio/video

- New feature: Added shortcuts for HTML5 audio and video in the menu and toolbar.

Flash

- New feature: Added 'Alternative image' property. Allows you to specify an alternative image for platforms that do not support Flash.

Slide show

- New feature: Added 'Conveyer Belt' mode. This is an image slideshow which scrolls the images in a "conveyor belt" fashion.

Rollover text

- New Feature: RollOver Text, displays a text banner over image on mouse over. Includes cool slide and fade effects.

Rollover image

- Improved: If animation is set to 'None' then the object will use CSS instead of JavaScript.

- New feature: Added 'Easing' property with more than 30 easing functions to control the animation process.

- New feature: Added 'Zoom' animation.

- New feature: Added 'Scale' animation. Uses CSS3 to display a larger version of the image. Uses transformation, CSS3 box shadow, a nice image caption when possible (experimental).

Here’s screenshot of the small image and the larger scaled (full size) image on mouse over:

- New feature: Added 'Sliding door' animation. This make it looks like the image is splitted into half and one goes left and the other one goes right. Also support easing effects!

Photo Gallery

- New feature: Added box shadow (CSS3) option (blur, offset and color). This shadow will be applied to all images in the gallery.

- New feature: Added Polaroid frame style this uses CSS3 and has a few cool effects like rotated or variable sized polaroids. Yet another way to create amazing photo galleries.

Site Map

- New feature: Added 'Don't include this page in the site map' option in Site Map configuration window.

Master Frames

- New feature: Added border-radius and box-shadow options to Content Place Holder.

News Feed Ticker

- New feature: Now also supports Atom Syndication Format for RSS feeds.

Forms

- Improved: You can now leave the email address empty if you do not want to send an email with the PHP form processor.

- Improved: Forms events can now also be used in combination with validation.

- New feature: Added new option in form processor: 'Include IP address is form data'.

Editbox/TextArea

- New feature: Added 'Padding' option.

- New feature: Added 'Place Holder' option to TextArea

- New feature: Added 'Max Length' option to TextArea

Combobox

- New feature: Added datalist (HTML5) support to combobox. A datalist is a combination between a combobox and an editbox. The user can select data from a list or enter the value manually.

Text

- New feature: Added 'padding' option to the text object.

Images

- New feature: Added 'Remove all effects' to the effect menu to quickly remove all applied effects.

Shape, Polygon, Curve, Line

- New feature: Added new option 'Publish as <canvas>' uses HTML5's canvas tag instead of an image. Basically this generates an advanced set of JavaScript calls to draw the shape in the browser (using Web Builder’s new ‘wb.canvas.js’ jQuery plugin!). This unique new feature turns your shapes into native HTML5 canvas objects!

Shape

- New feature: Basic shapes (rectangle, ellipse, rounded corner) can now also be exported as CSS3! This will output a standard <div> with CSS3 styling (border and background color) instead of an image.

- New feature: Added 'text' option to shape!

Logo

- New feature: Banner can now be published as standard text with CSS3 markup instead of an image. Supports borders, (gradient) backgrounds, text shadow and text styling (output format property).

Horizontal line

- Improved: Line height is no longer limited to 100 pixels.

- New feature: Added ‘Use jQuery UI Theme’ option. This renders the object using the style of the current page theme.

Navigation bar

- Improved: If animation is set to 'None', the object will now use CSS instead of JavaScript.

- New feature: Added support for themes. The new 'Use jQuery UI Theme' option renders the object using the style of the current page theme. See Theme Manager for more details.

- New feature: Added padding property to set the padding for themed buttons (if 'Use jQuery UI Theme' is enabled).

Menubar

- New feature: Added 'Use jQuery UI Theme' option. Renders the object using the style of the current page theme. See Theme Manager for more details.

Slidemenu

- New feature: Added 'Use jQuery UI Theme' option.

Tab Menu

- New feature: Added 'Use jQuery UI Theme' option.

- New feature: Added 'border radius' option to create rounded corners for the tabs.

- New feature: Added 'spacing' option.

- New feature: Added 'padding' option.

Mega Menu

- New feature: Added 'Mega Menu' object. Yet another menu to enhance your website. The drop down can have rows, columns, just a simple menu or no sub menu at all!

And of course it also uses the Theme Manager for styling.

Site Search

- New Feature: Site Search is a JavaScript based search engine that make it easily to add site search functionality to your website without the need to setup a database on the server. The search index can be created based on meta tags or the page content. The Site Search object has many options to customize the appearance of the search results.

Carousel

New feature: The Carousel object (also known as horizontal sliding panels) displays images or any other objects by scrolling the content from right to left using a smooth sliding animation (with more than 30 easing effects!).

It’s a very effective method to increase the web site usability and engage the visitor. You probably have seen this effect on many popular websites, such as Apple or Blackberry.

Users can step to any specific panel on demand using the pagination icons or browse the carousel sequentially by using the back/next buttons. The Carousel also has built-in support for mobile devices. On the iPhone/iPad/Android visitors can use swipe gestures to switch between pages!

Login System/Page Password Protection

Quick 'n Easy Web Builder now has a built-in (PHP) login system. Create a login system without any programming. Protect a page simply by dragging the Protect Page object to the page.

The login system supports both MySQL and a plain text database. There are predefined forms for login, signup, admin, password recovery, with lots of customize options. You can even convert most Login objects to native forms so you have full control over the form elements and code!

- New feature: Added the ‘Admin’ object. Admin - Create, Edit or remove users online.

- New feature: Added ‘Change Password’ object. Allows the users to change their password.

- New feature: Added the 'Edit profile' object to allow users to update their account information.

- New feature: Added the ‘Login’ object. The Login object provides a standard form to login to the protected pages.

- New feature: Added the ‘Login Name’ object.
The 'Login Name' object can be used to display the name of the logged in user. You can also specify a different text in case the user is not logged in.

- New feature: Added ‘Logout’ object.

- New feature: Added the ‘Password Recovery’ object. Resend the password, in case the user forgot it.

- New feature: Added the ‘Protect Page’ object. Add this to a page you want to protect.

- New feature: Added the ‘Signup’ object. Allow users to sign-up for your protected pages.

- New feature: Added ‘Single Page Protect’ object. This object can be used to protect a single page, without the need to setup a database. It works independently from the other login tools.

- New feature: Added ‘User redirect’ object. This object allows you to redirect the users to a specific page based on their user name.

jQuery UI

Quick 'n Easy Web Builder now has built-in support for jQuery UI. jQuery UI objects are based on the jQuery UI widgets from http://jqueryui.com

New feature: jQuery Accordion. The jQuery Accordion object displays collapsible content panels for presenting information in a limited amount of space.

- New feature: jQuery Auto Complete. AutoComplete can replace a standard editbox. It enables users to quickly find and select from a pre-populated list of values as they type.

- New feature: jQuery Button. The jQuery Button enhances standard button (normal, submit, reset or anchor/link) to themable buttons with appropriate mouseover and active styles. The button can be used as a submit button on a form or as a stand-alone button for navigation.

- New feature: jQuery Dialog. A dialog is a floating window that contains a title bar and a content area. You can drag & drop objects to the dialog to make then part of the window. The jQuery Dialog is based on the Dialog Widget of the jQuery UI library: http://jquery.com/

- New feature: jQuery Date Picker. The jQuery DatePicker offers a sophisticated and featrure-rich UI component for inputting dates into a form. The object provides a graphical calendar that pops up if you click inside the form field.

- New feature: jQuery Progress bar.
The progress bar is designed to simply display the current % complete for a process. For example as part of a customized upload script or to display the status of an Online Survey.

- New feature: jQuery Slider. The slider widget represents a value that is selected by dragging the thumb along the background. It's a simple widget, comprised of two main elements: the slider handle (also called the thumb) and the slider background.

- New feature: jQuery Tabs. The tab control is a single content area with multiple panels. The user can click the tabs to switch between the panels.

- New feature: jQuery Menu. Themable (multi level) menu with mouse and keyboard interactions for navigation.

- New feature: jQuery Spinner: Enhance a text input for entering numeric values, with up/down buttons and arrow key handling.

- New feature: jQuery ToolTips: Customizable, themeable tooltips, replacing native tooltips. The tooltip supports text formatting and can be assigned to any WWB object.