Web開発者向けリソースメガコンパイル

インターネットは絶えず成長しており、今後のWeb開発者のための何十万という集合リソースがあります。オンラインの記事、チュートリアル、ツール、ガイドからビデオまで、Web上で何かを学ぶことができます。それは本当にオンラインでジャンプすることがかつてないほど容易になりました!

以下に、私はいくつかの非常に役立つウェブ開発者向けリソースの膨大なコレクションをまとめました。これらには、HTML 5 / CSS 3に関する初心者向けの資料と、JavaScriptおよびPHPプログラミングに関するより複雑な理論が含まれています。 2人の熱心な開発者がこれらの言語を研究し、TwitterやTumblrに似た人気の高いWebアプリケーションを構築することは可能です。現代のWeb開発者にとって有用な資産に興味があるなら、この信頼できるリソースの編集を気に入るはずです。.

オンラインマガジン

ブログの世界は何十万もの新しい作家がインターネットを利用して爆発しました。これらのオンラインブログの多くは、デザインとWeb開発に焦点を当てています。あなたはこれらのRSSフィードをめくるだけでたくさんの役に立つリソースを見つけることができます。.

あなたがコーディングした言語のタイプに応じて、それはこれらのブログのどれかへのあなたの興味を決定するでしょう。私たちはWeb開発に集中することができ、これにはすべてのフロントエンド作業（HTML5 / CSS3 / JavaScript）と単純なバックエンドスクリプト（PHP / RoR / Python / SQL）が含まれると仮定します。フロントエンドとバックエンドの両方のコードに焦点を当てた、最も人気のある開発者ブログの単一のリストを作成する自由を取った.

ネッツ+
24の方法
Webモンキー
スマッシングコーディング
Webitect
要素を検査
猫コード
Line25 Webデザインブログ

考慮すべき他の多くが確かにあります。お好みの開発言語のチュートリアルや記事を探してGoogleにアクセスすることをお勧めします。それから、Google ReaderのようなRSSフィードアグリゲーターを使って、これらの雑誌からすべての最新記事のリストを設定することができます。これはあなたの仕事を始めたり、あるいはチュートリアルを通してちょっとした時間を浪費するためにさえ素晴らしい方法です。.

豊富なjQueryプラグイン

jQueryコアライブラリとjQuery Mobileはどちらもこの1年で多くの注目を集めています。これらのオープンソースライブラリは、豊富なアニメーションと実装が簡単なAjax機能でいっぱいのフロントエンドエクスペリエンスを設計するために機能します。.

同様に、他の素晴らしい製品bgStretcherを動的バックグラウンドスクリプトとして使用することができます。一連の画像と、ユーザーの画面解像度に比例したサイズのある程度の拡大縮小が行われます。これを実際に使ってみるために素晴らしいデモをチェックしてください。これらのプラグインはどちらも無料でダウンロードでき、jQueryを基にして作成された素晴らしいサードパーティコードの簡単な例として機能します。これらのリソースを使用すると、プロジェクト作業にかかる時間を節約できるため、ホイールを作り直す必要はありません。.

一般的に、JavaScriptコードスニペット/プラグインについては、Ajax BlenderとDynamic DriveのWebサイトを参照することをお勧めします。ライブラリはそれほど大きくはありませんが、ユーザーが投稿した新しいコンテンツから絶えず成長しています。このサイトには、jQueryプラグインだけでなく、MooToolsおよびPrototypeライブラリーも含まれています。.

もしあなたがjQuery Mobileライブラリを使って仕事をしてしまったら、私は別のツールjqmPhpをお勧めします。これは動的なPHPクラスで、簡単な関数を使ってjQuery Mobileを介して出力されるHTML5コードの行を出力することができます。これは正直なところ、PHPシェルを中心に構築された動的モバイルアプリケーションをプロトタイプ作成するための最も簡単な方法です。このサイトのブログには、掘り下げた参考文献がたくさんあります。.

HTML 5とCSS 3で構築する

