タグ別アーカイブ: HTML

PPT2FlashをWebサイト内で表示する方法

CATEGORIES eラーニングby.a.takeuchi0 Comments2011.08.23

株式会社キバンインターナショナル http://www.kiban.jp/ が提供するPowerPoint資料をFlashのラーニング教材に簡単変換できるソフト『PPT2Flash』・・・29,400円(税込) http://ppt2flash.jp/ 30日間無料お試しダウンロードできます。

今回は、以下のように、PPT2FlashをWebサイト内で表示する方法をご紹介致します。

やり方は、通常通りWebにアップした後、以下のタグをhtmlに記述します。

▲このようなスクリプトをhtmlに記述します。

▲このようなスクリプトをhtmlに記述します。

上記のテキストはこちらからご覧ください。
http://blog.elearning.co.jp/data/frameweb.txt

『PPT2Flash』はこちらからお試し頂けます。 http://ppt2flash.jp/ 30日間無料お試しダウンロードできます。

私たち株式会社キバンインターナショナル http://www.kiban.jp/ が提供するLMS(ラーニング・マネジメント・システム)SmartBrain http://smartbrain.info/

SmartBrainでは、ログインフォームを簡単に生成できます。これにより、自社運営のWebサイトから、学習者にSmartBrainにログインしてもらうこともできます。

ログインフォームをWebサイトに設置した例

▲ログインフォームをWebサイトに設置した例。

▲ログインフォームをWebサイトに設置した例。

ログインフォーム生成手順

▲管理者アカウントでSmartBrainにログイン

▲管理者アカウントでSmartBrainにログイン


▲一番下のメニュー「管理機能」をクリック

▲一番下のメニュー「管理機能」をクリック

▲「ポータル管理」をクリック

▲「ポータル管理」をクリック

▲「ログインフォーム作成」をクリック

▲「ログインフォーム作成」をクリック

▲ログインフォームのHTMLタグが表示されます。

▲ログインフォームのHTMLタグが表示されます。


このHTMLタグをWebサイトに貼り付けるだけ。とても簡単です。
※このログインフォーム作成機能はSmartBrain1.9以降でのみ使用できます

私たち株式会社キバンインターナショナル http://www.kiban.jp/ が提供するLMS(ラーニング・マネジメント・システム)SmartBrain http://smartbrain.info/

SmartBrainで、テキストベースでeラーニング教材を作成したい!という問い合わせを頂くことがございます。
(これには、お客様の事情によりFlashや動画を使用したくないというケースがあるようです)。
今回は、その方法をご紹介致します。

▲まずは、ID、Passを入力してログインします

▲まずは、ID、Passを入力してログインします

▲一番下の「管理機能」をクリック

▲一番下の「管理機能」をクリック

▲一番上の「コース管理」をクリック

▲一番上の「コース管理」をクリック

▲任意のコースを選択

▲任意のコースを選択

▲「コンテンツリスト」右の「+」をクリック

▲「コンテンツリスト」右の「+」をクリック

▲「HTMLを直接入力」をクリック

▲「HTMLを直接入力」をクリック

「HTMLを直接入力」というと、なにやら難しそうな聞こえるかもしれません。しかし、大丈夫です。技術的なことは分からなくても操作できるようになっています。

▲このような画面になります

▲このような画面になります

▲Wordのような操作性でテキストを入力、装飾できます

▲Wordのような操作性でテキストを入力、装飾できます

▲別ウィンドウから画像をドラッグアンドドロップすると・・・

▲別ウィンドウから画像をドラッグアンドドロップすると・・・

▲画像を取り込むこともできます

▲画像を取り込むこともできます

▲※他サーバの画像URLへのリンクが自動で生成されます。

 

▲「html」をクリックすれば・・・

▲「html」をクリックすれば・・・

▲htmlエディタで直接書き込むこともできます

▲htmlエディタで直接書き込むこともできます

▲YouTubeのタグを埋め込むこともできます

 

▲「登録」をクリックすれば作成完了です

▲「登録」をクリックすれば作成完了です

▲→の先をドラッグアンドドロップすると、エディタエリアを拡大することもできます。

 

●iPhone、iPad、PC、ブラウザを選ばず学習できる

LMS(ラーニング・マネジメント・システム)
『SmartBrain』・・・1ユーザー210円/月(税込)
20ユーザーまで無料。お試し登録はこちらからどうぞ。
http://smartbrain.info/

