Étant donné que je n'ai pas eu le temps de publier ma liste la semaine dernière, cette semaine vous aurez le droit à une double ration avec pas moins de 93 liens traitant de PHP, Wordpress, Photoshop, jQuery, CSS3 et bien d'autres choses.

NB: pour les amateurs de thèmes Wordpress, je vous invite a jeter un oeil au thème "Kubrick On Crack" de la liste Wordpress

Et n'oubliez pas que je partage quelques-uns de ces liens en temps réel sur mon twitter, et que pour voir a veille "mobile", il faut vous rendre sur Mobiliens

PHP

1. nedmartin - Site Guide - Caching Rappel sur les techniques de mises en cache disponible via PHP
2. TimThumb PHP Script Released Script php pour la création de miniatures d'images à la volée (avec système de cache)
3. Image Resizer Redimensionneur d'images à la volée
4. Online PHP Editor - PHPanywhere.net Editeur de code online pour coder depuis n'importe quel ordinateur
5. UserCake - Opensource PHP user management system Script PHP Opensource pour gérer un espace membre

Photoshop

1. 79 tutoriales para crear plantillas en PSD 79 tutoriels pour creer des designs web
2. Create a Clean and Colorful Web Layout in Photoshop Créer un web design sobre et coloré avec photoshop
3. 70 Of The Best Photoshop Actions For Enhancing Photos 70 "actions" photoshop pour embellir vos photos
4. Design a Minimal and Modern Portfolio Layout with Photoshop Faire un design minimaliste et moderne de portfolio avec Photoshop
5. Design a colorful theme for wordpress Fabriquer un thèmes worpdress coloré avec photoshop
6. 75 PSD to HTML Resources for Web Designers 75 .psd pour webdesigner
7. 40 Amazing Photoshop Brush Directories and Collections 40 sites/collections de brosses pour photoshop

Typographie

1. 50 Examples of Effective Uses of Typography Within Web Design 50 exemples de bonnes utilisations de la typographie en webDesign
2. 50+ Exceptional Collections of Typography Tutorials 50 tutoriels sur la typographie
3. 90 Exciting Typography Posters and Designs 90 designs typographiques intéressant
4. 40 Beautiful uses of Typography in Web Design 40 jolies utilisations de typographies dans des design web
5. 25+ Experimental Typography Showcases 25 designs typographiques expérimentaux
6. 40 Spectacular Typography Videos 40 vidéos typographiques spectaculaires
7. 104 Free Fonts for Web Designers and Logo Artists 104 polices gratuites pour web design et logos

Javascript/jQuery

1. Build a Simple Password Strength Checker Fabriquer un vérificateur de sécurité de mot de passe
2. jQuery-gestures- Image gallery Gestion de mouvements via jQuery
3. Pluralink© Script permettant d'inclure plusieurs liens en 1 via un menu au survol
4. Validatious 2.0 - Easy form validation with unobtrusive JavaScript Validation de formulaire en javascript, valide, fonctionnant avec ou sans framework js
5. 15 jQuery slideshow/gallery plugins 15 plugins jQuery pour faire des diaporamas (slideshow)
6. 10 Awesome Techniques and Examples of Animation with jQuery 10 incroyables techniques et exemples d'animations avec jQuery
7. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Faire un diaporama dans le style Apple
8. Mu — Mu Connect Librairie javascript pour vous aidez à intégrer FaceBook Connect sur vos sites
9. Simple Draggable Element Persistence with jQuery Rendre un élément "draggable" avec mémorisation via jQuery
10. 30 Amazing jQuery Plugins To Play With Tables 30 plugins jQuery pour jouer avec vos tableaux html
11. How To Parse XML Using jQuery and Ajax Comment parser du XML en AJAX via jQuery
12. Plugins And Tutorials To Enhance The Images Of Your Website With jQuery Plugins et astuces pour améliorer vos images web grâce à jQuery
13. Floom Diaporama original avec Mootools
14. 9 Useful Twitter Retweet Button Scripts For Blogs 9 scripts de boutons "retweet" pour votre blog
15. Making a Google Wave History Slider Reproduire le slider d'historique de Google Wave via jQuery, CSS, PHP et mysql

Inspiration et (web)design

1. 28 Delightful Blog Designs That Will Make You Say WOW 28 designs de blog incroyables
2. Blog Headers: 20 Great Examples and Best Practices 20 exemples et bonnes pratiques de "header"
3. 40 Killer Minimalist Blog Designs 40 designs de blog minimalistes
4. Modern CSS Layouts: The Essential Characteristics Les caractéristiques d'un design CSS modern
5. Super-Clean and Minimal Web Designs: 70+ Stunning Examples and Resources Exemples et ressources de webdesign minimalistes et propres
6. Best of Best WordPress Cusom Login Page Designs Sélection des meilleurs pages de login Wordpress
7. 111 CSS Gallery To Submit Your Design 111 galeries CSS pour soumettre vos designs web
8. 40 Adobe Illustrator Text Effect Tutorials 40 tutoriels pour faire des effets de textes avec Adobe Illustrator
9. 25+ Tools, Cheat Sheets and Inspiration for Designers working with Color Themes 25 outils/astuces/inspirations pour vous aider avec vos "schémas de couleurs"
10. 55 Astonishing Online Generators for Web Designers 55 générateurs web pour designers
11. Best Practices for 6 Common User Interface Elements Bonnes pratiques pour 6 éléments d'interface communs
12. 80 Stunning Background Patterns For Your Websites 80 motifs pour vos backgrounds de sites
13. How to create your best website layouts ever Article expliquant la manière de procéder pour créer une maquette de site web

CSS/CSS3

