2010年12月22日

HTMLを余り意識せずにウェブページを作る事ができるシンプルなウェブサービス「orbs」


HTMLやCSSを余り意識せずにウェブページを作る事ができるウェブサービスとして、以前の投稿で「Jimdo」を紹介しています。実際にもこちらで「講座・講演オンラインビデオ」ページに活用しています。

今回は「Jimdo」よりずっとシンプルなウェブサイトを作る事を目標とするウェブサービス「orbs」を紹介します。


まずここにアクセスして若干の変更でデモサイトを作ってみます。デモサイトを作るだけならサインアップは不要で、そのサイトは24時間で削除されます。IE9βでは現状でサイトの内容作成時に正常に動作しません(できたサイトを見るには問題ありません)。IE8、Opera 11、Firefox 3.6/4.0、Chrome 9βは一応の動作を確認。




「Try Demo」アイコンをクリックすると、既に「orbs」の完成したデモサイトになっていて、トップページの(英語の)説明に従って進めていけば、ある程度の操作が分るようになっています。


まず、「EDIT PAGE: Just click on this text.」の部分をクリックします。テキストを含む編集対象のブロックが明瞭に(ブロック以外のエリアが暗く)なり、編集バーが現れます(こちらを参照)。




編集したい部分に再度クリックした上で、編集バーのメニューを使ってブロック内の変更をします。マウスで範囲指定してメニューのアイコンをクリックすると処理が行われるという類似の操作形式は他のアプリと変わりません。このページではテキストの編集(日本語も可能)をしてみてください。
「code」と「“”」は特別の内部ブロックを生成します。

下部の「Save Changes」をクリックしてブロックの編集を終えます。


デモページの次の指示である「Next step: Add photos」をクリックします。デモ編集の指示にある「Click on this text to start editing.」の部分をクリック(こちらを参照)。




画像の挿入位置にクリックした後、デモ編集の指示に従って編集バーにあるアイコンで、画像を(アップロードして)設定します。画像ファイルのアップロードでエラーになる場合がありますので、(操作自体が正しければ・・・・)リトライしてください。


挿入した画像をクリックすると、画像編集バーが現れます(こちらを参照)。




画像編集バーのメニューを使って、拡大・縮小やリンク設定などができ、テキストの回りこみ方法の指定もできます。


編集ブロックの保管指示をした後、デモ操作の指示に従って「Next Step: Add and delete pages」をクリックします。

このようなページ階層の操作デモのページになりますので、右サイドのアイコンでページの作成(サブページの作成も可能)や名称変更・削除ができます。




ここでページ名称は、英数字記号のみ(日本語コードは不可)です(ページ名称がHTMLファイル名になる為)。


次のデモ操作として「Next Step: Drag me up!」をクリックします。ページの階層構造を変更する操作のビデオが見られますので参考にして、右フレームに表示されているページ名をドラッグ&ドロップして動かしてみてください(こちらを参照)。






「Next Step: Customize design」をクリックして、このページでのデモ操作指示を参考にウェブサイトのデザインを変更できます。




デザインを変更した場合にはサインインを求められます(サインインに対する確認メールはありません・・・)が、そのサイトは保存される事になり24時間で消去される事がなくなります。

最後に「settings」で公開指定します(デフォルトはプライベートモード)。尚、無償の範囲では指定ユーザ共有ができません。



このようにして作ったサイトを紹介します。別途運営しているブログ「写真を絵画に」の内容を使って作っています。一部のページでは、HTMLレベルでの操作でYouTubeの動画や他サイト参照の「kwout」のコードを埋め込んでいます。

「写真を絵画に」の一部模写サイト






「Jimdo」の場合は、動画をコードの埋め込みを使わなくてもできたりページの分類ができるなど、高度な事にも容易にチャレンジできます。「orbs」は個人や家族で簡単な情報発信をしたい場合に非常に有用なサービスであると思います。特に一部のデザインツールに凝った点があり、その活用で「Jimdo」よりもデザイン的に面白いページができるように思います。


 
ラベル:orbs
posted by 鎌倉太郎 at 11:31| 神奈川 ☁| Comment(0) | TrackBack(0) | 体験利用 | 更新情報をチェックする
この記事へのコメント
コメントを書く
コチラをクリックしてください

この記事へのトラックバック