Gregoire Penverne - Developpeur PHP freelance PARIS

Si vous réalisez des applications facebook, vous apprécierez sûrement le framework css/javascript proposé par @clmnsk@mdo et @fat. Il s'agit d'une feuille de style, accompagnée de plusieurs plugins javascript (facultatifs), permettant d'utiliser un design similaire à celui de facebook. L'idée étant de mieux intégrer vos applications à facebook. On y retrouve un système d'onglet, de barre de navigation, d'input/textarea, d'infobox… Un bref aperçu de ce que cela permet de faire: Si le css permet de faire pas mal de trucs sympas, je trouve néanmoins que le javascript n'est pas vraiment très poussé. Même s'il permet d'utiliser des fenêtres modales (parlons, grosso-modo, [...]

Cela peut arriver: vous faîtes du freelance, et le client ne semble pas daigner payer. Quelles solution ? csskillswitch.com/ En fait, le principe est très simple: le site héberge votre css, et vous le désactivez quand vous le souhaitez. Le site affichera une page noire à la place du joli site que vous avez codé. A essayer sur http://csskillswitch.com/

Avec l'ajax, vous pouvez précharger certains éléments. En attendant le chargement il vous faudra afficher une icône afin d'informer l'utilisateur que le préchargement est en cours. Il y a le très pratique ajaxload.info qui le fait très bien, mais il existe encore plus complet. CanvasLoader vous propose en effet de tout personnaliser: couleur, diamètre, etc. Et le mieux, c'est que votre icône utilisera le canvas html5 pour s'afficher, grâce à une librairie qui vous est fournie gratuitement.

Le site templatemonster vous propose de découvrir 17 frameworks CSS. Je vous invite, à mon tour, à les découvrir, et dénicher (peut-être) votre futur compagnon de WebDesign :) 1. Baseline 2. BlueTrip 3. 1KB CSS Grid 4. SenCSs 5. FEM CSS 6. The Square Grid 7. Atatonic 8. 960 GS 9. 520 GS 10. Tiny Fluid Grid 11. 52 Framework 12. Compass 13. Formee 14. InstantBluePrint 15. Elements 16. 1 line CSS Grid Framework 17. Less Framework D'après : 15+ Helpful Free CSS Frameworks

Comme je le mentionnais dans l'article  » Facebook : Meta OpenGraph et validation w3c  », Facebook propose de nombreuses balises à insérer dans votre header. Même si celles ci nécessitent tout de même de bien checker sa validation w3c (si, bien entendu, cela figure dans vos priorités…), elles constituent, néanmoins, un formidable outil de diffusion de vos actualités.   Selon moi (contredisez moi, j'aime beaucoup :) ), la balise essentielle est la balise « fb:admins ». Dans cette balises, vous insérez les id facebook des admins du site (il s'agit donc d'id de comptes facebook). A partir de là, de nouveaux outils facebook vont [...]

Facebook vous propose d'ajouter des balises META sur votre site afin de mieux l'identifier dans l'OpenGraph : id de l'admin, titre, description, type de site, etc. Ces balises sont de la forme: <meta property="og:tag name" content="tag value"/> Vous trouverez ainsi tout un tas de balises à ajouter sur la page des plugins sociaux de facebook (« step 2″). Si l'intention me semble louable et le concept plutôt pratique, il n'en reste pas moins que Facebook a tendance à se croire le maître du monde, et pourrit votre validation w3c avec ces balises. Car la w3c ne reconnaît pas ces balises OpenGraph. Comment [...]

Depuis quelques temps, twitter propose un bouton « follow » (« suivre »). La documentation officielle est bien faîte, puisqu'un générateur en ligne a été mis en place. Il vous suffit de vous rendre sur http://twitter.com/about/resources/followbutton Vous pouvez voir un exemple en header de ce site.

