Some basic concepts

First of all let’s discuss the animations effects:

• When you click the “next” link:
1. the first next invisible item in the carousel will become the far item on the right
2. the far item on the right will become the near item on the right
3. the near item on the right will become the current item
4. the current item will become the near left item
5. the near left item will become the far left item
6. the far left item will disappear.
• When you click the “previous” link:
1. the first previous invisible item in the carousel will become the far item on the left
2. the far left item will become the near left item
3. the near left item will become the current item
4. the current item will become the near right item
5. the near right item will become the far right item
6. the far right item will go out of the view.
• When the current item is the first list item the “previous” link will not work.
• When the current item is the last list item the “next” link will not work

Items behavior

When the central item and the far right item of the carousel will become the near left item and the near right item they will adapt their size to the midSize width/height and will be appplied a transparency as defined in midOpacity property.

Meanwhile the Current Item and the right far item will become the Near item both left and right, the near left item will become the far left item reducing its size to the far left item applying the opacity defined in the minOpacity.

The Near item on the right will become the Current Item and will be resized to the maximum size defined in maxSize its new opacity is defined in maxOpacity.

Because the behaviors of each element is similar to the others, all them must move from a location to another, change their opacity and size, we’ll build a single method that will manage this behavior:

function moveTo( $selector, $margin, $opacity, $w, $h, $last ){
    $inProgress = true;
    if($last){

        var $updateFunction = function(){
            hideTheExceding();
            locateElements();
        }
    }else{
        updateFunction = null;
    }
    jQuery($selector, ul).animate({
        marginLeft: $margin,
        opacity: $opacity,
        width: $w,
        height: $h
    }, options.speed, $updateFunction);
}

The above method will accept:

1. the CSS Selector, used to point to the exact item of the carousel,
2. the destination where it must reach to the end,
3. the final opacity,
4. the final width and final height,
5. a boolean value that will tell to the method if it is the last moving animation so (after it) we can call the methods to correct every strange carousel behavior!

The movePrev and moveNext methods

As you can see in the moveTo() method we set a variable “$inProgress = true” so we can block the as I call them “compulsive link clicking user” (users that when found a link clicks twice! :-) )

So the first thing we have to do in both methos movePrev and moveNext is to check the status of $inProgress and if true we will exit without do anything.

As written in the above “basic concepts”, we have to ignore the click also if the current item of the carousel is the first or the last.

if($elements<$currentVisibleItem+2) return;

The moveNext method will be:

function moveNext(event) {
    event.preventDefault();
    if($inProgress) return;
    var $elements = jQuery('>li', ul).length;
    if($elements<$currentVisibleItem+2) return;
    $currentVisibleItem+=1;
    var $nextItem = $currentVisibleItem+2;
    var $nextToShow = '>li:nth-child(' + ($nextItem+1) + ')';

    jQuery($nextToShow, ul).css({
        opacity: '0.1',
        display: 'block',
        marginLeft: (jQuery(ul).innerWidth() + options.minSize)+ 'px',
        width: 0,
        height: 0
    });
    moveTo('>.far.before', -options.minSize, 0, 0, 0, false);
    moveTo('>.near.before', $farXL, options.minOpacity, options.minSize, options.minSize, false);
    moveTo('>.current', $nearXL, options.midOpacity, options.midSize, options.midSize, false);
    moveTo('>.near.after', $currentX, options.maxOpacity, options.maxSize, options.maxSize, $nextItem==$elements+1);
    moveTo('>.far.after', $nearXR, options.midOpacity, options.midSize, options.midSize, $nextItem==$elements);
    moveTo($nextToShow, $farXR, options.minOpacity, options.minSize, options.minSize, true);

}

The movePrev behavior is similar but in the other sense.

Well all the thinghs are done and our simple semantic carousel is complete and you can see it in a working demo there you can take a look to the HTML, CSS and Javascript developed in this tutorial (and in the previouses).

Obviously we can apply a lot of optimizations, features and customizing further the carousel like adding the title of the image in a label under the carousel… But why to make things complicated in a simple tutorial?

Now you can use it as is or begin from here to get your enterprise complex carousel plugin to show your images, news or whatever you want. Just tell me how did you use it and remember to tell the others how  I’ve helped you with this simple tutorial! I will apreciate it a lot!

Have a nice week and see you here soon!

First of all, we have to understand the basis of jQuery plugin developement.

