旧ブログコンテンツ

現在は note で発信しています。

16ページ目   #jQuery

#Android #CMS #CodeGrid #CPI #CS5 #CSS3 #CSS_Sprite #Dreamweaver #EC #Firefox #Fireworks #HTML5 #iPhone #kddiウェブコミュニケーションズ #LP #Movable_Type #Photoshop #RIA #SEO #UI #USTREAM #UX #WordPress #たにぐち_まこと #とみた_ちひろ #まぼろし #アクセシビリティ #カンプ #スマートフォン #スマートフォンサイト #ソーシャルメディア #ソースコード #デザイン #デザイントレンド #デザインビュー #デザインメソッド #ビジネス・アーキテクツ #ビジュアルデザイン #ピクセルグリッド #レイアウト #中村_享介 #丸山_章 #伊原_力也 #優クリエイト #原_一浩 #小久保_浩大郎 #小山田_晃浩 #岡部_和昌 #徳田_和規 #拡張機能 #撮影 #森_和恵 #植木_真 #植木真 #比留間_和也 #益子_貴寛 #矢野_りん #神森_勉 #福岡 #福島 #福田_泰雄 #茂木葉子 #西畑_一馬 #電子書籍 #飯田_昌之 #高津戸_壮 #鷹野_雅弘 

CSS Nite in OSAKA, Vol.14 フォローアップ(音声公開)

2009年4月14日、アップルストア心斎橋にて行われた、CSS Nite in OSAKA, Vol.14での音声ファイルをシェアいたします。

jQueryプラグインを利用してユーザフレンドリーなフォームを設計する(徳田 和規)

写真:徳田 和規 (とくだ・かずのり)

ウェブ制作者のためのパノラマコンテンツの利用法(二宮 章)

写真:二宮 章(にのみや・あきら)

ざっくり解説 -Flash Liteの仕様- Liveバージョン(岡田 昇三)

写真:岡田 昇三(おかだ・しょうぞう)

スライドについては、「CSS Nite in OSAKA, Vol.14 フォローアップ(写真・スライド公開)」にて公開していますので、そちらもあわせてお楽しみください。


CSS Nite in OSAKA, Vol.14 フォローアップ(写真・スライド公開)

2009年4月14日、アップルストア心斎橋にて行われた、CSS Nite in OSAKA, Vol.14での様子です。

写真:CSS Nite in OSAKA, Vol.14終了

