BitNami for XAMPP

Apache Friend's XAMPP is one of the most popular Apache + MySQL + PHP installable web development packages, similar to BitNami's own WAMP, LAMP and MAMP
stacks. Our goal with BitNami is to make open source software easier to
install and manage across all platforms. We have partnered with Apache
Friends to port the BitNami library of applications to XAMPP, providing a
simple way to install your favorite applications, including Drupal,
Joomla!, WordPress and many more. You can download below all-in-one
installers for some of our most popular apps, for all the platforms
supported by XAMPP (Windows, Linux, Mac OS X). We keep working to add
the rest of the BitNami library to the list of apps supported by XAMPP.
To get started, download the module of your favorite application and follow the installation instructions.

WordPress

Version	Size	Platform
WordPress Module 3.7.1-0	23 MB	Windows		Recommended
WordPress Module 3.6.1-2	22 MB	Windows
WordPress Module 3.7.1-0	23 MB	Linux
WordPress Module 3.6.1-2	22 MB	Linux
WordPress Module 3.7.1-0	23 MB	Linux 64-bit
WordPress Module 3.6.1-2	23 MB	Linux 64-bit
WordPress Module 3.7.1-0	31 MB	OS X 64 bit
WordPress Module 3.6.1-2	30 MB	OS X 64 bit

Joomla!

Version	Size	Platform
Joomla! Module 3.2.0-0	17 MB	Windows		Recommended
Joomla! Module 2.5.16-0	17 MB	Windows
Joomla! Module 3.2.0-0	17 MB	Linux
Joomla! Module 2.5.16-0	16 MB	Linux
Joomla! Module 3.2.0-0	18 MB	Linux 64-bit
Joomla! Module 2.5.16-0	17 MB	Linux 64-bit
Joomla! Module 3.2.0-0	26 MB	OS X 64 bit
Joomla! Module 2.5.16-0	25 MB	OS X 64 bit

Drupal

Version	Size	Platform
Drupal Module 8.x-1	63 MB	Windows		Recommended
Drupal Module 7.23-2	19 MB	Windows
Drupal Module 6.28-3	15 MB	Windows
Drupal Module 8.x-1	61 MB	Linux
Drupal Module 7.23-2	17 MB	Linux
Drupal Module 6.28-3	14 MB	Linux
Drupal Module 8.x-1	62 MB	Linux 64-bit
Drupal Module 7.23-2	18 MB	Linux 64-bit
Drupal Module 6.28-3	14 MB	Linux 64-bit
Drupal Module 8.x-1	70 MB	OS X 64 bit
Drupal Module 7.23-2	26 MB	OS X 64 bit
Drupal Module 6.28-3	22 MB	OS X 64 bit

MediaWiki

Version	Size	Platform
MediaWiki Module 1.21.2-1	19 MB	Windows		Recommended
MediaWiki Module 1.21.2-1	19 MB	Linux
MediaWiki Module 1.21.2-1	19 MB	Linux 64-bit
MediaWiki Module 1.21.2-1	22 MB	OS X 64 bit

Moodle

Version	Size	Platform
Moodle Module 2.5.3-0	33 MB	Windows		Recommended
Moodle Module 2.5.3-0	33 MB	Linux
Moodle Module 2.5.3-0	33 MB	Linux 64-bit
Moodle Module 2.5.3-0	41 MB	OS X 64 bit

ownCloud

Version	Size	Platform
ownCloud Module 5.0.12-2	19 MB	Windows		Recommended
ownCloud Module 5.0.12-2	19 MB	Linux
ownCloud Module 5.0.12-2	19 MB	Linux 64-bit
ownCloud Module 5.0.12-2	21 MB	OS X 64 bit

SugarCRM

Version	Size	Platform
SugarCRM Module 6.5.16-0	20 MB	Windows		Recommended
SugarCRM Module 6.5.16-0	20 MB	Linux
SugarCRM Module 6.5.16-0	20 MB	Linux 64-bit
SugarCRM Module 6.5.16-0	28 MB	OS X 64 bit

Magento

Version	Size	Platform
Magento Module 1.8.0.0-1	24 MB	Windows		Recommended
Magento Module 1.8.0.0-1	24 MB	Linux
Magento Module 1.8.0.0-1	24 MB	Linux 64-bit
Magento Module 1.8.0.0-1	32 MB	OS X 64 bit

Zurmo

Version	Size	Platform
Zurmo Module 2.5.1-0	22 MB	Windows		Recommended
Zurmo Module 2.5.1-0	21 MB	Linux
Zurmo Module 2.5.1-0	22 MB	Linux 64-bit
Zurmo Module 2.5.1-0	23 MB	OS X 64 bit

