Archive

Archive for April, 2012

HTML and CSS (3)

April 30, 2012 Leave a comment

Interactive CSS:

  • #idName:hover {…} /* mouseover */
  • #idName:active {…}
  • #idName:link {…}
  • #idName:visited {…}
  • #idName:before {content: “string”;} /* generate content */
  • #idName:after {content: “string”;} /* generate content */
  • #idName:nth-child(odd) {…} /* set all children that are odd */
  • #idName:nth-child(even) {…} /* set all children that are even */
  • #idName:first-child {…}
  • #idName:last-child {…}

Example:

  • #nav ul li a{
  • padding: 20px;
  • background: orange;
  • color: white;
  • }
  • #nav ul li a:hover{
  • background-color: #ffb424;
  • box-shadow: 0px 1px 1px #666;
  • }
  • #nav ul li a:active{ background-color: #ff8f00; }

New HTML5 Codes:

  • <section></section>
  • <nav></nav>
  • <footer></footer>

Selectors Hierarchy:

  • #id .class div /* descendant selector: applied to div under class with id */
  • div > p /* child selector: applied to p that are direct descendant of div */
  • div, p, strong /* group selector */
  • #id:hover /* Pseudo selector */

!important declaration:

  • div { font-size: 10px !important; }

Advertisements
Categories: HTML

Dropbox檔案轉移大計

April 25, 2012 Leave a comment

不知不覺,Dropbox的22GB空間,已經用了10GB,近來真是用得太快了!雖然透過推薦其他用戶,還可再增加7GB,令容量增至29GB,但還是希望節省一點空間。

影片移至Skydrive

最近,微軟宣布將Skydrive容量由25GB減至7GB,真是令人失望,現在舊用戶仍可復原至25GB,新用戶就沒法子了。我還有兩個Windows Live帳戶,兩個Sykdrive合共50GB,這樣大的容量足夠裝下很多檔案。我主要把影片檔案放在Sykdrive,因為影片檔案往往容量很大,現在Skydrive單個檔案大小限制由50MB增至2GB,就更適合放影片檔案了!

相片移至Picasa

Google收購的Picasa,最大優勢是無限容量(2048×2048像素以內),而且擁有Picnik或Creative Kit作相片編輯工具,既有Windows客戶端,亦有Picasa Web Albums可供隨時上網瀏覽。此外,透過Cloud Save這個Google Chrome Extension,可以很方便的將網上的照片直接另存到Picasa當中。

文件移至Google Docs/Drive

Google Docs,也是無限容量,但必須是Native Google Document,上傳檔案會計入容量,原本只有1GB,推出Google Drive後加至5GB。我現在會用Google Docs寫隨筆,寫文章,Evernote則是備用,其實Skydrive也有文件編輯功能,但我總是比較習慣使用Google Docs。

這樣的檔案轉移大計只是初步有個模樣,但我估計完成後,Dropbox的使用空間可以由10GB降至3GB,大大地節省空間呢!

Google Drive推出

April 25, 2012 Leave a comment

傳聞已久的Google Drive終於推出,現階段會分批開放給用戶使用,用量與傳聞一樣是5GB,並與Google Docs高度整合。

Google Drive真正革命性的地方是它為開發者提供SDK,讓開發者可以開發第三方應用。與Google Drive一起發布的第三方應用有18種,Google Drive可以打開的文件格式超過30種,當中除了常用的圖片和影片格式外,更包括較不常見的PSD(Photoshop Document)、MND(AutoCAD)等。

期待與Chrome OS深入整合

Chrome OS推出至今反應平平,其中一個最重要的問題是欠缺雲儲存和雲應用的整合,因為人們仍未能脫離本地文件和應用。Dropbox和類似的應用都只是雲儲存工具,並不支援在網上打開或編輯檔案(其實近期Dropbox推出「Get Link」功能,已經開始支援部份檔案格式的讀取,如.doc、.ppt、.xls等)。而一些雲應用,如Picnik只能上載檔案來編輯,不能直接存取、讀寫雲儲存的檔案。

而Google Drive打破了這種限制,至此雲儲存才與雲應用結合,而未來隨著更多Google Drive平台的應用推出,這種雲儲存與雲應用結合的優勢會更明顯。

打造另一個生態系態

Google近年動作頻頻,先後打造了Android和Chrome App Store兩個生態系統,兩個平台上的開發者都不少,但能否將兩個平台上的優勢,延續到Google Drive上,則仍是未知之數。

