Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 12 2014

13:50

26 Web Design Tutorials for Learning New CSS3 Properties

Advertise here with BSA


Over the past few years a number of prominent CSS3 tutorials have been published online. These are perfect for beginners who don’t have a lot of experience coding webpages. But developers who do have that experience may also find the more detailed articles quite insightful.

Take a look over this collection of posts related to newer CSS3 properties. There may be some you’re already familiar with, and others that you’ve never even heard about before. CSS3 provides developers with many different solutions used to solve individual problems. Also if you know any other great posts I’ve forgotten you can share with us in the post discussion area.

CSS3 Box Shadow Effects

various css3 box shadow effects tutorial

CSS Text Stroke

css css3 text stroke effect

Cubic-Bezier In CSS3 Transition

css3 transition cubic bezier tutorial

CSS3 :not Selector

css3 negation not selector guide

CSS3 Multiple Columns Layout

css3 multiple columns layout tutorial howto

CSS3 :First-Of-Type Structural Selector

css3 first type structural selector tutorial

CSS3 Linear Gradients

css3 linear gradients tutorial howto article

Transparencies and Gradients With CSS

css3 transparency gradient howto tutorial design

Using any font with CSS3

howto tutorial web fonts css3 article

CSS3 multiple background images

tutoral learn css3 multiple backgrounds howto

CSS background-size property

css background size property tutorial

The Skinny on CSS Attribute Selectors

basic guide tutorial using css attribute selector css3

CSS3 Reflection

tutorial howto code css3 reflection effect

Box Model Control with box-sizing

box sizing css3 tutorial howto model

Annotation Overlay Effect with CSS3

css annotation overlay effect css3 design

Understanding the CSS Clip Property

css clip property tutorial howto

Intro to CSS Pseudo-Classes

howto tutorial css3 pseudo classes article

List of CSS3 Pseudo-classes

list of css3 pseudo classes design website

2D and 3D Transform Techniques

css3 tutorial 2d 3d transition animation

CSS3 Transitions from Scratch

html css3 transitions and form effects

Smooth Fonts with CSS3

css3 alias font design typography howto

Background-clip with CSS3

css3 background clip tutorial howto article

Change Default Text Selection Color

howto update text select color design tutorial

Awesome Flat Buttons with CSS

css3 flat gradient button design howto coding

CSS3 Animations Using Keyframes

css3 keyframe animation design howto tutorial

Experimenting With CSS3 Keyframe Animations

experiment new css3 keyframes howto animate elements


Advertise here with BSA

February 06 2014

15:58

How To Code a Hidden Author Bio Display using jQuery

Advertise here with BSA


I was browsing through websites one day and came across one really interesting feature. Jennifer Perrin has a small blog on her website which uses a fixed top navbar. In the center you’ll find a profile avatar photo which displays her full author bio(triggered by hover). This is a really interesting feature and I’ve set out to replicate the idea using jQuery.

So in this tutorial I want to demonstrate how we can build a very simple HTML5 webpage recreating a full author bio display. The entire bio container is hidden until the user hovers over the avatar photo. Take a peek at my live demo to see what it should look like:

hidden author bio display hover tutorial screenshot

Page Setup

First I know the effect will be created using jQuery so I’ll be downloading a local copy for this project. It’s all pretty simple except for the hovering triggers based on event delegation. But we can get into that later in the article.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Hidden Author Bio Display Demo - DesignM.ag</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

I’ve also created a new stylesheet named styles.css. This has all my typical page resets along with a number of extra styles to position the bio and top navbar. To keep things simpler I didn’t use a whole lot of extra text or links within this toolbar. But for your own website it’s entirely possible to move things around as necessary.

  <header id="topbar">
    <div id="logo"><h1>MySite Logo</h1></div>
    
    <div id="avatar-icon">
      <img src="img/avatar.jpg" alt="Author avatar photo" class="authoravi">
      <div id="author-bio-box">
        <img src="img/avatar.jpg" alt="author big photo" class="bigavi">
        <h2>Jake Rocheleau</h2>
        <p>Jake is a writer and designer found all over the Internet. He specializes in UI design, frontend development, branding, and content strategy.</p>
      </div>
    </div>
  </header>

This is really the most important HTML on the webpage. Directly after the opening body tag I’ve setup a new header element as the base container. The logo and the avatar have their own separate divs positioned within this container. Whenever a user hovers on top of the #avatar-icon image, we display the internal #author-bio-box.

CSS Design

You should take a look over my basic styles and CSS resets if you’re unfamiliar with page structure. At the top I’m referencing an external web font named Montserrat Alternates. Beneath the top navigation bar I’ve setup a wrapper div which contains filler Lorem Ipsum text. You can see how the bio display works even when scrolling down through a webpage.

#avatar-icon {
  position: relative;
  width: 100px;
  margin: 0 auto;
  text-align: center;
  padding-top: 6px;
  cursor: pointer;
}

#avatar-icon .authoravi {
  width: 55px;
  height: 55px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/* header top bar */
#topbar {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  min-width: 750px;
  height: 70px;
  padding: 0 45px;
  z-index: 9999;
  background-color: #6e7cc9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6e7cc9), to(#6a74af));
  background-image: -webkit-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -moz-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -ms-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -o-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: linear-gradient(top, #6e7cc9, #6a74af);
  border-bottom: 1px solid #53597c;
}

To keep this avatar centered in position I’m using margin: 0 auto on the fixed-width container. We also need a relative positioning so the interior author box can use absolute positioning. #avatar-icon becomes the new container for this absolute position, as opposed to the entire body element.

Using a fixed position on the #topbar header is key for the navigation to follow along with the user. I’m using large padding on the HTML body so everything on the page gets pushed down beneath this fixed bar. Using the CSS property top: 0 will force this bar to stay fixed at the top of the page, while the other content appears below.

/** bio box **/
#author-bio-box {
  display: none;
  position: absolute;
  cursor: default;
  width: 300px;
  top: 0;
  left: -100px;
  padding: 5px 15px 8px 15px;
  background: rgba(20,20,20,0.9);
  z-index: 99999;
  -webkit-border-radius: 0 0 7px 7px;
  -moz-border-radius: 0 0 7px 7px;
  border-radius: 0 0 7px 7px;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
  -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
}

#author-bio-box .bigavi {
  width: 95px;
  height: 95px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#author-bio-box h2 {
  display: block;
  font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
  text-align: center;
  color: #fff;
  cursor: text;
  font-variant: small-caps;
  letter-spacing: -0.03em;
}
#author-bio-box p {
  display: block;
  font-size: 1.5em;
  line-height: 1.35em;
  color: #fff;
  cursor: text;
}

Finally we get to the hidden author box and other internal elements. The #topbar div uses a z-index of 9,999 so that it appears on top of all other page content. Since we need this author bio to appear on top of the bar I’m using 99,999 z-index to setup the correct layout.

Width is fixed at 300px but since this bio is offset in the center, it won’t appear correct. We can’t use absolute positioning because the content itself will appear outside the boundary box. It’s smarter to use a negative left margin to reposition the author bio exactly where it should appear. Note this value should also be changed as you update the bio box width, so keep this in mind when adjusting for your own project(s).

jQuery Display Effects

Possibly the most confusing piece of my jQuery code is event delegation with the .on() method. By using the body element as my selector it works like an updated event handler to also bind events onto hidden or dynamically-appended elements. Check out this Stack Overflow post to get a better understanding.

$(function(){
  $('body').on('mouseenter', '#avatar-icon', function(e){ 
    $('#author-bio-box').css('display','block');
  });

  $('body').on('mouseleave', '#author-bio-box', function(e){
    $(this).css('display','none');
  });
});

Also worth noting are the mousenter and mouseleave event triggers. mouse over/out will trigger if the user re-hovers something other than the target element. So if we open the author bio and the user hovers the new avatar image or the bio paragraph, it would see we are hovering something new and close the whole box. Mouseleave will only trigger when leaving the entire container – much safer and provides exactly the effect we need.

So once the user hovers onto #avatar-icon we immediately display the author bio box. And once the mouse leaves those boundaries this box gets re-hidden from view. Truly a simple yet powerful script if you know how to use it.

hidden author bio display hover tutorial screenshot

Final Thoughts

I can admit that this solution probably wouldn’t work best on all websites. But if you’re designing a small author-based blog why not try it out? It is a really interesting concept which is perfect for any fixed-width title bar. Feel free to download a copy of my source code and let us know what you think in the post discussion area.


Advertise here with BSA

January 07 2014

05:00

28 Beginner Tutorials for Modern API Web Development

Advertise here with BSA


Web development has grown far beyond the typical HTML/CSS/JS code structure. Modern web services like Facebook and Twitter are built with something called an Application Programming Interface. This allows developers to connect into 3rd party services and pull out data to be displayed on another website.

For this post I’ve collected a number of free online tutorials which delve into API development. These are perfect for anybody new to the scene who wants to learn a bit more about typical web services. Some will require an API key while others may simply return XML/JSON data on command. Either way these articles detail many popular development techniques in an easy-to-understand fashion.

Facebook’s Graph API Explorer

facebooks graph api explorer to grab insights data

Using the Pinterest API

pinterest api howto tutorial development

DeviantArt API Instant Search App

deviantart api instant search howto jquery ajax php tutorial

Google Places API

google places api tutorial jquery howto development

Login and Register using LinkedIn

linkedin oauth api login register howto tutorial

Guide to the HTML5 APIs

Using the Etsy API

using the etsy api development tutorial howto

A Look at the WordPress HTTP API

http api wordpress practical wp remote post tutorial

How To Create a Twitter Widget

creating a twitter widget howto tutorial api

Beginner’s Guide To jQuery-Based JSON API Clients

json based clients api development howto learning article

The Reddit API in Python

reddit api python howto tutorial open source

Objective-C JSON and the Flickr API

objectivec json flickr api tutorial howto

Vine’s Undocumented API

vine.co vine api social video sharing howto tutorial

Basic YouTube API Tutorial

pulling videos youtube api tutorial web development

Integrate the Mailchimp API in PHP

integrate mailchimp api development php tutorial

Google Maps API and Custom Overlays

google maps api custom overlays

Create a Twitter-Like “Load More” Widget

create twitter style load more widget tutorial

Creating an API-Centric Web Application

api centric web application tutorial howto

Build an Integrated Facebook App

design code howto tutorial integrated facebook application

Facebook Invite Friends API

facebook invite friends api howto coding tutorial

Dead-Simple Twitter Feed with jQuery

dead simple twitter feed using jquery tutorial

REST API Integration with iPhone App

rest api into iphone application objective-c tutorial

