3年技術授業用のテストページ
⇒
清川中のPRへ
⇒
ふるさと学習チームへ
⇒
学校行事チームへ
⇒
日常活動チームへ
★
コンテンツプログラミングシステム_prprの紹介
ビジュアルHTMLエディタ_preditor
← メイキング動画 … 右端の □ をクリックすると最大化
■ ディジタル作品「清川中のPR」の作り方
チーム内での分担を確認し、絵コンテを仕上げる。
コンテンツプログラミングシステム_prprの紹介
を見て、作り方を理解する
。
public_htmlフォルダの中の pr
41
.html(
41
の部分は自分の出席番号)をダブルクリックしてGoogleChromeで表示。。
meryを起動し、ファイル(F)-開く(O)で pr
41
.html を開く。
preditor
を開く。
絵コンテに従い、preditorで見出しや文章を打つ。画像の挿入の注意点(1~4)に従い、写真選び・コピー・縮小をし、画像を挿入する。「時短ワザ」を使って、すばやく1枚のスライドを仕上げる。
preditorで編集後、右上のコードビューボタンを押して「ソースコード表示」にし、
全て選択
(CTRL+A)・
コピー
(CTRL+C)して、meryで pr
41
.html の<section>タグ内に
貼りつけ
(CTRL+V)る。
Meryで、CTRL+SHIFT+Sでスニペットを挿入する。リンクは、最低「前へ」「次へ」を挿入する。必要に応じて、アニメーションを作成・挿入する。
Meryで編集後、ファイル(F)-上書き保存(S) で上書き保存する。pr
41
.htmlのChromeで
F5
キーを押して、表示を更新する。
新たにスライドを追加するには、meryでスニペット「スライド-空スライド挿入」をする。今編集しているpreditorの上部の突起(タブ)を
右クリック
-
タブを複製
するか、新たに
preditor
をクリックして開くかして編集する。あとは、6.~9.を繰り返して個人の分担を完成させる。
preditor
-Chrome(
編集
)
→
pr
41
.html-
Mery
(
保存
)
→
pr
41
.html-
Chrome
(
表示
)
→
…
※
つまり、
preditor
で編集したものを
Mery
に貼りつけて保存し、
Chrome
で正しく表示されているか確認する作業を繰り返せばよい。
最後に、チームごとにリンクさせる。
■ HTMLファイルについて【 ハンドブックp101より 】
Webページは、HTML(ハイパー・テキスト・マークアップ・ランゲージ)という言語で記述されている。
HTMLファイルは、テキストファイルなので、テキストエディタ(メモ帳、Meryなど)で編集できる。
Webページの中身のテキストを見たいときは、右クリックして、ページのソースを表示(V)をクリック。
<H1>などのHTMLタグがWebページの構造を表わしている。
<A>タグ…リンクを表わす。
<IMG>タグ…画像ファイルを表示する。
<STYLE>タグ…ページの見え方をCSSで記述する。例:
赤字になったテキスト
<SCRIPT>タグ…ページの動作をJavaScirptで記述する。
■ 画像ファイルについて【 教科書p206~207より 】
画像ファイルには、ビットマップ画像とベクトル画像の2種類がある。
ビットマップは点の集まりで、ベクトルは線の集まり。
画像処理は、ペイント系とドロー系のソフトウェアで行う。
デイジーピクチャーで.jpgや.pngをInkscapeで.svgを編集する。
デイジーピクチャーの「画像の学習」で解説されている。
kuchi*.htmlのstartボタンを押すと変形のアニメーションが始まる。SVGというベクトル画像は、JavaScriptで操作しやすい。
スイカの絵を見ると、ベクトル画像は大きくしてもきれいに表示されることがわかる。
デジカメやスキャナから取り込んだ写真や絵は、ビットマップ画像。Inkscapeのパス(P)-ビットマップのトレース(T)でベクトル画像に変換することができる。
逆に、SVGから、ファイル(F)-PNG画像にエクスポート(E)することもできる。
■ 情報モラルについて【 教科書p198~201・212より 】
文章や画像などの素材には、著作権や肖像権があるので、正しく利用しなければならない。
→
情報モラル・セキュリティコンクール
に挑戦しよう。
自分で作ることができれば、権利を気にせずに使うことができる。
文章に比べて画像の作成は難しいが、人工知能の助けを借りる方法もある。
https://www.autodraw.com/
適当に絵を描くと、きれいなイラストの候補が示されるので、イメージに合うものを選択する。さらに描き加えてもよい。
よい絵ができたら、左上の三マークをクリックしてDownloadする。
Inkscapeに読み込んで、ベクトル化しておくとよい。
簡単アニメエディタ
■ 以前のテストページ
kuchi0.html…svgをHTMLに埋め込んでいる。
kuchi1p.html…Pablo.jsとsvgを相対URLで読み込んでいる。
kuchi2cdn.html…Pablo.jsとsvgを絶対URLでFirebaseから読み込んでいる。
kuchi2img.html…imgタグで配置したsvgから絶対URLを得て読み込んでいる。
kuchi3fb_RL…HTMLファイルを作らず、RunstantLiteに書いて実行。