photo by おかだよういち(http://s-style-arts.info/

今回も大盛況にて、120名以上の方にご参加いただきました。

<br>
本当にありがとうございます!</p>

今回、セッションをしてくださったスピーカーさんよりスライドが届きましたので、シェアいたします。

jQueryプラグインを利用してユーザフレンドリーなフォームを設計する(徳田 和規)

写真:徳田 和規

このスライドですが、徳田さんの自作オリジナルです。なめらかな動きもさることながら、左下の「MENU」をクリックすると...
クリエイターとして、細部まで作り込んであるスライドをぜひごらんください。

ウェブ制作者のためのパノラマコンテンツの利用法(二宮 章)

写真:二宮 章

今回、セッション中にパノラマ写真を撮影してくださいました。その写真は、QTVR Diaryにアップされるかもしれません。
また、QTVR Diary -OFFLINE-のほうもよろしくお願いいたします。

ざっくり解説 -Flash Liteの仕様- Liveバージョン(岡田 昇三)

    <li><a href="http://3simples.com/cssnite/vision/slide.swf">スライド(リンクします・swfファイル)</a></li>
    

写真:岡田 昇三

セッション中に、参加者の携帯電話と連携し、なつかしの「へぇー」ボタンが登場!携帯電話で「へぇー」が押されると、スライドの上部にリアルタイムに表示が流れます。「へぇー」だけではない言葉も流れたりで、ユーモアいっぱいのセッションでした。
結果、最終的には500へぇーを突破しました!

また、音声ファイルについては、準備が出来次第シェアしていきますので、もうしばらくお待ちください。


CSS Nite in OSAKA, Vol.14 の見どころ、ピックアップ!

4月16日にアップルストア心斎橋で開催予定のCSS Nite in OSAKA, Vol.14に出演される徳田和規さんが作った『jQuery.validation.js』を一足お先にご紹介します。詳細はセッションでご説明してくださいます。

快適なform入力チェックを楽に実装! jQuery.validation.js

イライラさせて顧客獲得を逃したフォーム、それを改善すべく人気のライブラリ、「jQuery.validation.js」。

とにかく、JavaScriptが分からない方も必見!<br />

皆さんの大切な「フォーム」を快適にするために、実装方法を憶えておきましょう!

□■□■クール&シンプルなサンプル□■□■
http://moto-mono.net/sample/validation/

フォーム画面遷移なく、クールな入力チェックをとても簡単な実装で行える徳田さんのオリジナルのJavaScriptライブラリです。
セッションでは、実際どれだけ簡単か、実装するための方法と効果を見せていただきます。

正直、JavaScriptが分からない方でも、XHTMLが理解できている方なら、とても簡単でカッコいい「フォームの入力チェック」が作成可能になります。

例えばお問い合わせフォームにこんな設定をしたい場合↓↓↓

・必須項目指定<br />
・メールアドレスチェック<br />
・全角禁止<br />
・電話番号<br />
・数値のみかどうか?<br />
・郵便番号<br />
他</p>

【例】メールアドレスチェックの場合

&lt;input type=&quot;text&quot; name=&quot;mail&quot; id=&quot;mail&quot; value=&quot;&quot; class=&quot;email hankaku required&quot; /&gt;<br />
JavaScriptファイルを読み込み、設定を終わらせた後input要素のクラス名の値を上記のように設定するだけで、必須項目・メールアドレスチェック・全角禁止が可能になります。※</p>

■メールアドレス再入力チェックの場合

■入力文字数をチェックする場合<br />
なども楽に実装可能になります。</p>

※アクティベートが必要ですが、その簡単な方法も教えて下さいます。

# $(function(){<br />
# $(&quot;フォーム要素のID属性&quot;).validation();<br />
# });</p>

とにかく、実装方法もお伝えいただくので、「コードが苦手」な方にはぜひみていただきたいセッションです。

実際どれだけ簡単か、実装方法と効果をその目でお確かめください。

    <li><a href="https://cssnite.jp/osaka/vol14/">CSS Nite in OSAKA, Vol.14</a></li>
    <li><a href="https://cssnite.jp/archives/post_1468.html">出演者情報(1):CSS Nite in OSAKA, Vol.14</a></li>
    


出演者情報(1):CSS Nite in OSAKA, Vol.14

4月14日にアップルストア心斎橋にて行われる、CSS Nite in OSAKA, Vol.14の出演者である徳田 和規さんが、ご自身のブログでイベントを紹介されています。

徳田さんは、jQueryを使ったフォームについてお話されます。セッションのほうも、お楽しみに!

		<div class="lp-session">
			<h3>jQueryプラグインを利用してユーザフレンドリーなフォームを設計する</h3>
			<p>フォーム入力中に面倒くさくなって入力をやめてしまったことはありませんか?<br />

フォームでの離脱率をもう少し下げたい、コンバージョンを上げたい、、でもどうすれば...
jQueryプラグインを使って使いやすいフォームを設計してみましょう。

			<div class="profile">
				<h4><img src="https://cssnite.jp/osaka/osaka14_tokuda.jpg" alt="写真:徳田 和規 (とくだ・かずのり)" width="120" height="120" class="right picFrame" />徳田 和規 (とくだ・かずのり)</h4>
				<p><a href="http://www.n-di.co.jp/">株式会社 ND&amp;I</a>所属</p>
				<p>Webサイト・UI設計構築、CMSカスタマイズ、マークアップ担当</p>
				<p>株式会社ND&amp;IでWebサイト・UI構築、CMSカスタマイズ、マークアップを担当。<br />WordPressやMTなどのCMSを使ったWebサイト・ブログ構築やJavaScriptを利用した使いやすいUI設計などを得意とする。</p>

ブログでは自作のjQuery・WordPressプラグインなどを公開している。

<a href="http://moto-mono.net/">5509</a>(個人サイト)</p>
			</div>
		</div>

CSS Nite in OSAKA, Vol.14:タイムテーブル決定

4月14日に開催するCSS Nite in OSAKA, Vol.14のタイムテーブルが決定しました。

  • セッションごとにお席の入れ替えを予定しています。
  • 恒例のプレゼントじゃんけん大会も予定しています。
	<table class="bordered" summary="タイムテーブル">
		  <tbody>
		    <tr>
		      <th scope="col">時刻</th>
		      <th scope="col">進行</th>
		      <th scope="col">時間</th>
	        </tr>
		    <tr>
		      <td>19:00</td>
		      <td>開演/オープニング</td>
		      <td>1-2分</td>
	        </tr>
		    <tr>
		      <td>19:02</td>
		      <td>『jQueryプラグインを利用してユーザフレンドリーなフォームを設計する』/徳田 和規</td>
		      <td>20分</td>
	        </tr>
		    <tr>
		      <td>19:27</td>
		      <td>『ウェブ制作者のためのパノラマコンテンツの利用法』/二宮 章</td>
		      <td>30分</td>
	        </tr>
		    <tr>
		      <td>20:02</td>
		      <td>『ざっくり解説 -FlashLiteの仕様- Liveバージョン』/岡田 昇三</td>
		      <td>20分</td>
	        </tr>
		    <tr>
		      <td>20:30</td>
		      <td>終演</td>
		      <td></td>
	        </tr>
	      </tbody>
	  </table>