DAVID J.マラン：すべての権利。 我々は戻ってきました。 だから、この最終セッションの目標 さらにいくつかの概念を導入することです だけでなく、すべての人にチャンスを与えます 種類のあなたの指を伸ばして 実際に何かをします 小さな手オン。 目標は、オンにするではありません 私たちのすべてのWeb開発者に 任意の手段が、本当にただによって あなたにいくつかの味を与えるために 何の基本的な構築物の Webプログラミングと今日のWebに入ります 開発、そう things--の静的な側面 何のロジック、ノープログラミング 言語、単に静的なコンテンツ。 そして、それは私たちに機会を与えます 実際にWebサーバがあるかを確認するために、 HTMLファイルが何であるか、何を参照してくださいを参照してください それは実際にアップサービスを提供しているHTTPです。 しかし、我々は、任意の回顧展を中に飛び込む前に、 クラウドコンピューティングについての質問 またはその間のセキュリティか何か？ なし？ すべての権利は​​、よく、してみましょう 念のために、これを行います サインアップのプロセス 何かには数分かかります。 我々は、それがバックグラウンドでそれを行うもらおう。 あなたができれば、先に行き、 このURLへのhere-- c9.io. これは、サードパーティでありますservice-- サービスとしてのプラットフォーム、あなたはwill--場合 それはあなたを招待しようとしています アカウントにサインアップするには、 そしてあなたのそれぞれを与えるために起こっています いわゆるクラウド内のアカウント 他の誰かのインフラ上で、 Cloud9という会社。 しかし、何を約うれしいです これは、彼らはあなたを与えることです の近似 実際の実世界の開発 環境、ではあるが クラウドとWebブラウザで、 私たちは実際にこれを使用します 今日は少し実験。 そして、先に行くと、ちょうど移動 サインアッププロセスへの道 できれば。 だから我々はクラスでこれを使用するために起こります 私は、生徒たちのすべてのために教えます キャンパスで、今オフの両方、および それはどのような歴史的に置き換えられています そうでない場合はダウンロード可能なソフトウェアでした。 それでは、あなたはへのアクセスを獲得しました。 これらの仮想マシンの一つであり、 基本的に、私は先に説明したこと。 だから、この会社Cloud9おそらく 確かに第三party--から賃料 この場合には、全体をGoogle-- 仮想マシンの束 彼らは何とかに切り刻むこと 個々のサーバーの錯覚 私たちのそれぞれが完全な支配を有しています。 Itは言って非常に正確ではありません 彼らは仮想マシンがしていること、 しかし、どのような理由 Cloud9は、実際に使用しています やや新しい技術であり、 コンテナ化と呼ばれます。 そして、私はこの絵をつかむしましょう ここでこの絵をペイントします。 

コンテナがあれば、あります あなたは絵を思い出します 以前から、少し軽いです 仮想マシンよりも重量。 実際には、最後のに対し、 私たちは約そこに話をした時 運転されます システムとハイパーバイザ そしてその後、ゲストオペレーティングシステム、ゲスト オペレーティングシステム、ゲストオペレーティング あなたの一番上のシステム、 物理的なハードウェア、 この新しいとの違い 技術、コンテナ化、 彼らはすべてが何らかの形で共有するということです 同じオペレーティングシステム。 しかし、彼らはまだ作成します みんなの錯覚 彼または彼女自身の排他を持ちます 管理者権限とファイル サーバー上。 しかし、中に以下のソフトウェアがあります あなたとハードウェアの間。 結果はです 理論、より高い性能、 あなたが使用しているためか、 少ないリソースを無駄に そのいわゆる仮想化層の上に。 だから、これはと呼ばれています 本質的にコンテナ化 ドッカーと呼ばれる技術を介して、 これは非常に多く、独自に来ています。 そして、これは何かがあること あなたの会社のエンジニア 種類のソートの話し始める可能性があります 約すぐに彼らがまだの場合は、 なしは確かにありま​​すけれども その理由は、任意のbandwagonsにジャンプします。 

だから、言って、どのような あなたはおそらく今見 このようなビットに見える画面があります。 OK。 ない場合は、ちょうど私を呼び出します。 そして、されていない場合、私は来ますso--場合。 先に行くと、その大きなをクリックします プラスワークスペースを作成するには、 あなたは、このような画面が表示されます。 ワークスペースを呼び出すことができます あなたは今のところ必要な任意の名前を付けます。 そして、ちょうど実際に簡単にするために、 and--行くだけでなく、あなたのいくつかの 既にワークスペースを持っています。 あなたがビジネスをwant--何でもそれを呼び出し、 ハーバード大学、木曜日、あなたが好きなものは何でも。 あなたは説明を必要としません。 あなたがない限り、民間のそれを残すことができます すでにワークスペースの束を持っています。 あなたはそれを公開することを余儀なくしている場合は、 それは、今日の目的のための罰金です。 ここでは、あまりにも、アップセルの一つです。 あなたは1専用ワークスペースは、によって取得します デフォルト。しかし、あなたはより多くをしたい場合は、 あなたはより多くを支払う必要があります。 そうでなければ、彼らはあなたを強制します あなたの仕事はパブリックにします。 しかし、それは彼らのためにも、いいのよ オープンソースコミュニティでこれをターゲットに 人を奨励します 実際に協力しています。 

そして重要なの最後の事、 あなたが名前を選択した後にかかわらず、です あなたがプライベートまたはパブリックを選択した後、 HTML5、大きなオレンジ色のアイコンをクリックします 左から2番目、および その後、ワークスペースの作成]をクリックします。 そして、それはおそらくだろう 分程度を要します、 しかし、あなたは次にあります 環境、あなた回 を連想させるに見える、それを行います 私は今ここで画面上に持っています。 しかし、再び、それは時間がかかる場合があります この画面に取得する以上 あなたがクリックした後にワークスペースを作成します。 あなたは私のようにしたい場合でも、ちょうど私をフラグ 何かアドバイスを見てみます。 大丈夫。 だから私は今のところこのような背景に行きますよ。 あなたがするようであれば私を呼び出します 任意の技術的な困難を抱えています。 しかし、再び、それがかかる場合があります それがオープンするために少し。 とのは、先に行くと何について話しましょう 実際には、ウェブページを作成することを意味し、 何HTMLであり、これをどのようにすべての 我々が開始しているようになりまし相互接続 実際に技術の一部を使用します。 だから、私ができることが判明します ここに私の小さなMac上で行きます、 呼ばれる簡単なプログラムを開きます テキストエディット、またはWindows上で私ができました メモ帳と呼ばれるものを開きます。 そして、私は単に何かを行うことができます this-- "こんにちは、世界。」のような そして私は、としてこれを救うことができます hello.txtだから、そこには魔法。 これは、Webとは何の関係もありません プログラミング、HTMLとは何の関係も。 ただ、単純なテキストフ​​ァイルを作成します。 しかし、それはウェブことが判明します ページには、文字通り、それだけです。 これは、テキストを含む単純なテキストフ​​ァイルです あなたは、キーボードで入力可能性があること、 しかし、通常、常にではありません .txtファイルが、.htmlのかは.htmないで終わります。 そして、あなたはちょうどありません ファイル内の単語を入力します。 あなたが実際に呼び出さものを使用する必要があります タグや、より一般的には、何か マークアップ言語と呼ばれます。 

だから私は非常に迅速に入力するつもりです そしてその後、次のように説明しています。 私は最初に行きますよ 、と言うこれは、次のように入力 ちょっと、ブラウザは、ここに来ます HTMLで記述されたWebページ。 そして、これら二つの事はちょっと、と言います、 ブラウザは、次は実際にHTMLです。 ねえ、ブラウザは、ここに来ます 頭や私のページの先頭。 のトップのねえ、ブラウザ、内部 私のページ、hello "を、あるタイトルを入れて、 世界。" 私の頭の後ねえ、ブラウザ、 ページは、ここに私のページの本体を付属しています。 私のと、ちょっと、ブラウザ、体 このページには、「こんにちは世界。」と言うべきです だから、顕著な詳細はここで何ですか？ これは一般的に何であります ドキュメント型宣言と呼ばれます、 そして、率直に言って、それは少しです これが最初で暗記するのは難しいです。 あなただけの種類のコピー＆ペーストして。 これは正式な方法であります ちょっと、というのが、ブラウザ、 私は、HTMLバージョン5を使用していています やや最近出てきました。 これは、いくつかのことを魔法の呪文です 設計の悪い感覚を持つ人間 置くことを決めました ファイルの最上部。 それはだにもかかわらず 少し難解な、そ​​れがすべてです それはここで、ちょっと、ブラウザmeans-- HTMLのバージョン5が付属しています。 

これの残りの部分は、私たちとされています 今いくつかの時間のために、歴史的に、 それが進化してきています、そして、それはです おそらく、少し単純なってきて。 いくつかの特性に注目してください 私が強調表示されたものの。 これらのものは、角度であります 左ブラケットbrackets-- そして右のブラケット。 そして、ここで対称性に気づきます。 そして、対称性によって、私はちょうど私のように、意味します ここでは、この開始タグまたはオープンのタグを持っています あなたがする場合は、ダウンここで私が持っています 終了タグやだ終了タグ 唯一のものであれば、それはこれを持っているように、異なります 単語の先頭にスラッシュ HTML。 そして、あなたが考えることができます これは私が何気なくあったように ちょっと、前に提案し、 ブラウザは、ここでいくつかのHTMLを付属しています。 そして、逆に、ちょっと、ブラウザ、それはです それHTML--の開始と終了のため。 

ここでまたちょっと、ブラウザ、 私のページの頭が付属しています。 ねえ、ブラウザ、それは頭のためにそれです。 ねえ、ブラウザは、ここにあります 私のページの本体。 ねえ、ブラウザ、それは体のためにそれです。 そして、の内部すなわち、いくつかの 今の任意のテキスト。 そして、頭の中、一方、 いくつかは、任意であるがタグ付けされています そう、言うテキスト、タイトルを話します 私のページの「こんにちは、世界。 "としなければなりません さて、今のところ、次のことができます そのブラウザを想定 むしろonly--かを有し、ウェブページを持っています 2つだけは頭と体をparts--。 そして、頭はちょうど一般的です メニューバーのように、スタッフ 実際には非常に上部にあります。 そして、ボディは、ページの根性で、 その大きな長方形内のすべて それが画面を埋めます。 だから私は先に行くと、これを実行するつもりです。 私は先に行くつもりと [保存]をクリックし、保存ファイル。 そして、私は保存するつもりです このhello.htmlとして、 そして私はちょうどに行きますよ 私のデスクトップ上に置きました。 そして、私は行くつもりです 先に、[保存]をクリックします。 そして、で私のMacをnotice-- 少なくとも私に叫んされています。 あなたがこれを行うにしてもよろしいですか？ そして、私は、HTMLを使用して、はい、と言うつもりです。 私は、この場合にはよく知っています。 そして今、私は自分のデスクトップに行くつもりです ここで、私は突然、このファイルを持っています。 そして、私はそれをダブルクリックするつもりです。 そして、あなたはそれでわかります デフォルトでは、Chromeは開きました。 それだからです 私のデフォルトのブラウザ。 そして、それは単に "こんにちは、世界。"と言います しかし、それは、ハロー」と言います 2ヶ所の世界」。 左上に注意してください。 それを欠場するのは非常に難しいです。 それは大きくて大胆です。 そして、他にどこそれが見えるん 言って、 "こんにちは、世界"？ 

AUDIENCE：タブ。 