To make something as a jQuery plugin you have to declare it as a jQuery function.

jQuery.fn.myPlugin = function(options){
}

in this way we can call myPlugin as it were a jQuery object method.

jQuery('#my-element').myPlugin();

Cool! True?

myPlugin method would be called in the selected object context. In the above case #my-element (remember that the prototype of each element has been modified by jQuery) would be the “this” object inside the method or, if the selector embrace more elements of the DOM, it will be an array of jQuery elements.

Usually a jQuery plugin will return the “this” object to grant the chainability. So, to ensure that our plugin will work with both single object and array of objects, we can just use the syntax:

jQuery.fn.myPlugin = function(options){
    return this.each(function(){ /* Our plugin code goes here */ });
}

The above function executed on each item of the array or to the single selected item by the CSS selector will manipulate the DOM node to make our carousel true.

Developing the carousel

Let’s start our plugin implementation thinking about what informations will be unchangeable by the user and which one should be computed then plugin options.

The size of items as described in the analysis is not specified, so we should define them in the configuration phase. Same for the opacity and for the speed of animation. Considered that we should think as the most of jQuery plugins were developed, they store a set of default options so if the user would define only some of them it can do it and the plugin will care about merging the two objects and get a complet set for the new options object.

var defaultOptions = {
    maxSize: 120,
    midSize: 110,
    minSize: 80,
    maxOpacity: 1,
    midOpacity: 0.6,
    minOpacity: 0.3,
    speed: 1500
}

if(options==null) options = [];
options = jQuery.extend(defaultOptions, options);

using extend method against merge, you will merge the defaultOptions object overriding its value with those one defined in the options object.

Another significant element that we will reuse inside the script would be the base object that will be always an equivalent of this but never overrided by the this regardles to the context.

Now let’s build simply the core of our plugin.

First of all we create the two navigation links:

jQuery(base).
    prepend('<a class="nav go-prev" href="#">Prev</a><a href="#" class="nav go-next">Next</a>');
    jQuery('.nav',base).css({
        height: jQuery(base).innerHeight() + 'px',
        display: 'block'
    });
    jQuery('>.nav.go-prev', base).css('float','left').click(movePrev);
    jQuery('>.nav.go-next', base).css('float','right').click(moveNext);

Then we will reset the style rules defined in the css:

jQuery(base).css('overflow', 'hidden');
jQuery('>ul',base).css({
    marginLeft: jQuery('>.nav', base).outerWidth() + 'px',
    width: (jQuery(base).innerWidth() - jQuery('>.nav', base).outerWidth()*2) + 'px',
    padding: 0,
    height: jQuery(base).innerHeight() + 'px',
    display: 'block'
});

then invoking 2 methods: one that is able to hide the list items not currently visible, the other that will organize the elements in the ul area.

hideTheExceding();
locateElements();

hideTheExceding() will cycle for each item of the array and will apply the defined opacity for the visible items and:

1. hide the elements actually not visible,
2. set to current the class for the central item,
3. set to near the class for the items placed on the direct side of the current item
4. set to far the class for the items farest from the current.

LocateElements() will place the items in the area considering that:

• the current item will be placed to the center of the screen and will be sized ,
• the far item will be placed to the border of the carousel with a margin of 10px
• the near item will be placed between the two above items.

the location will be calculating the median of each item. For example the .current item will be placed in the centre of the screen. To calculate how (x,y) coords must be placed we get the half of the container (ul) inner width and subtract the half outer width for the current item.

CurrentX = (ULWidth – CurrentWidth)/2

The computing of FarX position would differ if located to the left or to the right of the page. In case of element located to the left we’ll place it 10px far from the border. If On the right it will be placed however on 10px from the border but we must set the position as:

FarXR = ULWidth - 10px - MinSize

The middle item will be placed just in the middle of two items. To calculate it we have to calculate the median of each item and then identify an exact point in the middle of them. The NearItem median is equidistant from the CurrentItem median and FarItem median but you have to calculate half medium size to place the nearItem centered respect to its median.

In this article we have placed the items in the carousel, in the next article we will see how to animate the carousel Elements implementing the moveNext and movePrev methods.

An example is available here.

Have a nice working week and stay tuned… I’ll come back soon!

Styling the elements.

The goal of this series of article is to get a carousel as shown in the above image and as described in the previous part of this article. But in absence of Javascript, we need to make something that can be graceful as is and, in the limit of the semantic (no further tag must be introduced to the structure) we can think to something like this:

The size of my carousel would be 600 pixels width and 200 pixel height. Just to debug the occupation in the page I set its background color to a light safe color grey and a border to a little bit darker gray than the background. Just to ensure that all the contained elements will fit the entire size i will set the padding to 0.

Of course, the margin is set to auto to auto-center the container into the area he was placed. But I should set it to occupy the entire width of the contained area. I can just do it by removing width property. The overflow: auto property is set  to ensure that the carousel (or at least its content) would be usable without Javascript too. Yes! I’m minding Progressive Enhancement. Then let’s format the unordered list and its list items! The first thing we would do is to reset the common list container and list items default styles:

#my-carousel ul,
#my-carousel li{
    padding: 0;
    list-style: none;
    list-style-type: none;
}

Then we will make sure that the UL will fit the entire area and resetting its margin.

#my-carousel ul{
    position: relative;
    width: 100%;
    margin: 0;
}

And in the end, we want to display just the 5 elements from the list no one more!

Each item will occupy a 20% of the available space including eventual margin, so we define a width of 16% of total width and a margin on both left and right of 2%.

Using the box-sizing property we ensure that the 16% of the content will count the 1px border too and an hypothetical internal padding. In the following way we make a cross-browser box-sizing. To avoid the overflow of the contents just tell it to be hidden.

#my-carousel li{
    display: block;
    border: 1px solid #ccc;
    overflow: hidden;
    width: 16%;
    margin: 2%;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100px;
}

If you want you can see the stylized carousel in action. In the next week we will build our jQuery Simple Semantic Carousel Plug-in.

Stay tuned and happy coding!

First of all we’ll make a checklist of requirements, second we’ll make a scratch of the carousel, third we’ll analyze each element of the scratch, which is their role in the context and at the end we will develop the jQuery solution.

Requirements and scratches

Our carousel should have 5 visible elements at time: one in the center and other on both sides of central element. The elements would become transparent as they assumes a far position from the center of the carousel. The distant elements, must be smaller than the intermediate elements, which in turn must be smaller than the central element.

Starting with the above idea in mind, I made a scratch of the carousel as you can see in the image below.

So, we have a main container that encloses our carousel, the item container and two navigation elements placed on both left and right sides of the carousel, inside the main container.

Items into the carousel will be classified depending on their current position:

• Current Item is the current visible item in the carousel
• Near Item is the first item near the carousel, placed in the middle of our carousel..
• Far Item is the item at the border of the carousel

At this point is obviously clear how to structure the carousel to make it semantically valid.

1. The carousel is a list of items. Sorted? Unordered? It does not matter, it could matter only if think that the information inside the carousel makes their sense if read sequentially, else we can use an unordered list.
2. The navigation items are simply hyperlinks to nothing.
3. The main container is a “div” element. It can host inline elements and blocklevel elements (the unodered list) and inline elements (the hyperlinks).

I was just thinking about that:

But what we need to create by hand? And what not?

We will create the main container and the unordered list too, but we will not create the navigation links because they will be produced by javascript.

<div id="my-carousel">
    <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
        <li>Item #4</li>
        <li>Item #5</li>
    </ul>
</div>

The above structure, without stylesheet and javascript, will be semantically valid. The next week we will produce the CSS and wetting our hands with jQuery plugin developement.

Stay tuned!

Issue #1 “the truncated images count as full view images”

Each item has an exact size, in our case it is 105px x 105px. So if the wrapper of the carousel has a width multiple of 105px nothing goes wrong. But if the wrapper is bitter greater than multiple of 105px (for example 317px), the pagination break to work properly. This is because in an exact point of the script we are counting the number of contained items in the wrapper rounded by excess ( ceil function in javascript ).

So what we need to do, teorically, is just to change the used method from ceil (rounding by excess) to floor (rounding by defect) in the following instruction:

$wrapper.visible = Math.ceil($wrapper.innerWidth() / singleWidth),

This will solve all our problems.

Issue #2 “Handling the swipe”

Managing the swipe gesture is not so simple, than we could proceed in two ways.

The first is to handle the touchstart/touchend events, identify the gesture calculating the angle of movement and in dependence of it raising the exact event (swipe to left, swipe to right). How to do that?

The way i thing it would be correct to manage the swipe is:

1. handling the touchstart event to grab the first point where the touch begins
2. handling the touchmove event to grab all the points where the user is swiping
3. for each time that the touchmove event is raised, you have to calculate if all points are on the same line with tollerance. If it is not so we keep care to untrack the next movements and release all user resource.
4. reached the minimum distance and ensured that the user is swiping (the above point 3) we can raise a custom event onSwipe where you can describe the distance from the base point, the speed,   the angle the start point and the end point.

Another much simpler way to do this, is integrating the jQuery Touchwipe plugin into our pages and leave it the hard work. This plugin works almost fine but it is acceptable for our goal.

It can manage the 4 directions (left, right, up and down) we need just the left and right direction. But what do it not do?

It does not give us the speed, angle or if the gesture is exactly a swipe: you could make a wavy movement and the swipe will be raised if the X or Y distance between start point and end point will be at least the minimum defined.

So the only things we need to do are:

1. Creating just 2 new methods in the Carousel Javascript: gotoNext() and gotoPrev() just after the gotoPage() method. Is goal is to move the carousel to the next page and to the previous page.
2. Including in our pages the jQuery Touchwipe plugin
3. Attaching it to the carousel and
4. Configuring its behavior.

The gotoNext and gotoPrev methods will be simply:

function gotoNext(){
return gotoPage(currentPage+1);
};

function gotoPrev(){
return gotoPage(currentPage-1);
};

Then we have to attach the  swipe plugin to the wrapper then configure its behavior in this way:

$wrapper.touchwipe({
wipeLeft: function(){
gotoNext();
},
wipeRight: function(){
gotoPrev();
}
});

Our plugin now works with swipe and buttons on touchscreen that implements the touch events and works with navigation buttons on desktop browser and mobile device that does not support the touch (but support at least javascript :-) ).

I made a package with the full source code (css, javascript, dependencies and used html), and a working demo.

Happy coding to all!

Issue #1: “fixed carousel width should be flexible to the width of the container”

In the original file (read the source code), you can observe that the .infiniteCarousel class properties sets the width to 395 pixels, and the contained item to 315 pixels:

.infiniteCarousel {
  width: 395px;
  position: relative;
}

.infiniteCarousel .wrapper {
  width: 315px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
  overflow: auto;
  min-height: 10em;
  margin: 0 40px;
  position: absolute;
  top: 0;
}

To make the carousel flexible, I’ve changed those two class properties into the new ones:

.infiniteCarousel {
  min-width: 395px; /* now this is the minimal allowed width */
  width: 100%; /* adapt the width to the container */
  position: relative;
}

.infiniteCarousel .wrapper {
  min-width: 315px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
  overflow: auto;
  min-height: 10em;
  margin: 0 40px;
  position: relative;
  top: 0;
}

Then I made a minor change to the “.infiniteCarousel .arrow” CSS rule, because a less than symbol (“<”) appears in the middle of my screen.

text-indent: -9999px;

With the above code we have solved the first issue. But now we have introduced a new issue. You can notice it only if you are looking at the new carousel through a tablet browser. Which one? Let’s rotate your tablet by 90° (obiviously if your tablet has the rotation sensor!!! :) ) and take a look to the carousel. You’ve seen the breaking issue? No? Try to use the left and right arrow buttons of the carousel!

What? Which one of you told me that the issue is in the desktop browser window resizing too? Yes I know! We have to solve that first.

Issue #2 (raised by resolution of Issue #1): “Window resizing/tablet rotation causes the carousel to not work properly”

Supposing that you have understand how the original infinite Carousel works (there’s no better read than take a look to the original post)  let’s alter the javascript.

The first thing we need to handle is the resize event of the window and keep the carousel object context we create to recalculate some information that changes during resize. So, let’s create the handler into the “infiniteCarousel” function.

$(window).resize(recalculateAfterResize);

but what need to be calculated after the resize event?

1. the width of visible area;
2. the number of pages which the carousel has;
3. the empty items;
4. the cloned items;

Well so the first thing we have in that function will be the removal of the nodes with class .cloned and .empty to ensure to have a clean (original) condition.

$('.empty', $wrapper).remove();
$('.cloned', $wrapper).remove();

After that we perform the tasks #1 and #2 of the above list.

$items = $slider.find('> li');
$wrapper.visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
$wrapper.pages = Math.ceil($items.length / $wrapper.visible);

Let’s count the number of empty items to create.