Google Drive對Google來說,是重要的戰略部署,讓Google Drive與Chrome OS、Picasa、Google Doc、Gmail、Google+深入整合,會更能突顯出Google Drive平台的優勢。

打造Android和iOS App

另一件Google當前要做的事,就是推出Google Drive的mobile app,如同Dropbox、Skydrive等對手一樣。更進一步的話,Google 應該將Google Drive和Android系統深入整合,令雲端文件可以和本地文件一樣容易地在手機上開啟和編輯,打造真正的移動雲作業系統。

P.S. 最近雲儲存有幾個重要的轉變,我都沒有時間寫,包括Skydrive推出客戶端,但容量由25GB減到7GB,Dropbox推出「Get Link」功能,不過這兩則新聞是不及Google推出Google Drive重要。

Categories: Chrome, Dropbox, Web

HTML and CSS (2)

April 18, 2012 Leave a comment

HTML中的Style Sheet:

  • /* HTML body中的CSS */
    <div style=”color:red; background:teal;”></div> <!– whole line –>
    <span style=”color:red; background:teal;”></span> <!– part of line –>
  • /* HTML header中的CSS */
    <style>
    em {color:green;}
    span {font-family:monospace;}
    .className {color:green;}
    </style>
  • /* 連結HTML外部文件的CSS */
    <head><link rel=”stylesheet” href=”style.css” /></head>
    <head><link rel=”stylesheet” href=”http://twitter.github.com/bootstrap/assets/css/bootstrap.css”></head&gt;

外部文件的CSS:

  • selector, selector  {property: value value; property: value value;}
    parent descendant: {…}
    parent > child: {…}
  • * { color:red; } /* Global Selector */
    html * * *  /* HTML下第三層所有 */
  • p { color:red; } /*  */
  • .className {color:blue;} /* Class,HTML中加入「class=”className”」顯示 */
    p.className /* 在Paragraph中符合className的 */
  • #idName {color:yellow;} /* ID attribute,HTML中加入「id=”idName”」顯示 */
  • #idName li /* 在idName子層的li */
    #idName li:hover /* Mouseover時的反應 */
    #idName li:first-child /* 第一個li */
    #idName li:last-child /* 最後一個li */

CSS Style(color):

CSS Style(text appearance):
  • font-family:monospace/arial;
  • font-weight:bold;
  • font-size:25px;
  • font-style:italic;
  • text-decoration:underline/overline/line-through;
  • text-shadow: 3px 3px 3px yellow;
  • text-transform:capitalize/uppercase/lowercase;
CSS Style(layout):
  • text-align:left/right/center/justify;
  • text-indent: 5%/20px; /* 第一行縮行 */
  • width: 10px/10%;
  • height: 10px/10%;
  • letter-spacing:normal/10px;
  • line-height: 5%/20px;
  • column-count: 3;
  • transform: rotate(25deg);

CSS Style(shadow):

  • text-shadow: [left] [top] [blur] [color];
  • box-shadow: [left] [top] [blur] [color];

CSS Style(“Box Model”: content > padding > border > margin ):

  • padding: 30px/30%; /* = [top] [right] [bottom] [left] */
  • box-shadow: 8px 8px 6px -2px black; /* shadowed box */
  • border: solid/dashed 1px black; /* = [style] [width] [color] */
  • border-radius: 15px; /* rounded corners */
  • margin: 10px/10%;  /* = [all four]/[vert][horz] */
  • margin: 10px/10%;  /* [top] [right] [bottom] [left] */

CSS Style(positioning):

  • float: left/right; height/width: 50%; /* make it “float” and separate as left and right columns */
  • right: 15px; left: 15px; top: 15px; bottom: 15px;
  • position: absolute; /* to position elements relative to their ‘containing block’ */
  • position: relative; /*  to position blocks relative to where they would have been in the document flow */
  • position: fixed; /* like absolute but ALWAYS relative to the browser window no matter how you scroll */
  • position: static;
  • display: inline; /* include part, not whole line */
  • display: block; /* include whole line */
  • display: none; /* not displaying */
  • display: inline-block; /* vertical lined >> in one line */
  • clear: right/left/both;  /* clear format set previously */
  • z-index: -5 /* vertical depth */
Categories: HTML

Nokia Lumia Series Sales-in Commentary

April 12, 2012 Leave a comment

諾基亞剛剛發出盈利預警,預期手機銷售業務的利潤率由2%跌至負3%,該業務首次出現營運虧損。低端手機市場不容樂觀,競爭激烈化,諾基亞仍未能擺脫目前困境,而這個昔日的手機界巨頭正將希望放在Windows Phone的Lumia系列上。

