What Is Software Design?

程式設計不是 “building software”，而是 “designing software”。

Is Design Dead?

軟體系統的設計是演進來的，不能一步到位，而是要藉由憑繁與使用者互動得到的回饋來修改系統設計。

Programming is Gardening, not Engineering

與其把程式設計比喻成蓋房子，實際上更像是園藝。

Orthogonality and the DRY Principle

所有程式設計活動其實都是維護，因為絕大部分的時間都在改code，寫一點改一點。即使是新專案，也很快需要回頭作修改。

顯示具有 html5 標籤的文章。 顯示所有文章
顯示具有 html5 標籤的文章。 顯示所有文章

2014年1月23日 星期四

利用Foundation來設計適應的web app ui 版型

凌晨12:58  , ,  No comments

本文介紹的是位於美國加州Campbell，一家名叫"Zurb"的設計公司所製作的Foundation框架。Pixar（皮克斯動畫公司）和National Geographic（國家地理頻道）都有採用此框架製作網頁。

 從Foundation專案的Features（特色介紹頁），可得知Foundation的三大特色是Grid（格線系統）、Rapid Prototyping（快速原型開發）和Mobility（支援行動裝置）。

HTML Page Markup

<!DOCTYPE html> <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]--> <html class="no-js" lang="en" > <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foundation 5</title> <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/foundation.css"> <!-- If you are using the gem version, you need this only --> <link rel="stylesheet" href="css/app.css"> <script src="js/vendor/modernizr.js"></script> </head> <body> <!-- body content here --> <script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html>
改變版型請參照docs 設定id
http://foundation.zurb.com/docs/

Read More

利用 Responsive web design 自動適應所有版型 利用Bootsrap

凌晨12:41  , ,  No comments


step1. 先到官方網站去下載Bootstrap
http://getbootstrap.com/

step2.進入網站後 點選 左邊的Download 將套件下載回來！！！


step3.完畢解壓縮，分別會看到css、fonts、js的資料夾

 step4.接著到jQuery官網中，下載jqury並放到js的資料夾中。

Bootstrap(RWD)應用：

 接著在官網中，可找到以下的表格，此表格相當的重要，主要是在說明，該套件中的螢幕尺寸的那些，分別有四個尺寸，且代稱分別為lg、md、sm、xs....等。 

 而Bootstrap是將版面欄位，等分等12塊，因此在設計RWD的版面需用百分比的方式來作設計。 
step5.這樣都懂了吧！！！來自己手做一個網頁試試嚕！！！


範例code

 <!DOCTYPE html>
<html>
<head>
<title>test101</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<style type="text/css">

 #header{height: 100px; background: :#1ab2f1;}
#header .container, #footer .container{border:solid 1px #fff;}
#content-body, #sidebar{border: solid 1px #333;}

 html,
body{
height: 100%;
}

 #wrap{
min-height: 100%;
height: auto;;
margin: 0 auto -60px;
padding: 0 0 60px;
}

 #footer{height: 60px; background: #1ab2f1;}

 </style>

</head>

 <body>
<div id="wrap">
<div id="header">
<div class="container" style="border:solid 1px #fff;">
check
</div>
</div>
<div class="container"> 
<div class="row">

<div class="col-lg-9" id="content-body">內容</div>
<div class="col-lg-3" id="sidebar">側邊攔</div>
</div>
</div>
</div>

 <div id="footer">
<div class="container"> 
版尾
</div>
</div>

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

 結果

Read More

2013年7月19日 星期五

Html5 Canvas 基本練習 劃線 畫圓

凌晨4:13  , ,  No comments


什麼是Canvas？

HTML5的Canvas元素使用的Javascript在網頁上繪製圖像。

Canvas是一個矩形區域，您可以控制其每一像素。

Canvas上擁有多種繪製路徑，矩形，圓形，字符以及添加圖片的方法


Create a Canvas

<canvas id="myCanvas" width="200" height="100"></canvas>

Draw Onto The Canvas With JavaScript

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(10,10,150,75);

</script>

在Canvas劃線

<script>

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>





在Canvas劃圓

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>





在Canvas劃漸層背景

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>



在Canvas貼上圖片


<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

</script>








參考文獻：http://www.w3school.com.cn/html5/html_5_canvas.asp


Read More
訂閱： 文章 (Atom)