css 4 design » jQuery http://css4design.com Le blog de l'intégrateur web Tue, 16 Mar 2010 19:45:32 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 js4design.com — Quelques chiffres deux mois après… http://css4design.com/js4design-com-quelques-chiffres-deux-mois-apres http://css4design.com/js4design-com-quelques-chiffres-deux-mois-apres#comments Sun, 10 Jan 2010 21:37:41 +0000 Bruno Bichet http://css4design.com/?p=4826 J’ai lancé mi-novembre 2009 le blog js4design pour garder les bons liens Javascript et jQuery sous la souris. A l’exception du billet pour annoncer son lancement et des liens réguliers sur Twitter, je n’ai pas fais d’efforts particuliers pour le promouvoir. C’est pourquoi je suis très content des résultats que je tiens à partager avec vous :

Quelques chiffres

  • 15 536 Visites,
  • 29 740 Pages vues,
  • 7 811 Visiteurs uniques absolus.

A noter le pic de 994 visites le 30 novembre 2009 suite à l’annonce de l’ouverture du blog par Victor Brito. Ce qui fait d’Alsacreations la première source de trafic pour js4design. Sans oublier Planète jQuery et Planète Standard du Web que je tiens à remercier également.

Les statistiques font état de plus de 1 230 requêtes issues des moteurs de recherche Google :

  • jQuery (dans 479 requêtes),
  • Javascript (dans 295 requêtes),
  • Menu (dans 59 requêtes),
  • UI (dans 46 requêtes)
  • Ajax (dans 40 requêtes),
  • Pagination (dans 39 requêtes), etc.

Je vous fais grâce de la longue traine ;)

Pour finir, le billet le plus lu au moment où j’écris ce billet est 22 menus déroulants passés au crible.

Voici les 11 derniers script ou plugins qui ont particulièrement attirés mon attention :

J’en profite pour vous souhaiter une bonne et heureuse année 2010 (année de la milice ?) !

]]> http://css4design.com/js4design-com-quelques-chiffres-deux-mois-apres/feed 2 Afficher / masquer votre grille de base avec jQuery http://css4design.com/afficher-masquer-votre-grille-de-base-avec-jquery http://css4design.com/afficher-masquer-votre-grille-de-base-avec-jquery#comments Thu, 17 Dec 2009 12:07:00 +0000 Bruno Bichet http://css4design.com/?p=4513 Si vous travaillez avec une grille pour harmoniser la disposition des blocs sur la page, vous passez certainement du temps à afficher puis masquer cette grille pour vérifier que tout est en ordre. Pour cela on peut ajouter une classe CSS dans le code HTML ou mettre entre commentaires une ligne concernant le background de la page dans la feuille de style… Les deux solutions sont assez fastidieuses. C’est pourquoi, je vous propose une petite astuce toute simple qui s’applique à tout type d’intégration avec toutefois un bonus pour Wordpress que vous adapterez sans peine à votre CMS préféré.

Voici le code à ajouter dans votre template Wordpress si vous voulez afficher ou masquer la grille en production. Si vous travaillez en local (ou si vous n’utilisez pas Wordpress), supprimez le code PHP : 

<?php if ( is_user_logged_in() ) : ?>
    <a id="displayGrid" href="#displayGrid">Afficher/masquer la grille</a>
<?php endif; ?>
Le bout de code jQuery pour gérer l’événement : 
// Affichage de la grille si connecte
$("#displayGrid").click(function() {
    $("html").toggleClass("display-grid");
});
La règle CSS à mettre dans votre feuille de style : 
.display-grid #container {
    background: url(pix/grid.png);
}
Pour que le lien vous suive quand vous faites défiler la page : 
#displayGrid {
    position: fixed;
}

Mise en page alternative

Avec un peu d’astuce et d’espièglerie vous trouverez rapidement de nombreuses applications à cette astuce. Je pense notamment à la possibilité de proposer une mise en page CSS alternative aux visiteurs.

]]> http://css4design.com/afficher-masquer-votre-grille-de-base-avec-jquery/feed 6 Quelques liens Javascript et PHP http://css4design.com/le-petit-journal-de-l-integrateur-web-javascript-php-1 http://css4design.com/le-petit-journal-de-l-integrateur-web-javascript-php-1#comments Fri, 06 Nov 2009 07:14:15 +0000 Bruno Bichet http://www.css4design.com/?p=4094 Après le petit journal HTML5 et CSS, je continue la série de l’intégration web côté client avec Javascript (et plus particulièrement jQuery) et une pincée de PHP histoire de ne pas totalement laisser de côté la partie serveur.

Javascript

  • jQuery-Accessible-RIA — Collection de plugins pour jQuery repensés pour être conformes aux normes régissant l’accessibilité sur le web (WAI) : WCAG 2.0 et ARIA. Initialement développé pour améliorer les bonnes pratiques de développement front-end chez Namics, le pack se concentre sur les besoins récurrents en webdesign : lightbox, validation de formulaires et menus à onglets accessibles sont prêts à l’emploi. Via Web CSS Design.

  • Zooming with jQuery and CSS — Ce petit script jQuery très simple permettra à vos lecteurs de modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant (select).

  • Jquery Pagination System — Les systèmes de navigation sont généralement fait côté serveur et sont relativement gourmands en requêtes MySQL et en preprocessing PHP. Cette pagination est réalisée à l’aide de jQuery, côté client, donc. Un exemple à copier-coller est disponible pour vous faire une idée.

  • Javascript Framework Matrix — tableau comparatif des principaux frameworks Javascript : jQuery, Mootools, The Dojo Toolkit, Prototype, Script.aculo.us, Ext JS, Adobe Spry, BBC Glow et Yahoo! UI Library.

    Les exemples concrets de codes permettant de se faire une idée de la syntaxe et de la philosophie adoptées par ces frameworks : General, DOM Ready, DOM Basics, DOM Filtering, DOM Manipulation, Effects, Transitions, Events, Custom Functions, Ajax et Classes. Via LudiBlog.

  • jsbin — Cette application en ligne dédiée aux tests collaboratifs de code Javascript (y compris Ajax) créée par Remy Sharp (créateur de html5shiv) fait en sorte qu’Internet Explorer affiche les nouvelles balises structurelles disponibles dans HTML5.

  • Closure Library — Toute la puissance de développement de Google au service de cette bibliothèque Javascript qui s’ajoute à jQuery, Prototype, etc. Je serais curieux de savoir ce qu’en pense les experts : Google est-il plus rigoureux avec Javascript qu’avec HTML ?

  • Cheat SheetS pour développeurs web — 25 fiches pour avoir sous la souris l’essentiel pour travailler sur le web.

  • 88 liens pour l’intégrateur web — Au menu : Wordpress, jQuery, typographie, CSS, webdesign… Que du bonheur !

