X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

無料プレミアムアクセス

プレミアムハブの記事、プロジェクトファイルとから、各チュートリアルビデオの最初の10%の私たちのライブラリ全体にアクセスするオンラインチュートリアルのライブラリを

今すぐ無料アカウントを作成しよう!

ウェブの未来はここにある:jQueryを使用して、HTML5やCSS3は、オンラインで音楽を販売するために
  • ウェブの未来はここにある:jQueryを使用して、HTML5やCSS3は、オンラインで音楽を販売するために

Google翻訳で翻訳さ

jQueryは、インタラクティブなWebアプリケーションを作ることを容易にJohn Resigによって記述されたJavaScriptライブラリです。 jQueryは、インタラクティブなメニュー、フォーム、アニメーション、およびユーザーインターフェイス要素など、豊富なユーザーエクスペリエンスを作成するために他のJavaScriptファイルからコードをロードする機能を持っています。実際には、jQueryはあなたがプログラム的に定義するコンポーネントを持つWebページを読み込むことができます。それはで動作するのではなく、コンパクトで実用的な言語であり、あなたが体験してウェブ用に音楽やビデオを表示するために使用することができます。

この例では、私は速度を制御するパラメータを持つ簡単なスライドショーを作成し、フェードイン/アウトするためにjQueryのサイクルのプラグインを使用する方法を紹介します。完成したこの基本的なテクニックを使えば、迅速かつ便利に、サイトを拡張することができます。


01 - jQueryの

図1は、jQueryのコードを実行しているウェブページのスクリーンショットを示します。これは私がHTML5の新しいオーディオ要素を使用する方法を示す提出以前の記事に基づいています。コー​​ドリスト1はその全体の実際のファイルを示しています。このリンクでは結果の例を見ることができます。

http://www.electronicmusic101.com/jqslideshow.html

Figure 1: A div showing one of 5 rotating images, with an audio element and html5 multimedia “trophy” logo, rendered in Safari

図1:Safariでのレンダリング、オーディオ要素とHTML5マルチメディアトロフィーのロゴで、5回転するイメージの一つを示すdiv要素

あなたがここにjQueryのサイクルのプラグインをダウンロードすることができますhttp://jquery.malsup.com/cycle/ 。その点から、Photoshopやスライドショーで各画像のサイズと名前を定義するために好みの画像エディタを開いてそのだけの問題。


02 - HTML5の採用

Internet Explorerなどのブラウザでは、まだ新しいHTML5の標準のスキーマを解析する能力を持っていない。スキーマは、単にコレクションの一部に韻と理由があるというのファンシーな方法です。 HTML5のパーツは、検索エンジン、ブラウザ、およびWeb開発者に意味を与える要素で構成されています。

Mozilla Firefoxなど、Safari、およびFirefoxのWebKitの家族のような最近のブラウザは、仕様は、World Wide Webコンソーシアム(W3C)によって承認される前に、HTML5の標準を採用することにより、ウェブ開発者のニーズの将来のために準備されています。その聴衆を拡大するために私たちの検索エンジン最適化(SEO)を改善しながら、幸いにも私たちのためのマルチメディアの開発者として、我々は、私たちのオーディオやビデオを紹介するためのリッチメディアやインタラクティブな体験をウェブ上で視聴者に到達することができます。

ウェブテレビやラジオの番組の報道を超えると、それは自分自身との共通点を持っている人に到達するためにインターネットのパワーを活用するアーティストにとってますます重要になる。 FacebookやTwitterなどのWebアプリケーションを介してのコラボレーションは、水平および垂直範囲を向上させることができます。つまり、あなただけの学んだスキルの数を増やすだけでなく、インターネット上で発見技術を研究し、これらのスキルの理解を深めることができる、地球規模での学習を促進する、それらのリソースへの貢献を添付することができますではない。


03 - lessはさらにです。

彼らが言うように写真は、千の言葉を話す、と通常はユーザーが自分のサイトがサイトを訪れるの数秒のうちに面白いです理由を見つけることを期待します。私たちが聞くことが最初の数小節単位でどのように多くの私達の裁判官の音楽?

任意のテキストエディタは、マルチメディアコンテンツを含むWebページを作るために必要なコードを作成するには(たとえメモ帳またはテキストエディタ)を利用することができます。 コードリスト1に示すように、一連の画像は、定義された寸法とその他のさまざまなパラメータを指定して、ブラウザを介して読み込まれて表示されています。そこにWeb上でコンテンツを提示するための事実上無限の可能性がありますが、それらのオプションは3つの主要な技術に分類することができます:CSS、JavaScript、およびHTML。

コードリスト1(での通知コードリスト1ダウンロード img_1.jpgが特定のサイズであること)。これは画像の実際の寸法と一致していなければ、コードはもちろん、画像のサイズごとに更新する必要があるように。実際、多くのJavaScriptライブラリは、次のように、彼らはあなたのウェブページを特定の方法で動作するが、個々の創造的なニーズに合わせてカスタマイズできるいくつかのパラメータを退場させるためのメインルーチンが入っています。


