Webページプログラミング · 2018. 4. 3. · ルールとお願い Rule 「自己努力」...
Transcript of Webページプログラミング · 2018. 4. 3. · ルールとお願い Rule 「自己努力」...
1
Webページプログラミング
Dr. Anna Yamaguchi
Course URL:
http://www2.obirin.ac.jp/annay/
2
工学博士:東京都立大学大学院(現首都大学東京)工学研究科 電気工学博士号
“Internet Packet Loss Recovery Using Convolutional Codes and Its Application for Multicast”
畳み込み符号化をパケットレベルで適用し、パケット損回復を行う手法
ユニキャスト通信、マルチキャスト通信へ適応した場合の回復能力及び性能評価
ポーランド国立ヤギェウォ大学 数学修士 (ダブルメージャーで東洋学部日本学科に在籍)
東欧のポーランド出身。日本に来て今年で26年になります。
職歴株式会社 CSK ソフトウェア開発桜美林大学 オープン・カレッジ ポーランド語とロシア語講師国立東京外国語大学 ロシア東欧学科 ポーランド語 非常勤講師東京都立大学大学院 工学研究科 客員研究員慶應義塾大学 理工学部、情報工学科 助手
現在:
玉川大学工学部メディアネットワーク学科 非常勤講師
桜美林大学 言語コミュニケーション学科 非常勤講師
オープンカレッジ ポーランド語講師
Dr. Anna Yamaguchi
学期末には理解して頂けると思います☺
古都クラクフにあるポーランド最古の大学です。コペルニクスなども卒業生。
授業計画
Webサイトとは?
インターネットとWWW
HTMLとCSSの基礎構造と応用の方法
JavaScriptを使用したWEB上の動作(教科書とは別に教材を配ります。)
FTPを使ったWEBページのアップロード
3
自分のWebサイト作成
ルールとお願い
Rule
「自己努力」 分からないことはそのままに
しない。
→自分で調べる、聞く!
自習- 予習・復習
休んだから分かりません、は禁句です。
Request for students
私の母語は日本語ではありません。説明がわかりにくいときには授業中に私かTAに質問してください。
また、理解が足りない部分があると感じたら気軽にメールで質問してください。
質問は日本語でも英語でも構いません。(ポーランド語・ロシア語, ドイツ語も可☺)
email:
4
5
Today’s plan – 9/16
授業計画・コースの目標など
Webサイト作成の基礎知識 インターネットとWWW
WebサイトとWebページと
HTML/CSS/JavaScript
教科書:12p.~29p.
本日教科書の無い学生は次の授業までに必ず準備してください
Objectives –目標-
HTML/CSS/JavaScriptを理解すること。
このコースで習得したWEB制作の知識をベースにして自らWEBサイトを作成するスキルを身に着けること。
いまから自分が作るサイトのテーマを考えておいて下さい。
自分のWEBサイトをアピールするプレゼンテーションをしてもらいます。
6
★短期間で出来る限り多くの知識を習得してもらいたいと思います。授業を効率よく進めるためにも学生一人ひとりの努力が大切です。
評価方法
7
成績
10%
40%
25%
25%
授業態度積極性など
Webページ制作
授業課題各授業における取り組み
HTML/CSS技術習得度
制作発表プレゼン
各授業での進行具合、Webプログラミング技術の習得度と
学期末のプレゼンテーションを主に評価します。
授業のWebページ
http://www2.obirin.ac.jp/annay/
課題・授業内容やその補足などを毎週授業のホームページにアップロードします。
※毎週チェックするように!
8
Webサイトとは
World Wide Web上でひとつのドメイン名の下にあるWebページの集まりがWebサイト
9
WebサイトWebページ(main)
Webページ(sub)Webページ(sub)
Webページ(sub)
インターネットアプリケーション
インターネットを介して利用できるソフトウェアのサービス、アプリケーション。
10
ネットワークを介さない、ローカルのコンピュータのみで動作するソフトウェアやアプリケーションをデスクトップアプリケーションもしくはスタンドアローンと呼ぶ。
引用:www.way-on.com.tw
インターネットで利用されるアプリケーション:
World Wide Webについて学びます。
World Wide WebとInternet
WWWとはIP(インターネットプロトコル)にて用いられるアプリケーションである。
※重要! WWW ≠インターネット
複数のコンピュータが互いに情報をやりとりするしくみがネットワーク。個々のネットワーク同士を外のネットワークとつないだものがインターネット。
インターネットアプリケーションemail(SMTP)、ファイル転送(FTP)、チャット(IRC)
World Wide Web(HTTP) など
11
では、WWWとはどのようなアプリケーションなのか
World Wide Webとは
World Wide Web は、マシンやソフトの違いを超えて情報を共有するためのドキュメントシステムとして誕生しました。
HTMLという言語を使うことによって、ハイパーリンクで文書同士をつなげることができ、文書の中に画像などのデータをうめこめる。
12
World Wide Webとは(続)
World Wide Webとは、簡単に説明すると…
インターネットを通してWebページというドキュメント(文書ファイル)を共有するためのアプリケーションソフトです。
13
14
World Wide Web の誕生
WWWは、1989年に Tim Berners-Lee によって、スイスのCERN(欧州原子核研究機関)にて各国に散らばっている研究者が瞬時に情報に
アクセスできるように生み出された。 1991年以降一般に普及、現在はインターネットでも最も利
用されているアプリケーションである。
Webページを構成する言語World Wide Web上で公開されるドキュメントがWebページと呼ばれる。
静的サイトの構築
HTML…「構造」テキスト・リンク・画像などの構成
CSS(スタイルシート)…「装飾」ページのデザイン・スタイルの構成
動的サイトの構築
JavaScriptなど…「動作」ページに動きを与える要素
15
16
HTMLは国際言語?
WWWの基礎である文書同士をリンクさせるHyper-Text
や文字の書式、埋め込むファイル(画像など)の情報などを定義する言語がHTML(Hyper-Text Markup Language)
「タグ」というコンピュータ言語を使用
タグの例
<p> </p> <br><href> <name>
※タグは<>山カッコの中に書きます
WebブラウザとHTML
私たちがウェブページを見るためのツールがウェブブラウザです。
17(上)HTMLソースで書かれたWebページ
(下)ブラウザで表示されたWebページ
HTML文書を開いてみましょう
Internet Explorer 11(IE11)では、[右クリック]-[ソースの表示]
Fire Fox: [Web開発] - [開発ツールを表示]
Chrome: [右クリック] - [ページのソースを表示]
18
マークアップ方式とタグ
開始タグ <XXX> と 終了タグ </XXX>で要素をマークアップするのがHTMLのマークアップ方式である。
19
Web Page Programming
Webサイトの基礎知識インターネットとWWW
Webサイト制作の基本と流れ
HTMLHTMLの役割と記述方法HTMLを使い基本的なWEBページ制作
CSSスタイルシートの役割と記述方法スタイルシートを使ったWEBデザイン
JavaScriptオブジェクト指向プログラミングとはJavaScriptを使った動的なWEBサイト構築
FTPファイル転送と制作したWEBサイトのアップロード
Presentation 20
NEXT WEEK~
Webページの基本
なぜHTML/CSSと分けて使うのか
HTMLとタグの基礎
Webページのデザイン・レイアウトを指定するCSS(スタイルシート)とはなにか?
21
Today’s KEY WORDS
Webページ
Webサイト
World Wide Web
アプリケーション
ドキュメントシステム
ハイパーリンク
HTML (Hyper-text Markup Languge)
タグ
< > ヤマカッコ
ブラウザ
HTMLソース
マークアップ方式
22
H.W.
授業のウェブページに自宅でログインする。
http://www2.obirin.ac.jp/annay/
課題1
復習問題 (スライド24の質問とその答えを書く、
A4用紙、ホッチキスでとめる)
教科書: 31p.まで読む。
授業で制作する自分独自のホームページのテーマを考える。 23
宿題1
1. Webページを作成する言語にはどのようものがあるか答えてください。
2. Webページにデザインを適用する言語にはどのようなものがあるか答えてください。
3. Webページの制作を行うとき、制作の流れとして一般的にはじめに決めることは何か答えてください。
4. HTMLやCSSファイルを作成するにはどのようなソフトウェアがあると便利か答えてください。
5. HTMLやCSSファイルがインターネット上でどの表示されるか確認するにはどのようなソフトウェアが必要か答えてください。
24