2015年10月6日火曜日

DTP 10/6の授業内容


DTP 10/6の授業内容

1)先々週の補足
授業で取り上げたBLOGの紹介の補足
>>(※)内は追記他はBLOGからの引用文

アマゾンでベストセラー1位になっている、「社内プレゼンの資料作成術」(前田鎌利著、ダイヤモンド社)。
プレゼン資料の作り方ノウハウの中身は、実に素晴らしい内容なのだが、
ここでも堂々と無断でネットから、画像を使うことが何の罪意識もなく、普通に書かれている。

本書P117~P119には、社内プレゼン資料に掲載する写真は、
Googleの画像検索を使えばいい。かつ見栄えのいい写真を使うため、
高画質の画像を検索すればいい、といった内容が書かれている。


ただ引用元を明記すべしとも、撮影主に許諾をとりましょうとも、フリーの画像だけ使いましょうとも、
どこにも書いていない。(※本来は書かなければ行けない。この本の欠陥的部分)

多分この本は社内資料の作り方本なので、社内資料だったら、ネットの画像は、無断で勝手に使っても、
法律的には問題にならないという、
スタンス(※公的資料では問題になる)なのだろうが、
一言も著作権についての配慮がないのは、佐野氏に限った話ではなく、今の多くの一般人にとって、ネット画像は検索して、そこから拾ってくればいいというのが、当たり前になっているからではないか。

いやいやネットにある画像を、勝手に使っちゃダメだから。

(※本来は社内資料でも問題になるものだがグレーゾーン扱いになっている)
許諾をとらないまでも、せめて引用元を載せないと。

でも多くの一般の人には、無料に勝手に使っていい、フリー素材サイトにある写真と、Googleの画像検索で出てきた、写真との区別はわからないのではないか。
ネットにある写真は自由に使っていいと、思い込んでいる人多数ではないのか。

(※この認識では一般人の何も知らない人と同じ。
デザインの専門として学んだ皆さんはネットから勝手に画像をパクってはいけません)


-------------------------------------------------------


2)デザインの専門用語と専門のしくみの解説

・組み版と禁則処理/段組み文字組

・記号と校正記号

-------------------------------------------------------

3)作業----提出先メールアドレスはinfo@cid.jp.net

・ラフとサムネール雑誌の特集(1)構想を練る

  ------>>>著作権について
  ------>>>配布されているフォント(書体)の使い方

2015年10月5日月曜日

小テスト css-lesson (1学期の復習)--元々作られているテンプレートを改造する


http://yoko14145.com/cid/css-lesson.zip

から元データ(圧縮データ)をダウンロード

1・サーバとつながっている自分のサイトのフォルダの中に
「css-lesson」のフォルダを移動する。

2・css-lesson.htmをDreamweaverで開いて編集。
編集内容は 下記の通りの10ヶ所
  


 (10)
最後に、css-lessonのフォルダごと自分のサイトにアップロードする。(=提出)

※
 (7)のタイトルと文字の内容は下記を引用する事。

がん細胞、光らせて発見 ウミホタルの発光物質利用
青く光る甲殻類の一種、ウミホタルの持つ発光物質を利用して、マウスのがん細胞だけを光らせる技術を産業技術総合研究所の近江谷克裕主幹研 究員らのグルー プが開発した。青い光を透過性の高い近赤外線に変換することで、体の奥にあるがんも特定できるようにした。がんの新しい診断法の開発につながる成果だ。今 週の米科学アカデミー紀要で発表する。 ウミホタルは日本近海に生息する体長数ミリの甲殻類。発光物質「ルシフェリン」と、ある種の酵素が化学反応して光る。ルシフェリンは、ノーベル化学賞を受 賞した下村脩さんが初めて結晶化したことで知られる。



(9)の背景色の変更の仕方。
1.画面上のメニューバーの[ウインドウ]の[CSSスタイル]にチェックをいれる
2.CSSスタイルのパネルのexm_navi_right.cssを開く
3.bodyを選択すると[bodyのプロパティ]がその下のウインドウに出るので
4.background-colorを#990000に
5.background-imageを(url"")にする(又は削除する)

※http://自分のサイトのURL/css-lesson/
 で表示されるようにindex.htmlに名前を変えて保存しアップロードする。

