毎週金曜日配信 What's New 2002/11/8
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
http://www.scollabo.com/banban/
<第26号>
banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのHPを作ることが出来ます。
時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。
当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。
今週の課題 ■ HTMLデータ形式(難しくてつまらない内容かもしれません?)
■ HTML4.01で扱う特殊文字 --- 実体参照
■ ホームページに求められるもの --- アクセスアップ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆HTMLのデータ形式
本来はもっと早くこの解説をすべきでしたが、ある意味では初心者にはとっつき
にくい内容なので、掲載を見送ってきました。
また、現実的にここで説明されている内容を知らなくてもページ作成にはあま
り問題がないのも事実です。ここでは、HTMLを作成するための「約束ごと」につ
いて簡単にまとめました。
データ形式とは、記述する要素の内容やその属性の値として記述する、すべて
決められた形式に従って記述することが推奨されています。
◆基本データ形式
HTML4.01の要素の内容や属性の値として使用されるデータ型は以下のとおりです。
なお、ここで言うユーザエージェントとは「ブラウザ」あるいは「プロキシ」
または「検索エンジン」などを指します。
■ 文字種
・CS 値に大文字と小文字の区別がある、つまりユーザエージェントは、「a」
を「A」と異なるものと判断します。
・CI 大文字と小文字を区別しません。ユーザエージェントは「a」と「A」を同
じものと判断します。要素、属性は大文字と小文字を区別しません。
・CN 数字などのため大文字と小文字は無関係。数値データは基本的に0〜9まで
の半角数値が用いられます。つまり、文字種変換の影響を受けません。
・CA それ自体が決定。要素、あるいは属性の定義自体に大文字と小文字の区別
がある場合。
・CT 詳細はそれぞれの型定義部分を参照します。クラス属性、id属性。
■ HTMLの基本的なデータ型(SGML基本データ形式)
・CDATA Caracter Data の略(文字データ)
属性値として使用される場合には、実体参照も含む文字データで表わします。前
後の空白は無視され、途中のタブ・改行コードなどは空白に置き換えられます。
(実体参照については、特殊文字で解説しています)
W3Cがこのように定義しているにもかかわらず、一部のブラウザではそうなっ
ていません。また要素の途中改行についてもまだ問題があるようです。
例えば、
<p><a href="index.html">
Homeへ戻る
</a></p>
この記述で、本来改行は無視されるはずなのに、変な「ゴミ」が表示されたり
妙な空白が残ってしまうブラウザもあります。
style要素と script要素の内容として使用された場合には、それぞれのデータ
型として、記述した内容がそのままアプリケーションに渡されて処理されます。
つまり、スクリプトやスタイルシートをHTML内で記述しても、その中身は属性
値として扱わず、実体参照も含めて記述された内容をそのまま保持して、ブラウ
ザに引き渡されることを意味しています。
空白の扱いについて、ユーザエージェントは前後の空白を無視する必要があり
ます。例えば < p > と記述した場合、<p>と解釈することを表してよいことにな
ります。ただし、制作者は要素、属性の前後に空白を用いるべきではありません。
・ID、NAME
必ずアルファベット(A〜Z、a〜z)で始まり、アルファベット、数字(0〜9)、
「-」「_」「:」「.」以外の文字を含むことはできません。基本的に半角英数字
しか使えません。。
・IDREF、IDREFS
id属性が指定された他の部分を参照するもので、参照先のid属性の値と同じもの
を指定します。IDREFSの場合は、スペースで区切って複数指定することができま
す。大文字と小文字が区別されます。
・NUMBER
少なくとも1つ以上の半角数字(0-9)を含む数値で表わします。
■ テキスト
普通に読むことのできる(意味のある)文字列を指定します。
■ URI=Universal Resource Identifiers (RFC1630より抜粋)
URIを指定します。URIは URLを含みます。一般的には大文字と小文字を区別する
と考えた方がいいでしょう。なお、当講座では、 URIを馴染みなすい URLと記述
していますが、正確には URIを指します。厳格に大文字と小文字を区別します。
なお、URLに実体参照を用いる場合には、必ず実体参照符号を用いることが規定
されています。特に、CGIプログラムへの参照には注意が必要です。
例えば、アクセスカウンターなどのイメージを貼り付ける場合、
<img src="/cgi-bin/accesscount.cgi?dd=&df=banban.dat">
のような場合には、& は、& と記述しなければなりません。
■ 色 Color
色は#に続く16進数(RGBの順に2桁ずつ、計6桁で表わしたもの)か、色の名前
で指定します。色の名前及びコードは、大文字でも小文字でもかまいません。
コードは冒頭に「#」記号で表し、16進数をその次に記述します。
なお、CSSでは16進数を3桁であらわすことが可能です。値はすべて半角英数。
例: wite #ffffff #FFFFFF #fff
また、HTMLで記述する色名(カラーネーム)は16色しかありません。ブラウザ
によっては 100以上のカラーネームをサポートしているものもありますが、すべ
てのブラウザで再現可能なものは、たったの16色しかありません。
HTMLで使えるカラーネーム(16色)
http://www.scollabo.com/banban/lectur/color.html#colorname
■ 長さ
HTMLには、属性値となる長さについて3つの形式があります。
1.ピクセル ブラウザ画面に表示する際のピクセル数を表します。
2.% 水平・垂直に対する比のパーセンテージを表します。
3.複合長(相対的な長さ)ピクセル数、パーセント、相対的な比率で指定しま
す。一般的にブラウザでは、各指定形式が混在していて総合計が表示面積を
はみ出すような場合、ピクセル形式とパーセント形式から順にスペース配分
し、残りのスペースを相対比率で割り当てます。
■ 日時(日付と時刻)
日付などを表示に関する表示は数多く認められていますが、HTMLでは日付と時刻
の定義(プロファイル)では datetime で記述されます。
日付時刻の文字列形式は YYYY-MM-DDThh:mm:ssTZD となっています。
YYYY = 4桁の西暦年
MM = 2桁の月数(01なら1月)
DD = 2桁の日にち(01〜31まで)
hh = 2桁の時刻(00〜23まで。am/pmは許されていません)
mm = 2桁の分数(00〜59まで)
ss = 2桁の秒数(00〜59まで)
TZD = タイムゾーンを示し、一般的にUTC(Coordinated Universal Time:協
定標準時)が示されます。日本時間の場合はこれに +09:00:00 と記述
します。
上記内容については、既に当講座で各号にまたがって詳しく解説していますの
で、マガジンのバックナンバーを参照してください。
また、HTML基本データ形式についての詳細を分かりやすくまとめていますので
参考までにお読みください。
http://www.scollabo.com/banban/ref/base.html
出典先:W3C Basic HTML data types
http://www.w3.org/TR/html4/types.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆特殊文字とは
HTML上で扱うものに、特殊文字というものが存在します。日頃は何の戸惑いもな
く使ってしまう文字ですが、HTMLでは特別の扱いになります。これらの特殊文字
を、実体参照文字符号と呼び、キーボードからは入力できない文字などが含まれ
ます。
文字の実体参照中には、コンピューターの制御符号が含まれ、そのままの文字
を使用すると、動作に影響を及ぼす可能性すらあります。
そのために、実体参照符号としての文字を表示する場合には、文字符号、ある
いは番号符号で記述することが推奨されています。
HTMLの記述に半角カタカナが使えないのは広く知られています。半角カタカナ
の最初のコードに制御符号となるものがあり、そのために文字化けが起きてしま
います。実体参照の文字には同様の危険が潜んでいる可能性もありますので、で
きるだけ符号(コード)で記述するようにしましょう。
例えば、下記のテキストの場合、
<title>HTML & CSS</title> → <title>HTML & CSS</title>
また、HTML文を表示させる場合
<p>初心者のためのホームページ作り</p>
↓
<p>初心者のためのホームページ作り</p>
このように符号に置き換えられた文字コードを記述しないと、& や < や >は
表示することができません。それらの実体参照符号をHTML内で記述し、ブラウザ
に表示させる場合には、下記のコードを使用します。
◆ほとんどのブラウザで使える特殊文字(実体参照文字符号)
セミコロン「;」は必須です。
すべてのブラウザで表示できるのは、下記の4つだけです。
表示 文字符号 番号符号 概要
-----------------------------------------------------------------------
< < < 大なり記号
> > > 小なり記号
& & & アンパサンド
" " " 2重線引用符(ダブルコート)
◆ISO-8859-1 ラテン文字実体参照(HTML2.0以降でサポートされています)
ただし、古いブラウザではサポートされていない場合があります。
(この中ではメールマガジンで表示できないコードがありますので、詳しくは
「今週のおさらい」を参照してください。「表示不能」とあるのは、単にこの
マガジンのテキストでは表示できないものです。)
ここでは代表的なラテン文字実体参照符号を取り上げています。
互換性を重視するのであれば、番号符号を使うとほとんどのブラウザで表示
が可能であると言われています。
表示 文字符号 番号符号 概要
-----------------------------------------------------------------------
空白   改行無し半角のスペース
表示不能 ¡   !を逆さまにした文字
¢ ¢ ¡ アメリカの通貨単位、セント
£ £ £ イギリスの通貨単位、ポンド
表示不能 ¤ ¤ 汎用通貨
¥ ¥ ¥ ご存知日本の通貨単位、円
表示不能 ¦ ¦ 縦破線
表示不能 © © 著作権を示す記号、丸の中にc
表示不能 ® ® 登録商標、丸の中にR
§ § § セクション Sを2つ縦に重ねた文字
¨ ¨ ¨ ウムラウト
表示不能 « « 二重山カッコ (始)
表示不能 ¯ ¯ マクロン 上付き線
± ± ± プラスマイナス
° ° ° 度 角度や温度の単位
表示不能 ² ² 上付きの 2
表示不能 ³ ³ 上付きの 3
´ ´ ´ 鋭アクセント 上付きのダッシュ
表示不能 µ µ マイクロ 量の単位(ミクロ)
¶ ¶ ¶ パラグラフ
・ · · 中黒(半角)
表示不能 ¸ ¸ セディーユ(カンマに似た文字)
表示不能 » » 二重山カッコ (終)
× × × 掛け算の乗法記号
表示不能 ¼ ¼ 4分の1
表示不能 ½ ½ 2分の1
表示不能 ¾ ¾ 4分の3
表示不能 ¿ ¿ 反転疑問符(逆さの?マーク)
表示不能 À À Aの上にダッシュアクセント
以下省略
◆マークアップ記号、国際化文字
表示 文字符号 番号符号 概要
-----------------------------------------------------------------------
' ' ' アポストロフィ
~ ˜ ˜ チルダ
- – – n の文字幅のダッシュ
表示不能 — — m の文字幅のダッシュ
‘ ‘ ‘ 引用符シングルコート(始)
’ ’ ’ 引用符シングルコート(終)
表示不能 ‚ ‚ 下つき引用符(カンマ)
“ “ “ 二重引用符(始)
” ” ” 二重引用符(終)
表示不能 „ „ 下つき二重引用符
† † † ダガー (短剣符)
‡ ‡ ‡ ダブルダガー (短剣符)
‰ ‰ ‰ パーミル
表示不能 € € 通貨単位ユーロ
以下省略
◆ギリシャ語
表示 文字符号 番号符号 概要
-----------------------------------------------------------------------
Α Α Α アルファ(以下大文字)
Β Β Β ベータ
Γ Γ Γ ガンマ
Δ Δ Δ デルタ
Ε Ε Ε エプシロン
Ζ Ζ Ζ ゼータ
Η Η Η イータ
Θ Θ Θ シータ
Ι Ι Ι イオタ
Κ Κ Κ カッパ
Λ Λ Λ ラムダ
Μ Μ Μ ミュー
Ν Ν Ν ニュー
Ξ Ξ Ξ クシー
Ο Ο Ο オミクロン
Π Π Π パイ
Ρ Ρ Ρ ロー
Σ Σ Σ シグマ
Τ Τ Τ タウ
Υ Υ Υ イプシロン
Φ Φ Φ フィー
Χ Χ Χ キー
Ψ Ψ Ψ プシー
Ω Ω Ω オメガ
α α α アルファ(以下小文字)
β β β ベータ
γ γ γ ガンマ
δ δ δ デルタ
ε ε ε エプシロン
ζ ζ ζ ゼータ
η η η イータ
θ θ θ シータ
ι ι ι イオタ
κ κ κ カッパ
λ λ λ ラムダ
μ μ μ ミュー
ν ν ν ニュー
ξ ξ ξ クシー
ο ο ο オミクロン
π π π パイ
ρ ρ ρ ロー
表示不能 ς ς ファイナルシグマ
σ σ σ シグマ
τ τ τ タウ
υ υ υ イプシロン
φ φ φ フィー
χ χ χ キー
ψ ψ ψ プシー
ω ω ω オメガ
◆数学・数式記号
表示 文字符号 番号符号 概要
-----------------------------------------------------------------------
∀ ∀ ∀ すべての
∂ ∂ ∂ 偏導関数を示す
∃ ∃ ∃ 存在を示す
表示不能 ∅ ∅ 空集合を示す
∇ ∇ ∇ ナブラ記号
∈ ∈ ∈ 元として含まれる
表示不能 ∉ ∉ 元として含まれない
∋ ∋ ∋ 元として含む
表示不能 − − すべての和を示す
表示不能 ∗ ∗ アステリスク
√ √ √ 平方根
∝ ∝ ∝ 比例
∞ ∞ ∞ 無限
∠ ∠ ∠ 角度
∧ ∧ ∧ 合接
∨ ∨ ∨ 離接
∩ ∩ ∩ 積集合
∪ ∪ ∪ 和集合
∫ ∫ ∫ 積分
∴ ∴ ∴ ゆえに
≠ ≠ ≠ 等しくない
≡ ≡ ≡ 合同
表示不能 &le ≤ 小なりまたは等しい
表示不能 ≥ ≥ 大なりまたは等しい
⊂ ⊂ ⊂ 真部分集合 含まれる
⊃ ⊃ ⊃ 真部分集合 含む
表示不能 ⊄ ⊄ 真部分集合 含まれない
⊆ ⊆ ⊆ 部分集合 含まれる
⊇ ⊇ ⊇ 部分集合 含む
⊥ ⊥ ⊥ 垂直
以下省略
◆一般記号
表示 文字符号 番号符号 概要
-----------------------------------------------------------------------
… … … 三点リーダー
/ ⁄ ⁄ スラッシュ
← ← ← 左矢印
↑ ↑ ↑ 上矢印
→ → → 右矢印
↓ ↓ ↓ 下矢印
⇒ ⇒ ⇒ 二重右矢印
⇔ ⇔ ⇔ 二重左右矢印
表示不能 ◊ ◊ ひし形
表示不能 ♠ ♠ スペード
表示不能 ♣ ♣ クラブ
表示不能 ♥ ♥ ハート
表示不能 ♦ ♦ ダイアモンド
ここで取り上げた実体参照符号はその一覧の一部に過ぎません。また、ブラウ
ザによってはすべてを表示できない場合があり、「?」や「□」などに代替され
て表示します。
詳しくは本誌サイト「文字の実体参照一覧表」を参考にしてください。
http://www.scollabo.com/banban/apply/ap8.html
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆ホームページに求められるもの その2 --- アクセスアップ
前回は、コンテンツについて解説しました。今回はあなたのホームページのアク
セスを向上させる糸口となるものを説明します。
◆検索サイト
私たちがインターネットにアクセスして、ある情報を探す場合にお世話になる
のが「検索サイト」です。キーワードを入力して、その「言葉」を持ったサイ
トのURLが表示され、私たちはそれをクリックして求める情報に行き着きます。
もし、検索サイトにあなたのページが表示されていない場合には、誰の目に
止まることなく、少しもアクセスは望めません。
◆検索エンジン
検索エンジンには大きく分けて2つあります。
1つは、検索サイトでのサイトの「登録」です。これをディレクトリ型と呼
びます。ディレクトリ型は、検索サイトで直接申し込みます。大小たくさんの
ディレクトリ型検索サイトが存在しますので、お試しください。
この、ディレクトリ型検索サイトの大手が「Yahoo ヤフー」です。
2つめは、サーチ型と呼ばれるもので、おもに世界中の URLを収集する検索
サーチロボットで集められた情報が掲載されます。サーチ型検索サイトの代表
的なのが「Google グーグル」「AllTheWeb オール・ザ・ウエッブ」です。
◆ヤフーの場合
ヤフーというポータルサイトで登録されているか、いないかではアクセス数が
かなり違うようです。1日に百万人以上が利用すると言われるだけあって、こ
こで表示される URLはそれなりのアクセスが期待できます。
しかし、いつの間にかヤフーでは、「登録」が「推薦」に変わってしまいま
した。以前の「登録」では簡単な審査で約1週間後には掲載されたのですが、
現在のシステムではかなり異なっています。
「推薦」したサイトが必ず掲載されるという保証はありません。例えば当講
座のようなサイトを「ホームページ作成」というカテゴリーで「推薦」しても
「似たようなページは現在たくさんあるので却下」という憂き目にあう可能性
のほうがはるかに高いようです。すでに「ヤフー」では、サイトとしての質が
変化し、「検索」という初期の目的を失っているのかもしれません。
◆グーグルの場合
基本的には、検索用サーチロボット(といっても形があるわけでなく、ある種
のソフトウェア)が世界中の Webサイトを巡って情報を収集し、主にタイトル
と、body要素直下のテキスト及び URLを掲載します。ヘッダのmeta情報は拾っ
てくれません。
ここでは、 URLの登録も受け付けており、登録しておくと優先的にロボット
を「派遣」するサービスを行っています。
グーグルを利用している検索サイトもあります。「goo グー」や「excite
エキサイト」などでは、自身の検索エンジンに「グーグル」を利用しており、
また、ヤフーでも「推薦」されている URLが見つからないと「グーグル」に引
き継ぐリレー式の検索方式を採用しています。(この点でもヤフーが変質した
要因になっていると指摘する人もいます。)
ただし、最近のグーグルの質が落ちアメリカの評論家は、かなりこき下ろし
ています。サイトの消滅や変更があっても更新されない、掲示板にかかれてい
る内容をそのまま掲載し、多くの利用者を悩ましているとの苦情が寄せられて
います。あるテクニックを使うと表示ページの一番最初に掲載させることが可
能だという意見もあり、その真偽にも疑問があります。
◆ヘッダで記述するmeta要素
本誌第21号で取り上げたヘッダ部に記述するmeta要素内での要約とキーワード
を拾ってくれるロボットは非常に少ないものです。
大手の「Infoseak」のサーチロボットが、meta要素を理解して拾ってくれる
ことが期待されます。ヤフーやグーグルはまったく期待できません。
◆如何にアクセスアップさせるのか
アクセスアップさせる妙手はありません。新聞やテレビ、マスコミで取り上げ
てくれれば別ですが、それも一過性に過ぎません。
ヤフーのトップページに有料で一定期間、バナーを張る手もありますが、あ
まりにも莫大な費用がかかります。(輸入高級車が買える!?)
やはりコンテンツが一番ものを言うようです。マスコミが取り上げないペー
ジでも大変なアクセスを誇っているサイトは実際に存在します。訪れる利用者
にとって魅力的なページはきっとブックマークしてくれる期待もありますし、
何度も訪問してくれます。非常に優れたコンテンツを持つサイトは、口コミや
検索サイトでも取り上げて広まります。費用は一切かかりません。
前回解説したとおり、コンテンツそのものが価値のあるものであれば、知ら
ず知らずにアクセスは飛躍的に向上します。
◆参考サイトURL
一発太郎 http://ippatsu.net/TARO/
無料または、有料で多くの検索エンジンに登録を代行してくれます。
Yahoo http://www.yahoo.co,jp/
大手ディレクトリ型検索サイト「ヤフー」
Google http://www.google.com/intl/ja/addurl.html
グーグルのサイト登録の申し込みページ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
WebページはHTML分の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
(今週のおさらい)
http://www.scollabo.com/banban/magazine/backnm_026.html
次回は、JavaScript講座 第2回を予定しています。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
ただし、平日の昼間は会社勤めなので、返事が遅れることがあります。ご了承
ください。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ (ID 0000090196)
誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。
バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
講座教材 http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
<えでぃた〜ず・るーむ>
タブレットPCが発売されました。キーボードやマウスを必要とせず、画面に直接
ペンなどで入力できる利点は多いかもしれません。特にお年寄りはキーボードが
苦手と言われているので福音になるでしょう。しかし、いかんせん高価です。な
かなか簡単に手が出せないのが現状です。
年末に向けて各社から魅力的な商品が発表されています。一時よりもいくらか
安くなって機能が増えたことは歓迎です。これもデフレ効果なんですかね・・
話は変わりますが、ブロードバンド環境(高速常時接続)では、悪意を持った
他人からの攻撃が、平均で1日10件程度あるという統計を昨日、警察庁が発表し
ました。これが事実だとすれば恐ろしいことです。
ファイヤウォールなどのセキュリティは、ある意味では「自転車の鍵」程度だ
そうで、簡単に侵入されてしまう危険性があるそうです。
クレジットカードを使ってオンライン・ショッピングをした後には、そのクッ
キーファイルを削除したり、大切なデータは他の媒体に移し変えたりするなど、
差し迫られた手段を講じる必要があります。
「ネットにセキュリティは存在しない」が私の持論です。攻撃されていること
を前提に、自らのパソコンの管理や、データのバックアップを行うことは、もは
や当たり前なのかもしれません。
頻繁にパスワードを変えたり、長時間席を離れる場合は、パソコンの電源を落
としたりするように心がけましょう。実に嘆かわしい現実です。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002 www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com