PHP

  • Un Chat élémentaire en Php/jQuery — Tout est dans le titre. Ce chat tout simple (outre qu’il permet une transition idéale pour passer de jQuery à PHP) se rendra utile dans moults occasions.

  • Roll Your Own PHP Framework — Série de trois tutoriels pour créer votre propre framework PHP. Propose l’ensemble des fichiers en téléchargement : 1. Part I : Réécriture des URL’s et système de fichiers — 2. Part II : Templates — 3. Part III : Interaction avec la base de données.

  • Passez à l’UTF-8 sans manquer une étape — Les soucis d’encodage sur un site web sont aussi nombreux que les éléments de la chaine du web qu’il faut prendre en compte : du format d’enregistrement des fichiers composant le document HTML jusqu’aux en-têtes renvoyées par le serveur, en passant par le charset indiqué dans la balise meta http-equiv, la base de données… etc. Ce tutoriel de Josselin Willette fait le point avec précision et concision, ce qui ne gâche rien.

  • 50+ Really Useful Tools For PHP Developers — Que l’on soit novice ou expérimenté, les outils utilisés pour développer ont un impact significatif sur la productivité et la qualité du code produit. Voir Les outils utiles pour les développeurs PHP pour la traduction française.

  • 25 New & Useful PHP Techniques & Tutorials. plein de code et d’idées pour vos développements : de la rotation d’image à la Facebook au parcours d’un répertoire avec PHP et jQuery en passant par la création de requêtes RESTful vous aurez l’embarras du choix.

  • Prepared Statements in PHP and MySQLi — Les requêtes préparées en PHP et MySQLi sont peu utilisées malgré qu’elles offrent une sécurité accrue pour vos applications web. C’est le moment d’en apprendre davantage.

]]> http://css4design.com/le-petit-journal-de-l-integrateur-web-javascript-php-1/feed 10 10 liens pour faire plaisir à votre intégrateur web http://css4design.com/10-liens-pour-faire-plaisir-a-votre-integrateur-web http://css4design.com/10-liens-pour-faire-plaisir-a-votre-integrateur-web#comments Sat, 19 Sep 2009 17:33:23 +0000 Bruno Bichet http://www.css4design.com/?p=3762 Cette liste de ressources devrait rendre de grands services à l’intégrateur HTML & CSS ainsi qu’au développeur web. en effet, vous y trouverez : un générateur de miniatures pour la page d’accueil de votre blog Wordpress ; des outils pour valider l’ensemble de votre site ; un fichier PHP pour gérer votre base de données et des plugins jQuery tous plus intéressants les uns que les autres, etc. Il s’agit du meilleur des bons plans que je propose sur mon compte Twitter integrateur_css. Stay tuned and mind the gap!

Wordpress : redimensionnez et affichez une miniature à partir des images de vos articles

Je vous ai parlé dernièrement (dans les bons liens Wordpress) du script get_post_images() associé à la fonction first_thumbnail() pour afficher une miniature en homepage, par exemple, en prenant la première image d’un article. Mehdi Kabab vient d’apporter une amélioration substantielle à la fonction first_thumbnail() pour prendre en compte le script timthumb qui permet de générer une miniature aux dimensions que vous voulez (via la bibliothèque graphique GD) plutôt qu’un redimensionnement HTML lourd de conséquence sur le poids de votre page d’accueil.

Vous pouvez voir cette petite merveille en action sur la page d’accueil de ce blog : les miniatures sont redimensionnées et affichées grâce à cet ensemble de fonctions. Pour les souhaits et surtout les remerciements c’est par ici que ça se passe ;)

Pages web et bases de données

  • Validateur — Validez votre site Web en entier grâce à l’outil de validation multipages (via truffo). Ce service est développé et maintenu par le Réseau Proze et s’appuie sur le service de validation du W3C qui détient les droits d’auteur de son service.

  • Adminer — est un outil tenant en un seul fichier PHP qui permet de gérer une base de données MySQL à la manière d’un phpMyAdmin light. Existe également sous forme de plugin pour Wordpress.

  • Firebug Lite — Ce simple fichier Javascript — disponible sous forme de bookmarklet — va superposer l’essentiel des commandes de Firebug à la page en cours.

Javascript et plugins jQuery

  • jLoupe-jQueryjQuery Magnifier Loupe — propose un zoom pour vos images. Utilise intelligemment la propriété longdesc pour zoomer à partir d’une miniature (thumbnail). Il reste possible de « fabriquer » la miniature avec les propriétés HTML width et height. (via Amicalement Web).

Attention tout de même au caractère peu accessible de cette solution basée sur l’attribut HTML longdesc qui permet de fournir une description de l’image pour les malvoyants comme me le rappelle Sébastien Delorme sur Twitter ici, ici et ici ;)

