網站設計筆記

本網誌記錄網站設計的一些內容筆記。網站設計需要整合很多工具與概念。我畢業自淡江電子計算機科學學系，算是科班出身。但我們那個年代(50年代，唉！LKK了！)，網路還只是剛開始，相關的技術都是出社會以後陸續接觸學習。網站的建立與設計，牽涉的範圍真的很廣泛。網站的目地是甚麼？銷售網頁、電子購物、廣告、社群經營、互動、教學、客戶服務、網站應用程式、...... 需要整合的人才，程式設計師、資料庫管理師、網頁美編、文字編輯、多媒體製作等等。這裡將記錄一個LKK對網站系統重新學習與複習，還有教學使用的一些資料。

2014年9月4日星期四

Code Charge Studio 操作程序要注意

Code Charge Studio 是一個蠻複雜的系統，他是一個程式產生器，所以，必需將很多使用者設定的需求以資料的形式建立檔案記錄下來，這樣產生器程式才可以產生出使用者設計的程式。

而這個過程，由於 Code Charge Studio的系統裡面，有很多視窗，Web程式也牽涉到很多東西，php、mySql、HTML、CSS、js等等。Code Charge更厲害，同一個系統，你可以決定要產生PHP, ASP, JSP, Perl, ColdFusion, ASP.NET.等原始語言！開發團隊很厲害，要同時熟悉這麼多語言！所以，其內容複雜程度可想而知。

在實際操作Code Charge的過程中，筆者發現其正確的操作程序，有實是很重要的。否則，就會產生錯誤而找不到原因！

例如：筆者製作一個頁面，引入另一個引入頁，後來因為被引入頁做了修改，複製成另一個新的頁檔，而原頁筆者直接去修改該頁的 Property裡面的值而已，結果，後來不斷的產生問題，而不知道哪裡出問題。想起來會不會是引入頁面的問題，所以，就將該引入頁刪除，然後重新從上面的功能頁插入，這樣就好了！

我在想，應該是 Code Charge 紀錄一些資料在 property裡面，也記錄在 .CCP或XML格式的資料檔裡面，而從功能列執行的動作，會同時去更新 Property 及 XML 檔案，而如果直接去修改Property，而XML資料檔沒有改，還是記錄舊的，因此，就產生錯誤。

因為對於Code Charge 的內部作業環境還不是很熟悉，有些東西可以直接改，有些東西一定要從他提供的功能列來產生改變，筆者覺得其操作的一致性，以及操作的"防呆"措施還不是很理想，所以，才會讓使用者有機會在不熟悉的情形下改了不應該改的東西，而發生錯誤！

這部分 Code Charge 還有很大的改進空間的。

但是，就效率產生原始程式的應用來說，Code Charge還是一個強大節省大量時間的系統。但就是要遵守他的規則就是了。如果違反，會發生不知道的錯誤而不自知！
此時，光要抓出錯誤，就又浪費了一大堆時間！

Code Charge 裡的 Login builder 如何套 Bootstrap

這兩日試著研究 BootStrap ，並要用 Code Charge 來套用。

首先，制作應用Bootstrap 的 Master Page，將它放在一個Design下，Bootstrap 需要的所有 CSS、js 等都放在適當的目錄下。讓程式可以抓得到。

Code Charge 有一個 LOGIN Page的自動 Builder，修改個 Form Template，拿Code Charge內建的 /Template/Authentication 裡面的 Vertical 來改。像這樣：新檔名為：bs_vertical

<form id="formId" role="form" method="post" name="{HTMLFormName}" action="{Action}">
<fieldset><legend>{Title}</legend>
<div class="panel panel-default">
<ul class="list-group">

<li class="list-group-item">{Error}</li>

</ul>
</div>

<div class="form-group">
{ControlTitle}
{ControlTemplate}
</div>

<div class="checkbox">
<label><input type="checkbox"> {rememberMe}</label>
</div>

<button type="submit" class="btn btn-default">{Buttons}</button>

</fieldset>
</form>

由於Bootstrap 的 Submit 用 <botton>來做，而CodeCharge內建的用 <input>來做，所以，在套用時，需再將 HTML 中移除<input>，因為我們用自己的<botton>！

產生出來以後，還要修改一下產生的 HTML 內容，主要是 Login name以及 password這兩個 <input>裡面要多加 class="form-control"，而 maxlength="100" size="20" 刪除這樣就差不多完成了！

我找到在 Code Charge 裡面產生 Login Page Builder 的程式，可以要去改他，還真麻煩，算了。隨便亂動 Code Charge 所付的程式，萬一怎樣，還真麻煩，還是不要亂動原本的程式較妙。

