Google+ページをはじめてみました!

本日Google+ページをやってみました!
正直Google+自体まったくといっていいほど触っていないのですが、、
とびこえてGoogle+ページを作成しました(汗汗

ちなみにGoogle+はフレンド一人です。。(苦笑

さてGoogle+ページにつきまして、
簡単に下記サイトから表示形式を指定して設置ができました。

https://developers.google.com/+/plugins/badge/config?pageId=115030082405355039889&hl=ja 

設置には、HTMLの<head></head>内と、表示箇所の2箇所にコピペでソースを置けばOKでした!楽チンです。

本ブログにも左側のサイドバーの下の方にバッジ(?)を設置しました。

グーグルプラスページ

MatsudaPress on Google+ページ

 

 

適宜使えそうな便利ツール集

たまに場面場面で利用したい、変換・整形・難読化などをWEBサイトで
簡単に利用できるサイト一覧です!

javascript 圧縮 難読化
http://www.gosu.pl/decoder/

JSONフォーマット可視化
http://chris.photobooks.com/json/default.htm

SQL整形ツールWEB
http://sqllite.webdesktop.jp/

htmlインデント整形ツール 
http://hamcutlet.fjord.jp/

アイコンエディタ
 http://www.xiconeditor.com/

.htaccessエディター
 http://www.htaccesseditor.com/

カラーピッカー
 http://www.web-graphics-maker.com/color_picker/

上記サイトと作っていただいた方ありがとうございます!m(_ _)m

奥行きのある3Dにみせるjqueryライブラリ『smart3d』を使ってみました!

先週の休みにせっかくこのブログをリニューアルしたので
TOPのヘッダー画像にギミックを入れてみました!

画面上部の画像の上でマウスを動かすと奥ゆきがあるように動きます。

最近googleのトップロゴもよくギミックがつかわれていますが、まけじと何か新しいのを入れようと思い色々さがしたところ『jquery.smart3d』というライブラリを発見!

『jquery.smart3d』
http://4coder.info/en/code/jquery-plugins/smart3d/

奥ゆきを出し3Dっぽくみせることができるライブラリです。
いくつか用意した画像を何枚もかさねています。png画像を利用して、blurをかけてそれっぽくしてます。
インスパイアされたのはバイオハザード4のこのシーン↓(汗

バイオハザード4インスパイア

 

ただ背景が白くて奥ゆきがあるというだけですが、、(汗

・・・・・利用方法も簡単で、下記ライブラリとjqueryを読んで

<script type="text/javascript" src="/js/jquery_smart3d/jquery.smart3d.js"></script>

あとは、jqueryで下記のように記述し

<script type="text/javascript">
    $(document).ready(function() {
        $('#smart3d-head').smart3d({ last_is_static: true });
    });
</script>

htmlで下記のように表示した画像を指定する。とてもシンプルにできています。

<ul id="smart3d-head" style="display:none">
                                <li><img src="/images/headers3d/back1160.jpg" /></li>
                                <li><img src="/images/headers3d/matsudapresslogo3d.png"  /></li>
</ul>

一応IEにも対応してます。
またmedia queriesでスマホなどの画面サイズ小にも対応するため、
画面サイズが大きくないとこのギミックが表示されないようにしました。
※onloadで読み込んでいるので、読み込みが完了してから上部画像みていただけると幸いですw

 

ずっとプログラマーとしてやってきたので、
最近デザインももっと勉強しなきゃと日々危機感を感じている今日この頃。。

HTMLのmeta(refresh)タグで各ブラウザのリダイレクトの検証

<html>
<head>
<title>Redirect Page

<meta http-equiv="Refresh" content="0; URL=http://google.co.jp" />
<meta http-equiv="Refresh" content="0; URL=http://deveroid.com" />
<meta http-equiv="Refresh" content="0; URL=http://matsudapress.com/" />

</head>
<body>
<p>読み込み中</p>

</body>
</html>

上記のように、metaタグのリダイレクト設定をした際に、
どのリダイレクトが適用されるか下記ブラウザでチェックした結果をメモします。

FireFox3.6 3つ目のURLにリダイレクト
Google Chrome10 3つ目のURLにリダイレクト
Internet Explorer9 beta 2つ目のURLにリダイレクト
Internet Explorer8 2つ目のURLにリダイレクト
Safari5 / Mac 3つ目のURLにリダイレクト

そもそも複数リダイレクト設定すること自体ないのですが、そんなソースをjavascriptで
操作する際など予期せぬ対処の参考になれば幸いです。

「第0回 HTML5プログラミング&クリエイティブ コンテスト」最終結果発表・・反省

「第0回 HTML5プログラミング&クリエイティブ コンテスト」最終結果発表
http://codezine.jp/article/detail/5828

http://www.atmarkit.co.jp/news/201103/08/html5con.html

上記、以前応募したhtml5のコンテストの最終結果が発表されました! 😮

結果は予想通り、反省点が残るばかりな結果です。。
次回チャンスがあれば、ちゃんと事前にプランニングして時間も確保したいと思います。

ツイットショット

twit shoot!
http://komachu.sakura.ne.jp/0thgallery/detail.html#free,108

twit shoot