Web制作技能向上のための講義(2013-10-06)

lesson_2013-10-06.md

Web制作技能向上のための講義

• 2013-10-06
• 講師: 宮崎 雄策 (みやざき ゆうさく)
• Mail: [email protected]
• Twitter: @sutara_lumpur

---

時間配分

1. (3時間) サンプルサイト作成
2. (1時間) 講師が勧める勉強方法

---

(3時間) サンプルサイト作成

目的

HTML, CSS, JavaScript(jQuery), PHPを使用するサンプルを作ることで、生徒さんに何が足りないのかを講師と生徒さん自身が把握します。

手順

段階を踏みながら少しずつ使用言語を追加していきます。

1. HTMLのみ
2. CSSを追加
3. JavaScriptを追加
4. PHPとMySQL
5. Ajaxでデータベースから情報を検索、表示

---

(1時間) 講師が勧める勉強方法

1. サンプル紹介サイトを制作
2. 勉強の中で気がついたことをブログで発信
3. まとまった機能のプログラムはGitHubで公開
4. はてなブックマークを活用
5. 気に入ったブログはRSSを購読

サンプル紹介サイトを制作・運営

Webサイト全体の仕組みや各言語の連携を知ることができれば、言語のすべての機能を知らなくてもある程度の想像力がはたらきます。
ぜひ、自分でサイトを運営することをお勧めします。
小さなサンプルプログラムを整理して紹介するサイトが最適です。

無料でPHPも使えるレンタルサーバも数多くあります。
無料ではMySQLは使えない場合がほとんどですが、PHPが使用可能ならSQLiteというデータベースは無条件で使用可能です。

勉強の中で気がついたことをブログで発信

小さなことでも、どんどんブログに書いていってください。
自分のための備忘録にもなります。
どのブログサービスでもかまいませんが、マークダウン記法を使えるものが便利です。

• はてなブログ
  • 例: 講師のブログ
• gist
  • 例: 講師のGist
  • 例: 『計算機プログラムの構造と解釈』一章一節読書メモ

まとまった機能のプログラムはGitHubで公開

ある程度機能がまとまっていて再利用が容易なプログラムができあがったらGitHubで公開しましょう。
世界中の人に活用してもらえる…かもしれません。
たとえ何の反応がなくても、公開しているというだけで気持ちが引き締まります。
なお、READMEはぜひマークダウン記法で書きましょう。(README.md)

• GitHub
  • 例: 講師のGitHub

はてなブックマークを活用

情報収集のためには必須です。
FirefoxやGoogleChrome向けに拡張機能も用意されていて、それも大変便利です。

• テクノロジー分野
• タグ: html
• タグ: css
• GoogleChrome拡張
• Firefox拡張

気に入ったブログはRSSを購読

日々の情報収集の中で自分の興味に合致したブログを見つけたら、RSSを購読しましょう。
各ブログの新着記事をまとめて読むことができます。 RSSリーダは各種あります。
講師のおすすめは feedly です。iPhone, Android用アプリも揃っています。

• feedly(フィードリィ)

---

(補足) 講師が勧めるツール

GoogleChrome

ウェブブラウザです。
UIがシンプルで使いやすく、拡張機能も充実しています。
はてなブックマークの拡張機能は、Firefox版よりも使いやすいです。

gedit(ジーエディット)

テキストエディタです。
もともとLinux用ですが、Windows版もあります。
自動で細かくシンタックスハイライトしてくれるので便利です。
ただ、Windows版はちょっとだけバグがあります。

MacType(マックタイプ)

文字をなめらかに表示してくれます。
画面を見つめ続ける我々プログラマにとって、とても効果のあるツールだと思います。