那就只好產生出來以後，再手動略加修改一下囉。

2014年9月2日星期二

html 裡 class="abc def" 有兩個以上的classname

例如：<span class="left important">

這是允許將這兩個CSS classes合併起來應用到該HTML元素。

這可能是很多人知道的基本概念吧！初學者或許不知道，記錄筆記在這裡。

CSS 的選擇器 Selector

從 w3school copy過來的資料，翻譯註解一下：

http://www.w3schools.com/cssref/css_selectors.asp

Selector	Example	Example description	CSS
.class	.intro	選擇所有帶有 class="intro" 的元素 (可以多個)	1
#id	#firstname	選擇特定 id="firstname" 的元素 (應該只有特定的一個)	1
*	*	選擇所有的元素	2
element	p	選擇所有 <p> 元素	1
element,element	div, p	選擇所有 <div> 和所有 <p> 元素	1
element element	div p	選擇所有存在 <div> 元素裡面的 <p> 元素	1
element>element	div > p	選擇所有父親是 <div> 元素的 <p> 元素這跟上一個有何不同？ div p 是所有 div裡面的 p，不管多少層以下； div > p 則是div的底下一層。<!DOCTYPE html> <style> #ttt > p { background-color: yellow;} </style> <div id = ttt> <h2>My name is Donald</h2> <p>I live in Duckburg.這一段有選上</p> <div><p>這一段沒有被選上</p></div> </div> <p>My best friend is Mickey.這一段沒有選上</p>	2
element+element	div + p	Selects all <p> elements that are placed immediately after <div> elements 所有立即接在 <div> 後面的 <p>。理論上應該只有一個會立即接在後面啊？！上面怎麼說 all 呢？ <style> div + p {background-color: yellow;} </style> <div> <h2>My name is Donald</h2> <p>I live in Duckburg.這沒有</p> </div> <p>My best friend is Mickey.這個有選上</p> <p>I will not be styled.這個沒有</p>	2
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element 選擇所有 <p>後面的每一個 <ul>， <html> <head> <style> p ~ ul { background: #ff0000; } </style> </head> <body> <div>A div element.</div> <ul> <li>Coffee這段沒有</li> <li>Tea</li> <li>Milk</li> </ul> <p>The first paragraph.</p> <ul> <li>Coffee這段以後都有</li> <li>Tea</li> <li>Milk</li> </ul> <h2>Another list</h2> <ul> <li>Coffee這有</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>	3
[attribute]	[target]	Selects all elements with a target attribute	2
[attribute=value]	[target=_blank]	Selects all elements with target="_blank"	2
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"	2
[attribute\|=value]	[lang\|=en]	Selects all elements with a lang attribute value starting with "en"	2
[attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"	3
[attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"	3
[attribute=value*]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"	3
:active	a:active	Selects the active link	1
::after	p::after	Insert content after every <p> element	2
::before	p::before	Insert content before the content of every <p> element	2
:checked	input:checked	Selects every checked <input> element	3
:disabled	input:disabled	Selects every disabled <input> element	3
:empty	p:empty	Selects every <p> element that has no children (including text nodes)	3
:enabled	input:enabled	Selects every enabled <input> element	3
:first-child	p:first-child	Selects every <p> element that is the first child of its parent	2
::first-letter	p::first-letter	Selects the first letter of every <p> element	1
::first-line	p::first-line	Selects the first line of every <p> element	1
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent	3
:focus	input:focus	Selects the input element which has focus	2
:hover	a:hover	Selects links on mouse over	1
:in-range	input:in-range	Selects input elements with a value within a specified range	3
:invalid	input:invalid	Selects all input elemets with an invalid value	3
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)	2
:last-child	p:last-child	Selects every <p> element that is the last child of its parent	3
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent	3
:link	a:link	Selects all unvisited links	1
:not(selector)	:not(p)	Selects every element that is not a <p> element	3
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent	3
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child	3
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent	3
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent	3
:only-child	p:only-child	Selects every <p> element that is the only child of its parent	3
:optional	input:optional	Selects input elements with no "required" attribute	3
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range	3
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified	3
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified	3
:required	input:required	Selects input elements with the "required" attribute specified	3
:root	:root	Selects the document's root element	3
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)	3
:valid	input:valid	Selects all input elements with a valid value	3
:visited	a:visited	Selects all visited links	1

Code Charge 的 Form Templates (表單模板)

Form Templates 表單模板是Code Charge 設計來給 Builder 用的。
Code Charge 自己內訂一組模版，放在安裝目錄下的 /Templates 裡面。
可以根據自己的想法，修改之。
可以改的有：

Authentication (i.e. Login form),
Editable Grid (i.e. Grid and Search forms),
Grid and Record (i.e. Grid, Record and Search forms),
Gallery (Gallery form),
Grid (i.e. Grid and Search forms),
Record, and Search.

大致來說，一個 From Template 也是一個 Code Charge Page，有 .ccp 及 .html。這兩個一組，如果要copy放到另一個目錄，一定要一起copy過去。

html 檔案裡面只能有三種東西：

template block ( xxxxx )
template variable ({ControlTitle}之類的)
html

絕對不能在裡面加上 Code Charge 的 Component，會亂掉。

HELP裡面的 Example 很清楚的範例，值得參考照著實作一次就大致知道了。

Code Charge 的 Builder 當掉

一個開發中的專案，當然碰到一大堆問題，慢慢的克服，今天下午，突然要跑 Builder 時掛了！

試過各種的 Builder ，都當！ Grid、Record 、Report、Editable Grid、Grid/Record等，都當！

是我的 Code Charge出問題嗎？

開另一個專案，跑 Builder，可以！那就表示 Code Charge沒有問題，是專案的設定有問題。

試了很多方法，因為之前有經驗，就是一個page remove designs時，會錯亂掉！所以我也懷疑Code Charge 的 .ccp 、.ccs 會不會可能也會錯亂？！如果 .ccs 或 .ccp錯亂了，可能導致AP跑起來當掉的。但是，正確的 .ccs/.ccp是怎樣？我還不是很清楚，也不知如何判斷，打開 .ccs/.ccp也看不出哪裡有問題？！

最後，想要會不會是 DBConnection 設定的問題，所以，又把 Connection 重新設定一次，重心存檔，在一次執行產生專案碼。再重試一次 Builder 就好了！

摸索了半天，Code Charge 還真煩人啊！

我想 Code Charge 還是還有很多小問題，如果不是很懂他的規則，總是會誤觸地雷，然後，就 GG ......了！

建議，經常性的備份，萬一掛掉時，還有回到之前狀態的機會。

code charge 的資料庫中文亂碼

今天建立一個新的專案，因為想說只有中文而已，因此，在專案設定上，server/script 上 Charset 設定為 utf8，Locales & Encodings 裡面的 File Encoding: Unicode(UTF-8)、Default HTML Encoding : Unicode(UTF-8)、Site Locales： Chinese (Default)，點進去看內容，Output Encoding 也是 Unicode(UTF-8)。想說這樣該設的都設了，Connection 部分找不到有設定 encoding 的地方，所以就把帳號密碼設設就以為好了。

結果，使用 builder 一建立一個 AP 出來一看，我的媽唉！中文全成了 "???????"！

關於資料庫中文 "??????"的問題，php+mySQL其實早有經驗了，只是好奇，為什麼之前一樣用 Code Charge 都沒有問題的，為什麼此時會有問題？！

因為，我的資料庫是原本就建立好的，而且之前用別的程式做抓資料都沒有問題，我也特別檢查一下我的資料庫，該是"utf"原本就都設了，沒有改變。那麼問題應該還是在 Code Charge 上面了。

弄了半天，只好試試在該程式頁的起始之後，寫了一小段 "SET NAMES 'UTF8'"，用程式強制mySQL用UTF8編碼，結果就正常了！

可是，Code Charge的問題ˋ出在哪裡呢？

請出全文搜索工具，尋找"UTF8"，其他正常的專案可以顯示中文，新的專案顯示不了中文，肯定是有不一樣的地方。果然，找到 Common.php 中有不一樣的地方。新專案的 $CCConnectionSettings = array() 設定沒有 Encoding "UTF8" ，成功顯示中文的有。

那是哪裡的設定出問題呢？

後來試了試，原來是在 Locales & Encodings 裡。只要新增一個English語系，也設成UTF8 ，原本的Chinese也給他設設(本來就有的)，這樣以後， common.php裡面，就自動產生了 Encoding "UTF8" 程式了！

這應該是 Code Charge 的 bug吧！理論上，Locales & Encoding 已經設了 Chinese UTF8 了，他還是把它當成一般的無 UTF8 的編碼，必需有新增一個 UTF8 的 Locales ，Code Charge才建立 UTF8的編碼起來。

訂閱：文章 (Atom)

2014年9月4日 星期四

2014年9月2日 星期二

從 w3school copy過來的資料，翻譯註解一下：

2014年9月4日星期四

2014年9月2日星期二