1. Quickie CSS3 Tricks with Fallbacks Quelques effets CSS3 avec leurs "fallbacks"
2. Universal Method of Block Decoration / CSS / SPLASHnology Très bonne méthode pour décorer vos blocs html (coins arrondis)
3. Minimal and Modern Layout: PSD to XHTML/CSS Conversion Comment convertir un web design .psd en HTLM/CSS
4. Investing in the Grid Petit rappel/survol sur les frameworks CSS à base de "grilles"
5. Essential CSS/HTML Lists Styling Techniques Les principales techniques pour styliser vos listes HTLM/CSS
6. Créez des info-bulles avec CSS 3
7. Table of CSS3 border-radius Compliance Tableau du support de la propriété CSS 3 border-radius
8. Fluid Grid System Framework CSS permettant de construire des design fluides (extensibles)
9. 25 CSS CHEAT CODES: Designers & Developers Delight 25 feuilles d'astuces (Cheat Sheet) pour CSS
10. 15 CSS Tricks That Must be Learned 15 astuces CSS à connaitre
11. How to Achieve Cross-Browser @font-face Support Rendre le support de la propriété CSS @font-face compatible avec les principaux navigateurs
12. The Blueprint CSS Framework – Tutorials, How-to Guides and Tools Collection de ressources pour le framework CSS Blueprint
13. Using Rounded Corners with CSS3 Utiliser les coins arrondis en CSS3
14. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them Petit rappel sur l'utilisation des sprites CSS
15. 15 Useful Firefox Add-Ons To Make CSS Developers Lives Easier 15 plugins Firefox pour faciliter le développement CSS

Wordpress

1. Kubrick On Crack - Free Wordpress Theme Thème wordpress gratuit très sympa et aéré qui se dit être un "Kubrick" (thème par défaut) amélioré
2. I Like This « WordPress Plugins Plugin Wordpress pour ajouter un bouton de vote (positif seulement) à votre blog
3. YouAre Theme · Promote your real-life identity Nouveau thème Wordpress pour promouvoir votre identité numérique
4. 101 Pro and Free Wordpress Themes for Personal Blogs 101 thèmes wordpress gratuits pour votre blog perso
5. WordPress hack: Extend the body_class function Étendre la classe "body" de wordpress
6. WordPress Visual Cheat Sheet Jolie feuille d'astuces (Cheat Sheet) pour Wordpress
7. Useful WordPress Plugins for Statistics Collection de plugins de statistiques pour votre blog Wordpress
8. How to Improve your Wordpress Theme with 9 Useful Plugins 9 plugins utiles pour améliorer un thème Wordpress
9. Easier And Better Solutions To Get Pictures On Your Posts - only the first image, last image from the Gallery , first 2 pics, last 2 pictures, last two pictures, HTML Worpdress : Quelques solutions pour intégrer/recuperer vos images
10. 45+ great looking free Wordpress Themes 45 thèmes Wordpress pas trop vilains
11. Top 10 Free Halloween WordPress Themes 10 thèmes wordpress gratuit pour Halloween
12. 24 Wordpress Image-Based Plugins 24 "plugins d'images" pour wordpress
13. 18 Alternative Ways To Use Wordpress 18 utilisations alternatives de Wordpress
14. 20 Premium WordPress Themes Released In October 2009 20 thèmes wordpress premium sorti en Octobre 2009
15. Top 30 Awesome Wordpress Plugins That You Must Have In Building A New Wordpress Blog Le top 30 des plugins Worpdress à installer lors d'une nouvelle installation
16. Wordpress Hack: Anything Can Be Added Anywhere In The Post Content Wordpress: Ajouté la fiche de l'auteur dans un article et insérez de la pub après l'intro
17. 9 Useful Minimalist Wordpress Themes 9 thèmes wordpress minimalistes

Divers

1. HYPE Un framework pour coder facilement en Action Script 3 (AS3)
2. Coda: A Collection of 120+ Plugins, Clips, Snippets and Tuts For Designers and Developers Collection de ressources pour developper avec CODA
3. 21 Fresh & Stunning Drupal Themes 21 thèmes Drupal "frais"
4. 10 Free Server & Network Monitoring Tools that Kick Ass 10 outils gratuits pour monitorer votre serveur/reseau
5. 101 Ways to Promote a New Blog 101 façons de promouvoir un nouveau blog
6. Les auto-entrepreneurs parlent de leur expérience
7. Building your First ExpressionEngine Plugin Construire votre 1er plugin ExpressionEngine
8. 60+ Promotional Websites to Promote and Submit Your Design Related Articles and News 60 sites pour promouvoir et envoyer vos articles en relation avec le "design"
9. Solving a Sudoku using Recursive Subquery Factoring Résoudre une grille de sudoku via sql
10. Configuration d'un serveur dédié de A à Z Rappel: comment bien configurer votre dédié
11. HTML 5, le renouveau du Web standard Dossier sur l'HTML 5, en français
12. Best of High-Dynamic-Range - Fotos, Weblogs, Tutorials, Software, Books Collection de ressources pour la photographie HDR (inspiration, blogs, tutoriels, logiciels, ...)
13. 200+ Free Exclusive RSS Icons: “Supra” 200 icônes RSS ("Supra")
14. Six free antivirus programs made for your Windows 7 system 6 antivirus gratuits pour Windows 7

Voici encore une semaine riche en découvertes avec pas moins de 58 liens. Bonne découverte.

Inspiration et Design

1. Showcase Of Professional Looking Website Designs Sélection de sites au design professionnel (inspiration)
2. 62 Intelligent And Integrated Logos For Typography Lovers 62 intégrations intelligentes de typographies dans des logos
3. A Showcase of 35 Beautiful Typographical Illustrations 35 jolies illustrations typographiques
4. How to Create Remarkable 3D Text in Photoshop Comment créer un texte en 3D avec photoshop
5. 80+ Identity Logo Design With PSD Files 80 logos avec fichier .psd
6. 75 Creative And Unique Business Card Designs For Your Inspiration 75 cartes de visites creatives pour votre inspiration
7. Beautiful Gradient Typography in Web Design Exemples d'utilisation de polices dégradées en webDesign

Wordpress

1. Theme: Cleanr Focuses on Typography and Space Thème worpdress simple et épuré
2. 20 Best Wordpress Typography Plugins To Enhance Readability 20 plugins Wordpress pour améliorer la lisibilité
3. 20 Pure Typography based Wordpress Themes for FREE – Part 1 20 thèmes wordpress "typographique"
4. 10 Outstanding Corporate Wordpress Themes for Freelancers and Small Business Owners 10 thèmes premium pour blogs d'entreprise
5. 10 Useful WordPress Coding Techniques 10 techniques utiles pour Wordpress
6. 15 Most Important Wordpress Plugins To Help You Fight Spam 10 plugins wordpress pour combattre le spam
7. 10 Most Useful Google Plugins for WordPress 10 plugins wordpress utilisant les services google
8. TAC - Theme Authenticity Checker WordPress Plugin Plugin wordpress pour vérifier si vos thèmes sont infectés

