Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
EN
Uploaded by
Karino Kyohei
9,199 views
非エンジニア向けHTML勉強会その1
非エンジニア向けHTML勉強会その1
Technology
◦
Read more
10
Save
Share
Embed
Embed presentation
Download
Downloaded 30 times
1
/ 60
2
/ 60
3
/ 60
4
/ 60
5
/ 60
6
/ 60
7
/ 60
8
/ 60
9
/ 60
10
/ 60
11
/ 60
12
/ 60
13
/ 60
14
/ 60
15
/ 60
16
/ 60
17
/ 60
18
/ 60
19
/ 60
20
/ 60
21
/ 60
22
/ 60
23
/ 60
24
/ 60
25
/ 60
26
/ 60
27
/ 60
28
/ 60
29
/ 60
30
/ 60
31
/ 60
32
/ 60
33
/ 60
34
/ 60
35
/ 60
36
/ 60
37
/ 60
38
/ 60
39
/ 60
40
/ 60
41
/ 60
42
/ 60
43
/ 60
44
/ 60
45
/ 60
46
/ 60
47
/ 60
48
/ 60
49
/ 60
50
/ 60
51
/ 60
52
/ 60
53
/ 60
54
/ 60
55
/ 60
56
/ 60
57
/ 60
58
/ 60
59
/ 60
60
/ 60
More Related Content
PPTX
スマホフロントエンド最速化手法
by
zaru sakuraba
PDF
Yeomanではじめる爆速webアプリ開発
by
Masakazu Muraoka
PDF
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
by
Fumio SAGAWA
PDF
今から始めよう!WordPressで作る女子ウケ★スマホサイト
by
rie05
PPT
BuddyPressで街のポータルサイトを作ろう
by
松田 千尋
PPTX
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
by
Kitani Kimiya
PDF
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
by
Yuji Nojima
KEY
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
by
Yuji Nojima
スマホフロントエンド最速化手法
by
zaru sakuraba
Yeomanではじめる爆速webアプリ開発
by
Masakazu Muraoka
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
by
Fumio SAGAWA
今から始めよう!WordPressで作る女子ウケ★スマホサイト
by
rie05
BuddyPressで街のポータルサイトを作ろう
by
松田 千尋
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
by
Kitani Kimiya
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
by
Yuji Nojima
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
by
Yuji Nojima
What's hot
PDF
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
by
climbFrog
KEY
WordPressプラグイン Jetpack って何だ?!
by
Yuji Nojima
ODP
HTML5 のお話
by
tomo_masakura
PDF
プロトタイピングでしあわせになろうよ
by
Yoshiki Kojima
PDF
Word pressはじめの一歩 テーマ作成ハンズオン
by
Hidetaka Okamoto
PDF
WordBench京都版 _sハンズオン
by
Hidetaka Okamoto
PDF
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
by
Yoshinori Kobayashi
PDF
_s + bootstrapで始めるWordPressテーマ開発入門
by
Hidetaka Okamoto
ODP
HTML5 アプリ開発
by
tomo_masakura
PDF
Rails templateで開発の初速を上げよう
by
豊明 尾古
PDF
Word camposaka imaigo_slideshare
by
Go Imai
PDF
SPAに必要なJavaScriptFrameWork
by
Mizuho Sakamaki
PDF
BootstrapとRailsで、 高速にWebサイトを作ってみた
by
BeMarble
KEY
WordPress プラグイン Infinite Scroll を試してみた
by
Yuji Nojima
PDF
オープンソースで始めるオフラインアプリケーション開発入門
by
Fumio SAGAWA
PPTX
要確認!貴方のWord pressは損をしている!? 〜読み込み速度の重要性について〜
by
ssuser224b06
PDF
我が家のフロントエンド開発事情
by
Naoki Yamada
KEY
Android webブラウザのhtml5対応状況
by
Masakazu Muraoka
PDF
WordCamp Kansai GPL study
by
YAT blog
PDF
BACKBONE.JSによるWebアプリケーション開発について
by
Toshio Ehara
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
by
climbFrog
WordPressプラグイン Jetpack って何だ?!
by
Yuji Nojima
HTML5 のお話
by
tomo_masakura
プロトタイピングでしあわせになろうよ
by
Yoshiki Kojima
Word pressはじめの一歩 テーマ作成ハンズオン
by
Hidetaka Okamoto
WordBench京都版 _sハンズオン
by
Hidetaka Okamoto
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
by
Yoshinori Kobayashi
_s + bootstrapで始めるWordPressテーマ開発入門
by
Hidetaka Okamoto
HTML5 アプリ開発
by
tomo_masakura
Rails templateで開発の初速を上げよう
by
豊明 尾古
Word camposaka imaigo_slideshare
by
Go Imai
SPAに必要なJavaScriptFrameWork
by
Mizuho Sakamaki
BootstrapとRailsで、 高速にWebサイトを作ってみた
by
BeMarble
WordPress プラグイン Infinite Scroll を試してみた
by
Yuji Nojima
オープンソースで始めるオフラインアプリケーション開発入門
by
Fumio SAGAWA
要確認!貴方のWord pressは損をしている!? 〜読み込み速度の重要性について〜
by
ssuser224b06
我が家のフロントエンド開発事情
by
Naoki Yamada
Android webブラウザのhtml5対応状況
by
Masakazu Muraoka
WordCamp Kansai GPL study
by
YAT blog
BACKBONE.JSによるWebアプリケーション開発について
by
Toshio Ehara
Viewers also liked
PPTX
WEBページを表示するまで
by
Shoichi Kakizaki
PPTX
少し未来のコードレビュー
by
zaru sakuraba
PDF
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
by
Tomohiro Yamasaki
PPTX
初心者のためのキャラクターの描き方のコツ 入門編
by
shinta rock
PPTX
正規表現勉強会
by
zaru sakuraba
PDF
アプリデザインのお勉強 UI/UXのお話
by
shinta rock
PPTX
ワクワク電子工作
by
Shoichi Kakizaki
PDF
今さらながらRSpecに入門してみた
by
zaru sakuraba
PPTX
エンジニアでもできる⁉︎それっぽいデザイン
by
shinta rock
PDF
ほんわかSwift勉強資料
by
kouhei kawamata
PDF
0528 kanntigai ui_ux
by
Saori Matsui
PDF
Web勉強会(HTML+CSS+JS入門の入門)
by
Noriaki UCHIYAMA
PPT
最速HTML勉強会
by
Chisa Youzaka
PDF
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
by
Tsutomu Sogitani
PDF
HTML仕様書を読んでみよう
by
Saeki Tominaga
PDF
しょぼいプレゼンをパワポのせいにするな! by @jessedee
by
「MakeLeaps」請求書の作成、管理、郵送
PDF
見やすいプレゼン資料の作り方 - リニューアル増量版
by
MOCKS | Yuta Morishige
PDF
どうしてプレゼン研究会を始めたのか
by
Masahito Zembutsu
PDF
情報編集 (web) 第2回:HTML入門
by
Atsushi Tadokoro
PDF
メディア芸術基礎 Ⅰ 第2回 HTML入門
by
Atsushi Tadokoro
WEBページを表示するまで
by
Shoichi Kakizaki
少し未来のコードレビュー
by
zaru sakuraba
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
by
Tomohiro Yamasaki
初心者のためのキャラクターの描き方のコツ 入門編
by
shinta rock
正規表現勉強会
by
zaru sakuraba
アプリデザインのお勉強 UI/UXのお話
by
shinta rock
ワクワク電子工作
by
Shoichi Kakizaki
今さらながらRSpecに入門してみた
by
zaru sakuraba
エンジニアでもできる⁉︎それっぽいデザイン
by
shinta rock
ほんわかSwift勉強資料
by
kouhei kawamata
0528 kanntigai ui_ux
by
Saori Matsui
Web勉強会(HTML+CSS+JS入門の入門)
by
Noriaki UCHIYAMA
最速HTML勉強会
by
Chisa Youzaka
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
by
Tsutomu Sogitani
HTML仕様書を読んでみよう
by
Saeki Tominaga
しょぼいプレゼンをパワポのせいにするな! by @jessedee
by
「MakeLeaps」請求書の作成、管理、郵送
見やすいプレゼン資料の作り方 - リニューアル増量版
by
MOCKS | Yuta Morishige
どうしてプレゼン研究会を始めたのか
by
Masahito Zembutsu
情報編集 (web) 第2回:HTML入門
by
Atsushi Tadokoro
メディア芸術基礎 Ⅰ 第2回 HTML入門
by
Atsushi Tadokoro
非エンジニア向けHTML勉強会その1
1.
非エンジニア向け HTML勉強会 株式会社ベーシック 社内勉強会 そのいち
2.
● @kkkyouhei ● 広告配信サーバとかゲームアプリの裏の人 ●
RailsとかCakePHPをメインに触ります たまにiOSとかAndroid 自己紹介
3.
本日のアジェンダ 1. インターネットの仕組みを知る Googleが表示されるまで何が起こってる? 2. プログラミング言語について知る PHPとかRubyとかJavaScriptって何が違うの? 3.
ウェブサイトを公開するために必要なもの とりあえずブログでも公開してみる?
4.
1. Googleが表示されるまで何が起こってる?
5.
Googleが表示されるまで何が起こってる?
6.
Googleが表示されるまで何が起こってる? これもHTML
7.
Googleが表示されるまで何が起こってる?
8.
Googleが表示されるまで何が起こってる? ブラウザにgoogle.co.jpと入力して 表示されているHTMLは天からの授かりものではない
9.
Googleが表示されるまで何が起こってる? URLを入力すると何が起こっているのか
10.
Googleが表示されるまで何が起こってる? ブラウザ google.co.jpってどこに 見に行けばいい? ルートDNSサーバ プロバイダの DNSサーバ google.co.jp DNSサーバ co DNSサーバ jp DNSサーバ ne
11.
Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp google.co.jpは知らないけどこ の人なら知ってるかもよ ne DNSサーバ
12.
Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp jpなら知ってるよ ne DNSサーバ
13.
Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp coなら知ってるよ ne DNSサーバ
14.
Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp googleはここ見に 行けばいいよ ne DNSサーバ
15.
Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp ne DNSサーバ HTMLファイルください!
16.
Googleが表示されるまで何が起こってる? ブラウザ ルートDNSサーバ プロバイダの DNSサーバ DNSサーバ co DNSサーバ jp google.co.jp ne DNSサーバ
17.
Googleが表示されるまで何が起こってる?
18.
2. PHPとかRubyとかJavaScriptって何が違うの?
19.
PHPとかRubyとかJavaScriptって何が違うの? 動いている場所が違います!!!!1
20.
PHPとかRubyとかJavaScriptって何が違うの? PHPとかRubyはサーバ JavaScriptとかjQueryはブラウザで動作
21.
PHPとかRubyとかJavaScriptって何が違うの? まずはPHP Rubyから
22.
PHPとかRubyとかJavaScriptって何が違うの? 時をさかのぼること199X年
23.
PHPとかRubyとかJavaScriptって何が違うの? 時をさかのぼること199X年
24.
PHPとかRubyとかJavaScriptって何が違うの?
25.
PHPとかRubyとかJavaScriptって何が違うの? これらの遺産はどれも静的なサイトたち
26.
PHPとかRubyとかJavaScriptって何が違うの? PHPやRubyが生まれてどのようにサイトが変わったか
27.
PHPとかRubyとかJavaScriptって何が違うの?
28.
PHPとかRubyとかJavaScriptって何が違うの? どれも動的なサイトばかり
29.
PHPとかRubyとかJavaScriptって何が違うの? 静的と動的の違い
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.
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.
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.
PHPとかRubyとかJavaScriptって何が違うの? アクセスして来た誰もが同じHTMLを閲覧
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.
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.
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.
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.
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.
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.
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.
PHPとかRubyとかJavaScriptって何が違うの? JavaScript
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.
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.
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.
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.
PHPとかRubyとかJavaScriptって何が違うの?
47.
PHPとかRubyとかJavaScriptって何が違うの? ブラウザ上で動作するのでリロードすること なく値の整合性がチェックできる そのためユーザビリティの向上が図れる
48.
PHPとかRubyとかJavaScriptって何が違うの? ただしブラウザ上で動作するということは ウェブサイトを閲覧している人からも JavaScriptのコードを変更できるので過信 は禁物
49.
3. Webサイトを公開するために必要なもの
50.
Webサイトを公開するために必要なもの ブログを作りたい人へ
51.
Webサイトを公開するために必要なもの 悪いことは言わないHomeUpやライブドアブログを 利用したほうがいいですよ・・・
52.
サーバを用意したりドメイン取ったり 結構めんどくさい Webサイトを公開するために必要なもの
53.
ちょびっとカスタマイズするときはHTMLやCSSの 知識が必要なので勉強しましょう Webサイトを公開するために必要なもの
54.
Webサイトを公開するために必要なもの それでも唯一無二のブログを作りたい人へ
55.
1. レンタルサーバ ペパボとかが良さげ 2. 独自ドメイン レンタルサーバによって無料だったりする 3.
WordPress 1から全て作るのは時間がいくらあっても足りない 人生は短いので便利なものは使おう 4. やる気と根気 やってると飽きるのでとにかく諦めない Webサイトを公開するために必要なもの
56.
Webサイトを公開するために必要なもの 世界で一つしかない自分のウェブサイトを作りたい人へ
57.
Webサイトを公開するために必要なもの 正気ですか!!!???
58.
1. レンタルサーバ レンタルサーバによって使えないフレームワーク(3)が あったりするので注意 2. 独自ドメイン レンタルサーバによって無料だったりする 3.
CakePHPやRails 静的なポートフォリオサイトだったら HTML CSS だけでもOK ユーザ登録とか情報を貯めておく必要のあるサービスであれば 必須 4. 超やる気と超根気 やってると飽きるのでとにかく諦めない Webサイトを公開するために必要なもの
59.
やる気があれば誰でもできます さあ始めましょう
60.
ご静聴ありがとうございました
Download