L'Europe met en ligne des milliers de données statistiques publiques

Prédiction 2013 de Fred Cavazza.

Mes 13 prédictions pour 2013

Apprendre à dire non... ça se travaille

Et si en 2013, on apprenait à dire non a travail ? http://t.co/ZCWGCCAO Préparez-vous à passer une année plus zen...

Open data et Commision Européenne

La Commission Européenne se met à l’Open data

15 Memorable jQuery Timeline Plugins

15 Memorable jQuery Timeline Plugins:

With one of the jQuery timeline plugins listed here, you can add cool and interactive timelines to your web pages. The timeline format is not new, but really, it got popular when Facebook decided to add it to their wall design. It is a great way to show events in time – this can be anything from social media updates to historical events. We also see the timeline design in creative portfolios, where agencies show their history, development in number of employees, key client wins etc.
Check out the jQuery plugins I found for adding timelines to your website and let me know in a comment if I missed a great script! Also, please share this article with your friends and coworkers.

Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.

Advertisement

jQuery Social Timeline – MORE INFO / DEMO

The DP Social Timeline plugin has been build to make it simple for you to retrieve status/posts/videos/images from different social networks and add it all into a timeline format on your website. It is to some extent the same concept as the Facebook timeline.

jQuery TimelineXML – MORE INFO / DEMO

TimelineXML takes time-stamped pieces of content and puts them on a timeline as dots. On hover or click the visitor will see the content you added to the clicked event.

jQuery Timeline Slider – MORE INFO / DEMO

Timeline Slider is a jQuery timeline plugin you can use to build your own history timelines on your web pages. This timeline plugin includes a dark and a light skin and this makes it fit into most web projects. Since this plugin rely on the jQuery library you will find it to be cross-platform.

Timeliner – MORE INFO / DEMO

TimeLiner is a cool jQuery timeline plugin you can use to create slideshow like presentations an animating timeline showing progress. It is possible to more or less any HTML based content to the slides, and the process can be skipped and paused.

Lateral On-Scroll Sliding with jQuery – MORE INFO / DEMO

This is a tutorial showing you how to create a really awesome parallax style timeline. You will have circular elements on one side and the descriptions on the other flying in form the sides as users scroll down.
The code is available for download.

jQuery Responsive Timeline – MORE INFO / DEMO

With the jQuery Post Timeline plugin you can show a list of post in a cool timeline. The layout (vertical) is very similar to the one we know from Facebook and good news for mobile users… is fully responsive, so it will adapt to mobile devices and tablets!

Timeliner.js – MORE INFO / DEMO

With this plugin you can create an interactive historical timeline using just HTML, CSS, and jQuery.

Timeline with Configurator – MORE INFO / DEMO

Timeline is a jQuery plugin for adding cool a looking timeline on a web page. This could be for showing job experience, vacation events or any other activity on a visual way . You can use the built in configurator and it makes it easy to add, change and customize the timeline.

Timeline Portfolio with jQuery and CSS3 – MORE INFO / DEMO

The Timeline Portfolio jQuery plugin have been designed for showing chronological series of events. It is possible to embed different types of media including tweets, videos and maps, and associate them with a date. This plugin may be a cool way for e.g. show client work on a timeline as part of an online portfolio.

TimelineJS – MORE INFO / DEMO

The TimelineJS scrips can be used for pulling in media from different sources and adding them to an interactive timeline. You simply add links to Twitter, YouTube, Flickr, Vimeo, Google Maps or SoundCloud and TimelineJS will embed and format posts to fit the timeline.

Timeline calendar – MORE INFO / DEMO

Timeline calendar really is simple jQuery calendar designed as a timeline. It is a horizontal representation of the days in a month and it can be used to display events with descriptions in a visual and interactive way.

Chronoline.js – MORE INFO / DEMO

Chronoline.js is a jQeury plugin you can use to create timeline from events that are then added to a horizontal timescale. The plugin generate a graphical representation of schedules, historical events, deadlines, and more from a list of dates and events.