回顧去年財務報表,11月才開始銷售的Lumia手機系列銷量超過100萬部,而且銷售地區包括歐洲、香港、印度、俄羅斯、新加坡、南韓及台灣。

今年首季,諾基亞在美國推出Lumia 900的首部LTE手機,又在中國推出Lumia 610、Lumia 800C等手機。而最新的盈利預警顯示,Lumia手機系列首季銷量超過200萬部,平均售價220歐羅(約2200港元)。

隨著Lumia系列開始在中國及美國這兩個最大智能手機市場銷售,相應銷量應該有不俗增長才對,但去年銷售了一個多月銷量有100萬部,今年首季三個月銷量200萬部,銷情不算差,但也不是特別好。對比一下,Samsung Galaxy S II去年4月上市,5個月後全球銷量達1000萬部,10個月後達2000萬部,整個系列加起來也不及GSII一部手機的銷量,更不要說Apple iPhone系列單季銷量就達3700萬部。

如果單看Lumia第一季200萬銷量,其實也算不俗了,但平均售價只有$2200,亦未免太低,考慮到Lumia 800及710在香港的售價分別為$4398及$2880,平均售價如此低實在不可思議。唯一的解釋是,在其他地區,Lumia系列售價都比香港售價低,而且這200萬的銷量主要是來自低階的Lumia 710及610,高階的Lumia 800及900銷情非常一般。我本人倒期望Lumia 710香港銷價能夠再便宜一點,那就我換手機時就可以買得更開心。 =)

不過,諾基亞品牌在內地有相當的號召力,不少中國人仍然以擁有一部諾基亞手機為榮,而Lumia系列正式引入內地也只是3月的事,唯有寄望在華銷情可以扭轉乾坤。

Categories: WP Tags: , ,

HTML & CSS

April 9, 2012 Leave a comment

基礎HTML語法:

  • <html></html>
  • <head></head>
  • <title>Title</title>
  • <body>Body</body>
  • <p >Paragraph</p>
    • <p style=”color:red/#FF0000″></p>
    • <p style=”font-size:20″></p>
    • <p style=”text-align:center/left/right”></p>
    • <em>Emphasis</em>
    • <strong>Strong</strong>
  • <h1>Headline 1</h1>…<h7>Headline 7</h7>
  • <a href=”hyperlink_reference”></a>
  • <ul><li>List Item</li></ul>  <!– unordered list –>
  • <ol><li>List Item</li></ol>  <!– ordered list –>
  • <img src=”source_link” length=”480″ width=”360″ />
  • <table></table>
    • <thead></thead>  <!– table head –>
      • <tr></tr>  <!– table row –>
        • <th colspan=”2″></th>  <!– table head –>
    • <tbody></tbody>  <!– table body –>
      • <tr></tr>  <!– table row –>
        • <td></td>  <!– table data –>
  • <table></table>

 

Categories: HTML

網絡服務分散問題

April 7, 2012 Leave a comment

好用的網絡服務很多,但就是太多了,這就成為一個問題,各類的資料、文章、照片分散(Scattered)在不同的網絡服務中,無法統合。這篇文章稍稍列舉我常用的服務。

資料類
Dropbox:主要資料放在Dropbox,有Cloud Save非常好用
Google Doc:部份文件會放在Google Doc

文章類
Gmail:在Google Reader見到有意思的文章,會「標誌星號」並利用ifttt自動傳送到Gmail及Readitlater
Evernote:在網上找到有用資訊,會用Evernote的Chrome Extension擷取存放到Evernote中

撰文類
Wordpress:公開的自撰文章會放到Wordpress上,當作自己的公共文件夾,歡迎任何人隨時翻閱
Blogger:公開的自撰文章也會放到Blogger上,但存放的是不同類型的文章
Google Docs:私人的自撰文章放在Google Docs,也有一些學生時期的功課
Evernote:私人的自撰文章有些會放在Evernote

照片類
Facebook:放在Facebook當然不少
Picasa:放在Picasa其實也多,但奇怪Picasa一直沒有iOS程式(Android版有了很久),覺得很麻煩,想轉到Flickr但覺得更麻煩
Wordpress及Blogger:一些網誌用的照片有時直接放在Wordpress及Blogger,要轉很麻煩

其實我覺得使用這些服務時,應該要有更明確的分工才行……