NC-2　情報通信基礎実験 WEBデザイン基礎実験 （2日目） 担当：清水，田代 副手：浦辺，石井

実験準備 情報メディア学科サーバ（earth）から，前回のデータをデスクトップにdownloadする FFFTPを開いてearthに接続 ID, Passwordを入力 webdesignフォルダをデスクトップに移動 ※自分でデータを保管している人はそれを使用

前回の内容確認 HTML復習 CSS演習 シンプルな自己紹介ページを作成 0xncxxx.html内容確認 背景色を変更 ボックスモデル 自己紹介ページを飾る ※『学籍番号_CSS1.html』 ※『学籍番号_CSS2.html』 ※『学籍番号_CSS3.html』は正しく表示されるか？

XMLについて(1/3) XMLとは XMLの表示 http://www.mlab.im.dendai.ac.jp/ic2/webdesign/web/xml/intro.html XMLの表示 http://www.mlab.im.dendai.ac.jp/ic2/webdesign/web/xml/display.html 情報 バーの情報:SP２ではローカルエリアは、セキュリティ設定がインターネットエリアより高くなっている

XMLについて(2/3) 拡張可能なマーク付け言語 階層的なデータ構造定義 データの意味づけによって、コンピュータがデータを取り扱えるようになる 業界標準として普及しつつある インターネットでも利用されるデータ形式 Ajax(Asynchronous JavaScript and XML) XMLHttpRequest

XMLについて(3/3) XMLの文法 http://www.mlab.im.dendai.ac.jp/ic2/webdesign/web/xml/syntax.html <?xml version="1.0" encoding="utf-8"?> <挨拶状> <宛先> <名前>電大牛男</名前> <所属>東京電機大学</所属> </宛先> <本文> <段落>ようこそ!</段落> </本文> </挨拶状> 情報 バーの情報:SP２ではローカルエリアは、セキュリティ設定がインターネットエリアより高くなっている

本日の課題 自己紹介データをXML化する 作成したXMLファイルを下記E-mailへ送信する tashiro@im.dendai.ac.jp タグ名はサンプルと合わせる 配布資料：2日目参照 作成したXMLファイルを下記E-mailへ送信する tashiro@im.dendai.ac.jp

XSLT演習～単純なHTMLの出力 XSLTによる文書の変換 http://www.mlab.im.dendai.ac.jp/ic2/webdesign/web/xml/xslt/

XSLT演習～単純なHTMLの出力 自己紹介XMLとXSLのリンク XSLスタイルシートファイルの作成 XMLファイルの変更 内容はスタイルシート内容を転記 XMLファイルの変更 <?xml-stylesheet type=“text/xsl” href=“学籍番号.xsl"?>

XSLT演習～データの取り出し データの取り出し http://www.mlab.im.dendai.ac.jp/ic2/webdesign/web/xml/xslt/value-of.html 自己紹介XMLからのデータの取り出し 名前 学籍番号 班 今の願い事

XSLT演習～複数テンプレート 複数テンプレートの処理の流れ http://www.mlab.im.dendai.ac.jp/ic2/webdesign/web/xml/xslt/templates_flow.html 自己紹介XMLからのデータの取り出し 名は体を表す お勧めのサイト

XML/XSLのメリットとは？ 今回の例だけでは，直接HTMLを作成した方が楽だと思いませんか？ どんなときに嬉しいか考えてみよう

XML/XSLで嬉しいこととは？ データの意味づけによって、コンピュータがデータを取り扱えるようになる 　　　⇒コンピュータがデータを取り扱うとは？ データの集約，検索，分類，集計，ソート，加工・・・ 集約と分類，ソートの例を挙げる

自己紹介XMLを集約する 各自の自己紹介XMLを集約する 自己紹介XMLファイルを複数用意する <自己紹介>が複数になるので <自己紹介リスト>でまとめる 外部ファイルの実態参照定義 <!ENTITY 実態名 SYSTEM “ファイル名”> 参照 ＆実態名;

集約したXMLの要素を表示 ヒント <xsl:for-each select="自己紹介リスト/自己紹介"> <xsl:apply-templates select="今の願い事"/> </xsl:for-each>

集約したXMLをソート表示 ソート表示のヒント <xsl:for-each select="自己紹介リスト/自己紹介/お勧めのサイトリスト/お勧めのサイト"> <xsl:sort select="サイト名" data-type="text" order="ascending"/> <xsl:apply-templates select="."/> </xsl:for-each> Aタグのhref属性値の渡し方もポイント！