JS : Slider d'images défilantes


1 mars 2011

Le Javascript c'est très bien mais les disparités entre navigateurs font que ce langage ne peut exprimer toute son élégance sans une série d'abstractions (comprenez fonctions et objets cachés). L'utilisation de jQuery simplifie ces manipulations browseriennes et on aboutit à du code très élégant comme il n'aurait jamais dû cesser de l'être.
La preuve ?
Je voulais faire un slider d'images, un visualiseur de diapositives en français, qui permet de passer à l'image suivante à l'aide d'un clic de souris. Le code repose sur du HTML très simple et référençable par un moteur de recherche : un DIV positionné en relative ou absolute contenant des IMG dont on doit spécifier les tailles et, si la variable ContainerId contient l'Id du DIV sus-mentionné, ça donne les 13 lignes qui suivent ainsi que la démo juste au-dessous.

var Left = MaxWidth = MaxHeight = 0
$("#container img").each(function(idx, item)        {
    $(this).css({"position":"absolute", "top":"0px", "left":Left+"px"})
    Left += $(this).width()
    MaxWidth = Math.max($(this).width(), MaxWidth)
    MaxHeight = Math.max($(this).height(), MaxHeight)
    $(this).click(function()    {
        var NextImg = $(this).next("img")
        var ShiftPosition = !NextImg.length ? 0 : NextImg.css("left")
        $("#container-inner-container").animate({"left":"-"+ShiftPosition}, 500, "swing")
    })
}).wrapAll("<div id='container-inner-container'></div>")
$("#container-inner-container").css({position:"absolute", top:"0px", left:"0px", witdh:Left+"px", height:MaxHeight+"px"})
$("#container").css({overflow:"hidden", position:"relative", width:MaxWidth, height:MaxHeight})

Quant à son fonctionnement, c'était le premier slider que je faisais en jQuery, donc tout est assez basique : je donne une position absolue à toutes les images qui sont filles du container passé en paramètre et je les place toutes les une à la suite des autres avec une petite fonction qui réagit au clic souris pour chacune d'entre elle et qui exécute un scroll à la suivante, simplement en animant la propriété CSS left.

JS : Slider d'images en fondu


1 mars 2011

Comme précédemment, on veut afficher des images les unes à la suite des autres avec un clic souris, mais cette fois la transition se fait avec un fondu enchaîné et un code très réduit (merci jQuery).

Dans le code qui suit, la variable Container contient l'élément jQuery correspondant au DIV encapsulant les images :

var ImgIndex = MaxImgIndex = 0
Container.find("img").each(function()   {
    $(this).css({"position":"absolute"}).fadeTo(1, 0.001).css("display", "none")
    MaxImgIndex++
    $(this).click(function()    {
        Container.find("img:nth-child("+ImgIndex+")").fadeTo(1000, 0.01, function() {
                $(this).css("display", "none")
        })
        ImgIndex = (ImgIndex == MaxImgIndex ? 1 : ImgIndex+1)
        Container.find("img:nth-child("+ImgIndex+")").css("display", "inline").fadeTo(1000, 1)
    })
})
//On affiche la première image...
Container.find("img:nth-child(1)").trigger("click")

JS : Slider d'images progressives


1 mars 2011

Cette fois on veut une transition un peu plus travaillée : l'image suivante recouvre progressivement l'image courante sans mouvement apparent d'aucune des deux. D'abord la démo :

Le fonctionnement est un peu plus brutal : énormément de DIV sont créés pour représenter chacun une ligne de l'image qui apparaît et ces DIVs sont placés par-dessus l'image courante à l'aide de la propriété CSS z-index. Rien de complexe au niveau de la technique mais le DOM est surpeuplé pendant une transition :)

Simulation d'emprunt


20 juin 2010

Présentation & démonstration

