1月 2014 ~ John 中的技術 node

2014年1月23日星期四

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

凌晨12:58 Foundation, html5, webapp No comments

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

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

HTML Page Markup

<!DOCTYPE html>  <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>  <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/foundation.css">  <link rel="stylesheet" href="css/app.css"> <script src="js/vendor/modernizr.js"></script> </head> <body>  <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/

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

凌晨12:41 Bootsrap, html5, web app 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>

結果

判別 NSNumber 正確寫法

凌晨12:45 ios, objective c No comments

step1. 錯誤的寫法

NSNumber *value = [data objectForKey:@"samount"];

 if (value == 0)

     {
          NSLog(@" OK :) ");
     }
     else 
     {
          NSLog(@"  Bad :( ");
     }

step2.正確的用法

if ([value isEqual:@(0)])

ios UIImage URL 要讀取網路圖片

晚上11:56 ios, objective c No comments

code範例:

NSURL *imageURL = [NSURL URLWithString:@"http://example.com/demo.jpg"];
NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
UIImage *image = [UIImage imageWithData:imageData];