フロントエンドWeb開発について話すとき、それは一般的にすべて効率に関するものです。あなたがバックエンドRubyアプリケーションをコーディングするのと同じ問題をHTML / CSSで構築することはありません。 HTMLには本当のロジックやエラー処理はありません。それは、ほとんどすべてのブラウザでレイアウトデザインをどれだけ早く適切に拡大できるかについてです。.

最初に私はHTML5 Boilerplateを推薦することから始めなければなりません。これはすべての要素を含む剥き出しの裸骨テンプレートです。 “標準” 1つのパッケージ内のHTML5 Webページ要素これには、デフォルトのスタイルシート、JavaScript、favicon、Appleのタッチアイコン、その他たくさんの便利なものが含まれています。それは100％無料のプロジェクトで、あなたは彼らのGithubリポジトリに貢献することさえできます。これは、深刻なWebプロジェクトを始める前に、すべての開発者にとって必須のリソースです。.

この定型句を使用しない場合は、独自のカスタムコードをすべて追加することができます。しかし、次のステップを踏み出して、Initializrなどのアプリを使ってビルドすることをお勧めします。これにより、典型的なWebサイトのレイアウトが生成され、定型パッケージに含まれる要素をカスタマイズすることもできます。 Google Analyticsのコード、縮小されたjQuery、.htaccess、またはweb.configファイルに加えて、他に約12種類のオプションがあります。.

CSSデザイナー

HTML5コーディングを少し調べたので、人気のあるCSS3フレームワークのいくつかについても検討する必要があります。 CSSを使ってできることが多いので、これらはHTMLテンプレートよりもオープンエンドです。設計者はまた、現代のすべてのWebブラウザ用の規格準拠のコードを構築することの難しさを理解するでしょう。.

ゴールデングリッドシステムはレスポンシブWebデザインのフレームワークとして素晴らしいです。これらのレイアウトはモバイル画面に適応し、ブラウザウィンドウのサイズを変更すると内側に折りたたまれます。各列領域の幅とサイズを計画するのにも役立ちます。ブループリントはあなたがチェックアウトするべきもう一つの便利なCSSフレームワークです。カスタムWebサイトを構築するのに最適で、素晴らしいドキュメントを提供しています。.

CSSツールに関しては、しかし、CSS3 PIEは私のトップ3お気に入りになければなりません。これは、Internet Explorer 6〜9でサポートされているCSS3効果をレンダリングするための適切なコードを出力する単純なWebアプリケーションです。カスタマイズ可能な設定を使用して、動的な線形グラデーション、丸みを帯びた角、およびボックスの影を作成できます。あなたもそれらをチェックアウトしたい場合は、サイトにはIEの例があります.

開発者は、本番用にファイルサイズを縮小することも検討するでしょう。クリーンCSSは、コードを簡素化しファイルサイズを縮小するために多数のオプションから選択できるリソースの1つです。もう1つの代替的なCode Beautifierはそれほど多くの選択肢を提供していませんが使いやすいかもしれません.

WordPressでテーマをカスタマイズする

WordPressの発行は、この時代の最も人気のあるCMSです。私たちは、この素晴らしいコンテンツ管理ソリューションを搭載した、おそらく数百万もの新しいブログやWebサイトを見てきました。そしてWordPressの開発者はカスタムウィジェットやWebサイトのテーマを構築することを強く求められています。.

新しいリリースのConstellation Themeは、WordPress開発者にデフォルトのテンプレートよりも簡単な出発点を提供します。新しいTwenty Elevenテーマは非常に巧妙でミニマリストですが、HTML5Boilerplateの上に構築されたテーマテンプレート全体と競合することはできません。 Constellation WPテーマには、iPhoneやiPadのタブレットなど、さまざまなデバイス解像度のメディアクエリも含まれています。.

Wonderfluxは、開発がそれほど進んでいないもう1つのWordPressテーマテンプレートです。それは最近、オンラインドキュメントと共にベータ版からv1.0にリリースされました。このテーマは、レイアウトをより細かく制御できるコンステレーションよりも少し複雑です。開発者はあなたのWordPressサイトをより動的にするためにカスタムPHPフック、関数、そしてフィルタを含めました.

