寫的超好的耶,很多網頁都有這些問題,給的建議很實用。
http://buzzorange.com/techorange/2015/12/29/75-rules-of-a-good-ui-design/
Max Coding BLOG. (^_^)y
記錄下寫程式遇到的問題, 希望幫你也有幫助, 有些解法應該不是最好的.
2016年2月20日 星期六
2015年9月28日 星期一
購物車程式架構簡介 (shopping cart system analystics)
我曾寫過購物車,用的是他的描述的舊架構,如果改用他的新架構的確會比較有彈性,也比較好維護。在寫過比較多的 code 之後,現在比較會使用繼承來寫元件,下面這篇教學裡的重點應該很多,但我吸收到的有3個,一個是要把分工做好(Sessionless),類似 Restful API 的概念,一個是要多寫成可以繼承的元件,第3個是Plugin模式,主要在這一個模式讓系統易擴充。
教學:
http://www.slideshare.net/jaceju/ss-6312192
教學:
http://www.slideshare.net/jaceju/ss-6312192
取得實際對外IP的方法
這個是一個很簡單的小功能,對 client side 來說很有幫助,對server side 來說,也是超級簡單,所有的server side script 幾乎都支援,主要的問題就是要有一台Public IP 的 server.
官方網址:
https://www.ipify.org/
API說明:
使用範例:
而且還有好心人幫忙多包了一層Object, 讓程式更好用:
ex:
https://github.com/rdegges/python-ipify
官方網址:
https://www.ipify.org/
API說明:
API URI | Response Type | Sample Output (IPv4) |
https://api.ipify.org | text | 98.207.254.136 |
https://api.ipify.org?format=json | json | {“ip”:”98.207.254.136″} |
https://api.ipify.org?format=jsonp | jsonp | callback({“ip”:”98.207.254.136″}); |
https://api.ipify.org?format=jsonp&callback=getip | jsonp | getip({“ip”:”98.207.254.136″}); |
使用範例:
Bash
#!/bin/bash
ip=$(curl -s https://api.ipify.org)
echo "My public IP address is: $ip"
Python
# This example requires the requests library be installed. You can learn more
# about the Requests library here: http://docs.python-requests.org/en/latest/
from requests import get
ip = get('https://api.ipify.org').text
print 'My public IP address is:', ip
Ruby
require "net/http"
ip = Net::HTTP.get(URI("https://api.ipify.org"))
puts "My public IP Address is: " + ip
PHP
<?php
$ip = file_get_contents('https://api.ipify.org');
echo "My public IP address is: " . $ip;
?>
Perl
use strict;
use warnings;
use LWP::UserAgent;
my $ua = new LWP::UserAgent();
my $ip = $ua->get('https://api.ipify.org')->content;
print 'My public IP address is: '. $ip;
VB.NET
Dim client as New System.Net.WebClient
Dim ip as String = client.DownloadString("https://api.ipify.org")
NodeJS
var http = require('http');
http.get({'host': 'api.ipify.org', 'port': 80, 'path': '/'}, function(resp) {
resp.on('data', function(ip) {
console.log("My public IP address is: " + ip);
});
});
Javascript
<script type="application/javascript">
function getIP(json) {
document.write("My public IP address is: ", json.ip);
}
</script>
<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>
jQuery
<script type="application/javascript">
$(function() {
$.getJSON("https://api.ipify.org?format=jsonp&callback=?",
function(json) {
document.write("My public IP address is: ", json.ip);
}
);
});
</script>
C#
using System;
using System.Net;
namespace Ipify.Examples {
class Program {
public static void Main (string[] args) {
WebClient webClient = new WebClient();
string publicIp = webClient.DownloadString("https://api.ipify.org");
Console.WriteLine("My public IP Address is: {0}", publicIp);
}
}
}
Arduino
if (client.connect("api.ipify.org", 80)) {
Serial.println("connected");
client.println("GET / HTTP/1.0");
client.println("Host: api.ipify.org");
client.println();
} else {
Serial.println("connection failed");
}
而且還有好心人幫忙多包了一層Object, 讓程式更好用:
ex:
https://github.com/rdegges/python-ipify
To install
ipify
, simply run:$ pip install ipify
This will install the latest version of the library automatically.
Usage
Using this library is very simple. Here's a simple example:
>>> from ipify import get_ip
>>> ip = get_ip()
>>> ip
u'96.41.136.144'
2015年7月27日 星期一
[JS] jQuery 顯示 badge
badge 就是一個小圈圈裡有數字,找到一個有趣的 sample code, 可以下一個 class 就套出 badge, 缺點就是需要調一下別人的 css 把 沒有在用 style 先拿掉。
套出來的畫面:
使用方法:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Badges on Buttons</h2>
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
<button type="button" class="btn btn-success">Success <span class="badge">3</span></button>
<button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>
</div>
</body>
</html>
example 2:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-sm btn-default like-btn active" type="button" id="10">
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="text">Liked</span>
<span class="badge like-badge">1</span>
</button>
<script>
$(document).on("click", ".like-btn", function(e) {
e.preventDefault();
var $label = $(this).find('.text'),
$badge = $(this).find('.badge'),
count = Number($badge.text()),
active = $(this).hasClass('active');
$label.text(active ? 'Like' : 'Liked');
$badge.text(active ? count - 1 : count + 1);
$(this).toggleClass('active');
});
</script>
</body>
</html>
資料來源:
http://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp
套出來的畫面:
使用方法:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Badges on Buttons</h2>
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
<button type="button" class="btn btn-success">Success <span class="badge">3</span></button>
<button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>
</div>
</body>
</html>
example 2:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-sm btn-default like-btn active" type="button" id="10">
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="text">Liked</span>
<span class="badge like-badge">1</span>
</button>
<script>
$(document).on("click", ".like-btn", function(e) {
e.preventDefault();
var $label = $(this).find('.text'),
$badge = $(this).find('.badge'),
count = Number($badge.text()),
active = $(this).hasClass('active');
$label.text(active ? 'Like' : 'Liked');
$badge.text(active ? count - 1 : count + 1);
$(this).toggleClass('active');
});
</script>
</body>
</html>
資料來源:
http://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp
2014年10月3日 星期五
[JS] Sweet Alert
我覺得每個網站都應該用這一個SweetAlert套件來做, 最好再改一下 UI sytle, 配合該網站的 style, 雖然已經有很多 jQuery 做出類似的功能, 看了一下SweetAlert用法和安裝方法, 真是簡單到爆, SweetAlert 和預設醜死的javascript alert的視窗相比,SweetAlert 在 UI 上顯示出來就漂亮許多,在功能面還加強了許多功能.
官方網站: http://tristanedwards.me/sweetalert
github: https://github.com/t4t5/sweetalert
官方網站: http://tristanedwards.me/sweetalert
github: https://github.com/t4t5/sweetalert
2014年10月2日 星期四
[CSS] use image-set to support retina images
一般解析度的圖片在 retina 下其實不太漂亮, 在 retina 顯示下可以顯示更高的解析度圖片, 透過css 增加 image-set 可以user 在 使用 retina 瀏覽時使用較高解析度的圖片.
雖然目前只支援 background-image 屬性,而不能使用在 <img> tag 裡, 我覺得這個問題還滿容易解決的, 使用一個 <div> tag 加 class 後, 就可以長的像 <img> tag 了, 只是<div> tag 右邊的區塊預設會折行, 需要手動設一下 float:left;, 然後會有區塊右邊文字置頂的問題, 這個用css 也都很好解決, 設個 padding 或再使用一個 div position:absolute; 再配合坐標; 應該就ok了.
<== 由於我不太懂 css, 這部份可能有誤.
在 retina 下的顯示實測:
相同的 html 在 PC 裡執行:
https://developer.apple.com/library/safari/documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html
加個 -webkit-image-set 就做完了.
這個做法的優點是, client 端只會從 server side 下載指定大小的圖片, 對 client side 來說傳輸給顯示效果較好, 對 server side 來說, 由於多一個檔案, 所以需要 maintain 工作會多一點點, 所佔用的儲存空間多一點點, 但我覺得這個是利大於弊, 是可行的.
解法1在舊的瀏覽器不支援.
解法2:
直接放一張2倍解析度的大圖, 讓browser 自己 resize 到指定的寬和高, 這個作法更快, 相容性更高, 缺點是 client side 和解法1相比會慢一點點點(對使用者來說無感).
衷心地建議您, 如果都知道來源圖片的 pixel, Html 或 Css 裡請指明該圖片的 width + height, 只寫一個 width 是很方便沒錯, 但是在某些browser 或 eMail Client(ex: outlook)下畫面裡的圖片會為了 resize image 而"閃動", 視覺效果很差.
解法2在一些舊的瀏覽器(或eMail Reader)顯示效果會比較差, 因為他們對 image resize 的重新取樣(Resample)的處理"超差", 會有明顯的鋸齒/模糊或雜點.
雖然目前只支援 background-image 屬性,而不能使用在 <img> tag 裡, 我覺得這個問題還滿容易解決的, 使用一個 <div> tag 加 class 後, 就可以長的像 <img> tag 了, 只是<div> tag 右邊的區塊預設會折行, 需要手動設一下 float:left;, 然後會有區塊右邊文字置頂的問題, 這個用css 也都很好解決, 設個 padding 或再使用一個 div position:absolute; 再配合坐標; 應該就ok了.
<== 由於我不太懂 css, 這部份可能有誤.
在 retina 下的顯示實測:
可以清楚看的出來第1張圖糊糊的, 第2張圖(高解析度)就銳利很多. |
相同的 html 在 PC 裡執行:
只有下載低解析度的版本. |
解法1:
Serving Images Efficiently to Displays of Varying Pixel Densityhttps://developer.apple.com/library/safari/documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html
header { |
background: -webkit-image-set( url(images/header.jpg) 1x, |
url(images/header_2x.jpg) 2x); |
height: 150px; /* height in CSS pixels */ |
width: 800px; /* width in CSS pixels */ |
} |
加個 -webkit-image-set 就做完了.
這個做法的優點是, client 端只會從 server side 下載指定大小的圖片, 對 client side 來說傳輸給顯示效果較好, 對 server side 來說, 由於多一個檔案, 所以需要 maintain 工作會多一點點, 所佔用的儲存空間多一點點, 但我覺得這個是利大於弊, 是可行的.
解法1在舊的瀏覽器不支援.
解法2:
直接放一張2倍解析度的大圖, 讓browser 自己 resize 到指定的寬和高, 這個作法更快, 相容性更高, 缺點是 client side 和解法1相比會慢一點點點(對使用者來說無感).
衷心地建議您, 如果都知道來源圖片的 pixel, Html 或 Css 裡請指明該圖片的 width + height, 只寫一個 width 是很方便沒錯, 但是在某些browser 或 eMail Client(ex: outlook)下畫面裡的圖片會為了 resize image 而"閃動", 視覺效果很差.
解法2在一些舊的瀏覽器(或eMail Reader)顯示效果會比較差, 因為他們對 image resize 的重新取樣(Resample)的處理"超差", 會有明顯的鋸齒/模糊或雜點.
結論:
- 解法1在client side傳輸速度還是視覺效果可能比解法2好
- 解法2在client side相容性和server side 改 css/html 實作的速度比解法1快.
相關文章:
- image-set实现Retina屏幕下图片显示
http://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html - Safari 6 and Chrome 21 add image-set to support retina images
http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/ - [CSS] 5個對設計師有幫助的CSS屬性
http://blog.rx836.tw/blog/5-css-properties/ - [CSS] [基礎] 盒子模型/區塊模型(Box Model)
http://mepopedia.com/?page=804 - [CSS] 置底技巧,可用於 Footer 區塊
http://www.wibibi.com/info.php?tid=138
2014年7月18日 星期五
[JS] html select 下拉框 顯示固定寬度
預設的 select box 的寬度會依照 option 裡的值(value) 長短而自動 resize 寬度, 在很多 select box 的畫面裡會不太好太, 解法有2:
解法1:
javascript source code:
==============
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function FixWidth(selectObj)
{
var newSelectObj = document.createElement("select");
newSelectObj = selectObj.cloneNode(true);
newSelectObj.selectedIndex = selectObj.selectedIndex;
newSelectObj.onmouseover = null;
var e = selectObj;
var absTop = e.offsetTop;
var absLeft = e.offsetLeft;
while(e = e.offsetParent)
{
absTop += e.offsetTop;
absLeft += e.offsetLeft;
}
with (newSelectObj.style)
{
position = "absolute";
top = absTop + "px";
left = absLeft + "px";
width = "auto";
}
var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };
if(window.addEventListener)
{
newSelectObj.addEventListener("blur", rollback, false);
newSelectObj.addEventListener("change", rollback, false);
}
else
{
newSelectObj.attachEvent("onblur", rollback);
newSelectObj.attachEvent("onchange", rollback);
}
selectObj.style.visibility = "hidden";
document.body.appendChild(newSelectObj);
newSelectObj.focus();
}
function RollbackWidth(selectObj, newSelectObj)
{
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = "visible";
document.body.removeChild(newSelectObj);
}
</script>
</head>
<body>
<form method="post">
<div style="width:100px; height:100px; margin:100px; padding:10px; background:gray;">
<select name="Select1" style="width:80px;" onmouseover="FixWidth(this)">
<option id="A" title="this is A">AAAAAAAAAAAAAAA</option>
<option id="B" title="this is B">BBBBBBBBBBBBBBB</option>
<option id="C" title="this is C">CCCCCCCCCCCCCCC</option>
</select>
</div>
</form>
</body>
</html>
- 1. css (建議), min-width & max-width 屬性.
- 2. javascript.
解法1:
Example
Set the minimum width of a paragraph:
p{
min-width:1000px;
}
min-width:1000px;
}
Browser Support: ALL Browser
The min-width property is supported in all major browsers.
Note: IE6 and earlier versions do not support the min-width property.
html code:
<select name="Select1" style="min-width:100px; max-width:120px;">
執行畫面 (screent shot):
解法2: javascritp
執行畫面:
javascript source code:
==============
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function FixWidth(selectObj)
{
var newSelectObj = document.createElement("select");
newSelectObj = selectObj.cloneNode(true);
newSelectObj.selectedIndex = selectObj.selectedIndex;
newSelectObj.onmouseover = null;
var e = selectObj;
var absTop = e.offsetTop;
var absLeft = e.offsetLeft;
while(e = e.offsetParent)
{
absTop += e.offsetTop;
absLeft += e.offsetLeft;
}
with (newSelectObj.style)
{
position = "absolute";
top = absTop + "px";
left = absLeft + "px";
width = "auto";
}
var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };
if(window.addEventListener)
{
newSelectObj.addEventListener("blur", rollback, false);
newSelectObj.addEventListener("change", rollback, false);
}
else
{
newSelectObj.attachEvent("onblur", rollback);
newSelectObj.attachEvent("onchange", rollback);
}
selectObj.style.visibility = "hidden";
document.body.appendChild(newSelectObj);
newSelectObj.focus();
}
function RollbackWidth(selectObj, newSelectObj)
{
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = "visible";
document.body.removeChild(newSelectObj);
}
</script>
</head>
<body>
<form method="post">
<div style="width:100px; height:100px; margin:100px; padding:10px; background:gray;">
<select name="Select1" style="width:80px;" onmouseover="FixWidth(this)">
<option id="A" title="this is A">AAAAAAAAAAAAAAA</option>
<option id="B" title="this is B">BBBBBBBBBBBBBBB</option>
<option id="C" title="this is C">CCCCCCCCCCCCCCC</option>
</select>
</div>
</form>
</body>
</html>
訂閱:
文章 (Atom)