DAVID J.マラン：うん、タブ自体。 だから私はの頭部を言ったとき ページには、すべてをバックアップtop--です 実際、これはタイトルです。 それはちょうどここにタブにあります。 そして、私は、このタブを引き出すことができます 混同しないようにアウト。 これは、今ちょうど単一のタブで そして実際に、私たちは「こんにちは、世界」を参照してください。 ここまでとは "hello、world"の下にここに。 だから、非常に簡単。 しかし、それはまた、かなり簡単です。 そして、実際に、私は、ズームイン。 私は、フォントサイズを変更することができます アクセシビリティを拡大します。 しかし、それでは、何かをやらせます もう少し興味深いです。 

私はおっと、聞かせをgo--するつもりです 私は私のテキストフ​​ァイルに戻っ。 私は戻って私に行きますよ テキストフ​​ァイル、および私が行きますよ これを変更し、言って 「こんにちは、ディズニーワールド。」 セーブ。 そして、戻って私に行きます ブラウザとは、[再読み込み]をクリックします。 そして今、もちろん、それ 「ディズニーワールド "と述べています。 そして、私は人工的にズームするつもりです わずかので、見やすいです。 だから今、残念ながら、私は一種の欲しいです to--実際に、それは、Macの機能です。 私はディズニーワールドをクリックします そして、disney.comのようにどこかに行きます、 しかし、それは動作しません。 だから、ウェブの基本的な信条です ハイパーリンク、他の場所に行くのリンク。 だから私はそれをどのように行うのですか？ まあ、私は言うことができます、 「こんにちは、http://www.disney.com。」 これを保存します。 リロードしてください。 しかしこれも、クリックできません。 とにもかかわらず、ここで素敵なものです これは、まだ機能していません それがいるようだということです ブラウザは、文字通りのみ行います 私はそれが何を言います。 だから私はちょうどこのようなURLを入力すると、 ちょうど私のURLを表示するようになるだろう。 私は、タグやマークアップを使用する必要があります 実際に伝えるために言語 より一層行うには、ブラウザ。 だから私は先に行くつもりだと 一瞬のためにこれを削除します。 そして、私は、ちょっと、と言うつもりです ブラウザ、ここではアンカーを起動し、 いわばリンク。 およびHyper-参照、先 そのアンカーの、このURLでなければなりません。 そして、私の引用符に注意してください。 私も、一重引用符を使用することができ、 しかし、あなたが一貫している必要があり、 そして、私は一般的にだけ使用します それをシンプルに保つために二重引用符。 私はタグを閉じるつもりです注意してください。 そして、ここで私は行きますよ 「ディズニーワールド」を言うために そして今、私はいくつかのsymmetry--を必要とします オープンブラケット、/、ブラケットを閉じました。 

だから私は何を導入していますか？ 我々はすでにいくつかのタグを持っていました。 HTML、ヘッド、タイトル、本文、 いわばすべてのタグは、あります、 オープンとクローズカウンターパートと。 しかし、通知は、これは一種であります 根本的に異なります。 これは、我々が呼ぶものです HTML内の属性。 そして属性です ちょうどキーと値のペア。 これは一般的なものです コンピュータscience--キーと値のペア。 これは、貿易のツールのようなものです。 キーと値。 単語とし、いくつかの 他の単語または単語。 この場合、キーは、HREFあります その値は、その完全なURLです。 そして、何の属性が行うのはそれであります タグの動作に影響を与えます。 この場合、我々は、影響を与えるために必要 アンカータグの挙動、 我々は固定する必要があるため、 どこかにこのリンク。 そして、あなたはそれを行う方法をされています 属性を介して。 

だから私は先に行くつもりです そして今、ファイルを保存します。 戻って私のブラウザに移動して、リロードしてください。 そして、ほら、我々が今持っています 正当なウェブページの始まり。 超シンプルな、しかし、私は上にマウスを移動する場合 左下隅にthis--予告、 それは超小型です。 しかし、あなたはwww.disney.comを参照ください。 そして、私は確かにこれ、それをクリックした場合 disney.comに私を離れ案内いたします。 今、興味をそそるもの ここではそれがないということです 最も市場性のあるURL best--が、 このファイルにはないので、それは大丈夫です World Wide Web上に存在します。 それは明らかにローカルファイルとして存在します 私のユーザーdirectory-- / jharvard-- ジョンHarvard-- /デスクトップ用。 しかし、それはURLを持っています。 ちょうどローカルであることを起こります。 残念ながら、あなたのどれも訪問することはできません この、あなたはこのURLを入力した場合ので、 あなたは、あなたのブラウザを伝えることだろう hello.htmlというファイルを探してください ハードドライブ上。 そして、もちろん、あなたがしていない限り 手動に沿って、次のされて、 存在することはないだろう。 

だから、大丈夫です。 我々はまだ、最終的には、方法が必要です ウェブにこのファイルを取得するには、 しかし、それでは、のカップルを離れていじめるしましょう ちょうど私たちのセキュリティへの影響 見て、それ以前に戻ってそれを結びます 今朝から議論。 場合は、それを判明します ブラウザは文字通りん 私は何をすることを教え、それが思われるもの アンカータグがあるケースのように の値によって影響を受けます この属性と呼ばれるのhref それは、これを表示します テキスト、これは思わ 私はURLを置くことができることを意味します 両方の場所で、その後リロード そして今のURLを参照してくださいし、URLにアクセスしてください。 お知らせ、私は左下にカーソルを合わせると、 私は確かにdisney.comにまだつもりです。 

だから、今までしてきた場合 phished-- P-H-I-S-H-E-D-- これらの偽の電子メールのいずれかで PayPalの銀行等からの、 あなたは、おそらく内のリンクを得ています あなたがそれを読んでいる電子メールの 確認に行くためにここにクリックするように指示します パスワードや、あなたの生年月日を確認 または社会か何か社会的に あなたは開示するエンジニアリング 情報。 まあ、私は一種の取ることができます この利点は、私ではないだろうか？ 私が何かを言うことができます www.paypal.com、などです。 その代わりにdisney.comの、I badguy.com、など、に行くことができます。 リロードしてください。 そして、それは欺くためにどのように簡単です、 特に非技術的なリーダー またはcursorily読書します クリックするよりも、リーダー 私はit--をクリックすると、このようなリンク、 私は実際にbadguy.com行きたくありません。 私は実際に何があるか分かりません。 だからpaypal.com、通知は、あります それが何が起こっているのか、それは言います、 もちろん、私がダウンして見れば 超低、それは、少しぼやけです それはbadguy.com言います。 それは今だけを教えています ことを私は間違った場所に行きますよ。 そして、私は以前言ったとき、その銀行 本当に奨励や電車べきではありません リンクをクリックするようにユーザーが、この それのちょうど1現れです。 そして、それは簡単です。 場合あなたは今、敵対しています あなたはこのような何かを そして、ユーザーをだまししよう あなたのウェブサイトを訪問へ。 しかし、今のところ、私たちはしておこう きれいなもの。 我々は先に行くつもりです これらの変更を巻き戻し。 ページをリロードします。 そして、私は戻ってdisney.comに行きます。 

我々はいじめることができない場合を見てみましょう この離れてもう少し。 だから「こんにちは、ディズニーワールド。」 私がダウンしてここに言うつもりです。 たぶん私はいくつかの部屋を作るつもりです。 「私たちはあなたの滞在をお楽しみください！ " セーブ。 リロードしてください。 それはないですrea--ていません 私は、右を意図したもの？ 私は私のテキストを処理している場合、私は、意味します ワードプロセッサのようなファイル、 あなたはここで何が起こるかを願っていたのですか？ ええ、私はそこのように感じます ここでは改行である必要があり、 それは何らかの方法でバギーを感じます。 しかし、それは、実際に意図的です 同じように前にあるため、 ブラウザだけに起こっています あなたはそれが何を教えてやります。 私は、行を分割することを告げていません。 私も、下に移動することを告げていませんでした 私がやったように、しかし、直感的に、私は感じています。 だから、私たちが必要とするが判明します もう少しマークアップ、 そして、私は次のようにこれを修正するつもりです。 私はこの最初のハローを前置きするつもりです 段落タグと呼ばれるものです。 そして、私は先に行くつもりです この他の文章をラップ 別の段落タグで、たとえ 彼らは超短い段落です。 今私は保存するつもりです。 リロードしてください。 そして今、我々はそれを持っています スペース、およびソートの私たち の意味を持っています 二つの別々の段落。 

それはすべての罰金と良いのですが、それは希望 このページに画像を追加するにはいいかも、 私は探しに行くつもりです Google画像検索でのミッキーマウス。 そして、ちょうど楽しみのために、私はよ このイメージをつかむために行きます。 私は今、先に行くつもりだと この画像のURLをつかみます、 別のがありますけれども これを行う方法。 今のところ、私はちょうどURLをコピーするつもりです。 私は私のテキストに戻って行くつもりです ファイルには、私は、ここで言うつもりです IMG SRC =引用引用終わり そのURL、超長いです。 のそして概念 画像は少し異なっています。 出発の概念は本当にありません 画像と画像を終了します、 スタートのような終了タグにタグを付けます。 だから、に少し奇妙な感じ 私は、意味的にこれを行うには、 近接画像タグを持っています。 それは間違っていないのです。 それは、完全に正しいです それは奨励ています、 しかし、簡単な表記法があります。 私は一種のと同時にすることができます オープンと同じタグを閉じ、 それはブラウザが幸せになります。 だから、ほんの少しです 物事のため​​のより簡潔 概念的には本当にないこと 開始および終了するには意味をなさない。 彼らはただそこにある、またはそれらがないです。 

だから私はこれを保存し、バック行くつもりです 私は "hello、world"のページとリロードします。 そして、それは、ほとんど制御不能です そのイメージは、実際にあるので、 大きな少し、それはOKです。 私はプログラムでそれをサイズ変更可能性があります。 または、あなたは何を知っています。 ただ私は、実証します 実際に言おうとして この事の幅がすべきこと のみ200ピクセル、200ドットです。 私が先に行くと、保存してみましょう そして、リロード、今ページ もう少し合理的に見えます。 しかし、パターンに気づきます。 まあ、私は一種のあなたのすべてを教えてきました ある意味で、HTMLの、少なくとも 概念的には、すべてのHTMLがあるので、 これらtags--オープンのタグは、タグを閉じ、 その属性 その挙動を変更します。 そして、明らかに、すべての タグは、ゼロまたは1つを持つことができます 二種以上の属性の各々 これは少し違う何かをします。 さて、あなたはどのように存在しているものを知っていますか？ あなたは誰かに聞きます 私のように存在するものを教えてくれ、 または、チュートリアルのためのあなたの周りには、Googleだけ HTML上で、それは本当にこの簡単です。 