DokuWiki

Version	Size	Platform
DokuWiki Module 20130510a-4	8 MB	Windows		Recommended
DokuWiki Module 20130510a-4	8 MB	Linux
DokuWiki Module 20130510a-4	9 MB	Linux 64-bit
DokuWiki Module 20130510a-4	11 MB	OS X 64 bit

Osclass

Version	Size	Platform
Osclass Module 3.2.2-0	10 MB	Windows		Recommended
Osclass Module 3.2.2-0	9 MB	Linux
Osclass Module 3.2.2-0	10 MB	Linux 64-bit
Osclass Module 3.2.2-0	12 MB	OS X 64 bit

phpBB

Version	Size	Platform
phpBB Module 3.0.12-1	7 MB	Windows		Recommended
phpBB Module 3.0.12-1	7 MB	Linux
phpBB Module 3.0.12-1	8 MB	Linux 64-bit
phpBB Module 3.0.12-1	10 MB	OS X 64 bit

If you are looking to host your PHP applications in the cloud, take a
look at BitNami Cloud Hosting, a solution designed specifically for
the needs of web developers.

3-D Text

Text

Beginner’s Guide to Wireframes and Tools to Create Them

Wireframing, or prototyping, while designing, costs almost nothing,
but can give back so much. While many designers start with a sketch in
their mind and then just put it into Photoshop or even code it right
away, some others start on paper. Yes, paper, that (most of the time)
white thing we write on with our hands. Sounds very 2000-ish, but even
today the best designers out there use this technique to their
advantage. Web prototyping saves lots of frustrations later on during
the project development phase, as it makes sure there are no things to
undo or redesign. If you prototype correctly, you can be sure about the
fact that redesigning will never be something you will have to think of.

What wireframing basically means is putting your design ideas on
paper – for each of the multiple pages of a website. All pages will
probably share some elements, therefore the first one will be a bit more
challenging to do, whereas the rest of them will be a bit less
difficult as you already have a basic idea over the general design
patterns.



Keep in mind that these common elements are a must for any design.
When switching between pages the user will have to immediately recognize
the fact that he is on the same site and not somewhere else. Always
keep the navigation and the important sections (content, sidebar,
footer) in the same place. But this tends to become a novice guide to
web design, so let’s move on.

General – the wireframe

In order to be able to use a wireframe, you need to know how it
actually works. What this does is simple – it illustrates the layout of a
website and its main components on paper. You can use different shapes,
such as boxes and ovals to draw content, navigation and other
functional elements. You might ask yourself why do we use shapes? The
answer is simple: because it allows us to focus more on the design and
forget about coding, cross-browser compatibility, images and so on. It’s
pure and basic design.

Image by Zach Hoeken.

Wireframing or Photoshop design?

The alternative to paper web prototyping is creating the visual
design in Photoshop first. While it has advantages to some extent,
creating the layout in Photoshop is not as effective because it does not
allow you to focus on the basic design elements. If you start designing
in Photoshop you will probably also start thinking about colors, images
and fonts. There is no need for this if done on paper. And the process
is way faster on paper as well, so why not go for it? You can obviously
start designing in Photoshop at a later stage, but I wouldn’t recommend
doing it before you have a clear idea of what you want to get out of the
project. The only way to achieve this is to start on paper.

You can call a wireframe a sketch if you want to. As a
matter of fact, a wireframe is a basic, simplified sketch of a website.
It communicates some ideas to the client which he can accept or not. If
he doesn’t, it is quite easy for you to take another sheet of paper and
draw other ideas from the top. The main reason behind a wireframe is to
let you focus on what is really important on a website: how each page
looks, where the most important elements go and how to achieve the
overall positive balance you need.

After you get the idea to the client and he accepts it, you are
welcome to evolve the basic sketch into something more detailed. Now it
is maybe time to start thinking of fonts, colors and images.

Image by Denkbeelhouwer.

The Prototyping Stage

It is crucially important for designers and clients to work together
during this stage of the project. While a client doesn’t have too much
to say during the coding phase, this is where he usually gives a lot of
input you should consider. Remember that once he accepted the design, he
will gladly give into your further ideas – at this point in time he
already believes in you and your skills. It will be a tough and long
project if you don’t get the acceptance on the basic wireframe from him.



If you are a client remember not to stress a lot about the lack of
colors, images, fonts and other styles. The job of a designer for now is
to give you a basic idea of what he thinks is good for you. If you ask
for more detailed wireframes from him and reject them three or four
times, it will cost you lots of money. On the other side, if you ask for
basic wireframes and reject them, it won’t cost you as much, because
they are easier to draw and think of.

