J’en ai parlé timidement, il y a environs 1 mois, je tenais à mettre en place un blog collaboratif sur le web-développement et design.

Si comme moi, vous cherchez régulièrement des news sur des apis, techniques ajax et scripts particuliers, vous savez que ce n’est pas sur le site du zero que vous trouverez ça.

Souvent, c’est sur des blogs de développeurs, pas spécialement dédié au développement que l’on trouve les solutions. Souvent aussi, les développeurs n’ont pas le temps de tenir un tel blog à jour, risquant même de laisser celui ci aux oubliettes après 2-3 articles.

C’est là que je me suis dit qu’il y a un truc à faire: Proposer un blog commun sur le dev et design où les blogueurs ne sont pas forcés de proposer un tuto toute les semaines, mais  peuvent tout même partager leurs connaissances et expériences.

Vous me direz, y a des Forums pour ça. Oui, mais il est difficile de retrouver le bon noyé dans le mauvais sur Forum.

Le projet Frenchcoders renommé  SmashingCoding en hommage à l’excellent Smashing Magazine est né.

Si vous êtes web-développeurs ou web designer et que vous voulez contribuer à l’élaboration de ce blog qui je l’espère sera un jour une référence, vous pouvez me contacter par mail.

Ce problème n’est pas nouveau, ajouter des videos de chez youtube, dailymotion ou encore youmake.tv n’est pas un jeu d’enfants pour ceux qui utilisent l’éditeur visuel de WordPress

De nombreux soucis peuvent apparaitre comme la balise embed qui se change en ibed ou encore la balise object qui se referme trop tôt.

Alors, comme on m’a demandé de trouver une solution, j’ai cherché et j’ai trouvé.

Cette solution marche sur mon blog, mais pas testé ailleurs.

Avant de faire cette manip, je vous conseil de sauvegarder votre source wordpress, c’est réservé aux utilisateur avertis.

1. ouvrez le fichier « wp-includes\js\tinymce\tiny_mce.js » et mofiez cette partie
   // Convert all strong/em to b/i in Gecko
if (tinyMCE.isGecko) {
h = h.replace(/<strong/gi, '<b');
h = h.replace(/<em(\/?)/gi, '<i');
h = h.replace(/<em /gi, '<i');
h = h.replace(/<\/strong>/gi, '</b>');
h = h.replace(/<\/em>/gi, '</i>');
}
   par
   
// Convert all strong/em to b/i in Gecko
if (tinyMCE.isGecko) {
h = h.replace(/<strong/gi, '<b');
//h = h.replace(/<em(\/?)/gi, '<i');
//h = h.replace(/<em /gi, '<i');
h = h.replace(/<\/strong>/gi, '</b>');
//h = h.replace(/<\/em>/gi, '</i>');
}
En fait cette partie de code converti les balises <em> en <i> et malheureusement <embed> en <ibed>.
   ensuite vous sauvez et réupoadez votre fichier.
2. Ca règle un soucis, mais le problème de la balise <object> subsiste.
   Là , ça devient plus compliqué.
   • Vous commencz par télécharger TinyMCE: ici
     TinyMCE est aussi l’éditeur de WordPress
   • une fois décompressé, vous récupérez les dossiers « Media » et « Flash » ici:
     « tinymce\jscripts\tiny_mce\plugins\ »
   • que vous uploadez dans le dossier « wp-includes/js/tinymce/plugins/ » de votre blog
     ensuite vous éditez le fichier « wp-includes\js\tinymce\tiny_mce_config.php »
     et vous ajoutez media et flash à la liste des plugins comme ceci:$plugins = array('inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress','media','flash');
   • et ajoutez ‘media’, après ‘image’, à la liste des boutons comme ceci:
     $mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', 'separator', 'bullist', 'numlist', 'outdent', 'indent', 'separator', 'justifyleft', 'justifycenter', 'justifyright', 'separator', 'link', 'unlink', 'image','media', 'wp_more', 'separator', 'spellchecker', 'separator', 'wp_help', 'wp_adv_start', 'wp_adv', 'separator', 'formatselect', 'underline', 'justifyfull', 'forecolor', 'separator', 'pastetext', 'pasteword', 'separator', 'removeformat', 'cleanup', 'separator', 'charmap', 'separator', 'undo', 'redo', 'wp_adv_end'));
   • et vous sauvez et réupoadez votre fichier.

Il ne reste plus qu’à rafraichir le cache de votre navigateur et tester, vous obtiendrez un petit bouton à droite du bouton image qui vous permettra de placer ou réajuster des videos en cas de soucis.

Celles ci apparaitront dans votre éditeur sous la forme d’un bloc jaune.

Simon DUHEM developer/designer web, nous sort un concours comme je les aime : Gagnetondesign.fr

Il s’agit en fait d’un concours destiné aux designers, non codeurs qui désirent disposer de leur propre thème wordpress. Ayant réalisé moi même mon thème wordpress, je sais que ce n’est pas si simple que ça à réaliser.

Pour participer c’est simple, rendez vous sur le formulaire d’inscription en y proposant votre design et en remplissant les diverses informations nécessaires.

Une fois validés, les visuels seront disponibles sur la page du concours, dans l’ordre des soumissions.

Il n’y a qu’un seul gagnant par concours.

La fréquence des concours n’est pas définie, elle dépendra du temps de réalisation du précédent thème gagnant et de sa charge de travail extérieur.

Pour le moment, le concours s’adresse uniquement aux utilisateurs de WordPress. Tout simplement parce que c’est la plateforme qu’il utilise pour son blog. Il a déjà développé quelques thèmes pour cette plateforme, et via son concours, il désir offrir gratuitement son talent.

