在‘Web Developer’分類底下的文章

自適網頁RWD開發心得

最近大家有發現部落格的樣子隨著日子在偷偷的改變嗎? 是的!最近我在進行部落格的版面小修改! 主要訴求是要將版面改版成具有專業感、清楚、易讀, 然後呀,本部落格現在開始支援Responsive Web Design囉!(灑花~~灑花!! 其實自適網頁說穿了,只是用多組的CSS,可以在不同瀏覽環境下切換畫面的CSS, 這可以讓同一個網頁在手機以及電腦上,呈現不一樣的樣子。 RWD一般最常見是使用media queries,利用條件設定去設定裡面所設定的CSS要在何種狀況被使用。 我的開發心得 那這次的改版過程中,下面幾點是我覺得在開發RWD時要去注意的 若有需要使用JS去做網頁動態,不要將CSS直接在JS裡面加,例如 $(“.content”).css(“display”,”none”);//js 類似上面的這種的作法都要通通避免,JS一定要避免掉所有和版面有關的設定。 像上面這種寫法,應改成: $(“.content”).addClass(“display-none”);//js .display-none{display:none;}/*CSS*/ 這樣可以避免在切換為不同顯示方式時彼 […]

繼續閱讀...

WordPress Plugins開發分享

wordpress簡報下載 上面的是我分享的Wordpress套版開發的PowerPoint 其內容截錄如下: 1. WordPress簡介 • 一個以PHP和MySQL為平台的自由開源的部落格軟體和內容管理系統。 • 使用者可以安裝和切換主題。主題可讓使用者不改變部落格內容和結構的情況下更改介面和WordPress站點的功能。 • WordPress非常流行的一個特性是它豐富的外掛模組架構,外掛模組能使使用者和開發者擴充功能WordPress程式的功能。當前WordPress外掛模組資料庫中有超過18000個外掛模組,包括SEO、控制項等等。 2. WordPress基本介紹 • 在WordPress裡,網頁分文章及頁面。 • 頁面: 網頁中的固定頁面,不經常更新,例如關於我們、聯絡資訊。 • 文章: 網頁中的經常性變更頁面,常更新,例如最新資訊、我的作品。 • 每一篇文章及頁面都可以設定是否開啟迴響,迴響是類似留言版的地方,會顯示在網頁的下方。 • 外掛及佈景主題皆可以在官網下載或尋找免費支援,許多免費外掛或主題也有提供功能較完整的付費版本,此為WordPress的主要營收來源。 […]

繼續閱讀...

製作WordPress的第一個Plugins開發

1. 在wp-content\plugins下隨意新增一資料夾,建立一隻php檔案,在這邊我是命名為Claire.php 2. 在Claire.php裡加入下列程式碼

繼續閱讀...

CSS Vertical Align(用純CSS解決div垂直置中)

本文出處:http://blog.yam.com/hanasan/article/35806444 本次要介紹的是CSS垂直置中(Vertical Align with css)的完整解決整理。 說實話這並不太容易,雖然不像水平置中 {margin:0 auto;} 那樣單純, 但仍有幾種方式可以作到,以下共有五種方式一一介紹。 每種使用方式各有其優、缺點,端看自己要置中的內容是「區塊」或是「文字」來取捨。 方法一 使用CSS table-cell屬性來完成,什麼是table-cell?簡單說就是針對一些html object附于它table的屬性(詳見此), 如果曾經使用過table來排版的網頁開發者,應該知道td的既有屬性valign,古早以前根本不會有垂直置中的問題,因為td下個 valign=”middle”就行了。 而table-cell即是可以將div模擬成表格(table)的儲存格(td),讓原本不存在vertical-align的div可以使用。 Sample Code HTML <div id=”wrap”> <div id= […]

繼續閱讀...

JQuery選擇器

1. 選擇所有的table $(document).ready(function() { $(‘table tr’).filter(function(index){ //…. }); }); 2. 選擇第N行(若有很多table則只會選第一個table的第N行) $(document).ready(function() { $(“tr:eq(1)”).addClass(“mytr”); $(“tr:eq(2)”).css(‘background-color’,’#663300′); }); 3. 選擇第N行(若有很多table則會選擇每個table的第N行) $(document).ready(function() { $(“table tr:nth-child(1)”).addClass(“mytr”); }); 4. 選奇偶行 $(document).ready(function() { $(“table tr:odd”).addClass(“trOdd”); $(“table tr:even”).addClass(“trEven”); }); 3. 選第一個元素 $(docu […]

繼續閱讀...

初探HTML5的WebSockets

我是參照這個教程下去學習的 Start Using HTML5 WebSockets Today http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/   【Server設定方法】 1. 先下載WebSockets Server端的程式 http://nettuts.s3.amazonaws.com/751_webSocketsStarter/websocket_source_files.zip 2. 下載最新版的xampp http://www.apachefriends.org/zh_tw/xampp.html 在這邊我下載的是XAMPP Windows 1.8.0的版本,其相關的細項版本如下: Apache 2.4.2, MySQL 5.5.25a, PHP 5.4.4, OpenSSL 1.0.1c, phpMyAdmin 3.5.2, XAMPP Control Panel 3.0.12, Webalizer 2.23-04, Mercury Mai […]

繼續閱讀...

使用php抓取網路上的圖片

首先要先至網站上下載snoopy類別 可用以模擬表單送交或是抓取網路頁面 http://snoopy.sourceforge.net/ 然後使用下面的範例程式就可以順利下載圖檔了 include(“snoopy.class.php”); $forder = ‘tmp/’; function downimage($furl) { global $forder; $filename=””; $str=explode(‘/’,$furl) ; $filename = $forder.$str[count($str)-1] ; $snoopyx = new Snoopy ; $snoopyx->fetch($furl) ; if($snoopyx->results !=””) { $handle = fopen($filename, ‘w’) ; fwrite($handle, $snoopyx->results) ; //把抓取得內容寫到 臨時文件中 fclose($handle) ; } return $filename ; } echo downimage(‘http: […]

繼續閱讀...

在php裡使用gmail及phpmailer發信

首先先至phpmailer下載php4在用的版本 http://phpmailer.worxware.com/ <=官網 http://sourceforge.net/projects/phpmailer/files/phpmailer%20for%20php4/PHPMailer%20v2.0.4%20for%20PHP4/ <=載點 打開後在根目錄的 class.phpmailer.php和class.smtp.php是最主要的發信類別 剩的檔案則皆為範例檔 然後下面是一個最簡單的範例(使用gmail發信) include(“class.phpmailer.php”); //匯入PHPMailer類別 $Name=”Name”; $Mail=”Mail@Subject.com”; $Subject=”Subject”; $Sendbody=”Sendbody”; $mail= new PHPMailer(); //建立新物件 $mail->IsSMTP(); //設定使用SMTP方式寄信 $mail->SMTPAuth = true; //設定SMTP需要驗 […]

繼續閱讀...

寄送mail的header和內文設定(utf-8)

現在大多數的信件系統都已使用utf-8 之前寄出utf-8的信件常會發生信件標題和headers資訊變成亂碼 查了老半天網路 原來不支援主要的原因在於,電子郵件標準格式中 表頭的部分不允許使用雙位元的文字 所以,使用mb_encode_mimeheader()函式 將雙位元文字編碼為單位元字串。 以下為headers的範例 mb_internal_encoding(‘UTF-8’); $headers = ‘MIME-Version: 1.0’ . “\r\n”; $headers .= ‘Content-type: text/html; charset=utf-8’ . “\r\n”; $headers .= ‘From: ‘.mb_encode_mimeheader(‘標題) .’ ‘ . “\r\n”; mail($to, mb_encode_mimeheader($title, ‘UTF-8’), $content, $headers); 這樣便可成功解決「郵件標題」或「寄件者」是亂碼的問題 ======================================= 若是電 […]

繼續閱讀...

用php產生excel文件

在古早之前我都是使用php產生csv純文字逗點分隔來將資料下載為excel 但最近用csv時,因網站系統使用utf-8編碼 而csv只能支援big5 導致文字編碼轉換時發生嚴重的漏字問題 在尋求了google大神之後 原來現在都是改用xml的格式 也就是xls來做純文字的 雖然會造成檔案較大 但是可以設定該欄位要以數字 日期 或字串格式顯示 也可支援utf-8 http://code.google.com/p/php-excel/ 這是一個可以幫你自動產生xls的php開源 非常的方便 使用範例如下 // include the php-excel class require (dirname (__FILE__) . “/class-excel-xml.inc.php”); // create a dummy array $doc = array ( 1 => array (“Oliver”, “Peter”, “Paul”), array (“Marlene”, “Lucy”, “Lina”) ); // generate excel file $xls = new Excel_X […]

繼續閱讀...