Coding a Dynamic IMDb Webapp

dynamic imdb webapp my movie api howto tutorial jquery

Simple Github API Webapp

coding jquery ajax howto tutorial github api

Game Audio with the Web Audio API

browser game audio web api htmnl5 howto tutorial

Access Dropbox Using PHP

access tutorial api php dropbox howto coding

Google Analytics API

access google api analytics howto tutorial coding

Simple PHP REST API

simple php rest api tutorial open source


Advertise here with BSA

December 27 2013

08:01

So You’ve Decided To Open-Source A Project At Work. What Now?


  

A while back, I wrote a post about starting an open-source project. The focus of that article was on starting an open-source project as an individual. I received a lot of positive feedback and also some questions about how the process changes when you’re open-sourcing a project at work.

A guide on getting started with an open-source project at work.
Open source projects are always a team effort, and they alwars require a dedicated commitment to the project. Image credit: open source way

Many companies are starting to investigate and participate in the open-source community, and yet few guides for doing so exist. This article focuses primarily on the process of open-sourcing a project at work, which brings with it other concerns and decisions.

Why Open Source?

Before delving into the how, it’s useful to step back and talk about the why. Why is it that so many companies have or are starting to establish an open-source presence? There are actually a number of reasons:

  • Technical brand
    Companies want to be known as a place where smart people work. One excellent way to show this is by releasing code that has been written at the company. Doing so creates mindshare in the community, familiarity with the company and its contributions, and fodder for future technical brand initiatives (such as giving talks at meetups and conferences).
  • Recruiting
    Time and again, you’ll see contributors joining companies that sponsor open-source projects. I saw this happen frequently while at Yahoo, where YUI contributors would sometimes end up as Yahoo employees after having contributed to the project on an ongoing basis. Similar hires have occurred in the Node.js community. The reason is pretty clear: If you work on an open-source project in your spare time, imagine how great it would be to turn that hobby into a job. Additionally, allowing job candidates to see some of the company’s code gives some good insight into what working at the company would be like.
  • Giving back
    A lot of companies benefit from open-source software, and contributing open-source software back into the world is a way of giving back. These days, it’s part of what it means to be involved in the technical community. When you receive, find a way to give back. A lot of companies are embracing this philosophy.

There are many more reasons why companies are choosing to open-source, but these are the primary drivers. Therefore, the process of open-sourcing a project must be aligned with these goals while protecting the company’s interests.

Getting Started

Suppose someone at your company wants to open-source something. This has never happened before and you’re not sure what to do. Do you just put it up on GitHub? Announce it in a press release or blog post? How do you know that the code is OK to open-source? There is a lot of planning to do, and it all starts (unfortunately) with the legal department.

Giving away company assets is as much a legal issue as anything else. The very first conversation should be with an appropriate member of your company’s legal team to discuss the ins and outs of open-sourcing. In larger companies, one or more intellectual property (IP) attorneys are likely on staff or on retainer; in smaller companies, this conversation might start with the general counsel. In either case, it’s important to lay out exactly what you want to do and to clarify that you’d like to formalize a repeatable process for open-sourcing projects.

The primary legal concerns tend to be around licensing, code ownership and trade secrets. These are all important to discuss openly. Because many companies have done this already, you should have a fair amount of evidence of how other companies have established their processes. The most important thing is to engage the legal department early in the process and to have a champion on the legal team who you can work with should any issues arise.

Choose A Default License

One of the first topics of discussion should be which open-source license the company will use as its standard. Leaving the team for each project to decide for itself which license to use is a bad idea, because a lack of awareness could quite possibly lead to two projects from the same company having incompatible licenses. Decide up front exactly which license to use, and use it for all open-source projects in your company.

I touched on the different types of licenses in my previous article (also, see “Understanding Copyright and Licenses”). In general, companies tend to standardize either the three-clause BSD license or the Apache license. Very rarely will a company standardize the MIT license, because the standard MIT license doesn’t contain a clause that prevents use of the company’s name in advertisements for software that makes use of the project. The Apache license has additional clauses related to patent protection, which some companies prefer.

The ultimate choice of a license typically comes down to legal considerations on the nature of the code being released. The philosophical implications of which license you choose are not important; using the same license for all projects in your company is important.

Outgoing Review

The next topic of discussion should be to define an outgoing review process. Just putting code out in the public without some sort of review is neither safe nor sane. In general, a request to open-source a project should be reviewed by the following:

  • Legal
    As mentioned, the legal department needs to be kept in the loop during this process. They will likely not review the code, but rather will want to understand what the code does and whether it could be considered a company secret.
  • Security
    Someone with a security mindset should actually look at the code to make sure it doesn’t reveal any security issues or contain code that should not be made public. This process could be manual or automated, depending on the complexity of the code.
  • Executive
    Someone on the executive team needs to approve the request, basically saying that they believe this code is safe to share and that they are aware that the code is being published.

Exactly how an outgoing review gets started tends to be company-specific. It could be done by submitting a request to a mailing list, filling out a form or just setting up a meeting. How it’s implemented isn’t as important as the fact that the review occurs and is done quickly. So, setting a deadline for a response is a good idea. Depending on the size of the company, this could range from a few days to a few weeks, but setting up the expectation ahead of time helps to alleviate any scheduling issues.

Accepting Contributions

One part of the process that is often forgotten is figuring out rules for accepting external contributions. Open-sourcing a project is basically a way of saying, “Hey, we’d love to have you fix our bugs!” Part of the point is to get people interested enough to want to contribute to the project. Establish a process so that you know how and from whom external contributions may be made.

Open-source projects
When building something, accepting external contributions can significantly benefit the project, but you need to establish a process for contributions first. Image credit: open source way.

The company should require a contributor license agreement (CLA) to be signed before accepting contributions from external developers. A CLA is a legal document that typically states a few things:

  • The contributor asserts that they are the original author of the code they are submitting.
  • The contributor grants the project the right to use and distribute the code they are submitting.
  • The contributor has the right to grant the previous two points.
  • Any code submitted by a contributor is not guaranteed to be accepted or used.

Take the Node.js CLA. It’s a pretty straightforward form that defines the expectations for contributors and asks for the contributor’s name and other information. These days, asking for someone’s GitHub user name as well is quite common (to help automate the process of checking CLAs for commits).

The CLA will be important should any legal action be taken against your company as a result of the code contained in the project. Because the company is the maintainer of the project, any legal action would likely be directed at the company itself, rather than any individual contributor.

CLAs are sometimes controversial, and some developers refuse to sign them. That’s an acceptable loss to protect yourself and your company from the legal risks of open-source projects. Those who are familiar with the open-source community and the reason behind CLAs will be more than happy to sign on and contribute to your project.

Maintaining The Project

An overlooked part of the open-source process is maintaining the project once it’s been published. Many developers (and some companies) view the step of open-sourcing a project as the end of the process — they’ve already spent considerable time creating software that they now want to share with the world. In truth, open-sourcing a project is the beginning of a journey. The act of sharing now makes it, effectively, communal software, and you can now expect the project to be discussed and to evolve as a whole.

open1
Once a new project is open-sourced, eventually you’ll start receiving suggestions, requests and pull-requests. Maintenance is a task that is often overlooked in open-source projects. Image credit.

Many companies that are new to the open-source community make the mistake of publishing their code and leaving it behind. Issues are left unresolved and unanswered, road maps are not shared, pull requests are ignored, and there is no way to get in contact with the people behind the project. As much as open-source projects can enhance your technical brand, leaving projects in this state can hurt it.

Once you’ve open-sourced a project, you must commit to maintain it. Even stable software will have bugs, and some of those bugs could be found by people outside of your company. If you have no intention of interacting with anyone outside of the company on this project, then you might want to consider simply distributing the compiled binary or library freely, and not actually open-sourcing the code.

While there are no established rules for maintaining a project, here are some guidelines I follow:

  1. The public repo is the source of truth.
    Once you’ve published your source code to a public repository (or repo), all development should happen in that repository. The public repo shouldn’t simply be a clone of an internal one. If the project is being actively developed, then that development should happen exclusively in the public repo in order to be as transparent as possible. Developing in private and then updating periodically prevents the use of pull requests and makes forking your project extremely difficult and frustrating.
  2. Plan in public.
    Use a public bug tracker to track all issues, so that others can see what’s being worked on and what’s already been reported. Post a road map somewhere public that shows plans for development. Be as transparent about the development process as possible. In short, open-source the way your project will grow and evolve.
  3. Dedicate company time.
    If you are the primary author of the project and you’ve open-sourced the code, then you (or a delegate) should set aside time to interact with external contributors. That means making timely responses to pull requests and issues, which in turn means setting aside time daily or weekly. This has now become part of your full-time job, not just a hobby.
  4. Open channels of communication.
    Give external contributors a way to interact directly with the maintainers. This could be through a forum, mailing list, IRC chat or another channel. Make sure that these systems are public; for example, an IRC chat should not be on your company’s chat server. Plenty of free communication services exist to make use of. The simplest and least disruptive method is to create a free mailing list using Google Groups or Yahoo Groups.
  5. Commit to document.
    Lack of documentation is a huge problem with open-source projects. From the start, commit to writing good documentation that explains not only how to use the project but also how to set up a development environment, run tests and work effectively with the code as a contributor. There is no better way to discourage people from using your software than to give them no way to get up and running on their own.
  6. Maintain regular outgoing communication.
    There should be a steady stream of outgoing communication about the project. At a minimum, post announcements about new releases and security issues that require immediate upgrading. Maintain changelogs that describe differences between versions, and follow a predictable and regular scheme in your versioning (such as by following semantic versioning). This will help both users and contributors understand the impact of filing issues and submitting pull requests.

An open-source project very quickly takes on a life of its own once released. If a community forms around the project, then it could take up more and more of your time. That’s why a commitment to maintain the project needs to be a part of the open-sourcing process. Letting a project languish without any attention sends a horrible message to those outside of your company and will discourage people from contributing.

Warning Signs

Most open-source projects, whether by individuals or companies, are started with the best of intentions. Typically, the goal is to share learning and code with the world. However, the Internet is littered with abandoned projects. If your project ends up like this, it could hurt your and your company’s reputation. Projects slowly decay over time and can usually be identified by one or more of the following characteristics:

  • “Not enough time”
    The more frequently this phrase appears in responses to pull requests and issues, the more likely the project is headed for the graveyard. This is one of the top reasons why projects die: The maintainer runs out of time to maintain it. As should be obvious from this article, maintaining a project requires a significant amount of work, which is frequently not sustainable in the long term.
  • Too few contributors
    If most contributions come from one person, then the project is likely either early in its life (on the upswing) or close to the end. You can easily tell which is the case by looking at the date of the first commit. Thriving projects tend to have a large number of commits from the maintainer and a small number of frequent commits from a few others. Another good way to measure this activity is in the number of merged pull requests in the last year.
  • Too many open issues and pull requests
    A surefire sign that a project is on its way out is issues and pull requests that are left open with no comment. More than a few issues that have been open for a year means that the project isn’t being cared for.
  • No way to contact the maintainer
    If you can’t find a reliable way to contact the maintainer, whether through email, a mailing list, Twitter, issues or pull requests, then there’s not much hope for the project. Maintainers aren’t maintaining if they aren’t communicating.

