S'abonner à flux
a magazine for webworkers and site-owners
Mis à jour : il y a 18 min 50 sec

WordPress Hacked? Keep Calm – This is What You Need to Do Now!

il y a 2 hours 11 min

Shock! Your WordPress website was hacked. A new landing page saying “WordPress Hacked by XYZ” or nastier things shows up. You break a sweat and feel close to fainting. Your heart plays drums in your chest. You can’t think clearly and you don’t know what to do. Got it? Now calm down. It is not that difficult to clean up a hacked WordPress website and return to business as usual. We’ll show you how to do it in this article.

First: Take a deep breath and don’t panic. It’s not the end of the world and you are not the only one with a hacked site. It happened to a lot of people, including me. That’s why I know how to deal with it ;-) And I will now share my knowledge and show you how to solve this problem.

Certainly, the easiest way is to recover the website from an earlier backup. You did take care of a backup solution, right? If so, it’s not a problem at all. Just restore an older backup from a time where your website was not hacked. Change all passwords, use 2-factor authentification and your problem is history. If you don’t have a backup, read on. We will deal with the problem step by step.

WordPress Hacked? Not as Bad as it Seems. Stick to the Following Guide 1 – Check Your Computer for Trojans

The first step might sound profane but it is very important nonetheless. A trojan on your computer could be the reason why the intruder was able to find the password for your website. Scan your computer with an antivirus program loaded with the newest virus definitions. When nothing was found, you’re good. Still check the computer once more with the Kaspersky Rescue Disc. You can continue with the next step should it also not find anything.

2 – Make Sure That Your Website is not Publicly Accessible Anymore

This step is very important as your website might have started spreading malware after being hacked and thus might be right in the process of being removed from the Google index (or other search engines, hehe). The fastest way to shut down your website from the public is the installation of a so-called “Maintenance Mode” plugin. If you can still log into your WordPress, install the plugin »WP Quick Maintenance« and activate it. Now open the plugin settings and activate the maintenance mode there. From then on, every visitor will only see the maintenance page.

If you don’t have access to the admin login anymore, reset your password. Here is a good guide to resetting your password..

3 – Change all Passwords

Immediately change all passwords. You should start with the passwords on your computer. If you don’t yet have any for that, get them. Nobody else should have access to your computer. If you can still log into WordPress, change the passwords of all accounts. A pretty solid and straigh-forward generator for save passwordscan be found here. Additionally, you should change the passwords of the (S)FTP access and the WordPress database as well as the master password and the password of your web host.

4 – Get a Backup of all WordPress Files and the Database

Log into your server or webhosting package via (S)FTP and download all WordPress files to your desktop. Pay close attention to the folder “uploads“. This one definitely needs to be saved as it contains all uploaded files and images. You can find it under »wp-content => uploads«. Download this folder onto your desktop separately because you will need it later.

Now create a backup of your database. To do so, log into the administration interface of your web host and choose “phpMyAmin” or whatever tool your host provides you with. Following that, choose your database and click “export”. Export the database as “SQL” and if possible, as a .ZIP file. Don’t forget to also save the important file ».htaccess«. This file will also be needed later as WordPress doesn’t work properly without it.

If you are using a Mac instead of a PC, you will need to activate the display of hidden data as all files with a dot before the file name are hidden system files for Max OS X and thus, as the name suggests, are hidden from view.

5 – Re-Download all Plugins and Themes

Download all used plugins fresh off or from the company that you bought them from. Also get the most recent version of the WordPress theme you are using. Plugins and themes are very popular for placing malware and backdoors. To entirely clean up the website, you will need to newly download all themes and plugins as the copies from the repository are guaranteed to be absolutely clean.

6 – Check Important Data and Folders

Search for the files »wp-config.php« and ».htaccess« in the backup and check them. The »wp-content.php« shouldn’t contain much more than the access data to your WordPress database and the things that every fresh version of a file contains like the “Authentication Unique Keys and Salts”; meaning the security keys. If you’re not sure how the original version of the file looks, you can find it here.

Afterwards, check the ».htaccess« data to see if there are things that don’t belong there. If you are not sure, just delete the content of the file. In the WordPress codex, you can find the content of a standard .htaccess file. Copy the code into the file you cleaned and save it. Both files are needed for the recovery of your website.

7 – Check the Folder »uploads«

The folder »uploads« is crucial for the success of the recovery as it contains all uploaded data, oremost all of your images. Open the folder and search it and its sub folders for .PHPfiles. If you find any, delete them all. In most cases, they don’t belong there. If a plugin in the folder does need a PHP file, it will automatically recreate it later.

8 – Delete all Data from the Server

Log into your webserver or your webhosting package via (S)FTP access and delete all data of your WordPress installation. Delete ALL the data. Don’t leave anything. Really. Go ahead. Do it!

9 – Upload a Fresh Package of WordPress and Important Files

Get a new WordPress version from and upload it onto your server or webhosting package via (S)FTP access. You should also newly distribute the security key in the »wp-content.php« file, the generator “” helps you with that.

After that, load the »wp-content.php« and the ».htaccess« data back into the root of your WordPress installation. Now open the folder »wp-content« on the server and load your »uploads« folder into that. Afterwards you should have gained access to your WordPress again. Login to the admin interface.

10 – Install New Themes and Plugins

Newly install all plugins. Subsequently, install a fresh version of your theme. Please, do yourself a favour and don’t use any old versions from the backup. Chances are that they contain malware. Only use new and fresh versions.

11 – Update the Database to the New WordPress Version

This step is unnecessary if you always upgraded to the newest WordPress version. However, when you didn’t always do that, your database might have to be updated for the new version. Enter the following URL in the address bar of your browser:

Afterwards, follow the steps and refresh your database.

12 – Check the Correct Read/Write Rights on the Server

Now, you have to make sure that the files and data can’t be altered from outside. Too many rights open the door to your WordPress installation for hackers. Adjust your rights the following way:

File or Folder Relative to the Root Rights Inherit* Root 705 yes /.htaccess 404 no /wp-config.php 404 no /index.php 404 no /wp-blog-header.php 404 no /wp-admin/ 705 yes /wp-includes/ 705 yes /wp-content/ 705 yes 13 – Scan your Website Using the Exploit Scanner

Install the WordPress plugin »Exploit Scanner« and let it scan your website. When there is still malware inside your database, the plugin should find it. Consider one thing: Malware can now only be within the database as all other files have been freshly installed or, in case of the »uploads« folder, cleaned from harmful data. If malware is found in the database (which is rather unlikely), you should leave the job to a professional as the database is the heart of WordPress. One mistake and your website is history.

14 – Test – Test – Test

Open your website in the incognito mode of your browser and check if the hack is gone. Also test if all articles and pages can be accessed without any issues. Check the features and if all errors are gone while being logged in as well as while being logged out as some hacks can only be seen while not being logged in.

If you don’t find anything and everything works without issues: Be happy, you got your website back!

15 – Deactivate the Maintenance Mode

As everything works flawlessly now, you can deactivate the maintenance mode and with that have your website go back live.


Recovering a hacked WordPress website is not entirely easy, but also no rocket science with our guide. It’s important to keep calm and approach the problem systematically. Then, almost nothing can go wrong.

Related Links


* You might also be interested in the following articles
Catégories: News dév web

JavaScript Engine Popmotion: Interactive Animations in a Snap

27 novembre, 2015 - 13:00

Static websites without any animations are getting less and less common, or more and more uncommon, depending on the viewpoint. CSS3 and JavaScript provide plenty of effects for animated transitions and more complex animations. Even interactive animations don’t pose any general problems for web development anymore. However, especially complex movements in combination with interactive elements require a certain programming effort. The JavaScript engine Popmotion provides a vast array of tools that help you create diverse interactive animations and animated user interfaces.

Clear Division: Popmotion Uses Actors and Tweens

The base for a Popmotion animation is the so-called Actor. Actors are HTML elements that are moved by an action like a tween or a simulate.

var ball = new ui.Actor("#ball");

In the example, we turn the HTML element with the ID “ball” into an Actor via „ui.Actor()“. The looks of an element are set using CSS as usual. Subsequently, we define an action that describes the way of the animation.

Tween is recommendable for a classic animation. Here, we choose what the Actor’s animation has to look like.

var move = new ui.Tween({ values: { y: 100 } });

In the example, a simple move is created via „ui.Tween()“. An object literal allows you to add more properties to the tween. Here, the value „y“ is set to be 100. That means that the actor will move down 100 pixels following the y-axis.

The Features of Popmotion

In the last step, Actor and tween need to be brought together.


Careful readers probably already noticed. Until now, tween is not any different from native CSS3 animations. However, Popmotion provides a bunch of additional parameters. For example, there is a multitude of easings that exceed what CSS3 offers.

ball.start(move.extend({ duration: 5000, ease: "backOut" }));

Via „extend()“, you can add additional parameters to the animation. Besides „duration“ for the length of the animation, you can enter an easing function with „ease“. The keyword „backOut“, for example, makes the animation exceed the defined goal at first and then spring back like elastic material.

Advanced Popmotion: Physical Simulation via Simulates

There are so-called simulates as an alternative to the classic tweens. These are different from the tweens in the way they function. By replacing „ui.Tween()“ with „ui.Simulate()“ in the example, the animation changes its behaviour.

var move = new ui.Simulate({ values: { y: 100 } });

Now, the Actor is not moved down 100 pixels, but infinitely. The value „y“ now determines the movement per second. That means the Actor is moved down 100 pixels per second.

Additionally, simulates provide specific parameters that allow for the simulation of physical animations. There is the parameter „acceleration“ that defines the acceleration of the animation. A value that represents the acceleration in units per second has to be entered.