Typographie

1. Compte rendu : « La typographie pour le web »
2. Rich Typography On The Web: Techniques and Tools Techniques et outils pour améliorer vos typographies sur le web
3. 8 Javascript Plugin Effects and Tools to Beautify and Control Web Text 8 effets javascripts pour améliorer et contrôler vos textes web
4. Fonts on the web and a list of web safe fonts Tableau sur le compatibilité des fonts selon les navigateurs
5. Fonts for Designers Series Issue no. 1 Sélection de polices de caractère pour designers
6. 55 Unconventional And Original Free Fonts For An Unique Design 55 polices de caractère gratuites non conventionnelles et originales

Webdesign/CSS

1. #eCSStender.org Unification du support CSS via Javascript
2. Top reasons your CSS columns are messed up Pourquoi vos colonnes CSS ne régissant pas comme vous le désirez (solutions)
3. Ten Most Popular Firefox Plugins of Web Designers Les 10 plugins firefox pour web WebDesigners les plus populaires
4. Create a Clean Business Web Template Design in Photoshop Creez un webdesign d'entreprise simple et propre avec photoshop
5. 51 Web Apps for Web Designers and Developers – Web.AppStorm 51 applications online pour WebDesigneurs et développeurs
6. Custom Checkboxes, Custom Radio Buttons, Custom Select Lists Personnalisez vos Checkboxes, Radio Buttons et Select Lists via CSS et jQuery
7. Solution For Very Long Dropdown Menus Astuce en CSS et jQuery pour faire de long menu defilant
8. HTML, CSS, and Web Development Practices: Past, Present, and Future L'évolution des pratiques du développement web
9. Is Your CSS Reset Doing More Harm Than Good? Petit reset CSS bien expliqué
10. 15 Ways to Improve CSS Techniques Using jQuery 10 techniques jQuery pour faciliter vos CSS
11. Icones.pro, la plus grande collection d'images PNG et d'icônes Moteur de recherches d'icônes
12. The Mystery Of The CSS Float Property Découvrez tous les mystères de la propriété CSS "float"
13. 8 different ways to beautifully style your HTML lists with CSS 8 manières de présenter de jolies liste html

Javascript/jQuery

1. 10 Superb Image Effects and Slider Tutorials with Jquery 10 tutoriels jQuery pour faire des effets de gliddements
2. 25 Cutest jQuery Plugins 25 plugins jQuery pour des effets amusants
3. Introduction to building jQuery plugins Les bases pour développer un plugin jQuery
4. How to Create an Image Gallery Powered by Picasa Comment créer un galerie d'image à partir de Picasa
5. 35 Fresh and Useful jQuery Plugins 35 plugins jQuery récents et utiles
6. 35+ Web Developers Useful Ajax Tutorials 35 tutoriels utiles sur l'AJAX
7. 10+ astonishing jQuery resources to spice up your website 10 ressources jQuery pour booster votre site
8. Drag to Share Tutoriel pour ajouter un drag & drop à la Mashable sur votre site
9. 10+ jQuery Form Enhancement Plugins 10 plugins jQuery pour améliorer vos formulaires
10. 17 Amazing jQuery Rollovers – Examples and Tutorials 17 manières originales de faire des "survols" (rollovers) via jquery
11. Making A Cool Login System With PHP, MySQL & jQuery Tutoriel pour faire votre propre zone membre avec PHP, MySQL et jQuery
12. jQuery Approach by Scott Robbin Un plugin jQuery qui gère les animations en fonction de la position du pointeur de votre souris

Divers

1. jekyll Générateur de blog statique (via rsync et serveur local)
2. Fast Picture Viewer | WIC Codec Pack for Windows 7, Vista and XP Pack de "codec" Windows pour visualiser les fichiers RAW directement depuis l'explorateur
3. EZFlar: Opensource Code For Augmented Reality Productions Outils open source pour utiliser la réalité augmentée
4. File Management and Organization Tools and Ideas Sélection d'outils d'organisations
5. 20 Handy Photoshop Tips For a Faster Workflow 20 astuces pour travailler plus rapidement avec photoshop
6. 10 Best Content Management Systems for Designers Top 10 des CMS pour Designers
7. 9 Open Source Microblogging Applications 9 applications de micro-blogging open source
8. 5 Rules To Write More Readable CSS Files 5 règles pour rendre vos CSS plus lisibles
9. 5 Cool Ways to Add Graphs to Your Website 5 façons d'ajouter des graphiques sur votre site
10. Killer Xcode Tips and Tricks – Tips 1 to 10 10 astuces utile pour Xcode
11. Top 10 Tiny & Awesome Windows Utilities Top 10 des petits utilitaires pratique pour Windows
12. 70 Free Useful Portable Applications You Should Know 70 applications portables gratuites à connaitre

La semaine dernière je vous balançais 88 liens utiles, et comme annoncé je récidive cette semaine avec 50 liens ! J'ai aussi tenu compte de vos comentaires et j'ai donc séparé la liste en plusieurs thèmes histoire que celà soit plus lisible, si vous voyez une coquille, n'hésitez pas.

Wordpress (4)

1. 31 WordPress Plugins That Turn Your Blog Into a CMS 31 plugins pour transformer votre blog wordpress en CMS
2. Creating Custom Write Panels in WordPress Créez vos propres champs additionnels avec wordpress (CMS style). A voir !
3. 45+ Free Premium WordPress Themes with Magazine or Grid Layouts 45 thèmes magasines/grilles wordpress gratuits
4. 6 WordPress Plugins for Better Comments 6 plugins Wordpress pour améliorer la gestion de vos commentaires

Logo (5)

1. Logo Design Inspiration: 60+ Exceptional New Designs 60 logos au design exceptionnel
2. Logo Design: 40+ Must Have Tutorials 40 tutoriels pour faire des logos
3. 57 Creatively Designed Examples Of Typography In Logo Design 57 exemples créatifs de typographie utilisé dans des logos
4. Free 83 Professional Logos With PSD Files 83 logos "pro" avec leur .psd (photoshop)
5. Logo Design Toolbox: 60+ Resources for Logo Design 60 ressources pour vos Logos

