[網站] 好站連結 (八) Android, javascript, CSS, PHP, Perl, FreeBSD, Linux

PHP

CSS

Html5

Git:

Javascript:

FreeBSD:

[Read More]

2011 OSDC Day 1 筆記

Update: 補上 OSDC 紀錄影片 2011.06.26 今年很高興可以北上參加 OSDC 2011 (Open Source Developers Conference),由於之前都在南部唸書及工作,沒有機會北上參加聚會,現在人在新竹,終於有機會可以參加了,雖然早上六點就要起床趕電車了,不過到現場聽課感覺就是不同,也可以認識很多新朋友,底下來紀錄上課筆記

微軟與 jQuery 社群的親密接觸

講者: Eric Shangkuan (Microsoft) Slide: 微軟與 jQuery 社群的親密接觸 這是 OSDC 第一場演講,早上九點就開始了,雖然人不多,但是蠻多人還是為了講者而來,首先介紹什麼是 jQuery,以及 jQuery 一些基本用法,像是 CSS selector,如何在 Windows Visual Studio 上面開發 jQuery 及撰寫 plugin 整合進去 ASP.Net,最後介紹三個不錯用的 jQuery Plugin: Templeate, Datalink, Globalzation

  • Templeate: 這搭配 Facebook api 可以直接做個人頁面,請參考這裡
  • Globalzation: 前端多國語系實做
  • Datalink: 可以快速處理 form,利用 object 跟 jQuery 搭配

如果要研究上述三個 jQuery Plugin 可以參考底下: jQuery Datalink: https://github.com/jquery/jquery-datalink jQuery Templeate: https://github.com/jquery/jquery-tmpl jQuery Globalzation: https://github.com/jquery/jquery-global

HandlerSocket - A NoSQL plugin for MySQL

講者: Jui-Nan Lin (PIXNET) Slide: HandlerSocket - A NoSQL plugin for MySQL 會後有部份聽眾提出了一些問題,PIXNET 也已經回報給 MySQL 請他們修復這些問題,可以參考 gslin 大神回覆的這篇: MySQL HandlerSocket 的情況…,不過 NoSQL 有個缺點就是沒有帳號密碼,這部份蠻好解覺的,因為 DB 都直接放在後面,前面加上防火牆就好了。

[Read More]

利用 jQuery 動態改變網站 CSS

繼前一篇所寫的『jQuery 偵測瀏覽器版本, 作業系統(OS detection)』,當我們遇到手機上網使用者,可以透過 javascript 來判斷目前使用者瀏覽器以及 OS,iPad user agent 如下:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 我們必須分析上面字串來判斷是否用手機上網,手機網頁跟PC網頁大小一定有所不同,透過底下兩個方法來改變瀏覽器的畫面

  • 自動導向手機網頁
  • 動態改變 CSS 兩個方法都不錯,如果決定使用前者,建議在 Server side 那邊做判斷,底下先列出 javascript, PHP, .htaccess 判斷檢查

The JavaScript

var isiPad = navigator.userAgent.match(/iPad/i) != null;

The PHP

$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');

The .htaccess

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.yourdomain.com [R=301]
如果您在前端做判斷,那就使用 jQuery 方式:
if(jQuery){
    jQuery("body").addClass("jq");
}
CSS 檔案:
.someClass{
    display:block;
}
.jq .someClass{
    display:none;
}
如果不用 jQuery 就使用底下寫法:
document.getElementsByTagName("body")[0].setAttribute("class", "js");

Html5 模板架構(Boilerplate)

HTML5 Boilerplate - A rock-solid default for HTML5 awesome._1282574693481 今年在 COSCUP 大會上最主流的議題就是 Html5,今天看到一個網站 HTML5 Boilerplate,這網站提一個全新 html 5 模板,自從離開 Dreamweaver 樣板軟體,利用 Pspad 手動撰寫 html,此網站就發揮非常大的用處,提供全新 html,CSS 以及 javascript,支援了底下很多功能:

  • 跨瀏覽器 (IE6…)
  • 支援多種 html5 Tag
  • Compress 和 cache html 檔案
  • CSS IE6 , IE7 Hack
  • IE6 Png Fix (連這個都幫忙解決了)
  • 支援 CDN jQuery,避免在 local 端沒讀取到檔案 你還可以根據自己需要的功能做添加或者是減少,CSS reset、跨瀏覽器 CSS、robots.txt、Apache .htaccess cache 壓縮也有支援,如果不需要的功能,也可以參考看看,對於初學者也是非常好的學習例子。

[網站] 好站連結 (七) Android, javascript, Css, PHP, Perl, FreeBSD, Linux

Windows C#

html

  • [將所有 的內容包到一個

    中][7]

apache

javascript

CSS

[Read More]

[CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript

先前在國外部落格發現一篇非常好用的教學:Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters,裡面有提供一部教學影片,非常好用,也很實在,底下可以先看影片,看完大概就可以針對 IE, FireFox, Chrome 進行 CSS Hack。 目前網頁製作,要符合多瀏覽器跨平台(IE, Safari, Chrome, FireFox…等),就必須動到 CSS Hack,雖然 Google 已經宣稱不支援 IE6,但是很多單位,很多學校跟客戶都是使用 IE6 瀏覽器,不只國內這樣,國外大廠也都希望支援 IE 系列,包含 IE6, IE7, IE8,這時候就必須知道如何分別針對各種不同 IE 做設定,底下就來看看實做例子。

[Read More]
CSS  html 

在 IE8 FireFox Chrome CSS 置中解決方法

在 IE8 還沒出來之前,都是利用 margin: 0 auto; 的方式來解決 div 置中的問題,但是這在 IE8 並沒有發揮作用,無效了,底下在網路上發現兩種解法,分享給大家知道: 1. Width:100% 在最外層 div 加入 Width:100% 的屬性,程式碼如下:

#container {width:100%;}
#centered {width:400px; margin:0 auto;}

2. Text-Align:Center 在 div tag 裡面加入 Text-Align:Center,這樣 IE8 會偵測到此語法,就會服從 margin:0 auto; 之屬性,不過這樣內容會被全部至中,如果您有需要將其 div 內容往左邊對齊,那就必須在加上語法 Text-Align:left,底下是範例程式碼:

#container {text-align:center;}
#centered {width:400px; margin:0 auto;text-align:left;}
IE6,IE7 則是利用下面語法:
#wrap {
  margin: 0px auto; /* firefox */
  *margin: 0px auto; /* ie7 */
  _margin: 0px auto; /* ie6 */
  height:100px; 
  width:860px;
  border:5px solid red;    
}
reference:

Centering a Div in IE8 Using margin:auto 【CSS 語法教學】區塊置中的三種寫法

CSS