ball.start(move.extend({ acceleration: 500 }));

In the example, the Actor accelerates to 500 pixels per second. As an alternative to the acceleration, a value for the friction can be introduced via „friction“. A value between 0 and 1 is to be entered here. 1 is equivalent to maximum friction. An animation is decelerated fast or slowly depending on the value.

ball.start(move.extend({ friction: 0.1 })); Event Handler for Interactions

To make sure that the animations can actually be used interactively, Popmotion provides a couple event handlers that can allow access to a feature at any point in the animation – at the beginning, the end and on any frame.

var ball = new ui.Actor({ element: "#ball", onComplete: function() { alert("Finished."); } });

In the example, we add the event handler „onComplete“ and the ID of the element to the actor. Everything is labeled as an object literal, so the ID has to be deposited as a value of „element“.

After the animation has been displayed, a simple alert is played in the example.

Tracking with Popmotion: Using User Entries for Motions

Another interesting and useful aspect is the so-called tracking. It allows the user to move an element in a limited area using the mouse.

var tracking = new ui.Track({ values: { x: { min: 0, max: 100 } } });

In the example, an area between 0 and 100 pixels is defined for the x-axis. Via an event, you can now use the tracking on the Actor.

document.getElementById("ball").addEventListener("mousedown",function(e) { e.preventDefault(); e.stopPropagation(); ballActor.start(tracking, e); }, false);

The user can now move the element with the ID „ball“ between 0 and 100 pixels on the x-axis by keeping the mouse button pressed. Thanks to tracking, you can easily define progress bars.

Conclusion, Costs and License

The presented options are just a small part of what the JavaScript engine is capable of. Taking a look at the guides is worth it as you gain a detailed impression of Popmotion. There is also an extensive documentation.

Guides Show What Popmotion can do

The library is not even 50 Kilobyte large and works without any dependencies. jQuery or other frameworks are not needed to use Popmotion. The engine uses contemporary JavaScript like „requestAnimationFrame“ to display animations performantly.

Popmotion is free to use for non-commercial projects. The commercial use costs about USD 10 per month and project.


* You might also be interested in the following articles
Catégories: News dév web

HTML5: Create a Top-notch OnePager with Slides

27 novembre, 2015 - 10:00

OnePagers, websites that consist of one page divided into two or more segments, are still growing in popularity. If I remember correctly, Apple were the ones who started that craze with their presentation of one of the later iPhones a few years ago. The classic OnePager consists of a full-screen presentation of a topic, garnered with large imagery, a subtle header with navigation, an as subtle footer, and navigation dots alongside the respective presentation screens. The new design framework Slides by Designmodo is your perfect helper to get such a website up and running in no time.

Slides: Get it on Black Friday and Save Massively

Before I show a little of what Slides can do for you, let me not forget to mention that now is the time to buy it. In honor of Black Friday Designmodo gives 60 percent rebate on all of its products. For Slides, this means that instead of 249 dollars, you will only have to pay 99 dollars which is a steal for what Slides offers you. Keep the coupon code BLACK close to your heart and only enter it during the checkout process in the Designmodo Shop.

Slides: Powerpoint on Steroids?

When I first encountered Slides, I couldn’t help but feel reminded of Powerpoint, the Microsoft dinosaur with a backlog of millions of boring meetings being worsened by the so-called presentations that Powerpoint was able to deliver in the hands of unskilled presenters. No worries. Slides is not as boring as Powerpoint, although there are some similarities.

Slides provides you with slide-based presentations just like Powerpoint does. One slide represents one full screen. This is quite different to the regular website with its above and below the fold division and its potentially endless scroll area. In Slides, you create content page-based, one page at a time.

And this is perfect for many things, first and foremost – Apple taught us – for products, such as smartphones or apps or washing machines or whatever product or service you’d like to promote. The linear trail of storytelling is an ideal way of getting the message over without too much clutter and too many design decisions needed. Mobile devices are supported without additional effort as the sites scale entirely responsively to the required resolution.

While creating an attractive OnePager using your HTML5/CSS3 skills is certainly doable, creating one using Slides is much easier. It is not even only much easier; it is a true no-brainer. If you want to create a sophisticated OnePager for a product or service that you want to sell, take Slides. Period.

Slides: The Concept is Self-explanatory

The Slides Framework is an extensive toolkit to quickly create a website. It consists of around 70 individual slides, lots of headers and footers, some animations and almost a dozen templates to start with. Slides is a download that’s nearly 800 megabytes heavy, but can also be tailored down to size at the online Template Generator over at Designmodo. This spares you the full download and only delivers the chosen parts and parameters of the full framework.

The process using the Template Generator is as simple as can be. First you choose any combination of slides that you see fit for your intended project. Then you select a layout for the top and the footer bars. Set the animation you like to apply to your presentation and click “Download”. This will send a tailored version of the framework to your local desktop. Before you actually download the subset of the larger framework, you can tweak a few presets from the Generator and see the results per click on “Preview.”

Once the tailored Slides framework has reached your local hard drive in the form of a zip archive, decompress it. You’ll find a folder structure that contains all the needed assets and scripts as well as the index.html in the root of the folder structure. This idex.html is what you will want to edit using your favorite HTML editor. We have just recently put together collections of the best editors for Windows as well as Mac OSX.

The HTML is perfectly understandable as long as you are no complete noob. The source code is structured by comments that relate to the names and numbers used throughout the framework. So, should you have chosen the slide with the number 18 to be included in your index.html, you just search for that slide in the source code and apply the intended changes. Other assets such as images stick to the same naming convention. An image used for slide 18 will be named img–18.jpg. I think you get the concept?!

Replacing the assets has to be done manually, however, but is as easy as replacing a file with a different file of the same name. This is the appropriate way as it sticks to the conventions and keeps the concept intact. You can, of course, opt to change the names and even paths to the assets from the index.html, should you feel like it. Done right, you will not find any differences in functionality.

Take your time to watch the following video. It walks you through the whole process in about eight minutes. That’s all you need to know:

The best practice example of what Slides can do is its own product page. If you haven’t checked out Slides already, you should definitely do that now while their 60% discount is still at hand. I bet you will not regret it.

Before I forget it. You can create as many projects with Slides as you like. The license is not limited in any way. The only thing you are not allowed to do is distribute the framework as such. But that’s simple rules of fair play anyway. Besides all of the necessary assets to bring your OnePager to life, Designmodo also provides the underlying design files in their editable formats. All of the slides are delivered not only in HTML, but also in Photoshop and Sketch format.

To cut a long story short: Slides is a fantastic tool to easily create attractive OnePagers with HTML5, CSS3, and JavaScript. If you are fast to decide, you can spare 150 dollars and catch the product for a mere 99 dollars. I already did.

* You might also be interested in the following articles
Catégories: News dév web

Loco Translate: Localize WordPress Themes and Plugins Easily

26 novembre, 2015 - 10:00

Until now, the plugin “CodeStyling Localization” was the measure of all things concerning the translation of WordPress themes or plugins. Unfortunately, the plugin will not be developed any further and can not be received from the WordPress plugin index. Finding a suitable replacement is not easy. I more or less randomly found the plugin “Loco Translate” and was positively surprised. It is easy to use and cleanly designed. It convinced me enough to make me want to introduce you to this plugin in detail.

The Loco Translate Plugin

The plugin supports the translation of themes and plugins directly from within the WordPress admin interface. It also offers support for PO features, comments, references, and plural forms. Configurable PO file backups are also possible.

  • Developer: Tim Whitlock
  • Actively developed: Yes
  • Latest Version from: 24th of July 2015
  • Cost: free, downloadable via
  • Unwanted effects in conjunction with other plugins: none known
  • Developer Homepage: not available
  • Download on
Loco Translate: It’s Really This Simple

After the installation of the plugin, there is a new main menu button entitled “Loco Translate”. There, you will find a page that lists up all your installed plugins and themes as well as their respective translations. There is also a page with settings for the plugin. However, the settings can be ignored, as none are necessary.

This main overview also shows you if the data access rights are sufficient to generate translations. When you don’t see a green check, you should directly set the required rights on your server or web hosting package via an (S)FTP program.

On the main menu, you can see the installed themes in the top area. Below that, you’ll see the installed plugins. Any plugin or theme displaying the options “New Language” and “New Template” is not prepared for translation. That means that there is no code within the plugin that can be translated. In these cases, you need to edit the code to prepare translations beforehand.

Translating a WordPress Plugin or Theme

Now, scroll down the main overview until you find the theme or plugin that you want to localize. You have the option to optimize a poor translation or to add another language altogether.

The big advantage of Loco Translate is that no theme data has to be read like it was the case with CodeStyling Localization. Clicking the respective language file or the link “New Language” is enough.

To correct an insufficient translation just click the language data that you want to fix.

A new language can be added quickly via the link “New Language.” The following screen will appear:

Should you know the correct language code, you can also directly enter it. In this example, the code is “de_DE” for an intended translation to German.

Starting a Translation

After clicking the button “Start Translation”, you are immediately good to go.

In the upper box, you find the original texts and in the lower box you enter the translation. Already translated passages are marked with a star in front of the original text.

When you’re done translating, just click the button “Save” from the top menu.

Now you will see a green message, saying that the PO file has been saved, and the MO file has been compiled. The theme or plugin is now translated, which you can easily prove by accessing your website.


The looks of the translation page could use some work. I would prefer if the windows were not underneath but next to each other. Maybe this will be done in the future. Other than that, Loco Translate is a plugin that is much easier to use than CodeStyling Localization or just about any other tool ever was. Loco Translate is thought-through and simple. I wholeheartedly recommend it!