本当に、私が大学生だったとき 年前とHTMLを学びました、 私の数学の授業の1 ちょうど過ごしたアシスタント 私は家庭教師の時間の少し 以下のような半時間のために、時間、 そして私は私の方法にありました。 私が作るに向かって私の方法にありました これまでで最も恐ろしいのウェブサイト、 これは、明らかに、私はそうではありません 本当に超えて進行しました。 しかし、ポイントはあなた一度、ということです これらの単純なideas--を理解します 難解なtext--しかし、これらの単純な場合 思考を開始するアイデア そして、思考を閉じる保ちます すべてがうまく、バランス 、何かを探して修正します そのタグの動作は、それが本当にすべてです それにあります。 そして実際に、我々は今に行けば 実際にgoogle.com--のようなもの、 それでは、もう少し場所を手放します reasonable-- stanford.edu。 そして、私は、見るために行くつもりです 開発者、ソースの表示。 それは醜いですが、notice-- そして、私は通知にズームインします すでにおなじみだいくつかのもの。 これはここにあり次第です、 どのブラウザです。 ここで、HTML5は付属しています。 HTMLがあります。 どうやら、あります 私はしなかったことを属性 指定使用 ページの言語、 これは自動で助けることができます そのような翻訳とスタッフ。 ここではページの先頭です。 ここではスタンフォード大学のページのタイトルです。 私はしませんでしたタグがあります yet--メタタグについて話しています。 それはちょうど一種のです 背景情報。 これは、SEOに役立ち、または 検索エンジン最適化、 またはGoogleの検索結果など。 私たちが探し続けるなら、続けます 見て、ここではボディタグです。 そして、他の房があります 我々はまだについて話していませんでしたタグ。 しかし本部はのための1つです ページの一部門。 それは、目に見えない長方形のようなものです あなたは種類の精神的にしたい場合 あなたのページを分割 オンラインで異なるユニット。 そして、div要素がたくさん私は 、クラスと呼ばれるものを参照してください。 しかし、我々はそれに戻ってきます。 

これはinteresting--形成します。 フォームは、すべてWeb上です。 あなたがしている任意の検索ボックス これまで使用され、フォームです。 そして、そう、のは実際に見てみましょう。 形。 アクション。 何のためにこのフォームのアクション、 歴史的な理由は、そのURLです。 この方法は、「ポスト」です。 HTTPリクエストが使用できることが判明しました 我々の前に見たような動詞は、「取得します」 または「ポスト。」 その差が表示されます 現時点でこのの。 それでは、実際にこれが何であるかを見てみましょう。 私はスタンフォード大学のページに戻りましょう。 彼らがどのような形を話しています あなたは思いますか？ 何があなたに飛び出しますか？ 

AUDIENCE：検索ボックス。 

DAVID J.マラン：うん。 だから、右上のアップ ここでは、この検索ボックスがあります。 そして、それは彼らがit--実装方法です 文字通りオープンブラケット形式のタグ。 そしてのは、何かを探してみましょう。 バディを検索してみましょう mine--「ニックParlante。」の 入る。 そしてもちろん、それはに行ってきました わずかに異なるURL。 私はここに戻って行きましょう。 のの検索してみましょう」コース。」 畜生。 別のURLに行ってきました。 だから、スタンフォード大学のは、いくつかの魔法を追加します 彼らは、URLに私を取っていないこと 我々はで見たこと アクションが属性。 しかし、ここでこのフォームは純粋に実装されています ここでは、このマークアップの方法により、これらのタグ。 実際には、ここでの入力です あなたがしたい検索のタイプ​​。 ここでの入力は、 検索の別のタイプ。 ここでは文字列自体ための入力です。 だから目標は、ラップすることではありません これらのタグのすべての周り私たちの心 ちょうど確認してください。 それはちょうど開閉ます タグや物事を見て。 ええ？ ビクトリア？ 

AUDIENCE：[聞こえません] DAVID J.マラン：それは良い質問です。 それは見て少しトリッキーです。 私はそれに戻ってきましょう わずか数分で質問 私たちは何かを見たときに呼び出されます CSS、またはカスケーディングスタイルシート、 私たちは推測しようとすることができます ページから同じくらい。 だから我々は今、google.comを見てみると、 のは、自分のページがどのようなものか見てみましょう。 あなたはそれが今日かわいいですthey're--だろう。 OK。 すべて完了。 すべての権利なので、ソースの表示。 あなたは、Googleが持っていると思うだろう 本当にすてきなソースコード。 だから、明らかに、ここで何が起こっているの？ 実際には、これもHTMLではありません。 これには、JavaScriptと呼ばれるものです。 そして、行くと続けるのをみましょう。 ページが始まる私も知りません。 私は、コマンドを使用するつもりです F、オープンブラケットHTML。 すべての権利、そこにそれがあります。 私はページの開始を発見し、 そのように多くのものがここにあります。 

実際に何が起こっているのですか？ さて、あなたは何を知っています、 我々はこれをクリーンアップすることができます。 私が代わりに行く場合、この点検 ツールバー、この特別な診断ツール、 そして、ネットワークにない行きます 我々が今日続ける場合には、 私は要素に行けば、 本当にうれしいです ブラウザがたくさんあるということです 私よりもはるかに良い目。 そして、ブラウザは読むことができます Webページの混乱、 そのHTMLメールだけでは、我々 見て、それがすることができます それを解析したり、読み、 それを分析し、それを再フォーマット 素敵な人に優しい方法です。 だから私は今見ているもの ここでは、この画面で 要素、まったく同じ内容の下で、 しかし、彼らはすべてをインデントしました、 彼らはそれをカラー化するが、しました それはまったく同じテキストです 私は、サーバーからダウンロードしていること。 

そして、何今の素敵なのは、私が見ることができるです 体内で、instance--通知のため、 ページがまだ構成され、 ちょうど頭と体の、 そして、私は階層的にここに飛び込むことができます。 Googleが持っているように見えることに注意してください この1本1をdivs--します。 私はそれを拡張することができます。 他のdivの全体の束があります。 だから、少し複雑です。 しかし、待って。 これはそんなに多くいるようです これより、読み込み可能な、比較的。 なぜGoogleは恥ずかしいです それ自体だけで送信することにより、 いくつかのコードのこの巨大な混乱 並べ替えだけで何かを実装します それは一見とてもシンプルに見えますか？ 同様に、なぜ彼らはより多くのスペースを追加しないのですか？ なぜ彼らは私が行ったように入力してヒットしませんでしたか？ 私がいかに良く見えます Webページを書きました。 私は熱心にEnterキーを押します。 私はすべてをインデント とてもきれいで読みやすいです。 なぜGoogleは同じを練習しないのですか？ 

AUDIENCE：[聞こえません] DAVID J.マラン：グッド。 非常に公平。 彼らはいくつかを持っていません Googleの人手作業 もうホームページの更新。 それはもう1999年ではありません。 そこで、彼らはソフトウェアを持っています。 彼らは、他のツールを持っています 彼らはHTMLだ動的に生成します。 もちろん、そのコード自体 人間によって書かれました、 しかし、現実には、 それは言うことは非常に公正です、 ブラウザは確かにしません コー​​ドがどのように厄介な気になります。 しかし、さらにがあります 説得力のある技術的な理由 Googleは、そのHTMLを配布すること このようなずさんのコード、一見 圧倒的な方法は、すべて一緒にパック 非常に少ないway--非常に少ないと 私が行ったようにフォーマットする方法インチ 

AUDIENCE：[聞こえません] 

DAVID J.マラン：高速化？ どうして？ そして、あなたは、リディアを何を言いましたの？ もっと早く？ なぜ速いですか？ AUDIENCE：[聞こえません] DAVID J.マラン：あり 読むためにはスペースはありません。 うん。 だから宇宙は何であるかを考えます。 だから、キーボード上の各文字がかかります 表現するスペースのいくつかの量、 いずれかの物理的に、それのような 多くのスペースことを取り、 または何らかの形で下に フードは、そのメモリを必要とします。 aside--我々はよと このtomorrow--についての詳細を話します キーボード上のすべての文字 典型的には8ビット、または1バイトを必要とします。 だから、8ゼロのパターンや 我々のようなもの、またはちょうど1バイト、 人間は一般的に言うでしょう。 だから、小さいですが、 それはまだ非ゼロです。 それはまだスペースのいくつかの量です。 だから、エンジニアまたはGoogleがヒットした場合 スペースバーは一度だけ、と仮定 それは超popular--ですGoogle-- その億人を想定 日彼らのホームページをご覧ください または人々のいくつかの数 ホームページaを訪問 億回、1日 ことをどのように多くの追加バイトを持っています ソフトウェアエンジニアは、Googleだけの費用がかかります かつて彼または彼女のスペースバーを押すことで？ 

AUDIENCE：[聞こえません] DAVID J.マラン：それほど悪くありません。 ちょうど1バイト回億円となりました。 だからA-- AUDIENCE：80億ギガバイト。 DAVID J.マラン：ない80億。 80億バイト。 しかし、1ギガバイト。 1ギガバイトは、測定単位になります。 彼または彼女は2を実行している場合 スペース、2ギガバイト。 三ギガバイト。 右？ それはぜいたくスケール。 だからGoogleのような例で、 これは、付与され、極端な例であり、 ちょうど発生する他の問題があります 非常に合理的な意思決定を行うことにより、 または非常に単純な人間の行動を取って、 それは、この拡大効果を有するからです。 理由の1だから、 これはとても圧縮に見えます ビクトリアはそれがあったsaid--まったく同じです とにかく、コンピュータによって生成されます。 だから大したことありません。 ブラウザがそれを把握しましょう​​。 しかし、それも意図的に 多くのスペースを持っていません、 スペースは必要ありませんので。 そして、空間は、実際にお金がかかります。 

これはどちらかの時間がかかり、 ただプッシュする理由 のうち、その多くのデータ google.comの本社だけ ある程度の量を取るために持っています 時間、それはだ場合でも、ミリ秒 またはマイクロ秒、それは加算 非常に多くのユーザーを超える、またはそれ以上の可能性が高いです、 それはおそらく、お金がかかります。 Googleは、おそらくに接続します 世界で他の誰か、1 それらのピアリング ポイント、彼らが持っている場合 金融関係のいくつかの種類 それによって、それらのデータはお金がかかり、 彼らは同様かもしれません どのくらいのデータを最小限に抑えます 彼らは上に吐き出しています 彼らのインターネット接続。 

だから面白いことは、しかし、最終的には、 または多分心強いもの、 にもかかわらず、これはひどく見えるということです 一日の終わりに、圧倒的な、 それはまだとまったく同じ原理です ここではHTMLのこの非常にシンプルなページ ページ。 だから要約し、あなたがそのようにするには あなたがいなかった場合は正規のバージョンを持っています ここでは、ここでの選択によって沿って、次の Webページの最も単純であるかもしれません、 ので、おそらく、後に再生する何か。 

さて、ご紹介しましょう 現在、他のアイデアのカップル。 私たちは、ご紹介しようとしています 何かがスタイルタグと呼ばれます。 私たちは、このページを型にはめることができます もっと面白い方法インチ HTMLメールのに対しだから すべてのマークアップについてです データは、ソートのに指定します どのようにデータを構造化するために、ブラウザ、 ここで、CSSをそれを置くために、または カスケーディングスタイルシート、 第二言語であること 一般的にHTMLと混合されます 我々はsee--だろうが、我々はきれいにすることができるように かかるmoment--でそのアップ それ最後のマイル、およびそれをstylizes。 それは色がちょうど取得し、 フォントは、ちょうどいいサイズ ポジショニングちょうどいい。 これは、すべての美学についてです または約ではなく、書式設定 基本的なデータそのもの。 表示する簡単な方法 これは、実施例により、おそらくあります。 だから私はオーバー行くつもりです 私の単純なテキストフ​​ァイルに。 そして、ちょうど瞬間に、I'LL processを通して私達歩きます これを行うための自分自身。 