// 1. Pad so that 'visible' number will always be seen, otherwise create empty items
if (($items.length % $wrapper.visible) != 0) {
$slider.append(repeat('<li />', $wrapper.visible - ($items.length % $wrapper.visible)));
$items = $slider.find('> li');
}

Clone the required items:

// 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
$items.filter(':first').before($items.slice(- $wrapper.visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, $wrapper.visible).clone().addClass('cloned'));

Then reset the scroll to the first available item of the carousel:

$items = $slider.find('> li'); // reselect
$wrapper.scrollLeft(singleWidth * $wrapper.visible);
page = 1

At this point we should have a method like that:

function recalculateAfterResize(){
    // Reset to the original carousel condition
    $('.empty', $wrapper).remove();
    $('.cloned', $wrapper).remove();
    $items = $slider.find('> li');
    $wrapper.visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
    $wrapper.pages = Math.ceil($items.length / $wrapper.visible);
    // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
    if (($items.length % $wrapper.visible) != 0) {
        $slider.append(repeat('<li />', $wrapper.visible - ($items.length % $wrapper.visible)));
        $items = $slider.find('> li');
    }
    // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
    $items.filter(':first').before($items.slice(- $wrapper.visible).clone().addClass('cloned'));
    $items.filter(':last').after($items.slice(0, $wrapper.visible).clone().addClass('cloned'));
    $items = $slider.find('> li'); // reselect
    $wrapper.scrollLeft(singleWidth * $wrapper.visible);
    page = 1;
}

Just put it after the declaration section inside the “return this.each” function and remove the following variables from declaration section:

• visible
• pages

