Netisme Blog

8 Best WordPress Portfolio Themes

Michaël Ambass — Fri, 13 Apr 2012 15:08:25 +0000

I’ve not post anything for long time but today I come with this awesome selection of 8 beautiful WordPress Porfolio Themes.

All these theme are new, created on 2012 March month. Hope it will help you to choose the nice one for your website.

Radius Responsive WordPress Theme

Demo – View theme page

The most popular WordPress Porfolio Theme for March 2012, clean style with a responsive layout. Gallery image can be used in full-width. This theme is awesome for an freelance developer or designer.

Ability

Demo – View theme page

More a photography portfolio but can be used by a freelance developer. The particularity of this theme is to be in full AJAX for an great navigation

Shiny Theme

Demo – View theme page

A theme with unlimited colors and more than shortcodes that will help you to built you Portfolio faster.

Rawa

Demo – View theme page

I love this theme, with an ajax Pageloader that create style during the navigation and a full responsive functionnality that allow you to see your website optimized on screen, tablets or mobile.

Sharp

Demo – View theme page

Original theme that with an very special navigation. Great for a V-Card porfolio website.

Splaty

Demo – View theme page

Great for an freelancer or an small agency that want to provide there services

Woop Portfolio

Demo – View theme page

Clean, simple and with some awesome options like an custom contact form, fancybox. This theme is developped on 960 grid system that give an organized structure.

Evolet

Demo – View theme page

Very customizable theme, with unlimited widgets and colors, sliders et blogs types.

News from Netisme

Michaël Ambass — Tue, 21 Dec 2010 08:30:11 +0000

Hi everyone,

Has you can see there are not a lot of article theses lasts weeks, I’m working on a restructuration of the blog and Netisme Network.

Hope that this restructuration can make your visit more efficient.

Some new posts are in final position and will be on Netisme fastly.

Keep in touch

8 best free tools to create your website

Michaël Ambass — Sun, 07 Nov 2010 12:58:42 +0000

Internet is the new culture, it is used for everything: finding a recipe, gather information, consult the news, everything !
With the growing prominence of web culture, creating a website is primordial to develop your business.

Many free tools are created to fulfill the desire of users to create their website easily.
Here is a selection of 8 best free tools that let you set up your website.

# 1 – WordPress

WordPress is the best known blogging platform in the world, it also (especially since version 3) allow to make websites that showcase, you can use it to developp your business websites. WordPress is easy to use and is set up very quickly. The community around WordPress is continually growing and is already very large, over 25 million webmasters already trust WordPress.

Visit WordPress official website

# 2 – Joomla

Joomla is an old CMS (Content Management System) that always know his success. Joomla allows setting up a website very easily and offers a lot of opportunities to administrators. You can use it to make static websites, portfolios and even online shops. Joomla can be easily adapted to any type of project. The only criticism that can be made to Joomla is its security problems, the discovery of flaws Joomla is very common.

Visit Joomla! official website

# 3 – Drupal

Drupal is a Content Management System that know a hudge evolution over the past few years. Easy to use, Drupal enables a large number of projects without worry. Flexible and powerful, he allow to create small website to a complete company web application. Active with more than 3,000 developers at his side, Drupal is one obvious choice of CMS.

Visit Drupal official website

# 4 – CMS Made Simple

Like Joomla, CMS Made Simple is a long-standing resistance CMS that exist for many years. As its name suggests CMS Made Simple (which can be named CMSMS) is very simple to use. More suited to achieving showcase website, it is a great choice for creating his website.

Visit CMS Made Simple official website

# 5 – Tomato CMS

A tool for creating Web fairly new but very powerful. Tomato CMS is unique in having been developed under the famous PHP framework “Zend Framework“. Allowing a huge amount of functionality, Tomato CMS allows the creation of complex website. It’s a CMS that requires a lot of learning time.

Visit Tomato CMS official website

# 6 – Dotclear

More suited to creating a blog, with some modifications Dotclear can be used without problems in a showcase website project. Simple, fast and efficient, DotClear remains one of the indispensable tools in the field of website development.

Visit Dotclear official website

# 7 – TYPO3

The power: TYPO3. A CMS that despite the fact that is very heavy, offers an unimaginable amount of features to make any kind of web project. Backed by its very active community, TYPO3 is a professional choice for creating website. Attention to beginners, TYPO3 requires a long apprenticeship.

Visit TYPO3 official website

# 8 – SPIP

SPIP is a CMS that I particularly appreciated, he is very simple et allow a lot of things with its templating system to achieve a huge amount of project. Light, fast and easy it remains a top choice for making showcase site or website for informational purposes.

Visit SPIP official website

Scroll GoToTop apparition with jQuery and CSS

Michaël Ambass — Fri, 05 Nov 2010 13:08:29 +0000

Today we will focus on the use of popular javascript framework jQuery and see how to make a “Go to top” button when you scroll in our page. When we are at the top of the scroll, it will simply make it disappear animation.