* You might also be interested in the following articles
Catégories: News dév web

Free WordPress Plugins: The Top10 of November 2015

25 novembre, 2015 - 12:00

The best thing about WordPress is its adaptability. Everything you can think of is generally possible, and a lot of it can be done very fast. You just need to search through the official WordPress plugin index to find the features of your desire and even more. Just install a plugin and your website becomes a bit better and more functional. But be careful: you shouldn’t use every plugin. You need a guide through the repository. That’s why I present ten free WordPress plugins every month. They are the best plugins of the last four weeks and with them, you’re always on the safe side.

1 – WordPress Next Post by errnio

Next Post is a plugin that is interesting for the mobile view of a website, which is why it only works on mobile devices. When swiping to the right on a smartphone or tablet, the next article will be displayed. The plugin offers real added value for the mobile visitors to your website.

  • Developer: errnio
  • Frequently updated: Yes
  • Latest version from: 18.11.2015
  • Cost: free on
  • Compatibility problems with other plugins: not known
  • Developer Homepage: unknown
  • Download on
2 – Pingu Sharing Buttons

The Pingu Sharing Buttons are inspired by the well known Mashshare button solution. However, Pingu offers a lot more options to edit the buttons. The buttons can be placed on the side as “floating buttons” but also on top or below the content.

  • Developer: Tech Pingu
  • Frequently updated: Yes
  • Latest version from: 18.11.2015
  • Cost: free on
  • Compatibility problems with other plugins: not known
  • Developer Homepage: unknown
  • Download on
3 – Off Your Site

“Off Your Site” is a maintenance mode plugin without any nonsense. It shows the visitor of the website a simple maintenance mode page while the administrator of the WordPress site still sees the full interface of the website. This is an ideal solution for testing your new design before going live with it.

  • Developer: enqtran
  • Frequently updated: Yes
  • Latest version from: 18.11.2015
  • Cost: free on
  • Compatibility problems with other plugins: not known
  • Developer Homepage: unknown
  • Download on
4 – Vulnerabilities Check

Vulnerabilities Check checks your website for known security issues. It receives its knowledge data from the “WPScan Vulnerability Database“, sponsored by the well-known security service provider Sucuri. The plugin scans the complete WordPress installation, including plugins and themes.

  • Developer: Sensorete
  • Frequently updated: Yes
  • Latest version from: 18.11.2015
  • Cost: free on
  • Compatibility problems with other plugins: not known
  • Developer Homepage: unknown
  • Download on
5 – Create DB Tables

Create DB Tables is especially attractive for developers as it allows the creation of new database tables within an existing WordPress database. Thanks to the plugin, those tasks can now be completed easily from the WordPress backend without needing to log into phpMyAdmin or similar solutions.

  • Developer: jppreuss
  • Frequently updated: Yes
  • Latest version from: 18.11.2015
  • KCost: free on
  • Compatibility problems with other plugins: not known
  • Developer Homepage: unknown
  • Download on
6 – Stylish Notification Popup

Stylish Notification Popup is a plugin that displays beautifully designed popups. These can contain text as well as call-to-action buttons. The popups are responsive and thus adapt to various screen resolutions. The plugin is intentionally lightweight and does not slow down the website.

7 – My Custom Login

My Custom Login adds a login and register option to your website’s main navigation menu. To do that, the plugin uses native WordPress features, namely wp-login.php for login and wp-register.php for registration.

  • Developer: Ajay Singh
  • Frequently updated: Yes
  • Latest version from: 18.11.2015
  • Cost: free on
  • Compatibility problems with other plugins: not known
  • Developer Homepage: unknown
  • Download on
8 – Simple Sidebar Ads

A simple, yet useful plugin to display text and banner-based advertisements. It adds a widget that is filled with the required information for the ads. Afterward, you can make it display the ads in every widget area of the website.

  • Developer: witnox
  • Frequently updated: Yes
  • Latest version from: 17.11.2015
  • Cost: free on
  • Compatibility problems with other plugins: not known
  • Developer Homepage: unknown
  • Download von
9 – LDW Clean

The LWD Clean Plugin cleans your WordPress database and deletes double entries and things that are not needed anymore. It promises to increase the website’s speed through its actions. You can individually choose what should be cleaned and what not. Additionally, it is supposed to optimize the database. Although the database is not the most important influencer when it comes down to performance increases you should still keep an eye on it.

  • Developer: Lake District Walks
  • Frequently updated: Yes
  • Latest version from: 17.11.2015
  • Cost: free on
  • Compatibility problems with other plugins: not known
  • Developer Homepage: unknown
  • Download on
10 – Owl Carousel WP

The Owl Carousel WP plugin is a simple plugin to integrate the popular carousel in any article or page. Just create a carousel and tie it into any place you want via shortcode. The carousels adjust to any screen resolution, meaning they are responsive.

  • Developer: imranemu
  • Frequently updated: Yes
  • Latest version from: 17.11.2015
  • Cost: free on
  • Compatibility problems with other plugins: not known
  • Developer Homepage: Owl Carousel WP Demo
  • Download von

This month was pretty rich with new interesting plugins. I like the »Pingu Sharing Buttons« a lot, and I will surely use »Off Your Site« on my website. I like the clear, simple design without any nonsense.

Which one of this month’s plugins do you like the most?

More Recent WordPress Plugins:


* You might also be interested in the following articles
Catégories: News dév web

SVG without SMIL: Google Chrome Kills Support

24 novembre, 2015 - 14:00

It should be common knowledge by now that interesting charts, illustrations and complex animations can be created using the SVG format. SVG provides three different ways of creating animations. Next to JavaScript and CSS3 animations, SMIL is another approach to making shapes move. However, with Chrome 45, Google classified SMIL animations as deprecated and will not support them in the future. Why did Google do that? What do web developers need to know now?

The History of SMIL

SMIL is short for „Synchronized Multimedia Integration Language“ and presents a simple way to animate SVG elements in many different ways. To do so, one of the SMIL elements „<animate>“, „<animateMotion>“ or „<animateTransform>“ is used as a “child” of the element you want to animate. Next to simple movements, rotation, scaling and shapeshifting are also possible.

&lt;rect x="0" y="0" width="100" height="100"&gt; &lt;animate attributeName="x" from="0" to="500" dur="5s" /&gt; &lt;/circle&gt;

The above example shows how a rectangle is moved on the x-axis via an „<animate>“ element. Although SVG animations have only gained popularity lately, the first SMIL approaches are more than 15 years old. 1999, SMIL 1.0 was passed by the W3C and in 2008, the current version 3.0 was passed.

SMIL is not only suitable for the SVG format and creation of animations. As the name already tells, the markup language is used to implement multimedia content. That’s why SMIL can also be used for audio and video formats. The HD DVD format, for example, uses SMIL to provide interactive content via HTML, CSS and SMIL.

Version 2.0 added animation options for the SVG format in 2001.

SMIL: Two’s Company, Three’s a Crowd.

Despite the simple syntax and the rather long history of SMIL, Google has decided to no longer support the markup language in its Chrome browser. Those that open an SVG graphic with SMIL animation on Chrome 45 will see a screen that says that SMIL is deprecated and that you should switch to CSS or web animations.

Tips in the Chrome Developer Tools

The reason Chrome forgoes SMIL is the lack of support for all big browsers. Neither Internet Explorer nor the new Edge can work with SMIL, and they won’t be able to do so in the future. That’s why the users of Microsoft browsers are always excluded when SMIL is used.

In addition to that, there are two other ways of animating SVG shapes. Namely the popular CSS3 animations „transition“ and „animation“ in combination with „@keyframes“ are available for the SVG format as well.

There are so called web animations for more complex animations that require calculations. These animations can be realised using the „animate()“ method of JavaScript.

The lacking Microsoft support and the existing alternatives have made Google quit its SMIL support.

Disadvantages of Relinquishing SMIL

CSS3 and Web Animations can do a lot of what SMIL can do. Simple movements on the x- and y-axis, scaling and rotation can be realised with CSS3 without any issues. However, one thing poses a problem, at least at the moment. SMIL makes it very easy to create an animated morphing between two shapes.

CSS3 and Web Animations don’t provide this option. Without additional JavaScript libraries, this morphing can not be done without either SMIL or extensive programming efforts.

What Developers Should Do

Even when SMIL is now classified as deprecated, the support is not instantly banned from Chrome. For future projects, however, other animation options and libraries such as SVG.js or Snap.svg should be used.

An Alternative to SMIL: Snap.svg

In the Google group for Chromium, there are some explicitly criticizing voices asking the Chrome developers to continue the SMIL support. Although SMIL is currently not enjoying extended usage, there is no alternative that can replace SMIL’s full scope of features.

Also criticized is the fact that the relatively simple SMIL application has to be replaced with a complex JavaScript animation. The development of the SVG topic in the next months and years and how other browser providers are going to react can not be predicted. Only time will tell.


* You might also be interested in the following articles
Catégories: News dév web

Top 10 Best Free WordPress Themes from November 2015

23 novembre, 2015 - 13:00

Fresh free WordPress themes raise the blood pressure of any user of the world’s most popular CMS. Content feels to be delivered much better from a new design. Let’s not deny it, choosing a new WordPress theme is like choosing a new lover – lots of emotion involved. That’s why we bring you the best free WordPress themes in a monthly roundup. All of the following themes are free and responsive on any screen. Need we still mention that?

1 – WPGumby

WpGumby is a theme in modern flat design and is suitable for multiple purposes. With 13 page templates, five widget areas and four template layouts WpGumby delivers a solid foundation for blogs, portfolios and even online shops as it is prepared to work flawlessly with WooCommerce.

2 – SKT BeFit