私は自分のファイルに戻って行くつもりです ここだけのページをリロード それがどのように見えるか確認します。 我々は今にいるところです。 子供たちが楽しんでいましたような気がします このウェブページにはいくつかの色を有します。 だから私はここに行くつもりです ページの先頭へ。 そして、私はスタイル、/スタイルをするつもりです。 そして、この内、私が行きますよ 私の当ページの本体を伝えるために この書式はであり、 一見、おそらく少し 奇妙なしかし、従来の。 私は、バックグラウンドと言うつもりです このページの色は緑色でなければなりません。 そして、これは残念ながらあり 並べ替えのない最高のデザイン。 ていることに注意してください以前 HTMLの世界では、 私は属性という これらのキーと値のペアがあります。 何かが引用等しいです 引用終わり "何か。」 だったCSSの世界では、 いくつかの異なる人々によって設計され、 彼らは彼らの中で、ということを決定しました 世界では、キーと値のペア 単語大腸ものになるだろう。 だから、しかし、同じ考えです。 それは値を関連付けるています 何とかいくつかのキーを持ちます このページの動作に影響を与えます。 

そして、あなたはおそらく推測することができます。 これはおそらく起こっています あなたは決してきていない場合であっても実行します 前HTMLやCSSを見たことありますか？ AUDIENCE：背景色を変更します。 DAVID J.マラン：ええ、 背景色を変更。 具体的には 本体の背景色。 しかし、限りとして 今の体はウェブであります 当ページ - それだけのことです タイトルバーの下really-- それはおそらくに起こっています 同じことに影響を与えます。 それでは見てみましょう。 それでは、これを保存してみましょう。 ここに移動して、リロードしてください。 それはかなり恐ろしいです。 そして、何が起こっているの ここで副作用です。 私はランダムにこの画像を選びました。 なぜ緑ではありません ミッキーの後ろに浸透？ AUDIENCE：[聞こえません] DAVID J.マラン：その通り。 それはかなり、その画像が判明します 私たちが使用する可能性のある多くのすべての画像、 矩形のすべてrectangles--です。 ミッキーは、いくつかのカーブを持っている場合でも、 自分自身へとバックグラウンドを持っています、 その背景は何かでなければなりません。 それは白でなければなりません。 それは黒または何か他のものにする必要があります。 それは、透明であることができます。 実際に、私ができました ここにミッキーマウスを開きます フォトショップと呼ばれるプログラムで または似たような その白のすべてを変更 透明の背景、 そのように緑が透けて見えるでしょう。 しかし、それは私が必要となる何か 自分やグラフィックアーティストの依頼します 私の時やデザイナー 会社、例えば、 特に私はちょうどので、実行します インターネットからのこの1を借りました。 なぜこれが起こっているしかし、それはです。 

だから、他に何私たちは何をしたいのでしょうか？ まあ、我々は我々の言いたいことがあります 本当にあなたがあなたの滞在をお楽しみください。 そして、強調のために、私が欲しいです これを強くするために、 そして私は、強力なオープン言うよと 強い閉じてリロードしてください。 そして、それは少し難しいです プロジェクターに表示します おそらく本当に今 もう少しあなたに飛び出します。 だから、この中でイタリックを追加することができます 方法、このように大胆に面します。 私たちは色を​​変更することができます。 実際には、ちょうど蹴りのために、私はよ 先に行くと、これをするつもり。 私は本当に好きではないどのように私 段落では、一緒にこの近くにあります 私はこのような何かを行う可能性があります。 私はブラウザに指示するつもりです、 持っているすべての段落タグを変更し、 あなたは何を知っている、のは実際にsay--せ、 のは、テキスト整列、中心位置を合わせてみましょう。 そして再び、私はこれだけを知っています 誰かが私にそれを教えたので、 または私はそれを見上げ オンラインリファレンス。 だから私は、これを保存してみましょう。 そして、ああ、今私がしました そこに画像を中心に。 そして実際に、あなたは何を、かどうかを知ります 私は私のイメージは、段落に移動します tag--そう番目の段落、 それはテキストではないにもかかわらず。 のはそれを保存してリロードしてみましょう。 今すぐページが親切に見えるし始めています 私は意味of--、それは、まだかなり醜いです 私が過ごしたのようですが、少なくともそれが見えます 2分の代わりに1分 それを作ります。 

だから、インクリメンタルに、我々が行うことができます ページになりましたこれらの美的変化？ 私は実際にデータを変更していませんでした 本当に言葉を追加すること以外のページ。 あなたがする場合、私は、メタデータを追加しました。 ねえ、ブラウザは、作ります 単語 "本当に"大胆。 しかし、データは強力ではありません。 それはメタデータです。 データが「本当に」です。 だから我々はまだのいくつかを持っています 前と同じコンセプト。 今、もちろん、これは、ウェブ上にありません、 だから私はここで1最後のステップをするつもりです。 

私はhello.htmlに行くつもりです そして、だけ強調表示し、これをコピーします。 そして今、私はするつもりです Cloud9、その中に行きます 私は一瞬であなたを歩きますよ。 そして、オッズは、以下の場合、あなたはすぐになるだろうしています ない既に、このような画面で。 そして、私はちょうどあなたに素早くを与えてみましょう Cloud9が実際に何であるかのツアー。 だから、再び9をされているクラウド このクラウドベースのサービス それは、あなたと私の錯覚を与えます 当社独自の仮想マシンを持ちます クラウドで、技術的に クラウド内のコンテナ、 我々は完全な持っていること 管理者権限へ。 理論的には、誰もそのように 世界で他に持っています 私は、画面へのアクセス 今見て、 多分人を除きます 誰がサイトを実行し、 技術的に、彼らが持っているので、 物理的なアクセスなど。 

だから我々はこの環境で何を見ていますか？ 私は、ズームアウトするつもりです なぜなら、それは少し小さいです。 そして、私はオーバーポイントましょう ここでちょっと。 左側に私とあなた 画面、左のファイルブラウザがあります。 精神で非常に類似しました Mac OSとWindowsに。 これらはすべてあります アカウント内のファイル。 そしてデフォルトでは、お使いの場合 アカウントは私のようなものです、 あなたが参照するか、すぐにわかります helloworld.htmlとreadme.md。 ここで右側の上で、これは ここで、私のテキストフ​​ァイルは行くつもりです。 あなたは今までのMicrosoft使用している場合 Wordやメモ帳やテキストエディット、 これは私の編集単語であります ファイルの行くために起こっています。 そして、最も難解な この環境の特徴 私たちは本当に使用する必要はないということです ダウンここではターミナルウィンドウと呼ばれます。 あなたはからDOSを使用している場合 往年、これはLinuxがあります または、DOS、Linuxの同等。 これは、テキストベースのinterface--です なしマウスクリック、ノードラッグ。 あなたが行うことができますすべてがタイプです コマンドが、これらのコマンド オープン、ファイルを作成し、ファイルを移動することができます ディレクトリ、近くのディレクトリ、 物事の任意の数を実行します。 しかし、今のところ、私達はちょうどよ ここで私たちの時間を費やしています。 

そしてそうはこのやろう。 あなたはこの中であれば 環境、あなたがすべき ワークスペースを作成した場合であります すでに、先に行くと、ちょうど上がります 瞬間のために、新しいファイルします。 そして、それはあなたに新しいを与えます 右ここで真ん中のタブ。 そして、私はjust--としてみましょう 先に行くと、これを行います。 それでは、先に行くと、今ファイルをしましょう​​、保存 そして、先に行くと、それをhello.html呼び出します と混同しないように helloworld.html、これ あなたの新しい無料のアカウントに付属しています、 これだけのサンプルファイルです。 あなたはそれが突然表示されます、 左側の最も可能性の高いです、 そして、タブが開いたままになります。 そして、私は再作成するために、今をお勧めしてみましょう このファイルまたはそれらのいくつかの変種。 そして、あなたは非常にそれを見ることができない場合 画面、これはスライドと同じです おそらく別のタブを持っていること。 

だから要するに、あなたの最初のWebページを作ります、 それを保存し、一瞬で、 どのように私はあなたを紹介します 実際にこれを表示することができます。 しかし、少なくとも一つのことを変更します。 へのhelloworldを変更 あなた自身の選択のようなもの、 あなたはそれがあなただと確信しているように、 ファイルではなく、私が作成したばかりの1。 大丈夫。 そして、あなたはありませんready--しているとき 準備ができたら、rush-- 先に行くと、ファイルを保存 一度あなたがこれらの変更を加えました。 そして、あなたがクリックした場合 実行ボタンアップトップ、この 教えてくれる新しいタブを開く必要があります あなたがであなたのファイルを訪問することができますどのようなURLます、 それはに少し時間がかかるかもしれません 引用符 "、Apacheを起動」引用終わりいます Webサーバの名前です。 だから正確に行うように注意してください 最終的にファイルにです。 だから今、私はズームインます。 私は、入力を開始した場合 オープンブラケットHTML、予告 私の考えを完了するために私を促しています。 そして、私は私の思考を終了した場合、それを 自動的に私に終了タグを提供します。 しかし、期待は、私は打つよさ 入力し、そこに内側に移動 内部ヘッドを行い、 その後、私の中に身体を行います。 そして、それは最初は少し奇妙なことです、 それはあなたのための作業をやっているので、 しかし、最終的にそれを実現 それはあなたのキーストロークを保存します。 のと実際には、非常に共通の特徴 プログラミングは、これらの日環境 両方のようなWeb開発のための これと実際のプログラミング、 これは私たちが明日の話をします、 これらのオートコンプリート機能です、 ちょうど許可するもの プログラマやデザイナー に、より少ないキーストロークを入力します 同じことを実現。 時にはそれはしかし、良いことです。 時にはそれだけで迷惑なんです。 そして、再び、あなたが転写したら スライドまたはそれらのいくつかの変異体、 あなたは、トップアップファイル名を指定して実行]ボタンをクリックすることができます。 そして、底に ウィンドウ、あなたが通知されます どのようなURLであなたのウェブページを訪問することができます。 鉱山は、例えば、です business-daharvard.c9users.io など。 すべての権利は​​、そう、me--ご質問を聞かせて？ ちょうど得ることについてその他のご質問 我々は機能を追加する前にこの作業？ そして、ちょうど、私が提案してみましょう 人々を取得しますcomfortable-- なぜならそれだけに一つのことです コピー＆ペースト、私がやった盲目的。 しかし、単に人々が取り組むように 少なくとも一つのto-doと、 私はいくつかの音楽をオンにするつもりです。 私はのリストを提案するつもりです あなたが潜在的に追加することができますもの。 そして、あなたは確かにグーグルを使用することができます。 そして、なぜしない私たちだけ あなたが解決しようとすることを提案します 少なくとも一つの特定の問題をここに。 だから、タグの面で、 私はここにこれを再利用してみましょう。 

実際に、私は入れてみましょう そのテキスト形式インチ 我々はかもしれないタグの間のことを言ってみましょう ここで使用こっちいくつかのタグです。 私たちは、段落タグを見てきました。 今ではオートコンプリートになるだろう。 段落タグ、アンカータグ。 例えば、あなたがしたいとしましょう 何か大きなものを作ります、 あなたはlike--可能性があります spanタグは助けることができます。 さて、あなたはいくつかの助けが必要になる場合があります ちょっとでそのため。 私たちは、divのを見てきました。 あなたはテーブルがあります表示されます。 そこTR、TDと呼ばれるもの。 目、TD。 その瞬間に戻ってそれに来ます。 便利な他に何があるかもしれませんか？ 強いあります。 強調、またはむしろEMがあります。 There's--他に何 あなたはここに空想のでしょうか？ さて、私たちは取りますよ 一緒にその見てください。 私たちが見てきた形。 フォームがあります。 入力およびいくつかの他があります。 すべての権利は​​、そうはこのやろう。 ビクトリアのに答えるために 質問は、最初に私を聞かせて ちょうど誰もがあることを確認してください そのハロー作業を取得することができます。 そして、私が紹介しましょう カップルの他のアイデア。 その後、我々は人々が解決してもらおう 自分でいくつかの問題。 その後、我々は実際に戻ってきます フォームの概念に、 私たちは、実際に再実装します 一緒に、フロントエンドインターフェイス そうGoogle自身のために、話します。 私たちは、バックエンドとしてGoogleを使用してもらおう 彼らはハードワークを行い、検索、 私たちは、フロントエンドを再作成します Googleと検索フォームの 彼らは自分のホームページに持っていること。 そして、私たちは戻ってくるだろう 一瞬でこれらのタグ。 