Keep an eye on these patterns in your own project. If you recognize the warning signs, then you’ll have to decide what to do with the project. Either someone else should become the maintainer or it’s time to end-of-life the project.

End-Of-Lifing Projects

At some point, you or your company might find that there is no longer interest in maintaining the project. This is a natural evolution of software — sometimes a project outlives its usefulness. When this happens, you need to appropriately end-of-life the project.

End-of-lifing typically starts with a public announcement that the project is no longer being actively maintained (along with a post in the project’s README file). The announcement should address the following:

  • Why is the project being end-of-lifed? Has it been superseded by something else? Is it no longer in use? Do you recommend different software written by someone else?
  • What will happen to outstanding issues? Will bugs still be fixed? Will all outstanding issues be closed without being fixed?
  • Is there an opportunity to transfer ownership? If someone really likes the project, is your company willing to transfer ownership to them or their organization?

Ultimately, you might decide to delete the repository completely. While being able to see all of a company’s projects, even those that have been end-of-lifed, is sometimes nice, that comes at a cost, and so removing repositories from time to time might be prudent. In doing so, be certain that you have effectively communicated that the project is going away, and give at least 30 days notice to allow others to fork the project if they are so inclined.

Conclusion

Open-sourcing projects at work is a great initiative for many reasons. When done correctly, an open-source presence will do a lot to promote your company and its employees. Active open-source involvement signals your company’s willingness to interact with the technical community and to contribute back, both signs of a strong technical brand.

On the other hand, a poor open-source presence is worse than no presence at all. It signals general laziness or apathy towards a community of developers, a community that might very well want to help your project succeed. Few things are as demoralizing as trying to work on an open-source project that has been abandoned. Don’t be that company.

(al)


© Nicholas C. Zakas for Smashing Magazine, 2013.

December 12 2013

13:00

Easy Display Switch with CSS and jQuery

Advertise here with BSA


This tutorial was originally put together by Soh Tanaka during the Spring of 2009. Unfortunately the original demo went offline along with his source codes. I checked out an older archive copy on the WayBack Machine and decided to re-built this tutorial from scratch.

I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. The user may find this helpful when browsing website articles, e-commerce products, and other similar galleries. The design itself is quite simple to create and there isn’t much required jQuery at all. Check out my live sample demo below.

content list thumbnail display switcher tutorial preview screenshot

Live DemoDownload Source Code

Getting Started

All the functionality we need can be written in plain jQuery without any external plugins. Download a copy of the jQuery library and include this into the document header. I’ve also created my own stylesheet for organizing the lists and the page layout.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Switch Display Options - DesignMag Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

The internal body structure contains an outer wrapper div with the ID #w to center everything. But the page itself doesn’t really “begin” until we get to the #content div. This specifically holds the main page content including our list view. All the content is built into an unordered list using the ID #listdisplay. The internal list items have a clearfix to keep the position of floated elements.

  <div id="w">
    <span class="options">Switch Options: 
      <a href="#" id="details-list" class="sorticon active" title="List View"><img src="images/details-list.png" alt="list"></a> 
      <a href="#" id="thumbnails-list" class="sorticon" title="Thumbnail View"><img src="images/thumbnails-list.png" alt="thumbnails"></a>
    </span>
    <!-- icons: http://findicons.com/pack/1689/splashy/ -->
    <div id="content">
      <ul id="listdisplay" class="clearfix">
        <li class="clearfix">
          <span class="listimg"><a href="http://dribbble.com/shots/1314496-80-s-Wrestlers-Hulk-Hogan" target="_blank"><img src="images/01-hulk-hogan.jpg"></a></span>
          <span class="innercontent">
            <h2>Hulk Hogan</h2>
            <p>In non gravida nulla, quis vehicula velit. Praesent ac felis vel tortor auctor tincidunt. In non luctus neque. In congue molestie pretium. Sed vitae cursus risus. Pellentesque feugiat tortor massa, ut aliquet justo fermentum vitae.</p>
          </span>
        </li><!-- row #1 -->

I’ve only copied over the beginning section of the page along with a single list item structure. There are 8 total items and they all include a single thumbnail, a title, and some brief content. The other unordered list includes two anchor links for sorting the content.

The first ID is #details-list which also has an active class attached to the anchor. This means we already have the details view open so the image will appear brighter using more opacity. #thumbnails-list is the alternative which users can switch over and change the view. These images are found in the Splashy pack along with many other fantastic icons.

Page Design with CSS

All the typical page resets can be found in my stylesheet along with an external webfont hosted through Google. The HTML page background uses a repeating image Cartographer from Subtle Patterns.

.options {
  display: block;
  text-align: right;
  font-size: 1.2em;
  line-height: 16px;
  font-weight: bold;
  color: #eee;
  margin-bottom: 8px;
}
.options .sorticon {
  position: relative;
  top: 3px;
}

.options .sorticon img {
  opacity: 0.6;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.options .sorticon img:hover {
  opacity: 1.0;
}
.options .sorticon.active img {
  opacity: 1.0;
}

Each of the image icons uses a CSS3 transition effect. When you hover or click onto a new icon, the opacity won’t change instantly. Instead it smoothly changes over in all CSS3-compliant browsers(which also support the opacity property). Each icon is positioned relative to the container so they can be aligned more evenly.

/* list styles */
#listdisplay { 
  display: block;
}

#listdisplay li {
  display: block;
  width: 100%;
  padding: 12px 8px;
  margin-bottom: 1px;
  border-bottom: 1px solid #aaa;
}
#listdisplay li a img {
  display: block;
  float: left;
  padding: 5px;
  border: 2px solid #bbb;
  background: #fff;
  margin-right: 20px;
}

#listdisplay li .innercontent h2 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 3.0em;
  line-height: 1.35em;
  margin-bottom: 4px;
  color: #73ed95;
  font-weight: bold;
}

#listdisplay.thumbview li {
  display: block;
  width: 360px;
  float: left;
  margin-right: 10px;
  margin-bottom: 7px;
  border: 0;
}
#listdisplay.thumbview li a img {
  display: block;
  float: none;
  margin: 0 auto;
  margin-bottom: 4px;
}
#listdisplay.thumbview li .innercontent {
  display: block;
  text-align: center;
}
#listdisplay.thumbview li .innercontent h2 {
  font-size: 2.2em;
}
#listdisplay.thumbview li .innercontent p {
  display: none;
}

Getting into the list properties you will notice there isn’t much to be confused about. #listdisplay is always being used to contain the list, regardless of the view style. Without any extra classes we see the typical detail view. Using jQuery I can setup a new class .thumbview which will then reformat the items to show the thumbnail + image centered, no descriptive text.

You should feel free to mess around with the formatting and design grid to suit your own layout. Once we append the thumbnail view each list item becomes fixed at a width of 360px. Coupled with the margins & padding it leaves room for 2 items per line. Depending on your thumbnail size this value might change or adapt better for your audience.

Transitioning jQuery Effects

Finally at the bottom of the document before any closing </body> tag we need to setup a block of JavaScript. Keep in mind this could be written into an external file and then included into the page header. It’s all about preference and how you need to setup your website.

$(function(){
  $('.options a').on('click', function(e){
    e.preventDefault();
    
    if($(this).hasClass('active')) {
      // do nothing if the clicked link is already active
      return;
    }
    
    $('.options a').removeClass('active');
    $(this).addClass('active');
    
    var clickid = $(this).attr('id');
    

    $('#listdisplay').fadeOut(240, function(){
      if(clickid == 'thumbnails-list') {
        $(this).addClass('thumbview');
      } else {
        $(this).removeClass('thumbview');
      }

      $('#listdisplay').fadeIn(200);  
    });
  });
});

This script requires a single event handler checking against each of the anchor links within the options list. First we call e.preventDefault() to stop the default click action, followed by a class check. If the icon link currently has a class of .active then we don’t want to do anything. Otherwise the script needs to switch between display views – first by removing the .active class from both links and then adding it onto the newly-clicked link.

Next I’m grabbing the current link ID so we know which content view should be displayed. I am hiding the entire list using fadeOut() and we run some logic within a callback method. If the ID is #thumbnails-list then we need to append that CSS class onto the UL element. Otherwise we need to remove that class.

Finally once the logic has completed we can re-display the list view onto the page using fadeIn(). There are probably ways to do this using other jQuery animated effects. But when just getting started this method simply works – it’s easy to follow, and it’s easy to customize.

content list thumbnail display switcher tutorial preview screenshot

Live DemoDownload Source Code

Closing

I do hope this more updated tutorial can provide a template for building your own transitional layouts. jQuery is a powerful tool with tons of options for manipulating a website’s frontend design. Please feel free to download a copy of my tutorial codes and see what else you can build following this UI format.


Advertise here with BSA

November 22 2013

03:00

32 Well-Designed eCommerce WordPress Themes

Advertise here with BSA


One of the amazing things about WordPress is its versatility. It is not just for blogging. It’s not just for portfolios. It’s not just for business/corporate websites. You can find a WordPress theme for almost any type of organization, from bands to restaurants to retail stores. In fact, eCommerce themes are one of the easiest themes to find, beside general purpose themes, and eCommerce layouts come in all shapes and sizes, with many being responsive themes as well.

But creative eCommerce WordPress themes aren’t always easy to find. Many seem to follow a certain format, very often with little visual stimulation…except for the collection below. In the following list, we have compiled some of our favorite well-designed eCommerce WordPress themes for your enjoyment and, perhaps, your benefit if one happens to be perfect for a project. Be sure to click on the Demo links since most of these themes come with more than one layout or extra skins. Have fun browsing!

1. StyleShop

Demo & Download

2. eStore

Demo & Download

3. Boutique

Demo & Download

4. Cance

Demo & Download

5. High Fashion

Demo & Download

6. Flatshop

Demo & Download

7. ClassicShop

Demo & Download

8. Responsive Prestashop

Demo & Download

9. Bistro Store

Demo & Download

10. Glamshop

Demo & Download

11. Moderns

Demo & Download

12. Beautyshop

Demo & Download

13. Autumn

Demo & Download

14. Trego

Demo & Download

15. R.Gen

Demo & Download

16. Shopper – Magento

Demo & Download

17. Alysum

Demo & Download

18. Warehouse

Demo & Download

19. Transformer

Demo & Download

20. Journal

Demo & Download

21. Nina Bobo

Demo & Download

22. Velvet Sky

Demo & Download

23. Legenda

Demo & Download

24. Agritourismo

Demo & Download

25. Agriculture

Demo & Download

26. 123Interior

Demo & Download

27. All Around

Demo & Download

28. Balita

Demo & Download

29. Merchant

29-ecommerce-wordpress-themes-merchant

Demo & Download

30. Clock Magazine

30-ecommerce-wordpress-themes-clock

Demo & Download

31. Handmade Two

31-ecommerce-wordpress-themes-handmade

Demo & Download

32. Sliding

32-ecommerce-wordpress-themes-sliding

Demo & Download


Advertise here with BSA

November 21 2013

13:59

Essential Features for Building a New WordPress 3.7 Theme

Advertise here with BSA


When you sit down to develop a modern-day WordPress theme you’ll typically be following some design mockup, or at least an idea in your head. This can be a challenge at times when you don’t want to think much about the customizations. But any good WordPress theme should be comprised of a number of key points.

usb wordpress logo theming featured image

In October 2013 the newest WordPress 3.7 release was announced with plenty of new features. Not many updates will directly impact themes, yet it is a marvel seeing how far this platform has advanced since version 3.0. In this article I want to go over some of the core fundamentals you should think about including with every new WordPress theme. Especially for premium or free themes designated for commercial use by hundreds of different webmasters.

Getting Started

If you are unfamiliar with the core fundamentals of WordPress theming please check out their online documentation for more details. The bare minimum requirements should be a single index.php file along with a style.css stylesheet. Your CSS should begin with a comment block indicating the theme name, version, and other key metadata.

But this is quite literally the absolute least effort you could put into theming. Once you can start building in the functions.php file you’ll end up with a whole lot more customization. You can specify new custom post types, taxonomies, pretty much anything technical should be organized into functions and called in your theme file(s), or within the content as a shortcode.

Some of this terminology is newer to WordPress development beyond 3.0. If you are not sure how to build shortcodes or CPTs don’t worry! Plenty of guides online provide an easy-to-copy template of code which you could save as your own snippet for future development. Just be sure to familiarize yourself with these newer features to at least understand how they behave, and how they look in the WP Admin backend.

Theme Headers & Backgrounds

When you click on the “Appearance” link within the admin panel you find a number of sub-links which appear based on the currently active theme. One link says Header and this is very typical with newer WordPress themes. This settings page allows users to change out their header text for an image, or just update the link/background colors.

This is also true with custom backgrounds on the page. You can read more about custom headers & backgrounds which changed a bit during version 3.4. Basically you’d need to code an area for dynamic updates in the header, based on what the user selects. Both of these background/header functions can take an array of settings which determine the default state.

wordpress header custom settings wpadmin screenshot

Backgrounds are slightly trickier but definitely not impossible. Custom Background Extended is a free plugin which capitalizes on this functionality. You can install the plugin and go through the source code to see how it works, or even check out some other related articles online. When targeting a wide audience both of these features can dramatically improve the quality of your theme.

Active Widget Areas

WordPress widgets are another very popular topic that have been around since the early days. However the process for developing widgets gradually advanced over newer versions to achieve what we have today. If you’re not familiar with the process of widgetizing a theme then definitely check out the online documentation or follow along with great tutorials online.

The benefit to widgetizing your theme is not in the ability to create your own widget(although this is pretty cool). By simply coding a widgetized sidebar you are allowing the user to swap out different pre-built widgets to see what looks best on the site. Plugins may also create new widgets giving the user even more options to switch around.

It’s noteworthy that a widgetized area can be placed anywhere in your theme. You could place some in your footer, just after the content, or even at the very top of your layout(think advertising). To get more technical, it helps if you name the widget areas specifically for their intended purpose. Also consider if they are left empty what content should appear, if anything at all.

Once you get comfortable programming widgetized areas into your theme, it might incentivize you to learn how to actually build custom widgets. These can include anything you like from database queries, API data, login forms, and so forth.

Custom WP Nav Menus

This step is probably the other crucial piece to any WordPress theme. Custom headers, widgetized areas, and WP menus are the 3 key points you should always consider. Anything else is definitely beneficial but certainly not required for a successful release.

You can read up more about navigation menus and the wp_nav_menu() function directly on the WordPress codex. The point is to first code a nav menu with a unique name. Then you can implement this menu into your layout with wp_nav_menu() calling the unique name as a parameter. If the menu isn’t setup then it’ll display the typical navigation by default.

Anybody who is somewhat familiar in WordPress should know how to create a custom menu. The user can arrange links and sub-links which become auto-formatted into HTML lists. Then the user selects which menu should be used and it’s all set! Now you would see this user-created list attached to a dynamic menu section already in the theme.

Additional Theme Settings

When you download a new copy of WordPress none of the internal themes have an extra settings menu. This has to be coded manually using the Settings API. It will usually display another link under “Appearance” with any text you choose – it is specific to your theme.

On this new settings page you can practically structure the layout any way you’d like. It can include sliders, input fields, many buttons and even multiple tabbed sections. Plugin developers often need to create their own settings pages for handling user preferences. But themes do not always require such settings – it is often found in more premium products.

monster theme open source wordpress custom settings api

But that doesn’t mean you should be discouraged from the idea! One free theme Monster does a very simple yet elegant job with this feature. Once activated you’ll find a new link “Theme Options” that displays a list of icons. The only option a user may customize is the monster icon which displays at the top of the page. A very simple and almost unnecessary settings panel – however it’s just one working example among a plethora of ideas that you could build into a WordPress theme.

Using Shortcodes

I brought up shortcodes earlier and I want to point out that many themes do not include these by default. Many plugins choose to utilize shortcodes because it is easier for embedding PHP-driven content into the page. Other reasons might include formatting text styles like columns, horizontal rules, link buttons, tables, HTML5 video players, and so forth.

WordPress also has a documented section about their Shortcode API you should look into. The development process might remind you of building a widget. Although these two ideas are very fundamentally different because shortcodes will be added directly into post/page content using brackets. So a new video widget might look like this: [wpvideo src="/media/movie.mp4" width="640" height="480"][/wpvideo]

You have the freedom to name your tags anything you like, so long as it hasn’t already been taken by another plugin or a core WordPress feature. If you are brand new to making themes don’t stress about getting into shortcodes right away. Build something that you can be proud of and make sure it works properly with no bugs. From there you should try updating the v1.0 release to add some extra functionality – and maybe a bit of that functionality includes shortcodes.

Closing

Many of these ideas are commonly understood by folks who are familiar with WordPress. Keep in mind that not everyone wishes to be a developer. So the more you can get people interacting with the admin section and not the source code, the better your theme will scale. But it’s also true that development is messy and sometimes you just need to hack into the code! No matter how you decide to start building themes, just keep practicing and be sure to gauge feedback whenever possible.


Advertise here with BSA

November 04 2013

15:28

Building a Single-Page Dynamic Website using AnimateScroll.js

Advertise here with BSA


Sliding parallax websites incorporate animation with page sections to build a very unique experience. Over the past few years I have found a large number of parallax designs wrapped into a single webpage. Notably this parallax interface may be hard-coded from scratch, but there are lots of free open source plugins to do the job quicker.

In this tutorial I want to demonstrate how we can use AnimateScroll to build a sliding single-page website layout. I’ve kept inner page content to a minimum so we can see exactly how the CSS structure works with the animations. Keep in mind this definitely isn’t a tough concept to implement. But you should have an understanding of page hierarchy and CSS positioning or it gets confusing fast. Check out my live demo example to see exactly what we are making.

jquery animate scroll library single page tutorial preview screenshot

Live DemoDownload Source Code

Getting Started

The first step is to download a local copy of jQuery and grab a copy of the AnimateScroll.js codes from Github. You will only need to copy over a single file animatescroll.js which should be placed alongside your jQuery script.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Dynamic Scrolling with AnimateScroll.js - DesignM.ag Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/animatescroll.js"></script>
</head>

The inner page structure is fitted to host a single fixed navigation bar at the top of the page. I have this wrapped inside an HTML5 <nav> using an internal unordered list. Considering the page is meant to display at 100% width I haven’t used any outer wrapper.

  <nav id="topnav" class="clearfix">
    <ul>
      <li><a href="body" id="homenavlink">Home</a></li>
      <li><a href="#about" id="aboutnavlink">About</a></li>
      <li><a href="#portfolio" id="portfolionavlink">Portfolio</a></li>
      <li><a href="#contact" id="contactnavlink">Contact</a></li>
    </ul>
  </nav><!-- @end #topnav -->
  
  <!-- BG http://architecture.desktopnexus.com/wallpaper/1581572/ -->
  <section id="pagetop" class="contentpg">
    <h2>First Section</h2>
      
  </section><!-- @end #pagetop -->
  
  <!-- BG http://nature.desktopnexus.com/wallpaper/1581411/ -->
  <section id="about" class="contentpg">
    <h2>About Someone</h2>
  </section><!-- @end #about -->
  
  <!-- BG http://architecture.desktopnexus.com/wallpaper/1582636/ -->
  <section id="portfolio" class="contentpg">
    <h2>Portfolio Work</h2>
  </section><!-- @end #portfolio -->
  
  <!-- BG http://abstract.desktopnexus.com/wallpaper/1583541/ -->
  <section id="contact" class="contentpg">
   <h2>Contact Some People</h2>
  </section><!-- @end #contact -->

Depending on how you want your content to appear it may be worthwhile to create a wrapper class. This wrapper can be placed inside each content section for centering the text, or keeping it at some fixed width value.

Each of my sections is covered with a fullscreen background image. Since there is very little content they are only maxed out to a certain height. But with natural CSS3 background images we can expect the design to scale for any monitor resolution. Let’s delve into the stylesheet and really see how this all comes together.

Page Designs

Inside my styles.css file is everything necessary for the layout to render properly along with the AnimateScroll.js plugin. First you’ll notice one small import statement to include a Google web font used for custom heading text. This is followed by a long list of CSS resets to update the default page document structure.

It gets interesting once we break into the core page design. #topnav is fixed to the top of the page at a height of 55px. The links behave as parallax sliders moving around to sections within the webpage itself. You can build this navigation anywhere in your layout – but keeping it at the top makes more sense in a fixed position.