Cela dit, le script ne nécessite pas obligatoirement l’attribut longdesc pour fonctionner ; il est possible de déclencher la loupe en utilisant la classe jLoupe sur l’élément img concerné !

  • qtip jQuery Plugin — Sans doute la solution ultime pour gérer les info-bulles (tooltips) : cross browser, dégradation gracieuse, coins arrondis personnalisables, positionnement facile, effets personnalisables, AJAX, etc. (via arnaud-k)

  • Vanadium — Validation et vérification des champs d’un formulaire à l’aide de l’attribut class. Par exemple : <input class=":required" type="text"> pour un champs requis ou <input class=":format;/^(vanadium)+$/i" type="text"> pour un champs qui doit recevoir la chaine de caractère vanadium. Possibilité de valider via AJAX avec <input id="pass" class=":ajax;/username_checker/check.json" type="text"> par exemple.

Quelques trucs pour vos CSS

  • 21 polices de caractères à intégrer avec @font-face — Cette propriété CSS2 permet d’incorporer les informations vectorielles relatives à une fonte dans votre page web sous la forme @font-face { font-family: GraublauWeb; src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype"); } à utiliser ensuite comme suit : h1 { font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif; }

  • Ultimate IE6 Cheatsheet 25+ hacks et contournements pour faire sa fête à IE6 — Avec des parts de marché estimées à 18% ou 25% selon les sources, l’intégrateur web doit encore se coltiner avec le dernier de la classes des navigateurs.

Miscellanées

]]> http://css4design.com/10-liens-pour-faire-plaisir-a-votre-integrateur-web/feed 18 100+ comptes Twitter pour webdesigner http://css4design.com/100-comptes-twitter-pour-webdesigner http://css4design.com/100-comptes-twitter-pour-webdesigner#comments Mon, 13 Jul 2009 13:33:28 +0000 Bruno Bichet http://www.css4design.com/?p=3113 Twitter devient le service web 2.0 sur lequel il faut voir et être vu. Je vous propose un petit voyage dans le webdesign anglo-saxon avec 100 comptes Twitter utiles dans le cadre d’une veille technique et stratégique sur le Webdesign, Wordpress, les Standards du Web, Javascript & jQuery, Photoshop & Illustrator, HTML & CSS, PHP, l’architecture de l’information, etc. Au menu, le pseudo avec un lien vers le compte Twitter et la bio présente sur le profil.

Webdesign

  1. DeliciousHot — Currently Popular content from Delicious
  2. Fleuron — The British Journal of Typography and Design
  3. webdosanddonts — Tips and tricks for the modern day web designer
  4. zeldman — The present-day pachuco refuses to die.
  5. sixrevision — Web developer/designer and founder of Six Revisions.
  6. ilovetypography — Covering news from the Colorado Startup scene
  7. DesignerDepot — Webdesigner Depot is one of the most popular blogs about web design trends, tutorials and much more. It’s run by Walter Apai, a web designer from Vancouver.
  8. nazareth – Web and Graphic Designer, Developer UX, CSS, (X)HTML, Blogger, Twitter Fan, Internet Addict, Freelancer, Adobe Instructor, Digital Illustrator, friend
  9. wwwdesign — Whirl Wind Web &amp; Design Studio provides services for website design, eLetterhead, ecommerce and content management systems small to medium sized businesses.
  10. in_design — Share all important and interesting information about DESIGN via Twitter4all.COM then FOLLOW a moderated selection on this Twitter Design Channel
  11. webdesignledger — http://webdesignledger.com/
  12. 101bestwebsites — 101 Best Websites is a new approach to website showcasing.
  13. designfeed — Tweeting the best web and print design feeds. I’m a bot, I don’t reply to @’s. Please send suggestions for feeds in a DM. Retweets are very much appreciated :)
  14. wpstudios — WPstudios is a visual design and coding agency
  15. mezzoblue — using Twitter for me, not for you.
  16. cwylie0 — web developer, homebrewer, guitarist, herb gardener into comics, horror movies, photography
  17. DesignNewz — Feeding the design community with design and dev related news, articles and tutorials! yay! (please also follow @jophillips)
  18. khoi — Design Director, NYTimes.com
  19. hvdesigns — http://www.hv-designs.co.uk/
  20. justintadlock — Web designer, teacher in Seoul South Korea, and all-around good guy.
  21. Hicksdesign — Designer and cheese fetishist working for Opera Software from the Cotswolds, UK
  22. stevensnell — Web designer, blogger, and freelance writer.
  23. COStartupTrack — Covering news from the Colorado Startup scene
  24. Malarkey — Andy Clarke designs things, then writes and talks about them.
  25. WebDesignDev — Learn web design the easy way!
  26. Minervity — Web/Graphic Designer. Web Developer. Founder of Minervity.com, RazorMade Mediaworks and The MonoTwins.
  27. kevinmarks — Reading your thoughts. if you write them first.
  28. coopercobra — Stage Tech,a mac user, interested in webdesign,typography,graphism
  29. ThemeForest — Awesome ThemeForest Files, Community, News &amp; Chatter
  30. buildinternet — Web design, development, and business blog run by twins Sam and Zach Dunn
  31. webmonkey — I am webmonkey. I help you build websites! | http://www.webmonkey.com/
  32. mikeindustries — Come heavy or don’t come at all.
  33. stefsull — Client-side developer. Beach volleyball freak. Procrastinating workaholic. Codes, trains & writes for food.
  34. dewebtimes — latest in technology from Design, Graphics, Industry News, Photoshop, Showcase, Usability, Web Development. CSS Gallery and Showcase for Your Website.
  35. DesiMatlock — Personal: Mom of twins, daddy’s girl, traveler/polyglot. Work: Web geek, SEO, SEM (lotta PPC) & hand-coded valid (can you say perfectionist?) website redesigns.
  36. bkmacdaddy — Web and graphic designer: SEO XHTML CSS PHP Joomla Templates, Magento Themes, Wordpress Themes, Twitter Backgrounds – all your web design dreams in 1 place!
  37. DesignNewTrends –The best news in the design and web development world from around the web.
  38. Abduzeedo — Graphic/web designer and blogger.
  39. markboulton — Is not an early adopter. Apparently.
  40. jasonsantamaria –Designer by day, designer by night.
  41. elliotjaystocks — Designer / author / speaker. Currently accepting new work!
  42. meaganfisher — I love good design, well written markup, and owls. I’m the deputy designer at SimpleBits. When not helping Dan, I work with my own clients.
  43. webofdesign — web design!