The last thing to do is to remove the redundant code (all the code identified by the comments //1. … , //2. … and //3. … ) then substitute the removed blocks with a single call to the above function recalculateAfterResize();

For a cleaner reading I have separated the code in three files: CSS, Javascript and HTML. You can find them in the example file or look at the demo that I just made for you!

In the next article i will describe how manage the swipe effect in the simplest way and improve some other minor things in the Carousel! Stay tuned. And happy Coding!

Interrogando qualsiasi altro feed da WordPress tutto funziona regolarmente ma considerando che GitHub fornisce i suoi feed RSS su protocollo sicuro http (HTTPS), ne ho dedotto che il problema fosse proprio nel certificato.

Forse perchè l’authority per la certificazione non risulta tra quelle previste dal server su cui risiede WordPress, oppure perchè c’è una qualsiasi altra configurazione del server che non consente una validazione del Certificato di Sicurezza, il risultato è che non sarebbe possibile interrogare un feed RSS di GitHhub, ottenendo in compenso questo simpatico messaggio di errore:

RSS Error:
WP HTTP Error: SSL certificate problem, verify that the CA cert is OK.
Details: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed

Ma come ben sapete “non è possibile” non fa parte del mio vocabolario, quindi mi sono spulciato il codice della classe Http di WordPress e facendo un po’ di reverse engignering sono arrivato alla soluzione del problema.

Per evitare che WordPress faccia la verifica del certificato basta mettere nel file functions del proprio tema questa semplice riga di codice:

add_filter('https_ssl_verify', '__return_false');

Le slide che seguono sono da ritenersi più un how-to e best practice sull’utilizzo dei due strumenti.

Mi auguro che il materiale sia di vostro gradimento.

Per riuscire però ad effettuare i commit attraverso il Proxy che non consente l’acceso ssh al server github.com ho fatto diverse ricerche su internet, provando le più diverse strade.

C’era chi suggeriva di creare un file wrapper per il proxy seguendo un procedimento alquanto semplice:

• Installare netcat
• creare uno script da shell collocandolo nella directory bin/ dell’utente che riportava in sintesi questo comando “nc -x${PROXY_IP}:${PROXY_PORT} -X5 $*“
• configurare il parametro core.gitproxy indicando il nome del file precedentemenet creato.

Per me non ha funzionato e comunque questa procedura a mio avviso poteva essere  semplificata ulteriormente utilizzando questi due semplici comandi eseguiti da shell.

EXPORT http_proxy=http://myproxy:8080
EXPORT https_proxy=http://myproxy:8080

Non li metterei come valori persistenti perchè, usando il notebook su diverse reti rischierei di non raggiungere il proxy specificato con conseguenza dell’interruzione della navigazione.

Comunque non ha funzionato. Quindi ho cercato una nuova soluzione al problema.

Un altro sito suggeriva di usare l’url proposto da github nella versione https al posto di quello ssh.

Ho fatto un tentativo e non riuscivo nemmeno a clonare il repository remoto ricevendo come risposta “warning: remote HEAD refers to nonexistent ref, unable to checkout.“. Quindi ho temuto che fosse un problema del mio repository remoto. Per fortuna anche con il repository di JQuery mi segnalava lo stesso errore. E lo faceva con qualsiasi repository provassi a clonare. Quindi il repository non aveva problemi.

Ho provato a fare un mix tra le soluzioni “installazione netcat” e “https al posto di ssh” ma comunque non ho avuto il risultato sperato quindi ho continuato nella ricerca della soluzione fino ad incappare in questa discussione!

Grazie a quanto è scritto nella discussione precedente ho cominciato a fare un po’ di prove giocando sull’url per la richiesta del repository.

La soluzione in fondo era più semplice di quanto si pensasse.

Partendo dall’url di aggiornamento del repository fornito da github in formato https (https://user@github.com/user/repository.git), ho inserito anche la password dell’account github e ho fatto viaggiare la richiesta su protocollo http (non sicuro). Quindi l’url utilizzato in fine è stato:

http://user:password@github.com/user/repository.git

In questo modo ha funzionato tutto correttamente e sono libero di aggiornare il mio framework da, come direbbero gli americani, “ognidove”! :)

Mi domando quindi perchè non potrei partecipare anche io al dibattito nazionale? Non sarò un esperto di economia ma, visto che parlano tutti di economia, penso di non aver minor diritto di altri a chiacchierare. Non lo farò con la voce ma ci proverò con questo articolo sul mio blog. Almeno non sarete costretti ad ascoltarmi!

Non mi soffermerò a lamentarmi dei parlamentari che guadagnano 2 volte quello che guadagnano gli altri parlamentari in altri paesi d’Europa. Una persona che lavora al servizio del paese merita ogni centesimo che prende, se lavora bene.

Non voglio raccontare del sistema Europa che non vuole salvare l’Italia o del conto alla rovescia che ci separa dal defaul in stile profezia Maya.

Non voglio lamentarmi delle pensioni, perchè, già quando iniziai a lavorare, ero consapevole che quanto versavo nelle casse dell’ente previdenziale sarebbe andato a favore dei pensionati attuali e che il Paese non avrebbe potuto garantirmi alcuna pensione,  trovandosi l’Italia in una fase di invecchiamento.

Io ho voglia di chiacchierare in materia di evasione fiscale. Questa trascurata materia per la quale tutti dicono che è complicato. Lo sarà certamente non lo metto in dubbio ma sono un po’ perplesso su come si apporccia al problema.

Dunque, l’ammontare dell’evasione fiscale in italia è mediamente del 38%, ovvero 275.000 miliardi di euro (!!!). Magari saranno miliardi di lire? Può darsi, non sono un esperto di finanza, allora vuol dire che l’evasione fiscale in italia ammonta a circa 150 Miliardi di Euro? Ovvero 6 volte la manovra “Salva Italia” varata dal Governo Monti!!!

Beh, io sarò un semplicione, un superficiale e uno che fantastica troppo ma… se il Governo consentisse anche ai privati di scaricare l’IVA che scenario si presenterebbe?

Sì la prima cosa che salterebbe all’occhio è che l’IVA è uno degli incassi più redditizi che lo stato ha e quindi se si toglie quella è tutto il sistema che va a gambe all’aria.

Però se la persona potesse scaricare il costo di un bene, un servizio o quanto altro così come fanno le aziende e poi scaricare (o meglio recuperare) una parte dell’IVA versata alle casse dello stato (anche un misero 20% di quanto viene anticipato in fase d’acquisto, ovvero il 2.5% di quel 21% attuale), chiunque vorrebbe ricevere fattura, scontrino e ricevuta per qualsiasi servizio ricevuto!

Gli evasori sarebbero costretti ad uscire allo scoperto perchè a quel punto sarebbero denunciati direttamente da chi riceve il servizio! Non credete?

Avrò detto tante cavolate sicuramente e me ne scuso con gli economisti, politici e affaristi di ogni sorta, ma un cittadino onesto che paga le tasse e rispetta la legge ha tutto il diritto di dire la sua! Siamo pur sempre in Democrazia!