Category: Design

hotmail: 大人っぽいデザインです。

gmail:やすっぽい印象があり、あまり好きではない

yahoo:ごちゃごちゃしていて見にくい

アマゾン:特に感想なし

テキスト小さめで、ヘッダーは黒・紺の方が落ち着いて見える気がします。

初期画面

amazon: カッケー

hotmail: 渋い

yahoo: ヤフーっぽい感じが出てて、なんか好感持てる！

google: ああ、登録画面はGoogleが一番いいかも。特にセキュリティをケアしているところが好きだ。

どこも、基本はログインの画面と整合性が取れてますね。
なるほど！

初期画面

css

.form1{
	width:100%;
	height:30px;
	margin-top:5px;
}
.submit {
	width:100%;
	height:30px;
	margin-top:5px;
	background-color:#0099FF;
	color:#fff;
	border:0px;
}
select{
	width:100%;
	height:30px;
	margin-bottom:5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	padding-left:5px;
}

修正後 ->
適当だけど雰囲気はそれっぽい(笑)

なんじゃこれ、よく見たら、全部カッケーーーーーー　すげーーーーー

ホットメール

gmail

yahoo

twitter

facebook

LINE

Amazon

なんだよこれ、2回言うけど、全部カッケー
すげーなー

input formはyahoo, facebookを除いて中央寄せがトレンドのようですね。

初期画面

スタイリングしていきます。

<div class="signin">
      <h1>サインイン</h1>
      <form method="POST" action="login.php">
        <input type="text" name="username" placeholder="ユーザー名"/><br>
        <input type="password" name="password" placeholder="パスワード"/><br>
        <input type="submit" value="ログイン" />
      </form>
      ※アカウントを持ちでない場合、<a href="register.php">新規登録</a>できます。
      </div>

css

body{
	background-color:#EEEEEE;
}
.signin{
	background-color:#fff;
	margin:50 auto;
	padding-top:10px;
	padding-left:10px;
	width:400px;
	height:400px;
}

更にスタイリング

body{
	background-color:#EEEEEE;
}
.signin{
	background-color:#fff;
	margin:50 auto;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	width:400px;
	height:400px;
}
.form1{
	width:100%;
	height:30px;
	margin-top:5px;
}
.submit {
	width:100%;
	height:30px;
	margin-top:5px;
	background-color:#0099FF;
	color:#fff;
	border:0px;
}
#fs-s{
	font-size:small;
	color:gray;
}

おおお、それっぽい(笑)

JPG：サイズが小さい、非可逆圧縮、色数が大井、圧縮すると画質が悪くなる、サムネイルなどに適す
PNG:容量が大きい、圧縮しても画質が落ちない、グラフィック画像などに適す
GIF:svgやaiと相性が良い、256色しかない、グレースケール画像・アニメーション・フォント・バナーに適す

JPGは加工に適しておらず、容量優先の際に推奨されています。
画質が求められる場合は、PNGが良いようです。

ロゴはGIFかPNGが良いようです。

Performance
– Latency (Start -> Done)
– Throughput (# / Second)
Throughput = 1 / Latency

Benchmarks
– Programs and input data agreed upon for performance measurements

Benchmark suite
– Multiple programs
– Each representative of some type of app

Computer Architecture
Design a computer is well-suited for its purpose

Why do we need?
1.improve performance
2.improve ability

Fablication Technology, Circuit design

Active Power
P = 1/2 C * V^2 * f * α
capacitance, power supply, frequency, active factor

System simple_cs = {
	Component client = { Port send-request; Port err-trap; }
	Component server = { Port receive-request; Port alert; }
	Connector rpc = { Role caller; Role callee; }
	Connector err = { Role source; Role sink; }
	Attachment server.receive-request to rpc.callee;
	Attachment client-request to rpc.caller;
	Attachment client.err-trap to err.sink
	Attachment server.alert to err.source
}

The set of significant decisions about the organization of a software system, the selection of the structural elements and their interfaces by which the system is composed, together with their behavior as specified in the collaborations among those elements, the composition of these structural and behavioral element into progressively larger subsystems and the architectural style that guides organization: these elements and their interfaces, their collaborations, and their composition.

-Verhoff
The software architecture of a deployed software is determined by those aspects that are the hardest to change.

context LinesVisible inv:
	ViewPort : viewContents->size() =
	ViewPort : height.min(FileManager : document->size())

Displays Diagram

context LinesVisible inv:
	let topLineNumber = ScrollBar : handlePosition *
		FileManager : document->size()
	in ViewPort : viewContents = FileManager : document->
		subsequence(topLineNumber, topLineNumber + ViewPort: viewContents->size() - 1)

GUI toolkit(library) for textBrowser
-window
-scrollbar

File Manager
-some way to access the file’s contents
-provide a module that can retrieve a limited length, consecutive subsequence of the file’s lines.

ViewPort
-need to be able to display the textual content graphically

ScrollBar
-need to give the user some way to access different parts of the file

Use Cases
-three candidate structural elements
-behavior of the TextBrowser
-how the user will use the intended solution

Basic Concept: Why this application exist?
-> Re-text
– move handle
– change window(ViewPort) size

Analysis Model
– UML class-model diagram
– rectangle for classes
– Each rectangle is divided vertically
– Lines between the components denote relationships

Operation
– comprise those actions that the user can undertake to interact with the TextBrowser