BeFit has been developed for the fitness industry but is as well usable for other purposes. Think of photography, businesses, personal websites, just about any topic desired to be presented in a dark layout will fit.

3 – WpF Flaty

As you might have guessed from its name, WpF Flaty also sports the flat design approach. This one would be great for blogs and portfolios. It comes with two sidebars and a template without sidebars as well as different coloring.

4 – Novellite

Novellite is a simple, yet attractive theme for a lot of use cases, among them businesses and portfolios. It can easily be configured through a Theme Options area in the backend. You can change the logo, the background and more.

5 – Photo Perfect

Photo Perfect is a dedicated theme for photographers and photobloggers as it has been developed with images in mind. Backgrounds and color schemes can be changed. Unfortunately, Exif is not what this theme is able to read. Seems to be not that perfect after all, but still a very attractive option.

6 – SKT Girlie

SKT Girlie focuses female bloggers. This does not block out male users, however. Each man that wants to please the girlie in him is welcome to use it, too. Girlie is open for all possible use cases but explicitly recommendable for online shops as it comes prepared for WooCommerce.

7 – Resi

Resi is the last theme any minimalist needs. Its strength lies in the presentation of images which makes it a valid choice for photographers and photo bloggers. Customize the backgrounds and the color scheme as you see fit.

8 – Colinear

Colinear is made by Automattic, the inventors of WordPress. That always comes with the promise of great code, perfect compatibility and proper utilization of the internal powers of the WordPress core. Colinear is a pure blogging theme and comes with two sidebars. Throw in your own backgrounds, colors, and headers to customize it.

9 – fYeah

fYeah is another classic blogging theme, inspired by Tumblr. It supports all the different post formats, comes with an exchangeable logo, individual backgrounds and lets you customize colors as well as add your own fonts.

10 – Hitchcock

Hitchcock is a theme for designers, photographers and just about any other creative worker out there. The only prerequisite needed is your wish to present your work in an elegant and clean way. Hitchcock likes social media, lets you change accentuation colors, is prepared for Jetpack’s Infinite Scroll and doesn’t prevent you from changing backgrounds and headers.

More Recent Themes Can be Found Here:


* You might also be interested in the following articles
Catégories: News dév web

Cartoon: The Established Web Design Agency

22 novembre, 2015 - 10:00

Have you ever noticed that people tend to actually get angry when you ask them critical things, such as if they think they can really handle the project in size and quality? What is the reason behind that behavior? I hope that it’s not what today’s cartoon depicts, though I wouldn’t say it couldn’t be – since I took notice of this study.

By the way, we have more cartoons for you here.

* You might also be interested in the following articles
Catégories: News dév web

DrawSVG for jQuery – Animated SVG Enlivens Your Website

21 novembre, 2015 - 13:00

Fortunately, the SVG format can do a lot more than just provide vector-based graphics. Animations are possible as well. With JavaScript, you can control and influence these animations in many different ways. The jQuery plugin DrawSVG allows you to draw the paths of an SVG graphic in an animation. This opens interesting ways of drawing the paths.

Requirements for DrawSVG

As a jQuery plugin, this well-known JavaScript all-rounder has to be integrated into the HTML head together with the plugin. After that, it is possible to animate the paths of an SVG graphic. These are the SVG shapes created via „<path>“ element. Line width and colour can be defined as usual, using attributes or CSS. A fill colour should not be assigned to the paths as it would not be animated and thus would always be visible.

DrawSVG uses „stroke-dasharray“ and „stroke-dashoffset“ to draw the paths. Because of that, these two attributes should not be used elsewhere.

Two States of the Animation

Since the plugin requires access to the DOM tree of the SVG graphic, the SVG source should be tied to the HTML element. A simple animation can be created by a single line of JavaScript.


The example accesses all SVG elements that are labeled in the HTML document and shifts them to the animation function „drawsvg()“. To do so, the entire graphic is faded out at first. After that, the plugin draws the single paths of the graphic by itself. To create a realistic drawing effect, individual paths are animated with short breaks in between.

The more paths the graphic contains, the more animations are created.

Adjusting Animations via Settings

The duration of the break between the starting points of the separate paths can be set individually using the option „stagger“.

var $svg = $("svg").drawsvg({ stagger: 5000 }).drawsvg("animate");

The settings are transferred over as an object literal via the selection of „drawsvg()“. In the example, the break is set to five seconds. The duration of the animation, which is set to one second by default, can also be altered in the settings.

var $svg = $("svg").drawsvg({ stagger: 5000, duration: 10000 }).drawsvg("animate");

Additionally, there is the option of using a callback feature that pops up when the animation is finished, and the full graphic becomes visible.

var $svg = $("svg").drawsvg({ callback: function() { alert("Animation is finished."); } }).drawsvg("animate");

In the example, we set up a simple alert when the animation is complete.

Drawing Graphics on Scroll

With a few additional lines of JavaScript, you can have the SVG graphic drawn on your visitor’s scrolling your website. To do so, the SVG element has to be fixed („position: fixed“) using CSS so that it is always visible. The page needs to be scrollable of course which you can achieve by defining a sufficient height with CSS. The following lines make sure that the graphic is drawn by scrolling down.

var $svg = $("svg").drawsvg();   $(window).on("scroll", function() { $svg.drawsvg("progress", $(window).scrollTop() / ($(document).height() - $(window).height())); });

Defining the total duration of the animation is of course superfluous this way because the animation depends on the speed of scrolling. The faster you scroll, the faster it is drawn. The drawing disappears when scrolling in the opposite direction again.

Using DrawSVG with Paths and Masks

Another way to use the plugin is the combination of paths and masks. For example, a „<mask>“ element can also contain a path when this approach is used. When the path is drawn so that it covers the entire mask area due to its massive line strength, you can easily fade in nice images or other elements.

Two States of a Masked Animation


The usage options of DrawSVG are varied. Applying the plugin is easy. Beautiful effects are achieved despite the fact that there are only a few options. The documentation is very clear. A couple of demos show examples of what’s possible.

DrawSVG is being developed by Leonardo Santos from Porto Alegre and is provided on Github for use and participation. The plugin is free for commercial purposes also as Santos distributes it under the liberal MIT license.


* You might also be interested in the following articles
Catégories: News dév web

Increase Your Productivity: How to Write Faster

20 novembre, 2015 - 10:00

Those who like to write a lot might have already asked themselves the question whether by any means they could have written more posts in the same amount of time. This question, driven by the desire to increase one’s productivity, is not just interesting, but quite important to people that have to write a lot in their job. For freelance journalists, it is even a determining factor of their honorarium. The more they can produce in a given amount of time, the more money they will earn – implying a fitting commission situation. In this article, I will give you some advice that originates from daily practice and might help you to spend less time per written article.

A Few Words at the Beginning

Some of the following productivity tips might sound a little profane, and you might doubt if they can help. However, I assure you that every single one of these tips stems directly from practice and can help you to write faster as well. Often the most obvious things are overlooked too quickly.

0. Write Down all Article Ideas

In a lot of cases, you forget great ideas for articles because you didn’t note them immediately. Not only if this rings true to you, should you create an idea book that you keep with you at all times. When sitting down to write an article, you will instantly have a great idea to prepare for and elaborate on.

1. Prepare Yourself Well

Before starting to write, collect all the significant sources for your planned article. Think about the structure of the post for a couple minutes. Also consider possibly needed image material, download it and store it on your desktop for later use.

2. Set a (Daily) Deadline

When you set a time limit for yourself, you will automatically be done faster as you have a temporal aim. You know when you need to be done, and thus, you will hurry up more than you would without said time limit. You surely heard about that law that states that any task will always take up the entire time slot there is for getting it done. Narrow down the time slice and you’ll see that it works.

3. Start with the Second Paragraph

The first paragraph of a blog post is always crucial. It is the lead paragraph and used to describe the topic of the article. This is why many people take a lot of time trying to write a good first paragraph. Start with the second paragraph and write the first one at the end so you are still in the “flow” which allows you to complete the text faster.

4. Productivity Enforcer: Write Against the Clock

This works great for me. I use a timer or countdown app while writing. Before starting, I think of a period of time in which the respective article has to be finished, then begin the countdown. After the set time has passed, the app emits a loud sound. I am still working on getting things done before the sound reaches my ears. But I have already improved, so try it for yourself.

Timer App for Windows | Timer App for Mac OS X

5. Find Your Most Productive Hours

Not every human can be on the same level of creativity and pace at any time. Some people – among them an impressive amount of top managers – are the most productive in the early morning. Get up early when it’s easy for you to write in the morning. When you’re getting fit in the evening, use those hours for writing. It’s basically totally up to you. Write the night through if you can. But get in line with your own rhythm.

6. Write About Things you Like

Many people are faster writing about things they like than writing about things they don’t. I can relate to this phenomenon looking at myself. Articles on topics that I like are done faster then texts on subjects that I’m not fond of.

7. Keep Your Texts Short

While writing, ask yourself the question whether the sentence can be made more comprehensible with less words. If possible, write short sentences. Imagining the necessity to write every sentence for Twitter with only 140 characters can be helpful as well. Keep in mind: If a story can be told in 3 paragraphs, you should tell it in 3 paragraphs. Does it not sound great to be able to reach a state of increased productivity by doing less?

8. Write, Don’t Edit

Just start writing and don’t worry about your spelling; just write until you’re done. It has proven to be more efficient and faster to correct spelling and expressions after the article is completed. Also, after the article is done, it’s time to recheck facts and add further sources if necessary.

9. Turn Off all Disturbing Factors

Close the door, mute your telephone and your smartphone. The email client should also stay closed. When you can not get disturbed, it is easier to reach the “tunnel condition” aka “the flow”; a condition, in which writing ideally happens by itself.

