FC2ブログ

HP製作・WEBデザイン・javascript関係本の書評


HP製作やWEBデザイン、jQuery関係で読んだ本の書評


ここまで読んだ、HP製作・WEBデザイン・javascript/jQuery
についての書評


Web製作の現場で使うjQueryデザイン入門

西畑一馬 著 ASCII
book6.jpg

jQueryの基礎知識まったく無しでも、
この本1冊でかなり理解できるようになります。
スライドショー、ロールオーバーイメージから
ドロップダウンメニューやモーダルウインドウなど
また、ヴァリデーションやカルーセルパネルまで
実践的なプログラムの書き方を通じて、
jQueryが理解できるようになるおすすめの本です。



Webデザインの基本ルール プロに学ぶ一生枯れない
永久不滅テクニック

DesignLab ソフトバンククリエイティブ
book1.jpg

この本は、オールカラーで、
前半がHPデザインのパターンやヴァリエーションの紹介
後半がワークフローや、XHTMLとCSS,
少しだけjavascriptの紹介です。
前半のデザインパターンや基本カラーパターンの
ヴァリエーション紹介
はカラーで見やすくて
とても参考になりましたが、
後半の解説は概略のみで、やや量にかけます。
全体字が小さすぎて読みにくいのもちょっと難。



WebクリエイティブのためのDOMscripting

中村亮介著 毎日コミュニケーションズ
book2.jpg
yuga.jsの作者の本で、DOMの扱い方について
詳しく書いてあります。
とくにロールオーバーのやり方について、
ライブラリを使うときと、使わないときの説明が分かりやすくいです。





XHTML+CSSによるWebサイト製作を製作現場の視点で考える
Web標準ワークフロー

COMPLEX著 ソシム
book3.jpg

何人かでサイトをメンテナンスするときに、
汎用的なXHTMLやCSSの構造を作る
WEB標準化について、詳しく述べてある本です。
個人でサイト作るときには、あとで自分でメンテナンスしやすいように
XHTMLやCSSのセレクタの記述をまとめるのに良いと思います。
HPテンプレートを作るときのCSS記述方法がわかりやすかったです。
ただ2色刷りなのでちょっと地味なのと、
内容を半分くらいにまとめられるのでは?と思いました。




3週間でマスターWebデザインの教室

村谷圭一著 ソシム
book4.jpg

Dreamweaverとfireworksを使っての実践的サイトの作り方の本です。
HTMLやCSSが全く分からなくても、サイトを作れるように
図解で徹底してわかりやすく書いてあります。
ロールオーバーやIllustratorを利用したロゴの作り方など、
初心者用なのに、デザイン的にかなりちゃんとした物をつくれる
ように詳しく説明してくれます。
ただ、CSSやXHTMLについてはほとんど説明していないので、
少しでも本にあげている例からカスタマイズする場合は、
他にも本が必要になるでしょう。




CSS+jQuery Webデザインテクニック

葛西秋雄 著 BNN
book5.jpg

いきなり第一章からcssハックの説明がある、不思議な章立ての本です。
全体的にCSSについての説明は少なく、
jQueryの方に偏ってるかなと思います。
jQueryの基本的な説明というより、実践的な使い方がメインの本で
ドロップダウンメニューや、フォトギャラリーの説明は
実際の例をあげて、細かく説明してあります。
jQueryのプログラムの書き方の知識が少しある人向けですが、
jQueryUIの説明は少ないです。




jQueryUI+厳選プラグイン41 実践サンプル集


葛西秋雄 著 秀和システム
book7.jpg

jQueryUIについての前半と
後半がjQueryプラグインの紹介なのですが、
どっちかでまとめて1冊にしてほしかった感じ。
jQueryUIも各種機能を一通り説明してあるのですが、
もうちょっと深くオプションまで説明してほしかったです。
プラグインも紹介にとどまる感じで、
実装するには個々のプラグインのサイトの説明を
読まないといけないでしょう。




新人プログラマのためのjQuery Webアプリケーション開発講座

掌田津耶乃 Rutles
book8.jpg

jQueryにいきなり行かずに、javascript、DOMときて
それから丹念にjQueryを説明します。
DOM操作からイベント処理までの説明は
とても分かりやすかったです。
後半にjQueryUIについての記述もあり、
実際に使ってみたときの問題点と解決法など、
それほどスペースは割いていないのに参考になりました。




jQueryクックブック

オライリー・ジャパン
book9.jpg

もはや参考書として、絶対的に持っておくべき1冊。
jQueryで何か書いてうまくいかなかったとき
最初に読み返す本です。
問題から解決方式で書かれているため、
全部最初から読むというより、必要な部分をその都度
読むといいかな。



それからJavaScript関係の本



javascript辞典

(株)アンク著 翔泳社
book10.jpg

用例から引くjavascriptの書き方辞典で、
非常に見やすく、調べやすいです。
後の索引も使いやすくて重宝してます。
フルカラーで、豊富な内容なわりに
値段も安く、おすすめです。




