Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

デザインビギナーズ第26回 もくもく #29

Open
willnet opened this issue Jan 14, 2015 · 9 comments
Open

デザインビギナーズ第26回 もくもく #29

willnet opened this issue Jan 14, 2015 · 9 comments

Comments

@willnet
Copy link
Member

willnet commented Jan 14, 2015

今日の成果を貼り付けましょう！

貼り付けの指針

みんなから意見をもらいやすいように、わかりやすく成果をまとめましょう！

  • なるべく画像を使う
    • 写真をとって貼り付けたり、スクリーンショットをとってみたり
  • 作業前、作業後の画像を貼る
  • 力を入れた点や、見て欲しい点をコメントに書く
@willnet
Copy link
Member Author

willnet commented Jan 14, 2015

before

img_3346
image

after

image

勉強になったところ

@yoshik
Copy link

yoshik commented Jan 14, 2015

2015-01-14 21 26 45

  • 左：作業前
  • 右：作業後
  • 頑張った
    • ちょっとオシャレに
    • カードがカードに見えるように
  • まだイマイチ
    • 画面のテイストがそろってない
    • 奥行きがない

@nettaigyo
Copy link

before
kikacool-top-db

after
kikacool-top-db3

HPトップレイアウトの改善です。
狙いは、次のページに入っていきたくなるデザイン。

@suenagaabc
Copy link

名刺の裏面を作りました。
若者らしさを出そうと思い渋谷を選びました。
各所に自分の名前があります。
cardura

反省：素材選びが雑。

@tokubass
Copy link

やったこと

Photoshopの入門
アドビのサイトにあるチュートリアルをやりました。
http://www.adobe.com/jp/jos/pinchin/start/photoshop-web-design-02-design-base-with-shape.html

before

なし

after

after

cssの書き出し

クラス名が日本語。おそらくレイヤー名になってる。
output_css

@tatsuosakurai
Copy link

吹き出しのcssいじってました

  • css 難しい…

before

sashinomi

after

sashinomi

@ir3
Copy link

ir3 commented Jan 14, 2015

本日は「色彩デザイン・配色のルールを学べる本」http://www.amazon.co.jp/dp/488337789X を査読
あと @satococoaさんお勧め http://satococoa.hatenablog.com/entry/2014/12/08/223305
Web製作者のためのCSS教科書 http://tatsu-zine.com/books/css-architecture-textbook
201501142

刻言道場まいトレの 改修で Ramazaから Rails4.2 へ CSS (.haml)を移設作業
カレンダーのレイアウトの修正途上
20150114

@ukisoft
Copy link

ukisoft commented Jan 14, 2015

やったこと：
カレンダーの説明文を追加しました。
CSSのbeforeを使って四角を描写したのは初めてだったので、勉強になりました。

designbeginners_20150114__

@hirobanex
Copy link

やりたいこと／やったこと

iphoneでホームに追加をレコメンドするポップアップみたいなやつをつける。

img_3105

仕様

  • ポップアップ
  • 表示するURLとか回数をいろいろ制御
  • アンドロイドでもやりたいけど→よくわからん・・・

当初の「表示するURLとか回数をいろいろ制御」の仕様

  • ブクマするまで、3回に一回表示
  • 3回表示したら、これ以上表示しませんボタンを表示
  • ブクマしたら表示しない

最終的な「表示するURLとか回数をいろいろ制御」の仕様

  • URLの制御はmicro_dispatcher.jsを使用
  • cookieは、jquery.cookie.jsというJQueryプラグインを使用
  • 指定のURLで一回だけ表示(毎回でると、うざいし、ホームに追加したかどうか判定できない)
  • expireは1000日

HTML

<html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<title>ブックマークウィンドウのテスト</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/micro_dispatcher.js"></script>
<script type="text/javascript" src="js/bookmark_bubble/bookmark_bubble.js"></script>
<script type="text/javascript" src="js/bookmark_bubble/example.js"></script>
<link rel="apple-touch-icon" href="/xapple-touch-icon.png"/>
<link rel="apple-touch-icon-precomposed" href="/xapple-touch-icon.png"/>

</head>
<body>
<h1>ブックマークウィンドウのテスト</h1>

</body>
</html>

主にいじった「js/bookmark_bubble/example.js」

$(function () {

counter = $.cookie("counter");

if (!counter) {
    $.cookie("counter", "1", { expires: 1000 });
}else{
    counter++;
    $.cookie("counter", counter, { expires: 1000 });
}

var dispatcher = new MicroDispatcher()
dispatcher.register('/cart/', function () {
  if (counter > 10) {
    controller_bookmark_bubble('cart');
  }
});
dispatcher.register('/shopping/complete.php', function () {
  controller_bookmark_bubble('complete');
});
dispatcher.dispatch(location.pathname);

function controller_bookmark_bubble(cookie_key) {
  is_display = $.cookie(cookie_key);

  if (!is_display) {
    load_bookmark_bubble();
    $.cookie(cookie_key, "1", { expires: 1000 });
  }
}

function load_bookmark_bubble () {
  window.addEventListener('load', function() {
    window.setTimeout(function() {
      var bubble = new google.bookmarkbubble.Bubble();

      var parameter = 'bmb=1';

      bubble.hasHashParameter = function() {
        return window.location.hash.indexOf(parameter) != -1;
      };

      bubble.setHashParameter = function() {
        if (!this.hasHashParameter()) {
            window.location.hash += parameter;
        }
      };

      bubble.getViewportHeight = function() {
        window.console.log('Example of how to override getViewportHeight.');
        return window.innerHeight;
      };

      bubble.getViewportScrollY = function() {
        window.console.log('Example of how to override getViewportScrollY.');
        return window.pageYOffset;
      };

      bubble.registerScrollHandler = function(handler) {
        window.console.log('Example of how to override registerScrollHandler.');
        window.addEventListener('scroll', handler, false);
      };

      bubble.deregisterScrollHandler = function(handler) {
        window.console.log('Example of how to override deregisterScrollHandler.');
        window.removeEventListener('scroll', handler, false);
      };

      bubble.showIfAllowed();
    }, 1000);
  }, false);
}
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@tatsuosakurai @willnet @hirobanex @tokubass @ir3 @yoshik @ukisoft @suenagaabc @nettaigyo