深刻なWP開発者は両方の解決策をチェックして、どちらかが将来のプロジェクト作業に役立つかどうかを確認する必要があります。.

Web開発者向け景品の検索

PSDやグラフィックと比較して、Web開発コミュニティは景品ギャラリーでは少し欠けているようです。 Githubではいつでも素晴らしいスクリプトを見つけることができますが、多くの場合、探して自分で試してみる必要があります。.

無料のダウンロードやデモ、スクリプトの例を提供するWebサイトを見つけるのは困難です。私のお気に入りの新しいリソースはCodeVisuallyで、これはユーザーが投稿した開発ツール、プラグイン、ライブラリ、そして他のきちんとしたものをカタログ化します。レイアウトは、各ページに製品へのリンク、デモのスクリーンショット、およびその他の詳細が含まれるギャラリーのように設定されています。.

ギャラリーにはHTML / HTML5テンプレートコード、CSS3ライブラリ、そして確かにたくさんのjQueryのものの例が何百も含まれています。私はまた、これがあなた自身のオープンソースコードを一般に公開するための素晴らしいウェブサイトであることもわかりました。あなたの名前は投稿に結び付けられています。加えて、ユーザーがコードにアクセスすることができるあなた自身のウェブサイトへのリンクを張ることができます.

WebアプリケーションAPI

最近のWeb開発で非常に人気のあるトレンドは、サードパーティ製のアプリとしてAPIを構築することです。主流のソーシャルネットワーキングブランドのほとんどは、自社のWebサイトに実用的なAPIとドキュメントのセグメントを含んでいます。さらにGithubには、すべての主要なバックエンドプログラミング言語で書かれた無料のラッパークラスがたくさんあります。.

開発者は、これらの種類のコードライブラリが需要が高まっているときには、快適に作業できるはずです。 OAuthシステムを使用すると、これらのアプリケーションの多くからユーザーベースを迅速に構築できます。私は、人気のあるオンラインAPIとそれらの完全なドキュメンテーションへのいくつかの参照を以下にリストしました。.

Twitter API
CloudApp API
Instagr.am API
eBay API
Foursquare API
ドリブルAPI
Github API

可能な限り、新しいプロジェクトでこれらのリソースを活用してください。 Webはよりつながってきており、ユーザーは常に次の大きなアプリに集まっています。あなたの訪問者が全く新しいアカウントを登録する必要がなく、代わりにTwitterまたはFacebookを通して直接申し込むことができるときあなたはあなたのアプリに何千人ものもっと熱心なメンバーを勧誘することができます.

Q&Aリソース

開発者間で最も有益な経験は、質問をすることと新しいテクニックを学ぶことです。開発者コミュニティは、新参者にとって常に非常に役に立ち、多くの状況で彼らの専門知識を提供していく所存です。プロジェクトに関して何か闘いや具体的な質問がある場合は、関連するWeb開発者フォーラムをGoogleで検索してください。.

あなたがまだメンバーではない場合、私は個人的にStack Exchangeコミュニティに参加することをお勧めします。これにはStack OverflowやSuper UserのようなすばらしいWebサイトが含まれています。そこでは基本的に何でもプログラミングのヘルプを入手できます。コミュニティメンバーは、jQueryクラスや小規模なPHPクラスなど、すべての主要Web言語に精通しています。.

私が学んだきちんとしたトリックは、Googleを検索して、あなたの問題がすでに解決されているかどうかを確認することです。 Google検索にいくつかのキーワードを入力し、サフィックスを追加します サイト：stackoverflow.com. 返された検索結果はすべてStack Overflowアーカイブ内からの質問になります。運がよければ、あなたの現在の問題に対する正確な解決策を見つけることができます。.

ページスピードをオンラインでテストする

Google Developersによって出されたこの新しいツールは、実際には本当に印象的でした。アプリPage Speed Onlineはあなたのウェブサイトのコンテンツを分析し、あなたのスピードに関する分析レポートを作成します。これには、読み込み時間を短縮し、サイトへの訪問者を長くするための解決策が含まれます。.