jQuery (6)

1. Display JSON Data with jQuey and Ajax Petit exemple pratique de creation de JSON via PHP avec affichage via jQuery
2. 26 jQuery Plugins for Superb Navigation 26 plugins jQuery pour faire de superbes menus de navigation
3. AJAX User Poll Using jQuery and PHP Fabriquez vos propres sondages en PHP avec jQuery
4. Free Slideshow, Gallery And Lightboxes Scripts Collection de scripts de diaporama, lightbox et galeries
5. Building a jQuery/PHP Powered Chat Room Créez votre propre salle de Chat via jQuery/PHP
6. A jQuery Twitter Ticker – Tutorialzine Comment se fabriquer son propre widget Twitter via jQuery

Inspiration et Design (5)

1. 40 Beautifully Designed Vintage Websites 40 webdesigns vintages
2. 18 Really Beautiful and Creative Web Designs 18 webdesigns créatifs
3. 30 Impressive vCard Web Designs 30 vCard (Carte de visite online) au design impressionnant
4. 70 Beautiful Handpicked CSS Galleries 70 galeries CSS pour votre inspiration ou soumettre votre site
5. Comment Form Styling: Examples and Best Practices Exemples et bonnes pratiques pour styler vos formulaires
6. Tips for Designing an Awesome Coming Soon Page Conseils et inspiration pour réussir une page de lancement
7. 40+ simple and elegant business card designs 40 exemples de design élégant de cartes de visite
8. 90+ Latest Trends of Business Cards 90 dernières tendances de cartes de visite

CSS (13)

1. Browser support for CSS3 and HTML5 Récapitulatif des propriétés CSS3/HTML5 supportées par les différents navigateurs
2. CSScaffold Fraework CSS configurable via PHP (optimisation à la volée)
3. How to: CSS Large Background Petit rappel sur les bonnes pratiques pour utiliser un large background en CSS
4. Juicer - a CSS and JavaScript packaging tool / Ruby Outils pour packager vos CSS et Javascript en ligne
5. 20+ Awesome Resources To Learn and Improve CSS 20 ressources classées par difficulté pour apprendre le CSS
6. Breadcrumbs en CSS Tutoriel pour faire un menu de navigation de type "Breadcrumbs"
7. 53 CSS-Techniques You Couldn’t Live Without 53 techniques CSS intéressantes
8. CSS Differences in Internet Explorer 6, 7 and 8 Les différences d'interprétation CSS entre IE6, 7 et 8
9. Really simple CSS trick for equal height columns Astuce CSS pour avoir des colonnes de hauteurs égales
10. CssDispatcher - Manage your CSS like a pro Script PHP pour gérer (surcharger, mixer, compresser, ....) vos feuilles de style CSS
11. HOW TO: Elegant CSS Message Boxes for Blogs Des exemples de jolies boites d'informations en CSS
12. CSS Font-Size: em vs. px vs. pt vs. percent Explications sur les unités de mesures px pt % en CSS
13. xCSS - OO CSS Framework Framework CSS orienté objet

Webdesign (8)

1. How to Make a Creative Blog Layout Comment créer un design créatif de blog avec photoshop
2. 25 Free Online Tools for Web Designers, Developers, Freelancers and Individuals 25 outils en ligne gratuits pour les webDesigner et développeurs
3. 30 Stunning Fonts To Enhance Your Designs 30 polices de caractères pour améliorer vos designs
4. CU3ER – flash 3D image slider! Visionneuse d'image en flash avec effet de transitions en 3D (Papervision), magnifique
5. 1st Photoshop Web Design Professional Layout Tutorial Créez un webdesign professionnel avec photoshop
6. Quelques conseils pour designer une interface
7. sendcube email marketing: Get All Free: View Our Free Templates Quelques joli templates de newsletters gratuits
8. 101 Five-Minute Fixes to Incrementally Improve Your Web Site 101 astuces de 5 minutes pour améliorer votre site

Divers (6)

1. 27.000 photoshop gradients 27000 dégradés pour photoshop
2. Supercharge Website Performance With AWS S3 and CloudFront Comment mettre en place un CDN pour votre site avec AWS S3 et CloudFront
3. 5 Must Have Sans Serif Fonts 5 fonts "Sans Serif" incontournables
4. 8 Hand Drawn Icon Sets For Bloggers 8 packs d'icônes sociales avec un effet dessiné
5. Titres, intertitres, chapeaux : les niveaux de lecture Niveaux de lecture : 7 clés pour multiplier les points d’entrée d’un texte web
6. Best PHP Frameworks to build quickly complex web applications Sélection des meilleurs frameworks PHP

Je sais que ça fait longtemps que je n'ai pas partagé avec vous mes trouvailles du net, du coup je me rattrape avec cette grosse liste de 88 liens qui parlent principalement de Wordpress, jQuery, CSS et webdesign ... mais aussi 2-3 surprises

Je vais essayer d'en faire une chaque semaine, histoire que de ne plus avoir un gros bloc d'un seul coup ! Si vous désirez découvrir ma veille de manière plus diluée, vous pouvez me suivre sur twitter

Et un petit hors sujet pour signaler que j'ai réparé mon formulaire de contact, je ne sais pas exactement depuis quand il était en panne, mais si vous avez tenté de me contacter ces derniers jours semaines, excusez mon silence et retentez votre chance !