For an example of what we achieve in this tutorial, you can just see the example on this same page. Try to scroll down this page and you’ll see a “Go to top” button that lets you to scroll up in the site with a slide effect.

Loading jQuery framework

jQuery framework is a javascript file (.js) who contains some Javascript code. To use it in our website, we must call this file in our page.

The jQuery Call is placed in the header of the page between the “head” tags.

So we will download the latest version of jQuery.
Visit the official site jquery: www.jquery.com and click “Download jQuery.

The download of the latest official version of jQuery and stable launches.
You finish downloading? Excellent!

We will now call the jQuery framework in our page so we can use the framework (remember to place the file you just downloaded into a /javascript directory that we’ll create at the root site).

Add the paste this code between the head tags of your page.

What this code does: it adds the javascript code found in the jQuery file to our page.
We now have the framework jQuery loaded into our page. We’ll start …

Creating the button placement and CSS

We will now focus on creating an element that is displayed when you use the scroll.

Let’s start by placing the xHtml of this button.
Paste this code just after the opening of your “body”

Let’s analyze this code, first we create a div with a class “scrollToTop” which will serve as a selector when we will work with jQuery.

In this div we place a normal link pointing to the anchor “#” and the text “Go to top” or the text displayed in the scroll.

You can also see that I have placed an onClick attribute that returns the value “false”. Returning “false” allows us to avoid accessing the anchor at the click, it cancels the click (we do not want to leave the page).

Well, we have our HTML code in place, we will now change the look of our button.

We will made a simple box entirely in CSS, you can of course change as you wish this box by applying a style to the div or add divs in it without problem.

As we place a specific class in our box “scrollToTop” we’ll use CSS to change its appearance.

div.scrollToTop{
position: fixed;
right: 20px;
bottom: 20px;
display: none;
width: 100px;
padding: 10px;
background: #000;
opacity: 0.5;
color: #fff;
}

Let me see that! We begin by putting the position “fixed” because we want that the box doesn’t move throughout the scroll. It remains that the element is fixed on the right and does not change its position on the screen.

We will now leave a little space on the right and bottom

right: 20px;
bottom: 20px;

These two lines make a 20px space on the right and on the bottom.

display: none

When the page load is complete, the scroll bar is found at the top so there is no need to display the basic box. We cached it with the CSS display property to “none”.

A bit of style now defining a width of 200px and 10px of padding.

It puts a black background correspond to #000 and its opacity is lowered to half “0.5″.

We have finish for the appearance of the box, we will now move to the big project: the javascript.

Javascript

Let’s start by displaying and hiding the box in the scroll function. Little reminder, when we load the page the box is automatically hidden in CSS (display to “none”).

What we want first is to know when the user uses the scroll. The “scroll()” javascript function will allow us to access this event on the selector “window”.

See what we have now:

$(window).scroll(function(){
});

Explanation: Taking as a selector “window” which is the our browser window. It performs the function code (callback) if the function scroll() is used.

So all the code that we will stand between “function(){” and “}” will run only when the user scroll.

We know how to detect the scroll, now see how to detect if it is at the top of the page and if the scroll move. If you’re on top, we will hide the box, if you are moving, we will display the box.

$(window).scroll(function(){
if($(window).scrollTop() == "0")
$('#scroller').fadeOut('slow');
else
$('#scroller').fadeIn('slow');
});

We took the code before and add two conditions.
The first occurs when the value of the “scrollTop” is to 0, that is when our scroll is at the top of the page.
If it returns “true”, so that the scroll is at the top, we hide our box with the “fadeOut” jQuery function. The “slow” indicates that the effect is done gently.

Note that I added a div with a class “content” to get a scroll and to test our example.

Let’s do a recap of what we have now.

File: index.html

<html>
<head>
<title>Scroll To Top Tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="javascript/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="javascript/scrollTop.js"></script>
</head>
<body>
<div class="scrollToTop"><a href="#" onclick="return false;">Go to top</a></div>
<div class="content">My content</div>
</body>
</html>

File: style.css

div.scrollToTop{
position: fixed;
right: 20px;
bottom: 20px;
display: none;
width: 100px;
padding: 10px;
background: #000;
opacity: 0.5;
color: #fff;
}

.content{
height: 2000px;
}

File: javascript/scrollTop.js

$(window).scroll(function(){
if($(window).scrollTop() == "0")
$('div.scrollToTop').fadeOut('slow');
else
$('div.scrollToTop').fadeIn('slow');
});

When you start your index.html page and you scroll down the box “Go to top” should appear. When you are at the top of the scroll, it disappears.

Now that we manage the appear and the disappear of our box, we will activate the scroll upwards.
Very easy !

Good! We will start by adding a selector in our javascript that points to the link that is in the box.

$(window).scroll(function(){
if($(window).scrollTop() == "0")
$('#scroller').fadeOut('slow');
else
$('#scroller').fadeIn('slow');
});