10. Try Voice Recognition Software

Many humans can talk a lot faster than they can type. That’s why the idea of using a voice recognition software to create your articles much more quickly isn’t that far fetched. Jon Morrow from Copyblogger uses this kind of software for every text he has to write. I have to admit that I failed at every attempt to get that working for me, however. I already spent hundreds of dollars on software such as Naturally Speaking and the likes but always returned to profane typing after a very short period.

11. Don’t be a Perfectionist

Perfectionists have a hard time in the writing business. The more often they read a text, the more they feel the desire to change the text over and over. I recommend not doing that. Stand for what you’ve written. The perfect text doesn’t exist.

12. Bonus: A Concluding Infographic on Productivity

Eight secrets that (are supposed to) make you write faster.

Image Source: 8 Secrets to Writing Faster Blog Posts


In today’s article, we have given you 11 good productivity tips and an infographic to help you write faster and more efficiently. For me at least, these tips prove helpful on a daily basis. As a result, I can now do almost twice the work in the same period. My productivity has increased big time. What advice works especially well for you?

Related Links


* You might also be interested in the following articles
Catégories: News dév web

WordPress: This Checklist Helps you Optimise your Articles

19 novembre, 2015 - 12:00

Have you already published that blog post and just noticed that you forgot some important aspects? We all make mistakes when writing our articles. It happens a lot that you forget something and get angry at yourself for clicking “Publish” too early. Highly successful bloggers always use a checklist that contains the most important aspects for that exact reason. You can then simply go through the list, and will never forget anything again. Today, we will show you how you can easily create a checklist like this.

Why You Need a Checklist for Your Blog Posts

As a blogger, you have developed a particular process that you go through when constructing and publishing your articles. When you work in a team, like I do here at Noupe, you are lucky, as there is a chief editor that will look over your articles before they see the light of day.

However, when you are working on your own, mistakes are made much more quickly. For example, articles without a featured or any post image at all go live, or you forget to check the spelling to prevent at least the most obvious mistakes. Another very popular mistake is publishing an article without optimising it for search engines aka Google. The bigger your project is, the more mistakes can be made.

But it doesn’t have to be like that. Think of how you usually make sure you achieve all the tasks you have to achieve. Don’t you do that using a checklist? Also in WordPress we can have a list that helps you work more efficiently. Let’s look at this list together.

Creating an Article Checklist in WordPress

The »Pre-Publish Post Checklist« Plugin

First, you need the plugin »Pre-Publish Post Checklist«. You can download and install it the usual way from Don’t get scared off because the last update of the plugin happened a year ago. It still works on the latest WordPress version without any issues and should in the future as it does not add any exotic functionality. After installation and activation, you will see the following screen:

There you need to tick the item “Prevent Publishing”. This setting prevents you from publishing (or scheduling) the article when there are still important things missing. Second, you click the button “Add Checklist Item”. This allows you to enter the items on your checklist. Of course, you can also delete aspects from your list when you don’t need them anymore. To do that, just click the “Remove” button on the right.

After adding the most important aspects to your list, you can finally use it. All you need to do now is write a new article.

The widget boxes on the right side of your screen, next to the blog post editor, can be ordered via drag and drop, so move the box with your new list wherever you want it to be. A good idea would be having it right atop the others.

Working With the New Checklist

Using this checklist, you won’t be able to forget anything ever again. By the way, the list can always be altered or extended when your requirements change.

Simply write your articles just like you always do. Then, look at your checklist to see if you forgot something. When you try to publish the post without ticking all points on the list, you will quickly realise that it doesn’t work.

Every single aspect needs to be ticked before you can publish an article. This also works with scheduled pieces but not with drafts, obviously.


In my opinion, the »Pre-Publish Post Checklist« plugin is one of the most useful plugins of them all. This applies to people that write a lot and under pressure. You can easily forget something but still publish. This small plugin fixes the problem. Only “excellent” articles can be scheduled and published. Given that you didn’t forget to put a significant point up on the list, however ;-)


* You might also be interested in the following articles
Catégories: News dév web

WordPress Booster: Monstroid, the New All-in-One Theme

18 novembre, 2015 - 19:00

WordPress is the most interesting content managing system of them all as it allows anybody to create a personal website without needing any programming knowledge. The official theme index currently contains more than 2,000 free themes that enable the user to change the design of their website with ease. Additional features are provided by the plethora of free plugins. Those interested in more design options and better performance, in general, can choose out of a pool of premium themes whose scope of performance is steadily expanding. Today, I want to present you the new Monstroid Theme by TemplateMonster, which promises a never seen scope of features.

Monstroid: WordPress Theme on Steroids

When purchasing the Monstroid Theme, you are getting WordPress on steroids. At least that’s what TemplateMonster advertises. According to TemplateMonster, all things imaginable are possible using this theme. Monstroid is said to contain a never before-seen scope of features. Thus it is supposedly always the right choice, no matter if the user wants to create a personal blog, a business website or an online shop.

All the necessary features are already included. Individual child themes for Monstroid can be installed with just a few clicks. Monstroid and the available child themes are always responsive and thus adapt perfectly to every screen they are displayed on.

What Monstroid Has to Offer

An Extract From the Feature Scope
  • White-Label-Plugin, to supplement the WordPress-dashboard with personal menus and logos
  • Drag-and-Drop-editor for easy designing of the frontend and backend
  • The popular mega-Menu
  • A style-switcher for the frontend, to allow fast and simple switching between colour schemes.
  • Monstroid-Wizard, to install theme components with a few clicks
  • A slider with dozens of options for a visually attractive presentation of the user’s contents
  • Team introduction, portfolio and testimonials
  • Shortcode Template Editor allows users to quickly create shortcode templates
  • Unique content grids, charts
  • A complete social-media-approach
  • A ranking/rating-approach, to create – e.g. – product reviews
  • Seven particular, new Widgets like Cherry Twitter Timeline, Cherry Team, Cherry Instagram and so on
  • A solution for the easy creation of diagrams is also included.
  • Monstroid is prepared for the online-shop-plugin WooCommerce
  • Integrated Google-Analytics-plugin
  • 50 royalty free images
  • Google Maps with premium-features
  • Google Fonts can be used
  • Preparation for BuddyPress and BBPress
How Much Does the Monstroid Premium WordPress Theme Cost?

The Monstroid Theme costs 79 US-Dollar or 70 Euro per website. After the purchase, it offers lifelong free support as well as updates – all for this – in my opinion – reasonable price.

The Installation of the Monstroid Theme

Monstroid is installed per plugin, the so-called Installation Wizard, which is one of the many unique features of Monstroid. The plugin can be downloaded after purchasing the theme. The installation is relatively straightforward. After that, the following message will be shown:

Next, the user has to enter the activation key that has been sent via e-mail.

In the next window, the installation of the Monstroid Theme can be chosen. TemplateMonster recommends to download the Monstroid main theme first, as a child theme can be added at any time afterwards.

Following this, there’s the option to install the Monstroid example contents alongside an appealing theme.

This step is helpful when trying to get an impression of the diversity of features. Afterwards, the user receives a website with an appealing business theme and useful content. This combination outlines the possibilities of the Monstroid theme solution. The theme with the example content installed looks like this:

First Steps Using the Monstroid-Theme

After successful installation the default theme of the Monstroid solution is ready to use.

The Monstroid default theme is not exactly what you call beautiful. This definitely needs to be worked on. Thus, the next step should lead the user to the installation of one of the well-designed child themes. Using “Tools => Monstroid Wizard” will get you to the installation surface of the child themes.

Here, you can currently choose between 18 child themes. According to the developer, there will be 15 more, free themes every month.

Theme Options, Article Options and Shortcodes

The feature scope of the Monstroid website solution is already enormous. You get a lot of features for the money you pay. When setting up a development page with Monstroid, you can work well with all the different features and get used to them completely. However, even inexperienced users can understand the most relevant options with a good chunk of openness. That’s why it is relatively easy to set up a website with Monstroid.

Under “Cherry => Options“, you’ll find the most relevant theme options.

There is a big amount of settings in the theme options which is a big advantage compared to other solutions, as it is not as difficult to create a personalised website with all the parameters at hand. Take some time to try all the settings and you will quickly find out that appealing sites can be created in just a few steps.

The Article Options

There are a plethora of choices for every single piece to achieve a satisfying result. Personal layouts can be defined per article. The articles can then contain altered sidebars or other options like boxed layouts. Custom headers with individual background images and colours can be created. Grid options can also be set per article or page.

The Drag-and-Drop Article Generator

Using the MotoPress Drag-and-Drop generator allows you to create appealing designs with many layout elements for the article or the page. A comfortable well thought-out surface helps you achieve the desired goal fast.

After clicking the generator button it takes a moment to load. You’ll need to be patient here. After completion of the loading process, this is what you’ll see:

In the options menu on the left side, you will find a lot of elements that can be used to design your article or page via drag and drop. Just choose the desired element and drag it to the center of the field. After that, more options will be shown. I have chosen a portfolio for the following screenshot. When saving the contribution or when clicking the preview button in the top right corner, you will see a live preview of the results.

The Shortcode Generator

For standards WordPress articles, there’s the Shortcode Generator, which allows the user to touch up their articles. Clicking the apparent “Insert Shortcode” Button, which is next to the button for adding files, shows the many offered options.

The scope is tremendous. I don’t know of any free shortcode plugin that offers that many features. Another useful aspect is that it is possible to search through the shortcodes which allows the user to achieve their aim faster in some situations.

The Developer Options

TemplateMonster also kept the developers among the users in mind while building the Monstroid Theme.