だから、これはどのような私でした ちょっと前に提案しました。 私たちは、にスタイル設定を追加することができます このスタイルタグの内側ページ、 我々は背景を型にはめることができます カラー、テキストの配置、 それは中央左または右だかどうか。 しかし、非常に迅速に、あなたでしょう 検索またはWebデザイナー このことを見つけるだろう 少し扱いに​​くくなり、 あなたは何をやっているので、 混合コンテンツと呼ばれます プレゼンテーションとその。 あなたは、あなたのデータを混合しています そしてその美学。 そして実際に、あなたが考慮すれば、 何time--上で起こるだろう これは非常に小さいです ウェブページ、もちろん。 しかし、私はこのページにコンテンツを追加した場合 そして私は、このページにスタイルを追加し、 ページには、非常に迅速に取得します 長く、長く、長く。 そして、私はしたいと仮定 第二のウェブページを持っています これらの属性のいくつかを共有しています。 私は私の第二のウェブページを仮定 関連サイト - また、私は、すべての中心にしたいです そして私はまた、すべてのものをしたいです 緑の背景を持ちます。 私はかなりする必要がありますするつもりです これらのラインの一部をコピーして貼り付けます 細かい感じて、第2のファイル、に。 これは、問題を解決します。 

しかし、私は3番目のページを何したい場合 30ページまたは40番目のページや？ 今、私はコピーするつもりだし、 重複したコードの多くを貼り付けます 複数のファイルインチ だからと仮定 私が決めるか、私は聞いています、 ねえ、私たちが使用していません もう緑の背景。 私たちは、オレンジ色の使用を開始するつもりです。 あなたは何を変更する必要がありますか？ さて、あなたはそのスタイルを変更する必要が オレンジ色の緑からどのように多くの場所で？ 30または40の場所のように。 それは退屈です。 これは、エラーになりやすいのです。 いくつかの理由があります あなたが誘導するために望んでいないだろう場所 あなた自身のための痛みのようなもの。 そしてそれは素晴らしいではないでしょう 私たちは、まさに私が取ることができれば これら二つの黄色の間に置きます タグ、これらのスタイルタグ、 それを考慮し、私のすべてを置きます 1中央ファイルに様式化 その私の他のファイルをすべて30または40 借りるか、何らかの形で参照、 ないネットワークとは異なり、 図私たちは前にやっていましたか？ 

私はここに行くのであれば、私はよ 実際に提案する予定 我々は交換することを 何かを持つスタイルタグ これは、リンクタグと呼ばれます 恐ろしく、恐ろしく命名され、 あなたが使用していないので、 何を作成するためのリンクタグ 私たち人間は、Webページにリンクとして知っています。 そのためには、どのタグを使うのか？ どのようにWebページ内のリンクを作成するのですか？ AUDIENCE：A。 DAVID J.マラン：A、またはアンカー 前ディズニーに行ってきましたタグ。 ここにリンクタグを言っています ファイルにthis--リンク Styles.cssを、との関係 それは私のスタイルシートだということになるだろう。 だから、これは、Sの中の一つであります CSS--カスケードスタイルシート。 スタイルsheet-- CSSのSさんの2。 スタイルシートをカスケード。 これはちょうど意味、ちょっと、ブラウザ、行きます ローカルサーバー上のStyles.cssを見つけます そして、あなたのスタイルシートとして使用 これは、そのファイルの中に意味 のすべてになるだろう 私たちはやったstylizations。 だから何そのファイル このあるように見えるかもしれません。 そして、私はちょうどこれが速いやります 例えば、我々は必要としないため、 ここで雑草の中にあまりにも多くを取得します。 私はこれをコピーする場合でも、どのような私が提案しています プログラマは新しいファイルを作成することで、 これらのlines--に貼り付けます whoops--は、それらの行に貼り付けて、 Styles.cssをとして保存し、その後、中 他のファイルは、そのすべてを削除します その代わりにそれを置き換えます このリンクタグを持ちます。 私は= "Styles.cssを" HREFをリンクする場合だから、 関係は、「スタイルシート」でなければなりません 終了タグ。 それを保存。 私のhelloworldに戻ります。 リロードしてください。 

文字通り、何も起こりませんでした。 それはそれので、良いことです それは実際にすべての作業であることを意味します。 できるだけ多くを証明するために、私が作ると仮定 タイプミス、と私は、この「Styles.cssを "呼び出します ある資本S、と 間違った、その後リロードしてください。 今、あなたはそれだけでは動作しません見ることができます。 さて、なぜ？ さて、使ってみましょう 以前から技術。 で、私は先に行ってみようと 私のブラウザ、Chromeで、私は 特別なことを開くつもり 以前のようにネットワーク]タブ、 そして、私はページをリロードしてみましょう。 あなたが今見て驚い何はないのですか？ または多分あなたはそれを見て驚いています。 いずれにせよ、あなたは今何を見ていますか？ AUDIENCE：[聞こえません] DAVID J.マラン：それが見つからないです。 なぜそれが見つかりませんか？ まあ、Styles.css--資本 -S-は存在しません。 私はそれをmisnamed。 単純なタイプミス。 しかし、私は今、当然のことながら取得しています 404、サーバが言っているので、ちょっと、 それが見つからないです。 文字通り、私は知りません どこにそのファイルがあります。 ブラウザは、結果としてそのように あなたは何ができる示し、 ページの生のコンテンツ、 これは、HTML 200でした、 しかし、スタイル設定はできません その後追加されます。 そして、これはカスケード接続することによって意味されるものです。 あなたは、ソートのそれを追加することができます 後に、その種の Webページの美学を洗練。 あなたも、それらを上書きすることができます まだ他のスタイルシートファイルとスタイル お望みならば。 これは、このケースでは、しかし、見つかりませんです なぜなら、もちろん、私はそれをmisnamed。 だから私は最初にこれを修正する必要があります。 

それでは、先に行くとしましょう 次のことを提案します。 それでは、先に行くと、これを実行してみましょう。 おそらくで始まります あなたのhelloworldのファイル、 私はただのカップルを招待しましょう 機能の提案の。 だから、ビクトリアは、あなたが望みました いくつかのテキストを大きくする、右か？ すべての権利、私たちがすることができます テキストを大きくします。 そして、我々は、各毟り取りますよ ただ一つの問題は解決します。 テキストを大きくしてください。 私は気にするつもりはありません ときに我々これを書いて 右こっち弾丸の技術を持っています。 だから、いくつかの問題。 だから我々は試してみるつもりです テキストを大きくします。 大丈夫。 誰か他の人が何を提案しているのでしょうか？ 私たちは他に何が必要になる場合があります Webページにしますか？ のが思い付くしてみましょう 物事の短いリスト そしてその後に委譲 これを理解するグループ。 

AUDIENCE：[聞こえません] 

DAVID J.マラン：OK、位置テキスト ページの異なる側に？ 大丈夫。 何か他のもの。 

AUDIENCE：[聞こえません] DAVID J.マラン：それはあります。 だから、GIFはただであります 別のファイル形式。 私達はちょうど使用し、どのような、 PNGまたはJPG、おそらく？ 私たちがjpgを使用しました。 あなたは過度の、好奇心旺盛であれば あなたの質問に答えます JPGは、一般的に使用されますされ、 写真、それがサポートしているので、 色または24ビットカラーの何百万人。 GIFは、一般的に、等、に使用され インターネット・ミームこれらdays--アニメーション、 アニメーションGIFのような。 しかし、小さく色を使用するために起こります パレット、唯一の256の可能な色、 それはサポートしています 透明性とアニメーション。 サポートしているし、そこだPNG、 透明性とより多くの色 ではなく、アニメーション。 だから、トレードオフです。 だからしかし、gif形式を追加し、 機能的であろう PNGまたはJPGを追加することと同じ。 うん。 画像ソースに等しいです。 だから、何か他のもの。 その何かを思い付くのをしてみましょう 我々はここで行うためにビクトリアに送信しました。 

AUDIENCE：フォームのボタンを追加します。 DAVID J.マラン：OK。 だから、フォームのボタンを追加します。 そして、私たちは一緒にそのいずれかの操作を行います。 だから、完璧なセグエだろう 右このチャレンジ後。 他に何か？ あなたは何をしたいのでしょうか？ ウェブは非常にがっかり感じます これは、すべてのであれば我々が行うことができます。 AUDIENCE：テキストの色を変更します。 DAVID J.マラン：何を変更しますか？ AUDIENCE：テキストの色。 DAVID J.マラン：テキストの色を変更。 大丈夫。 それでは、これを実行しましょう​​。 もう一度あなただけ、じゃないように 暗記することによって、私がやっている正確に何をして、 私は音楽をオンにするつもりです ここでは多分5分間。 あなたは、Googleを使用するように歓迎しています。 あなたは私を尋ねることを歓迎している、と 私はあなたの耳の中にヒントをささやくでしょう。 あなたが見て歓迎しています 他の肩の上にオーバー。 しかし、これらの問題のひとつを解決します。 しかし、我々は、最後のいずれかを実行します 私たちができれば一緒に、1を形成しています。 それで解決する5分 これらの問題のいずれか グーグル、直感を用いて、または任意の あなたに利用できる他の手段。 

[MUSICのPLAYING] 大丈夫。 あなたがしたい場合は心配ありません いじり保つために、 私はカップルを台無しよ これらの答えの。 からだから、最初の提案 ビクトリアは、テキストを大きくすることでした。 だから、これを行うにはいくつかの方法があります。 私は現在、復元しました このサイズに私の画面、 私は、ズームインましたけれども 人工的に物事を見ることができます。 そして、はこのやろう。 私が先に行くとグラブしてみましょう いくつかの一般的なラテン語のテキスト ちょうど私たちはで動作するように何かを持っています。 だから、私はちょうど1瞬間を与えます。 私は3段落を作ります。 OK。 これは、より良い例となります。 好奇心のために、内だから 私のhello.html、ちょうど私 貼り付けた3無意味 ラテンの段落 ちょうど私たちはで動作するようにいくつかのテキストを持っています。 ビクトリアの目標はにありました 大きなテキストの一部を作ります。 だから私は、以前のように、ここに行くことができます。 そして、私はそれを正しい方法を行うことができます。 私はリンクを持っているつもりです ファイルを指し示すタグ 「Styles.cssを、 "関係と呼ばれます 再度であるが、「スタイルシート」。 そして、私はそれを保存するつもりです そして、この「Styles.cssを」を開きます 

だから、以前のように、私が持っています このCSSファイル内の能力 実際にデフォルトを無効にします Webページの美学、 そして、デフォルトの美学、 もちろん、かなり鈍いです。 それは黒、通常のフォントサイズのようなものです など、テキスト、白背景、と。 だから私はしたいと仮定 大きなこのテキストのすべて。 私はいくつかのことを行うことができます。 私のStyles.cssをファイルで、I あなたは何を知っている、と言うことができます、 に以下を適用 私のページの本体。 先に行くと作ります フォントサイズ24ポイント、 その数は、私は可能性がありますです Microsoft Wordで使用します。 私は私のウェブに戻りましょう こちらのページとリロード、 そしてあなたはそれを見ることができます それはすでにはるかに大きいです。 そして、我々は少しクレイジー得ることができ、 ちょうど私たちがdesktop--にすることができますように それ96ポイントにします。 リロードしてください。 そして、それは少しを得ています この時点では扱いにくいです。 