1. CSS Tips and Tricks Collection Collection d'astuces CSS
2. Essential Wordpress Plugin Development Resources, Tutorials and Guides Collection de ressources pour Wordpress
3. 6 Advanced JavaScript Techniques You Should Know 6 techniques de javascript avancés à connaitre
4. Centered Vertical and Horizontal Align of elements in css Petit rappel sur les techniques de centrages en CSS (Horizontal/vertical)
5. 34 Fresh and Creative Wordpress Blog Design 34 design de blog Wordpress frais et créatifs
6. Introducing the Flexible Box Layout module - CSS3 . Info Initiation aux FlexBox en CSS3 (modèle de boites évolué)
7. 25 Cheat Sheets Web Developer Should Have 25 "Cheat Sheets" pour Développeur Web
8. Becoming a Font Embedding Master Un nouvel article traitant de la propriété CSS @font-face
9. Create a Free Email Newsletter Service using WordPress Créer simplement un service de newsletter en utilisant wordpress
10. HTML5 et l'avenir du web Superbe condensé de ce que HTML 5 nous réserve
11. Create a CSS3 Button That Degrades Nicely Créer un bouton tirant profit de CCS3 et retro-compatible
12. Preparing for HTML5 with Semantic Class Names Commencez doucement à vous habituer à HTML5 avec des noms de classes sémantiques
13. Top 10 Most Common Errors Made Using Photoshop Les 10 erreurs les plus communes en utilisant Photoshop
14. Themes and Plugins For Extreme WordPress Functionality Thèmes et plugins pour transformer complètement votre Wordpress
15. Become A WordPress Theme Developer Who Rocks In Four Steps (and 50+ readings) Devenez un meilleur développeur Worpdress en 4 étapes (collection de liens)
16. 20 Mind Blowing Website Layout tutorials in Photoshop 20 tutoriels pour créer votre webdesign avec photoshop
17. 50 Great Examples of Data Visualization 50 exemples d'affichage graphique de données
18. 24 High Quality Free And Stunning Symbol Fonts 24 polices de symboles haute qualité
19. The Ultimate Wordpress Developer Toolbox Trucs et astuces pour Wordpress
20. Beautiful and Simple CSS Button Styling 8 façons de faire de jolis boutons en CSS
21. How to Code a Clean Portfolio Design (Plus Free Five-Page Template) Comment créer un design propre pour un portfolio
22. 28 Excellent Examples of Using Gradient Effects in Web Design- The Design Magazine 28 excellents exemples d'utilisation des dégradés en webdesign
23. 50 Surprisingly Amazing Themes for Blogger 50 thèmes surprenant pour Blogger (Google blogspot)
24. 40+ Quite Useful Wordpress Plugins using jQuery 40 plugins pour Wordpress utilisant jQuery
25. Create WordPress Page Templates with Custom Queries Wordpress, créez une "template page" pour une requête perso (avec pagination)
26. 20 Remarkable WordPress Themes Releases for September 2009 20 nouveau thèmes Worpdress remarquables
27. 40 Excellent Wordpress Themes For Photoblogs 40 thèmes wordpress pour photoblog
28. 77 Inspirational Example of Pricing Page Designs 77 designs de pages de vente
29. Free Farm-Fresh Web Icons by FatCow Web Hosting Pack de 1000 icônes web
30. 10 Life Saving Wordpress Plugins Often Ignored By Bloggers 10 plugins wordpress qui peuvent vous sauver la vie
31. Excellent Tutorials to Utilize the Power of WordPress and Facebook Astuces pour intégrer FaceBook et Wordpress
32. QueryLoader – preload your website in style Preloadez les pages/images de votre site (ou une partie) via un plugin jQuery
33. 16 Wordpress Plugins Everyone Must Install 16 plugins wordpress incontouranbles
34. 10+ WordPress plugins for developers 10 plugins Wordpress pour les développeurs
35. Create a Very Simple Portfolio Web Layout with Photoshop Créer un design de site portfolio avec photoshop
36. Useful scripts Facebook inspired for web developers – woorkup.com Collection de scripts inspiré de FaceBook
37. 50 Spectacular Type and Text Artworks 50 créations typographiques exceptionnelles
38. 30 Professional Free Fonts for Excellent Typography 30 fonts professionnelles gratuites
39. @font-face in Depth Tout savoir sur la propriété CSS @font-face
40. 25 Best Collection of jQuery Menu Design Tutorials 25 menus design via jQuery
41. 50 Useful Tools and Generators for Easy CSS Development Liste de 50 outils et générateur pour vous aider à faire vos CSS
42. 10 Essential Wordpress Plugins For New Wordpress Installation 10 plugins indispensable pour une nouvelle installation de Wordpress
43. 16 Free “Premium Quality” Wordpress Magazine Themes 10 thèmes magazine "Premium" et gratuit pour Worpdress
44. 23 Free Wordpress Themes You Probably Haven’t Heard Of | TutsAZ.com - Tutorials from A to Z 23 Thèmes gratuit pour Wordpress dont vous n'avez peut-ètre jamais entendu parlé !
45. 9 Top CSS Essential Skills That Every Web designer Should Learn Plein d'astuces CSS
46. 70+ Photo Manipulations Art That Will Blow You Away 70 photo manipulation qui décoiffent
47. jQuery Visual Cheat Sheet Cheat Sheet pour jQuery
48. 7 Fresh & Effective Shopping Themes for Wordpress 7 thèmes pour votre boutique sous Worpdress
49. 45+ Inspiring Examples of Vintage in Web Design 45 sites au design vintage
50. Simple Techniques to Lock Down your Website Sécurité et PHP pour vos sites
51. 33 Creative and Beautiful Logos 33 logos créatifs
52. 650+ Ultimate Twitter Icons Collection For Web designers Besoin d'icônes pour twitter ? En voici plus de 650 !
53. 13 Great Wordpress Plugins To Power Up Your Admin Area 13 plugins pour gonfler votre administration Wordpress
54. 33 Examples of Beautiful Hand-Drawn Typography 33 exemples de belles typographies manuscrites
55. CSS3: To Infinity And Beyond! [CSS Tutorials] Petit retour sur les nouveautés "magiques" de CSS3 !
56. 300+ Resources to Help You Become a WordPress Expert Gigantesque pack de ressources pour Wordpress (300+)
57. 100++ jQuery Tutorial and Plugin Collections on September Collection de 100 tutoriels et plugins jQuery
58. CSS Order Priority Tips and Tricks Rappel sur l'ordre de hiérarchie en CSS
59. 18 New Design Freebies 18 pack d'icônes récents
60. The Only SEO Tools You’ll Ever Need - Nettuts+ Tout un tas d'outils online pour vous aider dans votre SEO
61. 70+ Seriously Useful Handwritten Fonts and Inspirational Showcases ... 70 sources d'inspiration de typographie manuscrites
62. 27 Best WebSites to Download Free Seamless Patterns 27 sites pour télécharger des motifs gratuits
63. 10 Easy jQuery Tricks for Designers 10 astuces jQuery simple pour designers
64. 99 High-Quality Free (X)HTML/CSS Templates 99 templates (X)HTML/CSS de qualité et gratuit
65. Typographic illustrations in Photoshop: 10 awesome tutorials 10 incroyable tutoriels pour réaliser des illustrations typographiques
66. Definitive List of Free WordPress Theme Frameworks Liste des frameworks Wordpress existants
67. 20 great free fonts for designers 20 fonts pour designers
68. Creating a Crypter Class with PHP
69. Alexa Keywords PHP Script
70. 38 jQuery And CSS Drop Down Multi Level Menu Solutions
71. WordPress shortcode: Display the loop
72. Glyphish – Great icons for great iPhone applications
73. 46 Outstanding Web Layouts From DeviantArt:September 2009 46 Outstanding Web Layouts From DeviantArt:September 2009
74. Réalisez un bandeau de news en jQuery, comme sur iTélé
75. miniGallery - An extremely lightweight gallery template
76. Monkeypr Wordpress Theme Magnifique thème pour Wordpress
77. Coder un thème WordPress : bonnes pratiques – technique, wordpress
78. 30 CSS Best Practices for Beginners - Nettuts+
79. 100+ Useful Bookmarklets For Better Productivity
80. Free ‘Social Media Bookmark Icon +’ pack, the ever growing icon set Pack d'icônes sociales en 3 tailles différentes
81. Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
82. How to Make a Light and Sleek Web Layout in Photoshop
83. Ajouter un annuaire sur votre blog WordPress
84. HTML 5 And CSS3 Cheat Sheets Collection
85. OpenUpload – Script clone de Rapidshare ou Megaupload
86. WinToFlash - Install Windows from usb - Home page WinToFlash pour monter une image Windows sur une clé USB en 3 clics.
87. jQTouch — jQuery plugin for mobile web development Plugin adapté pour la creation de site mobile (optimisé pour iphone)
88. Bien débuter avec la conception de plugins jQuery