Wordpress

  1. iandstewart — I’m the WordPress Theme Developer behind the popular Thematic Theme Framework, LaunchPad Theme, and Wpazo.
  2. pimpmywordpress — Help you ‘pimp’ your blog by publishing the latest free themes, hot plugins, blogging tips, tricks and tutorials on using WordPress.
  3. themehacks – love graphic design, wordpress fan. I design themes and templates.
  4. FreelyWordpress — Premium Wordpress Themes, Given away for FREE, Blogging Theme, Woo Themes, Thesis Theme and much more.
  5. wordpress — Updates and other fun stuff related to WordPress.org (that’s the self-hosted version).
  6. ozh — WordPress & PHP hacker.
  7. wptavern — Official account for the WPTavern website
  8. wpfreelance — Freelance marketplace for Wordpress theme design, plugins, programming and tweaks.
  9. iheartwordpress — Wordpress Fanatic, Helper, Designer
  10. photomatt — WordPress, Automattic, Akismet…
  11. hashwp — Finding news about #wp and #wordpress and RT them
  12. themesnack — Premium Wordpress Themes &amp; HTML Templates
  13. myWordPress — WordPress Video Tutorials – From basic usage to advanced SEO tactics
  14. ThemeHunter — We hunt for the latest and greatest WordPress themes and share them with you! Some of the themes we feature are paid, many are free!
  15. nathanrice — I do stuff with WordPress. Not kinky stuff, just normal « code » stuff.
  16. wordpress_jobs – wordpress jobs + projects for freelancers, jobber + buyers
  17. adii — Entrepreneur, co-founder of WooThemes and general creator of Rockstar Awesomeness!
  18. wpbeginner — WP Beginner offers tips, tools, resources, and suggestions to #Wordpress Users. If you are a Wordpress User, then you should stay updated with our tweets.

Standards Web

  1. meyerweb — Web standards | (X)HTML | CSS | microformats | community | writing | speaking | signing man.
  2. laura_carlson — http://webstandardsgroup.org/features/laura-carlson.cfm
  3. w3c — The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential.
  4. bblfish — The Semantic Web as philosophical Engineering. Social Cloud Architect at Sun Microsystems.
  5. mollydotcom — The Annoying Standards Girl.
  6. technorati — Who’s saying what. Right now.
  7. t — barcamp bicycler buildingblocks climber cultural evolution gtd hacker independent microformats nerdy optimist pescatarian scientist skeptic
  8. cdibona — Googler, Open Source Dude, Dad
  9. alistapart — A List Apart–For people who make websites
  10. 9swords — Web Developer / Designer – Student of W3Schools Refsnes Data W3C Web Standards
  11. iheni — Accessibility and standards advocate, Sinaphile, kickboxer and Chinese foodie.
  12. webstandard — Web-Developer, Blogger, Autor mit Tweets zu Webdesign, Entwicklung, Usability, Internet, Tools, Trends, …

Javascript

  1. codepo8 — All things web, writing and working together
  2. robertnyman — http://robertnyman.com/
  3. jquery — Write less, do more. News &amp; updates from the jQuery team.
  4. shauninman — Cool like Mint. Hot like a Fever. Designer. Developer. Um, schemer?
  5. jeresig — Creator of jQuery, JavaScript programmer, blogger, author, work for Mozilla.
  6. ppk — Freelance front-end web development consultant, agent, trainer, writer, blogger, and speaker. Currently doing heavy research into mobile browser compatibility.
  7. del_javascript – Javascript News and Links (from del.icio.us)
  8. http://twitter.com/javascript_news — reddit.com/r/javascript_news
  9. http://twitter.com/greatjavascript — I bring great links of Javascript to the wealth of Developers and designers that follow me. WARNING GOOD LINKS!!!
  10. jsninja — Here on Twitter I will sporadically divulge sensitive information regarding JavaScript and its various abstractions…
  11. rem — Invented Squirrels

Graphisme, Photoshop, Illustrator

  1. vectorart – Vector Art : A digital illustration blog for graphic designers & illustrators. Free vectors, brushes, tutorials, fonts and more.
  2. PSDTUTS — The web’s #1 Photoshop tutorials site.
  3. VECTORTUTS — http://vector.tutsplus.com/
  4. patternhead — Designer, blogger, front end coder, pattern designer, painter, wannabee artist in love with Photoshop, Illustrator and Jquery.
  5. hashphotoshop — Finding news about #photoshop and RT them
  6. PshopCreative –We’re the team behind Photoshop Creative – the magazine for Adobe Photoshop inspiration and advice
  7. Colorburned — Brushes, patterns, vectors, tutorials and more!
  8. logomoose — Logo design inspiration gallery
  9. photoshoplady – All of the Best Design Resources Around the World
  10. Photoshop_PSD — Photoshop Tutorials: How To Do, Skills Like A Pro
  11. colorburned — Brushes, patterns, vectors, tutorials and more!
  12. Illustrator_GU — Illustrator articles, tutorials, reviews, tips, tricks, and freebies from GurusUnleashed.com
  13. InsideAI — We’re members of the Adobe Illustrator product development, marketing, and engineering team. Let us hear from you!
  14. ComputerArts — The world’s best-selling creative magazine
  15. Photoshop_GU — Photoshop articles, tutorials, reviews, tips, tricks, and freebies from GurusUnleashed.com
  16. NAPP_News — We are the National Association of Photoshop Professionals (led by Scott Kelby), the leading world-wide resource for Photoshop training.
  17. photoshopguides — Fresh Tutorials Added Daily
  18. psdisasters — Pour le fun, histoire de voir ce qu’il ne faut pas faire avec Photoshop !