Pour obtenir des dégradés, directement en css, voici comment procéder : Partons du principe que vous souhaitez obtenir un dégradé allant de #333333 à #111111   background: -webkit-gradient(linear,left top,left bottom,from(#333333),to(#111111)); background: -moz-linear-gradient(top,#333333,#111111); background-image: -o-linear-gradient(#333333,#111111); background: transparent 9; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333′,endColorstr='#111111′);   A destination des navigateurs utilisant le moteur WebKit (chrome, safari…), c'est cette ligne qui agit : background: -webkit-gradient(linear,left top,left bottom,from(#333333),to(#111111)); Pour les navigateurs utilisant le moteur mozilla (firefox, essentiellement) : background: -moz-linear-gradient(top,#333333,#111111); Pour les navigateurs de type opera : background-image: -o-linear-gradient(#333333,#111111);   Et pour internet explorer : background: transparent 9; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333′,endColorstr='#111111′);   Bien entendu, on pourra se faire la [...]

Jcray vous propose depuis quelques semaines un système de social-blogging. A l'image des boutons de partage twitter ou facebook, voici comment mettre en place un bouton de « jbloggage » sur les articles de votre blog (en javascript / html ), grâce à Jquery. Entre vos balises <head> et </head>, ajoutez <script type= »text/javascript » src= »http://jcray.com/scripts/jblog« ></script> A l'emplacement où vous souhaitez voir apparaître votre bouton de jbloggage, insérez : <img src= »http://jcray.com/images/jblog.png » data-url= »http://votre-lien.com/article/etc.html » data-text= »Un petit résumé (3500 caractères) présentant votre article » />   Le script de jcray fera s'ouvrir une popup dont l'adresse sera : http://jcray.com/share/?content=Un petit résumé (3500 caractères) présentant votre article&url=http://votre-lien.com/article/etc.html Vous pouvez, [...]

Chaque caractère accentué a sa correspondance en code html : par exemple é deviendra &eacute;. Pour diverses raisons, vous pouvez être amené à avoir besoin de cette correspondance (même si la fonction htmlentities, en php, le fait pour vous ) Voici les codes html des caractères accentués : &#160; &nbsp; espace insécable &#161; &iexcl; ¡ point d'exlamation inversé &#162; &cent; ¢ symbole centime &#163; &pound; £ symbole livre sterling &#164: &curren; ¤ symbole monétaire &#165; &yen; ¥ symbole yen &#166; &brvbar; ¦ barre vertical interrompu (/Mac) &#167; &sect; § signe section &#168; &uml; ¨ accent tréma &#169; &copy; © symbole [...]

Jcray.com permet de créer un » blog social », dans lequel vous pouvez importer vos publications ou celles de vos amis. Vous pouvez utiliser l'icône suivante pour faire un lien vers votre jblog :   Comme vous pouvez le voir, je l'utilise moi même sur mon blog (en haut à droite): l'icône pointe vers http://jcray.com/gpenverne , mon jblog sur jcray. En voici le code html : <a href= »http://jcray.com/gpenverne » target= »_blank »> <img style= »width: 30px;  » src= »http://gregoire-penverne.fr/images/jone.png » alt= »jblog de gpenverne – jcray » /> </a> Jcray mettra prochainement en place des outils de partage, pour partager et importer plus facilement vos posts.

Dans le cadre du recodage du site http://leplusintelligent.com (précédemment codé en php) en Ruby (oui oui, je suis dans ma période Ruby ^^), j'ai été amené à réétudier la version mobile, que je devais donc elle aussi recoder en Ruby (ô joie). Auparavant, j'utilisais Jqtouch pour faire des WebApps adaptées à l'iphone. Mais, au final, cette librairie est lourde, pour faire peu de choses, puisqu'ayant moi même déjà codé une couche ajax pour l'appli. J'ai donc « fouillé » dans le code jqtouch, et en ai extrait 3 lignes, qui font exactement le résultat que je souhaitais à la base, sans charger [...]

Si vous avez déjà développé un site internet, vous devez savoir combien internet explorer représente un obstacle au « libre épanouissement de nos délires créatifs ». Pour contourner le problème, la meilleure solution est d'utiliser des « hacks ». Concrètement : charger une feuille de style spécifique à la version d'ie utilisée par le visiteur. Voici comment rédiger les conditions nécessaires aux chargements des styles spécifiques Condition Positive <!–[if condition]> HTML <![endif]–> Condition Négative <!–[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!–<![endif]–> Dans chacun de ces cas, la condition peut être : IE N'importe quelle version d'IE lt IE version Versions inférieure à version lte IE version Versions [...]