公開先ページのURLリンクはここから確認




完成すると以下のようなビジュアルになります

--------------------------------------------------------------------------------------------------------------------------

2015年9月29日火曜日

DTPの今後の授業スケジュール

現在の作業

・ラフとサムネール雑誌の特集(1)構想を練る

  ------>>>著作権について
  ------>>>配布されているフォント(書体)の使い方



DTPの今後の授業スケジュール
 DTP 第1回 2学期 でも書いていた予定の日程に近づいてきました。
仕上げまでの段取りを確認してみましょう。








2015年9月28日月曜日

2015年9月18日金曜日

実践作業(9/18・9/25・9/28)

1 フローチャートを描く

2 メニューボタン部分を動くように設置してみる


3テンプレートを決める→テンプレート内に2のメニューを組み込んでみる
               →具体的なやり方http://cid2015gd2.blogspot.jp/p/1_28.html

4 WEBサイトの仮組をして、見た目のデザインをバランス良く仕上げる





外部SNSをWEBサイト内に表示する方法

SNS系----Twitterの詳しい設置例
Facebook・Twitter・Google+・Instagram

写真画像系
Pinterest・Flickr

動画系
Vine・Youtube・Vimeo
Dailymotion・Ustream・SlideShare





WEB用のフリー素材の探し方

[WEB用のフリー素材の探し方]
web free フリー素材 などで検索して、素材集配布のサイトを見つけ、
そのサイト内を検索する。
(検索エンジンの画像検索などでフリーではない画像を勝手に取って来て使わないこと)

WEBデザイン用フリー素材まとめのまとめ

 ↑ ※ダウンロードしたブラシやパターンのインストールの仕方



素材
屋・HP素材のおすそわけ。
著作権フリーのweb素材屋


WEBデザイナーが作った超シンプル素材集 

フリー素材「blue-green」 - シンプルかわいいWEB用フリー素材 ...



メニュー画像を下揃えにする

(何も指定しないと左上ぞろえになるor真ん中でそろってしまう時の対処法)
http://2010yoko14145.web.fc2.com/menu1108.html





[jQuery サンプル] 自分のサイトでこんなのがやってみたい

メニューにサブカテゴリを表示する サンプル
 作り方↓


画像が何枚か切り替わるバナー jQuery  

「bxSlider」


画像がスクロール表示で数枚表示されるバナー jQuery
「slider.js」

-----------------------------------------------------------------------------
[HTMLとCSS] 自分のサイトでこんなのがやってみたい

背景画像を2重に貼って、ボックスの中身を固定(動かさない)で表示したい。
http://2010yoko14145.web.fc2.com/16mail.html

横幅100%の画面いっぱいいっぱいのヘッダーを作成したい
http://2010yoko14145.web.fc2.com/18.html

全体のレイアウトを中央揃えにしたい
http://2010yoko14145.web.fc2.com/33.html

2015年9月15日火曜日

著作権について

著作権について

五輪エンブレム使用中止で幕引きへ。盗作問題でデザイナー佐野研二郎氏が在日認定&誹謗中傷された件を真相究明http://blog.ks-product.com/tokyo-olympic2020-logo/


合字によるデザイン
https://www.google.co.jp/search?q=%E5%90%88%E5%AD%97&es_sm=91&tbm=isch&tbo=u&source=univ&sa=X&ved=0CDwQsARqFQoTCNfopaPT98cCFcRhpgod3Z4Kyw&biw=1512&bih=878#imgrc=_

設計思想が違うんだから盗作じゃない。前エンブレムの継承のコンセプト。
https://twitter.com/kokubucamera/status/626920964127768576


オリジナルが正義で似ていることは悪か?

「似たものを見つけてパクリと騒ぐだけ」のどんなバカにでもできる簡単なお仕事http://azanaerunawano5to4.hatenablog.com/entry/2015/09/05/122041

【エンブレムに求められるもの #とは】
http://togetter.com/li/868979

エンブレム/ロゴ/フォント
   ヤン・チヒョルト展のアレは「ロゴ」なのか?【五輪エンブレム問題】
    http://www.poc39.com/archives/4210

素材。シルエット。
http://francepresent.com/sanokenjiro-3/

