2019年5月23日 星期四

[Adobe XD] 在手機上預覽 prototype

發表於 2019年5月23日 星期四 5月 23, 2019 /  沒有留言
標籤 , ,
Adobe XD 在做 prototype 上真的很方便，我們可以在電腦上預覽並操作，那如果想在 app 上直接看操作的結果，可以試試這個方法。

1. 首先將 prototype 發佈到網站上



2. 發布後可以看到一個線上的連結，把這個連結複製後用手機打開



3. 打開後就可以操作了，如果在 iOS 上想要操作的時候看不到上下的導覽列，可以按下面分享的按鈕然後選擇加入主畫面




4. 可以取一個名字方便辨識



5. 接著點開已經存到桌面的 icon 即可



Read more

2019年5月21日 星期二

js 列出日期區間並排除其中的特定日期

發表於 2019年5月21日 星期二 5月 21, 2019 /  沒有留言
標籤
如果想要處理時間方面的問題，可以使用 moment.js 這隻 plugin，然後用下面的方法寫就可以了。

var excludeDates=['2019-01-17','2019-01-22', '2019-1-25'];
    function getDates(startDate, stopDate, excludeDates) {
        var dateArray = [];
        var currentDate = moment(startDate);
        var stopDate = moment(stopDate);
        while (currentDate <= stopDate) {
            let currentDateString=moment(currentDate).format('YYYY-MM-DD');
            if(!excludeDates.includes(currentDateString)){
                dateArray.push( moment(currentDate).format('YYYY-MM-DD') )
            }
            currentDate = moment(currentDate).add(1, 'days');
        }
        return dateArray;
    }
    dates=getDates(new Date('2019-01-15'),new Date('2019-01-28'), excludeDates);
    console.log(dates)
Read more

2019年5月19日 星期日

2019年5月16日 星期四

2019年5月11日 星期六

2019年5月9日 星期四

2019年5月8日 星期三

如何在 facebook 上播放無限循環的 gif 動畫

發表於 2019年5月8日 星期三 5月 08, 2019 /  沒有留言
標籤 , ,
facebook 開放 gif 動畫後，常常會看到一些有趣的可以無限循環播放的 gif，但 facebook 本身還是沒辦法上傳 gif，所以想要使用這個效果的話，可以先到 GIPHY 這個網站。

GIPHY 網站連結

右上角有一個上傳的按鈕，這個網站可以不用登入就能使用上傳功能。


之後選擇上傳的方式


上傳完成後再分享到 fb 就好了
Read more

2019年5月7日 星期二

Templated- 超過 800 個免費 HTML5, CSS 跟 RWD 版型下載

發表於 2019年5月7日 星期二 5月 07, 2019 /  沒有留言
標籤 ,
要做網站的時候對於設計版型或是 RWD 覺得煩惱嗎? Templated 是一個目前已經有超過 800 個版型，而且包含 RWD 的免費版型下載網站，只要在裡面挑選一個你喜歡的版型，完全免費! 而且還可以商用喔，心動不如趕快來看看。

網站連結: Templated



使用方法很簡單，只要選擇喜歡的版型直接下載，也可以先預覽看一下實際的效果和 RWD 的變化，許多版型都還有生動的互動效果，看完喜歡再下載就可以了。


或許比較可惜的只是沒有辦法選擇風格或搜尋，但慢慢逛慢慢看也是一種樂趣就是了。
Read more

2019年5月6日 星期一

2019年5月5日 星期日

[CSS] 背景重複屬性- background-repeat

發表於 2019年5月5日 星期日 5月 05, 2019 /  沒有留言
標籤 ,
我們想要設定 CSS 的背景是否重複，可以設定 background-repeat 這個屬性，預設為 repeat，也就是會無限重複，可以設定 repeat-x 或 repeat-y 讓背景在某個軸線上重複就好。

background-repeat: repeat;



background-repeat: no-repeat;


repeat 跟 no-repeat 的差別比較明顯，另外還可以設定為 round，跟 repeat 的差別是在於他會把圖片完整的放到區域內，所以很有可能會變形



還有一個屬性則為 space，則是把圖片完整的放到區域內，最旁邊會貼著邊緣，其他就會依據剩餘空間，能放多少張完整的圖片就放多少張，然後再平均分配。
Read more

2019年5月4日 星期六

使用 Google Data Studio 整合 google analytics 資料製作資訊儀表板

發表於 2019年5月4日 星期六 5月 04, 2019 /  沒有留言
標籤 ,
以往看 google analytics 的時候都需要到服務的頁面去看，網站一多要切換覺得很麻煩，而且有用過的應該也知道切換的時候其實不是那麼快，所以之前有段時間有用一個服務把這些資料整合在一起，用了好一陣子，但前陣子宣布要關掉，現在也正式下線了，還在想該怎麼辦的時候，查了一下才發現原來 google 本身就有出類似的服務了，怪不得那個服務會收掉...


服務的名稱就是 Google 數據分析，服務網址在此


點進去後可以看到這樣的頁面，如果已經有建立一些 dashboard 的話，點進去就可以看到資料，官方也有一些範例的 dashboard 可以直接使用。




要使用的話要先匯入一些資料，點選選單的資料來源匯入資料




已經建立的資料列表，右下角的按鈕按了可以新建連結




可以選擇的類型很多，我們這邊就選擇一下 Google Analytics 那一項




選擇好後按右上角連結(說實在第一次要找都要花點時間)




第一次建立的話可以在這一頁按右上角建立報表，直接開始，如果是要把資料建到目前已經有的報表，就回到報表首頁就可以了




接著從新增圖表那邊，選擇你想建立的類型




接著就可以依序設定資料來源還有想看的資料那些的了，每種圖表可以讀取的資料都不大一樣，大致摸一下應該就有感覺了。



多花點時間調整，完工的畫面可以做成這樣



一開始不知道怎麼調整的，官方也有一些 Gallery 可以直接用，有些還滿好用的，另存範本後再直接改成你的資料就可以了，覺得這種儀表板真的對資料的整合上非常有幫助，有興趣的朋友可以試試看喔。

Read more

2019年5月3日 星期五

2019年5月2日 星期四

[CodeIgniter] 使用 CI 產生 sitemap.xml

發表於 5月 02, 2019 /  沒有留言
標籤 ,
想要 SEO 好，sitemap.xml 不能少，sitemap 可以使用一些線上的產生器來產生，但免費的限制都很多，主要是收錄的網址太少在網站經營一陣子之後都一定不夠用，所以一般網站都會自己產生 sitemap，在 CodeIgniter 裡要產生的話可以參考以下方法：

建一個 controller
controllers/seo.php

Class Seo extends CI_Controller {

    function sitemap()
    {

        $data = "";//依據你的網站的結構產生資料
        header("Content-Type: text/xml;charset=iso-8859-1");
        $this->load->view("sitemap",$data);
    }
}


在 views/sitemap.php 裡這樣寫


最後設定一下 route
config/routes.php
$route['seo/sitemap\.xml'] = "seo/sitemap";



Read more

2019年5月1日 星期三

訂閱： 文章 (Atom)
Related Posts Plugin for WordPress, Blogger...