LudiKreation, en plus d’être beaucoup plus agréable à l’œil, est ergonomiquement parlant, plus fluide et simple de navigation. De plus, il est doté d’un système de gestion de contenu, un vrai. Créé à partir d’un Framework maison, il est idéal pour présenter l’entreprise (auto-entreprise).

Sur ce nouveau site, vous avez dorénavant :

- une vrai page de présentation
- une page dédiée à nos réalisations
- une page informative concernant nos tarifs
- des articles
- une gestion et un aperçu de la communauté LudiKreation
- bientôt des goodies
- une page de contact claire
- et un pied de page agréable et utile

Le site s’étoffera de nouveaux modules prochainement, mais vous pouvez déjà profiter de ce dernier.

Lien vers le site : http://www.ludikreation.com – LudiKreation pour vos projets web.

Et surtout, n’hésitez pas à laisser vos commentaires, ici par exemple

Exemple d’utilisation :

Vous affichera dans l’élément #map1 une map (google maps) pointant vers un lieu avec les coordonnées mentionnées.

Il existe beaucoup de paramètres et d’options divers, comme afficher des images (sous forme d’icônes) à des points bien précis de la map etc … La doc est simple et explicite, même en anglais : doc.

Site du plugin gMap : http://gmap.nurtext.de/

Picnik est l’un des premiers services d’édition de photos en ligne. Il permet de :

- recadrer les photos
- retoucher les photos
- ajouter des effets aux photos

et tout ceci en ligne.

Google annonce qu’il n’y aura pas de modification du service, mais plutôt des améliorations. Affaire à suivre.

Sources :
L’annonce sur le blog officiel de google
L’annonce sur le blog officiel de picnik

Ma source

Vous devriez donc facilement trouver votre bonheur sur ce site, du moins il y aura certainement contribué

Lien : http://www.joomlatutos.com/template/
Source : http://www.joomlafrance.org/Les_News/News_proposees/Templates_a_telecharger.html

Elle apporte notamment la dernière et nouvelle version de JQuery, mais surtout une optimisation non négligeable de la consommation de ressources au niveau des traitements avec la base de données, voici le changelog :

- Mise à jour de sécurité.
- Internalisation du calcul du montant à payer dans le moteur de THELIA au lieu de placer ce calcul dans les plugins de type paiement. (permettant de jouer sur le montant dans aprescommande) –> pensez à mettre à jour vos modules de paiement pour profiter de cette nouveauté.
- Ajout de l’entreprise dans les adresses de livraison.
- Jquery 1.4.2.
- Optimisation de la connexion à la base de données.
- Modification de la gestion des factures (pensez à mettre à jour client/pdf/facture.php).
- Possibilité de défalquer le stock à la commande ou au passage en statut payé. (ajout d’un attribut à la classe PluginsPaiements $defalqcmd, prenant pour valeur 0 ou 1).
- Inclusion récursive (possibilité de mettre des #INCLURE dans des fichiers déjà inclus).
- Rajout dans l’archive de Thelia du moyen de paiement CMCIC (http://contrib.thelia.fr/spip.php?article143)
- Mise à jour de sécurité du plugin TinyMCE (pensez à remplacer client/plugins/tinymce)
- Ajout d’une variable emailfrom paramétrable permettant de choisir l’adresse source lors de l’envoi des mails de confirmation.
- Ajout d’une variable memcache permettant d’activer ou de désactiver l’utilisation de memcache

Source : ici

Voici un exemple de code le plus simple disponible avec ce plugin et qui donne le résultat du dessus :

et l’élément qui recevra l’autocomplétion :

Autant dire, simple.

Il existe plusieurs options, vous pouvez même créer votre thème et l’intégrer.

Pour télécharger le plugin gComplete : http://plugins.jquery.com/project/gcomplete
Page de démo : http://blog.xlune.com/2010/02/gcomplete

Le plugin est tout récent et le créateur assure vouloir l’améliorer prochainement.

Voici son utilisation :

On appel le plugin :

Puis on insère dans l’élément du DOM souhaité les effets du plugin jSocial :

La div qui va recevoir les éléments :

Voici un exemple pour avoir tous les liens sur ligne et centrés

Voici un exemple pour avoir une partie des liens en miniature

Voilà c’est simple à mettre en place et c’est toujours utile.

Lien vers la page du plugin jSocial : http://plugins.jquery.com/project/jsocial
La page de démo avec les exemples : http://demos.thatryan.com/jSocial

Il y en a des connus et d’autres beaucoup moins. Mais chacun possède un petit truc qui fait la différence. Étant donné que je suis dans le développement web, ne vous étonnez pas de retrouver essentiellement des profils liés à internet et la création web. Allez c’est parti :

Les Profils orientés veille web et développement internet :

@Turone
@Kriisiis
@pixojob
@detailsch
@ruhanirabin
@ChrisDovetta
@actweb
@VincentPlancon
@ipatate
@enyweb_fr
@danielbroche
@dixkatre
@jeanlucr
@arnaud_thurudev
@CallMeDams
@moderateur
@camj59
@mikiweb
@awbc
@jbonnel
@Akostic
@vendeesign
@netmad
@geekeriesfr
@atafoto
@jeromelambert
@mart1ndesign
@webrankinfo
@pierreyvesrevaz
@integrateur_css
@webgeekph
@programmateur
@rkueny
@maximeguernion
@LaFermeDuWeb
@Ti_Pierre
@nathansmith
@Developpez

Les Profils orientés actualités, reportages, marketing et/ou le monde de la toile dans sa globalité :

@sabinecoulon
@Emy_Sphere
@schalb
@nfact_france
@davidlouis
@AmyVernon
@AmeliePoirier
@karimacatherine
@MNImbart
@fdebailleul
@AntoineDupin
@narvic
@CaddeReputation
@sirchamallow
@geekactu
@iNicolas
@yasmine_kasbi
@lipstickjewel
@demarcq
@edolone
@kantken
@Guillon_Chris
@Audiofeeline
@JMJulie

Les Profils orientés développement web et/ou CMS/Logiciels/Outils spécifiques :

@Benoit_Gaillat
@yoandm
@Kerweb
@webagoo
@techpaf
@twoutils
@wolfor
@_j4k_
@manuraynaud
@planetejqueryfr
@jquery

Les Profils orientés réseaux, serveurs :

@ac_reseau
@flink91

Les Profils orientés design, graphisme, CSS et/ou inspirations:

@web_de
@designfollow
@DesignerDepot
@North_Motion
@iamstArk
@ouvanous
@ThouxArt
@visualswirl
@desigg
@TheWebBlend
@FeedmyappFr
@designriver
@1stwebdesigner
@ThreeStyles
@Steaw
@css_code
@designussion
@thecssawards
@cssmania
@cssjockey
@cssbeauty

Les Profils jeux, divers, connaissances et/ou coups de cœur :

@LaNaTouch
@CapRumb
@scriiipt
@ChaOdisiaque
@CapRumbo (101 ?)

Voilà pour cette petite liste, n’oubliez pas que vous pouvez me suivre ici : @LudiKreation

Bons Tweets à tous

Cet un article qui fait suite à une constatation suite à la réadaptation d’un de mes blogs. En effet, j’avais réalisé une doc sur TinyMCE qui apparemment était recherchée et pourtant totalement obsolète aujourd’hui, suite à cela j’ai perdu du Page Rank sur mon autre blog, je me suis donc dis, que ça pourra être toujours utile de fournir une telle doc.

Toutes les infos se trouvent sur ce billet, mais vous pouvez directement télécharger le PDF ici.

Aide à l’intégration de TinyMCE
En Français

Ce petit document est en français et est le fruit d’un travail personnel. En aucun cas cela fait partie de la doc officiel de l’outil TinyMCE. Ce document peut comporter des erreurs et je vous encourage à apporter votre expérience et vos remarques.

Le site officiel de TinyMCE : http://tinymce.moxiecode.com

TinyMCE l’éditeur WYSIWYG (présentation)
TinyMCE de Moxiecode est un outil JavaScript / HTML WYSIWYG (What You See Is What You Get), en logiciel Open Source sous licence LGPL. Il a la capacité de convertir les champs textarea HTML ou d’autres éléments HTML en éditeur de texte. TinyMCE est conçu pour s’intégrer facilement à divers systèmes de gestion de contenu. TinyMCE est utilisé avec de nombreux systèmes tels que Mambo, Joomla, Drupal, Plone, WordPress, b2evolution, E107 et phpWebSite.

Installation

Voici un bref résumé de la mise en place de TinyMCE et de sa version fr. Sans trop rentrer dans les détails nous allons voir comment mettre en ligne l’outil TinyMCE et le paramétrer afin de s’en servir de suite.

Importation de tinyMCE

1. Dans un premier temps télécharger les .zip sur le site de moxiecode, l’adresse :
http://tinymce.moxiecode.com/download.php

Il faut télécharger le Main Package, à l’heure où j’écris c’est le tinymce_3_3b2.zip, ainsi que le ou les pack(s) de langue que vous souhaitez, ici on va prendre le pack fr (à savoir que par défaut c’est un pack anglais), pour se faire cliquez sur le lien de « language packs » et cochez votre langue, puis téléchargez.

2. Une fois les téléchargements effectués, il vous faut extraire les dossiers et fichiers, pour se faire créez un dossier qui accueillera la librairie pour votre site (ex : js). Ensuite, faite une extraction de TinyMCE vers ce dossier (vous n’aurez besoin que du dossier tiny_mce qui se trouve dans jscripts), puis faites une extraction de votre pack de langue dans ce dossier tiny_mce. Ce qui aura pour effet de rajouter tous les éléments traduits pour la langue française.

3. Voilà TinyMCE est installé et prêt à être utilisé sur votre site web. Maintenant, il vous faut l’exploiter.

Utilisation

Il existe une multitude de façon d’utiliser TinyMCE, je ne les détaillerais pas toutes, mais juste assez pour les utilisations les plus courantes.

Donc sur la page où vous voulez faire apparaitre votre éditeur mettez le script suivant dans le < head > de votre page :

Puis voici un exemple de formulaire simple :

Voilà pour la forme la plus simple de l’éditeur en version française. En gros, le code signifie : Toutes balises textarea (mode : « textareas ») seront des éditeurs WYSIWYG en français (language : « fr ») et avec juste le strict minimum (theme : « simple »). Ce qui donne visuellement ceci :

Vous allez me dire, oui, mais moi je veux tous les boutons etc… On y arrive.

TinyMCE possède un thème, aussi simple d’utilisation à la base, mais avec plus d’éléments principaux. C’est le thème « advanced »

Donc, toujours aussi simplement, le code dans le < head > deviendra à la place :

Ce qui aura pour conséquence de vous fournir ce genre d’éditeur :

Votre éditeur est un peu plus complet, sans pour autant être plus difficile à installer. Non ?

Pour récupérer vos données, cela se passe comme un formulaire basique, donc pour résumer et faire simple, par exemple en php ainsi :

L’utilisation de base s’arrête là, mais TinyMCE ce n’est pas seulement ça. TinyMCE possède un système évolué de plugins, ce qui permet d’améliorer et d’agrémenter l’éditeur, voir même de faire des composants soit même. Il faudrait un ouvrage complet pour décrire tout ceci.

Aperçu des Plugins

Les plugins vous permettent de rajouter des éléments à votre barre d’outils, il y en a beaucoup. Pour les utiliser, il faut les intégrer comme suit :

A savoir que vous pouvez rajouter des boutons à cette barre d’outils via ces plugins et seulement avec le thème advanced, de cette manière :

Donc, en reprenant ces éléments cela donnerais :

Ce qui donnera :

Cela commence déjà à être très intéressant, on vient de compléter la barre avec un plugin qui permet de rajouter des données à la page qui sera générée par l’éditeur, tel que méta etc… et avec une gestion de tableaux. Il existe bien d’autres plugins que je vous ferais découvrir prochainement dans un autre document.

Quelques plugins disponibles

Voici un aperçu rapide de quelques plugins disponibles avec TinyMCE.

advhr : un éditeur avancé de barres horizontales < hr />.
Le composant à mettre dans une des barres theme_advanced_buttons est : advhr.

advimage : un éditeur avancé d’insertions d’images.
Le composant à mettre dans une des barres theme_advanced_buttons est : image.

advlink : un éditeur avancé de liens, avec popup, événements etc…
Le composant à mettre dans une des barres theme_advanced_buttons est : link.

bbcode : si vous mettez cela dans les plugins, tinyMCE ressortira toutes les balises en
bbcode.

directionality : pour indiquer la direction du texte.
Les composants à mettre dans une des barres theme_advanced_buttons sont : ltr et rtl.

emotions : pour intégrer des émoticons.
Vous pouvez en rajouter dans le dossier images du plugin emotions.
Le composant à mettre dans une des barres theme_advanced_buttons est : emotions.

fullpage : permet de rajouter des données à la page qui sera générée par l’éditeur, tel que
méta etc…
Le composant à mettre dans une des barres theme_advanced_buttons est : fullpage.

fullscreen : permet d’avoir l’éditeur sur toute la page.
Le composant à mettre dans une des barres theme_advanced_buttons est : fullscreen.

insertdatetime : vous permettra d’insérer date et heure.
Les composants à mettre dans une des barres theme_advanced_buttons sont : insertdate (pour la date) et inserttime (pour l’heure).

layer : permet de positionner des calques.
Les composants à mettre dans une des barres theme_advanced_buttons sont : Moveforward (pour avancer), movebackward (pour reculer), absolute(pour créer le calque en position absolu), insertlayer (créer un nouveau calque).

nonbreaking : Le composant à mettre dans une des barres theme_advanced_buttons est : nonbreaking.

paste : permet de sélectionner tout, coller un mot ou un texte.
Les composants à mettre dans une des barres theme_advanced_buttons sont : pastetext (coller un texte avec ou sans saut de ligne), pasteword (coller des mots), selectall (tout sélectionner)

preview : une prévisualisation de ce que donnera le texte tapé.
Le composant à mettre dans une des barres theme_advanced_buttons est : preview.

print : nous permettra d’imprimer le document.
Le composant à mettre dans une des barres theme_advanced_buttons est : print.

save : permet de sauvegarder le travail en cours.
Les composants à mettre dans une des barres theme_advanced_buttons sont : save (pour sauver) et cancel (pour annuler la sauvegarde).

searchreplace : permet une recherche dans le texte ou un remplacement de mots.
Les composants à mettre dans une des barres theme_advanced_buttons sont : search (pour chercher) et replace (pour remplacer).

style : un éditeur de styles css.
Le composant à mettre dans une des barres theme_advanced_buttons est : styleprops.

table : une éditeur de tableaux (balise

visualchars : (fonctionne moyen) permet de voir les sauts de ligne.
Le composant à mettre dans une des barres theme_advanced_buttons est : visualchars.

xhtmlxtras : un éditeur d’attributs complet.
Les composants à mettre dans une des barres theme_advanced_buttons sont : cite (insert une citation), acronym (gère les acronymes), abbr (pour les abréviations), del (pour effacer), ins (y faire une insertion), attribs (ajouter/modifier un attribut).

Ensuite vous avez des composants de base sans plugin :
bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, nu
mlist, sub, sup, charmap, undo, redo, outdent, indent, forecolor, backcolor, fontsizeselect, fontselect, formatselect, link, unlink…

La liste est bien plus longue, mais je la complèterais au cours d’un article qui sera dédié à TinyMCE et ses plugins…

Enfin

A savoir qu’il existe une version avec JQuery.

Je réaliserai un document pour une utilisation avancée de l’outil, maintenant vous avez les bases. C’est à vous de jouer et de tester, à savoir que le site officiel de TinyMCE, regorge d’exemples qui vous permettent d’obtenir ce que vous souhaitez. Avec ces bases, les exemples sur ces pages n’auront plus de secrets pour vous :

http://tinymce.moxiecode.com/examples/full.php

Pour voir le code source, cliquez sur le bouton « view source » et faites des essais.

——————

Merci d’avance pour vos retours et n’hésitez pas à contribuer.

Google confirme donc sa volonté de s’immiscer dans tous les domaines (qui marchent) sur la toile. Et là, pour le coups il s’agit d’approfondir ses outils sociaux. Intégré à notre boite GMail, Google Buzz utilise nos contacts pour créer un réseau social à sa manière.

Les atouts exprimés sur la page du site :

Aucune configuration requise
Vous êtes automatiquement connecté aux personnes qui échangent des e-mails et chattent avec vous sur Gmail.

Contrôle des paramètres de partage
Vous décidez avec qui vous partagez vos buzz : avec la terre entière ou simplement avec vos amis proches.

Accès direct depuis votre boîte de réception
Les commentaires arrivent directement dans votre boîte de réception pour vous permettre de suivre plus facilement le fil de la conversation.

Utilisation facile des photos
Vous pouvez consulter les photos comme vous le souhaitez (vignette ou grand format) directement depuis le corps du message.

Connexion aux sites que vous utilisez déjà
Connectez-vous à vos comptes Twitter, Picasa, Flickr et Google Reader.

Mises à jour en temps réel
Les nouveaux messages apparaissent instantanément, sans qu’il soit nécessaire d’actualiser la page.

Un délicieux taco : Le meilleur des posts
Buzz vous recommandera les meilleurs posts pour que seuls ceux susceptibles de vous intéresser s’affichent dans votre boîte de réception.

Buzz sur votre mobile
Consultez les buzz postés près de vous et à votre tour, géolocalisez les vôtres.

Voilà, encore un nouveau réseau social, mais avec google on peut toujours s’attendre à des surprises (parfois très agréables). Donc, il nous reste plus qu’à tester…

Site du projet : http://www.google.com/buzz

Vidéo :