オマージュ。パロディ。
http://francepresent.com/iwasakichihiro/
  亀倉雄策『曲線と直線の宇宙』を読んで腰が抜けた話【五輪エンブレム騒動】
  http://www.poc39.com/archives/4142
  設計思想が違うんだから盗作じゃない。前エンブレムの継承のコンセプト。
  https://twitter.com/kokubucamera/status/626920964127768576


Q.何故使用停止になったのか。
A.パクリではなく監督不行き届き。

コピーライト。
http://francepresent.com/olympic-6/
   佐野氏五輪エンブレム中止に学ぶ。みなさんもネットから無断で写真を借用しないように
  http://kasakoblog.exblog.jp/23624137/

その他のよくある複雑な著作権問題。
二次創作
http://www.huffingtonpost.jp/2013/08/29/tpp_doujinmark_n_3834542.html
  二次創作はグレーゾーンか? 「公式への問い合わせ」の是非
  http://togetter.com/li/869021

「アンダーグラウンドで密かに行うもの」というグレーゾーンの大前提が
インターネットという新しいメディアの特性によって崩れてきている現代。
著作権の問題については正しい知識と細心の注意が必要。



------------------------------------------

○著作権/特許権

フォントの著作権

書体(フォント)にも著作権がある

フォントにも著作権があります。
学校のMacに入っているフォントデータは学校が購入しています。 

※inDesignで「パッケージ化」する際にはフォントデータがパッケージに入ります。

 フリーのフォントでない場合は二次配布になり、違反行為となります。

これを防ぐために二次配布禁止のフォントには
受け渡しが不可能なプロテクトがかけてあります。
プロテクトがかかっていると 
パッケージに入れることが出来ないようになっています。
その場合はフォントにアウトラインをかけることが必要になります。
 
○フリーフォントとは?
(商用利用可能なフォント=印刷物に使用可能なフォント)

※利用が可能な事をフリーと言っているだけで無料ではない場合も多々あります。
フリーフォント最前線 http://www.akibatec.net/freefont/
フリーフォントのCFONT http://cfont.jp/
アバウトフォント  フォント関連リンク集 http://www.aboutfont.com/
ダウンロードしたフォントデータが解凍できない場合は↓をダウンロードして下さい。






ダウンロードしたフォントはどうしたら使えるの?

いまさら聞けない?Mac OS Xのフォントのインストール



使わないフォントをアンインストールする方法
(この時の注意:有料フォントをアンインストールしないこと。)
 
 HD >  システム > ライブラリ  > Fonts
  
にあるフォントのうち使わないものをFontsフォルダ以外の場所に移動する。
(同じパソコンを使用している人が使いたい時には戻せるように
分かりやすい場所に置いておきましょう。)

2015年9月14日月曜日

WEBサイトの仮組

WEBサイトの部品を作り、仮組をしてみましょう。

https://drive.google.com/file/d/0B6I9zVdEFoukVXpQbzR5RUt1VUU/view

2015年9月11日金曜日

テンプレートとはそもそも何か?

テンプレートとは? WEB Dreamweaver

テンプレートとは? ← クリックでwikipedia[webテンプレート]へジャンプ

Webテンプレート(ウェブテンプレート)は、ウェブデザインにおいてコンテンツと見た目を分離し、Webドキュメントを大量生産するためのツールである。Webテンプレートシステムの基本概念である。Webデザインテンプレート、ホームページテンプレートとも。Webテンプレートはどんなタイプのウェブサイトでも使える。簡単に言えば、Webテンプレートはウェブサイト設定時のテンプレートである。

------テンプレートの例を見てみましょう。------

無料配布されているテンプレートを紹介しているサイト


↑
このタイプのスマホ専用テンプレートを使う場合は、
[このコードを]userAgent.jsという名前で新規ファイルを作成して保存しindex.htmlと同じ場所へアップロードして
index.htmlのhead内に
<script type="text/javascript" src="userAgent.js"></script>
と一行入れる。と、見ている人のブラウザがPCかスマホかによって分岐自動転送されます。
参照:http://www.html5-memo.com/css3/pc_bunki/


<<<<<本日の作業>>>>>
自分のサイトのレイアウトを
どのパターンにするのか考えましょう
Aパターン:
上記のテンプレートのリンクから、自分のサイトの計画に合うものを使って作成を始める。

