Web development fundamental
•
2 recomendaciones•1,520 vistas
改訂版↓ http://www.slideshare.net/taukuma/web-development-fundamentalv2-24318761
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Web development fundamental
Similar a Web development fundamental (20)
Último
Último (7)
Web development fundamental
- 1. WEBDevelopment Fundamental Takuya Kumagai May 27-28,2013 ゼロから始めるWeb開発 1
- 2. アジェンダ • HTML • CSS • JavaScript • jQuery • Bootstrap • PHP • Smarty • Ajax 1日目 2日目 2
- 5. • HTMLの役割 Webページを作るための言語 (文章の構造や意味) • CSSの役割 Webページを作るための言語 (見た目) • JavaScriptの役割 ブラウザで表示しているものを動的にイジくるための言語 • PHPの役割 動的にWebページを表示するための言語(サーバー上で動く) • Ajaxの役割 動的にページの一部を変更する枠組み 全体概要 5
- 6. 1日目の目標 • HTML、CSS、JavaScriptの基礎を習得 • Twitter Bootstrap、jQueryを使って、今風のカッコイイWeb ページを作る 6
- 7. 2日目の目標 • PHPの基礎をなんとなく把握 • Smartyの構造を理解 • AjaxでJavaScriptとPHPの非同期通信をできるように • データベースに格納されているデータをBootstrapっぽく表 示できる 7
- 8. Hyper Text Markup Language 8 HTML
- 9. HTMLとは？ • HyperText Markup Languageの略 • Webページを作るための言語 (文章の構造や意味) • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 9
- 10. HTML基礎 html タグと呼ばれる、コマンドを使う。 タグはDOM (Document Object Model)要素とも呼ばれる。 基本的にページの本文はbody.../bodyの中に書く。 10
- 11. 本文bodyに使えるタグ • Headingタグ • Paragraph(文章)タグ • リンク • フォーム • テーブル • ブロック要素 11
- 16. テーブル要素( table, thead, tbody, tr, th, td ) 画面イメージhtml 16
- 17. ブロック要素( div, span ) 画面イメージ html 17
- 19. CSSとは？ • Cascading Style Sheetsの略 • Webページを作るための言語 (見た目) • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 19
- 20. CSSを書く場所 • DOM要素のスタイル属性に直書き • head/headの中のスタイル要素内 • 外部ファイル 外部CSSファイル 20
- 24. CSSの書き方 セレクター プロパティ 値 セレクターで指定したDOM要素のプロパティに 任意のスタイル(値)を設定する mycss.css (外部CSSファイル) コロン（：） セミコロン（ ; ） 24
- 25. セレクター • すべての要素 • 同一の要素 • クラス • id • ちょっと複雑なセレクター 25
- 31. プロパティ • margin • padding • display • position • width • height • background • background-color • border • outline • float • color • font-family • font-size • font-weight • content • text-align • overflow 31
- 32. JavaScript 32
- 33. JavaScriptとは？ • ブラウザ上で色々な動作をさせることができる言語 • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 33
- 38. 演算子 画面イメージ myjs.js(外部ファイル) 文字列の結合は + a = a+1; と同じ意味 c = c+3; と同じ意味 38
- 42. 42
- 43. jQueryとは？ • JavaScriptを便利にしてくれるライブラリ • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 43
- 49. 覚えておくと便利なAPI • addClass() • removeClass() • animate() • attr() • css() • width() • height() • eq() • bind() • click() • toggle() • dblclick() • hover() • hide() • show() • append() • remove() • empty() • text() • val() • html() • parent() • parents() • children() • keydown() • keypress() • keyup() • length 49
- 51. Bootstrapとは？ • Twitterが開発したCSSフレームワーク • 今時のカッコイイサイトを簡単に作れてしまう • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 51
- 54. フォーム：select, check box, radio 画面イメージ html html html 54
- 58. Bootstrapのまとめ • アイディアを直ぐに形にすることができる • CSSがかなり充実しているので、組み合わせ次第で簡単 に綺麗／カッコイイ、Webページをデザインできる • jQueryや、jQuery UIなんかとも組み合わせて使える 58
- 60. PHPとは？ • Hypertext Preprocessor • 動的にWebページを作る、サーバー側で動作するプロ グラム • 開発に必要なもの • サーバー (Apache HTTP Server v2.2+) • PHP (PHP v5.3+) • ブラウザ (Google Chrome) • テキストエディタ 60
- 72. Smartyとは？ • PHPで使えるテンプレートエンジン • テンプレートを使うとモジュール化し易くなる • 開発に必要なもの • サーバー (Apache HTTP Server v2.2+) • PHP (PHP v5.3+) • ブラウザ (Google Chrome) • テキストエディタ 72
- 75. AjaxAsynchronous JavaScript + XML 75
- 76. Ajaxとは？ • Asynchronous JavaScript + XMLの略 • クライアントとサーバーを非同期通信で接続し、 ダイナミックにページの一部を書き換える • 開発に必要なもの • サーバー (Apache HTTP Server v2.2+) • PHP (PHP v5.3+) • ブラウザ (Google Chrome) • テキストエディタ 76
- 77. Ajaxを試すデモシステム 77
- 87. Ajax 演習2 ：概要(これを作りたい) クリックをすると サーバーと非同期通信を開始 サーバーと非同期通信して 外部PHPに記載されている メッセージを表示 画面イメージ 画面イメージ 87
- 90. Ajax演習2：JavaScript側 public/javascripts/myjs.js 90 #btn-ajax-test01をクリックすると ajax_post()を実行 送信するデータ
- 102. Ajax 演習4 ：実行結果 期間を入力して ボタンをクリック 非同期通信開始 サーバーと非同期通信して データベースからデータを抽出。 結果をテーブルに表示 画面イメージ 画面イメージ 102
- 103. END 103