LudiBlog

Référencement – 10 annuaires de sites web

LudiKadmin — Fri, 04 May 2012 14:56:38 +0000

Aujourd’hui, juste avant le week end, je vous fourni une petite liste de 10 annuaires de sites internet. Ce sont 10 annuaires très corrects et que l’on n’a pas forcément l’habitude de voir dans d’autres listings d’annuaires proposés sur la toile. Plusieurs de mes sites y ont été validés et dans des délais très corrects.

10 Annuaires de sites web :

Noogle.fr
EL ANNUAIRE
Net-Addict
AnnuPage
Annuaire Ludikreation
Lulu-search
AnnuSite
SEO-PRO
Next-Annuaire
internaide annuaire

Voilà pour cette petite liste sans prétention, ce sont quelques annuaires de sites web où il y a encore de la validation, qui ne sont pas forcément dans les listings habituels, mais qui permettent d’ajouter et de référencer nos sites web.

N’hésitez pas à laisser des liens vers d’autres annuaires de sites web dans les commentaires ci-dessous

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

jPages – Plugin jQuery – Pagination à effet pour vos sites web

LudiKadmin — Wed, 25 Apr 2012 17:33:42 +0000

Me revoici avec un autre plugin jQuery qui vous permet une fois de plus d’agrémenter vos sites web d’effets. Aujourd’hui je vous présente jPages qui permet de créer automatiquement une pagination sur votre site web.

jPages est un plugin jQuery qui permet une pagination avec entre autre, la possibilité de tourner les pages automatiquement, via le scroll de la souris ou même avec le clavier. Il permet aussi de gérer la vitesse, les effets, de customiser la barre de menu de navigation etc…

Vous l’aurez compris, ce plugin de pagination jQuery est complet.

Comment l’utilise-t-on ?

Appel du css et des librairies javascript :

Si on souhaite utiliser animate.css afin d’agrémenter notre pagination d’effets issus de ce fichier :

Création de la structure html qui accueillera notre pagination :

Puis appel du script javascript qui permettra la création de la pagination :

$(function(){

$("div.holder").jPages({
containerID : "itemContainer"
});

});

Et là, vous avez votre pagination en jQuery de base proposée via ce plugin.
Bien entendu il existe une multitude d’options et le css est entièrement modifiable.

La page officiel de ce plugin jPages avec toutes les démos qui vont avec et les explications.
Puis la page de téléchargement

Encore un bon plugin jQuery

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace

LudiKadmin — Wed, 18 Apr 2012 10:23:47 +0000

Une belle petite réalisation de plugin jQuery personnalisable qui permet de réaliser un menu déroulant et de transformer les menus ul>li à 2 niveaux d’imbrication (ul>li>ul>li>ul>li) en menus déroulants animés.

Le plugin DropDown Menu, va vous permettre de réaliser ce menu déroulant. c’est une réalisation Française, donc vous pourrez trouver toutes les informations nécessaires sur le site du ou des auteurs.

Je vais donc simplifier les explications d’utilisation de ce plugin jQuery :

Appel des css et librairies nécessaires au fonctionnement du plugin :

Puis ciblage de l’élément à transformer :

Il existe des options et la possibilité de personnaliser ce menu, toutes les informations sur la page officiel du plugin jQuery DropDown Menu

Lien pour télécharger le plugin

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

Récupérer un Favicon (.ico) en PHP via Google

LudiKadmin — Tue, 17 Apr 2012 17:34:50 +0000

[Petite astuce du jour]

Voici une petite fonction en PHP sans prétention pour récupérer le favicon (.ico) d’un site web via google. En effet, grâce à l’url http://www.google.com/s2/favicons?domain=URL_DU_SITE google renvoit le .ico du site « URL_DU_SITE » et si ce dernier n’a pas de favicon .ico google renvoi un petit favicon en forme de globe bleu.

Voici une manière simple d’utiliser cette petite action fournie par google et en php, grâce à une petite fonction rapide :

function get_favicon($url_site){

$google_url = 'http://www.google.com/s2/favicons?domain=';

$url_site = str_replace('http://', '', $url_site);

return $google_url.$url_site;

}

echo '.get_favicon('www.ludikreation.com').'" alt="" />';

Voilà une petite astuce simple et basique

Bon code à tous !

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

Glisse – Plugin jQuery – Faites défiler vos images

LudiKadmin — Sun, 15 Apr 2012 12:03:44 +0000

Comme promis, un nouvel article dans le blog pour officialiser leurs retours !