HTMLやCSSの基礎から応用まで。

いつも新しい内容でわかりやすく講義している「allWebクリエーター塾」の菊池さんがeラーニング向のけ講義をパンダスタジオで収録しました。
これからeラーニングでも展開予定ということで、特別に最初の講義を公開いたします。


ここから先の講義が気になる内容ですね。

今後、コンテンツとして作成するかを検討しているそうです!

InnerHTMLの罠

CATEGORIES SmartBrain, 北海道ラボby.a.takeuchi1 Comments2010.02.25

はじめまして.北海道研究所の研究員松村です.

開発していく中で,JavaScriptのinnerHTMLが特定の状況下でうまくうごかない状況にぶつかりましたので,ご参考までに紹介させていただきます.
innerHTMLは任意の箇所を,動的にゴッソリ書き換えることができるため,非常に便利なコマンドです.

以下のソースコードは,「チェンジ」ボタンを押すと,divタグで囲まれた部分をそのままtextareaに転記するというものです.

<html>
<head>
<script>
<!–
function copyTextarea(){
var inputText = document.getElementById (“before”).innerHTML;
document.getElementById (“after”).innerHTML = inputText;
}
–>
</script>
<title>サンプル</title>
</head>
<body>
<div>
eラーニングツール SmartBrain<br>
20ユーザまで無料!!<br>
お試しください!!
</div>
<hr>
<input value=”チェンジ”>
<hr>
<textarea style=”width:300px;height:100px;”>
SmartBrain,20ユーザまで無料!!
</textarea>
</body>
</html>

しかしながら,このコード,IEにおいてはエラーが生じて動きません.
どうやら,IEにおいてはinnerHTMLにタグを含めるのは禁止されているようです.
では,同じ動作を得るために......と,今度はdivタグ内の<br>タグを改行コード(\n)に置換して実行してみます.

しかしながら,今度は改行コードが空白として扱われてしまいました.
どうやら,IEにおいてはinnerHTMLでの改行は空白に置き換えられてしまうようです.

いずれの現象も「ブラウザはIE」「innerHTMLを用いる」という条件で発生します.
それでは,これら2つの状況を回避するためにはどうすればよいのでしょうか.

答えは「innerHTMLで書き換えるのではなく,textareaのvalueを書き換える」です.

×:document.getElementById (“after”).innerHTML = inputText;
○:document.getElementById (“after”).value = inputText;

これで改行込みで動的に書き換えられるようになります.
innerHTMLは便利なので何かと頼りがちですが,思わぬところに伏兵がいるものです......

参考にしたURLはコチラ

-OASIS- – 今日のメモ「innerHTMLの改行コードの扱い(JavaScript)
http://pochi.orz.ne.jp/oasis/archive_198.htm

プログラマ視点でのWebデザイン

CATEGORIES eラーニングby.a.takeuchi2 Comments2009.10.30

絵もかけないし、デザインセンスもない。でもCSSなら修正できるという、プログラマ向けのデザインテクニック、を紹介します。

・余分な要素を取り除く
・余白をあける

たったこれだけです。

この2点をブログのリンクユニットに適用してみました。

Before After
before after

どうでしょう?

すっきりしましたよね。

  • 製品・サービス
    PC、iPhone対応のeラーニングシステム。20名まで無料でASPサービスを利用できます
    PC、iPhone対応のeラーニング学習管理システム(LMS)【SmartBrain】
    http://smartbrain.info/
    PC、iPhone対応のeラーニングシステム。ユーザ数無制限のASPコースをご用意。


    eラーニングポータルサイト【elearning.co.jp】
    http://elearning.co.jp/
    eラーニング専門企業(株)キバンインターナショナルの製品を紹介しています。


    コンテンツビジネス支援パック
    http://contentsbank.jp/

    Ustream配信、動画コンテンツ制作、セミナーにご利用いただけるレンタルスタジオ
    Ustreamレンタルスタジオ「パンダスタジオ」
    http://pandastudio.tv/

    eラーニング専門企業(株)キバンインターナショナルのスタッフが、eラーニングに関する情報・最新事情をBlogでご紹介。月50本程度の情報発信を行っています。
    ブログ「blog.eラーニング.co.jp」
    http://blog.elearning.co.jp/

  • アーカイブ
  • カテゴリー
  • Amazon
  • タグ