HTML & CSS

  1. smashingmag — Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.
  2. csswg — CSS working group Twitter
  3. IE6 — « this page cannot be displayed »
  4. Elasticss — A simple, yet complete, css framework to layout web-based interfaces. Is cross-platform and is limited only by your imagination.
  5. HTML5_EN — We save the Tweets about XHTML5 and HTML5.
  6. html5 — Notifications of changes to HTML5 drafts
  7. html5gallery — Site showcasing sites built using html5
  8. cssglance – Css websites showcase and web design resources
  9. wufoo – Striving to be the easiest way to collect information over the internet.

Développeurs (oui, ça veut dire PHP)

  1. rasmus — Breaking the Web
  2. depthtouch — Computer Scientist, Website designer and developer. Likes sports, computers :)
  3. AaronGustafson — I make stuff.
  4. developerworks — IBM’s premier Web site for Java, Android, Linux, Open Source, PHP, Social, Cloud Computing, Google, jQuery, and Web developer educational resources.
  5. php_net — An aggregation of and for php coders from twitter.
  6. phpclasses — Free ready to use PHP class scripts contributed by thousands of PHP developers, PHP book review, PHP jobs, listing of PHP professionals, PHP specialist forums<
  7. http://twitter.com/DailyPHP — Another day, another PHP function (created by @jt2k)

Architecture de l’information

  1. iA — UX Designer, Founder iA, creator of webtrendmap.com
  2. deaxon — Interaction Designer
  3. IATV — Information Architect, Information Literacy, UX, IxD, User Experience, Usability, Design, Prague, Ginkgo Love
  4. uxmag — UX Magazine’s Twitter feed. By @alexoid and @cdemetriadis
  5. IA_UXJOBS — UX Jobs from all over the world – Because finding the good ones shouldn’t be hard. Created for and by a UX Designer
  6. designux — User experience design and web development stream.
  7. ux –Better user experience design for the web and beyond.

Misc.

  1. @modeling22 — Coordination For Film Production In Thailand. Passionate about Media & Entertainment Industry, Tech, Marketing, Productivity, Fashions, Jazz. A nice person
  2. inspiredm — Daily inspiration source for web designers, illustrators, Twitter addicts, iPhone lovers, and other creative humans.
  3. delicious50 – Most recent Delicious bookmarks with 50 or more bookmarkers
  4. skyje4u — official account for skyje.com

N’oubliez pas de me rendre visite sur @css4design où je tiens un micro-blog sur les CSS, le HTML, le Webdesign, le Graphisme, etc. Vous y trouverez quelques pensées en vrac et des discussions avec d’autres passionnés du web. Le tout en 140 caractères, parfois moins ;)

Stay tuned and mind the gap!

]]> http://css4design.com/100-comptes-twitter-pour-webdesigner/feed 30 jQuery Splitter — divisez votre contenu en plusieurs parties redimensionnables http://css4design.com/jquery-splitter-divisez-votre-contenu-en-plusieurs-parties-redimensionnables http://css4design.com/jquery-splitter-divisez-votre-contenu-en-plusieurs-parties-redimensionnables#comments Sun, 14 Jun 2009 13:01:02 +0000 Bruno Bichet http://www.css4design.com/?p=2889 C’est sur le Dator Blog, que j’ai déniché jQuery Splitter tout droit sorti de chez Dave Methvin. La splitbar peut être déplacée très facilement de manière accessible en cliquant-déplaçant avec la souris, avec une accessKey ou encore via la touche tab. jQuery Splitter requiert la version 1.3.2 de jQuery et permet d’afficher une séparation entre deux contenus sous la forme :

HTML

<div id="MySplitter">
    <div> Left content goes here </div>
    <div> Right content goes here </div>
</div>

CSS

#MySplitter {
    height: 200px;
    width: 500px;
    border: 5px solid #aaa;
}
#MySplitter div {
    overflow: auto;
}
.vsplitbar {
    width: 5px;
    background: #aaa;
}

jQuery

$().ready(function(){
    $("#MySplitter").splitter();
});

]]> http://css4design.com/jquery-splitter-divisez-votre-contenu-en-plusieurs-parties-redimensionnables/feed 2 21 fonctions Javascript pour l'intégrateur web (et plus à venir…) http://css4design.com/21-fonctions-javascript-pour-integrateur-web http://css4design.com/21-fonctions-javascript-pour-integrateur-web#comments Tue, 18 Nov 2008 23:10:17 +0000 Bruno Bichet http://www.css4design.com/?p=2400 Les bibliothèques Javascript — comme jQuery et la myriade de plugins qui l’accompagne — facilitent la vie des développeurs web en leur permettant de manipuler le DOM les mains dans les poches. Toutefois, il est toujours bon d’avoir quelques fonctions standalone sous la souris pour se faciliter l’intégration cross-browser ! Voici une sélection de plus de 21 scripts pour faire face à toutes les situations (ou presque) :

  1. SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevre propose de faciliter l’utilisation d’Ajax pour les débutants travaillant sur des petits projets : SimpleJS ne saurait être comparée avec Prototype ou jQuery ou d’autre framework professionnels. Çà tombe bien, c’est exactement ce que l’on cherche aujourd’hui ! Toutefois, vous y trouverez l’essentiel :
    $ajaxload()
    $ajaxreplace()
    $opacity()
    $shiftOpacity()
    $pulsate()
    $highlight()
    $textColor()
    $morphColor()
    $toggle()
    $blindup(), $blinddown()