jQuery Tools est une série de plugins d'interface dans le même style que jQuery UI. Il est moins complet mais beaucoup plus léger, de plus il contient quelques fonctions intéressantes qui méritent que l'on s'y attarde.

Voici les différents composants de jQuery Tools:

• Tabs: système d'onglets et d'accordéons
• Tooltip
• Scrollable: système de défilement avancé, avec ou sans navigation, automatique ou pas !
• Overlay: effet de pop-up (lightbox) des plus sympa
• Expose: très sympa pour mettre en évidence une partie d'un page !
• Flashembed: pour intégrer du flash

Et il existe toutes une partie consacrée à l'interaction avec le lecteur FLV gratuit "Flow PLAYER", ce qui est tout à fait compréhensible étant donné que jQuery Tools fait parti de ce même projet !

Démonstration

• Toutes les demo sur la page officielle

Et une petite vidéo rapide juste pour voir tout ça en mouvement:

Téléchargement

Rendez-vous sur cette page, vous pourrez éventuellement cocher ou décocher les éléments que vous désirez. Et pour jQuery c'est ici.

Installation

Intégration du script jQuery Tools + jQuery

Code à placer entre les balises HTML <head> et </head>

On notera qu'ils fournissent une version hébergée par leur soin qui inclue d'office jQuery ainsi que les principaux plugins, dans ce cas remplacez le code ci-dessus par:

L'avantage c'est que vous bénéficierez du téléchargement parallèle (CDN) puisqu'il se trouve sur un autre domaine.

Intégration des différents plugins

La documentation officielle est bien faite et très complète, alors je ne vais pas tous retaper ici. Je vous invite donc à suivre les liens suivants selon ce que vous désirez implanter.

• Tabs
• Tooltip
• Scrollable
• Overlay
• Expose
• Flashembed

Conclusions

Pour seulement 6ko (18ko non gzippé) hors jQuery, pourquoi se priver ?! Même si il ne dispose pas d'autant de plugins que jQuery UI, il inclut tout de même les principaux effets d'interface.

• Site internet : http://flowplayer.org/tools/index.html
• Démonstration : http://flowplayer.org/tools/demos/index.html
• Téléchargement : http://flowplayer.org/tools/download.html

jParallax est un plugin jQuery qui va vous permettre de mettre en place facilement un effet de parallaxe sur un groupe d'images ! Pour faire court, la parallaxe est l'incidence du changement de position de l'observateur sur l'observation d'un objet (cf: wikipedia). Un peu comme lorsque vous êtes en voiture ou en train et que vous regardez par la fenêtre latérale, les différent niveaux du paysage ne défile pas à la même vitesse. Le plan le plus proche est rapide et plus on s'éloigne, plus l'effet de vitesse est moindre.

Comme d'habitude, filez voir la démonstration pour bien comprendre l'utilisation du plugin: Démonstration

Si il est bien utilisé, cet effet peut s'avérer redoutable, je vous invite a jeter un coup d'œil sur les header de ces sites (survolez le) : Site 1 Site 2 Site 3

Et allez aussi jetez un oeil par ici pour voir une utilisation extrême de l'effet parallaxe !

Utilisation

Il vous faudra construire une liste d'image avec un conteneur ayant une id "parallax"

Alors il faut savoir que c'est très souple, vous pouvez par exemple remplacer la liste par des div ou carrément juste mettre une série d'images sans autres balises ! La seule condition c'est qu'il faut que l'ensemble soit englobé dans un élément (ul, div, ...) avec id="parallax"