Tools for web prototyping

Here is a list of some tools I recently tested in order to see how
much designers can trust them in building wireframes. If paper is not
good enough for you then, in any given order, here are the other
possible solutions:

1. iPlotz

This tool allows you to create wireframes which you can click on and
navigate through. This helps creating the experience of a real website.
While you can get a free account on iPlotz, I recommend one of the
premium ones if you are serious about starting with web prototypes from
now on.

2. Balsamiq

If you like drawing, then this tool will give you the feeling of it,
only now it is digital. The elements can be tweaked and rearranged
easily and the control over them is quite easy as well. The results are
clean and one of its advantage is that everything can be reiterated in
real-time.

3. Pencil Project

This tool can easily be used to make diagrams and GUI prototyping.

4. templatr

Although it will not allow you to draw anything, this tool lets you
create individual designs for your website on the go. You don’t need to
know any HTML and you can download the template in the end with a single
click.

5. Flair Builder

This is a tool capable of creating interactive wireframes very fast.
It is quite easy to use and comes with a palette of functional
components which will ease the process of creating prototypes. Flair
Builder is also interactive and will improve your experience a lot.

Image by Michael Lancaster.

Bottom line

Wireframes, or web prototyping, is a process known to many designers,
although just a handful of them use it. While it might seem that it
takes a lot of time, on long-term it will help you a lot. If you know
how to properly communicate and closely work with the client during
prototyping, the rest of the project will go smoother than expected. I
totally encourage you to prototype your designs before actually starting
to code or to create the whole visual design in Photoshop. It will make
the process easier for you and will spare you frustrations down the
road.


Until next time, let’s spark some discussion here for my 50^th article on 1WD. How often do you prototype your designs? How effective has it been for you? If you don’t do it, why is that?

20 Best jQuery Navigation Plugins

When it comes to web design, Navigation can be consider as one
of the major part of a website. Website navigation helps visitors to
interact with different pages of a website. A simple, clean and
minimalistic design always grabs the attention of visitors, navigation
plays a vital role in over all website design that’s why designers
should not ignore the importance of navigation for a website.

In this article, we have gathered 20 intuitive and out-of-the-box jQuery Navigation Plugins
which not only help you to plan and code your website navigation; but
furthermore go on to define a meaningful, unambiguous way to organize,
arrange, and display content to users.

1. SlimMenu

slimMenu is a lightweight jQuery plugin, which is made to create
responsive and multi-level navigation menus on the fly. With slimMenu,
you’ll no longer struggle with media queries to create responsive menus,
or any other heavy plugins to create multi-level nested menus. slimMenu
does both job for you and it’s only 5KB(2.5KB minified)! It converts an
unordered list with any depth into a menu with sub-menus and, for
smaller screens, the menu becomes a drill-down navigation. It is
touch-friendly and has several options for customization like the
animation or its speed.



Source

2. Smint

Smint is a jQuery plugin that can turn any given element into a sticky
menu instantly. Also, the plugin has support for smooth scrolling (which
is usually used in one-page websites). The plugin is almost plug ‘n’
play and the only customization provided is “scrolling speed”.



Source

3. Mmenu

jQuery.mmenu is a slick plugin that brings the same behavior into any
-mobile- web layout. It transforms unordered lists with unlimited
sub-lists into menu items and has multiple options for customization.
The options include the position of the menu (left/right), if a counter
for the menu items will be displayed or not and more. jQuery.mmenu can
also be controlled (opening, closing and toggling the menu) with simple
functions.



Source

4. FlexNav

FlexNav is another jQuery plugin for easily handling menus in responsive
layouts and it does that well for complex ones too. The plugin has
support for unlimited sub-menus that work similarly in both desktop and
mobile layouts. It has no-JS fallback, works with keyboard-tabs too (for
accessibility) and touch-friendly.



Source

5. Sidr

Sidr is a jQuery plugin for creating “hidden side menus” on-the-fly. It
can be set to be displayed at right or left, a single page can have
multiple side menus and offers multiple methods (existing or remote
content) for loading the content. For responsive layouts, a Sidr menu
can be attached to a button (that is displayed for specific screen sizes
with media -queries) and it’ll be a very handy navigation solution for
small screens.



Source

6. Kwicks

Kwicks, the sliding elements effect which became popular with the old
MooTools page, has a slick jQuery version named “Kwicks For jQuery“.It
has options for customization including the size, max-min width of the
panels, margin between them, duration and easing for the effect and the
behavior to be triggered for the effect. Also, Kwicks can work both
horizontally + vertically and it has an API for interacting with the
elements and the effect.