しかし、私はもう少し正確である可能性があります。 代わりに、これを適用します 私のページの本体に、スタイルシート、 他に何私は、代わりにそれを適用される場合があります どのような他のタグそれはまだかもしれません 同じように機能しますか？ 

AUDIENCE：pタグ？ DAVID J.マラン：Pタグ。 だから、頭はないだろう ヘッドので、正しいです、 あなたが実際にすることはできません の美学を制御します。 そこかないテキストのいずれかがあります。 しかし、pはtag--私は少しに飛び込むことができます 段落に、いわば、より深いです タグ。 そして、3があるにもかかわらず、 その理由は、CSSで、まったく問題ありません 私はちょうど "、pは「これを言うとき、 手段は、以下のものが適用されます これを一致するすべてのタグに セレクタ、セレクタだけ タグの名前です。 だから、あなたが見るところはどこでも 「P、「フォントサイズを適用し、 とのは、より多くのそれを作ってみましょう 合理的なagain-- 24点。 そして、あなたは何を知っています、 ちょうど良い対策のため、 色を作ってみましょう ちょっと赤。 そして今、私は今、リロードすれば我々 3醜いの段落を参照してください。 

しかし、今、私は一種だと仮定 私は最初の段落をしたいですof-- ユーザーで実行ジャンプします。 私はちょうど増加したくありません すべてのフォントサイズ。 だから、私は実際に識別したいですか これらの段落を区別。 それでは、赤を取り除くましょう、 なぜならそれはちょうど種類の粘着性です、 とのは、先に行くと作ってみましょう デフォルトでは、フォントサイズ12ポイント、 私たちは戻って何かをしていること もう少し合理的。 そして今、私はちょうど増やしたいです 最初の段落のフォントサイズ。 私はいくつかでこれを行うことができます 方法、しかしだ一つの方法 で、おそらく最も教育 モーメントは以下のことを行うことです。 私は先に行ってみようと、これを言います 段落は、「最初に。」のユニークなIDを持っています 私は私が欲しいこの何かを呼び出すことができます。 私はこの "foo"を呼び出すことができます または任意の他の単語、 私はそれにいくつかを与えるつもりです 意味的に意味のある名前 「最初に。」のような これは、一意の識別子です ID、私の最初の段落のために。 

私は今、私のスタイルシートに何ができます もう少し正確にあります。 代わりに適用する、というのが pタグに次の、 私はfollowing--を言うことができます 以下を適用し、 または選択、HTML要素 すなわち、「最初」のユニークなIDを持ってい 私はそれに適用するために何をしたいですか？ 24ポイントのフォントサイズ。 だから私は今、2つのセレクタを持っています。 一つは、すべてを作ります パラグラフ12ポイント。 しかし、この1は、それが来る特に以来 second--それはfile--で最後になります これは、カスケード効果を有しています。 私はちょうど私のすべてを作りました 段落タグ12ポイント、 これは、今カスケードおよび 任意の要素のためにすることを優先します ページ内のページで、任意のタグ 一意のIDが引用引用終わりである「第一。」 そして、この文脈でのハッシュタグ ただ「一意の識別子」を意味します。 私は、HTMLファイルに入れないでください。 私は、ここの上に、ちょうど言います 「最初の。」引用終わり引用 

だから私はリロードしてみましょう。 そして今、私はOK、ああ、参照してください。 私が意味する、それはそれではありません かなり、それはようなものです 序文など 本やそのような何か、 ここで、最初の段落は大きいです。 さらにより正確かもしれません 少なくとも最初の文字が、ちょうど 私はより多くの制御を行使してきました。 今maybe--多分私はこれをやってみたいです 時折、何らかの理由で、 そして私は、これはしたくありません ただ1つのHTMLタグに適用されます。 むしろ、のがしてみましょうsay--てみましょう また、次の操作を行います。 クラス= "インポート"。 IDは一意にするために使用されるが 一つのこと、1のタグを識別し、 あなたのWeb​​ページで、クラスがあることを意味します エレメントまたはタグの任意の数で使用されます あなたのウェブページ上で。 だから、再利用可能です。 IDは再利用できません。 クラスは再利用可能です。 

そして、あなたは何のために何を、知っています 哲学的reasons-- 私は私を終了しませんでした 私は言うつもりですthought-- その最初の段落と 2番目の段落は重要です。 だから私はと呼ばれるクラスを適用するつもりです 私は、ファイルを保存した場合、ことを「重要」 なしを持って、リロード まだ機能的影響。 しかし、私はいくつかを追加しました ファイルのメタデータ、 別々の何かの並べ替え ファイルのコアデータから、 私の場合、今の私のスタイルシートでいるので 代わりに「.important」と言う - あなたが知っています、 重要なのは何も、私は フォントの色を作るつもり、red-- か、単に色色、フォントません。 不整合があります CSSで、残念ながら。 そしてリロードしてください。 今最初に気付きます 2段落は、赤 私は唯一の理由が、サードありません 「重要」のクラスを適用 それらのものの最初の2へ。 

だからIDの中で、あなたが能力を持っています 非常に正確に指定します。 クラスを使用すると、再利用性を持っています。 しかし、いずれの場合も、気付きます 良い設計原理の一種 私はすべてを因数分解場所 私のStyles.cssをファイルへの美学。 だからここには散らかっはありません。 赤の言及はありませんか このファイルの大胆な向きやフォントサイズ。 むしろ私は、意味的に持っています、 意味のように私のデータを特徴とします、 ここではいくつかの重要なデータです。 ここではいくつかのより重要なデータです。 また、ここにあります 私の大切なデータの「第1」。 だから、HTMLはすべてに約一種であります タギング、文字通り、言葉の あなたの中の段落および構築物 これらの小さなヒントをページ、よろしければ 意志、あなたができること 何とか使用して活用 このようにCSSのような他の技術。 

だから、ビクトリアの質問への答えで、 我々はその方法でテキストを大きくすることができます。 ありそう他の多くの方法がありますが、 フォントtag--開き括弧「フォント」 -  実際にいくつかの歳。 これは問題があります あまりにも、のみ頼ると オンラインresources--上 彼らが時代遅れになる傾向があります。 そして実際、それは推奨されています、 世界が実現しているため、 「フォントサイズ= 7 "は何を意味するのでしょうか？ それはしていません。 そして、非常に多くの年のためとの これは、側面の1 day-- ここでの注意事項は、それが実際にあるということです 信じられないほど痛いまだ時々 以下のためのサイトを開発します ウェブ、マイクロソフト理由 そして、GoogleとMozillaと 他の人は、多くの場合、どのようにのように反対します HTMLのような仕様を解釈します。 

HTMLのためのルールブックがあること 一般に、各タグが何を意味するのかと言います。 しかし、時にはそれがに残っています 実装の裁量、 マイクロソフトの裁量とGoogle。 だから、あなたは非常に頻繁によ ウェブサイトの何かに参照してください。 PC上で違って見えます それがMac上よりも、 そしてそれは本当にだ、なぜなら 一日の終わりに、 彼らはそれをテストしていません 両方のプラットフォームでも。 合理的なので、しかし、それはまたです、 スマートな人々が反対します そして企業が合わない、とそうなります プログラミングの課題の一つ ウェブやデザインのための Web用のもの 方法であなたのウェブサイトを書いています それは、すべてのWebブラウザ上で動作します。 しかし、たとえそれが右、不合理なのか？ そう多くのように多くのバージョンがあります。 そこブラウザ、いくつかの点で、その あなたはまた、審判の判定を行う必要があり あなたは会社として決定する必要があり、 特に電子商取引スタイル用 あなたがしているサイト 最新かつ最高のを使用しようとします 本当に良いユーザーを与えるための技術 経験。 しかし、一部のユーザーの割合は、かもしれません まだInternet Explorer 6または7を使用して または8、特にによって どこから来ていることを国。 

それで非常に一般的に 相談ものです 「Webブラウザの統計情報を表示します。」のような そして、我々はのはウィキペディアを見てみましょうto--行けば このグラフがどのように最新のを参照してください。 場合は、1つがあります。 だからここにあなたが見ることができます ここで、実際のブラウザ 2015年12月によると、あります、 米国政府によると。 Chromeは続いて、42％の市場シェアであります 主に企業の設定で、IEによります またはPCの設定はもちろん、 Firefoxのに続いて、 その後、Safariは、その後、オペラはしませんでした 何らかの理由で、ここでマップを作ります、 そしてその後、その他。 多分それはその他の下です。 しかし、それ以上に問題is-- ウィキペディアはまた、持っている場合を見てみましょう ブラウザのバージョンversion-- 

のは、ブラウザの統計に行きましょう。 IE。 でもそれだけでは十分ではありません。 ブラウザの統計情報を表示します。 私のバージョン。 それは右であることはないだろう。 のは、バージョンを見てみましょう。 ブラウザの市場シェア。 これが起動した場合を見てみましょう。 OK。 さて、これはなっています もう少し便利です。 だからここに、我々はすべて持っていることに気づきます ブラウザの異なるバージョン。 そして、私の神、あなたはChromeをlook--場合 48、クロム47、クロム31、クロム45。 私が意味する、ますます更新ブラウザ、 これらの変更の、時にはいくつかの で重要です 機能性の観点から。 そして、そのようにいくつかの点で、 プロダクトマネージャやエンジニア decision--を作成する必要があります 何を、世界の1％だけ知っています まだIE 7を使用しています。 彼らと地獄へ。 私達はちょうどつもりはありません そのブラウザをサポートしています。 そして、それはサポートしない何を意味するのでしょうか？ それは、そのボタンを意味するかもしれません あなたのWeb​​ページ上では動作しません、 またはそれが意味するかもしれません 書式は完全にオフになっています。 それとも、確認する必要がありかもしれません その同じ審判の判定 私たちがしている、モバイル、これらの日、中 もうIOS 5をサポートするつもりはありません。 だから、人々はアップグレードする必要があります。 それともカップケーキをサポートするつもりはありません AndroidデバイスのためのAndroidのOS上で、 理由としてworld--として ハイテクの世界は前進したいです、 それは一種のドラッグしたいです これで世界そうではないように、 であることを続けなければなりません 彼らは後方互換性 新との良好な機能を提供することができます。 これは確かに理由の一つです なぜこれほど多くの企業が展開されています 自動アップデートと強制のソート 私たちのソフトウェアの最新バージョン。 さらには企業 アップルは、ソートされますように あなたをほぼ強制や強要 市場の力の点ではあなた 彼らはちょうどので、新しい携帯電話を購入します もうあなたの古い携帯電話を更新しません。 だから、を逃します 最新かつ最高の機能、 それはのように彼らにコストがかかりますので、 同社は間違いなく、古い維持するために、 ソフトウェアの下位バージョン。 しかし、正味の効果は、ということです 我々はまた、同様にこれを被ります。 

それでは、ただ見てみましょう ここでは、最終的な物事のカップル。 本当に速いの一部をオフにノックしてみましょう それらの他の弾丸、好奇心旺盛であれば。 だから、あなたがしようとしていた場合、 例えば、位置 の異なる側上のテキスト ページ、私は1つの簡単な方法をするつもりです、 異なるがあります これを行う方法。 私は先に行ってみようとeliminate-- 次のようにこれを簡素化します。 私が戻ったばかりの私に行こう シンプル、簡単な段落。 私のStyles.cssをに戻りましょう。 そして私はちょうどsimple--を使用するつもりです あなたがGoogleで見ている可能性があります またはearlier--からリコール 右テキスト揃え。 そして、このページをリロードしてください。 今、すべてがそうです 右揃えされるように、 あなたはここにオーバーヘッドに表示される場合がありますように。 