Etant à la recherche d'un bon outil de simulation d'emprunt bancaire et n'en trouvant pas, je me suis dit que le mieux était de faire ce dont j'avais besoin. (Expliquer les paramètres)... Voici donc le résultat (j'explique les calculs après la démo).

Capital à emprunter : Mensualité maximale : Assurance : % Annuités et coûts

Notes de calculs

Quand on parle d'un emprunt à 4%, on exprime le fait que chaque année le client doit payer au prêteur 4% de la somme restant dûe à ce moment là. Ainsi, si on note les intérêts dûs pour l'année n et le capital restant dû au début de l'année n, on a : avec t le taux de l'emprunt, ici 4%, soit 0.04. La somme totale empruntée se notera K, avec .

La plupart des prêts souscrits aujourd'hui se font à "annuités fixes", ce qui se traduit par le fait que l'emprunteur remboursera chaque année (et donc chaque mois) la même somme, ce qui est bien pratique pour se projeter quand on acquiert un bien. Ce qui est également bien pratique quand on est du côté du prêteur, on sait à l'avance ce qu'il va gagner. Qui a dit "sans rien faire" ?

On déduit de ce qui précède que la somme des intérêts payés pour une année et du capital remboursé pendant cette même année est constante. Si on note le capital remboursé durant l'année n et A l'annuité fixe : .

Ainsi :

Supposons que la formule soit valide et démontrons qu'elle reste valide pour le rang n.

Les intérêts de l'emprunt pour l'année n sont : ce qui permet d'écrire que le capital remboursé pour la même année est :

De proche en proche on peut simplifier cette expression :

CQFD

Ayant exprimé et à partir des données K, A, t et p (la durée d'emprunt), chacune de ces données peut donner lieu à une question intéressante :

  • Quelle est la durée optimale pour rembourser K, connaissant t et A ?
  • Quelle est l'annuité/mensualité connaissant K, t et la durée ?
  • Quelle est le capital empruntable connaissant A, t et la durée ?
  • Etc.

Durée optimale de remboursement

On cherche à connaître p tel que .

Pour cela on a besoin de transformer la somme en formule simple, nous allons donc faire une petite digression. Or, puisque on a affaire à une suite de raison 1+t.

Si on note la somme précédente s'écrit :
On va utiliser une petite astuce :
Pour écrire :
Et au final :

La digression étant terminée, reprenons notre calcul :

Donc :

Donc, si on connait la mensualité que peut se permettre l'emprunteur, le capital dont il a besoin et le taux en vigueur pour la banque, on peut en déduire la durée d'emprunt idéale. En utilisant la formule précédente, on peut donc faire le petit outil de calcul ci-dessous :

ParamètresDurée idéale
Capital emprunté : �
Taux usuraire : %
Mensualité idéale : �

C'est l'outil idéal pour optimiser son emprunt en faisant varier légèrement les paramètres de la banque, i.e. c'est avec ça que l'on négocie !

Calcul de l'annuité

Si on fixe le capital emprunté K, ainsi que le taux et la durée on peut calculer l'annuité et donc la mensualité d'un emprunt. C'est typiquement ce qu'imprime une banque à son client en appelant ça une "simulation".

Pour calculer cela on reprend le calcul et on écrit :

ParamètresAnnuité / mensualité
Capital emprunté : �
Taux usuraire : %
Durée en années : %

Capital empruntable

Pour terminer avec ces mini-outils, si on fixe la durée, le taux et la mensualité, on peut calculer le capital empruntable par le client à l'aide du calcul suivant (en se souvenant bien que ) :

Et pour finir :

ParamètresCapital empruntable
Durée en années : %
Taux usuraire : %
Mensualité idéale : �

Cotisations sociales françaises


10 mars 2010

Dans le but d'apprendre un peu ce que contiennent les fiches de paies en France, j'ai décidé de m'attaquer à leurs décompositions : qu'est-ce que le plafond de la sécurité sociale ? Qu'entend-t'on par charges salariales et patronales ? etc. En m'informant je me suis rendu compte qu'il ne fallait pas énormément de code pour simuler une fiche de paie qui convient dans la majorité des cas. J'en ai donc fait le mini-outil ci-dessous que vous pouvez nourrir avec vos paramètres : le salaire brut souhaité, l'effectif de la société etc.

Ceci permet de constater qu'il y a une énorme différence entre l'argent décaissé par un employeur et ce que reçoit effectivement le salarié en bout de chaîne : la sécurité sociale, les caisses de retraites, les impôts et tout un tas d'autres organismes se servent au passage. C'est sublime...

Pour info, ce que j'appelle le salaire "patronal" est parfois appelé "superbrut".

Bien évidemment, ce code datant de 2010, il y a sûrement quelques dispositions qui ont dû changer mais c'est plus que suffisant pour se rendre compte de l'environnement économique et politique dans lequel toutes les entreprises et tous les salariés évoluent, souvent sans même en avoir conscience. De plus, ça va sans dire mais ça va toujours mieux en le disant : n'utilisez pas ces tableaux dans votre comptabilité officielle, ou alors à vos risques et périls : si ces fiches de paies sont valables pour comprendre le mécanisme et faire un prévisionnel, les quelques points manquants pourraient vous attirer des ennuis avec le bien-aimé fisc !

A noter que j'en ai profité pour calculer le montant de l'impôt sur le revenu basique (salarié, non-rentier, célibataire) et un calculateur de "salaire inverse" : on indique le salaire net souhaité et l'outil calcule automatiquement le salaire brut qui correspond :)

Le poste L'entreprise Impôts Calcul inverse
Salaire brut :
Brut annuel _
Nb d'heures :
Prix d'une heure : 000
Heures supp. :
Cadre ? CDD ?
Effectif :
Salaire patronal : _
Patronal annuel : _
Net / brut : _
Net / Patronal : _
Net mensuel : _
Net annuel : _
IR : _
Taux marginal de _
Net :
Brut : _
_
_
_

Pour réaliser ce module, j'ai dû consulter les sources suivantes :

Accueil1 2 3 4