Content Timeline – MORE INFO / DEMO

Content timeline is powerful and lightweight responsive jQuery/HTML5/CSS3 plugin, best for displaying any organized content. It is fully customizable, and easily implementable with any js script, video, flash etc. Well structured code, and wide ranged API functions make it simple to get started and flexible for customization.

jQuery Timelinr – MORE INFO / DEMO

This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc.

Easy WordPress Timelines – MORE INFO / DEMO

The Easy WordPress Timelines plugin is really for WordPress and therefore more than a simple jQuery plugin. It makes it simple for WordPress users to create nice timelines and sliders from posts categories. The plugin includes a settings page that helps you define default parameters. Timelines are easy to add to posts and pages as you simply insert a shortcode with your custom parameters and boom!

Author : Sonny Day

Sonny M. Day is a passionate SEO and web design enthusiast who loves photography, mountain climbing, snorkeling and dirt bike riding.

PHP Class For Mobile Device Detection: Mobile_Detect

PHP Class For Mobile Device Detection: Mobile_Detect:

Advertise here with BSA

Mobile_Detect is an open source PHP class for detecting mobile devices.
It uses the User-Agent string combined with various HTTP headers in order to detect the mobile environment.
The class can easily understand whether the platform is mobile, tablet or desktop.

Also, functions exist for detecting whether it is iPad, iPhone, Android, Blackberry, etc.
And, we can even drill-down to the versions of the platforms and browsers if needed.
It has a huge library of devices (including Nook, Nexus, Kindle, Archos..) and browsers for a stable detection.

The Peril of Analytics (Cartoon)

The Peril of Analytics (Cartoon):
Analytics has always been dangerous for a certain type of middle-manager…

Note: feel free to use this and my other cartoons in your presentations/blogs, etc, but please keep the “timoelliott.com” text, and I always love hearing how people are using them, so please drop me a line if you do.

Share and Enjoy

• Facebook • Twitter • Delicious • LinkedIn • StumbleUpon • Add to favorites • Email • RSS

OverAPI – Easily Browsable CheatSheets For Designers And Developers

OverAPI – Easily Browsable CheatSheets For Designers And Developers:

Advertise here with BSA

Cheatsheets are great as they help us quickly find the feature of a library, language, app, etc. we are using.
OverAPI is a fresh project which collects all the designer/developer cheatsheets into the same place and presents all of them in a consistent interface.

This not only simplifies browsing them but also saves us time on searching for the latest cheatsheets as the list is regularly updated.
Currently, it is possible to find data for many popular languages like HTML, CSS, JavaScript, PHP, Python, MySQL, jQuery, Ruby and more.Advertisements:

Simple Effects for Drop-Down Lists

Simple Effects for Drop-Down Lists:

View demo Download source
Today we want to share some simple drop-down list effects with you. The idea is to transform a normal select input into something more appealing with a jQuery plugin. The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects.
After the great custom drop-down list styles made by Hugo in his tutorial Custom Drop-Down List Styling, we wanted to make it simple to create a custom structure from a normal select input (without multiple option selection). So, we’ve come up with this little plugin that will allow some custom styling of the drop-down list. With the generated structure it is easy to apply some simple effects in order to spice it up.
Please note that the CSS transforms and transitions only work in browsers that support them.
...
View demo Download source

Customizable Notifications With JavaScript – Alertify

Customizable Notifications With JavaScript – Alertify:
Alertify is a lightweight JavaScript library for displaying stylish notifications with ease.
The library doesn’t depend on any JS frameworks, can show notifications in a modal window and also feature growl-like messages.

Notifications are unobtrusive and the outputs can be completely customized via CSS as custom classes can be attached to elements.
Callbacks exist for ok + cancel events to act accordingly and there is support for chaining to create queued dialogs.

Master Data Management