/** page structure **/
#topnav {
  display: block;
  position: fixed;
  top: 0;
  height: 55px;
  width: 100%;
  background: #779ec0;
  border-bottom: 2px solid #628aad;
}
#topnav ul  { padding-left: 80px; }

#topnav ul li { 
  display: block;
  width: auto;
}

#topnav ul li a {
  display: block;
  float: left;
  line-height: 55px;
  margin-right: 10px;
  padding: 0 15px;
  font-weight: bold;
  font-size: 1.2em;
  color: #fff;
  text-decoration: none;
}
#topnav ul li a:hover {
  background: #62819d;
}

Each of the internal section elements has their own ID to designate unique background images. But they also use the class .contentpg for strict duplicated rules. Notably I’ve written some internal padding along with a maximum height of 550 pixels. Each content section may be longer or shorter depending on how much you need to write. Feel free to edit this value so that it works best on your project(s).

/** page sections **/
.contentpg {
  display: block;
  min-height: 550px;
  padding: 55px 80px;
}

#pagetop {
  background-image: url('../img/bg1.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale')";
}

#about {
  background-image: url('../img/bg2.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg2.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg2.jpg',sizingMethod='scale')";
}

#portfolio {
  background-image: url('../img/bg3.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg3.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg3.jpg',sizingMethod='scale')";
}

#contact {
  background-image: url('../img/bg4.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg4.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg4.jpg',sizingMethod='scale')";
}

The codes handling fitted background images are from the popular CSS-Tricks article covering perfect CSS-based fullscreen backgrounds. CSS3 is not supported in many older browsers and so this trick is great for modern websites. But if you are concerned about legacy support I would highly recommend using another jQuery plugin such as Backstretch.

Initialize AnimateScroll.js

With the page structure in place and the CSS designed nicely it is time to apply the animation. There are 3 options you can go over in the documentation but it’s all very straightforward. The easing option controls the animation style, padding gives extra space from the top of an element, and scrollSpeed adjusts how fast or slow the animation happens.

$(function(){
  $('#topnav ul li a').on('click', function(e){
    e.preventDefault();
    var scrolldiv = $(this).attr('href');
    
    $(scrolldiv).animatescroll({padding:50});
  });
});

This small block of code should be placed inside a script tag just before closing the document body. If you wish to write other scripts then it could be instead written into an external JS file. The selector is targeting any link within the top navigation section.

Once the user clicks on a link we can stop the href value from loading into the address bar with event.preventDefault(). However we do need this href value because it will designate which content section we are scrolling into. I saved this into a new variable scrolldiv which is then turned into a selector for the .animatescroll() method.

Notice the single option I am using is just related to padding. Since the top navbar is always fixed on the screen we need to relieve some extra room. This option works for all the lower content areas, but the very top home section needs additional CSS padding from the body. Now the navigation bar will never get in the way of any content on the page.

jquery animate scroll library single page tutorial preview screenshot

Live DemoDownload Source Code

Closing

I know this is a fairly basic demonstration but I made it this way to behave almost like a template. Anyone who is willing to build their own single-page website layout could use this tutorial as a starting point. There are also many alternative parallax plugins which you could try looking into. If you want to see how my example works feel free to download a copy of the project source code and play around to see what you can build.


Advertise here with BSA

August 19 2013

18:36

Strategies for a Quick Product Launch using WordPress

Advertise here with BSA


When building a new project you often need to decide how to handle the backend. Should you build something from scratch, or toy around with a CMS engine? I have preferred using WordPress for many online projects because it provides a repeatable strategy for quick launches with fewer issues.

wordpress tokyo macbook apple digital photo

In this guide I want to introduce how you can build quick products online powered by WordPress CMS. The open source PHP/MySQL engine started as a blogging platform which has grown to include custom post types and many other advanced features. It can fit into almost any type of website making it flexible and valuable to new projects.

WP Means Security

First and foremost I take my time with security. What use is creating a new website and publishing content if the entire project is vulnerable? Not just to spam comments or manipulation, but possibly even complete loss of your database. Thankfully WordPress is one of the most secure scripts out there.

As long as you keep up-to-date with the latest version of WP you will be alright. Plus there are many free open source plugins which counter against hacking attempts. For example the WP Limit Login Attempts will place a limit on each IP for the amount of times they can login. After so many failed attempts they will be locked out for a certain period of time. Brute force attacks are a problem among many WordPress sites, but with so many free plugins the issue can be handled efficiently. Plus it doesn’t require a whole bunch of extra time spent coding.

wordpress login wp-login dashboard screenshot

Building with Themes

Templating engines can range from confusing to mildly annoying, and there are some easier ones out there as well. I would say that WordPress is somewhere in the middle because you often run into deprecated functions which need to be reconfigured or reformatted. The online documentation is a good place to start learning about themes.

The whole backend system can be used for building themes, plugins, widgets, etc. But it will take a bit of time and practice to learn all the major PHP functions. Thankfully there are a number of free themes you can download to understand how other developers are doing it. The WordPress community is really what helps this CMS jump out & stand apart from the others.

You can Google search almost any topic about WP and probably find some results. Bloggers have been writing tips & strategies about managing WordPress sites for years. It has never been easier to get started running your own WordPress website or even a network of websites.

wordpress theming php code web development

Theming is also very easy once you understand the basics, and the other advanced stuff can be learned along the way. If you have the extra money consider grabbing a premium theme to really make your website stand apart from the crowd.

Content Generation

When structuring a new launch on WordPress you can basically plan out the entire process. First you will need a domain followed by a custom-coded theme or a pre-built one. Afterwards you need to start building content which is also easy once you have practiced a little bit. The backend interface looks exactly the same in all WordPress websites, so the sooner you get accustomed to these features the quicker you can push through tasks.

The post content admin page allows you to include extra stuff like featured images or meta boxes. You can actually take in custom metadata like external URLs, file downloads, source credits, practically anything you would need to display in a post or page. By customizing a plugin or editing your theme’s functions.php file you can mold WordPress around any content system you need.

visual quickstart book wordpress desk photo

This is why I like to emphasize “quick” product launches. The startup culture likes to focus on Minimum Viable Product(MVP) to get something online quickly and learn from the feedback. WordPress is an excellent system for testing out new ideas and then rapidly improving as you study user behavior. Good content will come from practice so don’t be afraid to really delve into WordPress and see what it has to offer.

The Backend System

Looking into the PHP backend you will notice there are a number of scattered functions which all relate to different pieces of the puzzle. Plugins and widgets are like smaller customized functions which allow you to extend the default configuration. It has lead to powerful solutions like bbPress for online forums and BuddyPress for social networking capabilities.

WordCamp meetup switzerland sign photo

If you like building products over WordPress then I would recommend getting familiar with the backend system. It does not take a lot of time but you will need a website to practice with. Following this guide you can setup a WP site, customize the settings, and start publishing content all within a day.

The process of locating a great theme and refining the layout will take a lot more time. But the sooner you get started, the sooner you can learn from various mistakes along the way. Plus if you are struggling with some concepts do not be afraid to ask for help! WordPress Stack Exchange is a community full of smart developers who are often willing to work with you solving a bug or error in your code.

Final Thoughts

Although WordPress is a fantastic resource for building websites, it certainly can’t provide everything. Sometimes it is a better idea to create something from scratch or code on top of a backend framework. If you are more interested in topics of Internet marketing, content publishing, or just being a webmaster, then WordPress is one of the best choices for getting adjusted and learning the ropes.


Advertise here with BSA

August 09 2013

15:52

MonstaFTP: FTP-Client as Cloud-App on Your Webspace


  

If there is a tiny little bit of space left on your webspace and you got that one sub-domain left to use, you should definitely take a look at MonstaFTP, a brand-new, free PHP script. MonstaFTP, released as Open Source under a GPL license, lets you access FTP server´s comfortably from right inside your browser. In combination with Chrome you can even upload whole folder structures via drag & drop. Generally, all modern browsers are supported.

April 22 2013

02:30

34 Free Open Source CSS Code Snippets for Developers

Advertise here with BSA


With a quick Google search you will find a ton of handy CSS2/CSS3 code snippets. But what about pre-built CSS web interfaces? There are some cool widgets and samples out there, but it can be difficult finding great high-quality releases. I think developers really treasure open source codes for the fact that it saves a lot of time putting together more complicated websites.

In this showcase gallery I have organized 34 outstanding and free CSS code snippets. All of these examples provide some type of website interface element such as forms, buttons, tables, switches, pagination, and other common items. Be sure to check out the gallery listing to get a better idea of what you may be able to use in your own website(s). All items are provided by CSSFlow which you can download for free and include on any number of projects.

Glossy Buttons

bright css3 glossy buttons

Facebook Login Form

css html website login form effects input

Dark Datepicker

dark website interface date picker ui

Pricing Table

css3 html5 pricing table buttons freebie

Social Buttons

css3 social media buttons designs

Notification Windows

css3 warning windows html5 open source

Dark and Light Dropdowns

select menu lists input form dark light ui

Newsletter Signup Form

newsletter signup subscribe box effect

Dark Pagination

dark pagination ui effects website

Settings Panel

mac osx settings input panel css3 open source

Multi-colored Buttons

shiny multi-colored buttons css3 html5

Notification Badges

small css3 icons badges notify ios navigation freebie

Flip-Down Clock

static css3 clock paper effects rolodex

Share Buttons

social media sharing buttons freebie open source

Modal Contact Form

bright modal contact form input effects css3

Notepaper Blockquote

css3 notepaper block quote effect

Toggle Switches

pure css3 user input toggle switches open source

Metal Progress Bar

metal progress bar ui html5 css3 freebie

OSX-Style Window

transparent mac osx window made using css3 html5

Search Dropdown

search input dropdown menu suggested open source

Mini Social App

mini twitter social app ui interface css3 freebie

Month Picker

css3 generated input freebie month selection

Animated Progress Bar

css3 animated progress bar interface ui

Inset Side Navigation

inset side navigation effects freebie open source

Login Form

cssflow freebie snippet login form css3 html5 download

Dark Navigation

horizontal dark navigation tabs menu links

Light Horizontal Nav

light horizontal navigation bar tabs links freebie open source

Dark Horizontal Nav

dark block buttons navigation links css3 html5

Animated Profile Popover

user profile features popover hover effects open source

3D Buttons

html css3 3-d buttons freebie download codes

Sliding Tags

sliding blog tags posts count number jquery css3

Accordion Menu

vertical html5 css3 accordion menu interface design

Tabbed Navigation

css3 tabbed navigation toolbar effects design

Mini Dropdown Menu

dark dropdown menu css3 mini effects ui