Encore un peu d’inspiration pour les blogueurs/designer. Voici 45 blogs dont le design sort vraiment de l’ordinaire.

Après Miniajax , voici un nouveau site de ressources ajax: Ajax Rain

sur ce site, vous découvrirez plus 450 ressources ajax triées proprement

A bookmarquer de suite si vous touchez au webdev.

vu sur CSS Juice

voici quelques bonnes inspirations  pour votre portfolio

Pour les adeptes du DHTML/Ajax, cette librairie permet de réaliser des effets de mouvement d’objets intéressants.

http://jstween.blogspot.com/ 

 De quoi devenir un pro de web-design rapidement

1. CSS-Techniques You Couldn’t Live Without
2. 25 Killer Code Snippets Every Good Web Designer Should See
3. 30 Dark Designs You Should’ve Seen
4. 50 Beautiful CSS-Based Web-Designs in 2006
5. CSS Live — Watch a page come together
6. JavaScript + CSS = Nice Picture Display
7. 100% CSS Rounded Corners WITH anti-aliasing. No images. No JavaScript.
8. The (only) Ten Things to Know About CSS
9. TOP 69 CSS Menus with Tutorials and Downloads
10. The RIGHT way to convert your Photoshop design to XHTML and CSS Layout
11. 15 CSS Properties You Probably Never Use (but perhaps should)
12. 71 CSS Menus for free
13. A Handy Little CSS Cheat Sheet
14. 12 Useful CSS Templates
15. CSS tips and tricks!
16. Free Design Templates
17. 12 Basic CSS Templates
18. Awesome: Pure CSS Image Gallery
19. CSS-Based Forms, Modern Solutions
20. Tutorials Round-Up: Ajax, CSS, JavaScript, PHP, MySQL and Much More
21. Howto: Square Corners with CSS
22. 25 Killer Code Snippets every Good Designer Should See
23. Tableless forms
24. A Cool CSS Effect to Dim the Screen (Dashboard Style)
25. Top 10 CSS image gallery tutorials
26. CSS Speech Bubbles
27. CSS Basics
28. 10 CSS Tips from a Professional CSS Architect
29. Over 100 CSS demos
30. Rounded corners without images
31. Holy Grail of CSS layouts
32. More Rounded Corners with CSS
33. COMPLETE Tutorial on CSS & HTML – Beginning up to Expert
34. CSS Layout Techniques: for Fun and Profit
35. CSS Frames
36. CSS Trick: Using Fewer Images
37. Clean CSS
38. Time Sensitive CSS Switcher
39. Handy CSS layout generator for web developers
40. CSS Library Launched
41. List of CSS Tools
42. Learn CSS Positioning in Ten Steps
43. Style your forms with CSS
44. CSS Optimization: Make your site load faster for free
45. CSSPlay.co.uk | tons of cascading style sheet ideas
46. How to create a StyleGuide for your HTML & CSS
47. Most Useful CSS Properties with Examples
48. Top 10 CSS Tutorials
49. Learn HTML or CSS fast
50. CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns
51. A great way to preload images on your site with CSS
52. Top Ten CSS Gallery/Showcase Websites
53. Over One Hundred page layouts, One CSS File
54. CSS: Getting Into Good Coding Habits
55. CSS Galleries
56. 10 CSS Tips to Make Your Life Easier
57. CSS-Based Navigation Menus: Modern Solutions
58. The only CSS layout you need
59. 20+ CSS Menus
60. CSS Techniques Roundup – 20 CSS Tips & Tricks
61. 5 Worthy CSS Tips
62. CSS Layout Tutorial for beginners
63. Quick ‘n easy CSS borders/shadows
64. Nice CSS How-To and Template site
65. How to Nail a Sexy Layout
66. Sample CSS Page Layouts
67. CSS SuperDouche
68. 5 Steps to CSS Heaven
69. 12 CSS Articles/Tricks of 2005
70. CSS Print Stylesheet Tips and Tricks
71. css Zen Garden: The Beauty in CSS Design
72. Web Developer’s Handbook | CSS, Web Development
73. CSS Beauty | CSS Design Showcase
74. CSS Vault » The Web’s CSS Site
75. Cascading Style Sheets
76. Dynamic Drive CSS Library- Practical CSS codes and examples
77. Layout Gala: a collection of 40 CSS layouts
78. CSS Cheat Sheet
79. CSS Import™ | The CSS Gallery
80. CSS Techniques Roundup – 20 CSS Tips and Tricks
81. Clean CSS – A Resource for Web Designers – Optmize and Format your CSS
82. centricle : css filters (css hacks)
83. CSS Basics – Making Cascading Style Sheets Easy to Understand
84. 70 Expert Ideas For Better CSS Coding | Smashing Magazine
85. CSS Remix: CSS-Based Website Gallery
86. intensivstation :: CSS Templates :: Templates
87. HTML and CSS Tutorials, References, Articles and News
88. CSS Mania
89. 53 CSS-Techniques You Couldn’t Live Without
90. Spiffy Corners – Making anti-aliased rounded corners with CSS
91. CSS Showcase | CSS Navigation Menus, Tabs and CSS Navigation Techniques
92. CSS Drive- Categorized CSS gallery and examples
93. How to make sexy buttons with CSS
94. Great CSS Editors for Linux
95. CSS Debugging Tools and Tricks
96. Free CSS Editors
97. CSS, Accessibility and Standards Links
98. Behaviour : Using CSS selectors to apply Javascript behaviours
99. 12 Basic Free CSS Templates – 12 Starting points for your CSS based website
100. Dynamic Drive CSS Layouts- Tableless, CSS based templates
101. All CSS Properties Listed Alphabetically