Unique Features:

  • Shortcode Template Editor – This tool allows you to create and use an unlimited amount of shortcodes for the design of your website.
  • Static Area Builder – Static Area Builder is a drag-and-drop way to arrange your header and footer elements (logo, banner, navigation bar, etc)
  • Dynamic CSS allows for the addition of more dynamic traits using a syntax similar to SCSS –  with variables, mixins, operations and functions.
  • CSS Minifier – The specified compiler can condense CSS files and increase the page’s performance this way.
The Developer Options of the Cherry Framework

Custom options can also be set on the options page of the Cherry Framework.


TemplateMonster’s Monstroid Theme keeps all the bold but true promises made in the advertisement. During usage, it becomes evident that more than a dozen of WordPress developers have participated in the development process. Everything is very well thought-out and the modular structure allows the user to easily deactivate not needed functions as they are provided by either specific tailor-made or third party plugins. Every little detail has been paid attention to. There’s even an included cookie notification to support international data protection laws.

The scope of features is vast. That’s why it takes a while to get used to. However, the results are more than satisfying. As TemplateMonster even offers free support via live chat, there is nothing to be afraid of.

Should you decide to buy the Monstroid theme between now and the end of the year 2015, make sure to benefit from the following code and save 30 percent: MONSTROID30NOUPE

Related Links


* You might also be interested in the following articles
Catégories: News dév web

Online Advertisement and HTML5: New Standards to Replace Flash

18 novembre, 2015 - 14:00

At the beginning of the era of online advertisement, animated GIF was very popular. Afterwards, it was replaced by the Flash format for a long time. While Flash is rather irrelevant in today’s web development, online advertisement has taken a while to replace Flash as the standard for banner advertisement. This is not completely incomprehensible as Flash has quite a few advantages for advertisers. The format is space-saving, can be handed out in one single file and does not require a lot of browser compatibility testing as a Flash banner will apparently work on any browser that Flash works on. However, Flash doesn’t run on every browser anymore. Of course, this is a problem for the ad industry.

After Apple and Google have decided not to support Flash on mobile devices, it was obvious that online advertisers, particularly on the mobile market, had to react – especially since the share of mobile internet usage is steadily increasing.

Own Standard for HTML5 Ads

Since the advertisement market, in particular, is dependent on standards to be able to display ads on many different websites without complications, there are specific directives by now that decide how HTML5 ads have to look like technologically. The Interactive Advertising Bureau (IAB) has published guidelines that set specifications for HTML5-based banner advertisement as an international standard. Some national institutes have already elaborated upon these standards and defined them more precisely for their respective markets.

As, in contrast to Flash, HTML5 banners can not be delivered as a single file, the guidelines decide which files need to be included. „index.html“ as the base is necessary. Besides that, CSS and JavaScript data, as well as images and videos can be parts of an HTML5 ad.

An HTML5 banner is delivered as a ZIP file that contains all the data. There are some exceptions, however, for example when files are loaded externally, like a video that is integrated from an external source.

File Sizes: The Smaller, the Better

The same that applied to the GIF and Flash formats applies to HTML5 ads. Ad formats need to have small file sizes to reduce their loading time. That’s why graphics should be compressed as well as possible. There are plenty of compression tools for JPEG and PNG files that can save a couple additional kilobytes. Every kilobyte counts in online advertising.

You should leave out comments and other unnecessary information in the HTML, CSS or JavaScript source. You can also save some space by forgoing word wraps.

No Flash, Many Advantages

Looking at the features that CSS, web fonts and SVG come with shows that there are almost no disadvantages regarding design options when forgoing Flash. Animations, own fonts and complex graphical elements, as well as videos, can be used. By now, everything that has been developed around HTML5 replaces Flash almost entirely.

In addition to that, HTML5 ads offer even more advantages. While Flash banners have a set height and width, HTML5 banners can be constructed responsively. This way, they can adapt to the respective screen resolution. Google AdSense has been using the options for responsive advertisement on its ad service for a while now.

One reason big websites stay away from responsive design may be the non-existing support for those banner formats that still have a fixed size. Although a lot is created in HTML5, responsitivity in banner ads is not widely spread yet.

HTML5’s Few Disadvantages

Switching to the HTML5 standard does not only bring advantages. There are definitely disadvantages for advertisers. For example, the development costs when using HTML5 are higher because, in contrast to Flash, HTML5 ads need to be tested on different browsers and browser versions. Even though there is an HTML5 and CSS3 standard, you can not rely on the assumption that every browser displays HTML5 ads the same way. Especially older versions have to be considered.

Those that want to support any browser – capable of HTML5 or not – need to provide a fallback solution. In the easiest case, this could be a static image that is displayed instead of the HTML5 banner.


Most likely, the minority of internet users has noticed that ads are mostly shown in HTML5 format today. That certainly means that the difference to the Flash format is not that big visually. With HTML5, advertisers and developers have more options, but also – at least for now – more work to get done.


* You might also be interested in the following articles
Catégories: News dév web

Good Sliders, Bad Sliders: Things to Consider Using Them

17 novembre, 2015 - 15:00

The way websites are developed and are being visited has changed drastically over the past years. Mobile usage is growing and technologies such as HTML5 and CSS3 make things possible that were impossible or difficult to achieve before. But one thing has proven its value for years: good ole content sliders. They have two major advantages. For one, content can be placed in an efficient way so that they are visible without scrolling. Second, they stick out from the rest of a page due to their animated transitions. But content sliders are not always good – especially from a visitor’s perspective.

Creating Sliders With CSS3 Animations

Even before CSS3, there were content sliders. Due to the lack of animation possibilities, the content was realised via JavaScript and the „setTimeout()“ method. The slider’s content was newly placed every round. This approach still works today, but it is not optimal because the repetitions via „setTimeout()“ are fixed. But an animation should much rather be controlled depending on the framerate of the browser.  

That’s why animations should always be defined via „requestAnimationFrame()“ or via CSS3 animations in combination with JavaScript. This enhances the performance especially on mobile devices with restricted power. Many recent sliders like Sequence.js are using modern technology and are responsive as well.

JavaScript Library „sequence.js“ for Content Sliders

Those who prefer programming their own solutions should stay away from the old „siteTimeout()“ or „setInterval()“ approach.

Using Sliders Depending on Content and Use

The use of a slider is just as important as the technological aspect – especially for the visitors of the website. It is understandable that the host of a website wants to display as much content and draw as much attention as possible. Yet, this is not always in the interest of the visitor.

While sliders that exclusively show images work without any issues (most of the time), the ones containing text are always a little problematic because the content often disappears before the user is done reading. This is why you should consider a few things when using sliders with text.

Fontshop: Clear Content Slider With Generous Images and Little Text

The text in a slider should be kept short – a teaser or a short image title at best. Ideally, the duration of displayment is enough to be able to read the whole text. When the user is hovering over the content slider with the mouse, you should make sure that the animation stops and the currently displayed content stays so nobody will complain that the slider is faster than the eye can read.

Once the visitor has taken over control of the slider manually by scrolling a page back or forth, you should prevent the animation from continuing as you can assume that the user prefers steering the slider himself.

Keeping the Overview

While you can store a lot of content in a slider and that sure does save a lot of space, this happens at the expense of clarity for the user. When the content is placed above, below or next to each other, the user can see all the content. In a slider, however, the user only sees one area at the same time which means that the other content is hidden.

German Magazine Content Slider With Three Articles

A slider with three different contents is rather clear. Everything above that can cause the problem that the visitor is likely to miss out on interesting content in the slider.

Not Enough Attention For Other Content

As much as a slider draws attention towards itself, as much does it cause other content to be moved into the background of a page. Even when a visitor takes a look at the links outside of the slider, the constant animation can be distracting.

This is why you should generally use sliders carefully. They aren’t as distracting on overview pages made solely to give previews on content. However, on pages that contain actual content, they are a disturbance and should not be used. If you don’t want to forgo sliders on these pages, you should at least disable the automatic animation and only allow animation upon user interaction.

Optimising Sliders For Mobile Devices

Websites are visited from mobile devices more and more often. For this growing audience, not only a responsive layout, but also adapted controls for mobile devices should be implemented when using content sliders. While the mouse and arrow buttons are used on desktop PCs, the smartphone is handled exclusively with the fingers.

Content Slider Swiper

Here, you should offer the opportunity to use the common swipe gesture to use the slider. Pay attention to this feature when choosing one out of the many slider libraries. Keep in mind that right after responsivity, gesture controls are a very important aspect.

Content sliders like Swiper for example forgo arrow buttons entirely. In return, a gesture control is emulated via the mouse on desktop PCs. This means that you do the classic swipe gesture with a pressed mouse button to scroll through the pages of a slider.

Content Slider FlexSlider

The FlexSlider is also responsive as well as suitable for mobile devices with gesture controls.


Content sliders should always be created from the perspecive of their use for the visitor. This applies for webdesign in general. Clarity and operability are important aspects you should take into consideration. Many ready-made content sliders can be altered individually and have a discrete design and animation. Take a look at a few of them:


* You might also be interested in the following articles
Catégories: News dév web

Modify Fonts With JavaScript and Plumin.js

16 novembre, 2015 - 15:00

Thanks to CSS, there are plenty of options to edit text. You can also use custom fonts via web fonts. The JavaScript library Plumin.js goes one step further. It allows you to manipulate a font within a website. Symbols can be replaced by individual shapes.

Choosing a Font and Manipulating Letters

While most JavaScript libraries require you to access the HTML elements that you want the library to be used on, this is not the case for Plumin.js. Here, a font that you want to manipulate with the library is addressed. The made changes are in effect on all usage areas of the font in the document.