Bパターン:

自分のサイトの計画しているレイアウトが、上記のテンプレートのリンクにはない場合はDreamweaverから近いテンプレートを使って作成する

板書


動くメニューの種類あれこれ。


日本語説明のあるサイト

jQueryで動くナビゲーション 

【CSS3】マウスオーバーでモワっと動くナビゲーション

jquery css マウスの動きに合わせてナビゲーションの要素が ...

jQueryマウスで動くメニューバー | CSSPRO

CSS3のtransitionで作るスムーズに動く縦メニュー

メニュー的なもの
メニューになりそうなもの(ギャラリーにも使えるものを含む)

Image Rotator with Description
サイドのメニューをクリックすると画像が変わる&キャプション

Fancy Thumbnail Hover Effect
サムネイルをクリックすると大きな画像が切り替わる

slidedeck
マウスだけで全てを閲覧できるスライドメニュー
Content Slider Using jQuery UI / ベーシックな画像ナビゲーション
bxGallery / シンプルな画像ナビゲーション
Background Image Navigation / 背景がマウスオーバーでスライドするメニュー
IconDock / アイコンが滑らかに拡大していくドックメニュー
Horizontal Tooltips Menu / アイコンメニューにツールチップがスムーズに追従
Realistic Hover Effect / 影や反射のあるアイコンがふわっと浮くエフェクト
Rolling Rounded Menu / アイコンが回転しながら開くユニークなメニュー
Garage Door Style Menu / ガレージのドアのように開く画像メニュー
Animated Menus / ゆっくり切り替わるクールなメニュー
Outside the Box / アイコンが滑らかに拡大するドックメニュー
BubbleUp / ユニークなアニメーションで拡大するアイコン
AutoSprites / cssスプライトとjQueryをあわせたメニュー
jQuery Dashboard / ダッシュボードパネルに隠されたアイコンメニュー
Smooth Animated Menu / すとんとアイコン付きの画像が降りてくるメニュー
Elastic Thumbnail Menu / スムーズに拡大するサムネイルを使ったメニュー
megamenu / 画像がドロップダウンするメガメニュー
Spy Effect / 縦にどんどん下がっていくアイコン付き可変メニュー
quicksand / アニメーション付きでソートできるアイコンメニュー
Horizontal Accordion / 画像チラ見せアコーディオン


CSS3
css3を使ってるプラグイン(メニューが動くタイプのcssを含む)

polaroid photo viewer with CSS3 / ポラロイドを動かせるcss3のギャラリー
CSS3 Lightbox Gallery / バラバラに散らばった写真をクリックするとLightboxで拡大
Cufonized Fly-out Menu / クールなアニメーションエフェクトのフライアウトメニュー
Slide Down Box Menu / マウスオーバーで画像が降り、テキストが上がるクールなメニュー
Pretty Simple Content Slider / キャプションとタイトルのスライドインが素敵なメニュー
ShineTime / マウスオーバー時のエフェクトがかっこいいギャラリー
css3 transition slide / キャプションがクロススライドするシンプルなスライド
Contextual Slideout Tips / クリックでコンテンツがアニメーションしながら広がる
Bubble Navigation / マウスオーバーでサークルが広がり、子メニューが出現
A Fresh Bottom Slide Out Menu / 遅れて出てくるアイコンがキュートなメニュー
Apple-Style Icon Slide Out Navigation / アイコンが降りて来て、裏に入っていくメニュー
Little Boxes Menu
  バラバラになるアニメーションがユニークなボックスタイプのメニュー
Slide Out Navigation / アイコンの出方が可愛いスライドサイドメニュー
Interactive Picture / マウスオーバーでキャプションがスライド、クリックで画像が上がってくる
Thumbnails Navigation Gallery / サムネイルギャラリーを使ったメニュー
Sliding Panel Photo Wall Gallery / 画像を全体に表示、ギャラリー化
Photo Desk / クリックするたびに角度が変わるポラロイドタイプギャラリー
Beautiful Photo Stack Gallery / スライドギャラリーとLightboxをあわせたもの
Image Highlighting and Preview / 少し回りくどいLightbox
Kitchen Table / ギャラリーとLightboxをcss3も使って実装