Home

WebTecNote

[HTML] パンくずリンクについてのまとめと考察

パンくずリンク|パンくずリスト（breadcrumb navigation）はどうコーディングするのが今風なんだろう。
ふとそんなことを思い立ってしまったので、名を知られたサイトのソースを覗き見して考えることにした。

パンくずリンクのデザインについてまとめられたBreadcrumbs In Web Design: Examples And Best Practicesという記事によれば、
よくあるデザインパターンは次の通りである。

  1. 1行テキスト
    テキストを横並びにしただけの伝統的なパンくず。各ページリンクの間に区切り文字が入る。

    1. ページタイトルを　>　で繋いだもの
    2. ページタイトルを　>　以外の文字で繋いだもの
  2. シンプルなリンクの羅列
    区切り文字を入れずに画像やCSSで階層を表現する。
  3. マルチステップ
    開始から完了までの行程を表示する。
  4. サブナビゲーションつき
    各ページリンクに属するページをマウスオーバーで表示する。
  5. インタラクティブなアクションつき
    deliciousのパンくずリンクは階層表示とタグの絞込みを兼ねている
  6. 実験的なもの
    Booreilandはナビゲーションがパンくずリンクっぽい。

割合についてはWeb Design PracticesのBreadcrumb Navigationという記事が参考になるかも。
圧倒的に水平＋右矢印のデザインが多い。

Continue reading

[Google Analytics] 3年分のブラウザシェア推移を出してみた

まとりさんがTwitterで晒してた統計に便乗して自分のブログのをみてみたら、
なかなか面白かったのでもうちょっと細かく晒しておこうと思いますー。

データは直近1か月（11/26-12-26）が3年分です。

Continue reading

[CSS3] Xmas Gift Box

去年イラレでクリスマス用のプレゼントボックスを描いたので、
じゃあ今年はCSSで描こうと思って実践してみたのがこれです。

CSS3 Xmas Gift Box - jsdo.it - share JavaScript, HTML5 and CSS

CSS3で立方体を表現するので有名なのはtransformによる3D Cubeですが

クォータービューより正面から見た立体の方が好きかな～と思ったので、台形で立体っぽくすべく
背景色と同じ色の:before、:after擬似要素を次のように被せて削ってます。

擬似クラス要素

もっとごちゃごちゃとDivを使ったりJavaScriptを使ったりすればよりリアルな表現が出来そうだけど、
あんまりソースがスパゲッティになると美しくないので最低限必要なものだけにしといた。

アニメーションは当初フタが右方向に回転しながらパカッと開くのを想定してました。（ヘーベルハウスのﾊｰｲ!みたいな感じ）
これが実際やってみると擬似クラス要素にtransitionが効かないし、元々rotateしてある要素を改めて回転させるのが面倒だったので上方向にパカッとするので落ち着いた次第。

[ZF] Zend_Form : Remove the submit-button value from url parameters

Zend_Formでフォームエレメントを作る場合にはnameが必須なんだけど、
GET送信するとnameがあるばかりにボタンまでURLに含まれてしまうので
Redirectorによる回避策を試してみた。

検索のフォーム。methodをpostにする。

PLAIN TEXT
PHP:
  1. class Application_Form_Search extends Zend_Form
  2. {
  3.     functions init(){
  4.     $this->setMethod('post')
  5.         ->clearDecorators()
  6.         ->addDecorator('FormElements')
  7.         ->addDecorator('HtmlTag',array('tag'=>'div', 'class' => 'zend_form'))
  8.         ->addDecorator('Form');
  9.            
  10.     $this->addElement('text', 'keyword', array(
  11.         'label'      => 'Keyword',
  12.         'required'   => true
  13.     ));
  14.    
  15.     $this->addElement('submit',
  16.         'submit',
  17.         array(
  18.             'label'    => 'Search',
  19.             'required' => false,
  20.             'ignore'   => true
  21.         )
  22.     );
  23.     }
  24. }

検索する場所は仮にindexとして、index.phtmlには検索フォームを表示しておく。

getRequest()->isPost()で送信された値があり、バリーデーションもtrueなら
送信された値($params)からボタンを削除(unset)する。
アクションヘルパーのRedirectorに$paramsを渡してsearchActionにリダイレクトする。

PLAIN TEXT
PHP:
  1. public function indexAction()
  2. {
  3.     $this->view->searchForm = $this->_searchForm;
  4.    
  5.     $request = $this->getRequest();
  6.     $params = $request->getPost();
  7.    
  8.     if($request->isPost() && $this->_searchForm->isValid($params)){
  9.         unset($params['submit']);
  10.         $this->_helper->Redirector->setGotoSimple('search', null, null, $params);
  11.     }else{
  12.         $this->view->data = $this->_mapper->fetchAll();
  13.     }
  14. }

※$this->_searchForm　---> instance of　Application_Form_Search
※$this->_mapper --->　instance of DataMapper

searchActionに飛ばされた時、検索キーはZendライクなGETパラメーター（/key/value/のパターン）になっているので、
getRequest()->getParams()でキーワードとかを取り出して使う。

PLAIN TEXT
PHP:
  1. public function searchAction()
  2. {
  3.     $request = $this->getRequest();
  4.     $params = $request->getParams();
  5.    
  6.     $this->view->data = $this->_mapper->search($params);
  7.     $this->view->searchForm = $this->_searchForm->populate($params);
  8.    
  9.     $this->render('index');
  10.    
  11. }

[ZF] Zend_View HeadTitle method tips

ページタイトルの設定をするビューヘルパーのHeadTitleについていろいろ。

基本

headTitleでページタイトルを設定。

controller:

PLAIN TEXT
PHP:
  1. $this->view->headTitle('Site Name');

Output:

PLAIN TEXT
HTML:
  1. <title>Site Name</title>

Continue reading

 Page 7 of 76  « First  ... « 5  6  7  8  9 » ...  Last » 

Home

Scripts
カテゴリー
Recent Reactions
最近の投稿
最近の修正
Tag Cloud
おすすめサーバー・他

メタ情報

Return to page top