Article en plusieurs parties : 1 2 3 4
Ressources pour webdesigner
750 liens pour webdesigner sur Webdevelopers Field Guide
Micro-bloguez, il en restera forcément quelque chose ;) Merci à burningHat pour m’avoir fourni sur Jaiku cette formidable ressource qui contient à elle seule plus de 750 liens en relation avec le développement web ! dont voici le menu principal :
- inspiration
- web design reading
- typography
- fonts
- color theory
- color tools
- color palettes
- color patterns
- css: reading
- css galleries
- css: layouts
Encore des mines d’or pour la création de sites web :
- WebAppers — Le chasseur de ressources OpenSource pour les développeurs web : des widgets et des scripts pour votre blog ou votre site web, des polices de caractère, des palettes de couleurs, des photographies, des frameworks, etc.
- 13 effets lightbox en Javascript pour afficher des images, des vidéos, des pages html, etc. Contient également quelques plugins WordPress et Dotclear pour en simplifier l’installation.
- Et plus à venir…
Firefox
Les extensions indispensables pour le webdesigner :
- Web Developer — Véritable couteau suisse : vous avez la main sur l’ensemble des éléments de votre page web
- Firebug — Si vous ne deviez qu’en choisir qu’une, Firebug vous permettra d’éditer et de modifier vos CSS à la volée, de visualiser le DOM et de débuguer vos scripts.
- CSSViewer – Affiche les propriétés CSS calculées en affichant un cadre autour de l’élément pris en compte. Très pratique pour voir rapidement la structure d’une page tout en ayant les propriétés sous les yeux. Parfois agaçant à supprimer (F5 ou resélectionner l’utilitaire).
- YSlow — Analyse vos pages web pour en connaitre les goulots d’étranglement, d’après les règles de performances de Yahoo!
- ColorZilla — Sélectionne les couleurs sur votre écran. Possède en grand nombre d’options souvent méconnues pour retrouver vos couleurs dans l’historique ou afficher des palettes de couleurs très complètes.
- FireShot — Faites des captures d’écran tout en annontant, recadrant la partie qui vous intéresse. Le screeshot peut être enregistré sur le disque dur ou copié pour consommation immédiate !
- HTML Validator — indispensable pour s’assurer de la validité de votre page localement au regard des recommandations. Possibilité de choisir le mode de validation : Tidy ou OpenSP tout deux développés par le W3C. Tidy a l’avantage d’inclure les trois niveaux d’accessibilité définis par le WAI.
Les meilleures extensions Firefox pour le référencement ? Voici une liste fortement inspirée par celle de webrankinfo :
- Web Developer
- User Agent Switcher
- Customize Google
- Google Advanced Operations Toolbar
- Cache View
- Goldorank
- Google PageRank Status
- LinkChecker
- Live HTTP Header
- SearchStatus
- MetaTags
- SeoQuake
- Niche Watch Tool
- SEOHAND
- KGen
- Alexa Sparky
Tester vos pages web dans différents navigateurs
On n’a pas toujours l’occasion de pouvoir tester ses pages dans toutes les conditions. Voici quelques liens qui vous permettront de tester le design de votre site dans différents navigateurs. C’est rarement la panacée, mais très pratique pour voir si la mise en page résiste globalement à l’épreuve du feu…
- Browsershots — Possibilité d’avoir une capture d’écran de votre page web sous Linux, Windows, Mac OS et BSD : environ 50 navigateurs toutes versions et plate-formes confondues vous attendent.Choix de la résolution, de la profondeur de couleur, activation ou non de Javascript ou Java ou encore Flash.Délais d’attente raisonnable selon l’heure et le nombre d’options activées. Traduit en français.
- Scapture — Propose d’effectuer très rapidement des captures d’écran de vos pages Web sous Linux avec Firefox, Konqueror, Opera ou Dillo. Vous pouvez aussi vérifier l’affichage généré par les navigateurs en mode texte Lynx et Links.
- BrowsrCamp — Permet de tester vos pages sous Safari pour Mac OS X. Possibilité d’avoir la main sur une machine Apple équipé de tous les navigateurs pour Mac. Payant, mais idéal pour tester tous les aspects d’une page web (Javascript, Ajax, Flash, DHTML), à partir de 3$.
- NetRenderer – Vous permet de vérifier le rendu de vos pages web sur Internet Explorer 7, 6 ou 5.5, de manière très rapide. Il est possible de superposer les screenshot de IE7 sur IE6 en les mixant ou en en faisant la différence. Ce dernier mode est efficace pour visualiser rapidement les décalages des blocs.
Monitoring de sites web
94 outils pour monitorer son blog trouvés chez Christophe dont voici un échantillon :
- SEOmoz Page Strength Tool — Le PageRank ne vous donne plus satisfaction ? Ce site se proposse un outil pour calculer la “puissance” de votre page en prenant plusieurs facteurs en considération : l’âge du domaine, le rank Alexa, le nombre de liens entrants d’après Technorati, le nombre de fois où votre site apparait dans del.icio.us, s’il est présent dans l’annuaire DMOZ ou Wikipedia et bien sûr le PageRank du domaine, mais aussi le nombre de liens pointant vers le domaine d’après yahoo! Site Explorer.
- Meta Tag Analyzer — Comme son nom ne l’indique pas assez, se site vous donne la liste des mots-clés trouvés dans les liens et le nombre de fois où ils apparaissent ; les mots-clé présents dans les balises alt de vos images et ceux trouvés sur la page avec le nombre de fois où ils sont présents et leur densité par rapport aux autres.
- IminR — Un outil de mesure d’audience web personnalisé, proposé par Stéphane Guerin aussi bien – sinon mieux – que Google Analytics : rapports personnalisés, parcours de votre site par les visiteurs, etc. A tester d’urgence !
- HeatMap — Pour savoir quelles zones de votre sites sont les plus cliquées.
Icônes et goodies pour photoshop
- Silk Web Icons de FamFamFam — Souvent imité jamais égalé, le pack à télécharger d’urgence.
- IconBase — Des milliers d’icônes pour tous les goût de très bonnes qualités et classées.
- nerdbusiness — Pas moins de 5978 icônes de qualité pour agrémenter vos pages web. Petit coucou à Sonia de Webfruits en passant ;)
- WebsiteIcons — Environ 1000 icônes classées par thème : navigation, flèches (plus de 500), applications, hardware, CMS, calendrier, rechercher, compte, etc.
- PIXELGIRL PRESENTS — Des centaines d’icônes proches du clip-art classées par thème.
- Feed Icons — Tout ce qu’il faut savoir sur les icônes pour signaler vos flux RSS : téléchargement des icônes au format .psd de Photoshop ou .ai d’Illustrator ; exemples de style CSS pour les intégrer dans votre site ou votre blog et guide d’utilisation.
- Svay — 46 icônes pour le web de bonne facture .
- N.DESIGN Studio — Plus de 320 icône en 14×14 avec fond transparent tout spécialement conçues pour vos menus de navigation.
- IconsPedia — Nombreuses icônes de qualité classées par thèmes. Un mauvais moment à passer avec la pub un peu envahissante à chaque changement de rubrique.
- Dezignus — Des icônes sur pratiquement tous les thèmes. Dezignus est aussi une ressource intéressante pour tous ce qui se rapproche du design au sens large : brushes pour Photoshop, tutorials pour Illustrator, photographies aussi diverses qu’utiles, etc.
- WebAppers — Des liens vers des milliers d’icônes très classes pour tous les usages.
- Speckyboy — nous propose une liste de 40 ressources d’icônes libres de droits.
- Hongkiat — la liste ultime d’icônes pour vos flux RSS.
- Smashing Magazine — 35 sets d’icônes vraiment incroyables. Via fran6art.
- Hybridworks –Set de 35 icônes au format `.ico` et `.png` (128×128) dans le plus pur style japonais : élaborée et détaillée. Très classe.
- Naldz Graphics — 300 brosses (brushes) abstraites pour Photoshop.
- Icon Finder — Moteur de recherche parmi 113 000 icônes et 238 collections d’icônes par mots-clés.
Tutoriels ou tutoriaux webdesign
- Webdesign tutoriaux — Plus de 1000 tutoriels pour Illustrator, Photoshop, PHP, XHTML et CSS, The Gimp, Dreamweaver, Fireworks, Flash.
- Babylon Design — Plus de 100 ressources autour de Photoshop et du couple XHTML/CSS
- ELITWORK — Nombreux tutoriels XHTML, référencement, Ajax, Webalizer, Microformats. Des informations pertinentes malgré un partis-pris en faveur des espaces de nommage XML au détriment des microformats, par exemple.
- TUTMARKS.com — Un digg-like spécialisé dans les tutoriaux ? Vous en rêviez ? Mehdi l’a fait. Très nombreux tutos sur à peu près tout les sujets liés au web. Un flux RSS par statut des propositions (tutoriaux publiés, en attente) est disponible, ainsi que le flux de tous les tutoriels proposés
- SmashingCoding — Plus de 60 tutoriels Web Design 2.0.
Références, outils et dictionnaires
Cette grosse liste ne serait pas complète dans les sites de références que l’on devrait avoir sous le coude lorsque la mémoire fait défaut. Suite à un billet sur les 13 outils de l’intégrateur web, j’ai intégré les liens qui en faisait partie, ainsi qu’une partie de ceux qui m’on été founis en commentaires :
- yoyodesign — Nombreuses traductions d’articles et de recommendations du W3C. Voir également la liste des traductions françaises des documents du W3C
- htmldog — C’est en anglais, mais la clarté des explications en fait une référence incontournable pour tout ce qui touche au développement web, avec un dictionnaire HTML où l’on retrouve toutes les balises passées au crible avec des exemples d’utilisation, les attributs requis, les attributs optionels et des exemples !
- gotAPI — regroupe les principales API du web dans une interface Ajax très réactive : HTML, CSS, Javascript, jQuery, PHP, Ruby, asp, mais aussi le fonctionnement de certains CMS comme Drupal ou de services web comme Flickr.
- giminik — La liste des balises XHTML 1.1 (ou 1.0 Strict sans les éléments obsolètes), leur utilité, leurs attributs, leurs évènements et la relation entre parents et enfants (hiérarchie). Indispensable pour construire un document valide.
- Guide HTML — Le HTML de A à Z de Laurent Bernat : 95 balises HTML décrites par le menu (version, compatibilité Netscape / IE, type, attributs, usage, exemples) (Merci Loïc M.)
- Opquast — l’ensemble des bonnes pratiques pour la qualité des services en ligne. Abonnez-vous au fil RSS des bonnes pratiques pour avoir votre dose quotidienne.
- Openweb — Les bonnes pratiques en action pour les technologies du web (XHTML, RSS, CSS, DOM, PNG) et les différents thèmes qui y sont associés (pages dynamiques, navigateurs, accessibilité, études de cas, mise en page, multimédia, structure).
- Développez (pour le web) — toutes les technologies du web à portée de clic. Des tutoriels, des cours, des documents à télécharger. Allez, faites le plein !
- Forum Alsacreations — Presque toutes les questions sur les CSS et le HTML et quasiment toutes les réponses ! Cerise sur le gâteau, la FAQ est complète et bien organisée.
- Wiki Media Box — Pour obtenir une présention claire (succinte ?) d’une propriété CSS et sa compatiblité avec les navigateurs, c’est nickel (Merci Pierre le Bot),
- Leftlogic — Permet de voir le code html d’un caractère, pratique lorsqu’on cherche le code pour ñ par exemple (Merci Anthony),
- Format publicitaire AdSense — Et oui, qui n’a pas eu besoin de prévoir des emplacements publicitaires dans une charte graphique et de chercher les formats les plus courants ? Voici les formats en vigueur chez Google, qu’il s’agisse des formats textes, images ou vidéos.
- Blogmarks — Avec del.icio.us et ma.gnolia, je me suis remis à utiliser blogmarks qui garde un petit quelque chose en plus par rapport aux autres solutions de bookmarking social.
- Bluevertigo — Un maximum de ressources graphiques et typographiques dans une interface toute en scroll horizontal. Au menu : Photothèques, clip-art vectoriel, polices de caractère, logothèques, sons, brosses (brushes) Photoshop, modèles 3D Poser, icônes, palettes de couleurs, générateurs de textes, échantillons graphiques (patterns).
- WordReference — Sans doute le meilleur site de traduction (mot à mot en incluant les locutions idiomatiques). Pour les cas difficiles, vous pouvez utiliser le forum. Nombreux plugins Firefox pour la recherche par langue.
- Les dictionnaires — Un maximum de dictionnaires thématiques classés par catégories : langue française, synonymes, encyclopédie, citations et expressions, gastronomie, humour, acronymes, etc. Mention spéciale pour le Trésor de la Langue Française Informatisée (TLFI pour les intimes) : interface web 0.2 mais très efficace
(Florent V. sous souffle dans l’oreillette que l’on peut y accéder via le portail lexical du Centre national de ressources textuelles et lexicales.
Inspiration, expiration…
Section inspirée (ça tombe bien) par e-likko :
- typeish — Sélection serrée d’images inspirantes, provoquantes ou intoxicantes dans le domaine de la photographie, du design, des polices de caractère, de l’art, de la mode ou du packaging.
- Kalle Gustafsson — Très belle photos de mode, beauté, magazine et voyage.
- FFFFOUND! — Véritable mine d’or, ce site bookmark des milliers de visuels de toute sorte. Un bol d’air frais à inspirer régulièrement !
- Et plus à venir…
WordPress »
Article en plusieurs parties : Page précédentePage suivante
NB: « NVU est mort, vive Kompozer »
http://www.framasoft.net/article2243.html
et
http://www.kompozer.net/
Merci, c’est corrigé ;)
De rien ;)
Et une liste de plus à bookmarker, une !
Merci ^^
elle est enorme cette page. s’il yavait un moyen de ‘deliciouser’ tous les liens de cette page, ce serait merveilleux !
merci !
Super merci à toi, je prendrais le temps de lire car là on est gâté, c’est complet ;-)
Ca, c’est cool ! Merci à toi ! Je bookmark au chaud.
Bonjour je voulais savoir quelque chose qui n’a rien a voir avec votre billet mais plutôt sur le logo que vous avez, j’aimerez bien avoir le même style de photo avec ce filtre très web2.0, comment l’avez-vous fais ? Avec un logiciel ou sur le net? Merci beaucoup et aussi savoir si vous intégrez dans votre blog « Gravatar » je trouve se concept très intéressant et mérite à être poussé !
Dans les éditeurs de textes pour mac, il en manque beaucoup d’important. Contrairement à il y a 3 ou 4 ans en arrière, aujourd’hui parler seulement de BBEdit est tout simplement RIDICULE.
Il faut aussi cité TextWrangler, un BBEdit light, suffisant pour la plupart des gens et surtout gratuit, aussi fait par BareBones. Il ne faut pas oublier Smultron (http://smultron.sf.net/) qui est un très bon éditeur open-source (et donc gratuit aussi en plus d’être très bien).
Et surtout, surtout, la plus grosse erreur, l’oubli de TextMate ! TextMate !! l’éditeur de texte le plus puissant toutes plate-formes confondues ! Tellement qu’il se fait cloner pour windows (Intype, E), pour Linux (Scribes, plug-ins pour Gedit…). C’est le seul éditeur utilisé par les développeurs de Ruby On Rails par exemple. TextMate n’est pas libre, il coûte 39€. Je peux vous dire que ces 39€ font partis des euros les mieux dépensés de ma vie. TextMate a lui seul est une raison d’acheter un Mac. C’est aujourd’hui la seul chose que me retiens sur l’OS d’Apple à la place de passé sous Debian.
Bref, un article qui parle d’éditeurs de textes pour développeurs et/ou développeurs web qui ne parle pas de TextMate me fait un peu l’effet d’un café sans café : de l’eau chaude :-p.
Oups ! Je suis aller un peu vite !
L’article parle bien de TextMate, j’ai juste raté la ligne en scrollant :-D.
Ben tant mieux, je suis content de m’être planté :-)
Dans les framework javascript, il y a un fork de YUI très prometteur appelé extJS. Je vous laisse regarder les exemples pour apprécier le travail du developpeur : http://extjs.com/deploy/dev/examples/
@p4bl0 > J’ai ajouté TextMate in extremis suite à la suggestion de Franck Taillandier, donc tu l’as peut-être raté si tu as affiché le billet juste après sa publication ;)
Sans avoir fait l’impasse volontairement sur les logiciels disponibles sur Mac OS X, n’étant pas utilisateur de Mac, certaines dénominations de soft me sont totalement étrangères (et assez mal référencées sur Google soit dit en passant), mais grâce à toi, c’est réparé :)
@Franck Taillandier > Merci encore pour TextMate : pour un peu, c’était le goudron et les plumes :D J’ai également ajouté Ext JS.
je suis a la lecture des différents éditeurs et je me posais la question de savoir quels sont ceux que tu utilise actuellement. @+
Et encore merci pour cette bonne lecture du vendredi soir ;-)
@lebaron > Pour le logo css4design, j’ai utilisé Illustrator et un simple effet de tranparence sur un objet ovoïde placé au-dessus du texte. Les gravatars sont actifs ici-même ;)
Bravo pour ces listes, j’ai de quoi passer quelques heures à tout consulter ! Je mets ça dans un coin de mes bookmarks… Merci pour la référence à WRI (WebRankInfo) Olivier
@shao69 > c’est une bonne question parce qu’évidemment je ne les utilise pas tous ;) J’ai utilisé Dreamweaver pendant des années en mode visuel au début, puis en mode code exclusivement pour me mettre au régime Notepad++ et Filezilla qui reste la solution que j’utilise le plus souvent.
Depuis quelques temps, j’utilise PSPad que je trouve vraiment bien fait, très clair, même si je regrette parfois le manque d’intégration du FTP : sur Dream, une fois la gestion du site configurée il est possible d’enregistrer et uploader en même temps ou à la demande, ce que je n’ai pas encore trouvé ailleurs.
@Olivier Duffez > La référence à WRI est la moindre des choses, surtout que si l’on entend souvent parler des extensions Firefox pour le développement c’est plus rare pour le référencement ou l’optimisation des sites web : merci à toi ;)
J’avoue ne pas utiliser cette fonction. Ce que j’aime sur dream c’est que les pages peuvent dépendrent d’un modèle, pratique pour les mises à jours. Je ne sais pas si les autres éditeurs ont une telle fonction?
@shao69 > Je n’ai pas utilisé les modèles de Dream depuis presque 7 ans, et à l’époque c’était buggé à mort… Je préfère largement travailler avec des includes PHP côté serveur.
Là où Dream est vraiment excellent, c’est : l’intégration du FTP qui est très confortable ; les fonctions chercher/remplacer que je n’ai pas encore trouvées ailleurs ; et l’explorateur de fichiers qui est très complet. Ah oui, la répercution des changements de noms de fichier dans l’ensemble du site est un plus indéniable.
Reste le prix…
Facebook.com is the online social networking site. Here people come into contact with each other and build up relations whether personal or http://www.alexa.com/data/details/main?url=www.fortunehotels.in business.
Je te félicite pas Bruno, tu viens de pourrir mon week-end… Déjà que j’ai du boulot à faire et que ça va être dur de me concentrer avec ce beau temps, là, je n’ai qu’envie de flanner sur tous les liens que ne je connaais pas…
Seb.
Il existe un éditeur HTML/CSS qui intégre les fonctionnlités FTP sur Mac (switche br1o switche). C’est Coda et son interface originale. : http://www.panic.com/coda/
CSSEdit intègre la gestion des versions pour les feuilles de styles, je trouve ça plus que pratique.
Pour en revenir aux interfaces, c’est vrai qu’HTML-Kit au début, c’est pas vraiment engageant. Coda ou CSSEdit sont à l’inverse : tout est pensé pour que le logiciel puisse être pris en main rapidement.
waaaah !!! merci ;) ça c’est vraiment tip top comme billet, mais purée, y en a vraiment beaucoup des liens quand même ! Peut être que scindé en plusieurs billets ç’aurait été moins lourdingue :D mais nan c’est très bien comme ça :)
Bonjour! En tant qu’intégrateur CSS et XHTML de profession, je crois bien être tombé au bon endroit! Ma copie vient de s’acheter un MacBook et je n’avais aucune idée des logiciels disponibles pour coder mes sites sur Mac.
Je sens que votre blog va grandement me servir, ne serait-ce que pour me rappeler certaines choses que j’ai oubliées ;)
Merci et continuez votre travail!
Dans le monde Windows / multi-plateforme: Pour l’intégration FTP/SFTP/CVS/Subversion => Eclipse pardi ! :D Pour les fonctions de recherches vraiment avancées (regex multi-fichiers par exemple) sur un éditeur de texte (pas un IDE) vraiment léger, le mieux que j’ai vu et utilisé des années durant reste ConTEXT
Cité deux fois dans un article, cool :)
@Frank > Merci, j’ai intégré Coda dans la liste.
@redpeppers > scinder la grosse grosse liste en p’tites listes ? Non ;) Par contre je reprendrais peut-être certains éléments que je testerais et détaillerais peut-être un peu plus tard :)
@Le Détracteur > Merci. Sinon, pour l’inclusion des soft Mac dans la liste, il faut plutôt remercier les commentateurs avisés ;)
@burningHat, alala, tu es allé trop vite : Eclipse est le premier de la liste avec en prime tout les plugins kivonbien :D
@leGizz > C’est normal, d’ailleurs si tu veux que je linke sur autre chose (url spécifique, autre blog, etc.) n’hésites pas ;)
@all > Grâce à vous, cette grosse grosse liste commence à avoir de la gueule ^_^
salut Bruno, merci beaucoup pour cet article de synthèse super bien fait… Je vais aller y fouiner pour trouver mon bonheur ! à bientôt !
@bruno je ne suis pas allé trop vite, je répliquais juste à ton commentaire à propos des qualités de Dreamweaver : que t’avais pas trouvé d’IDE disposant d’un système d’upload FTP aussi puissants ni de système de recherches aussi performant, etc. ;)
J’ai bien vu qu’il était dans ta liste héhé :D
Dans les éditeurs, il me semble qu’il manque l’incontournable éditeur multiplateforme SciTE… Mais bon, faudrait un site dédié rien que pour présenter la pléthore d’éditeurs et d’IDE existants :s
@LOmiG > Prends ton temps, comme en plus la liste s’etoffe presque tous les jours ;)
@burningHat > J’avais pas compris ;) Tu veux dire que dans Eclipse tu peux configurer ton site distant et ton site local de manière à enregistrer localement tes modifs et les uploader soit à l’enregistrement soit avec un équivalent clavier ? Parce qu’il y a pas mal d’éditeurs avec FTP intégré, mais c’est souvent à peine moins pratique que de lancer SmartFTP sur un deuxième écran :D Je vais jeter un oeil sur le site de SciTE…
Salut
Pour e-textEditor il faut préciser que c’est un logiciel payant 35$ ;-) Encore merci pour cette liste
J’ajouterais qu’Eclipse est également disponible sous Linux et sous Mac.
En ce qui concerne le monitoring de site Web j’aurais ajouté Internet Vista (http://www.internetvista.be)
Un bon petit logiciel aussi : sftpdrive qui permet de mapper des lecteurs windows (g:,h: …) à des dossiers sftp ce qui est très pratique pour créer des projets à distance avec vos éditeurs html même si ils ne supportent pas le sftp.
Vous pouvez essayer le logiciel pendant 60 jours
@bruno ouaip c’est exactement ce que je veux dire… Entre la gestion des dépôts CVS et SVN intégrés et accessibles via clic-droit (gestion des conflits et autre joyeuseté inclus) et la synchronisation « multi-type » (projet à projet, projet à site FTP, projet à site sFTP, etc.) y a tout pour faire le bonheur des développeurs exigeants à ce niveau. Eclipse a certainement des défauts (je lui en reproche quelques uns d’ailleurs) mais pas celui-là ! :D
[...] Publié par aiglestates sur février 13, 2008 Deux sites qui nous offre des utilitaires pour blog et il on des liens intéressant Dyblog et Css4design [...]
Woa, superbe liste ! Je n’ose imaginer tout le boulot que ça a dû demander pour faire de la veille et trier ensuite tous ces articles, rédiger les descriptions…
Merci beaucoup pour cette impressionnante liste que je bookmark de suite, ainsi que pour le lien vers mon blog :)
@burningHat > Effectivement, j’ai installé Apatana Studio et la gestion du FTP ressemble bcp à celle de Dreamweaver. Zut, moi qui m »était décidé pour PSPad ^_^v
@DaSayan > En fait, c’est bcp moins long que ça peut paraitre ; et puis la liste s’est bien améliorée depuis sa publication initiale grâce aux nombreux liens suggérés dans les commentaires, ce qui m’a poussé à mieux organiser la liste elle-même au niveau de la mise en page pour améliorer la lisibilité, ce qui est crucial avec autant de liens ;)
Mon outil pour rédiger les billets n’est plus WordPad, mais NotePad++…! Merci pour la découverte ! ça me facilite le boulot (plus besoin de vérifier que mes balises sont fermées…). Sais-tu s’il est possible de limiter le nombre de colonnes de l’affichage..?
et merci pour le lien au fait, c’est gentil, mais moi je n’ai rien fait ! enfin il y a quand même quelques liens vers de plugins sur mon blog :mrgreen:
[...] La boite à outils du codeur de site web [...]
Hello,
Je rajoute ma pierre à l’édifice pour les éditeurs de code: Komodo Edit, de la société ActiveState. http://www.activestate.com/Products/komodo_edit/
Je te fais l’article rapidement. Alors les plus :
Les moins :
Enfin, ActiveState est en train de libérer ce logiciel : http://www.openkomodo.com/ (disponible en Nightly… pas de version stable pour l’instant).
Dans la foulée, tu peux rajouter pour Linux l’éditeur Bluefish, qui est souvent cité et a de bons atouts pour les débutants en HTML en plus d’être très sympa d’utilisation. Je l’utilisais sous Linux (et Notepad++ sous Windows) avant de passer au tout Komodo Edit pour garder mes repères d’un système à l’autre. :) http://bluefish.openoffice.nl/
PS: je pense qu’il faudrait séparer les éditeurs pour Windows et les éditeurs multi-OS. Commence par les multi-OS (en précisant pour chaque logiciel les OS supportés), puis Windows, puis le reste. :)
@LOmIG > Que tu sois passé de wordpad à notepad++ justifie presque ce billet ;) Je n’ai pas bien saisi ta question concernant la longueur des colonnes, mais au cas où, tu peut aller dans Affichage > retour automatique à la ligne et ensuite diminuer la largeur de la fenêtre ;)
@Florent V. > Effectivement, ça permettrait de mieux organiser cette section et chacun y retrouverais mieux ses petits. C’est noté, merci ;)
Edit du 20/02/2008 à 23h26 : je viens tout juste de retrouver ton commentaire présentant Komodo Edit dans le panier à salades ;) (certainement à cause des liens ). Il reprend sa place dans l’espace-temps. En tout cas, merci pour les infos.
Oh Enorme !!! J’ai commencé à tout lire jusqu’à ce que je me rende compte que ca faisait un moment que j’étais sur l’article. Et hop dans mes favoris. Merci pour tous ces liens.
Super et merci, je complète ma liste de ressources déjà bien longue dont les meilleurs liens sur mon blog bientôt.
Sinon, ColorCop ( colorcop.net ) est une pipette free sous windows très pratique voire indispensable pour tout graphiste digne de ce nom ! ;)
Sympa Treeview pour jQuery nan ? ;-) (Je suppose que tu l’as utilisé pour cette liste, sans aller vérifier dans ton code ;-) ).
Merci pour toutes ces informations super utiles. :)
@xk_liber > pour la liste, c’est bien du jQuery, mais pas de treeviews, juste un slideToggle classique avec une pincée de css pour afficher le petit triangle ;)
@Bruno : ah, ok. Bien vu. ;) P-ê que TreeView utilise certains aspects de ces effets alors, car je l’utilise pas mal pour le projet sur lequel je suis à mon boulot et j’y ai reconnu une « patte » commune. :)
@xk_liber > ce sont certainement les mêmes fonctions vu que slidetoggle par ex. fait partie du « core » de jquery. Je viens de jeter un oeil sur treeview que je ne connaissais pas et qui est vraiment bien fait.
Ravi de te l’avoir fait découvrir alors. ;)
[...] 22 éditeurs HTML et CSS pour Windows, Mac OS X et Linux [...]
[...] source: article de Bruno Bichet sur css4design [...]
[...] La boite à outils du codeur de site web [...]
[...] » 1000 ressources pour le développement web et WordPress : la grosse grosse liste « css4design : … (tags: wordpress webdesign tools plugin list webmastering php css javascript) [...]
Magnifique liste qui m’a permis de remettre la main sur des liens égarés et surtout de découvrir des choses très intéressantes. Merci Bruno ! :)
Excellent article, bravo !
Je voudrais juste donner un petit coup de pouce à un éditeur de code pour Mac que j’utilise au quotidien, il n’est certes pas aussi puissant et complet qu’un TextMate ou qu’un BbEdit, mais il est tout à fait fonctionnel et son utilisation avec Php est vraiment le plus simple que j’ai pu tester jusqu’à présent : Taco Html Edit (http://tacosw.com/).
Merci pour avoir partagé toutes ces ressources fort utiles !
[...] auteur de l’excellent blog CSS4DESIGN vient de publier une liste très complète de plus de 1000 ressources pour faciliter le développement web avec des éditeurs de CSS, des plugins jquery, des extensions [...]
Salut en effet super article !!!
M’autorisait tu à publier cet article bien entendu en citant ton site cela va de soi!
Cordialement .
@budapass > Je préfère que cette grosse grosse liste qui a demandé un gros gros travail ne soit pas citée intégralement ;)
Si tu veux, tu peux citer extrait de chaque section, en incitant tes lecteurs à venir visiter la liste complète originale. Tiens-moi au courant !
@FredoMkb > Merci pour la suggestion de l’éditeur, je regarde ça ;)
@pickupjojo > Comme on dit : ravi que ça vous playze ;))
Voilà une liste plus qu’intéressante, très riche dans sa sélection. Elle m’a permis de retrouver quelques liens oubliés… Un gros travail de recherche et d’agrégation de ressources. Bravo !
Salut Bruno , tout bien réfléchi au lieu de citer à chaque fois ton lien je t’ai mis sur toutes mes pages :-)
Je mets élément par élément ;-)
++++
[...] Excellent dossier sur lequel je suis tombé et que je suis en train d’éplucher : ça vient de CSS4DESIGN, c’est signé Bruno Bichet et c’est je pense un incontournable guide pratique du webdesign. Au menu : [...]
[...] » 1000 ressources pour le développement web et WordPress : la grosse grosse liste « css4design : … [...]
Dans les éditeurs de codes il manque l’excellent Komodo (Komodo edit dans sa version gratuite), après avoir testé plus d’une dizaine d’éditeurs différents c’est celui que j’ai gardé pour sa richesse en fonctionnalités et la très bonne intégration de php & css & xhtml le tout complété par un gestionnaire de projet performant.
Salut à tous,
@Bruno : Définitivement tu es un OUF :D
[...] » 1000 ressources pour le développement web et WordPress : la grosse grosse liste « css4design : … o nome do link já diz tudo (tags: development css ajax design html javascript programming reference Resources webdesign tools) [...]
[...] » 1000 ressources pour le développement web et WordPress : la grosse grosse liste « css4design : … (tags: wordpress css resources javascript) [...]
[...] 1000 ressources pour le développement web et WordPress : la grosse grosse liste [...]
[...] » 1000 ressources pour le développement web et WordPress : la grosse grosse liste « css4design : … (tags: css free inspiration resources Ressource tools Webdesign jquery) [...]
[...] http://www.css4design.com : 1000 liens utiles pour les développeurs Exporter cette page en pdf. [...]
J’ajouterais geany à la liste des éditeurs de textes pour linux. Plus complet et efficace que gedit, il permet par exemple de plier le code par bloc. Encore plus complet mais pour un bureau KDE, il y a kate.
[...] Css4design : pour finir ce premier billet de ressources webmaster, voici la grosse grosse liste publiée par Bruno Bichet sur son blog : plus de 1000 ressources, javascript, css, wordpress… [...]
[...] Css4design.com avec 1000 ressources pour Wordpress et le développement Web [...]
Greffon "Pubs WP" pour Wordpress (traduction du plugin WP-Ads)…
Je vous propose une traduction du plugin WP-Ads de Nick Brady. Je l’ai appelé "Pubs WP". Antoine Boucherie a rédigé récemment une présentation de ce plug-in. Téléchargement format ZIP, format RAR, fichier pubswp.php, fichier…
[...] Le premier, c’est sur Css4design : 1000 ressources pour le développement Web et WordPress : la grosse grosse liste [...]
[...] 1000 ressources pour le développement web et WordPress par cc4design [...]
[...] 1000 ressources pour le développement web et WordPress par cc4design [...]
Wow , là ca risque d’etre difficile de faire mieux … Bravo et merci !
[...] 1000 ressources pour le développement web et Wordpress [...]
[...] site web, fonctionne-t-il toujours ? Vous avez fait une énorme liste de liens (comme par exemple 1000 ressources pour le développement web et WordPress), ceux-ci fonctionnent-ils encore [...]
pfffffffffou, copieux!c’est du boulot, du beau boulot!
@romain blachier: Merci ;) Ouais, c’est un peu de boulot de compilation et de mise en forme, mais ça se fait petit à petit ;)
[...] 1000 ressources pour le développement web et WordPress : la grosse grosse liste — Lu 9 763 foisDétourer les cheveux avec Photoshop — Lu 7 919 foisNombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web — Lu 4 356 foisDesign de formulaire HTML avec CSS — Lu 4 314 foisMenu à onglets avec javascript et css — Lu 3 772 foisExercice de style CSS et HTML : table vs div — Lu 3 122 foisMenu HTML et CSS, sliding doors et item current en PHP — Lu 2 815 foisGoogle de A à Z (bêta) — Lu 2 640 foisDesign CSS liquide (ou fluide) encadré d’images répétées… sans table — Lu 2 524 foisTrucs et astuces CSS — Lu 2 501 foise-commerce : quel E-CMS pour gérer votre boutique en ligne ? — Lu 2 084 foisTutoriel WordPress 2.2 : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR" — Lu 2 081 fois5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs — Lu 2 055 foisFramework JQuery pour écrire du Javascript non-intrusif — Lu 2 030 foisQuelques notes sur la bibliothèque Javascript IE7 de Dean Edwards — Lu 1 980 fois Partenaires .adHeadline {font: bold 10pt Arial; text-decoration: underline; color: #00008B;} .adText {font: normal 10pt Arial; text-decoration: none; color: #333;} Votre publicité ici ? [...]
Thank you for your website ;) I made with photoshop backgrounds for myspace or youtube and ect.. my backgrounds:http://tinyurl.com/5fmh8q have a good day and thank you again!
PcKULT.NET est aussi un excellent site pour les développeurs du web ; CSS, PHP, ASP, .NET, … tout y est.
Des informations très intéressantes. J’ai pour la première fois à votre blog et I liked it! Maintenant, je vais aller ici plus souvent!
[...] 1000 ressources pour le développement web et WordPress par cc4design [...]
ca c’est de la liste utile, bien organisée et bien présentée ! mais que demande le peuple ???
en tout cas un gros merci, tu nous évite 15h de de recherche GG et de lecture de forums et de commentaires de blogs !!!
J’ai ce site qui propose des ressources en web developpement et en référencement Google ;-)
@Alex: pas mal sauf que un article en presque deux ans c’est quand même limite … pas mal de choses ont changé dans le domaine depuis 2007 …
Je m’étonne qu’on ne parle pas dans cet article de Homesite… qui reste quand meme un des meilleurs éditeurs (a part pour le support de l’UTF-8)
@Bruno Bichet: tu as vu, y’en a pour qui la saint valentin est triste … ;-(
@maison de retraite: ’scuze,j’ai répondu trop vite : j’avais zappé le fait que tu répondais à @Alex… Putain d’hernie discale, ça m’apprendras ^^ Toujours copain ?
@Bruno Bichet: la hernie discale, c’est à cause d’une saint Valentin trop arrosée ??? ah les problèmes de riches … :-)
[...] 1000 ressources pour le développement web avec notament des plugins et sources jquery [...]
salut, comment tu as fait pour obtenir une liste ul avec des petits onglets pour ouvrir et fermer les listes ??? je cherche ça pour mon blog. Merci d’avance !
Super l’article juste j ai remarqué un lien mort a ce post la
■59 plugins pour wordpress — liste de plugin avec une brève description en français, via weezonaute.
[...] but not least, voici la partie Wordpress de la grosse grosse [...]
Sympa cette liste de liens :-) Note : Le lien vers smashingcoding est mort :-( une autre adresse vers les sites d’images libres de droit ?
Merci pour le lien cassé, je viens de le supprimer
Merci. Tu m’as fais découvrir Note-Pad++ et cet éditeur est un véritable petit bijou ! Simple, ergonomique, et la mise en couleur de la syntaxe : super pratique !
Je -te remercie, t’as réussi à ruiner mon année 2010 et mes prochaines années en un post. ;-)