04 - ウェブの未来

JavaScriptを使用して親密に精通すると、Webデザインの分野で生産的な作業の寿命をもたらすのにもかかわらず、あなただけのポテンシャルを活用するにはJavaScriptの小規模なサブセットを理解する必要がある場合があります。

このようなCSS3のような将来の技術はあなたも、Flashをサポートしていないものに、すべての最新ブラウザを介して既存のAdobe Flashスキルを転送することができるようになります!

あなたは、コピー/貼り付けのコードをコードリスト1からお好みのテキストエディタに、と立ち上げてこのjQueryのスライドショーですばやく実行するようにWebホストにアップロードすることができます。私は私のウェブサイトをホスティングするために私の携帯サービスをリンゴを使用していますが、今後の記事では、よくあなた自身のウェブホストの作成方法を解説!


05 - ページ構造

初心者開発者のために、イメージ、JavaScript、および他のファイルが正しいフォルダにある場合はWebページにのみ機能することを理解しておくことが重要です。 htmlファイルのすべては、つまり、ルートディレクトリに他のすべてを格納するディレクトリでなければなりません。

ウェブページの主な構造は、一言で言えば、HTMLコンテナに包まれた頭と体、である。頭のセクションでは、直接JavaScriptとCSSのコードを挿入することができますし、本体には、イメージ、ビデオ、および様々なフォーマットのオーディオとして可視および可聴メディアを定義します。


06 - 社会的側面

私は、Webページはビューアによって最小限の投資で仕事の作品を展示するために、アーティストのための非常にシンプルであるべきという意見です。言い換えれば、あなたが作成してWebに投稿するアートワークを経験で過ごした小さなアップフロントの努力があるはずです。芸術形式の知覚品質が人間として私達に非常に主観的である、とは2人が芸術作品に同じ方法で応答しないことがあるためです。音楽は非常に感情的な芸術であり、そしてリスナーは音楽が描かれている感じのタイプについて非常に特定の可能性があります。

ウェブは、より多くのバックグラウンドで小さな音楽とシンプルなスライドショー社交の場になると忙しい環境での素敵な転換のために作る、それが仕事や遊びである。実際には、Webページのセクションは他のWebページの別のセクション内の表示を切り替えることができます。 Webページとは対照的に、これは、Webアプリケーションの本質であるという点で、Web上のコンテンツの交換機能により、多くのコンテキスト全体で露出し、使いやすさを乗算して、そこにあります。たとえば、ニュースサイトは、興味や新しいリリースの特定のエリアを紹介するウェブサイトの最新作品を直接にアクセスできる可能性があります。


07 - さらに、それを生かし

Webサイトがどのように動作するかの理解がより詳細になると、あなたはより洗練されたWebページの開発を始め、そしておそらく、ネットラベル、あるいは本格的な制作会社としての集団などで他のアーティストのためのページを生成することができます。その後、デジタルドメインで商取引や配信にコンテンツを統合することができます。多くのYouTubeの提出は、単にメディアと一緒に置かれた広告の収入から数十万ドルを獲得しています!コンテンツがちょうどワールドワイドウェブにそれを統合することによってアクセスできる多くの方法を想像してみてください。あなたが本当に停止し、コンテンツが重複してオンラインで配布されている速さについて考えるときに非常に圧倒。

次回は、私がいる間、あなたと私は友人やクライアントのためにウェブサイトを作成できるように、私は自分のWebサーバーをセットアップするために歩いたの手順を詳述することによって、Webにコンテンツを追加することについて移動する方法の詳細を説明しますあなたのためにあなたのウェブサイトをホストするために会社を雇うときに蓄積することができる実質的なコストを回避すること。

私はあなたのウェブページを強化するために、このjQueryのスライドショーのテクニックを使用できるようにすることを願って、またはちょうどあなた自身の素手によるウェブに独自のコンテンツを追加してのマイルストーンを達成する。ウェブは、今、待っている...輝きを!


ここでコードリスト1をダウンロードしてください。

Andrew Turner

Andrew Turner | Articles by this author

Andrew Turner, founder of Deep Life Records (deepliferecords.com ), has released music on N*Soul Records (LA, CA), PWM Records (Australia), Giant Squid (SD), subVariant (CHI, IL) and has remixed and produced tracks since Windows 95's plug-n-play feature was all the rage. His new project under the alias JahWarrior is inspired by the artists from the Blood and Fire label from the early 70?s, who used innovative methods of production using the mixing desk itself to produce "effect motifs" such as feedback loops, and creatively manual automation on the sends. Andy is also highly influenced by the likes of Orb and Autechre, who employ on-the-fly and stochastic, algorithmic, generative methods in music production. He has performed at festivals such as LifeLight Festival, Cornerstone Festival, has hosted a brief residency at Brazil in NOLA, Club Pompeii in Phoenix, and promoted house parties and club events in the Mid-West when he was a young'in. Currently he is using max for live, reaktor, processing, arduino, and open sound control with multi-touch interfaces like the iPad and monome. His niece Ruth sometimes assists him in the studio with her new Casio SA-45.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link