Advertise here with BSA

November 13 2011

10:00

Free Graphic Design Software Reviews And An Amazing Showcase

Needless to say, the dominance of proprietary graphics software can make this particular domain incredibly prohibitive for those who are just starting and need much more than just a trial period to learn their way around.

This is where free software takes the spotlight. While it aims to provide functions similar to those of its more expensive counterparts, it shouldn’t be regarded as a complete replacement. Though users constantly bicker about which is better, the answer couldn’t be more obvious: it all depends on what you use it for.

One thing that should be kept in mind is that these tools are generally developed by communities, so naturally it shouldn’t be expected of them to evolve in the same way as Adobe (for example). That doesn’t mean that it’s better or worse; it just means different. Of course, since the projects all started from different platforms and under different licenses, they can have a very alien look and interfaces can and most definitely will vary between programs. Since it’s not uncommon for those who work with graphics to use several tools, having workplaces set up in a similar manner is one of the reasons why a proprietary suite is more attractive.

GIMP

GIMP screenshot
Right off the bat, it should be mentioned that GIMP, short for GNU Image Manipulation Program, is small, fast and portable, but packs a wide array of tools. It is a raster graphics editor with functions similar to those of Photoshop, so it shares some of its versatility; it has also been endlessly compared to it. True, overall it does have fewer features than its counterpart, but that may or may not be a problem, depending on what you plan to use GIMP for. Perhaps for those who switch to this tool, the most frustrating thing is the fact that it is still very familiar, but everything behaves slightly differently.

Note that the developers never intended it to take over the market, but to offer a free alternative for those who, for whatever reason, can’t or won’t make a huge investment. That is to say, the industry still relies on the coherence brought by PSD files, allowing designers to collaborate. Just imagine if everyone used a different program or file type.

In a nutshell, it’s great for those who don’t need very advanced features or who just don’t need all the features offered by proprietary software (3D tool for photographers?).

PROS: lightweight, fast, has all of the basic tools and more
CONS: lacks advanced features, no native CMYK or LAB support (not intended for print), limited compatibility with PSD files

Inkscape

Inkscape screenshot
Moving on to vector graphics, we find Inkscape. The first, and possibly the most intriguing aspect is the fact that it doesn’t use a special file type. Instead, it saves directly as SVG, with the option to export as EPS (among others), meaning that you don’t need to worry about compatibility issues. Moreover, SVG is a standard developed by the W3C, making it a prime choice for web.

Although very neatly organized, the interface can seem very messy and chaotic, but after poking around for a little while, everything should be fine. The overall learning curve isn’t very different from Illustrator, as most of it stems from vector graphics, not the program that handles them.

It does have a few quirks, like having to perform an extra step to achieve something when it could be done automatically. Perhaps the most irksome is the inability to change the name of gradients, leaving you with a random number instead. On the topic of gradients, unfortunately Inkscape does not have gradient meshes, which Illustrator users might find crucial.

Still, it is a powerful tool that can create amazing results, provided you have the patience to work around some of its weak points.

PROS: uses SVG natively, clones, lightweight
CONS: interface could use a little more polishing, no gradient meshes, many filters aren’t so effective

MyPaint

MyPaint screenshot
Lastly, for the more artistically inclined, comes MyPaint which, as the name would suggest, is designed with digital painting in mind. It serves as a very light version of Corel Painter, great emphasis on “very lightweight”; the program takes up only 13 megabytes, 15 if you want all the translation files.

MyPaint does away with complex tools, busy interfaces and complicated features. This little gem has a limitless canvas, an incredibly minimalistic interface and greatly reduced number of tools. It doesn’t even have a selection or cropping tool, but it can manage layers and merge them. Corel Painter uses different engines to render the different types of brushes, so that the effect is as close to real life as possible, but MyPaint only uses one. The engine is also used to detect things like pressure and speed when using a graphic tablet.

As mentioned, there is great emphasis on brushes and the ability to customize them for whatever you may need. Overall, it is a very simplistic tool and user-friendly. True, it’s not nearly as powerful as its “competitor”, but that doesn’t mean it doesn’t have any use.

PROS: small, simplistic, user-friendly
CONS: perhaps too simplistic, not as powerful as other similar software

In closing, I hope to have sparked your interest in free software, graphics or otherwise. It really is a fascinating movement that is growing continuously as more and more people join the projects and contribute.

To answer your burning questions:

Are the programs good? Yes.

Can they replace proprietary software? Not yet, or at least not entirely.

Inspirational: 20 pieces of artwork made with free software

I now leave you with a selection of 20 portraits done with the above-mentioned tools, to see what they are actually capable of. Enjoy!

1. Nixie Pixel by TheShock (GIMP)

Nixie Pixel by TheShock

2. PP3 Portrait 2 by Scheherazade2c (GIMP)

PP3 - Portrait 2 by Scheherazade2c

3. Enya by LopezLorenzana (GIMP)

Enya by LopezLorenzana

4. PP2 Portrait 1 by Scheherazade2c (GIMP)

PP2 - Portrait 1 by Scheherazade2c

5. Castle by Toramarusama (GIMP)

Castle by Toramarusama

6. Masha by andreasbianco (GIMP)

Masha by andreasbianco

7. Self-portrait by KittyElektro (GIMP)

Self-portrait by KittyElektro

8. Will Turner by Angela-T (GIMP)

Will Turner by Angela-T

9. Princess Mermaid by darkimagimp (GIMP)

Princess Mermaid by darkimagimp

10. Keira Knightley by thubakabra (GIMP)

Keira Knightley by thubakabra

11. Ziyi Zhang by tkc-art (MyPaint)

Ziyi Zhang by tkc-art

12. Serverus Snape by artsymptom (MyPaint+GIMP)

Serverus Snape by artsymptom

13. Leliana Fire by firefly-wp (MyPaint+GIMP)

Leliana Fire by firefly-wp

14. Seven of Nine by scheherazade2c (MyPaint+GIMP)

Seven of Nine by scheherazade2c

15. Inkscape Girl by imppao (Inkscape)

Inkscape Girl by imppao

16. Quorra TRON by Cid-Moreira12 (Inkscape)

Quorra TRON by Cid-Moreira12

17. Busto de mulher by maddrum (Inkscape)

Busto de mulher by maddrum

18. Inkscape Portrait by firefly-wp (Inkscape)

Inkscape Portrait by firefly-wp

19. Megan Fox by maddrum (Inkscape)

Megan Fox by maddrum

20. Buffy: She’s like Madonna by happyline (Inkscape)

Buffy: She's like Madonna by happyline

July 28 2011

03:42

The Open Source Movement

Advertisement in The Open Source Movement
 in The Open Source Movement  in The Open Source Movement  in The Open Source Movement

The open source movement or philosophy is something that I am truly passionate about, and something that can have beneficial effects for all industries related to technology and its use. In this article, I’ll outline information about the philosophy, what it means for the web design industry, how you can benefit as a designer, and how you can contribute.

Open-Innovation in The Open Source Movement
It’s all about participation – picture by opensourceway

One of my favourite attributes of the world of open source is its relatively innocent and philosophical nature. Too often we can get wrapped up in the dollars and cents of our industry and lose the core passion that brought us to it in the first place. Open source philosophy and resources can be a sweet glimmer of idealism that works to support the overall community through the work and generosity of its members. Not only does the result improve the quality of the web we work with, but it also aids us in each of our commercial projects by lending efficiency, solutions, and ideas that may have been a struggle to work out independently beforehand.

What is the Open Source Movement?

From a high level perspective, open source is a license (or lack of license!) that allows end users to first obtain a product or creation for free, and second to modify it as they see fit without restriction. What this does is increase distribution and improves the product over time. Keep in mind that this is quite a general definition and that open source resources can be licensed in a variety of ways – this to be covered shortly.

Beyond being a simple license designation, there is a growing philosophical and subjective side to the open source movement centering around the concept that all information should be shared with all individuals, everyone freely given opportunities to use the information, and everyone free to contribute. From a high level view, this should theoretically create more benefits over time than a privatized and competitive industry inserting limited resources and seeking financial gain.

Brand-vs-Community in The Open Source Movement
Brand vs. Community – picture by opensourceway

A popular and well-known proponent of the open source philosophy is Ubuntu, the organization which releases free Linux operating system packages and develops a thriving community of software developers.

For example, imagine a PHP content management system that could go down two paths – the open source route, or the privatized route. Through the open source path, users are free to modify the code to perfectly match it to their projects, and submit any enhancements or improvements that they can offer back to the community to make the next release a better product. Under the privatized route, a team of developers would work on the project perpetually, fuelled by revenue made by selling licenses for distribution. This comes with restrictions on modifications and commercial use.

What’s The Catch?

It’s not all sunshine and smiles however, as there are benefits and detractors for each path. The benefits of open source production have been touched upon, as well as the downside of privatized competitive industry. Conversely, what are the downsides of open source and the upsides of privatization?

Registered-Trademarks in The Open Source Movement
In a World of Registered Trademarks – picture by opensourceway

The downside of open source is that it relies on a community to support it and propel it forward. With no community, the product will be dead in the water like a sailboat with no wind. Active participants are the key ingredient to positive open source progress, and without them, the entire system breaks down. The upside of privatization, along the same lines, is that it requires no community but rather pulls from a talent pool and job market to bring the top software developers under one roof, and guarantee their input through salaries paid from the sales profits. Regular releases, diligent support, and some level of quality are all guaranteed under this model.

Overall, open source has more potential for quality, but comes with no guarantees. Privatization comes with certain guarantees but has limited potential as development is not open to the entire world. The last piece of the puzzle is political – socialist idealists generally love the open source concept, while competitive capitalist proponents may be more inclined stand beside privatization and the benefits of competitive industry.

A full description of the philosophy and its practice can be found on www.opensource.org and in this Wikipedia article.

What Does It Mean For Our Community?

Whether you’ve heard of or understood the concept of open source before, you’ve most certainly interacted with it inside the web design community. Free web templates, most content management systems, and a ton of the content featured by online web design magazines and resource lists all fall under this category. There are a ton of resources out there dedicated to moving the web design industry forward by providing free products and services as well as total transparency into the process and the source code.

To give it some perspective, try adding the phrase “open source” when you’re looking for a piece of software or a web resource using Google. Whenever you see those words on a web site, you can be guaranteed that it’s 100% free with no strings attached, and hopefully has a supporting community that you can tap into for specific questions. This is something I especially value when looking for and using a CMS.

Open-Source-Success in The Open Source Movement
The Open Source Success – picture by opensourceway

