2013-05-01から1ヶ月間の記事一覧

Webの勉強の準備:ものを作るということ

『読む美術館』 山内宏泰(リアス・アーク美術館 主任学芸員)氏の資料を転載させていただいております。 いつか訪ねてみたい美術館です。 すばらしい内容ですから、何度も読み返してください。 形而下と形而上 「具象・抽象」と似た言葉で「形而下・形而上…

Webの勉強の準備:ツールの選択

ツールの種類 デザインのためのツール プログラミングのためのツール デザインのためのツール ※授業では、バージョン5.5を使用します。 使えるようになることは就職には必須です。 授業では、以下の2つのポイントを重点的に訓練します。 クリエイティブに利…

Webの勉強の準備:無料のサービスを利用する

Jimdo 無料簡易CMS(Content Management System) 無料のサービスは、有料のほうに誘導しようとするのが常ですが、無料の範囲内で使える部分を利用してみましょう 2013年時点での運営会社は、KDDIです 登録 Gmailアドレスを使って登録をします レイアウト 右…

Webの勉強の準備:登録

無料サービスへの登録 Web上の無料のサービスを利用するためには、メールアドレスを使った登録が必要になります Gmailアカウントを作成する 個人のアドレスとは別にしたい場合には、授業用のアドレスを作成します 2013年時点では、企業が専用メールサーバを…

Webの勉強の準備:検索の結果を自分のものにする

実際の授業でもっともつまずくことが多いのは、Windowsの使い方です。 Webの授業内容以前に、デスクトップの操作が思い通りにならなくて授業についてこれないケースがもっと多いのです。 もちろん、OSが使えないのですから、PhotoshopやDreamweaverが簡単に…

Webの勉強の準備:検索

何をすればよいかわからない それを自覚することが、初心者のいま始めることです あくまでも、Webの仕事に就きたいという気持ちがあっての話です。 誰かに聞いてみる インターネット上の質問サイトに質問してみる それで、納得のいく答えが得られたとすれば…

Webの勉強の準備:客観視

Webの仕事に就く デザイナー・プログラマーになりたい この話は、カタカナ職業が生まれてから、常にある話です。 もちろん「カメラマン」「・・・マン」「シェフ」「パティシエ」にいたるまで、すべての職業にです。 ここでは、「なれっこないよ!」という否…

アニメーション

アニメーション 「アニメーション」とは、生命や魂を意味するラテン語の「ANIMA」を語源とする言葉 一般的に、本来静止している絵を生きてるかのように動かす技術 歴史的には、1830年代プラトーの作ったフェナキスティスコープや、ホーナーの考案したゾート…

実践演習-スライドショー

スライドショー - jQuery基本形 <h1>slideshow</h1> <div class="slideshow"> <img src="imgs/ph01.jpg" alt=""> <img src="imgs/ph02.jpg" alt="" class="alt"> <img src="imgs/ph03.jpg" alt="" class="alt"> </div> <div class="slideshow"> <img src="imgs/illust1.png" alt=""> <img src="imgs/illust2.png" alt="" class="alt">…</div>

実践演習-外部ファイルから表作成

外部ファイルから表作成 - 基本形 <h1>ajaxTable</h1> <table> <thead> <tr> <th>No.</th> <th>名前</th> <th>メール</th> </tr> </thead> <tbody id="tbody"></tbody> </table> $(function(){ var tbody = $('#tbody'); $.getJSON('data.json', function(people){ $.each(people, function(i, person){ var text_no = person.no; var text_nam…

実践演習-ツールチップ

ツールチップ - jQuery基本形 <ul> <li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li> <li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li> <li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li> <li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li> </ul>

実践演習-タブコンテンツ

jQuery UI タブメニュー ページを遷移させず複数のコンテンツを見せたい場合に利用する tab <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Tab</title> <link href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <h1>Welcome to jQuery UI…</h1></body></html>

実践演習-アコーディオン

40分で覚える!jQuery速習講座 jQueryのコードを記述する場所 上のコードは$(document).ready()の省略形 要素を指定するためのセレクター セレクターで「操作が発生した要素」や「変更したい要素」を指定する id属性が「main」の要素内に存在するimg要素を指…

実践演習-ガイドテキスト

ガイドテキスト - jQuery基本形 <form method="get" action="http://example.com/"> <input class="guideText" type="text" size="30" value="お名前を入力してください"> <textarea class="guideText" cols="30" rows="8">メッセージを入力してください</textarea> <input type="submit" value="送信"> </form> $(function(){ $('.guideText').each(function(){ v…

フリー ペイントツール FireAlpaca

FireAlpaca Mac、Windows 両対応のフリー ペイントツール

Dreamweaver &amp; Flash

DreamweaverとFlashが使える人 今日の仕事は、そういう人を育成して欲しいという依頼でした 一般的には、手打ちをするほうが効率的なので「Dreamweaver」はいらない。 という声が大きいと思いますが、企業が考えるWeb担当者とは、そういった考え方とは一線を…

ブログシステムの構築(14)

コメントの管理機能を作成(2) 閲覧者のコメントに返信や投稿するための投稿画面を作成する 新規ファイルを作成 「comment」フォルダー内に「input.php」というファイルを作成します admin/index.phpを編集 「admin」フォルダー内に「index.php」を編集し…

ブログシステムの構築(13)

コメントの管理機能を作成(1) 閲覧者のコメントを管理する画面を作成します フォルダーとファイルを作成 「admin」フォルダー内に「comment」というフォルダーを作成します 「comment」フォルダー内に「index.php」というファイルを作成します コメント一…

ブログシステムの構築(12)

コメントのメールアドレス部分をリンクにする コメントに入力してあるアドレスをクリックするとコメントした人にメールが送れるようにしてみます 「topic.php」を編集 「comment_list_name」を選択する この時点で「# ヌルリンク」を設定します。 emailの設…

ブログシステムの構築(11)

画面にコメントを反映させる 「topic.php」を編集 「バインディング」→「レコードセット(クエリー)」を選択する 名前:comment_list 接続:MyBlogDatabase テーブル:commnet_table フィルター:entry_id「URLパラメータ:entry_id」 ソート:comment_id「…

ブログシステムの構築(10)

コメント機能を作成 コメント機能を作る データベースに新規テーブルを作成 「my_blog」内にテーブル名「comment_table」を作成する フィールド数:7 実行後、以下のように入力します 「topic.php」を編集 「サーバービヘイビア」→「レコードの挿入」を選択…

ブログシステムの構築(9)

前後のページへ移動する機能を作成 ページング機能を作る 《HTML》 <p class="nav"><a href="#">&lt;&lt;前のページへ</a> <a href="#">次のページへ&gt;&gt;</a></p> 《CSS》 .nav { text-align: center; margin: 20px 0 0 0; } 次のページへ 「次のページへ>>」を選択する 「サーバービヘイビア」→「レコードセ…