First, an invisible HTML5 drawing space, that is internally used by Plumin.js, is created.

1 <canvas id="plumin-canvas" width="1024" height="1024" hidden />

In the next step, the library gains access to said drawing space.

1 plumin.paper.setup("plumin-canvas");

Afterwards, a function is created. With this function, the font and symbols that will be replaced, as well as the shapes that will replace the previous symbols are defined.

1 2 3 (function(p) { … })(plumin)

Everything that happens after that has to located within this function. First, the name of the font that you want to alter has to be entered.

1 2 3 4 5 var schrift = p.Font({ familyName: "NameOfTheFont", ascender: 800, descender: -200 });

„familyName“ defines the name of the font. Optionally, you can enter values for the „ascender“ and „descender“ of the font. This helps with the positioning of the shapes.

Next, we will choose the symbols that we want to replace with custom forms. To do so, a name is added to every symbol. Via „unicode“, you choose the symbol and via „advanceWidth“ you choose the width of that symbol.

1 2 3 4 5 var A = p.Glyph({ name: "A", unicode: "A", advanceWidth: 500 });

In this example, the letter A is added to the variable „A“. In the third step, we lay out a shape that is meant to replace the symbol.

1 2 3 4 5 6 7 var formA = p.Path.RegularPolygon({ center: [250, 350], sides: 3, radius: 350 });   formA.rotate(180);

Here, we are creating an equilateral triangle via „RegularPolgyon()“. The shape’s center is defined via „center“, the number of sides via „sides“ and the radius via „radius“. This triangle is then rotated per „rotate()“, so that the peak points upwards.

Following that, we asign the shape to the letter A.

1 A.addContour(formA);

In the last step, we will add all edited letters to the font.

1 font.addGlyphs([A]).updateOTCommands().addToFonts();

Now everytime the font is used in the document, the large A is replaced by the triangle that we constructed via Plumin.js.

An Example for a Text Altered with Plumin.js

Nice Toy That is Useful in Suitable Projects

Of course, Plumin.js can be used as a toy as it is done on the library’s website. However, it can also be used to replace certain symbols with custom icons to forgo a web font. Plumin.js is distributed under the MIT license and doesn’t require additional JavaScript libraries such as e.g. jQuery. The MIT license allows for free use for personal and commercial purposes, including customer projects.

The documentation on the website is quite lacking. However, there are some good examples shown and added to the download package to give you a good insight into the library.


* You might also be interested in the following articles
Catégories: News dév web

Cartoon: Now, Could We Make the Logo Bigger?

15 novembre, 2015 - 10:00

People love a lot of things. But what they love most is the sound of their voice, their name being spoken by others, their stories being told by themselves – generally anything that is closely related to them. A company owner loves the name of his company, its logo – generally anything that is closely related to it. Is it any wonder that he demands you to do things like what the company owner in today’s cartoon demands?

By the way, we have more cartoons for you here.

* You might also be interested in the following articles
Catégories: News dév web

State of Web Design: Chile

14 novembre, 2015 - 15:00

In our series on the state of web design in countries throughout the globe, we are proud to present you the design industry of Chile today. We always focus nations that wouldn’t immediately spring to mind when one thinks about design competence. I had never heard anything about Chilean design before we decided to check their assets for our article series. Be surprised or not, design in Chile is just as contemporary as it is in Europe. Check out our 30 examples of Chile made website designs.

Historias Austral

Creator: Islandia agency

Christian Andrada

Creator: David Bastian

LG G4 Release site – Night tour

Creator: Digital MEAT

Digital Meat

Creator: Digital MEAT

Magic Jenas

Creator: Agencia Raya

L200 Generation

Creator: Promoplan

Museo Interactivo Audiovisual

Creator: Digital Meat


Creator: Sebastián Águila


Creator: Carlos Varela


Creator: Bestia

Tu Corte

Creator: Agencia Fiebre Chile

La Panadera

Creator: zara*beatriz

Power Peralta Dance Duo

Creator: Lovit Labs

Lovit Labs

Creator: Lovit Labs

David Bastian

Creator: David Bastian


Creator: Blacksheep Social Media Center, Carlos Molina

Carlos Molina

Creator: Carlos Molina


Creator: Mitocondria´s Team

Casa Silva

Creator: Mitocondria´s Team

Tarjeta Cencosud y Conaf

Creator: Mitocondria´s Team



Recetas Unimarc

Creator: Sysla Osorio

90 Helmets and Mask

Creator: Sebastian Gonzalez

REINØ/ Juego de Naipes

Creator: Jorge De la PazCoraje Estudio

Characters Design for Video Game

Creator: New Fren

Personal Branding

Creator: Javier Cornejo

Plant Bottle/Coca-Cola

Creator: Oscar Ramos

Laika Free Font

Creator: Rodrigo Araya Salas

Signos de interrogación

Creator: Manu Prado

Dos Arboles

Creator: Jorge De la Paz

* You might also be interested in the following articles
Catégories: News dév web

How to Optimise PDF Files for Search Engines – and Visitors Alike

13 novembre, 2015 - 15:00

HTML pages are not always better than PDFs. In certain areas of application, PDF files are generally preferable. When it comes to allowing the user to print something or scrolling through a catalogue, PDF files have their advantages. However, there is the problem that search engines are having a hard time crawling through PDF files. Additionally, the readers sometimes don’t know how to react to this kind of content. There are a couple ways to upload and share PDFs, either on their website or through a third-party provider service like FlipbookPDF. How you end up tying in the PDF files is your decision. In this article, we want to give you some advice that is supposed to help you create successful PDFs for search engines and viewers alike.

PDF Search Engine Optimisation

PDF files should never replace HTML websites since they rarely rank well for important keywords and it usually takes too long until the data has loaded. PDF files are larger than HTML files with the same content. However, when the PDFs are of high quality and contain properly optimised content, they will also be found well via Google. In the following, we will deal with the optimisation of PDFs for search engines.

Always Create the PDF Files in a Text Editor

Creating PDF files in a text editor allows for the crawling of its data and thus the inclusion in the ranking. Search engines also have trouble reading images and graphics which is why it’s important that the text is actual text and not added as text on graphics.

There are many good and comfortable text editors. HTML editors can be used as well. Recently, we have introduced you to HTML editors for Windows and for Mac OS X. Those who own a Mac, can also use the Markdown writing program Ulysses.

Filling in Description and Characteristics

Before saving your PDF, you should fill all important fields like title, author, subject and keywords. That maximises the chances of Google crawling and ranking your ressource.

Follow a Few Simple SEO Rules

When creating your PDF, you should keep an eye on some simple SEO rules. Content should be written around the keywords that you want to have ranked. There is no difference to normal websites. Also, the PDF should have a keyword-related file name as well as keyword-related titles and subtitles.

Avoid Duplicate Content

The SEO rule that prevents you from duplicating content also applies for PDF data, so avoid to duplicate content in HTML and PDF files. Search engines are not able to tell the difference and thus aren’t able to know which of the two ressources is important for the ranking.

Optimise Images and Graphics

Images and graphics should always be optimised before being integrated into a PDF. The image material should be cut to the correct, sufficient size and optimised for use on the web. Here, programs like Photoshop or Gimp can be used. Other options are online tools such as TinyPNG and JPEGmini. Another important aspect is the correct completion of the Alt and Title tags of the pictures. This enables the search engines to recognize and index your photos in the PDF. Alt and Title tags should accurately describe what can be seen on the graphic and what it is used for.

Constructing Internal Links to the PDF

To generate more traffic to the PDF and increase the credibility (and the rank) in search engines, you should create a couple internal links to the PDF. The PDF itself should also link back to relevant pages of your website so that the readers can easily navigate between website and PDF.

Important: Use SEO Friendly Titles and File Names

A descriptive title and a good file name that contains keywords are another important parameter. Just like the title of an HTML page, the topic of the document should be evident from the title. With a descriptive title, you make sure that the PDF doesn’t show up as in the following and that nobody besides you knows the content.

Creating User Friendly PDFs

After optimising your PDFs for search engines as good as possible, you can start polishing them for a positive user experience. First, work on the loading time of the document to prevent readers from cancelling the download prematurely. The document should also be found after the download and besides a clear file name, there is another way we can achieve this.

Pay Attention to a Small File Size of the PDF

Keeping the data size as small as possible is important. Chances of the download being cancelled are significantly lower when the file has been polished in that regard as it loads much faster. Thus, it is recommended to use as few graphics and images as possible and to tweak the used images before tying them into the PDF.

Let the PDF Open in a New Tab

Some users simply can not find downloaded data on their PC. Opening the PDF in a new tab instead of downloading it seems to be a good solution. As soon as the file has opened in the new tab, the user can download it from there. As the browser doesn’t need to be left in order to read the file, your chances of the website being used in the future rise.

Consistent Branding

A consistent branding of your PDF files is the key to more successful PDFs. The use of your corporate design is mandatory in the creation of PDFs as visitors can instantly see where the downloaded file is from. In addition, the file gains visual credibility in comparison to a normal PDF.

Design Your PDFs to be Navigable

Interactive and easily navigable PDFs satisfy the readers. Simply create a PDF in the way you would want such a file to be. When you can search through a PDF or when it offers a working forward and backward navigation, users are more likely to read the whole document. Perfectly designed PDFs can also increase the reputation of a website as readers reward effort.

One Last Hint

Make sure your PDF files are write-protected. When you miss out on that, anyone can edit your data, add own links or upload it on their own website. Without write-protection, anyone can use your work and pretend it was theirs.


Sometimes PDFs are the best way of giving information to your target group. When you pay attention to the above-mentioned simple SEO and usability rules, the chance of your PDFs being ranked higher and being more popular increases.