Under the open source philosophy, the potential for the web design community is limitless. Working together to share knowledge, resources, and best practices will propel everyone forward. The best part is that following this line of thinking will not detract from our opportunities for web design revenue. Open source resources can usually be used within commercial projects, and there remains a huge amount of potential web clients available. Indeed, continued collaboration should simply enhance the skill and experience of each designer and create a better web from the inside out.

“These changes, among others, are ushering us toward a world where knowledge, power, and productive capability will be more dispersed than at any time in our history”
- Don Tapscott, Wikinomics

Know Your Licenses

Web content isn’t simply divided between open source and commercial – there are a wide variety of licenses that fall on a scale of requirements and restrictions of use. For example, the GNU GPL (General Public License) is a “copyleft” license with details concerning source code, permissions, modifications, and more.

A comprehensive list of common software licenses can be viewed here on the GNU web site.

GPL (General Public License)

The GNU General Public License is probably the most commonly found license in application within the web design industry. Under this license you are free to modify the resource to meet your needs and even redistribute it as long as you make the source files available when doing so. GPL resources can be used in commercial projects under the right to sell copies. Full details and explanations of the terms of the GPL can be found here.

Creative Commons Licenses

Many readers will have heard of the Creative Commons. This group currently has 6 types of licenses that are also commonly used. Each of these allows others to copy and/or modify work, but only if they give credit to the author in whatever form they request. These 6 license differ in other ways, however, such as some allowing commercial redistribution and some not, and some allowing modification and others requiring none. Read all of the details here.

MIT License

The MIT license originated from the Massachusetts Institute of Technology and is also known as the “X11 License”. This type of license allows users to modify, copy, merge, publish, and/or sell the resource provided that they include a copyright notice and the MIT license permission text. Lastly, the license stipulates that there is no warranty or guarantee included with any MIT licensed resources – essentially freeing the authors from any risk of liability through their use.

The Public Domain

Often resources are completely released into the “public domain”, which means that the copyright holder waives all rights to the work and in a sense lets it into the wild with no restrictions or licenses applied. If you find these resources, use them however you’d like.

And More…

There are literally hundreds of software and web resource licenses – and many of those have multiple versions. It’s important to understand the terms of a license agreement and to be careful when using licensed materials. Great resources to read full license text and learn more are Wikipedia, Creative Commons, GNU, and The Open Source Initiative.

When In Doubt…

Contact the author! Licenses need to be taken seriously and the terms followed diligently. If any communication is unclear, or if no license type is listed at all, open licensing can’t be assumed. The best course of action in any scenario of confusion is to contact the author of the work directly and ask for specific permissions of use. Simply taking a resource and using it, or even giving credit to the author directly in its application, may not be acceptable and could even lead to legal repercussions – not to mention affecting your credibility and brand.

In fact, approaching the author of a resource with a request for its use, even uses outside the stipulations of the license, can prove beneficial. Once an author (or copyright holder) produces a resource and licenses it they will always retain the write to waive restrictions or copyrights.

How Can I Benefit From It?

I’ve already mentioned the overall benefits of free and modifiable products and services, but I’ll list some specific examples here to get you started on the right path:

Free in The Open Source Movement

Popular Open Source Projects

Web Editors

Photoshop Alternatives

Office and Web Tools

More

As you can see, open source alternatives provide the means to do everything you would ever need to accomplish during a web design project – without shelling out thousands of dollars for software licenses! It is the beginning or independent designer’s best friend.

How Can I Contribute?

This article wouldn’t do the open source community justice if it didn’t include an urge for contribution. In this community of ours we need to give as well as take – it’s great that there are so many free resources out there, but when was the last time that you created and distributed one of your own? The entire philosophy and optimism for growth rests on this principle – please give back what you can, where you can, and when you can!

To-Suceed-You-must-Share in The Open Source Movement
The Fortune Cookie says… – picture by opensourceway

This doesn’t need to entail creating your own daunting software project, or slaving away on a free icon set. Instead, it can simply mean contributing suggestions for improvement to existing systems and communities, creating a simple plugin for a CMS, and the like. Diversity is also an important concept when contributing – take a look at what’s out there and think about what you can contribute that is both unique and useful. Be aware of these opportunities to help move our community forward and strive for an improved web.

For example, the lead developer at Fluid Media runs and maintains a GitHub social coding account to provide source code for projects as well as to contribute bug fixes found in any systems that we use.

  1. Identify a Need

    This can occur in one of two ways. First, you can observe what open source resources are currently available to the web design community and identify an area where there are few or no resources. Second, you may already have resources or even code snippets that have been used or are currently being used as part of commercial web design projects. Did you figure out the most efficient sticky footer yet? Share it!

  2. Package and Prepare

    If you’ve spotted a need or a gap in the existing resources – or something you’ve already created that could aid others in the community, put together the source files and published files, provide a bit of documentation, and presto – you’re ready for release. If you’re selecting a specific licensing path, be sure to stipulate it as clearly as possible to avoid any violations, as well as linking to the full license text and details.

  3. Publish

    There are hundreds of ways to provide the community with your open source work ranging from GitHub for code snippets to DeviantArt for icon sets and graphics. Many authors also host tips, tricks, code, graphics, or project source files on their own web sites. It’s always great to see web designers helping web designers.

Conclusion

The open source philosophy is something that I truly believe in, and open source resources are products and technology that I use often in my projects as I’m sure we all do. The talent is out there, as well as the various avenues to provide solutions – it’s up to us to keep the ball rolling and share our discoveries with the overall community to improve the web as a whole.

(sp)(rb)

August 05 2010

10:00

50 Must Have Open Source Application for Mac

Although there is the huge amount of free softwares available online but open-source softwares have numerous advantages, apart from their price (i.e. free), they provide you the right to modify and redistribute the software with modifications. The right to modify is important, it enables you to change the software the way you like, also there are plenty of softwares developed but never updated, in this case if you have the right to modify then they can be very handy for needy people as anybody can update it. So looking at their importance, in this article we will feature 50 essential “open-source” applications for your Mac; those which will help in performing your daily life task easily.

1. Firefox

Each and every computer user knows about Firefox which is the most used open source web browser having huge amount of extensions and add-ons, there is no need of detailed description for Firefox.

firefox-for-mac

2. Camino.

Camino is another open-source web browser which ensures to provide the best possible browsing experience for Mac OS.

main-back1

3. OmniWeb

OmniWeb is an other open source browser for Mac OS providing very powerful interface to enhance your browsing experience in as many ways as possible like built-in web shortcuts and unique drag-and-drop tabbed windows.

Omniweb

4. Thunderbird

Thunderbird glorifies your emailing experience with high level of security and privacy.

thunderbird

5. OpenProj

OpenProj is an open source project management solution which can be used in replacement of Microsoft Project.

OpenProj

6. Adium

Adium is specially developed for people who love instant messaging. It supports all major chatting platform including AIM, MSN, Yahoo and Gmail.

adium

7. NeoOffice

NeoOffice is a complete set of office applications mainly including word processing, presentation, drawing and spreadsheet for Mac OS X. It can import, edit and exchange files with other office programs like MS Office.

neooffice

8. OpenOffice

OpenOffice is an open source office software for Mac OS X offering word processing, spreadsheets, presentations, graphics, databases and much more.

openoffice

9. Disk Inventory X

Disk Inventory X is a disk usage ability which shows the sizes of files and folders in a graphical way.

disk inventory x

10 jEdit

jEdit is an open source and extensively used text editor for programmers for Mac OS X, which is written in Java.

jedit

11. Celestia

Celestia provides you a great experience of exploring the universe in three dimensions.

celestia

12. Stellarium

Stellarium is a free planetarium which shows realistic sky in 3D, exactly same what you see with your eye or any telescope.

stellarium

13. Jomic

Jomic is an open source application distributed under GPL, which is a strong comic book viewer, stored in PDF, CBZ or CBR. It support various image format like JGP and PNG, it also features two page mode for better reading experience.

jomic

14. Stepmania

Stepmania is a rhythm game and dance revolution clone which can be connected to external dance pads.

15. Cocoalicious

Cocoalicious is an excellent open source del.icio.us client for Mac OS X, by using which you can manage your del.icio.us bookmarks from desktop.

cocoalicious

16. Plex Media Center

This application reduces the gap between you Home Theater and Mac using a very awesome user interface which links you to your media files. By using Plex you can play diverse audio and video media formats and you can also stream online media.

plex

17. Seashore

Seashore is an open source image editor of Mac OS which features gradients, textures and anti-aliasing for text as well as brushes. It also supports multiple layering and alpha channeling.

seashore

18. SMARTReporter

SMARTReporter reports about any hard disk failure before it actually happens. It will use Self-Monitoring Analysis and Reporting Technology to do so; one warning will be enough for you to think about backing up data right then.

smarrtreporter

19. RSSOwl

RSSOwl is an easy to use and extremely flexible RSS, RDF and Atom news feed reader for Mac OS X.

rssowl

20. Pixen

Pixen is an advance graphic editor specially designed to facilitate pixel-artists.

pixen

21. FreeWRL/FreeX3D

FreeWRL is an open source VRML/X3D browser which fulfils your OS X 3D graphics needs.

wrl

22. Scaletron!

Scaletron is an electronic scaling calculator specially designed for graphic and web designers to calculate enlargements and reductions of artwork.

scaletron

23. ffmpegX

ffmpegX is an open source and powerful Video Transcoder for Mac OS X, which supports huge number of formats for encoding like DVD, SVCD, VOB and more.

ffmpeg

24. OpenSong

OpenSong is an open source application developed to manage lyrics, chords, lead sheets, computer projection of your music.

oensong

25. iStumbler

You can use iStumbler on your Mac to discover WiFi routers, Bluetooth devices, Airport networks and more.

istumbler

26. BibDesk

BibDesk is an open source bibliography manager for Mac, which will keep track of your bibliographic information and the associated files or web links.

bibdesk

27. GnuCash

GnuCash is easy to use and free financial accounting software for your personal or small-business use. It includes all major features which any accounting software should have.

gnucash

28. SimplyBurns

SimplyBurns is an open source and simple CD / DVD burner for Mac OS X.

SimplyBurns-rev390_-_data_project

29. Juice

Juice is developed for a person who wants to listen online audio programs but cannot, due to, whatever may the reason be. Juice allows you to capture and listen to missed podcasts anytime in future.

juice

30.HandBrake

HandBrake is a multi platform and multi threaded video transcoder specially designed of Mac OS X providing excellent output quality.

handbrake

31. Inkscape

Inkscape is an awesome replacement of Adobe Illustrator which is a vector graphic editor. Features include shapes, paths, text, markers, clones and other important features.

inkscape

32. Cyberduck

