Download to read offline
Uploaded byTakuya Kumagai
Web development fundamental
改訂版↓ http://www.slideshare.net/taukuma/web-development-fundamentalv2-24318761
Web development fundamental
- 1. WEBDevelopment Fundamental Takuya Kumagai May27-28,2013 ゼロから始めるWeb開発 1
- 2. アジェンダ • HTML • CSS •JavaScript • jQuery • Bootstrap • PHP • Smarty • Ajax 1日目 2日目 2
- 3.
- 4.
- 5. • HTMLの役割 Webページを作るための言語 (文章の構造や意味) •CSSの役割 Webページを作るための言語 (見た目) • JavaScriptの役割 ブラウザで表示しているものを動的にイジくるための言語 • PHPの役割 動的にWebページを表示するための言語(サーバー上で動く) • Ajaxの役割 動的にページの一部を変更する枠組み 全体概要 5
- 6. 1日目の目標 • HTML、CSS、JavaScriptの基礎を習得 • TwitterBootstrap、jQueryを使って、今風のカッコイイWeb ページを作る 6
- 7. 2日目の目標 • PHPの基礎をなんとなく把握 • Smartyの構造を理解 •AjaxでJavaScriptとPHPの非同期通信をできるように • データベースに格納されているデータをBootstrapっぽく表 示できる 7
- 8. Hyper Text MarkupLanguage 8 HTML
- 9. HTMLとは？ • HyperText MarkupLanguageの略 • Webページを作るための言語 (文章の構造や意味) • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 9
- 10. HTML基礎 html タグと呼ばれる、コマンドを使う。 タグはDOM (Document ObjectModel)要素とも呼ばれる。 基本的にページの本文はbody.../bodyの中に書く。 10
- 11. 本文bodyに使えるタグ • Headingタグ • Paragraph(文章)タグ •リンク • フォーム • テーブル • ブロック要素 11
- 12.
- 13.
- 14.
- 15.
- 16. テーブル要素( table, thead,tbody, tr, th, td ) 画面イメージhtml 16
- 17. ブロック要素( div, span) 画面イメージ html 17
- 18.
- 19. CSSとは？ • Cascading StyleSheetsの略 • Webページを作るための言語 (見た目) • 開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 19
- 20. CSSを書く場所 • DOM要素のスタイル属性に直書き • head/headの中のスタイル要素内 •外部ファイル 外部CSSファイル 20
- 21.
- 22.
- 23.
- 24.
- 25. セレクター • すべての要素 • 同一の要素 •クラス • id • ちょっと複雑なセレクター 25
- 26.
- 27.
- 28.
- 29.
- 30.
- 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.
- 33. JavaScriptとは？ • ブラウザ上で色々な動作をさせることができる言語 • 開発に必要なもの •ブラウザ (Google Chrome) • テキストエディタ 33
- 34.
- 35.
- 36.
- 37.
- 38. 演算子 画面イメージ myjs.js(外部ファイル) 文字列の結合は + a =a+1; と同じ意味 c = c+3; と同じ意味 38
- 39.
- 40.
- 41.
- 42.
- 43. jQueryとは？ • JavaScriptを便利にしてくれるライブラリ • 開発に必要なもの •ブラウザ (Google Chrome) • テキストエディタ 43
- 44.
- 45.
- 46.
- 47.
- 48.
- 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
- 50.
- 51. Bootstrapとは？ • Twitterが開発したCSSフレームワーク • 今時のカッコイイサイトを簡単に作れてしまう •開発に必要なもの • ブラウザ (Google Chrome) • テキストエディタ 51
- 52.
- 53.
- 54. フォーム：select, check box,radio 画面イメージ html html html 54
- 55.
- 56.
- 57.
- 58. Bootstrapのまとめ • アイディアを直ぐに形にすることができる • CSSがかなり充実しているので、組み合わせ次第で簡単 に綺麗／カッコイイ、Webページをデザインできる •jQueryや、jQuery UIなんかとも組み合わせて使える 58
- 59.
- 60. PHPとは？ • Hypertext Preprocessor •動的にWebページを作る、サーバー側で動作するプロ グラム • 開発に必要なもの • サーバー (Apache HTTP Server v2.2+) • PHP (PHP v5.3+) • ブラウザ (Google Chrome) • テキストエディタ 60
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72. Smartyとは？ • PHPで使えるテンプレートエンジン • テンプレートを使うとモジュール化し易くなる •開発に必要なもの • サーバー (Apache HTTP Server v2.2+) • PHP (PHP v5.3+) • ブラウザ (Google Chrome) • テキストエディタ 72
- 73.
- 74.
- 75.
- 76. Ajaxとは？ • Asynchronous JavaScript+ XMLの略 • クライアントとサーバーを非同期通信で接続し、 ダイナミックにページの一部を書き換える • 開発に必要なもの • サーバー (Apache HTTP Server v2.2+) • PHP (PHP v5.3+) • ブラウザ (Google Chrome) • テキストエディタ 76
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.