我々は、それがもう少し見えるようにすることができます 本のような、と私たちは「正当化」と言うことができます そして、リロード。 今では素晴らしく、両方の上の正方形です 素敵なの一種である側面、。 私たちはここに持っていたもう一つの目標 テキストの色が変化しました。 だから我々は、私の赤いテキストでそれを見ました。 そして今、フォームのボタンを追加します。 では、なぜ私たちは、まさにこれを実行しようとしないのですか？ しかし、最初に私がそのサイトに行ってみましょう 私たちのほとんどは、Google day--ごとを使用しています。 とのは、見てみましょう どのようにGoogleが実際に動作します。 しかし、私はこれを行うつもりです。 まず、うん、私はそれをin--やらせます 私が最初にGoogleに行ってみましょう。 私が行かなければならないつもりです Googleの設定に、 私は無効にしたいので、 何かがインスタント結果と呼ばれます。 

だから、中に気づいたかもしれません グーグルこれらは私が戻って行きましょうdays-- これをオンにします。 だから私は検索を開始する場合 このような「猫」のために、 しておりませいることに気付きます 私はオートコンプリートを取得します トップ、突然、ページ自体 同様にかなり迅速に変更するようで、 それは言語を使用して、Googleの JavaScriptが参考にしようとしていると呼ばれます。 しかし残念ながら、それは一種 議論を台無しに 実際に何が起こっているの ここではフードの下に。 だから、僕は一種の迅速午前 インスタントの結果をオフにします。 そして、私は、[保存]をクリックしますするつもりです。 そして今、私は開くつもりです その私がその診断ツールバー [ネットワーク]タブの下の開口部を維持します。 それでは、これを実行しましょう​​。 me-- whoops--てみよう 少しこれを下にスクロールします。 そして、私はを探してみましょう "猫。」 

そして今、実際にnotice-- これは良い機会です 一瞬のために議論します。 私はそれを停止type--瞬間に注目してください。 それを停止します。 OK。 私は文字を入力瞬間に注目してください Cは、画面の一番下を見て。 底には何A- T- S. この画面の、私の[ネットワーク]タブ、 それぞれが起きているの示唆 時間は、私が文字を入力しますか？ 残念ながら、カエルが非常にあります 気が散る今日またはシャムロック または何でも彼はあります。 私が入力したたびに起こっていましたか？ そして、私は明確にしましょう バッファリングして、もう一度それを入力します。 おっとSo--。 私は文字を入力するたびに、C- A- T-- ので、新しい行は明らかに表示されて保持します。 これらの行のそれぞれが何を表しているん、 私たちが見て議論してきたものに基づいて、 これまで？ AUDIENCE：検索？ DAVID J.マラン：検索、または より一般的に、HTTPリクエスト 私のブラウザからサーバへ。 さて、なぜ私のブラウザは、HTTPを作っています 私は文字を入力するたびに要求しますか？ 

AUDIENCE：[聞こえません] DAVID J.マラン：ええ、それは与えています 私これらのオートコンプリート結果。 同様に、ここでこれらの操作を行います 検索結果から来るの？ まあ、すべての時間が私が入力し 手紙、Googleはより多くを送信します 以上とのより 私が入力している単語。 どうして？ 彼らが私に与えたいと思うので より良い、より良い、より良い提案、 何の単語のための提案のリスト、 私は実際に完全にしようとしています。 だから、これは文字通り、すべての言うことです あなたは、Googleに入力する文字 最終的に、送信されています バルクだけでなく、時には1 実現するために時 これらのオートコンプリート機能時 データは、ウェブ上で、当然です。 

それでは、どのような実際に見てみましょう 私はGoogle検索をクリックしたときに発生します。 そして、我々はこの自分自身を活用しましょう​​。 だから私は非常に今、スクロールダウンしている場合 ちょうど起こった最初の要求。 以下に注意してください。 これは、かなり長いに送信されましたURL-- https://www.google.com/search？ そして、その後のものの全体の束。 それでは、実際にこれを見てみましょう ブラウザのタブ自体インチ それでは、ここでツールバーを取り除くましょう。 ここでは、検索結果のページです。 そして、ここでの通知は、URLです。 さて、あなたはおそらく推測することができます 何は、部分的には、ここで起こっています。 定義、すべてのだから最初。 これは明らかに目的地であります フォームが送信されます。 だから私は、中に入力したとき、 言葉「猫」と入力し、Enterキーを押しすると、 どうやらGoogleが送ら このURLへの私のテキスト入力 私が強調表示されたこと そこに、検索を大幅に削減。 そのURLは、何で、判明 クエスチョンマークが後に起こります、 我々は、キーと値のペアを言い続けるよう それは、フォームにまたは何らかの形で入力されました から送信 サーバーへのブラウザ。 

だから、いつでもあなたが入力を入力します ウェブ上のフォームに 私たちがきたとして、それが送信されています GETで、議論して、 これらの仮想の1 封筒、内容 そのenvelope--のはい、維持 物理的に詰め取得 クラスの封筒に 今日、しかし、技術 それは実際にURLを入れています。 だから実際には、私は、この取捨選択しましょう​​。 どこでユーザーの入力を参照してくださいか？ どこが何かを見ています 私自身は、ここに入力したこと？ うん、 "猫。」そう 右？ だから、私はこれを蒸留しましょう シンプルなものに。 私はについてのすべてを削除するつもりです 私は理解していないこのURL、 そして、私は残すつもりです それthis-- /検索など？Q =猫。 私たちはここで、Qが表示されます 現時点でから来て、 それは最小のように感じています 私は提供される情報の量。 そして今、私は、Enterキーを押しするつもりです。 そして、それはまだ動作しますがわかります。 我々はまだ猫の全体の束を取り戻します。 だから、Googleは愛好家であります これより、これらの日。 それは2016年ではなく1999です。 だから、私の他のものがあります ブラウザがサーバーに送信されます。 しかし、これは最小限であります すべてのことが必要です。 

どうしたの？ さて、最初に私が先に行くと行ってみよう バックCloud9に、私は先に行ってみましょう 以前の私のタブを閉じます。 そして、私は私でこれをやります ちょっと所有しています。 私は先に行くつもりです 新しいファイルを作成します。 そして、私はgoogle.htmlとして保存するつもりです。 そして、私は非常にquickly--に行きますよ 私は、実際には、盗むつもりです ちょうど時間を節約するために、このテキストの一部。 私はここでこれをペーストするつもりです。 私は気にするつもりはありません 任意のスタイル設定この時間。 私たちは、これを呼び出すするつもりだ」私のGoogleの。」 そして、私は取り除くつもりです 体内のすべての。 そして、私は次のことをするつもりです。 私はズームインしてみましょう。 action--形成し、私は簡潔に述べたように 私のように簡潔にwhoops-- earlier-- の作用、前述しました フォームは、あなたがにデータを送信する場所です。 だからgoogle.com/search。 そして、この方法は、私が使用したいです 2つのいずれかであることができます。 我々は保つように、それは「取得」のいずれかとすることができます 議論する、またはそれをすることができます "ポスト。」 今のところ、基本 あなたが使用した場合の違いは、「取得」であり、 すべての情報 ユーザーがURLに送信されます提供します。 

それは、検索のようなもののために素晴らしいです エンジンや他のいくつかのアプリケーション、 しかし、どのような状況の場合と フォームに必要事項を記入したくありません 情報は終わるいます URL、ブラウザのアドレスバーのように？ どのような形のやりますyou-- AUDIENCE：[聞こえません] DAVID J.マラン：うん、何のような？ AUDIENCE：パスワード。 DAVID J.マラン：うん、だからログイン Facebookやいくつかのウェブサイトへのインチ それはからのユーザ入力です フォーム、テキストボックス、 しかし、あなたはおそらくそれをしたくありません ブラウザのURLに現れて。 どうして？ 私は多分いくつかありますが、意味します ネットワーク上のセキュリティへの影響、 しかし、より簡単に、好きな、どのような場合more-- あなたのルームメイト、あなたの重要な他、 あなたの子供、あなたの配偶者のルックス お使いのブラウザの履歴を介して？ パスワードの権利があります そこにあなたのブラウザの履歴インチ それは良いデザインのように感じることはありません。 またはさらに多くの技術的、 あなたがしようとしていると仮定 Flickrに写真をアップロードします またはFacebookやwherever-- それはあっても、ユーザ入力であります それはどのようにinteresting--もう少しです 私は、URLバーに画像を詰め込むのですか？ あなたはこの種の一種のことはできません。 あなたは、種類のことができます。 しかし、実際には、私が四苦八苦です それをやって想像します。 だから私は、別の方法を必要とします ウェブサイトに写真をアップロードし、 そして他の方法は、「ポスト」と呼ばれています。 しかし、今のところ、我々はちょうど約話しましょう 2の単純である「取得」。 それはちょうど、すべて置きます URLへのユーザー入力。 

だからここに私が作成してい形です。 私は入力をしたいです。 そして、あなたは何を知っていますか？ 私はここで推測を取るつもりです。 私は自分を思い出すつもりです 入力 "Q" "クエリ。」 そして、私は、これはの一つだと思います オリジナルデザイン、おそらく、1999年から。 そして、この入力のタイプ ちょうどになるだろう "テキスト"。 そして、私は別の入力を持っているつもりです それは、我々はすぐよ、名前を必要としません タイプがあり、参照してください "提出してください。」 そして、これはに起こっています 私に特別なボタンを与えます。 以上です。 

だから私は先に行くと、このファイルを保存してみましょう。 私は戻って私に行くつもりです ブラウザとgoogle.htmlに行きま​​す。 入る。 そしてそれは、スパースのようなものです 控えめに言って。 しかし、私は先に行ってみましょう 検索し、「猫。」 そして、私は現在よ気づきます このCloud9のURLで。 しかし、今は、私はこれをクリックし、 どこに私が終わるだろう願っていますか？ 

AUDIENCE：グーグル。 

DAVID J.マラン：グーグル。 それでは、Submitをクリックしてみましょう。 そして実際、私はGoogleの再実装しました。 右？ それは簡単です。 それは軽いです。 私が意味する、私のコードは明らかに比べて優れています 彼らは、混乱から私たちは前に見ました。 そして、あなたは何を知っていますか？ 私は少しこれを盛り上げるつもりです。 私はこの先には言及しませんでした。 見出し1のためのH1のようなタグは、ありますが、 ページの中で最も重要な見出し。 「私のGoogleは、 "私はこれを呼ぶことにします。 私はリロードしてみましょう。 これは、すでに少し良く見ています。 そして、実際に、あなたは何を知っていますか？ 私は嘘をついalready--ました。 私はこれをスタイルするつもりはないと述べました、 しかし、私は前のように、これをスタイルするつもりです。 そして、私の体は、になるだろう のは、テキストアラインセンターを言わせて。 これは、既に複数のGoogleのように見ています。 