Mise en place d’un projet de MDM : conseils et bonnes pratiques

ressources graphiques pour web prog

ByPeople – Un énorme bundle de ressources graphiques

Baraja - Présentez vos listes HTML en jeu de carte avec jQuery

Implement The Impressive Paper Folding Effects

Implement The Impressive Paper Folding Effects: Paper folding animation effect is one of the newly introduced effects mainly available in touch devices. It works well with touch gestures, such as swiping to certain direction to reveal content underneath by "folding" the current view. It's a fancy effect and definitely giving its users a cool experience.

Social auth

Social Auth - L'authentification PHP 3 en 1 pour FB, Twitter et Google

Css timeline

Responsive CSS Timeline with 3D Effect

Sweet image zoom effects

Sweet image zoom effects:
Using transition, box-sizing: border-box and border-width on hover.

Make Cool Effect with CSS3 Animation Libraries

Make Cool Effect with CSS3 Animation Libraries: When it comes to animation, flash is being replaced by Javascript and CSS3. With CSS2, we can't really do much with it other than changing the size, animating from x to y using Javascript. However, with CSS3 which supports different transition, 3D transforms, it opens out so much possibilities. With the help of Javascript, it can go even further.

Drag ‘n’ Drop Shopping Cart With jQuery UI (Tutorial)

Drag ‘n’ Drop Shopping Cart With jQuery UI (Tutorial):

Drag ‘n’ dropping items has its various popular uses and shopping carts are definitely one of them.
In this tutorial, we’ll be creating a simple shopping cart that works with drag ‘n’ drops.
It will have support for add-to-basket with quantity updates (so that the same items could be added more than once) and removing items from the basket. It will be totally client-side and cover the basic functionality (no PayPal integration, etc.).
For that, we’ll be using, probably the best drag-drop library, jQuery UI Draggable/Droppable in this tutorial. Here is the end result:



Let’s get started:

Step 1 -> Get the custom jQuery UI package

jQuery UI has lots of features and every feature adds bytes to its source, it is much more smarter to get only what we need.
As you can see from the screenshot above, we need the Core, Widget, Mouse from the core and Draggable + Droppable from the interactions.

This will end up in a 37kb JavaScript file which is not so bad for the features and compatibility offered.

Step 2 -> Insert the JS files into the web page

Let’s make sure we have the jQuery and jQuery UI inserted in the web page. Just add these lines inside the <head></head> tags.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery-ui-1.9.0.custom.min.js"></script>

Step 3 -> The HTML for the products

Let’s use a simple unordered list structure for featuring the products:

<section id="product">
    <ul class="clear">
        <li data-id="1">
            <a href="#">
                <img src="http://lorempixel.com/150/100/technics/1/" alt="">
                <h3>Product name</h3>
                <p>Product detail</p>
            </a>
        </li>
        <li data-id="2">...</li>
        <li data-id="3">...</li>
    </ul>
</section>

Step 4 -> The HTML for the basket

And a basic structure for the basket:

<aside id="sidebar">
    <div class="basket">
        <div class="basket_list">
            <div class="head">
                <span class="name">Product name</span>
                <span class="count">Quantity</span>
            </div>
            <ul>
            </ul>
        </div>
    </div>
</aside>

Step 5 -> Let’s start dragging

As you already know we’ll be using the jQuery UI Draggable and Droppable:

// jQuery UI Draggable
$("#product li").draggable({

    // brings the item back to its place when dragging is over
    revert:true,

    // once the dragging starts, we decrease the opactiy of other items
    // Appending a class as we do that with CSS
    drag:function () {
        $(this).addClass("active");
        $(this).closest("#product").addClass("active");
    },

    // removing the CSS classes once dragging is over.
    stop:function () {
        $(this).removeClass("active").closest("#product").removeClass("active");
    }
});

Step 6 -> And, time for dropping

The item will be dropped elegantly, thanks to the jQuery UI Droppable:

