發表文章

目前顯示的是 10月, 2014的文章

如何使用Javascript取得HTML網頁中預設編碼(charset)

一個網頁的基本HTML架構如下,或是沒有特別標註,使用Browser預設編碼... < head > ... <!-- 一般的顯示 --> <meta http-equiv =" Content-Type " content =" text/html " charset =" utf-8 " /> <!-- HTML5 顯示方式 -->     < meta   charset= "UTF-8" > .... < /head > 我們可以使用以下的Javascript去擷取當下網頁的編碼。例如: Big5、UTF-8、EUC-JP(日文)....等等。 <script> / / 不要單單只使用一種擷取方式,因為使用者不會只使用IE。 //  所以,使用別的browser時候,就會出錯。 //  var charsetCode = document.defaultCharset;  // 所以我建議使用以下方式, // 只要Moz、IE或是其他Browser可以擷取出資 // 訊,就可以了不用寫一大堆if else去做browser種類分別了 var charsetCode =        document.charset || document.characterSet || document.defaultCharset; </script> 順利擷取網頁編碼後,也就比較容易可以藉此有更正確的encode或decode其他的參數值。例如:URL/URI中的參數Percentage-Encode/Percentage-Decode。誘惑著有其他中文應用顯示的差異,做出更正確的修正。

Google佛心來了!! 官方釋出大量 WEB、APP 視覺設計教學、資源和圖庫。

Google 所有的Android, iOS等...手機 icon圖庫 提供的下載: https://github.com/google/material-design-icons/releases/tag/1.0.0 Google 所有手機 UI/UX 視覺設計的技巧,以及所有的元素概念表現: https://www.google.com/design/spec/material-design/introduction.html 希望這兩個網站可以讓大家用的開心。

Android如何做硬體圖學、3D/2D繪圖加速 ( Manifest 設定 )

請在 Android Manifest.xml 當中,你所需要使用硬體加速的< activity >標籤中,加入 android:hardwareAccelerated 。以下是Google Android Developer中的原文解釋,詮釋得非常好,我也不多加贅述了。但是,他真正的重點是   Canvas, Paint, Xfermode, ColorFilter, Shader, and Camera 這幾的class method,才會是發揮這項OpenGL加速功能的重點項目,下面也說不是所有的2D方式都是有透過這項硬體加速的加持, 所以不要天真的以為ImageView在loading的時候可以加速喔!! android:hardwareAccelerated Whether or not hardware-accelerated rendering should be enabled for this Activity — " true " if it should be enabled, and " false " if not. The default value is " false ". Starting from Android 3.0, a hardware-accelerated OpenGL renderer is available to applications, to improve performance for many common 2D graphics operations. When the hardware-accelerated renderer is enabled, most operations in Canvas, Paint, Xfermode, ColorFilter, Shader, and Camera are accelerated. This results in smoother animations, smoother scrolling, and improved responsiveness overall, even for applications that do not explicitly ma

用 Javascript 取得 Browser 網路瀏覽器視窗大小

可以在<script>區段之中,撰寫這個function去得到browser視窗的size資訊。大家別忘記,網路瀏覽器有各個不同的版本、開發公司。所以,要記得做到兼顧Chrome、Opera、Safari、Firefox、IE...等等的瀏覽器。以下的程式已將各版本的擷取方式一一分出。此function更可以搭配 javascript 中的 window.onresize 偵聽機制去做應用。每當使用者縮放視窗大小之際,都可以擷取到當下的視窗大小尺寸。 視窗size擷取方式: function alertSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' )  { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; }  else if( document.documentElement &&                      ( document.documentElement.clientWidth ||                        document.documentElement.clientHeight ) )  { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; }  else if( document.body &&                     ( document.body.clientWidth || document.body.clientHeight ) )  { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.b

Facebook like-box 和 timeline 動態大小改變 (HTML & CSS)

請將以下兩個CSS的語法,複製貼上於自己所屬的CSS Style之中: Facebook Like-Box 註冊網址: https://developers.facebook.com/docs/plugins/like-box-for-pages 依照網頁中的指示操作,應是是很淺顯易懂的,這邊就不多加贅述。 CSS 第一個: .fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width:  100% !important;display:block;z-index:2000;position:relative} CSS 第二個: .fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe  span[style] {width: 100% !important;display:block;z-index:2000;position:relative} 再來將自己從Facebook developer中,取得的like-box API code置入自己想要顯示的HTML網頁<body>之中。 <div class="fb-like-box"         data-href="自己的紛絲頁短網址"          data-width="293"          data-height="350"         data-colorscheme="light"          data-show-faces="false"          data-header="false"          data-stream="true"          data-show-border="false"> </div> 執行結果: