Archives pour la catégorie ressources

BingMap, un plugin jQuery pour afficher des cartes bing Map sur votre site

Publié le par
5

Un plugin jQuery pour une alternative à Google Map, qui fonctionne sans payer en HTTPS  ?  Voilà BingMap.
Depuis presque un an que j’ai fini de coder la version 1, je le rends enfin public. Sur Github et sous licence BSD, avec un site qui va avec, elle n’est pas belle la vie ? Je me suis basé sur la dernière version de l’API, la 7 histoire de fournir une solution qui roxe du poney.

Concrètement, qu’est-ce que vous pouvez faire avec ce plugin :

  • Afficher une map (la base quoi)
  • Afficher 1/plusieurs markers (pin dans le jargon Microsoft) et attacher des évènements à chaque Pin.
  • Attacher des évènements à la carte
  • Utiliser l’API REST de Bing (la grande classe hein ;) )
  • Changer le type de carte, le zoom, la rendre zoomable ou pas, draggable ou pas…
  • etc.

Le plugin est jeune, mais est assez complet je pense pour répondre à beaucoup de besoin. De plus Bing possède de nombreux avantages comparé à Gmap :

  • Cartes beaucoup plus fluides et réactives
  • Les cartes sont belles (ok c’est subjectif)
  • On peut l’utiliser à travers HTTPS sans payer !

Un exemple de code :

Ici on affiche une carte, un pin avec une infobulle qui s’affiche au survol.

Après le seul “problème” s’il en est un, il faut une clé d’API, rassurez-vous ce n’est pas sorcier on en a pour 2min à peine. J’en parlais ici sur Creatiq, il y a quelques mois.

Alors, bien sûr, initialement il a été développé pour répondre à notre besoin chez Procheo (là où je bosse), il peut donc manquer certaines choses. Dans cette version 2 j’ai ajouté des fonctionnalités, mais je passe peut être sur des détails. N’hésitez donc pas à me donner des retours.

Merci pour son aide et ses conseils à Mathieu Robin.

Le site du plugin BingMap : http://colibri-libre.org/cyaneus/bingmap/
La page GitHub de BingMap : https://github.com/dhoko/bingmap

GoMap : non pas un mais, The ULTIMATE plugin jQuery pour Google Map (v3)

Publié le par
9

Aujourd’hui j’ai joué au roi Arthur, j’ai fait ma quête pour le Graal. Une multitude de plugins Google Map sont passé sous mon œil de lynx, ouverts sur mon Netbeans à les scruter, dans la documentation en quête de fonctionnalités poussées. Grande fut ma colère quand je vis qu’ils étaient tous statiques et inutile pour mon projet. Les mieux ? Aussi dynamique qu’une Grand-mère au 100mètre, c’est pour dire.

Utiliser une API ça veut aussi dire pouvoir être flexible… la flexibilité n’est pas le point fort de ces plugins. Rhaa perfides plugins, mon épée les a tous occis.  De plus le chevalier JavaScript me fis défaut, le vil refusa de me porter assistance, afin que je puisse monter ma solution maison avec. Vil maraud !

Quand soudain, au bord du gouffre qui mène au néant je vis une lumière, enfin une solution exploitable ! LE GRAAL était devant mes yeux !!!! Oyez Oyez braves gens, voici GoMap, le plugin dont tout le monde rêve pour Google Map.

Au bout d’un tunnel, une lumière… GoMap t’attend

C’est là qu’intervient le bien nommé GoMap, qui exploite l’API Google Map v3. De tous ceux que j’ai trouvé, c’est clairement le mieux. Au moins il ne se contente pas d’afficher uniquement des cartes, avec de beaux markers si on le souhaite.

Une belle carte avec Google Map

On peut faire des actions simples comme :

  • Déplacer un marker
  • Ajouter des markers
  • Des infobulles
  • Des infobulles dynamiques (un coup d’ajax pour laver le sol ;) )
  • AddEventListener pour les intimes, sur marker, map..
  • Donc -> Gestion des évènements (cf API Google Map v3)
  • …

Le meilleur étant la gestion des évènements, que je n’ai pas trouvé ailleurs… ou alors ce que j’ai trouvé, partait dans l’hyperespace dès qu’on faisait référence à l’API. Vous pouvez trouver pas mal d’exemples précis sur cette page : GoMap jQuery – Examples.

Alors, bien sûr elle est un peu plus lourde que les autres, 10.3Ko. Elle semble jeune, peu connu (j’ai creusé dans Google…) et plutôt dynamique, puisque sa dernière version la 1.3.2 est sortie le 7 juillet.

GoMap Plugin jQuery (site officiel) – GoMap download

Placeholder (formulaires HTML5) et CSS. Que les attributs soient !

Publié le par
11

Suite à une discussion l’autre jour avec un ami (ne connaissant pas le HTML5 et pas le CSS dans son intégralité) il m’a fait une remarque intéressante : Comment change-t-on la couleur du champ ?

En effet il est naturellement gris clair (darkGrey pour les intimes). Hors sur notre PSD il a mis le champ de texte en bleu ciel. Problématique. Laissant l’intégration à un autre (qui se forme ainsi), je lui avais dit de mettre placeholder en lieu et place d’onfocus (le JavaScript), le template étant en HTML5. Il m’a demandé de l’aide je lui ai dit à la volée via un sélecteur d’attribue. Travaillant sur autre chose je ne l’ai pas aidé et il est repassé sur Onfocus (je pensais faire ça que pour IE, m’enfin).

Voilà un petit mémo sur comment faire avec ce PlaceHolder et avec un sélecteur d’attribut.

Les sélecteurs CSS2

Ceux-ci doivent théoriquement être fonctionnel sous IE8 peut-être IE7 et peut-être pas sous IE6.

/*---css2---*/
/*-1-*/
input[placeholder]{color: #111;} /*Tous les placeholder*/
/*-2-*/
input[placeholder="Lancer une Recherche"]{color: #0000FF;} /*Contient exactement cette chaine*/
/*-3-*/
input[placeholder~="Recherche"]{color: #FFF000;} /* Contient au moins Recherche*/
/*-4-*/
input[placeholder|="Lancer"]{color: #FF0000;} /* Commence par Lancer suivit de - donc pas utile ici*/
  1. Cas 1 : Inutile, on personnalise tous les placeholder, trop générique on n’a pas assez de précision
  2. Cas 2 : Très (trop ?) précis, utile pour un cas précis à cibler.
  3. Cas 3 : Utile car on cible plusieurs champs de recherche à la fois ou alors plusieurs champs relié à l’élément recherche (identification)
  4. Cas 4 : Inutile sauf si vous écrivez Lancer-une-recherche ;)

Les sélecteurs CSS3

Non compatible IE<9 sinon ça passe partout.

/*---CSS3---*/
/*-1-*/
input[placeholder^="Lancer"]{color: #FF0000;} /*Commence exactement par Lancer*/
/*-2-*/
input[placeholder$="Recherche"]{color: #FF0000;} /*Finit exactement par Recherche*/
/*-3-*/
input[placeholder*="Recherche"]{color: #FF0000;} /* Contient au moins 1 fois Recherche*/
  1. Cas 1 : Très utile pour cibler précisément un élément (plus souple que le sélecteur de chaine)
  2. Cas 2 : idem
  3. Cas 3 : idem en vraiment plus souple

Pense bête

Est-ce qu’il ne faudrait pas un CSS reset qui cible aussi les placeholder ? Car mis à part la couleur les browsers ajoutent aussi du padding (chrome). Ou alors si quelqu’un en a un qui le fait déjà où une idée sur la question… faites-moi signe ;)

Font Comparer: testez, visualisez et récupérez le code de vos typo font-face (CSS3)

Publié le par
7

Font comparer est un outil en ligne qui vous sacrément pratique, avec lui vous pouvez comparer des dizaines de typographies différentes à la fois. Des typos que vous pouvez ensuite utiliser dans vos design sans images, car elles sont exploitables via font-face, une
propriété du CSS3 qui est exploitable aujourd’hui sans problème.

Comme vous pouvez le voir sur cette capture on peut tester ici les polices proposées par Google Fonts, ce qui fait déjà une bonne base, il y a aussi TypeKit (mais, seulement 2 typos pour le moment).  Le texte peut être personnalisé ou alors automatiquement généré via Lorem Ipsum (il y a un bouton).

Au survol de chaque extrait on remarque un GET FONT rouge qui apparaît. En cliquant dessus cette div noire apparaît. Simple, elle donne le code à mettre, le premier entre vos balises HEAD, le deuxième un exemple d’utilisation à reprendre dans vos CSS.

Allez sur Font Comparer

Livre : HTML5 pour les Webdesigner

Publié le par
6

Voilà j’ai acheté ce petit livre (90pages) il y a 2 jours chez Eyrolles à Paris. Même pas 1h de métro après j’ai terminé le livre. Oui il se dévore, inutile de dire il est passionnant. Ce n’est pas de la grande littérature mais, simple et rapide à lire.

Bon si vous cherchez un livre avec un peu de technique ce n’est pas celui-ci qu’il faut. On apprend beaucoup sur l’histoire du HTML5, sur quelques détails sémantiques… et sur les formulaires surement la partie la plus intéressante du livre. Le chapitre sur les balises est, assez décevant au final, il reste assez vague sur certains points comme sur les balises article footer section…

Mais, il explique très bien le concept du header ainsi que de la hiérarchisation des titres dans le HTML5. Autre absent : figure, figcaption…

Alors bien sûr le HTML5 en est à ses débuts, il faut attendre 2012 avant d’avoir quelque chose de « concret » sur le langage qui apporte du sens au web. Cependant certaines choses sont utilisables et seront utilisables d’ici peu de temps.

Un achat utile, franchement oui. Pour 12€ c’est honnête.

Communism, Where Dreams become True – Free Wallpaper

Publié le par
8

Voilà, hier soir subitement j’ai eu une envie : faire un fond d’écran. Je me suis donc exécuté en choisissant un thème que j’aime : le Communisme. Non pas que je sois un rouge, c’est juste que ça me fait bien rire.

L’étoile, la faucille et le marteau sont vectoriel et la typo du logo et de la petite phrase est la jeune Ubuntu. Et bien sûr un zeste d’humour dans ce wall (ainsi qu’une erreur minime).

Il est disponible en 2 couleurs (en 1920*1200) : Gris (capture) – Blanc (ou plutôt ivoire) (Format PNG)

MAJ Thème WordPress Sand, avec page d’option

Publié le par
5

Une grosse MAJ en fait, ce thème (l’ancien du blog) était assez statique. Malheureusement il demandait des compétences assez avancées pour l’utiliser. Suite à un échange avec Vincent d’Influence PC, j’ai mis à jour le thème en le rendant bien plus simple.

J’ai donc codé une page d’option pour ce thème, si vous l’utilisez un élément apparaît dans le menu d’administration : Sand Options. Voilà une capture de toute cette page d’option :

Voilà n’hésitez pas à agrandir un peu pour voir ce qu’il y a dedans, en résumé :

  • Personnalisation du logo, de la légende du logo
  • Personnalisation du lien vers la page de contact
  • Fonctions sociales (Ajout d’icône dans le header pour compte : Facebook, Twitter, Flickr, Delicious et Flux RSS)
  • Fonctions SEO (basique) : Mots clés, Description du blog, et ajout du script Google Analytics.
  • Sidebar compatible avec les widgets
  • Mais, aussi une animation en CSS3 dans le header (les bulles d’informations)

Voilou, les fonctions sont basiques mais, elles pourraient bien évoluer très bientôt (Mon nouveau thème bientôt disponible en DDL aura bien plus de fonctions. Il se pourrait que je les intègre…)

Bien sûr, c’est toujours sous Licence Beerware. Par contre pas de MAJ pour PluXml car, je ne sais pas comment recréer le même système avec ;)

Lien DDL – Aperçu en Ligne (pas mis à jour)

Add-ons Chrome/Firefox pour surfer en paix

Publié le par
15

Firefox/Minefield

BartTab (v2.1b1) : Cette extension est l’ami obligatoire des amateurs d’onglets. Car on ouvre vite beaucoup de page et la charge devient énorme, le browser se met à ramer… C’est là qu’intervient BarTab. Une fois installé il permet de mettre en sommeil les onglets, c’est-à-dire vous fermez le browser, vous le relancez et un seul onglet est actif !

L’avantage ? Vous pouvez démarrer Firefox avec 40 – 400 – … onglets aussi vite qu’avec 1 seul ! Vient ensuite la configuration, chez moi je le paramètre pour mettre en sommeil un onglet inactif depuis 3 minutes.
Avant je dépassais souvent les 900Mo, avec pas mal de pics au-delà du Giga de RAM. Désormais je monte rarement au-delà de 230Mo, même avec plus de 470 onglets ouverts !

Dictionnaire Français Classique et Réforme : C’est un simple dictionnaire histoire de surveiller l’orthographe (et uniquement l’orthographe).

Download StatusBar 0.9.7.1 : Une extension très pratique pour éviter d’ouvrir la petite fenêtre des téléchargements. Grâce à elle j’ai une barre qui se situe au-dessus de la barre d’état dans lequel se liste mes download. Elle n’apparaît que si l’on télécharge.

Firebug 1.6.0b1 : Un outil indispensable pour la mise au point d’un template. Il permet de faire des retouches sur le HTML,CSS… et de voir en live ce que ça donne. Pour ceux qui travaillent dans le web c’est indispensable.

FlashBlock 1.5.13 : Parce que le Flash c’est le mal, je le bloque partout ce qui rend la navigation bien plus agréable. Et si je souhaite le débloquer je n’ai qu’à cliquer sur le petit logo sur la page web et hop.

KeepTube : Pour télécharger les vidéos de : Youtube, Vimeo… en HD. Simple et efficace.

Chrome

Extension Abonnement RSS (par Google) -  2.1.2 : Un petit addon qui ajoute une icône RSS dans la barre d’adresse pour s’abonner aux flux du site simplement.

Firebug Lite for Google Chrome - Version : 1.3.1.7759 et FlashBlock - Version : 0.9.31 : cf firefox

SearchPreview for Google -  0.9 : Une extension qui n’est pas franchement utile mais, qui rajoute un côté agréable à Google en y mettant une preview de chaque site web.

Superbe capture d’écran : capturer et annoter -  2.3.1 : Une extension dédié à la capture d’écran (de la page web bien sûr ;) ). Il sait annoter modifier… Une extension très complète et très simple à prendre en main.

Mais aussi (suivant mon usage) : AdBlock – 2.1.4 : Pour bloquer la publicité.

Petit Constat

Les extensions Chrome sont bien moins efficaces que celles de Firefox, je parle pour Adblock et firebug du moins. Les performances ne sont pas au rendez-vous. De plus il manque une extension indispensable qui est NoScript. Pour contrer ce manque, je m’en remets à Chrome qui est censé être le navigateur le plus imperméable.

L’outil développeur de chrome, est vraiment très intéressant et donc remplace bien Firebug lite qui est assez, soit dit en passant, à chier.
Bien sûr ce ne sont pas les Meilleures Extensions à installer, non non non. Ce sont celles que j’utilise c’est tout ;)

Mes extensions ne fonctionnent pas !

Vous utilisez la dernière béta de Firefox (la béta 6 devrait sortir d’ici une semaine) ou alors vous surfez avec Minefield la version en développement de Firefox ? Il est donc normal que vos extensions soient parfois incompatibles. Suivez donc cette méthode : Rendre vos extensions compatibles Firefox 4. (Si le 4.* marche pas tentez 4.0b7, le 7 est le numéro de la béta actuelle, ici sous Minefield ;) )

Et n’hésitez pas à utiliser des extensions en phase béta, comme BarTab (ma version) et Firebug. Elles sont souvent à jour et apportent une meilleure compatibilité.

Que ton CSS soit simple et logique

Publié le par
5

Une feuille de style ça devient vite assez long, on y ajoute plein de choses et parfois il y a un peu de redondance dans le code. Quelques exemples :

L’effet float et text-align

J’intègre un template, je mets du float un peu partout, au final on arrive à une dizaine de float qui se baladent dans le code.  Il en va de même pour le texte qui se promène de droite à gauche en passant par le centre.

La solution est plutôt simple, on code des classes dédiées.

.left{float : left ;} .right{float : right ;} /* 2 classes dédiées au positionnement */
.aligncenter{text-align: center;} .alignright{text-align: right;} .alignleft{text-align : left ;} /* 3 classes dédiées au positionnement du texte */
.both{visibility: hidden; clear: both;} /* pour résoudre le syndrome du float */

D’où proviennent ces noms ? right et left car ce sont logiquement des positions. Les align* sont en fait celles que WordPress mets par défaut, travaillant sous WordPress je les adopte.

La classe both permettra d’éviter à ce qui se trouve en dessous d’une div avec float de se retrouver n’ importe où (pour ceux qui ne comprendraient pas lisez CSS : comprendre le fonctionnement de float et clear.) Personnellement je l’applique à un <hr />, car c’est ce qui me semble le plus logique.

L’effet box

Cette fois regardons le rendu notre page sur un browser, certaines choses sont similaires.

  • Des box
  • Des ombres CSS3
  • Des border-radius (CSS3)
  • …

Un exemple pour illustrer la chose. Ici on a deux box similaires (cas particulier : elles sont identiques). Hors si vous regardez le code, on observe comme sur cette capture 3 classes : box, left et right.. Pour la droite et une autre pour la gauche. Mais ce n’était pas une solution vraiment pertinente d’où cette structure actuelle. (qui peut encore être optimisé)

On combine les classes et on obtient la disposition souhaitée. On peut imaginer quelques exemples plus parlant, dans une sidebar par exemple :

<div class="blogoliste box right"></div>

Voilà dans cette div qui contiendra une liste de liens (la Blogoliste) on appliquera le style global d’une box et on la place à droite. Par exemple la personnalisation peut être ensuite un fond spécial… Je vous laisse imaginer.

On parle de box, mais on peut faire des classes pour regrouper les ombres du css3 si elles sont tout le temps les mêmes, une classe pour les annuler si nécessaire (par exemple j’ai une noshad pour mes images), une classe pour les coins arrondies…

Voilou, (je me doute bien que ce n’est pas du neuf pour certains ;) )
PS : comme vous pouvez le constater sur ce template, ce n’est pas encore ça. Pourquoi ? Parce que je ne le fais pas systématiquement

18 Menu CSS3 et (ou sans) Jquery

Publié le par
17

En ce moment je croise de sacrées belles choses sur le web, que ce soit niveau visuel ou alors niveau technique. C’est pourquoi je vous ai fait une petite sélection de 18 styles de navigation, qui sont en CSS3 avec un peu d’aide par Jquery, ou alors conçu avec Jquery. De quoi vous donner un peu d’inspiration dans vos prochains design et de voir qu’on peut bosser sans Javascript, tout en gardant des effets d’animations sympathiques.

CSS3 Minimalistic Navigation Menu

Démo – Article

CSS3 Menu using Border-Radius

Démo – Article

Simple Navigation using CSS3

Démo –Article

Halftone Navigation – CSS3 & Jquery

Démo – Article

Slide Out navigation using Jquery

Démo – Article

Fixed Fade Out menu CSS & Jquery

Démo- Article

Fancy Apple Icon Slider – CSS & Jquery

Démo – Article

A jquery menu style using CSS3

Démo – Article

CSS3 dropdown Menu

Démo – Article

A CSS3 Accordion Menu

Démo – Article

CSS3 Glow Tabs using Box-shadow

Démo – Article

CSS3 Menu Animation

Démo – Article

Sweet Tabbed Navigation CSS3

Démo – Article

Slick Menu using CSS3

Démo – Article

Awesome Bubble Navigation with Jquery

Démo – Article

Awesome Cufonized Fly-out Menu with jQuery and CSS3

Démo – Article

Beautiful Background Image Navigation with jQuery

Démo – Article

Rocking and Rolling Rounded Menu with jQuery

Démo – Article

Alors bien sûr ces démonstrations sont faites pour les vrais navigateurs. Exit Internet Explorer, préférez Chorme (ou mieux chromium), Safari, Firefox ou encore Opera (cependant quelques démonstrations CSS3 ne fonctionneront pas avec)