Head First JavaScript

Michel Morrison著 オライリー・ジャパン
book11.jpg

副題に頭とからだで覚えるJavaScriptの基本とついてます
ものすごくファンキーな本
絵や、クロスワードパズルなど様々な趣向で
最後まで読み続けられるようにしてくれています。
向き不向きがあると思いますが、楽しい本。
本の趣旨として単に読むだけではなく、
本に鉛筆で書き込む欄があり、
実際にスクリプトを書く癖をつけなさいと
指示があるけれど、つい面倒で読むだけで終わらせてしまった。



PHPとAction スクリプト関係の本はまた後日。


















スポンサーサイト



テーマ : HP作成
ジャンル : コンピュータ

jQueryUI tabでのajax 別のHTMLを表示


jQueryUI tabを使ってajax 別のHTMLを表示しよう



では、早速jQueryjQueryUIを読み込みます。


<link href="jquery-ui-1.8.4.custom/css/custom-theme/jquery-ui-1.8.4.custom.css"
rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
src="jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript"
src="jquery-ui-1.8.4.custom/development-bundle/external/jquery.cookie.js"></script>



CSSで必須なのはこの記述です

.ui-tabs .ui-tabs-hide {display: none;}


次のjQueryは最新版のjQueryをGOOGLE APISからもらってきてます。
次がjQueryUI この時点では最新版は1.8.4
必要なのはCoreだけです。
それから jQueryUIのcookie.jsが必要です。
順番はjQueryUIが先で、次にcookieで。


まず
HTMLタグの打ち方はこちら

<div id="tabs" class="ui-tabs">
<ul class="ui-tabs-nav">
<li class="ui-state-default"><a href="#tabs-1">タブ1</a></li>
<li class="ui-state-default"><a href="#tabs-2">タブ2</a></li>
<li class="ui-state-default"><a href="リンク先.html">タブ3</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-panel">
<p>タブ1の内容</p>
</div6gt;
<div id="tabs-2" class="ui-tabs-panel">
<p>タブ2の内容t</p>
</div>
</div>

赤字の部分で、jQueryUIでカスタムテーマを設定してる場合、
その設定がきくようになります。

青字の部分をui-state-hover とかui-state-activeに変えると
ホーバー時やアクティブの時の色に変わります。

他のページを読み込んでタブのパネルに表示するときは
a href以下に .htmlを指定するだけです
<a href="リンク先.html">



読み込む先のHTMLの方のタグは
<div class="remote">内容</div>

にでもしときます。
(jQueryUIの解説ではa href="リンク先.html" にtitleをつけて、
それと表示させたいdivのidを一致させるだのスペースはアンダースコアに変換しろだの
書いてありますが、何故かそうやっても動かなかったので、別の方法にしました。)


次がtabの設定のjQueryのコード


<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
var $tabs = $("#tabs");
var selected = $tabs.tabs('option', 'selected'); // => 0
var cache = $tabs.tabs('option', 'cache');
var cookie = $tabs.tabs('option', 'cookie');
var fx = $tabs.tabs('option', 'fx');
var ajaxOptions = $tabs.tabs('option', 'ajaxOptions');
var spinner = $tabs.tabs('option', 'spinner');
var collapsible = $tabs.tabs( "option", "collapsible" );
var event = $tabs.tabs( "option", "event" );


$tabs.tabs( {
load: function(event, ui) {
if(!ui.index == 2){
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});}}, //タブインデックス2以外ならパネルが開く
collapsible: false,
fx: { height: 'toggle', opacity: 'toggle' },//アニメーション設定

cookie: { expires: 7 } , //クッキーの有効期間設定
cache: true ,      //キャッシュ有効かどうかの設定
selected:0,        //初期に開いてるパネル選択 indexは0から
spinner:'Loading .....',//読み込み時に表示される文字設定
ajaxOptions:{async:false,    //ajax設定
dataFilter:function(data){
return $(data).find('.remote').html();
                     //リンク先のdiv class remote以下だけ読込
}
}
});
$tabs.bind('tabsselect', function(event, ui) {
if (ui.index == 2){
window.location.href = "http://リンク先.html";
location.href = $.data(ui.tab, 'load.tabs');
return false;              //tabインデックス2にイベントをバインド
});
});








テーマ : HP作成
ジャンル : コンピュータ

以前のPSWDのJqueryUI DIALOGが


以前passwordで設定したページに飛ぶJQueryUIダイアログのプログラムを書いたけど、色々誤作動があったので

もう一度チャレンジしようと思い立った!

passwordをval()で取得して、それを変数においたのがまずかったみたいなので、

そこを直して、なおかつ少しばかりのヴァリデーションをする計画!!