Sans compter les plugins simpleslish.js (Slideshow, 1.6k) et simpleacco.js (effet accordéon, 1k).

  1. addEvent — cette fonction écrite par John Resig, à l’origine de jQuery, a gagné le concours addEvent() recoding contest. Elle permet tout simplement d’attacher une fonction à un événement (onload, onclick, onmouseover, etc) :

    function addEvent( obj, type, fn ) {
    if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
        obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
        obj.addEventListener( type, fn, false );
}

    En prime, voici la fonction inverse, au cas où :

    function removeEvent( obj, type, fn ) {
    if ( obj.detachEvent ) {
        obj.detachEvent( 'on'+type, obj[type+fn] );
        obj[type+fn] = null;
    } else
        obj.removeEventListener( type, fn, false );
}

    Quelques exemples d’utilisation :

    addEvent( document.getElementById('foo'), 'click', doSomething );
addEvent( obj, 'mouseover', function(){ alert('hello!'); } );
addEvent( window, 'load', maFonction );

    Le dernier exemple est idéal pour lancer une fonction au chargement de la page sans intrusion dans le code HTML !

  2. The Ultimate GetElementsByClassName — Déjà évoquée ici, cette superbe fonction qui sélectionne les éléments par leur classe CSS a été mise à jour récemment.

    getElementsByClassName(« info-links »); — tous les éléments possédant une classe info-links,

    getElementsByClassName(« col », « div », document.getElementById(« container »)); — tous les éléments div contenus dans ù#container* et possédant la classe col,

    getElementsByClassName(« pince-me pince-moi »); — tous les éléments avec les classes pince-me et pince-moi.

  3. cssQuery — La fonction cssQuery() interroge le DOM via les sélecteurs CSS 1 et CSS 2 et une partie de CSS 3. Alternative à jQuery pour accéder aux éléments constitutifs du DOM quelque soit le navigateur !

    var tags = cssQuery("body > div"); sélectionne toutes les balises div descendants directement de body,

    images = cssQuery("img", tags); donne la liste des balises img présentes dans la variable tags vue plus haut,

    Devinez-donc ce que donne var argh = "p>a:first-child+input[type=text]~span"; :)

    Pendant que nous sommes chez Dean Edwards, profitez-en pour tester base2 un mini-framework Javascript intelligent (c’est Yves qui le dit sur twitter).

  4. XHRConnection — Cette classe Javascript simplifie l’utilisation de l’objet XMLHttpRequest. Elle propose plusieurs méthodes pour gérer les données à envoyer en arrière-plan. Autrement dit, XHRConnection permet d’appréhender facilement AJAX. Nombreux exemples fonctionnels disponibles.

  5. Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément li pour émuler la pseudo-classe :hover pour Internet Explorer qui ne l’applique que sur les ancres a, notamment.

    Léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style elle-même puisqu’il faut doubler le sélecteur li:hover avec la classe li.sfHover).

  6. Suckerfish Shoal — Si le script précédent vous a plu, vous êtes mûrs pour passer la vitesse supérieure avec ce jeu de fonctions dérivées de Suckerfish pour émuler les pseudo-classes :hover, :focus, :active et :target sur l’élément HTML que vous voulez :

    suckerfish(sfHover, "LI", "nav"); pour appliquer :hover sur un élément li placé dans #nav.

    suckerfish(sfFocus, "INPUT"); pour donner le focus aux éléments input.

  7. DOMTab — Ce script non-intrusif transforme une liste de liens en un système de menu à onglets efficace avec plusieurs menus sur une même page ; la possibilité de faire un lien vers un onglet et la mise en place de liens suivant et précédent pour accéder aux onglets. Voir mon comparatif entre DOMTab et idTabs pour en savoir plus.

  8. balance_columns — Script astucieux pour équilibrer des colonnes entre elles ! Ce script est non-intrusif : les identifiants des blocs à équilibrer se placent dans l’en-tête du script et il se dégrade harmonieusement si Javascript n’est pas activé sur le navigateur.

  9. iepngfix — Ce composant HTC gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6. Le seul script à ma connaissance à prendre en charge les propriétés background-repeat et background-position avec iepngfix version 2.0 Alpha 3

    Notes : gardez un oeil sur PNGHack de Yves Van Goethem !

    Voir le tutoriel sur la transparence des PNG 24 bits sur IE6 pour plus d’information.

  10. FlashReplace — Script très léger pour insérer une animation Flash dans votre page web avec une seul ligne de code :

    <script type="text/javascript">
    FlashReplace.replace("flash-content", "/flash/my-movie.swf", "flash-element-id", 800, 200);
</script>

    En option : possibilité de préciser la version de Flash requise ou d’ajouter des paramètres à votre animation Flash.

  11. ChangeClass — Changer une classe CSS à la volée. Trouvé sur cet excellent article de Noupe sur l’utilisation de Javascript (et de jQuery pour la majorité des solutions) pour fixer 12 problèmes liés aux navigateurs. Via Zeubeubeu.

    function changeClass(oldClass, newClass) {
    var elements = document.getElementsByTagName("*");
    for( i = 0; i < elements.length; i++ ) {
        if( elements[i].className == oldClass ) elements[i].className = newClass;
    }
}

<input type="button" value="Hide Sub-lists" onclick="changeClass('show','hide');" />

  12. Effets lightbox sans framework — L’ouverture de « nouvelles fenêtres » laisse peu à peu la place aux effets lightbox. Voici donc plusieurs solutions simples et efficaces pour réaliser une lightbox pour présenter des images, un contenu dynamique, un formulaire avec effet de fading tout en assombrissant le reste de la page. Sans framework Ajax, avec quelques lignes de code. Scripts testés avec Internet Explorer, Firefox, Chrome, Opera, Safari et Konqueror.

  13. 9 Javascript à ne pas manquer — sélectionner ou désélectionner des checkbox d’un clic ; ouvrir une fenêtre popup ; avoir plusieurs boutons submit pour un formulaire ; émuler le bouton retour du navigateur ; remplir les valeurs d’un menu select selon les choix effectués avec un premier menu, etc.