$('div.scrollToTop a').live('click', function(){
// Notre code
});

We’ve added an event to our javascript. This is an event-type “live” with the parameter “click” that will allow us to detect all the clicks on the links found in the box with the class “scrollToTop”.

We will add the scroll up when the user clicks on this link now.

$("html, body").animate({scrollTop:0}, 'slow');

We select the element “html” and “body” of our page and launch an animation type “scrollTop” that change to 0, so at the top of the window. The parameter “slow” give the slow effect in our animation.

Complete code of the tutorial

File: index.html

File: style.css

div.scrollToTop{
position: fixed;
right: 20px;
bottom: 20px;
display: none;
width: 100px;
padding: 10px;
background: #000;
opacity: 0.5;
color: #fff;
}

.content{
height: 2000px;
}

File: javascript/scrollTop.js

$(window).scroll(function(){
if($(window).scrollTop() == "0")
$('div.scrollToTop').fadeOut('slow');
else
$('div.scrollToTop').fadeIn('slow');
});

$('div.scrollToTop a').live('click', function(){
$("html, body").animate({scrollTop:0}, 'slow');
});

I added a little style to our link to the CSS

div.scrollToTop a{
color: #fff;
font: 12px "Lucida Grande";
text-decoration: none;
}

Feel free to leave comments or remarks;)

Sample files

You can download the sample files of the tutorial below:
Download sample files

20 Premium Design Admin Themes

Michaël Ambass — Wed, 03 Nov 2010 16:56:52 +0000

Hi everybody, past 31 october we have seen a 7 free admin templates list, today we will come back with a great list of 20 premium design admin themes.
I’ve made a personal selection of the best in admin templating. Hope it will inspire you and help you to choose your admin template.

Don’t hesitate share your opinion with the Netisme community

#1 – Premium admin theme : Admintasia

#2 – Premium admin theme : EncoreAdmin

#3 – Premium admin theme : Admin Panelz

#4 – Premium admin theme : Great Admin

#5 – Premium admin theme : AdminuI

#6 – Premium admin theme : Full Admin

#7 – Premium admin theme : Carbon Admin

#8 – Premium admin theme : Karamel Admin

#9 – Premium admin theme : Murano Admin

#10 – Premium admin theme : Admin Control Panel

#11 – Premium admin theme : Adminus

#12 – Premium admin theme : Wide Admin

#13 – Premium admin theme : Projectic

#14 – Premium admin theme : ForestCP

#15 – Premium admin theme : Equinox Admin Panel

#16 – Premium admin theme : Fresh CMS

#17 – Premium admin theme : Super Simple Admin

#18 – Premium admin theme : Profi Admin

#19 – Premium admin theme : Titanium

#20 – Premium admin theme : Acid/Panel

And it’s finish, I really hope that you appreciate this selection.

How to integrate a Like it Facebook button on your website

Michaël Ambass — Mon, 01 Nov 2010 21:37:29 +0000

Facebook is the most popular social network. Use it to promote products or information on it is very beneficial and can help you to increase your traffic.

We’ll see how to integrate the button “I like it” from Facebook into your website.

Here’s what our button will look like:

A version with the integration of the same button in WordPress will be published shortly for WordPress users

Configuration of our page

When a user click on the “Like” button, the content of the page where the click has made is posted on the wall of the Facebook user.

To control the content that appears we need to add some settings in the of our page.

Here is the current code that we will implement in our

Then we’ll see how to configure this settings.

Put this code in your header and don’t forget to change “Netisme – Articles, tutorials and resources about Web Development” by your webpage title.

What will be posted on the wall of the user with this title:

PS: My Facebook is in French, so you will have the same interface translated into English if your are using the English version of Facebook.

Integration of the button

We will now add the button “I like” to our web page.

Here’s the code to be placed where you want to display your button:

If we look at this snippet we can see that some parameters are passed to Facebook.

URL of the page to share

href=http://blog.netisme.com

This is the URL of the web page that you want to share as a “I like” on the Facebook wall.

Layout informatoin

layout=standard

Facebook offers several layouts for displaying the button, see what they look like.

Layout : standard

Layout : button_count

Layout : box_count

To choose one of the layouts, you have to replace “standard” in the code with the name of the layout you want (standard, button_count, box_count).

User picture informations

show_faces=true

Enable or not displaying the picture of the user from Facebook to the place where is your button (when the layout “standard” is used).

By setting this parameter to true you will have the following result:

By setting false you will see that:

Width button informations

width=250

It is simply the width (in pixels) of your button.

Action type

Facebook offers two type of actions to share a content : “I like” and “Recommandation“.

action=like

Using action “like”

Using action “recommend”

Colors informations

colorscheme=light

Two color schemes is allow.

Scheme : light

Scheme : dark

Replace “light” with the desired pattern to change the color of your button.