Aujourd’hui, on va parler de Glisse.js, un plugin jQuery qui va vous permettre d’ajouter une lightbox à vos sites web. Ce plugin utilise beaucoup de nouveautés CSS3, ce qui fait que ce n’est pas réellement supporté sur tous les navigateurs. mais ce plugin est un bon travail et le rendu est plutôt agréable, découvrez-le, ne serait-ce que pour voir les transitions proposées.

Comment utiliser ce plugin jQuery pour un usage simple et classique :

Insertion de la librairie :

Intégration de la feuille de style de base :

Ajouter un groupe d’image (relié par l’attribut « rel ») :

Vous noterez que l’image de grande taille est annoncée via l’attribut « data-glisse-big ».
Si vous souhaitez un titre avec l’affichage de l’image en grand, il faut ajouter un attribut « title », comme ceci :

Puis l’appel du plugin en javascript :

Et là, vous obtenez votre rendu.

Il existe quelques options et variantes que vous pouvez découvrir sur le site du plugin jQuery Glisse.js

Et pour télécharger le plugin : https://github.com/Victa/glisse.js/zipball/master

Bon code à tous

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

Retour progressif des articles sur LudiBlog

LudiKadmin — Sun, 15 Apr 2012 11:23:12 +0000

Comme vous avez pu le constater ces derniers 2/3 mois, c’était un peu le silence radio sur le blog. Je suis toujours dans le coin et je reviens petit à petit.

En effet, de gros projets et certains aléas de la vie ont fait que j’ai dû me couper de toutes mes activités annexes, dont les articles du Blog.

Mais je suis de nouveau ici et j’ai pour l’occasion tout rénové sur le site LudiKreation Conception web et Référencement pour prendre un nouveau départ pour 2012 et me réorganiser afin de garder un fil conducteur constant pour les articles du blog.

Dans l’après-midi, je vous concocterai un nouvel article (certainement sur jQuery) pour officialiser ce retour

Encore merci à tous mes lecteurs !

Franck

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

Chocolat – plugin jQuery – La visionneuse d’image pratique

LudiKadmin — Thu, 19 Jan 2012 15:24:59 +0000

Je reviens de nouveau avec un plugin jQuery. Cette fois, c’est une réalisation française : Chocolat. Chocolat permet de visualiser une à plusieurs images sans quitter la page de votre site web. Le plugin jQuery laisse à l’utilisateur le choix de regrouper une série d’image sous un lien, ou de laisser apparaître les images sous forme de miniatures. Cette visionneuse peut apparaitre soit en pleine page, soit dans un bloc de la page.

Utilisation du plugin :

Appel des librairies et fichiers js / css :

Création des éléments html qui seront touchés par le plugin :

Puis la mise en marche du plugin :

Puis vous aurez tous vos liens qui seront affectés par le plugin jQuery Chocolat, au clic vous pourrez visionner vos images sans avoir à changer de page.

Il existe plusieurs options :

container :
Définit si l'interface chocolat va s'ouvrir et occuper toute la page (par defaut), ou si elle doit s'ouvrir dans un bloc particulier de la page. (facultatif)

displayAsALink :
Permet de regrouper les images sous un seul lien (true) ou de laisser le html tel quel (pour laisser des miniatures apparentes par exemple) (false : par defaut). (facultatif)

linkImages :
Définit si l'on peut passer d'une image à l'autre sans fermer la visionneuse (true : par defaut), ou si les images restent indépendantes. (facultatif)

overlayOpacity, overlayColor :
Permettent de définir l'opacité et la couleur du fond. (facultatif)

linksContainer :
Permet de définir l'élément qui contiendra le lien vers la série si displayAsALink vaut true (facultatif).

Pour plus d’information sur ce plugin, rendez vous sur la page officiel de Chocolat
Pour visualiser une démo, c’est par là

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

Slidorion – Plugin jQuery – Un Slider couplé à un menu accordéon et bien plus !

LudiKadmin — Wed, 28 Dec 2011 21:16:38 +0000

Vous cherchez un slider en javascript ? Mieux, en jQuery ? De plus, couplé à un menu accordéon avec du contenu afin de rendre l’utile à l’agréable ? Slidorion est le plugin qu’il vous faut. En effet, vous allez pouvoir faire défiler des images (avec textes, html etc… ou non) avec un menu associé et son bloc de contenu. Autant dire que ce plugin jQuery est intéressant pour agrémenter un page web.

Comment utiliser ce plugin jQuery :

Importer les librairies dans le document (dans le « head » – css+js) :

Vous l’aurez compris, easing est nécessaire au bon fonctionnement de Slidorion.
Télécharger Easing

Construire la structure qui deviendra notre Slider à menu :

<div id="slidorion">
<div id="slider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>

<div id="accordion">
<div class="link-header">New Features</div>
<div class="link-content">

</div>
<div class="link-header">A Simple Image</div>
<div class="link-content">

</div>
<div class="link-header">Background Image w/ HTML</div>
<div class="link-content">

</div>
</div>
</div>

Et l’initiation basique du plugin :

$(document).ready(function(){
$('#slidorion').slidorion();
});

Bien entendu, il existe de multiples options, comme la vitesse de changement, des effets tels que les fondus, les intervalles etc…

Vous pouvez directement télécharger le plugin Slidorion.

Vous avez des démonstrations complètes sur le site du plugin jQuery Slidorion.

Un bon petit plugin jQuery bien pratique.

Et vous qu’en pensez vous ?

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

s3Slider – Plugin jQuery – Un slider simple pour vos sites web

LudiKadmin — Thu, 15 Dec 2011 13:24:02 +0000

Un petit article sur un plugin jQuery très simple, qui permet de mettre en place un slider pour vos sites web.

Vous le savez certainement, le site du Framework javascript jQuery et plus particulièrement la partie des plugins a été victime d’une malheureuse erreur de manipulation, faisant ainsi perdre une grande partie des plugins enregistrés sur le site de jQuery et ce, sur plusieurs mois (voir années). Ne vous étonnez donc pas si vous tombez sur un message de maintenance en vous rendant sur la partie plugins du site de jQuery. Tout ça pour vous dire qu’il est intéressant pour moi (et c’est le cas de pas mal d’acteurs du web) de vous dégoter des plugins jQuery et de vous les présenter, et ainsi d’avoir plusieurs sources disponibles pour ces derniers.

Bon, revenons en à notre plugin du jour, à savoir s3Slider, qui comme son nom l’indique est un slider. Un slider qui agrémentera vos sites web.

Pour moi, le meilleur des sliders à l’heure actuel reste Skitter, mais certains d’entre vous auront peut être besoin de quelque chose de beaucoup plus basique et s3Slider peut répondre à ce besoin.

Voilà la manière de l’utiliser :

Code à insérer dans le head de votre fichier.

Ensuite :

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="monimage.png" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="monimage2.png" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Les blocs qui deviendront un slider. Images + textes.

Puis :

#s3slider {
width: 400px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Le code css d’exemple à modifier comme bon vous semble.

Et pour finir :

$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

Et l’appel à la méthode du plugin afin de transformer tous ces jolis petit blocs en un slider simple (avec pour cet exemple, un changement d’image toutes les 4 secondes).

Retrouver le plugin sur cette page web

Pour visualiser les démonstrations.

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

jCoverflip – Plugin jQuery – Le Coverflow simple et efficace

LudiKadmin — Tue, 06 Dec 2011 14:11:41 +0000

Je reviens avec un article sur un plugin jQuery qui va vous permettre de réaliser un ou plusieurs Coverflow de manière simple et efficace. Je dis simple si vous possédez des notions de jQuery, bien entendu. Ce plugin, c’est jCoverflip, qui utilise le framework javascript jQuery (normal) et jQuery UI (disponible ici).

Voici un exemple basique de l’utilisation de ce plugin jQuery :

Appel des librairies utiles au bon déroulement des opérations

L’élément avec l’ID #flip se verra touché par l’effet de jCoverflip.

<ul id="flip">
<li><a href="..."><img ... /><span class="title">My title</span></a></li>
<li><a href="..."><img ... /><span class="title">Another title</span></a></li>
...
</ul>

On s’aperçoit que l’élément avec l’ID #flip est une liste « ul » avec lien, image et titre. Pour le titre, il est possible d’utiliser l’attribut « alt » de l’image ou bien d’utiliser un attribut title dans le « li ».

Et là votre Coverflow est fonctionnel.

Bien entendu, il y a de multiples options et variantes, options disponibles sur cette page.

A savoir qu’une version pour Drupal existe.

Retrouver le plugin téléchargeable sur ce lien et une démonstration ici.

Par contre on s’aperçoit que le plugin jCoverflip est utilisé avec une version 1.3 de jQuery, à l’heure où j’écris ces lignes nous en sommes à la 1.7, donc à tester sous cette dernière version.

Bon code à tous !

EDIT DU 02.01.2012 :
Le plugin ne fonctionne pas forcément avec une version récente de jQuery, pour cela, on peut retrouver une version plus fraiche de ce plugin faite par l’auteur et qui devrait fonctionner : https://github.com/NewSignature/jcoverflip

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">