Ensuite vous intégrez jQuery (si ce n'est déjà fait), vous uploadez le plugin et vous ajoutez le code d'initialisation.

Code à placer entre les balises HTML <head> et </head>

Voilà, il ne faut pas oublier de donner des dimensions (Npx) a votre élément #parallax dans le bout de CSS ci-dessus ! De nombreuses options sont disponible (vitesse, durée, positionnement, ...), à voir sur le site de l'auteur.

Et voici les choses à ne pas oublier:

• Utilisez des images au format PNG avec transparence (logique puisque superposées)
• Utilisez un hack PNG pour la transparence sous IE6-
• Une image en arrière plan doit forcement être plus grande (surface) que celle qui se trouve devant elle ! Logique puisqu'elle de déplacera sur une plus grande distance. Donc prévoyez des image plus grande que votre conteneur !

Conclusions

Voilà un effet qui va beaucoup plaire aux graphistes, surtout ceux qui font une allergie à flash Par contre faites attention à l'abus car ça fait grimper sensiblement la consommation de votre processeur.

• Site internet : http://webdev.stephband.info/parallax.html
• Requis : http://jquery.com/
• Démo : http://webdev.stephband.info/parallax_demos.html
• Téléchargement : http://webdev.stephband.info/js/jquery.jparallax.js ou via webinventif

Voici encore un script qui va plaire aux utilisateurs de "lightbox like" ! Mais jQuery Popeye pourrait aussi intéresser tous ceux qui ont toujours été un peu retissant à lightbox ou qui cherche une manière pour intégrer une mini galerie dans leurs pages.

Comme d'habitude voici la démo pour les plus pressé d'entre vous: Démonstration

Utilisation

Il vous faudra construire une liste de miniatures entourée d'une div avec une class "popeye"

Ensuite vous intégrez jQuery (si ce n'est déjà fait), vous uploadez le plugin (tout le contenu du dossier) et vous ajoutez le code d'initialisation.

Code à placer entre les balises HTML <head> et </head>

Ps: si vous voulez que votre popeye ressemble au 2ème exemple (avec les petites icônes) il vous faudra inclure la feuille de style css/styling.css ainsi que le dossier gfx

Au final le système est peu intrusif, ne prend pas une place énorme sur la page et apporte un confort supplémentaire pour le visiteur ! Enjoy !

• Site internet : http://herr-schuessler.de/blog/jquerypopeye-an-inline-lightbox-alternative/
• Démonstration : http://dev.herr-schuessler.de/examples/jquery-popeye/
• Requis : http://jquery.com/ et en option http://gsgd.co.uk/sandbox/jquery/easing/
• Téléchargement : sur la page du plugin http://plugins.jquery.com/project/popeye ou via webinventif

Alors si vous êtes adepte des pubs sur votre blog, vous connaissez très certainement la régie Blogbang qui utilise un support vidéo couplé à du javascript pour l'affichage.

Donc Blogbang c'est génial, tout le monde en met partout, Adblock passe à travers (donc parfait pour les blog de geek) et le CPC (Cout par clic) est très honorable dans la plupart des cas. Mais tout n'est pas rose au pays de la pub puisque le service connait régulièrement des ralentissements et avec presque 160 millions d'affichages par mois on peut comprendre la difficulté de garder un système fluide. Le problème c'est que l'intégration de leur pub passe par un fichier javascript hébergé sur leurs serveurs, du coup quand il rame, c'est tous les sites affiliés qui subissent des ralentissements. Au mieux c'est juste l'icône de chargement qui reste affichée indéfiniment, mais au pire le script bloque le chargement de la page et vos visiteurs doivent patienter avec une page à moitié chargée !

Le préjudice est d'autant plus grand lorsque votre script blogbang et placé au début de votre page (je parle en terme de code source, pas de design) car la page va faire une pause à cet endroit et donc empêcher le visionnage du reste du document !

Pour le confort de vos visiteurs, il est donc préférable de charger le script Blogbang en dernier, comme tout le javascript de votre page d'ailleurs (dans la mesure du possible). Évidement dans le cas de Blogbang ça pose problème étant donné que c'est l'appel du script qui provoque l'affichage des bannières ! C'est pour ça que l'on va ruser pour placer les bannières là où on le désire dans notre page tout en le chargeant en dernier ce qui évitera à votre page de se figer pendant les ralentissements.

Les plus:

• On évite de bloquer toute la page avec le chargement du script. Donc vos visiteurs ne prendrons pas la fuite et votre site gagnera en accessibilité.

Les moins:

• Si le script blogbang rame vraiment trop ou que vos pages sont longue à charger, vos visiteurs pourraient ne pas voir les pubs ... et donc ne pas cliquer dessus. Mais il est préférable de perdre 1 clic ou deux plutôt que de perdre des visiteurs ... non ?

Placement via javascript (jQuery)

Donc je pars du principe que vos pages embarquent déjà la librairie jQuery. A inclure entre les balises HTML <head> et </head>.

1. Tout d'abord on va charger le script dans une div cachée en fin de page, juste avant la fermeture de la balise "body" (</body>)

2. Ensuite un petit bout de CSS pour cacher et mettre en forme le bloc (à mettre à la fin de votre votre feuille de style)

3. On va utiliser jQuery pour recuperer la div cachée et l'injecter où on le désire dans notre page.

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js

Je vous ai mis plusieurs exemple d'injection, utilisé celui qui vous convient le mieux (commentez et décommentez selon vos besoins). Et si vous utilisez plus d'un script blogbang par page (pas bien !), il vous faudra multiplier les div cachées en fin de code.

Placement via CSS

Pour cette méthode, il va vous falloir déjà quelques notions de CSS car il faudra l'adapter selon la structure de votre page !

Je vais donc expliquer le principe sans rentrer dans les détails.

Selon le type de site, vous devrez embarquer le script Blogbang un peu plus haut dans le code source. Par exemple si vous avez un site qui se centre sur la page, il faudra certainement embarquer le script juste avant la fin du conteneur principale au lieu du body. Ensuite il faudra appliquer un display: relative; sur ce conteneur et un display: absolute; sur la div contenant le script. Là c'est à vous de jouer avec les valeurs top/left/bottom ou right du script pour placer au mieux la bannière. Pensez aussi à laisser un espace blanc suffisant à l'emplacement réservé à la bannière, en appliquant par exemple un margin/padding/height conséquent.

Conclusions

C'est un peu du bidouillage, mais en attendant que blogbang nous propose mieux ou qu'ils investissent dans de meilleurs serveurs, ça peut dépanner !

Et voici donc la 3ème liste de liens de mon Summer Links Tour ! Au menu: des excellents plugins pour Mootools et jQuery, ainsi que des astuces et script en javascript bien utiles ! Prenez votre temps, certains valent le détour (et auraient mérité un billet individuel, mais je manque de temps)

Go go go !

1. Window.Growl 2.0 with MooTools 1.2beta2
   Voici la nouvelle version du plugin mootools qui sert à faire apparaitre des notifications
2. nyroModal :: jQuery Plugin
   Encore un plugin jQuery qui vous permet de faire des effet style lightbox. Mais il permet aussi tout un tas d'autres choses, comme l'affichage de vidéos youtube ou de texte chargé en Ajax. De plus il n'est pas très lourd. Bon plugin.
3. prettyPhoto - jQuery lightbox clone
   Hop, on continue dans les plugin jQuery style lightbox ! Lui il affiche uniquement les image mais la présentation est fraiche et sympa.
4. jQuery.ifixpng - png transparency for windows ie versions below 6
   Plugin jQuery pour fixer la transparence des png pour Internet Explorer 6 et moins
5. jTouch - Color Charge
   Si vous êtes tellement accroc a jQuery que vous ne pouvez plus vous en passer même en déplacement, voici une site pour avoir la documentation jQuery depuis votre iPhone ! Classe non ?
6. jQuery Slug Plugin
   Voilà un plugin qui permet de nettoyer une chaine de caractères pour pouvoir ensuite l'utiliser dans une URL (Slug)
7. Creating accessible charts using canvas and jQuery
   Avec cette technique, vous pourrez créez des graphiques et tableau facilement tout en restant accessible !
8. How To Create A Keypress Navigation Using jQuery
   Un tutoriel qui vous apprend à mettre en place un système de navigation par clavier à l'aide de jQuery. Très sympa !
9. Mootools Ajax Calendar (Vista-Like)
   Afficher un calendrier via Ajax avec un style Vista grâce à ce plugin Mootools
10. Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
    Tutoriel (+ ressources) pour créer un menu en accordéon à l'aide de Prototype et Scriptaculous
11. stanlemon.net : jgrowl
    L'équivalent de Window.growl mais pour jQuery cette fois (permet donc d'afficher des fenêtre de notifications)
12. Superfish - Suckerfish on 'roids
    Un plugin jQuery qui va vous permettre de gérer très facilement des menus à plusieurs niveau (et avec des animations) ! Jeter un oeil sur la page de demo, c'est vraiment bien fait.
13. JavaScript - ToC script
    Excellent petit bout de javascript qui permet de créer des table de matières à la volée en fonction des balises titre H.. de vos pages !
14. SyntaxHighlighter
    Plugin jQuery pour mettre en forme automatiquement vos codes (coloration syntaxique)
15. ColorPicker
    Voici un colorpicker pour jquery, très sympa ! Avec différents mode d'utilisation !
16. Building your own lightbox - part 1
    Aucun des plugins type lightbox ne vous convient ? Alors essayer de faire le votre à l'aide de ce tutoriel !
17. Unit PNG Fix
    Nouvelle manière élégante de gérer la transparence des png dans IE !
18. UniTip
    Petit tooltip (info bulle) en javascript avec transparence
19. Update: A New & Improved jQuery Script to Automatically Preload images from CSS
    Un script jQuery qui permet de preloader les images de votre site de manière sympathique !
20. mcDropdown jQuery Plug-in
    Plugin jQuery qui permet de créer des menus déroulants élégants, animés et avec plusieurs profondeurs !
21. BarackSlideshow - An elegant, lightweight slideshow script
    Script pour Mootools permettant de créer une visionneuse d'image vraiment très jolies et efficace ! A voir !
22. getElementsByClassName versión 2008
    Fonctions javascript pour parcourir vos éléments HTML par nom de classe !
23. jQuery::planize, a plugin to enhance your hierarchical documents
    Voici un excellent plugin pour jQuery ! Il permet de créer une table des matières à la volée en se basant sur vos balises titres. Si vous avez lu le début de cette liste, je parlais d'un bout de code capable de faire ça ... Mais ici c'est bien plus poussé ! Vous pourrez aussi énumérer vos titres, choisir la syntaxe, etc ... Et en prime, il y a un bookmarklet disponible qui permet de l'utiliser sur n'importe quel site ! A tester !
24. jVal - jQuery Form Field Validation Plugin
    Plugin pour jQuery qui permet de contrôler la validation de vos formulaires

Autre [Summer Links]:

• 16+ Tutoriels et Astuces pour vos créations web
• 26+ Applications et Ressources internet à découvrir

PS: Je rappel que je partage régulièrement pas mal de ces liens en avant première sur mon twitter

jHelperTip est un plugin pour jQuery qui vous permet d'afficher des infos-bulles (tooltips) sur votre site/blog. Même si chaque système d'info-bulle se ressemble, ils ont tous leurs particularités. Celui-ci est assez complet et facile à prendre en main.

Allez, voici la demo !

Mise en place

1. On inclut la librairie jQuery (si ce n'est pas déjà fait) ainsi que le fichier jquery.jHelperTip.1.0.min.js dans la page entre les balises HTML <head> et </head>

2. Pour activer les tooltip, on inclut le code suivant:

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js

Evidement ce ne sont que des exemples, à vous d'adapter.

Les options possibles

• trigger: "click" ou "hover"
• topOff: position offset vertical du tooltip par rapport au pointeur de la souris
• leftOff: lposition offset horizontale du tooltip par rapport au pointeur de la souris
• source: peut ètre "container", "ajax" ou "attribute", container est un objet DOM de la page, ajax charge le contenu d'une autre page, attribute récupère un attribut html de l'élément courant.
• attrName: le nom de l'attribut HTML que vous voulez afficher dans le tooltip (uniquement si l'option source vaut "attribute")
• ttC: l'élément DOM qui recevra le contenu chargé en AJAX, si pas précisé, un conteneur sera crée automatiquement
• dC: l'élément DOM qui sera affiché si l'option source vaut "container"
• aC: l'élément DOM sur lequel recuperer l'attribut (uniquement si l'option source vaut "attribute")
• opacity: opacité des tooltips
• loadingImg: url relative de l'image de chargement(uniquement si l'option source vaut "ajax")
• loadingText: texte pendant le chargement (uniquement si l'option source vaut "ajax")
• type: "GET" ou "POST" (uniquement si l'option source vaut "ajax")
• url: url relative de la page à charger (uniquement si l'option source vaut "ajax")
• data: les données à passer à votre page appelée en AJAX (uniquement si l'option source vaut "ajax")
• autoClose: true ou false, précise si la tooltip doit se fermer via une action

Liens

• La demo
• Télécharger l'exemple
• Site officiel