久色在线视频网,午夜人妻福利视频网站,免费在线99

隨著開發(fā)項目的增多，自己慢慢摸索出一條開發(fā)流程之路，在此記下。

想法 --> 實現(xiàn) --> 測試 --> 改bug --> 優(yōu)化 --> 壓縮

1.想法

想法就是在項目開發(fā)前對項目進行的深入了解和大致想出該怎么做。
我會從以下兩大點出發(fā)：

1.1 布局

看到設(shè)計圖，第一眼看的就是頁面的布局，說白了就是html盒子的布局問題。

1.1.1 從(div+css)編碼布局來說：就三種方式，即

自然布局（標準流）
** 流動布局（浮動流）**
** 定位布局（定位流）**

1.1.2 從網(wǎng)頁設(shè)計角度來說：

靜態(tài)布局

優(yōu)點：
①一般版心寬度960px,margin: 0 auto;
②保證小分辨率1024正常瀏覽，同時大分辨率居中展示

缺點：
①大分辨屏幕兩邊留白太多；
②不會隨設(shè)備分辨率改變而適應(yīng)屏幕；
③不符合人們?nèi)者M瘋狂的審美標準;

參考鏈接：
http://www.12306.cn/mormhweb/ 據(jù)說耗資兩億的網(wǎng)站，呵呵

自適應(yīng)布局

優(yōu)點：
①分別為不同的屏幕分辨率定義布局，布局切換時頁面元素發(fā)生改變

缺點：
①每個布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化
②可看作是靜態(tài)布局的一個系列

參考鏈接：
http://www.blueidea.com/tech/web/2009/6943.asp

http://www.zhangxinxu.com/wordpress/2009/11/ 自適應(yīng)css布局

流式布局個人理解，主體元素用百分比

優(yōu)點：
①主要使用百分比來設(shè)置各個部分的寬度, 用來適應(yīng)不同的分辨率

缺點：
①若屏幕尺度跨度太大，在相對其原始設(shè)計過小或過大的屏幕上不能正常顯示

響應(yīng)式布局

優(yōu)點：

①不同的屏幕分辨率定義布局，元素寬度隨著窗口調(diào)整而自動適配
② 可看作是流式布局和自適應(yīng)布局設(shè)計理念的融合
③跨平臺，在手機，pad，電腦上均有不俗的表現(xiàn)
④節(jié)省人力開發(fā)成本，不再需要有人特地維護PC頁面，移動頁面
⑤表現(xiàn)力一致，在不同的平臺上看到的東西都是基本一致的，會讓感覺體驗良好

缺點：

①自由度太低，局限性較大，需要考慮在手機，pad，PC上三種屏幕下的頁面內(nèi)元素的呈現(xiàn)；
②.頁面會大，打開速度慢。同時下載多套CSS樣式代碼，可能在手機上就下載PC/pad的冗余代碼，浪費了流量資源
③對于非webkit內(nèi)核的瀏覽器支持極差，Windows Phone手機上用的IE瀏覽器，完全就悲劇了

參考鏈接：
http://www.bubuko.com/infodetail-268180.html 媒體查詢
http://www.jq22.com/yanshi4277
http://time.com 響應(yīng)式網(wǎng)站

彈性布局

優(yōu)點：

①使用 em 或 rem 單位進行相對布局,相對 % 百分比更加靈活，
②支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示
③ 兼容性：IE9+，F(xiàn)irefox、Chrome、Safari、Opera 的主流版本都支持

缺點：

①文字排版，rem 的等比縮放特性會讓所有設(shè)備一行顯示的文字數(shù)量相同，大屏幕上不能顯示更多內(nèi)容。
②對圖片型的 Sprite 支持不好，建議使用 Font Icon 或者 SVG 型 Sprite；
③有小數(shù)點參與計算，會出現(xiàn)類似 50% + 50% > 100% 導致意外折行的情況；

參考鏈接：
http://www.cnblogs.com/breakdown/p/4231708.html
http://www.iinterest.net/2015/07/22/css3-rem-layout/?utm_source=tuicool&utm_medium=referral rem

** 瀑布流布局**

優(yōu)點：

①圖片的展現(xiàn)高效有吸引力
②懶加載模式避免用戶鼠標點擊的翻頁操作，提高頁面加載速度
③不必明確知道數(shù)據(jù)塊高度，當數(shù)據(jù)塊中有圖片時，就不需要指定圖片高度
④ 適合于文字多欄排列

缺點：

①純css實現(xiàn)不了，要用jQuery 的 Masonry 插件
②只有高級瀏覽器中才能使用
③列數(shù)固定，擴展不易，當瀏覽器窗口大小變化時，只能固定的x列，如果要添加一列，很難調(diào)整數(shù)據(jù)塊的排列
④ 滾動加載更多數(shù)據(jù)時，還要指定插入到第幾列中，不夠方便

參考鏈接：
http://masonry.desandro.com 參考網(wǎng)站
http://www.jq-school.com/Show.aspx?id=333 概念理解
http://www.tuicool.com/articles/RvY3Yv css3瀑布流實現(xiàn)
http://www.jq22.com/jquery-info362 具體方法
http://bbs.blueidea.com/thread-3058927-1-1.html 實例

所以得出了下面的結(jié)論：
1.如果只做pc端，那么定寬度是最好的選擇
2.如果做移動端，且設(shè)計對高度和元素間距要求不高，那么rem+js是最好的選擇，一份css+一份js調(diào)節(jié)font-size搞定
3.如果pc，移動要兼容，而且要求很高那么響應(yīng)式布局還是最好的選擇，前提是設(shè)計根據(jù)不同的高寬做不同的設(shè)計，響應(yīng)式根據(jù)媒體查詢做不同的布局。
4.為了更清晰的了解靜態(tài)，自適應(yīng)，流式，響應(yīng)式布局的區(qū)別，可參考 http://wow.techbrood.com/fiddle/1753 需登錄qq

1.2 交互

確定布局后，還要看都有哪些交互要做。注重用戶體驗的產(chǎn)品確實值得學習和尊重。

說簡單點就是人除了可以瀏覽這個web頁面，還可以在這個web頁面上進行一些操作，而這些操作還會跟你發(fā)生一系列互動

本人只做頁面開發(fā)，對交互設(shè)計理解不深入，找來篇文章學習
http://www.missyuan.com/thread-682067-1-1.html

站在開發(fā)角度，我會把產(chǎn)品中的交互開發(fā)分為兩個部分：

1.2.1 實現(xiàn)用戶操作功能的交互開發(fā)

比如，表單驗證，搜索功能，錯誤提示，下拉選項提示，等待加載頁面，加載進度條，導航跟隨等等。
交互設(shè)計是產(chǎn)品設(shè)計師已經(jīng)設(shè)計好的，而我要做的是實現(xiàn)和增強用戶操作的體驗，例
搜索框里加上提示搜索的信息，焦點在框內(nèi)時提示文字全部消失，以便用戶直接輸入

<input type="search" name="user_search" placeholder="Search W3School" />

1.2.2 提示用戶操作的交互行為

hover
設(shè)置圖片hover放大，文字和按鈕hover變色， title提示
active
告訴用戶他當前所在的位置，所以要有特色樣式
banner 左右兩側(cè)arrow按鈕
提示用戶焦點圖可以上下翻頁看
backTop的提示
若頁面超過兩屏高，最好在底部設(shè)置個backTop按鈕提示，方便用戶再次看頂部的信息

$(window).scroll(function(e) {
      if($(window).scrollTop() >$(window).height()){
           $('.backTop').show();
      }else{
           $('.backTop').hide();
      }
 });
 $('.backTop').click(function(e) {
          $('body,html').animate({'scrollTop':'0px'},500);
 });

不可操作時的遮罩層

<html>
<head>
<title>彈出一個窗口后，后面的層不可操作</title>
<script>
function show()  //顯示隱藏層和彈出層
{
   var hideobj=document.getElementById("hidebg");
   hidebg.style.display="block";  //顯示隱藏層
   hidebg.style.height=document.body.clientHeight+"px";  //設(shè)置隱藏層的高度為當前頁面高度
   document.getElementById("hidebox").style.display="block";  //顯示彈出層
}
function hide()  //去除隱藏層和彈出層
{
   document.getElementById("hidebg").style.display="none";
   document.getElementById("hidebox").style.display="none";
}
</script>
<style>
   body { margin:0px;padding:0px;text-align: center;}
   #hidebg { position:absolute;left:0px;top:0px;
      background-color:#000;
      width:100%;  /*寬度設(shè)置為100%，這樣才能使隱藏背景層覆蓋原頁面*/
      filter:alpha(opacity=60);  /*設(shè)置透明度為60%*/
      opacity:0.6;  /*非IE瀏覽器下設(shè)置透明度為60%*/
      display:none; /* http://www.bitsCN.com */
      z-Index:2;}
   #hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
   #content { text-align:center;cursor:pointer;z-Index:1;}
</style>
</head>
<body>
<div id="hidebg"></div>
<div id="hidebox" onClick="hide();">點擊關(guān)閉</div>
<div id="content" onClick="show();">點擊試試</div>
</body>
</html>

加載進度條和自定義加載動畫插件
介紹兩個我知道的
progress.js
http://blog.csdn.net/joyhen/article/details/24458427 官網(wǎng)和下載地址在里面
http://www.cnblogs.com/Wayou/p/gmail_like_page_loading_progress_bar.html 自定義動畫寫法
優(yōu)點：能自定義加載動畫
缺點：依賴于jquery.min.js ,不輕便
pace.js
http://github.hubspot.com/pace/docs/welcome/
優(yōu)點：輕便，官網(wǎng)有多個模板可用
缺點：不能自定義加載動畫

2.實現(xiàn)

2.1 技術(shù)難點

每個項目可能都會遇到自己沒實現(xiàn)過的需求，怎么辦？莫慌，
1.先google些資料壯壯膽
2.分析和學習下他人實現(xiàn)的代碼
3.自己寫 #### 2.1 兼容demo
4.慢慢調(diào)試修改，直到達到自己項目中的需求
把難點攻克了，其他就都ok了，寫項目心也不慌了

2.2 搬救兵，找外援

有些輪播，電梯導航，分辨率適配，自己不會寫或懶得寫的需求，可以讓框架，插件上。

** 2.2.1框架 **
我常用的有* bootstrap 框架和移動端的 fullpage *框架。
不過多介紹這兩個框架，原因是前端框架很多，個人只停留在會用上，沒有很深入研究。
新接觸的框架，不會用，可以先寫個demo，簡單學習下

** 2.2.2插件 **
這個就多了，要看實現(xiàn)哪些效果，圖表Echarts,分享插件，天氣，日期，分頁，滾動條，圖片懶加載，加載進度條等。
不多說，看需求。

2.3 兼容

不得不做的事就是兼容，沒辦法，用戶至上，一切為了用戶。。。寶寶心里苦，但寶寶不說，就偷偷地寫出來
兼容兩個方面：
2.3.1 瀏覽器兼容
相比其他chrome,safari,firefox,opera,兼容IE8多一些,要為該掛的IE8兼容html5的標簽，兼容css3眾多美好屬性，包括媒體查詢。。。

讓ie瀏覽器按最高標準解析頁面，360瀏覽器按極速模式解析

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">

ie8 引用兩個js可以解決適配問題和html5標簽的兼容問題

    <!--[if IE 8]>
            <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
            <script src="js/html5shiv.js"></script>
     <![endif]-->

ie8讓IE8支持placeholder屬性

jQuery('[placeholder]').focus(function() {
   var input = jQuery(this); 
   if (input.val() == input.attr('placeholder')) {
       input.val('');   
       input.removeClass('placeholder');
  }
 }).blur(function() {
  var input = jQuery(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  jQuery(this).find('[placeholder]').each(function() {
    var input = jQuery(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    } 
 })
});

清除ie input 的默認樣式

input::-ms-clear, input::-ms-reveal{display: none;}/* 清除ie中input的默認行為 */

清除ie 和火狐a標簽獲取焦點時的默認行為

a:focus{outline: none!important;-moz-outline: none;}/* 清除ie a標簽獲取焦點時的默認行為 */

清除瀏覽器的select默認樣式

select{
    border: 1px solid #ccc;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select::-ms-expand { display: none; }/* 清除瀏覽器的默認樣式 */

IE8支持rgba()屬性寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IE8支持rgba()屬性寫法</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            background: rgba(0, 0, 0, .5);
        }       
    </style>
    <!--[if lt IE 9]>
       <style type="text/css">
           #box{
               background: transparent;
               filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
               zoom: 1;
            }
        </style>
    <![endif]-->
</head>
<body>
    <div id="box"></div>
</body>
</html>

ie9以下兼容漸變背景色的濾鏡屬性

 .box {
  background: -webkit-linear-gradient(top, #3a8fd8, #449ce9);
  background: -moz-linear-gradient(top, #3a8fd8, #449ce9);
  background: -ms-linear-gradient(top, #3a8fd8, #449ce9);
  background: -o-linear-gradient(top, #3a8fd8, #449ce9);
  background: linear-gradient(top, #3a8fd8, #449ce9);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a8fd8', endColorstr='#449ce9',GradientType='0')";
  /* IE8 */
}
GradientType='0'表示漸變從上到下
GradientType='1'表示漸變從左到右

PIE兼容圓角border-radius，盒陰影box-shadow

/*兼容圓角*/
.pie_radius{
    width:360px;
    height:200px;
    background-color:#34538b;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    position:relative; /*定位必須加上*/
    behavior:url(pie.htc); /*pie文件要放在根目錄下，不要放在css文件里！*/
}
/*兼容盒陰影*/
.pie_box_shadow{
    width:360px;
    height:200px;
    background-color:#34538b;
    -moz-box-shadow:1px 3px 3px #666;
    -webkit-box-shadow:1px 3px 3px #666;
    box-shadow:1px 3px 3px #666;
    position:relative;/*定位必須加上*/
    behavior:url(pie.htc); /*pie文件要放在根目錄下，不要放在css文件里！*/
}

可參考 http://www.zhangxinxu.com/wordpress/2010/07/pie使ie支持css3圓角盒陰影與漸變渲染/
2.3.2 分辨率兼容
若只開發(fā)Web頁面，自適應(yīng)布局，同時用百分比定寬度差不多就夠了；
若全上，那就響應(yīng)式布局；
若移動，就rem和百分比一起用；

3. 測試

這個要看項目要求在哪些設(shè)備和分辨率下測試了，我從這幾方面看，

頁面樣式
交互效果
加載速度
分辨率
不同設(shè)備
這塊貌似沒啥可說的，也是個細心又無聊的事兒，不過是自己寫的項目，就不無聊了。用心才能發(fā)現(xiàn)更多問題，在用戶使用產(chǎn)品前就把它們干掉。

4. 改bug

每個人在每個項目中，遇到的問題是不同的，而且bug可大可小，解決順序當然是先挑最棘手的，影響最大的bug去啃。我認為改bug
** 一靠經(jīng)驗，二靠決心，三靠耐心 **
有種死磕的味道，我就是這樣，當然解決不了的bug，若是不影響用戶操作和很明顯的視覺效果，可以先放下，畢竟一個項目的工期有限。

5. 優(yōu)化

優(yōu)化貫穿整個項目的開發(fā)和維護過程，時時刻刻都要想著怎樣能讓代碼更精簡，項目運行起來更輕便，加載更快。

** 5.1 代碼優(yōu)化 **
代碼優(yōu)化很重要，方便以后對項目的維護和重用，讓自己和他人看著都很賞心悅目。

相同樣式代碼合并
每個頁面都有的部分可以提出來，建個base.css
常用的結(jié)構(gòu)或布局樣式可以提取出來，自定義樣式庫，方便以后用
常用的css3動畫效果可以提出來，自定義動畫樣式庫
多次重復(fù)的事情css做起來麻煩，js就幫個忙

** 5.2 語義化標簽**

html5標簽語義化很強，可常用 兼容ie8的方法在兼容部分提到了
logo,產(chǎn)品名稱一般放到h1標簽中的a標簽里，有助搜索引擎優(yōu)化

** 5.3 項目整體優(yōu)化 **

多個小圖標可以用sprite圖,或fontIcon
引入的js文件較大，可用線上網(wǎng)址，更快，省資源

6. 壓縮

gulp自動壓縮同步，用法 http://www.ydcss.com/archives/18
js模塊化編程 http://www.ruanyifeng.com/blog/2012/11/require_js.html
Webpack打包 http://zhuanlan.zhihu.com/p/20367175
js/css壓縮 個人常用 http://tool.css-js.com
圖片壓縮 個人常用 https://tinypng.com

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

web項目開發(fā)流程小結(jié)

web項目開發(fā)流程小結(jié)

想法 --> 實現(xiàn) --> 測試 --> 改bug --> 優(yōu)化 --> 壓縮

1.想法

1.1 布局

1.2 交互

2.實現(xiàn)

2.1 技術(shù)難點

2.2 搬救兵，找外援

2.3 兼容

3. 測試

4. 改bug

5. 優(yōu)化

6. 壓縮

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

web項目開發(fā)流程小結(jié)

想法 --> 實現(xiàn) --> 測試 --> 改bug --> 優(yōu)化 --> 壓縮

1.想法

1.1 布局

1.2 交互

2.實現(xiàn)

2.1 技術(shù)難點

2.2 搬救兵，找外援

2.3 兼容

3. 測試

4. 改bug

5. 優(yōu)化

6. 壓縮

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

2.2 搬救兵，找外援