Related Links * You might also be interested in the following articles
Catégories: News dév web

15 Free Google Tools You Should Use

12 novembre, 2015 - 18:00

Google offers much more than just its well-known search engine. A wide range of free tools can make your life as a blogger or webmaster a lot easier. Google offers tools to improve the SEO characteristics of your website, others to improve your productivity and some even to earn money. In this article, we will introduce you to some of the best free Google tools that you should know and use.

1 – Google Analytics

Google Analytics is the most popular service for website analysis. It helps you understand and analyse the visitor flow on your website. By now, the code that has to be integrated into your website can be adjusted to meet even the strict German data protection regulations. It only needs to be extended by a small snippet so that no IP adresses are collected. Here is an example:

2 – Google Search Console (former Webmaster Tools)

Google Search Console is one of the most important tools for a webmaster. Here, you can discover how Google sees your website, but the tool offers much more information. The Console shows you errors on your website, which keywords were used to access your website and much more. The large scope of features makes the Console one of the must-haves for website owners.

3 – The Custom Search Engine

The circuitiously named “Google Custom Search Engine” is a tool that you can use on your own website. Here, the Google search replaces the search option of your website and offers the well-known precision of the Google search engine right on your blog. Additionally, you can earn money off of the Google search engine as some of the search results are Google Adsense advertisements. Many websites use the Google search, we here at Noupe, for example.

4 – Google Tag Manager

The Google Tag Manager is a really useful tool. Many websites use a couple different analysis softwares to be able to test and analyse the website in a very detailed way. However, with every added software comes a JavaScript snippet that has to be integrated into the website and each snippet loads an external script. This will get messy, annoying and slow after a while. Do you see where I’m going with this? The Google Tag Manager connects all snippets to one single code snippet which then only needs to be added to the website. Without having to touch the code in the website again, you can now add or delete further analysis providers.

5 – Google Page Speed Insights

This tool helps you optimise your website’s speed. Enter your (or any other) URL, click “analyse” and you’ll instantly receive the results. These are then divided into results for mobile and those for desktop. The higher the score of the website the better. The improvement suggestions that you receive after the test are really useful. This way, you can build your optimal, fast website step by step.

6 – Testing Optimisation for Mobile Devices

With this tool, you can quickly detect if a certain website is optimised for mobile devices. Nowadays, mobile sites are gaining importance as a lot of visitor traffic is coming from tablets and smartphones. These users should be offered a very well optimised website. That’s why a test with this tool is basically always useful. After the test, the tool provides extended information.

7 – Google Adwords Keyword-Planer

The Adwords Keyword Planner is a really good tool even for people that don’t use Adwords advertisements because it allows you to find out which keywords and keyword combinations are searched for in Google search. When working with this tool, you can optimise your blog entries much more precisely according to the keywords that are actually searched for.

8 – Google Insights and Trends

Google Insights offers a suitcase full of tools that give you an insight into Google search. Track the newest search trends and use Google Correlate and Google user surveys via Google Trends. Simply enter a keyword to track how the term develops. Compare a keyword to another, to see how the user interests develop. Overall, this tool collection offers a really good opportunity to optimise your articles for Google search effectively.

9 – Google My Business

Google My Business helps your company to a better online visibility. With Google My Business, your company is more present on the internet. Your customers can easily find your website and your company in Google search, Google Maps and on Google+. Once entered, you will be found throughout all Google services.

10 – Google Drive

Google Drive is the direct rival of Dropbox, so basically just another cloud provider. Here, you receive 15 GB of storage when signing up for a free account. You can then save all files like photos, videos and other data. These can then be shared at any time and you can access your files from any place in the world. There is an app or application for every device you use.

11 – Google Photos

In case you want to confide your photos to a company, meaning you want to save them in a cloud, you should definitely consider Google Photos because Photos gives you unlimited storage for your photos. One restriction: When you want to save your photos in original size, the photo storage is calculated against your Google Drive quota (meaning a maximum of 15 GB in the free plan). However, when saving your photos in high quality, you have unlimited storage. High quality equals about 16 megapixels.

12 – Google Alerts

Alerts are a handy thing. Alerts are alarms that can be set up specifically. With Google Alerts, you can let yourself be informed when your company or website is mentioned somewhere in the depths of the web.

13 – Google Keep

The best way to keep and organise your blog ideas is a good notes app. Google Keep works on your smartphone, tablet and computer. Content that is added to Google Keep is synchronised on all of your devices so that your memories, plans and ideas are always available. There are apps for Android, iOS, Chrome and as a web version.

14 – Google Fonts

Google Fonts has developed to become one of the most important ressources for designers. By now, you can choose more than 700 web fonts to use on your website. This way, the boring default fonts can easily be exchanged for a web font.

15 – Google Hangouts

Google Hangouts is a service that allows for easy communication. You can send text messages and have video or phone calls via Hangouts. Group chats are one of the special aspects when it comes to text messages. With Hangouts on Air, you can stream live conversations worldwide. One app per device is needed. These are available for Android, iOS and Desktop.

Some Extra Tools

Of course, there are more tools in the Google universe. Presenting all of them would blow the scope of this article, though. That’s why we simply linked a couple more interesting Google tools below.


Google offers a plethora of useful and free tools. Many of them are already quite popular, but not always actually used. However, you should especially look at the tools that help optimising your website as they could be a deciding factor in whether your blog will gain popularity in the future.


* You might also be interested in the following articles
Catégories: News dév web

Social Media Self-hosted: Neosmart Stream

11 novembre, 2015 - 20:00

A website without an integration of multiple social media channels is hard to imagine nowadays. Facebook and Twitter offer interfaces and plugins that allow users to integrate profiles and pages into their own website. Furthermore, there is a number of services that incorporate a multitude of social media channels at once without a lot of effort. The service neosmart STREAM is one of them. However, it is not a typical cloud service, but a solution for self-hosting.

Downloading and Installing the Package

One thing in advance: Neosmart Stream is available as a free and a paid version. In this article, we will only show you features that work with the free variant already. This is how to do it:

First, the round about 1,5 megabytes large ZIP archive has to be downloaded, unzipped and uploaded to your web space. The service requires PHP starting from version 5.3 as well as the library cURL. Both is included in most hosting plans which means that, as a rule, the service can be used without any preparation in advance. Upon first access from the browser, some rights have to be adjusted, and an admin password needs to be set for administration.

Afterwards, you will find an interface similar to a content management system from which you can then access different social networks. Now you got the opportunity to integrate posts from Facebook and Twitter into your website.

Accessing Facebook and Twitter Posts

No knowledge of the respective APIs of Facebook and Twitter is needed to integrate the two networks via net smart STREAM. To access a Facebook page, you only need to enter the ID or the name of the page. Following that, you only transfer a so-called access token. You can receive it by granting neosmart STREAM access to your account in the Facebook app.

Setting up the Channels

Afterwards, you decide how many Facebook posts should be pulled over into your website and if only your posts or also other people’s ramblings should be displayed. Via a live preview you can directly see the results.

The Twitter integration works similarly. First, however, a Twitter app has to be set up to gain access to the tweets on your profile. Access tokens and access secrets as well as consumer key and tokens then need to be integrated into neosmart STREAM through the created Twitter app. Successful connection to the network is signalised by a status display.

Adjusting the Appearance via Themes

The service comes with a bunch of themes that allow you to alter the appearance of your articles the way you desire. A live preview instantly shows you how your profile and page posts will be displayed.
Choosing a Theme

In total, there are five free themes available. These are activated via a simple click. If you like it more of your own style, you can create a personal theme from scratch as well. A guide to what files a theme needs to contain and how it is designed is included in the documentation. Of course, you can also choose one of the existing themes as a starting point for your own. Since the entire service is hosted by you, you have access to all files, and thus, you can adjust them the way you want to.

Integrating Social Media Plugins

Once you connected the social networks to neosmart STREAM and chose a theme or designed the appearance, you can now embed the plugin in your website. There are several options available. The most common will be the standard option to integrate the plugin via Iframe. The measurements are transferred via the <iframe> element. The content itself adapts accordingly.

Alternatively, you can add the plugin via PHP. To do so, all you need to do is include a couple lines of PHP script into the web project. A requirement is, of course, that you set up the read-write permissions correctly to be able to access the index that contains the neosmart STREAM files via PHP.

Creating an Individual Channel

When Facebook and Twitter aren’t enough, you can also set up a personal channel. To do so, you need to enter a so-called NSS file as the URL for your new channel. NSS is an XML-based format that is similar to the RSS format. Via NSS you can transfer articles to the service.

This way, you edit the content directly in that file and then send it to your website via the neosmart STREAM plugin.

Free and Paid Plan

The neosmart STREAM service with all the above-shown features is free. The paid plan costs 99 Euro per website and contains a couple more features. For example, you can integrate Facebook features such as the like button, or Twitter’s follow and tweet buttons.

Also, the logo of the service is not displayed in the paid version. In the free version, it stays visible in the widget created by the plugin.


neosmart STREAM is easy to use and can be set up quickly. Those who don’t design and program a lot themselves and who don’t want to deal with Facebook and Twitter’s APIs will find a proper solution here. By the way, there is also a plugin for WordPress users to further enhance the use of the service in world’s most popular CMS.


* You might also be interested in the following articles
Catégories: News dév web



Une question, une remarque ?
Une demande de devis (gratuit) ?


A propos...

Yves Bresson, ingénieur en informatique, consultant freelance, spécialisé dans la création de sites web (CMS, PHP, Ajax, jQuery, Bootstrap, HTML 5, CSS 3) et d'applications mobiles (iPhone, Android). Voir le profil de Yves Bresson sur LinkedIn