Ressources pour les développeurs Web Une méga-compilation

Internet est en croissance constante et il existe des centaines de milliers de ressources collectives pour les futurs développeurs Web. Articles en ligne, tutoriels, outils, guides, vidéos, vous pouvez apprendre à peu près tout sur le Web. Il n'a jamais été aussi facile de sauter en ligne!

Vous trouverez ci-dessous une vaste collection de ressources très utiles pour les développeurs Web. Celles-ci incluent du matériel pour débutant pour HTML5 / CSS3 ainsi que des théories plus complexes pour JavaScript et la programmation PHP. Il est possible pour un couple de développeurs enthousiastes d'étudier ces langues et de créer des applications Web extrêmement populaires similaires à Twitter ou Tumblr. Si vous êtes intéressé par les ressources utiles pour les développeurs Web modernes, alors vous adorerez cette compilation de ressources fiables..

Magazines en ligne utiles

Le monde des blogs a explosé avec des centaines de milliers de nouveaux écrivains qui se tournent vers Internet. Beaucoup de ces blogs en ligne sont axés sur la conception et le développement Web. Vous pouvez trouver beaucoup de ressources utiles en feuilletant simplement ces flux RSS..

Selon le type de langue que vous codez, cela déterminera votre intérêt pour l’un de ces blogs. Nous pouvons nous concentrer sur le développement Web et supposer que cela inclut tous les travaux frontaux (HTML5 / CSS3 / JavaScript) ainsi que les simples scripts back-end (PHP / RoR / Python / SQL). J'ai pris la liberté de construire une liste unique des blogs de développement les plus populaires, qui se concentrent à la fois sur le code frontal et le code principal..

Nettuts+
24 façons
Webmonkey
Smashing Coding
Webitect
Inspecter l'élément
Les chats qui codent
Blog de design Web Line25

Il y a certainement beaucoup d'autres à considérer. Je recommande de consulter Google à la recherche de didacticiels et d'articles sur votre langue de développement préférée. Ensuite, en utilisant un agrégateur de flux RSS tel que Google Reader, vous pouvez configurer des listes de tous les derniers articles de ces magazines. C’est un excellent moyen de commencer votre journée de travail ou même de perdre un peu de temps à lire des didacticiels..

jQuery Plugins Galore

La bibliothèque principale de jQuery et jQuery Mobile ont beaucoup progressé au cours de la dernière année. Ces bibliothèques open source permettent de concevoir une expérience frontale riche en animations riches et en fonctionnalités Ajax faciles à mettre en œuvre, bien que la bibliothèque mobile n’ait pas encore rattrapé son parent en termes de plugins et de code tiers..

De même, un autre produit fantastique, bgStretcher, peut être utilisé comme script d'arrière-plan dynamique. Il faudra une série d'images et une mise à l'échelle proportionnelle à la résolution de l'écran de l'utilisateur. Découvrez la merveilleuse démo pour voir cela en action. Ces deux plugins sont téléchargeables gratuitement et se comportent comme de simples exemples du code génial créé par jQuery. Travailler avec ces ressources vous fera gagner beaucoup de temps sur le projet, vous évitant ainsi de réinventer la roue..

En général, je vous recommande également de parcourir les sites Web Ajax Blender et Dynamic Drive pour extraits de code / plugins JavaScript. La bibliothèque n’est pas énorme, mais elle se développe constamment à partir du nouveau contenu soumis par les utilisateurs. Les sites incluent non seulement des plugins jQuery, mais également des bibliothèques MooTools et Prototype..

Si vous finissez par travailler avec la bibliothèque jQuery Mobile, je souhaite recommander un autre outil, jqmPhp. C'est une classe PHP dynamique dans laquelle vous pouvez référencer des fonctions simples à des lignes de sortie et à des lignes de code HTML5 alimentées par jQuery Mobile. Honnêtement, c'est le moyen le plus simple de prototyper des applications mobiles dynamiques construites autour d'un shell PHP. Le blog du site a beaucoup d'exemples de références à explorer.

Construire en HTML5 et CSS3

Lorsque nous parlons de développement Web frontal, nous parlons généralement d’efficacité. Vous n'avez pas les mêmes problèmes pour construire un site Web en HTML / CSS que de coder une application Ruby back-end. Il n'y a pas de véritable logique ou de gestion d'erreur en HTML - il s'agit principalement de la rapidité avec laquelle vous pouvez redimensionner correctement une mise en page dans tous les navigateurs..

Je dois d’abord commencer par recommander le Boilerplate HTML5. Il s’agit d’un modèle dépouillé et qui comprend tous les éléments “la norme” Éléments de page Web HTML5 dans un seul package. Cela inclut une feuille de style par défaut, JavaScript, une icône de favicon, des icônes Apple Touch et de nombreux autres avantages. C'est un projet 100% gratuit et vous pouvez même contribuer à leur dépôt Github. C’est une ressource indispensable pour tous les développeurs avant de commencer un projet Web sérieux..

Maintenant, si vous travaillez hors de ce passe-partout, vous avez la possibilité d'ajouter tout votre propre code personnalisé. Mais je suggère de passer à l'étape suivante et de créer une application telle que Initializr. Cela générera une présentation de site Web typique et vous permettra même de personnaliser les éléments inclus dans votre paquet standard. Le code Google Analytics, les fichiers minified jQuery, .htaccess ou web.config, ainsi qu’une douzaine d’autres options sont disponibles.

CSS Designers

Maintenant que nous nous sommes penchés un peu sur le codage HTML5, nous devrions également examiner certains des frameworks CSS3 populaires. Ceux-ci sont plus ouverts que les modèles HTML, car vous pouvez faire beaucoup plus avec CSS. Les concepteurs comprendront également la difficulté de créer un code conforme aux normes pour tous les navigateurs Web modernes..

Le système Golden Grid est fantastique en tant que cadre pour les conceptions Web réactives. Ces dispositions s’adapteront aux écrans mobiles et se replieront au fur et à mesure que vous redimensionnerez la fenêtre du navigateur. Cela aide également à planifier la largeur et la taille de chaque zone de colonne. Blueprint est un autre framework CSS pratique que vous devriez vérifier. C'est idéal pour créer des sites Web personnalisés et offre une documentation fantastique.

Cependant, en ce qui concerne les outils CSS, CSS3 PIE doit figurer dans mes trois favoris. C'est une application Web simple qui génère le code approprié pour rendre les effets CSS3 pris en charge dans Internet Explorer 6-9. Vous pouvez créer des dégradés linéaires dynamiques, des coins arrondis et des ombres de boîte avec des paramètres personnalisables. Le site a des exemples IE si vous voulez les vérifier aussi.

Les développeurs chercheront également à réduire la taille de leurs fichiers pour la production. Clean CSS est une ressource où vous pouvez choisir parmi de nombreuses options pour simplifier votre code et réduire la taille du fichier. Une autre alternative de Code Beautifier n'offre pas autant d'options mais peut être plus facile à utiliser.

Personnaliser les thèmes avec WordPress

La publication WordPress est facilement le CMS le plus populaire de cette époque. Nous avons vu éventuellement des millions de nouveaux blogs et sites Web tous alimentés par cette fantastique solution de gestion de contenu. Et en tant que tels, les développeurs WordPress sont en forte demande pour la construction de widgets personnalisés et de thèmes de sites Web..

La nouvelle version de Constellation Theme offre aux développeurs WordPress un point de départ plus facile que les modèles par défaut. Le nouveau thème Twenty Eleven est très rusé et minimaliste, mais il ne peut rivaliser avec un modèle de thème complet construit sur HTML5Boilerplate. Le thème Constellation WP inclut même des requêtes multimédia pour diverses résolutions de périphériques telles que les tablettes iPhone et iPad..

Wonderflux est un autre modèle de thème WordPress dont le développement n’est pas aussi avancé. Il vient tout juste de sortir de la version bêta de la version bêta 1.0 avec une documentation en ligne. Ce thème est un peu plus compliqué que Constellation, qui vous donne plus de contrôle sur la mise en page. Les développeurs ont inclus des points d'ancrage, des fonctions et des filtres PHP personnalisés pour rendre votre site WordPress plus dynamique..