// jQuery UI Droppable
$(".basket").droppable({

    // The class that will be appended to the to-be-dropped-element (basket)
    activeClass:"active",

    // The class that will be appended once we are hovering the to-be-dropped-element (basket)
    hoverClass:"hover",

    // The acceptance of the item once it touches the to-be-dropped-element basket
    // For different values http://api.jqueryui.com/droppable/#option-tolerance
    tolerance:"touch",
    drop:function (event, ui) {

        var basket = $(this),
                move = ui.draggable,
                itemId = basket.find("ul li[data-id='" + move.attr("data-id") + "']");

        // To increase the value by +1 if the same item is already in the basket
        if (itemId.html() != null) {
            itemId.find("input").val(parseInt(itemId.find("input").val()) + 1);
        }
        else {
            // Add the dragged item to the basket
            addBasket(basket, move);

            // Updating the quantity by +1" rather than adding it to the basket
            move.find("input").val(parseInt(move.find("input").val()) + 1);
        }
    }
});

Step 7 -> Adding the dropped item to the basket

We are no wadding the item to the basket with any details it has:

function addBasket(basket, move) {
    basket.find("ul").append('<li data-id="' + move.attr("data-id") + '">'
            + '<span class="name">' + move.find("h3").html() + '</span>'
            + '<input class="count" value="1" type="text">'
            + '<button class="delete">✕</button>');
}

Step 8 -> Deleting an item for the basket

A simple way to remove items from the basket:

$(".basket ul li button.delete").live("click", function () {
    $(this).closest("li").remove();
});

And, it is that easy. Hope this tutorial helps you creating your own shopping cart.

Developer: Adem İlter

Adem İlter is a UI developer and also the creator of the liffect.

Nitro - Une application de gestion de tâches open source

Nitro - Une application de gestion de tâches open source:

Nitro est une web app open source permettant de gérer des tâches quotidiennes rapidement et facilement.

14 Free CSS / HTML Pricing Tables

14 Free CSS / HTML Pricing Tables: Pricing tables are usually important part of business website that offers products or services. So if you are looking for the free pricing tables for your commercial project, then here is a collection of modern and stylish Tables With HTML and CSS.

Filtrify - Un plugin jQuery de filtres dynamiques et ergonomiques

Filtrify - Un plugin jQuery de filtres dynamiques et ergonomiques:

Filtrify est un plugin jQuery permettant de mettre en place des filtres dynamiques et ergonomiques sur vos listes HTML.

Open Source PHP Framework for Multi-User Web Apps

Open Source PHP Framework for Multi-User Web Apps:

Webasyst is a new open source PHP framework for developing sleek multi-user web apps, and complex websites. Comparing to other frameworks such as Zend and Symfony, Webasyst framework stays more focused and allows building apps for business and team usage more quickly and efficiently. The framework offers lots of ready-to-use tool for user management and authorization, UI building, mobile-ready access, etc.
Webasyst framework has been designed in such a way that within a single installed software instance, several different applications can be installed and used. It was one of the main goals of creating the framework to allow tight integration and interaction between several applications. Webasyst released under LGPL license that permits creation of commercial applications, which makes Webasyst a great platform for developing web apps for businesses.

Requirements: PHP Framework
Download Link: http://www.webasyst.com/
License: LGPL License

A Bunch Of CSS Animation Effects For Lists: Liffect

Liffect is a web-based generator that provides lots of different effects for list elements.
It makes use of CSS animations and requires jQuery for applying the delay in effects.
There are items fading, zooming, sliding, flipping, bouncing and, a fun one, Star Wars-inspired effect.

The website allows us to define the duration + delay and generates the necessary CSS rules instantly.
Liffect is a must-bookmark not only for copy-pasting the effects but it is also a nice reference.
Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.

Professional XHTML Admin Template ($15 Discount With The Code: WRD.)

SSLmatic – Cheap SSL Certificates (from $19.99/year)