私はしかし、改行を必要とします、 そのためにボタンを提出してください。 そして、それは、あなたが判明します 段落を使用することができ、 またはあなたはより文字通り言うことができ、 私にBRタグhere--改行を与えます。 私はこれをリロードする場合や、今ではそこに行きます。 それは少し醜いですので、私 複数の改行を行うことができ、 しかし、それでは、ここであまりにも貪欲取得しないようにしましょう​​。 だから今、それがために動作するかどうかを見てみましょう "犬"。 それだけでなく、「犬」のために働くようです。 そこでここでは魅力的なお持ち帰りは何ですか？ 選ぶ - はへの大きな飛躍ではありませんでした さらにいくつかのタグを導入し、 inputタグでformタグのように。 しかし、より根本的に 、我々がやっているすべてであります 我々の理解を活用されています HTTPと実際の フォームは、最終的に変えること ブラウザのURLに何、 そのため、したがって、我々はできます 機械的にサーバーに入力を提供 HTMLフォームを作成し、知ることにより サーバはHTTPを理解していること、 ちょうど私たちの体のように、のような、理解 私の手を振って、その同じプロトコル、 そして私たちは応答を取り戻します 我々は最終的には期待しています。 

それでは、いずれかの操作を実行してみましょう 最後になりましモバイルと、 そして、私は追加しますmake--ます スライドにこのコード。 だから、あなたをいじくり回すしたい場合 確かに、そこからそれを取ることができます。 しかし、私は行くつもりです 先にと一つのことを行います。 私は先に行くつもりだと 私のインデックス当ページを開きます 以前のように私のハローページ、どの 、この擬似的なラテン語のテキストをたくさん持っています または無意味なラテン語のテキスト、およびhas-- それは、このフォントのサイズで、このようになります。 しかし、私は先に行くと、これを実行しましょう​​。 私はCloud9に行くつもりです。 そして、あなたは、この手順を行う必要はありません。 私はちょうどそれを自分自身やります。 私は、[共有]をクリックしますするつもりです。 そして、これは機能です ちょうどCloud9の、それによって 私は私の環境公開することができます。 

そして、ちょうどのために デモでは、私はこれをやらせます。 私は自分のアプリケーションを公開するつもりです。 午前、それは私を警告しています注意してください 私は確信して私は、これをやってみたいです これは皆を作るために起こっているので、 世界では、彼らが今ここにいるかどうか または上で、後でビデオを見て 私が見るものを見ることができるインターネット。 しかし、それはOKです。 私は言うつもりです」完了します。」 そして、私がやった場合、私はあなたを奨励しましょう これは私が最初にそれをテストしてみましょうcorrectly--。 あなたがmind--ない場合は、先に行きます お使いのコンピュータのブラウザで、 次のURLにアクセスしてください、そして、できれば あなたは私のラテン語のテキストが表示されます。 かつ明確にする、それはです 私のラップトップ上にない実行されています。 それは雲の中にあります。 これは文字通り、Cloud9のだが、 私は私のワークスペースを公開してきました そのため、インターネット上の誰も 私のラテン語のホームページにアクセスすることができます。 

上の同じURLにアクセスしてください お使いの携帯電話、あなたができれば。 それは、しかし、あなたをあなたの費用がかかります場合 ちょうど肩の上に見ることができます。 AUDIENCE：[聞こえません] DAVID J.マラン：私は申し訳ありませんか？ AUDIENCE：[聞こえません] DAVID J.マラン：ちょうどラテン語。 それで全部です。 しかし、それはあなたが見るべきものです。 

AUDIENCE：うん。 DAVID J.マラン：うん。 うん。 OK。 だから私はあなたを保持することができます ちょっと電話？ だから、うまくいけば、あなたがアクセスしている場合 それは、それはほとんど読めなくなっているはずです。 それはだ、私は意味still--です なぜならラテン語の読めません。 しかし、それも読めないのです 他のどのような理由のために？ 同様に、あなたはこのことについて何displeases？ 観客：それは小さいです。 DAVID J.マラン：それは超小型、超です。 だから、どのように我々はこれを修正することができますか？ これは、超小型、超です ビクトリアの電話で そして、あなたが取ってきた場合 おそらくそれまでの自分、 お使いの携帯電話上の小さなだけでなく、あなたの場合を除き、 アクセシビリティの設定を有効にしています。 あれは何でしょう？ あなただけのピンチでした 実行可​​能であるズーム、 しかし、その後、あなただけを参照してください。 一度にいくつかの単語。 だから、ちょっと待って。 私はこの問題を解決する方法を知っています。 右？ 私はCSSを使用することができ、私は変更することができます 12ポイントから24ポイントにフォントサイズ。 しかし、それの副作用、 もちろん、今になるだろう、 デスクトップやラップトップ上で、 今テキストは二倍の大きさです。 そしてそれは一種のいいだろう デバイスを区別するために、 それはそこ判明します それを行うの方法があります。 いくつかがあります 別の方法は、実際には、 CSSと手の込んだ機能を使用することにより 我々は非常に詳細に説明しませんことを、 あなたは、本質的に問い合わせることができます ブラウザと言って、 あなたの画面はこれよりも小さい場合 多くのピクセルは、このフォントサイズを使用します。 あなたの画面はこれよりも大きい場合 多くのピクセルは、この他のフォントサイズを使用します。 

あなたも、手の込んだ、まだすることができます。 あなたは今までに訪れた場合 デスクトップ上のWebページ、 多分にオフ大きなメニューがあります 側、その後、すべてのコンテンツ その側にありますmenu-- それは、一般的なパラダイムのようなものです。 左、コンテンツのメニュー 右、またはその逆に。 ときに、本当にモバイル上では動作しません。 画面が広いだけでこれだけ多くのピクセルです。 だから、モバイルでより一般的です、 あなたのメニューが急になります 崩壊し、あなたがする必要はあり それを確認するには、ボタンをクリックし、 またはウェブサイトは、メニューを配置します その上、それ以下のコンテンツを置きます。 そして、あなたはこれらを実装することができます 複数の方法で物事、あまりにも。 あなたは、あなたのプログラマーを求めることができ、 ちょっと、チーム、任意の時間 あなたは、AndroidからのHTTP要求を参照してください。 デバイスは、Microsoftのデバイスは、Google デバイス、Appleデバイスは、これを使用します フォントサイズは​​、このメニューレイアウトを使用して あるいは、このデフォルトより大きなレイアウトを使用しています。 

今、何を使用して、 基本的な技術今日 エンジニアは使用することができます それはだかどうかを知るために iPhone、Android携帯電話、ノートパソコン、 同社のサーバーを訪問デスクトップ？ ここで彼らは、その情報を入手できますか？ 

AUDIENCE：ヘッダ？ 

DAVID J.マラン：うん、HTTPヘッダー。 から来るので、すべてのHTTPリクエスト そのサーバーへの顧客 その仮想の内側に、含まれます 封筒、全体の束 HTTPヘッダの、のものです ブラウザとオペレーティングシステム あなたに気にしても、場合 詳細のレベル。 今、それは不可解に見える文字列だが、 ただ意志のソフトウェアが存在します それを簡素化し、あなただけ求めることができます PHPやJava、C ++ code--プログラミングで、 whatever-- this--何であるか電話 このユーザーは、どのデバイスを使っているのですか？ そして、あなたはそれらこれを示す、と言うことができます それは携帯電話の場合は、ウェブサイトのバージョン。 彼らにこのバージョンを表示します ウェブサイトには、ラップトップまたはデスクトップだ場合。 しかし、あなたも必要ありません。 サーバー側の複雑さ。 あなたは物事の最も単純な操作を行うことができます。 

私はこれを行うつもりです。 私はに先に行くつもりです 私Cloud9環境、 そして私は、タグを追加するつもりです あなたが前にグーグルで見たもの。 これは、メタタグと呼ばれています。 そして、私はそのように、このいずれかを覚えていることはありません 私はここでそれを転写するつもりです。 メタ名= "ビューポート"とし、 コンテンツ= "幅=デバイス幅、intital = 1 "スケールとそれはそれです。 

だから、それは同様かもしれません 魔法の呪文のような。 これは、すべてのことが明らかではないのですが、これは持っています ビューポートとは何か、 ビューポートは、本体だけです ウェブページ、矩形領域 ページの大部分を定義します。 そして、これはちょうど語っています ブラウザ、あなたは何を知っていますか？ このページの幅を作ります デバイスの幅に効果的に等しくなります。 言い換えれば、それを負いません。 あなたは無限の空間のようなものを持っています。 あなたが唯一の限りがあると デバイス自体としての空間が大きいです。 そして今、私はこれをリロードすれば 私のブラウザでは、私は何の変化も見られません。 しかし、私はこのcorrectly--を行った場合と あなたのすべてのなら、私は私のfingers--を横断しましょう あなたの携帯電話をリロードし、あなたを行います 説得力の変化を参照してください？ うん、that--です 

AUDIENCE：[聞こえません] DAVID J.マラン：はい。 OK。 だから、間違いなく読みやすくなりましたか？ まだ公平にするために、小さなではなく、 管理不能であるほど小さな。 そして、私は確かにこれをオーバーライドすることができます CSSを使用したか、サーバー側ではさらに、 しかし、ますますあなたがしているもの より多くの機能をされて見て に追加されます クライアント側environments-- JavaScriptを、我々は説明しますように 明日、CSS、およびHTML--ので、 これらのクエリのすべてのこと クライアント上で行うことができます 気にするように、 サーバーはるかに少ないとされません 以下のために、追いつくために持っています 例えば、一定の猛攻撃 新しいオペレーティング・システムの バージョン、新しいブラウザのバージョン。 あなただけのブラウザをさせることができます デバイスを尋ねる、あなたはどのように大きなされています、 そしてその後、やや論理作ります それに基づいて決定。 しかし、我々はより多くの機会が表示されます 論理的な意思決定のための 文脈で明日 プログラミング言語。 

ですから、ご質問、その後、 Web開発に？ 今日は、Webプログラミング、あたりではありません 私たちがやったSEが、以来、最もすべて あなたがする場合は、非常に審美的でした。 何の意思決定ではありません 私たちが書いたコードを、 HTMLはマークアップである理由となるようです 言語ではなく、プログラミング言語。 しかし、明日は取りますよ 簡単に見て、最終的には、 あるJavaScriptの、で 実際のプログラミング 私たちはもう少し行うことができます言語。 

質問は？ まあ、私は2を提案してみましょう 宿題のためのオプションの機会。 これらCloud9 is-- One アカウントは有効期限はありません。 あなたが使用して歓迎しています 彼らはいじくり回すします。 これは、サービスのないレベルです。 作成時にあれば、それを実現します ワークスペースは、あなたはそれが公開され、 それは上のその人を意味しています インターネットはあなたが入力しているかを見ることができます。 だから多分ちょうど検討 自分を恥ずかしいありません あなたはあなたの最初のウェブを入れている場合 そこにページ公に誤って、 誰のは、するつもりはありません とにかく見て知っています。 

そして、私が投げるせtwo-- このURLアップだけでなく、 あなたは今日aで来た場合は特に 他のものより少し少ない快適、 すべてのこのようなものが何を意味するかわかりません。 、このビデオの多くを実現 これは眠りに落ちるための良い方法でもあります またしばらく笑います このようにすること、また持っています societally興味深いたくさんの およびセキュリティ関連の議論 そこにジョン・オリバーから、 コメディアンはいえ。 

しかし、それ以上の質問がない場合は、 それは、受信に私たちをもたらします。 なぜ私は音楽をオンにしないでください。 飲み物があるはずです 外やスナック。 私はのために混ざって幸せ 人々が望む限り、 一対一の質問より答えます。 しかし、そうでなければ、どういたしまして 任意の時点で離陸するために、 そして我々は再びお会いしましょう もう少しのための明日の朝。 すべての権利、ありがとう。