Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

非エンジニア向けHTML勉強会その1

8,771 views

Published on

非エンジニア向けHTML勉強会その1

Published in: Technology
  • Be the first to comment

非エンジニア向けHTML勉強会その1

  1. 1. 非エンジニア向け HTML勉強会 株式会社ベーシック 社内勉強会 そのいち
  2. 2. ● @kkkyouhei ● 広告配信サーバとかゲームアプリの裏の人 ● RailsとかCakePHPをメインに触ります たまにiOSとかAndroid 自己紹介
  3. 3. 本日のアジェンダ 1. インターネットの仕組みを知る Googleが表示されるまで何が起こってる? 2. プログラミング言語について知る PHPとかRubyとかJavaScriptって何が違うの? 3. ウェブサイトを公開するために必要なもの とりあえずブログでも公開してみる?
  4. 4. 1. Googleが表示されるまで何が起こってる?
  5. 5. Googleが表示されるまで何が起こってる?
  6. 6. Googleが表示されるまで何が起こってる? これもHTML
  7. 7. Googleが表示されるまで何が起こってる?
  8. 8. Googleが表示されるまで何が起こってる? ブラウザにgoogle.co.jpと入力して 表示されているHTMLは天からの授かりものではない
  9. 9. Googleが表示されるまで何が起こってる? URLを入力すると何が起こっているのか
  10. 10. Googleが表示されるまで何が起こってる? ブラウザ google.co.jpってどこに 見に行けばいい? ルートDNSサーバ プロバイダの DNSサーバ google.co.jp DNSサーバ co DNSサーバ jp DNSサーバ ne
  11. 11. Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp google.co.jpは知らないけどこ の人なら知ってるかもよ ne DNSサーバ
  12. 12. Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp jpなら知ってるよ ne DNSサーバ
  13. 13. Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp coなら知ってるよ ne DNSサーバ
  14. 14. Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp googleはここ見に 行けばいいよ ne DNSサーバ
  15. 15. Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp ne DNSサーバ HTMLファイルください!
  16. 16. Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp ne DNSサーバ
  17. 17. Googleが表示されるまで何が起こってる?
  18. 18. 2. PHPとかRubyとかJavaScriptって何が違うの?
  19. 19. PHPとかRubyとかJavaScriptって何が違うの? 動いている場所が違います!!!!1
  20. 20. PHPとかRubyとかJavaScriptって何が違うの? PHPとかRubyはサーバ JavaScriptとかjQueryはブラウザで動作
  21. 21. PHPとかRubyとかJavaScriptって何が違うの? まずはPHP Rubyから
  22. 22. PHPとかRubyとかJavaScriptって何が違うの? 時をさかのぼること199X年
  23. 23. PHPとかRubyとかJavaScriptって何が違うの? 時をさかのぼること199X年
  24. 24. PHPとかRubyとかJavaScriptって何が違うの?
  25. 25. PHPとかRubyとかJavaScriptって何が違うの? これらの遺産はどれも静的なサイトたち
  26. 26. PHPとかRubyとかJavaScriptって何が違うの? PHPやRubyが生まれてどのようにサイトが変わったか
  27. 27. PHPとかRubyとかJavaScriptって何が違うの?
  28. 28. PHPとかRubyとかJavaScriptって何が違うの? どれも動的なサイトばかり
  29. 29. PHPとかRubyとかJavaScriptって何が違うの? 静的と動的の違い
  30. 30. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ 静的 example.co.jp <html> <head> </head> <body> <p>Hello World</p> </body> </html> top.html top.htmlください top.htmlだよ Hello World
  31. 31. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ 静的 example.co.jp <html> <head> </head> <body> <p>Hello World</p> </body> </html> top.html top.htmlください top.htmlだよ Hello World
  32. 32. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ 静的 example.co.jp <html> <head> </head> <body> <p>Hello World</p> </body> </html> top.html top.htmlください top.htmlだよ Hello World
  33. 33. PHPとかRubyとかJavaScriptって何が違うの? アクセスして来た誰もが同じHTMLを閲覧
  34. 34. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ 動的 example.co.jp <?php $name = DBから名前を取得 ?> <html> <head> </head> <body> <p> Hello <?php echo $name ?> </p> </body> </html> top.html top.htmlください top.htmlだよ Hello kkyouhei DataBase HTMLではなくPHPのタグなの でPHPが処理する部分 kkyouhei
  35. 35. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ 動的 example.co.jp <?php $name = DBから名前を取得 ?> <html> <head> </head> <body> <p> Hello <?php echo $name ?> </p> </body> </html> top.html top.htmlください top.htmlだよ Hello kkyouhei HTMLではなくPHPのタグなの でPHPが処理する部分 DataBase kkyouhei
  36. 36. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ 動的 example.co.jp <?php $name = DBから名前を取得 ?> <html> <head> </head> <body> <p> Hello <?php echo $name ?> </p> </body> </html> top.html top.htmlください top.htmlだよ Hello kkyouhei DataBase kkyouhei アクセスしたユーザに応じて DBから名前を取得
  37. 37. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ 動的 example.co.jp <?php $name = DBから名前を取得 ?> <html> <head> </head> <body> <p> Hello <?php echo $name ?> </p> </body> </html> top.html top.htmlください top.htmlだよ Hello kkyouhei DataBase kkyouhei $nameに入っている 文字列を出力
  38. 38. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ 動的 example.co.jp <html> <head> </head> <body> <p> Hello kkyouhei </p> </body> </html> top.html top.htmlください top.htmlだよ Hello kkyouhei DataBase kkyouhei 最終的にブラウザに 返されるHTML
  39. 39. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ 動的 example.co.jp <html> <head> </head> <body> <p> Hello kkyouhei </p> </body> </html> top.html top.htmlください top.htmlだよ Hello kkyouhei DataBase kkyouhei
  40. 40. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ 動的 example.co.jp <html> <head> </head> <body> <p> Hello kkyouhei </p> </body> </html> top.html top.htmlください top.htmlだよ Hello kkyouhei DataBase kkyouhei PHPやRubyはサーバサイドで 動作する言語であり、 アクセスして来たユーザに応じて異 なるHTMLを返す事が出来る
  41. 41. PHPとかRubyとかJavaScriptって何が違うの? JavaScript
  42. 42. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ example.co.jp <html> <head> <script> alert(“こんにちわ!”); </script> </head> <body> <p>Hello World</p> </body> </html> top.html top.htmlください top.htmlだよ Hello World こんにちわ! ここではまだ何もしない
  43. 43. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ example.co.jp <html> <head> <script> alert(“こんにちわ!”); </script> </head> <body> <p>Hello World</p> </body> </html> top.html top.htmlください top.htmlだよ Hello World こんにちわ! ここではまだ何もしない
  44. 44. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ example.co.jp <html> <head> <script> alert(“こんにちわ!”); </script> </head> <body> <p>Hello World</p> </body> </html> top.html top.htmlください top.htmlだよ Hello World こんにちわ! ここではまだ何もしない
  45. 45. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ example.co.jp <html> <head> <script> alert(“こんにちわ!”); </script> </head> <body> <p>Hello World</p> </body> </html> top.html top.htmlください top.htmlだよ Hello World こんにちわ! ここではまだ何もしない
  46. 46. PHPとかRubyとかJavaScriptって何が違うの?
  47. 47. PHPとかRubyとかJavaScriptって何が違うの? ブラウザ上で動作するのでリロードすること なく値の整合性がチェックできる そのためユーザビリティの向上が図れる
  48. 48. PHPとかRubyとかJavaScriptって何が違うの? ただしブラウザ上で動作するということは ウェブサイトを閲覧している人からも JavaScriptのコードを変更できるので過信 は禁物
  49. 49. 3. Webサイトを公開するために必要なもの
  50. 50. Webサイトを公開するために必要なもの ブログを作りたい人へ
  51. 51. Webサイトを公開するために必要なもの 悪いことは言わないHomeUpやライブドアブログを 利用したほうがいいですよ・・・
  52. 52. サーバを用意したりドメイン取ったり 結構めんどくさい Webサイトを公開するために必要なもの
  53. 53. ちょびっとカスタマイズするときはHTMLやCSSの 知識が必要なので勉強しましょう Webサイトを公開するために必要なもの
  54. 54. Webサイトを公開するために必要なもの それでも唯一無二のブログを作りたい人へ
  55. 55. 1. レンタルサーバ ペパボとかが良さげ 2. 独自ドメイン レンタルサーバによって無料だったりする 3. WordPress 1から全て作るのは時間がいくらあっても足りない 人生は短いので便利なものは使おう 4. やる気と根気 やってると飽きるのでとにかく諦めない Webサイトを公開するために必要なもの
  56. 56. Webサイトを公開するために必要なもの 世界で一つしかない自分のウェブサイトを作りたい人へ
  57. 57. Webサイトを公開するために必要なもの 正気ですか!!!???
  58. 58. 1. レンタルサーバ レンタルサーバによって使えないフレームワーク(3)が あったりするので注意 2. 独自ドメイン レンタルサーバによって無料だったりする 3. CakePHPやRails 静的なポートフォリオサイトだったら HTML CSS だけでもOK ユーザ登録とか情報を貯めておく必要のあるサービスであれば 必須 4. 超やる気と超根気 やってると飽きるのでとにかく諦めない Webサイトを公開するために必要なもの
  59. 59. やる気があれば誰でもできます さあ始めましょう
  60. 60. ご静聴ありがとうございました

×