また、直帰率やコンバージョン率の低下に関する問題の特定にも役立ちます。 Google AnalyticsはどのWebサイトにも必要不可欠ですが、Page Speedはより高いレベルの分析を達成していると私は感じています.

レポートの出力は優先度の高い順にランク付けされており、多くの場合、さまざまな項目が含まれています。 LAMPの設定を理解していてApacheサーバで作業しているのなら、mod_pagespeedモジュールも検討してください。ロード時間を短縮し、重要なWebデータ（画像、アイコン、スクリプト）をキャッシュするために、Webサイトでこれらの最適化の多くを自動的に実行します。.

最高の開発者ソフトウェア

2つの最も人気のあるオペレーティングシステムの間で、たくさんのプログラムを見つけることができます。グラフィックソフトウェアからソースコードエディタやIDEまで、Web開発者が選択できるリソースはたくさんあります。あなたが人気のある提案を探しているなら、私は次のタイトルをお勧めします.

Mac OS X

Panicは、Codaを作成したソフトウェア会社です。Macにとって、これまでで最高のWeb開発アプリです。ソースコードエディタ、端末、およびFTPクライアントにアクセスして、サーバーファイルを直接変更できます。 Codaはさらに、HTML、XML、CSS、JavaScript、PHP、SQLなどの言語のための構文ハイライトの長いリストをサポートします。.

しかしあなたが無料の解決策を必要とするならば、あなたはKomodo Editをチェックするべきです。ソフトウェアは、WindowsとMac、オープンソース用に開発されており、完全に無料でダウンロードできます。構文の強調表示やCodaと同じような機能がたくさんあります（残念ながらFTPはありません）。 TextWranglerはあなたが試したいと思うかもしれないもう一つの無料の解決策でもあり、これもまた単純なテキストエディタです。.

無料のFTPアプリケーションについては、Mac App StoreでCyberduckを調べてください。私は個人的にはYummy FTPやTransmitなどの有料の代替手段を好みますが.

マイクロソフトウィンドウズ

アドビのソフトウェアスイートは、Webのデザインと開発について考えるときに常に頭に浮かびます。 WindowsユーザーはDreamweaverに代わるものがたくさんあり、それらの多くは完全に無料です。.

Notepad ++は、オープンソースのWin32ソフトウェアの良い例です。プロジェクトはまだ活発に開発中で、頻繁に（ほぼ毎月）アップデートをリリースします。私は彼らのタブ付きインターフェースと非常に多くの追加プラグインのサポートが大好きです。私が上で述べたように、Komodo EditはWindows XP / Vista / 7でも提供されているので、代わりにそれを試すことができます。.

Windows上のWeb開発者も、FTPクライアントがないわけではありません。 Filezillaはおそらく最も人気のある無料の代替手段です。代替手段については、同様のツールとともに私たちの無料のFTPクライアントリストをチェックしてください。.

その他の役に立つ開発者向けリソース

100の必須Web開発ツール
2011年のベスト：最高の便利なjQueryプラグインとチュートリアル
Web開発初心者のためのRuby on Railsチュートリアル
2011年の7つのエキサイティングなWeb開発動向

結論

これまでのところ、2012年の第1四半期は強打で始まりました！世界中のデザイナーやWeb開発者から素晴らしいコンテンツが流出しているのを目にしました。 Web用に構築する専門家は、1〜2年前と比較して非常に多くのツールを自由に使用できます。.

このツールとリソースの膨大なコンパイルが、より良い開発のためのあなたの方法論を推進することを私は願っています。私はWeb開発者と仕事をして、新しいプロジェクトについて常に学ぶことが大好きです。それでも私たちが含めることができる新しいリソースのための余地はそれほど多くないので、私はいくつかの宝石を逃したに違いない。関連するWeb開発者向けのリソースについてのアイデアや提案があれば、ポストディスカッションエリアでお知らせください。.