Voilà pour les 21 premières fonctions. Comme le web est vaste et qu’il ne s’arrête jamais, cette liste va s’allonger au fil de l’eau avec d’autres scripts bien intéressants ;)

  1. styleswitcher.js — Proposez des feuilles de style alternatives aux visiteurs.

  2. maxWidthFixForIE6.js — Emuler la propriété max-width pour IE6 :

    window.onload = checkAvailableWidth;
window.onresize = checkAvailableWidth;
function checkAvailableWidth(){
    var container = document.getElementById("container");
    container.style.width = (document.body.clientWidth > 1100)? "1100px" : "auto";
}

  3. Simplifier l’accès aux identifiants à la manière de jQuery (via Josselin) :

    function $( element ) {
    return document.getElementById( element );
}

  4. dLite — Cette bibliothèque propose des fondations pour faciliter vos développements : trouver les éléments avec le même identifiant ou la même classe ; lancer une fonction lorsque le DOM est prêt ; ajouter ou enlever une classe à un élément ; ajouter ou enlever un gestionnaire d’événement (addEvent), etc. Tout ça, pour 4 ko en version compressée seulement !

  5. DOMAssistant — Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse pour lancer des fonctions sur un ensemble d’élément par exemple. Supporte les sélecteurs CSS 1, CSS 2 et CSS 3.

    $("#container input[type=text]");

$("#navigation a").addEvent("click", myFunc);

$("#news-list").load("updated-news.php");

    Cerise sur le gâteau, cette bibliothèque est modulaire et la documentation existe en français. Le poid ? Moins de 10 ko en version compressée.

  6. nanotabs — Version légère de idTabs sans jQuery pour faire des menus à onglets à partir de simples listes.

  7. ul2finder — Listes dynamiques complexes pour réaliser un menu avec un comportement similaire au Finder de Mac OS X : un clic sur un élément affiche une colonne à côté pour le sous-menu, et ainsi de suite. Par le génial et prolifique Chris Heilmann !

  8. Webdesign moderne avec Javascript — Bon, se passer des frameworks comme jQuery, c’est bien, mais je vous propose quand même cette liste impressionnantes de 47 scripts, fonctions ou plugins (jQuery, Mootools, YUI, etc.) pour améliorer l’expérience utilisateur ;)

Conclusion

Même s’il ne s’agit pas d’un ensemble de fonction « cohérent » dans le sens où certains scripts ont des fonctionnalités redondantes, ces fonctions devraient trouver une place dans votre bibliothèque. J’ai fait l’impasse sur les frameworks mais mon opinion est faite depuis longtemps : Prototype ou jQuery ont redonné ses lettres de noblesse à Javascript.

]]> http://css4design.com/21-fonctions-javascript-pour-integrateur-web/feed 7 Manifeste pour bouter IE 6 hors des blogs avec kickIE6.js http://css4design.com/manifeste-pour-bouter-ie-6-hors-des-blogs-avec-kickie6js http://css4design.com/manifeste-pour-bouter-ie-6-hors-des-blogs-avec-kickie6js#comments Mon, 08 Sep 2008 18:09:14 +0000 Bruno Bichet http://www.css4design.com/?p=1470 Un spectre hante le web : le spectre Internet Explorer 6. Nombreux sont ceux qui ont tenté de convaincre les webmasters de refuser de servir le navigateur collé au fond de la classe près du radiateur ou qui s’interrogent sur son utilisation. Sans trop de résultats.

Il faut dire que la base installée est encore importante et on ne peut pas demander au gens de couper la branche sur laquelle ils sont assis. Et pourtant, je sens que vous n’attendez qu’une bonne occasion pour vous débarrasser du bouzin.

Le constat

IE6 représente encore entre 20% et 30% des visites, parfois plus, parfois moins. Il est donc important d’en tenir compte dans la majorité des projets de sites web. Sur mon blog, les internautes équipés de IE6 ont représenté environ 12% des visites depuis juillet 2006 et comptent pour 7% des visites sur les trois dernier mois.

Si j’enlève les développeurs web qui dégainent IE 6 pour tester les sites visités (et qui doivent représenter une grande partie des lecteurs), j’évalue à moins de 5% le nombre d’internautes qui me rendent visite « pour de vrai » avec IE6 sachant qu’il s’agit certainement des visiteurs envoyés par Live.com qui désirent regarder danser Louxor…

5%, c’est peu mais ça représente plus de 1000 visites par mois : c’est suffisant pour s’en soucier quand même ! Il n’est pas dans mes intentions de priver ces visiteurs d’une saine lecture :)

Du coup, il m’est venu une idée : pourquoi ne pas rediriger les visiteurs équipés d’une version d’IE inférieure à 7 vers le flux RSS mis en forme par Feedburner sachant qu’un visiteur surfant avec IE6 pourra s’abonner et me lire plus tard depuis son agrégateur ?

C’est là qu’intervient kickIE6 :

I’m in ur blog kicking ie6, kwel… ^__^v

<script type="text/javascript">
    if ( $.browser.msie ) {
        if ( $.browser.version < 7 ) {
            document.location.href = 'http://feeds.feedburner.com/css4design';
        }
    }
 </script>

Placez ce script après l’appel de la librairie jQuery entre les balise head de votre fichier header.php (si vous êtes sous WordPress) et d’indiquez l’adresse de votre flux Feedburner à la place du mien.

Pour que votre flux RSS s’affiche correctement dans un navigateur, vous devrez peut-être activer le service BrowserFriendly de Feedburner dans l’onglet Optimize. En savoir plus sur les services Feedburner.

Installer jQuery sans douleur sur WordPress

Vous ne savez pas si jQuery est installé dans votre thème WordPress ? Voici une ligne à ajouter juste au-dessus du script kickIE6 :

<?php wp_enqueue_script('jquery'); ?>

Cette ligne devrait activer la bibliothèque jQuery installée en standard avec WordPress.