Les développeurs WP sérieux doivent vérifier les deux solutions pour voir si l'une ou l'autre aiderait les travaux futurs du projet..

Trouver des freebies pour développeurs Web

Par rapport aux PSD et aux graphiques, la communauté du développement Web semble manquer un peu de librairies gratuites. Vous pouvez toujours trouver d'excellents scripts sur Github, mais vous devrez souvent rechercher et tester vous-même.

Il est difficile de trouver des sites Web proposant des téléchargements gratuits, des démos et des exemples de scripts. Ma nouvelle ressource préférée est CodeVisually, qui répertorie les outils de développement, les plugins, les bibliothèques et d’autres éléments intéressants proposés par les utilisateurs. La mise en page est configurée comme une galerie où chaque page inclut un lien vers le produit, une capture d’écran de démonstration et quelques détails supplémentaires..

La galerie comprend des centaines d’exemples de code de gabarit HTML / HTML5, de bibliothèques CSS3 et certainement aussi de nombreux éléments jQuery. J'ai également trouvé que c'était un site Web formidable pour soumettre votre propre code open source au public. Votre nom est lié à la soumission. De plus, vous pouvez placer des liens vers votre propre site Web où les utilisateurs peuvent accéder au code..

API d'application Web

Une tendance très répandue dans le développement Web moderne consiste à utiliser des API en tant qu'application tierce. La plupart des marques de réseaux sociaux grand public incluent une API fonctionnelle et un segment de documentation directement sur leur site Web. De plus, il y a des tonnes de classes de wrapper gratuites sur Github écrites dans tous les principaux langages de programmation back-end.

Les développeurs doivent être à l'aise avec ces types de bibliothèques de codes car leur demande ne cesse de croître. En utilisant le système OAuth, vous pouvez rapidement créer une base d’utilisateurs à partir de plusieurs de ces applications. J'ai énuméré ci-dessous quelques références aux API en ligne populaires et à leur documentation complète..

API Twitter
API CloudApp
API Instagr.am
API eBay
API Foursquare
API Dribbble
API Github

Tirez parti de ces ressources pour de nouveaux projets chaque fois que possible. Le Web devient de plus en plus connecté et les utilisateurs affluent sans cesse vers la prochaine grande application. Vous pouvez recruter des milliers de membres supplémentaires dans votre application lorsque vos visiteurs n'ont pas besoin de créer un nouveau compte et peuvent s'inscrire directement via Twitter ou Facebook..

Ressources Q & A

L’expérience la plus bénéfique entre développeurs consiste à poser des questions et à apprendre de nouvelles techniques. La communauté des développeurs est toujours si utile aux nouveaux arrivants et prête à offrir son expertise dans de nombreuses situations. Si vous rencontrez des difficultés ou des questions spécifiques sur un projet, recherchez sur le forum d'un développeur Web associé..

Je dois personnellement recommander de rejoindre la communauté Stack Exchange si vous n'êtes pas déjà membre. Cela inclut des sites Web incroyables tels que Stack Overflow et Super User, sur lesquels vous pouvez obtenir de l'aide en matière de programmation. Les membres de la communauté maîtrisent les principaux langages Web, y compris jQuery et les petites classes PHP..

Une astuce intéressante que j'ai apprise est de rechercher dans Google et de voir si votre problème a déjà été résolu. Entrez quelques mots-clés dans votre recherche Google et ajoutez le suffixe site: stackoverflow.com. Tous les résultats de recherche renvoyés seront des questions dans les archives de Stack Overflow - si vous avez de la chance, vous pourrez trouver exactement la solution à votre problème actuel..

Test de la vitesse de la page en ligne

Ce nouvel outil mis en place par Google Developers a été réellement impressionnant. L'application Page Speed Online analysera le contenu de votre site Web et générera un rapport d'analyse de vos vitesses. Cela inclut des solutions possibles pour réduire les temps de chargement et garder vos visiteurs sur le site plus longtemps.

