不可思議的 網站設計

手機, 電腦, 平板 三個願望一次滿足,

畫面內容隨心所欲,卻如此簡單迅速。

立即體驗不可思議 的感覺吧!

很多時候架設網站不免會加上些頁面效果,

而很多時候 JavaScript 的程式碼就被大拉拉的複製走了!!!(雖然我覺得沒什麼)

但嚴重點,會有人透過你的 JavaScript 對你的網站逕行攻擊。

 

http://www.jsfuck.com/

是一個將 JavaScript 編譯的 JavaScript library 可以防止原始碼被串改複製。

例如

alert(1)

他會編譯成

[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]((![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+[+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]])()

把原本的 JavaScript 打到作者自己都認不得了。

想要簡單讓網站有動畫效果,又不想寫一大堆煩人的 css 跟 javascript 嗎?

Animate.css 是一個 css 的動畫 library ,

你只要在你想呈現動畫的 Html 標籤中加入動畫效果 對應的 class 名稱,

就能簡單的把動畫效果加入囉!

相是

網站動畫設計

bounce 動畫效果

<div class="wow bounce">
    <h1>網站動畫設計</h1>
    <p>bounce 動畫效果</p>
</div>

官方網站:http://daneden.github.io/animate.css/

網站假資料生產器 Faker

當你在網站製作時,手動測試, 單元測試, 壓力測試。 不免都要新增些假資料吧?

網站製作時遇到的內容真是千奇百怪,

在測試時看到一堆人名叫做 test, test1, test2, testn 帳號無法編輯... 等等?剛剛是哪個 test 無法編輯?

Faker 是個專門新增假資料的 PHP library ,它會幫你生產出精美又漂亮的測試假資料,讓你再也看不到 test 出現在人名上。

我們可以透過 composer 輕鬆的安裝起來並使用。 不管是輸出郵遞區號, 地址, 人名, 生日, 電話, 各種網站製作上用得到的資料都難不倒它。

底下是簡易的使用範例。

<?php
// 將 faker 載入
require_once '/path/to/Faker/src/autoload.php';

$faker = Faker\Factory::create();

// 人名
echo $faker->name;

// 地址
echo $faker->address;

// 純文字
echo $faker->text;

詳細可參閱 Faker 的 Github : https://github.com/fzaninotto/Faker

Symfony2 是一個頂尖,且傑出的 PHP 框架,

預設的網頁伺服器是使用現在最多人使用的重兵器 Apache2,

但有時為了特殊網站架設需求,如高流量網站,PHP fpm 模式

或其他各種實際或非實際的應用層面,我們會改用輕量化的 Nginx,

這時我們就需要重新撰寫 rewrite 的設定檔了。

而在 Nginx 官方的文件中,也專門為了 Symfony2 撰寫了一份範例。

upstream phpfcgi {
    server 127.0.0.1:9000;
    # server unix:/var/run/php5-fpm.sock; #for PHP-FPM running on UNIX socket
}
server {
    listen 80;
 
    server_name symfony2;
    root /var/www/symfony2/web;
 
    error_log /var/log/nginx/symfony2.error.log;
    access_log /var/log/nginx/symfony2.access.log;
 
    # strip app.php/ prefix if it is present
    rewrite ^/app\.php/?(.*)$ /$1 permanent;
 
    location / {
        index app.php;
        try_files $uri @rewriteapp;
    }
 
    location @rewriteapp {
        rewrite ^(.*)$ /app.php/$1 last;
    }
 
    # pass the PHP scripts to FastCGI server from upstream phpfcgi
    location ~ ^/(app|app_dev|config)\.php(/|$) {
        fastcgi_pass phpfcgi;
        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;
        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param  HTTPS off;
    }
}
 
 
server {
    listen 443;
 
    server_name symfony2;
    root /var/www/symfony2/web;
 
    ssl on;
    ssl_certificate /etc/ssl/certs/symfony2.crt;
    ssl_certificate_key /etc/ssl/private/symfony2.key;
 
    error_log /var/log/nginx/symfony2.error.log;
    access_log /var/log/nginx/symfony2.access.log;
 
    # strip app.php/ prefix if it is present
    rewrite ^/app\.php/?(.*)$ /$1 permanent;
 
    location / {
        index app.php;
        try_files $uri @rewriteapp;
    }
 
    location @rewriteapp {
        rewrite ^(.*)$ /app.php/$1 last;
    }
 
    # pass the PHP scripts to FastCGI server from upstream phpfcgi
    location ~ ^/(app|app_dev|config)\.php(/|$) {
        fastcgi_pass phpfcgi;
        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param HTTPS on;
    }
}

原始連結 : http://wiki.nginx.org/Symfony