Une solution qui exclue ?

J’ai mis en place ce script depuis une dizaine de jours et comme me l’ont fait remarquer plusieurs personnes (deux pour être exact), une partie de ceux qui utilisent IE6 ne le font pas par choix personnel et subissent les lourdeurs de leurs administrateurs réseaux qui ne veulent (ou ne peuvent) pas mettre à jour le parc informatique de l’entreprise. C’est pour ceux-là justement que je propose la lecture du flux et l’abonnement ensuite si plus d’affinité.

Mais quid de l’interaction ? Et oui, la lecture du flux ne permet pas aux lecteurs de laisser des commentaires. C’est vrai et ça m’ennuie. Même si derrière les chiffres il y a des personnes, je ne peux m’empêcher de me dire que le pourcentage de ceux qui laissent des commentaires par rapport aux lecteurs est faible et il n’y a aucune raison pour que ceux qui utilisent IE6 soient plus bavards que les autres…

Par ailleurs, je compte sur le fait que ceux qui subissent IE6 au travail, ont certainement un autre navigateur installé à la maison ;)

Comment j’en suis arrivé là, en réalité…

C’est la faute à Blueprint ! Pas vraiment, mais un peu quand même. J’avais déjà utilisé avec succès ce framework CSS et le script IE7.js, mais quand j’ai refait mon thème, j’ai péché par excès de confiance en ne testant mon design sous IE 6 qu’à la fin ^_^v

Blueprint n’est pas vraiment en cause car je n’ai pas suivi la logique du framework pour toutes les parties de la mise en page. C’est là que je me suis aperçu que l’intrusion de la présentation dans le code HTML sous la forme des classes CSS ne facilite pas la mise en place d’une feuille de style alternative. Surtout quand on change de design tous les mois, ou presque !

Je reconnais que si j’avais été plus vigilant en utilisant Blueprint (tester tôt et souvent), j’aurais — comme d’habitude — un blog qui s’affiche aussi bien dans IE6 que dans les autres navigateurs.

Conclusion

Je n’envisage pas de laisser tomber le support CSS d’IE6. Mais ce blog est un terrain d’expérimentation et j’ai eu envie d’expérimenter en mettant en avant une utilisation originale des flux RSS pour pallier les manques d’Internet Explorer 6. Cette idée pourrait trouver un prolongement en fournissant du contenu aux périphériques mobiles en complément d’une version mobile d’un blog, par exemple.

Je rappelle que le support d’Internet Explorer 6 est indispensable pour gagner ses galons d’intégrateur web. Pour autant, il n’est pas interdit de prendre en compte son lectorat et les ressources que l’on est prêt à mettre sur la table pour fournir la meilleure interaction possible entre les visiteurs et le contenu. De ce point de vue, les flux RSS associés aux différents services de Feedburner méritent d’être pris en compte dans une stratégie globale d’accès à l’information.

Keep clickin’

]]> http://css4design.com/manifeste-pour-bouter-ie-6-hors-des-blogs-avec-kickie6js/feed 33 jQuery — JavaScript Rock Star à l'Apps Hero http://css4design.com/javascript-rock-star-a-l-heure-de-l-apps-hero http://css4design.com/javascript-rock-star-a-l-heure-de-l-apps-hero#comments Fri, 05 Sep 2008 20:45:11 +0000 Bruno Bichet http://www.css4design.com/javascript-rock-star-a-lheure-de-lapps-hero jQuery, le framework Javascript à l’heure de l’apéro ? C’est possible en vous rendant sur jQuery.com et en tapant : haut haut bas bas gauche droite gauche droite b a :) Pour les maladroits : http://ejohn.org/apps/hero

Via Bouctoubou

PS : le code Konami marche aussi sur Google Reader ;)

]]> http://css4design.com/javascript-rock-star-a-l-heure-de-l-apps-hero/feed 3 Menu à onglets (tabs) — idTabs ou domTab ? http://css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab http://css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab#comments Wed, 27 Aug 2008 04:26:52 +0000 Bruno Bichet http://www.css4design.com/?p=1261 Menu à onglets avec Javascript et CSS fait partie des articles les plus lus de ce blogzine. Mais la solution présentée n’est pas un modèle d’accessibilité car elle ne fonctionne plus correctement si Javascript est désactivé. Dans ce cas, le menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu’il s’agit d’une fonctionnalité et non d’un défaut, je préconise deux scripts bien plus accessibles et efficaces : idTabs de Sean Catchpole et domtab de Chris Heilmann.

Avant de choisir un système de menus à onglets, il est important de vérifier les trois points suivants :

  1. Poids du script — généralement faible pour ce genre de script, il néanmoins penser à additionner les tailles de tous les petits scripts déjà installés.

    • idTabs -> 10 ko + jQuery -> 31 ko = 41 ko. Si vous devez juste ajouter un menu à onglets sur votre site, ce poids est rédhibitoire.

    • domtab -> 10 ko. C’est déjà beaucoup mieux, et par rapport à idTabs, vous pourrez encore installer plusieurs scripts intéressants avant d’arriver à 41 ko.

    Ceci dit, l’appétit vient en mangeant et le nombre de scripts à tendance à s’allonger, de sorte que l’investissement en jQuery est très vite rentabilisé.

  2. Comportement quand javascript n’est pas activé — Ces deux scripts se dégradent élégamment en l’absence de Javascript. Comme l’affichage des onglets est géré par la feuille de style CSS ils restent en place ; les éléments masqués au départ s’affichent simplement les uns sous les autres.

  3. Balisage HTML, classes CSS et identifiants nécessaires — Le fonctionnement de ses deux scripts suit le même principe : il faut identifier les zones où le script va agir (identifiants, classes) et ajouter des ancres internes vers lesquelles les liens des onglets pointeront.

Commençons par idTabs »

]]> http://css4design.com/menu-a-onglets-tabs-idtabs-ou-domtab/feed 9