• 推荐系统实践

    项亮
    2013-10-06 21:54:50
    向朋友咨詢
    2013-10-06 21:57:21
    電影的標題和海報。
    用戶反饋模塊——包括Play(播放)、評分和Not Interested(不感興趣)3種。
    推薦理由——因為用戶曾經喜歡過別的電影。
    2013-10-06 21:59:48
    。預測準確度是推薦系統領域的重要指標(沒有之一)。這
    2013-10-06 22:00:22
    所以,好的推薦系統不僅僅能夠準確預測用戶的行為,而且能夠擴展用戶的視野,幫助用戶发現那些他們可能會感興趣,但卻不那麼容易发現的東西
    2013-10-08 20:25:15
    他的基本意思就是,如果推薦結果和用戶的历史興趣不相似,但卻讓用戶覺得滿意,那麼就可以説推薦結果的驚喜度很高,而推薦的新穎性僅僅取決於用戶是否聽説過這個推薦結果。
    2013-10-08 20:26:16
    而增加推薦系統透明度的主要辦法是提供推薦解釋。只有讓用戶了解推薦系統的運行機制,讓用戶認同推薦系統的運行機制,才會提高用戶對推薦系統的信任度。
    2013-10-08 20:27:56
    推薦系統需要實時地更新推薦列表來滿足用戶新的行為變化
    2013-10-08 20:34:24
    基於用戶的協同過濾算法
    2013-10-08 20:41:17
    基於物品的協同過濾算法
    需要重新阅读

    多看筆記 來自多看閱讀 for iOS
    duokanbookid:ed873c9e323511e28a9300163e0123ac 
  • 我應該不會去寫這本書了。

    所以還是把大綱放出來給大家參考一下吧。 

    CSS3網頁框架大全

    【要求】

    (1)頁數在400-500頁。

    (2)全書案例都是一些炫彩的CSS框架,可以翻譯一些國外的。每張案例大概20頁。

    (3)第1章是CSS3的技術簡介,也別太多理論,以簡單案例為主。從第2章開始,每章是一個CSS3框架案例,先簡介下某框架,然后用此框架開發幾個網站模板,都要中文的。

    (4)全書的目錄標題要簡單,讀者一看就懂,不管讀者有沒有基礎都能看懂,這是關鍵。

    (5)提供開發過程中的疑難解答、調試問題、瀏覽器兼容技術,每章都有。

     

    【參考目錄】

    (1)目錄參考《HTML5游戲開發》一書

    http://product.china-pub.com/198661#ml

     

    本系列要出版的方向有HTML5+CSS3、CSS3、JavaScript組合案例、jQuery插件案例、HTML5移動應用案例、HTML5在線游戲案例、jQuery移動應用案例。

     

    您需要列大綱(確定寫作內容)--->寫10頁試試(根據出版規范寫作)--->出版社審批(提交作者表格和簡歷)--->簽訂合同

     

    一頁約 800 字, 包括圖片和代碼

     


    有用的link

     

     

       * http://www.gbin1.com/technology/html/2011111010handyhtml5css3frameworks/ 10个便利的HTML5/CSS3框架

       * http://www.iteye.com/news/20054  27 款经典的CSS 框架

       * http://www.webdeveloperjuice.com/2013/01/18/top-notch-css3-frameworks-worth-considering-for-website-design/ 8 Top Notch CSS3 Frameworks worth Considering for Website Design

       * http://webexpedition18.com/articles/responsive-css-frameworks/ 15 CSS Frameworks for Responsive Web Design

       * http://www.360doc.com/content/13/0110/01/21412_259269658.shtml

       * http://www.360doc.com/content/11/1126/12/8157240_167494521.shtml 

       * http://www.360doc.com/relevant/97354202_more.shtml 

     


    目錄

     

     

      1. 什麽是 CSS3

        1. CSS3 的定義

        2. 如何發展到 CSS3 版本并和過去版本的 CSS 比較

        3. CSS3 現在能做什麽

          1. 案例 A - iPad\iPhone 移動開發

          2. 案例 B - 和 HTML5 搭配開發「現代網站」

        4. 一些著名的 CSS 框架介紹

      2. 960Grid

      3. YUI 2: Grids CSS

      4. Blueprint 

      5. Twitter Bootstrap

        1. 簡介(Twitter 開發的,Twitter 亦基於 Bootstrap)

        2. 文檔

        3. 案例

        4. 擴展

          1. Bootswatch - 切換 Bootstrap UI 

      6. EZ-CSS (http://www.ez-css.org/)

      7. 高級的 CSS 開發技術

        1. LESS

          1. 簡介 LESS 如何使用

          2. Less Framework 4 http://lessframework.com/

        2. SASS

          1. 簡介 SASS 如何使用

        3. 對比分析 LESS 和 SASS 的優缺點

      8. 其他的一些 CSS 有益補充

        1. TYPO.CSS (CSS 中文排版)

        2. http://ethantw.net 的漢字標準格式

        3. Animate.css (CSS3 動畫庫)

        4. http://photon.attasi.com/ Photon CSS3 3D 光照引擎

        5. css3buttons https://github.com/michenriksen/css3buttons

      9. 使用 Javascript 來補充 CSS

        1. cssFX http://imsky.github.com/cssFx/ 自動添加prefix

      10. 有用的線上工具

        1. 

     

     

    待定是否介紹的框架

     

     

      1. thinkcss

     

     


    備註

    框架從 CSS3 的 css 文件集合開始介紹,到類似 Bootstrap 的多種集成框架,到 LESS、SASS 的編程式 CSS 開發介紹

    框架亦分 移動框架 和 桌面框架 兩個部份 , 最後介紹 自適應框架 .

     

     

      1. CSS Reset

      2. CSS 文件集合(動畫之類)

      3. 桌面框架(960gs\YUI\Bootstrap 等)

      4. 移動框架()

      5. 自適應框架

      6. LESS\SASS

     

     

    框架介紹方法

     

     

      1. 框架怎麼來

      2. 文檔 \ 技術支持

      3. 案例

     

  • 從 Mama 說起的前端優化

    Mama,是我一個興趣項目。

    網站截圖

    為什麼她需要前端優化呢?

    這是由於,在 1.1.4 版本中,她有一個新的功能「Line的表情」選擇。

    我一共下載了大約 800 個 LINE 的表情圖片,如果在舊的圖片添加方式上,我必須要如下操作 800 次才可以完成添加圖片。

    • 上傳圖片到 asset 目錄;
    • 添加一行 single.html 的代碼;
    • 修改 app.js 的代碼以確保顯示正確數量的文本輸入框;
    • 修改 photos.php 的代碼以確保位置正確;
    • 測試是否成功添加。

    如果我真的按照剛才的添加方法添加 800 的圖片,我不相信可以完成。所以,我決定重寫了 MAMA 的圖片添加方法。我做了什麼?

    • 新建了一個 output.php 的文件,用於檢查 pngs 的目錄內容。並且自動輸出 photos.json 文件以提供給 app.js 讀取。
    • app.js 讀取 photos.json 文件,自動創建對應的 HTML DOM 以顯示圖片。
    • 測試是否能夠正常工作。

    現在就變得很好,她終於可以不用手工修改代碼來實現添加圖片了。有一個簡單的腳本程序在維護。但是,這裡又引申出一個新的問題。圖片很多時候需要不同位置的輸入框,所以,我又給腳本作出修改,讓她能讀取一個對應的文件來自定義某些圖片。處理完圖片,其實,有些系列也就是有所不同的位置,如是,我給目錄也做出了基礎參數的支持。 image

    OK, very well. 一切看起來很好。
    如是,我就如此發佈了 1.1.4 的第一個版本。並且走去睡覺。

    解決 HTML DOM 性能

    在我睡醒之後,我總覺得伺服器訪問起來很緩慢,「添加分鏡」的功能需要等待大約 6 秒的加載時間,我在思考是不是一些什麼事情從而導致這個緩慢的問題。然而,我打開了 Safari 的「檢察元素」工具來分析這些載入時間的問題。

    image (我已經沒有當時的分析記錄的截圖了)

    然而,讓我驚訝的事情是,app.js 的腳本工作得很慢。特別它在請求 single.html 的時候,就有大約 6 秒的時間讓瀏覽器卡死。

    image

    如是,我開始思考這其中的原因。經過分析,我覺得這是讓 Javascript 做了太多的事情了,從 Ajax 獲得文本,到建立 HTML DOM,接著瀏覽器還要瞬間加載大約1000個圖片 。這一切,讓 Javascript 的性能遇到瓶頸了。

    第一步,我放棄了讓 Javascript 來自動建立 HTML DOM。我寫了另外一段代碼,使用 PHP 寫的。來完成 HTML DOM 的建立。

    image

    這樣的修改,「添加分鏡」這個功能就從 6 秒的等待時間,縮短到了 4 秒了。

    第二步,使用 LazyLoad 的辦法加載圖片。我繼續分析,我認為瞬間加載 1000 個圖片這個方法蠢死了。於是,我做出了少留修改,讓這1000個圖片使用 LazyLoad 的辦法載入。(上面的代碼片段已經包含了LazyLoad)

    第三步,過去的 Load 的辦法,我也修改為 get 的辦法image

    第四步,很理所當然地把所有的 PNG 文件都壓縮了一遍。

    很好,一切的速度的感覺回來了。

    現在,點擊「添加分鏡」按鈕只有大約 1 秒多的延遲,但是我暫時沒有辦法解決這個問題。除了還有這個問題,還有一個問題就是編輯窗口的圖片必須要等待小圖片的完整載入才可以開始載入。這個我相信是瀏覽器的下載線程導致的。

    這個筆記,關鍵在於有幾點:

    • 不要讓 Javascript 來處理 DOM 的事情(很慢)
    • 同時載入 N 個圖片是一個笨死的辦法
    • 能夠在服務器端完成,就不要在客戶端完成(能寫 PHP 就不要寫 Javascript)。
  • Safari 中文最佳化設定

    每天看著這麼多奇怪的中文字體的網站不難受嗎?

    不要讓自己難受了。

    使用 Safari 外掛這個腳本就可以糾正很多看起來不舒服的字體。

     

    Tips

    • Hiragino Kaku Gothic ProN 是我最愛的字體,但是他是一個日文字體,使用了 Hiragino Sans GB 在後補字。不喜歡請刪除「Hiragino Sans GB」字樣即可。
    • @font-face 系列用來是替換不美觀的字體。

     訪問 Github 以獲得此腳本。

     

     

  • 在需要使用百度地图的地方
    加入
     
    img {
      max-width: none;
    }

    即可.

    目前在研究 Web 如何更好地显示地图.

     

    来自 nanju

    内置的CSS:

    #map_canvas img {
            max-width: none;
    }