$(document).ready(function(){      //この書き方のほうが、落ち着くw
var $pswd = $("input:password[name=pswd]");
var $help = $("#helpText");
var regex = new RegExp (/^([a-zA-Z0-9_\.\-]+)*$/);    //正規表現
$("#dlog").dialog({
bgiframe:true,
width:'300',
minHeight:'200',
modal:true,
autoOpen:false,
title:"password",
buttons:{
"OK": function(){
(if($pswd.val() == ""){      //もしパスワードが空欄なら、ヘルプテキストでinput passwordと表示される
$help.html("input password");
$pswd.focus(function(){ $help.html("");});return true;}nbsp;     //パスワード欄にフォーカスが当たると、ヘルプが消える
else if(!regex.test($pswd.val()))nbsp;     //パスワードが大文字小文字と数字以外だと、ヘルプが表示される
{$help.html("input a-z, A-Z and 0-9");
($pswd).focus(function(){$help.html("");$pswd.val("");});
return true;}
else {
window.location = "/ディレクトリ/" + ($pswd.val()) + ".html";
$("#dlog").dialog("close").collapse().empty();}
},
"Cancel": function(){$pswd.val("");}
}

});



HTMLのほうは




<div id="dlog">
<input type="password" name="pswd" size="30" maxlength="12" />
<p id="helpText"></p>
</div>



として、</body>直前におく。

CSSは



#dlog {display:none;}


と、セットして終了!

試してみるべし!!
IEは大丈夫・・・chromeもOK・・・SAFARIもOK・・そして
魔のFireFox!
dialogがひらかなーい!!
Jquery1.8.4から1.8.5にしたのに、またダメか~。
多分twitteranywhereかなんかと干渉してるのかな~。
全部jqueryで囲まないとだめかしらん・・



jqueryUIのposition.js


jQueryUIの中のposition.jsが、何故かFIREFOXで、エラーが出てしまうのは何故???

おかげでdialog()もエラー

blowserで選別して、別のリンクを用意することに><

あと、(function($){ の書き出しだとエラーがでて、(document).ready(function(){ だとエラーにならなかったり。

本にはどちらも同じと書いてあるのに、なんでだろう・・・・

それはおいといて、子どもの小学校のPTAの役員が回ってきそうで・・・・><

もうこの4年間、ずーっと学年委員やらされてるのに。。。ついに役員・・・そんな暇本当にないのになぁ。

みんな忙しい忙しいって、あー断りきれない自分がうらめしい・・・・

jqueryUi でdialog パスワード入れて


jqueryUIdialogを使って、ボタンを押すとdialogが開き、パスワードを入力すると、
そのパスワードの名前のhtmlにリンクして、一応認証の代わりにするプログラム

を作ってみました。






$(document).ready(function(){
var regex = new RegExp (/^([a-zA-Z0-9_\.\-]+)*$/);
$("#dlog").dialog({
bgiframe:true,
width:'300',
minHeight:'300',
modal:false,
autoOpen:false,
title:"password",
buttons:{
"OK": function(){ var $help = $("#helpText"),
$pswd = new $("#pswd"),
$pswdVal = $pswd.val();
if($pswdVal == null){return true;}
else if($pswdVal.length == 0){if($help != null)$help.html("input password");

($pswd).focus(function(){$help.html("");});
var $pswdVal = new $("#pswd").val();return true;}

else if(!regex.test($pswdVal)){if($help != null)$help.html("input a-z, A-Z and 0-9");($pswd).focus(function(){$help.html("");$pswd.val("");});
return true;}
else {

window.location.href = "/ディレクトリ名/" + ($pswdVal) + ".html";};


$("#dlog").dialog("close").collapse().empty();destroy();},
"Cancel": function(){$("#pswd").val("");}

modalをfalseにしないと、他の場所でdialog使ってると、うまく作動しません;;

最初に初期化しても、どうにも上手く動かないので、modalはあきらめました;;

パスワード入力がなくok押したり、記号などが入ってると、helptextに注意が出ます。



htmlの方は、最後bodyの前あたりに



<div id="dlog">
<input type="password" id="pswd" size="30" maxlength="12" />
<p id="helpText"></p>
</div>
<p><input type="button" id="btn" class="ui-widget" value="管理用" /></p>

とおいておきます。

結果的にパスワードで入れた名前.htmlというページに飛べます。(ディレクトリがある場合、青の部分に書く)

せっかく秘密にしたページから、また他にときは、何か一つジャンプページを用意して、そこに飛んでから、

他に遷移するようにすれば、OK!




SEO対策:日記
検索フォーム
カテゴリ
最新記事
アンケート
月別アーカイブ
お名前.com
リンク
RSSリンクの表示
google
MicroAD
ninja
忍者アド
広がるブログ
blomotion
サンプル・イベント・モニターならBloMotion
プレスブログ
[プレスブログ]価値あるブログに換金可能なポイントを差し上げます。
wadax
ブログ村
フリーエリア
人気ブログランキングへ
ブログランキングドットネット
リンクリックブログランキング
フリーエリア
FC2ブログランキング

FC2Blog Ranking

AMAZON
カラーミーショップ
ブログ広告
ブログ広告ならブログ広告.com
ぐるなび
中古DVD
QRコード
QR
SEO