Cela peut également vous aider à identifier les problèmes de taux de rebond et de baisse des conversions. Google Analytics est indispensable pour tous les sites Web, mais j'estime que Page Speed n'atteint qu'un niveau d'analyse supérieur..

La sortie du rapport est classée par ordre de priorité élevée à faible et comprend souvent de nombreux éléments différents. Si vous comprenez les configurations LAMP et travaillez sur les serveurs Apache, vous pouvez également envisager le module mod_pagespeed. Il effectue automatiquement bon nombre de ces optimisations sur votre site Web pour réduire les temps de chargement et mettre en cache des données Web importantes (images, icônes, scripts)..

Le meilleur logiciel de développeur

Parmi les deux systèmes d'exploitation les plus populaires, vous pouvez trouver des dizaines de programmes. Des logiciels graphiques aux éditeurs de code source et aux IDE, les développeurs Web disposent de nombreuses ressources. Mais si vous recherchez des suggestions populaires, je vous recommande les titres suivants.

Mac OS X

Panic est une société de logiciels qui a créé Coda - de loin la meilleure application de développement Web pour Mac. Vous avez accès à un éditeur de code source, à un terminal et à un client FTP où vous pouvez modifier directement les fichiers du serveur. Coda prend également en charge une longue liste de mises en surbrillance de la syntaxe pour des langages tels que HTML, XML, CSS, JavaScript, PHP, SQL, etc..

Toutefois, si vous avez besoin d’une solution gratuite, consultez Komodo Edit. Le logiciel est développé pour Windows et Mac, open source, et totalement gratuit à télécharger. Il inclut tout le même support pour la coloration syntaxique et de nombreuses fonctionnalités similaires à Coda (pas de FTP, malheureusement). TextWrangler est une autre solution gratuite que vous voudrez peut-être essayer, également un simple éditeur de texte..

Pour une application FTP gratuite, consultez Cyberduck sur le Mac App Store. Personnellement, je préfère une alternative payante telle que Yummy FTP ou Transmit.

Microsoft Windows

La suite de logiciels Adobe vient toujours à l’esprit lorsque vous pensez à la conception et au développement Web. Les utilisateurs Windows disposent de nombreuses alternatives à Dreamweaver, dont beaucoup sont totalement gratuites..

Notepad ++ est un excellent exemple de logiciel Win32 open source. Le projet est toujours en développement actif et publie des mises à jour fréquemment (presque tous les mois). J'adore leur interface à onglets et le support de nombreux plugins supplémentaires. Comme je l'ai mentionné ci-dessus, Komodo Edit est également offert pour Windows XP / Vista / 7, vous pouvez donc l'essayer comme alternative..

Les développeurs Web sous Windows ne sont pas non plus sans client FTP. Filezilla est probablement l'alternative libre la plus populaire. Pour des alternatives, consultez notre liste de clients FTP gratuits avec des outils similaires.

Autres ressources de développement utiles

100 outils de développement Web essentiels
Best Of 2011: Meilleurs plugins et tutoriels jQuery utiles
Didacticiels Ruby on Rails pour les débutants en développement Web
7 tendances de développement Web passionnantes pour 2011

Conclusion

Jusqu'à présent, le premier trimestre de 2012 a débuté de manière éclatante! Nous avons déjà vu des contenus incroyables déferler sur des concepteurs et des développeurs Web du monde entier. Les professionnels qui construisent pour le Web disposent de tellement d'outils qu'il y a un ou deux ans..

J'espère que cette énorme compilation d'outils et de ressources stimulera votre méthodologie pour un meilleur développement. J'adore travailler avec des développeurs Web et découvrir de nouveaux projets tout le temps. Cependant, il n’ya que peu de place pour de nouvelles ressources que nous pouvons inclure, c’est pourquoi je vais avoir manqué quelques joyaux. Si vous avez des idées ou des suggestions concernant des ressources de développement Web connexes, indiquez-le-nous dans la zone de discussion.