Source

7. ddSlick

ddSlick, a lightweight jQuery plugin, does that by mimicking the
behavior of list-menus with a better look and more information. It works
as a drop-down menu where we can use images and description besides a
simple text. The data source that populates the drop-down options is
JSON and there are multiple options for customizing the functionality.
The look & feel can be changed as well (very few styles used).



Source

8. jMenu

jMenu is a jQuery plugin that enables us to create horizontal
navigations with unlimited sub-menus. Besides jQuery, it also requires
jQuery UI and supports all the effects of this library (like fadeIn or
slideDown). The markup of the menu is pretty clean as it makes use of
nested lists. The look and feel of the output is set in a CSS file so
updating it without touching the JS code is possible.



Source

9. Navgoco

Navgoco is a simple JQuery plugin which turns a nested unordered list of
links into a beautiful vertical multi-level slide navigation, with
ability to preserve expanded submenus between sessions by using cookies
and optionally act as an accordion menu.



Source

10. Naver

Naver is a jQuery plugin for responsive navigation. It is an easy way to
turn any navigation system into a responsive-ready, mobile-friendly
toggle. The navigation states can be also be animated. It has been
tested in Firefox, Chrome, Safari, IE7+. It is released under the MIT
License. Feel free to use it in personal and commercial projects.



Source

11. Easy Drop Down

EasyDropDown is a jQuery plugin that effortlessly turns humble elements
into styleable drop-down menus for use in forms or general
UI/navigation. It’s like Chosen but with only the essential features:
clean, semantic markup, form & validation compatibilty, full
keyboard control with textual search, inner-scroll for long lists,
degradation to native UI on touch devices.



Source

12. Menu Aim

menu-aim is a jQuery plugin for dropdown menus that can differentiate
between a user trying hover over a dropdown item vs trying to navigate
into a submenu’s contents. This problem is normally solved using
timeouts and delays. menu-aim tries to solve this by detecting the
direction of the user’s mouse movement. This can make for quicker
transitions when navigating up and down the menu. The experience is
hopefully similar to amazon.com/’s “Shop by Department” dropdown.



Source

13. Horizontal Nav

HorizontalNav is a jQuery plugin that spans a horizontal navigation to
fit the full width of it’s container. If you’ve ever had to create this
effect on a project, you’ll know it’s pretty annoying to do. But this
plugin makes it easy, even on responsive designs.



Source

14. PageScroller

Page Scroller is a powerful JavaScript based smooth scrolling navigation
system that utilizes the robust jQuery library. Created entirely with
ease of use in mind, the plugin will work on any website. You can choose
the positions of the navigation menu, and you can also change the
scrolling speed easily. This smooth scroll plugin requires jQuery v1.3+.



Source

15. jQuery Magic Line Navigation

jQuery Magic Line Navigation allows us to have a highlight of some kind
(a background or an underline) follow you around as you mouse over the
different links in the navigation. This will happen with jQuery and its
animation abilities.



Source

16. TinyNav.js

TinyNav.js is a lightweight plugin (362 bytes) that converts ul and ol
menus into a select dropdown. It also automatically selects the current
page and adds selected=”selected” for that item.



Source

17. jQuery ListNav

jQuery ListNav Plugin supplies an easy way to unobtrusively add a
letter-based navigation widget to any UL or OL list. An easily stylable
(via CSS) nav bar appears above the list, showing the user the letters
A-through-Z.Clicking one of the letters filters the list to show only
the items in the list that start with that letter. Hovering over a
letter (optionally) shows a count above the letter, indicating how many
items will be displayed if that letter is clicked. Other options give
you control over the basic functionality. ListNav works great on long
lists. It supports multiple lists on the same page. And it has been
tested on IE6, IE7, Firefox 2 and 3 (Windows and Mac), Safari (Windows
and Mac).



Source

18. jBreadCrumb

jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a
more flexible & smarter way. As the length of a breadcrumb menu may
be very long & the common method used for this problem is limiting
the amount of menus used, jBreadCrumb follows another route. It creates a
collapsible interface that smartly decides the display method according
to the amount and length of the elements.



Source

19. Flaunt.js

Flaunt.js is a jQuery script that allows you to create a responsive,
nested navigation out the box. Flaunt was built to overcome responsive
design challenges which faced a huge percentage of websites. This
challenge was to show nested navigation items on click-demand, without
the event taking you through to the page you’ve pressed.



Source

20. Smart Menus

jQuery website menu plugin. Responsive and accessible list-based website menus that work on all devices.

Tags: best jquery navigation pluginsjquery navigationjquery navigation pluginsjquery plugins