Want to browse FTP, SFTP, WebDAV, Cloud Files, Google Docs and Amazon S3? Try Cyberduck which is a splendid open source tool for browsing.

cyberduck

33. Gallery

Gallery is a web-based photo album organizer, helping you to blend photo management smoothly into your own online projects. It is very easy to install and use, it includes resizing, rotating, automatic thumbnails and more.

gallery

34. Komodoedit

Komodo Edit is an open source language editor that will help you in writing codes easily. It is a multi-language editor supporting Perl, Python, Tcl, PHP, Ruby and JavaScript. It writes codes faster because of its auto-complete feature, it also provides support for adding third-party libraries.

35. JUnit

JUnit is an extremely useful framework for writing and running automated Java testing.

junit

36. Jext

Jext is an awesome open source code editor written in JAVA. Apart from JAVA, it can edit many other types of source codes for example, source code of XHTML, JSP, PHP, Python Ruby etc.

jext

37. Scintilla

Editing and debugging source codes are basic and fundamental need of any developer, “Scintilla” can help them in doing so. It is a free source code editing application which includes important features like error indicators, syntax styling, code completion and call tips.

scintilla

38. FullSync

FullSync is n extremely expandable and customizable file synchronization and backup tool, especially made for developers but its basic functionality is very simple which can be used by everyone.

fullsync

39. Angry IP Scanner

Scanning IP is very crucial for network administrators and other enterprises like banks and government agencies. For this purpose Angry IP Scanner is best choice as it is open-source and cross-platform network scanner specially deigned to scan IP addresses and ports in a very simple and fast way.

angryip

40. MUTE

mute Mute is a peer-to-peer file sharing network that enables us to search and download easily with privacy. It is a fast and native application with no java or python.

41. Apcupsd UPS control software

Apcupsd is software for monitoring power management and controlling most of the APC UPSes. During an event of power failure, this program will inform the user about power failure; hence giving a warning to save important data before system gets shutdown.

apcupsd

42. TV-Browser

TV-Browser is a digital and java-based TV guide which collects daily TV programs from internet and arranges them in a form of a TV guide. It supports a huge amount of skins and plugins, making customization comfortable. Its only purpose is no make TV guides; you cannot watch TV using TV-Browser.

tv-browser

43. MacLibre

MacLibre provides an excellent collection of free software for Mac OS X from categories of Internet, multimedia, Office and other utilities.

44. Moodle

Moodle is an education course management system which can be used by educators to make informative online learning websites.

45. Synergy

Synergy enables you to share a single mouse or keyboard between multiple computers having different operating systems, without any special hardware.

synergy

46. Blender

Blender is very handy 3D content creation suite, having all major features required in this kind of software including very sleek interface, awesome animation, UV unwrapping, real-time 3D game creation, Imaging and composing, shading, rendering and modeling.

47. Skim

Skim is a powerful PDF reader and note-taker for OS X, which can be used as an alternative of Adobe Acrobat Reader.

skim

48. AppleJack

AppleJack is an effective troubleshooting assistant for Mac OS X which runs in single user mode and it is very user-friendly and easy to use. With this you can troubleshoot your computer even without GUI.

49. PostgreSQL

PostgreSQL is a Linux New Media Award winning and powerful object-relational database system.

postgresql

50. MAMP

MAMP is an easy to use program which is used to start and stop the servers. It is a powerful completion of Apache, PHP and MySQL for Mac OS X, it is very easy to remove as it do not modify any part of normal Mac OS X.

51. NetBeans

NetBeans is a free and open source program which provides, software developers, an integrated development environment. You will get every needed tool to create website, applications, professional desktop, it also supports C/C++, PHP, JavaScript, Groovy, and Ruby.

52. WineHQ

Windows OS has much bigger library of applications than Mac OS, so if you want to run any Windows applications on your Mac OS X then WineHQ can help you in doing so with ease and flexibility.

In the end we would like to hear your recommendations and suggestions about open-source applications. :)

March 24 2010

10:00

A Beginners Guide to PrestaShop – The Open Source e-Commerce CMS

A Beginners Guide to PrestaShop – The Open-Source e-Commerce CMSYou always wanted to create your own online store but didn’t had the knowledge how to start or what shopping-cart solution to use?

No Problem! In this article I will introduce you the key-features of PrestaShop, one of the most used open-source e-Commerce shopping-cart solutions out there, which is free to use and with a big community.

Cheap SSL CertificatesE-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Check their site to get the cheap SSL certificates.

What Exactly is PrestaShop?

PrestaShop Logo

PrestaShop is a professional e-Commerce shopping cart content management system, which you can download and use for free.

Currently it has more than 50.000 community members and more than 33.000 online stores are using it as their shopping-cart solution.

Most people use it because of its scalability and modular structure and very light-weight and fast installation. If you already have PHP knowledge, you will be able to create your own themes in no-time!

If you can’t wait, you can give it a try right know. They are hosting a front-office access and also a backoffice access on their own servers. Click here to get to the demonstration page.

The Key-Features of PrestaShop

Features

PrestaShop has a lot of great features. Not only for the front-end but also for the back-office.

I will list you only a few of them to give you a small insight, why so many people are using it as their favorite shopping-cart solution.

Front-Office Features:

  • Featured products (Top sellers, New items,..) on the homepage
  • Build-in product-image zoom
  • Customer subscription and user accounts
  • Unlimited payment methods
  • Google Checkout module ready to be activated
  • RSS feeds

Back-Office Features:

  • Full-featured WYSIWYG text editor
  • Unlimited categories and subcategories
  • Different currency settings and tax settings
  • SMS/Text-message module
  • Customizable delivery status notification
  • Friendly URLs and Permalinks
  • SSL encryption
  • Smarty Templating-engine

This is just a small selection of the features. You can take a look at their complete feature-list here.

Sites Using PrestaShop

I prepared a list with some different looking online shops, which are using PrestaShop. You will see how much possibilities and freedom you have, while creating your own themes.

1. La Biohème

La Biohème

2. Contentin Café

Contentin Café

3. Chic Art

Chic Art

4. Kapsys

Kapsys

5. I got Style

I got Style

6. Nocturno 9

Nocturno 9

7. Diver Inside

Diver Inside

8. Camisetas Geek

Camisetas Geek

9. Onze Mètres Carrés

Onze Mètres Carrés

10. Design and Furniture

Design and Furniture

As you see, every PrestaShop theme can look different and can be designed as you wish. If you want to see more sites and get even more inspiration, just click here to take a look at their showcase here.

Behind the Scenes: Requirements and Installation

System Requirements

If you got inspired and want to try PrestaShop right now – go ahead and download it!

The current stable version is v.1.2.5. They also released a beta version a few days ago (v.1.3 beta 1) but it is recommended only for testing.

System Requirements:

But before you start downloading, make sure your server meets following system requirements so you don’t step into troubles during the installation.

  • Linux, Unix or Windows OS
  • at least Apache 1.3 or IIS 6
  • PHP 5.0* or later
  • MySQL 5** or later

* Some PHP 5 versions are bugged and prevent PrestaShop from working correctly. You can take a look at the supported versions at their full list of system requirements here.

** PrestaShop works also from MySQL versions 4.1.14 to 5.0, but some features are not working correctly or have strange behaviors.

Installation Process:

Auto-Installer

Now you know what system requirements you need. You can go ahead and start with the installation of PrestaShop.

After you have managed to upload the installation package to your desired directory on the sever, you can go ahead and start with the installation itself.

Step 1:

The first thing you have to do is to access the directory where you have uploaded the PrestaShop installation package.

In case you uploaded it to the root folder of your server (e.g.: http://yourdomain.com), go ahead and type in this address into your browser.

If you have done everything correctly, you will see the automatic installer of PrestaShop which will guide you through the installation. On the first step you can choose your default language which you want to use in your online shop.

Step 2:

On the next page (picture above), the application will perform a system check. If everything is alright, green check-marks will appear and you can continue the installation.

If you run into a problem and need help, don’t hesitate and go to their wiki or the forum to request help. I’m sure one of the 50.000+ members will be able to resolve you problem! :)

Step 3:

Auto-Installer

On step 3 of the installation you have to enter your MySQL connection details for the database you have to create.

If you are new to PrestaShop, choose the “Full mode” for your installation. This will install all basic modules, sample products and the default theme so you can take a look how everything works.

Step 4:

The installation is now almost complete. All you have to do now, is to enter your login information for the back-office. Optionally you can also upload a logo image for your shop.

Once you have done that, go ahead and click “Next”.

Step 5:

Your PrestaShop is now installed and ready to get used!

On the last page you will see all your details you entered again. Also you will get the links to your front-office and the back-office (you should bookmark them – just in case..).

Also don’t forget do delete the “install” folder from you server and rename the “admin” folder, so everything is secure!

Congratulations! You should now be able to see the default theme of PrestaShop, once you entered the URL in your browser:

Default Theme

Installing New Modules

Installing New Modules

The installation of new modules to your PrestaShop is a very easy process. Those are the steps you have to do:

  1. Unzip the module you have downloaded and upload it to your server with your favorite FTP browser.You have to place the module folder into the /modules folder of your installation.
  2. Login to your back-office and go to the “Modules”-tab.
  3. Search for the new module in the list.
  4. Finally click on “Install”.
  5. If necessary you can now click on “Configure” (the gearwheel-icon) to finalize the installation of the new module.

Once you have finished configuring the module, be sure to test it so you can confirm that it is working as it should.

Installing New Themes

Installing New Themes

To install a new PrestaShop theme, you have to do following steps.

  1. Download and extract it locally.
  2. Upload the entire theme-folder to the /themes directory on your server.
  3. Login to your back-office and go to Preferences > Appearance.
  4. Select your new themes from there and apply the changes by clicking on the “Save” button.

Congratulations! You have installed your new theme and to check it out, go to the front-end of your online shop and take a look at it!

Conclusion and Last Words

I hope you enjoyed this short introduction to PrestaShop.

As you see, it is very easy to use, has a lot of very useful features and can be easily extended with new modules. Also it is a professional shopping cart solution for your online shop, used by a lot of people.

Another big advantage is that it is open source and has a very big community where you can ask for help, once you need it.

Now go ahead and start designing your own themes or browse the web for finished themes. There are also a few free themes you can download and install on your server.

Good luck with your online shop!

Cheap SSL CertificatesE-commerce week is sponsored by SSLmatic which sells SSL certificates for much cheaper prices (RapidSSL, Geotrust, Verisign) and offers great support. Besides standard SSL certificates, wildcard and EV certificates are offered with discounts too. Check their site to get the cheap SSL certificates.
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl