整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
信息加速發(fā)展的互聯(lián)網(wǎng)時(shí)代，越來(lái)越多的科技公司為了專注核心競(jìng)爭(zhēng)力業(yè)務(wù)以及降低軟件項(xiàng)目成本，開(kāi)始將項(xiàng)目中的部分業(yè)務(wù)模塊分發(fā)給第三方外包公司來(lái)完成。而這樣是否就意味著大幅度地降低成本了？
事實(shí)告訴我們，并沒(méi)有。
本文作者作為一名外包商，以自身的經(jīng)歷告訴我們本可以在3天之內(nèi)完成了的一個(gè)報(bào)價(jià)僅為 1500 美元的靜態(tài) HTML 頁(yè)面，是如何被大型企業(yè)硬是拖成了一個(gè)為期 7 周且需要耗費(fèi) 18000 美元項(xiàng)目的。
作者 | Ibrahim Diallo
譯者 | 王艷妮，責(zé)編 | 屠敏
出品 | CSDN（ID：CSDNnews）
不久前，我作為承包商工作，經(jīng)常從一個(gè)項(xiàng)目跳到另一個(gè)項(xiàng)目。有些是短期的，工作一周左右，可很快提交我的工作成果。也有的項(xiàng)目會(huì)持續(xù)幾個(gè)月，這期間我會(huì)攢一些錢用以休息一段時(shí)間。我更喜歡短期工作，因?yàn)檫@樣的工作使我可以在單位時(shí)間內(nèi)收取更高的費(fèi)用。這樣不僅我感覺(jué)是在為自己打工，而且我覺(jué)得我不需要太努力工作就能過(guò)上還算體面的生活了。我的最高費(fèi)率仍然在合理的范圍之內(nèi)，而且我總是提供高質(zhì)量的服務(wù)。這就是我和一家大公司定下這個(gè)項(xiàng)目之前我的工作狀態(tài)。
這家公司聯(lián)系我的時(shí)候顯得很著急，經(jīng)理告訴我他們現(xiàn)在就需要一個(gè)人來(lái)搞定這件事。需要一個(gè)不怎么需要公司培訓(xùn)就能馬上上手，而且能交付最大性能的人。不管怎么說(shuō)，這剛好是我的座右銘。這個(gè)項(xiàng)目正是我喜歡的工作類型。它內(nèi)容簡(jiǎn)短，很快就能做好，而且報(bào)酬很高。
在談判確定好合適的費(fèi)率后，我收到了一封包含說(shuō)明的電子郵件。他們給了我更多關(guān)于這個(gè)項(xiàng)目的背景。他們的開(kāi)發(fā)人員在沒(méi)有事先告知的情況下就離開(kāi)了，并且從未跟任何其他人匯報(bào)過(guò)項(xiàng)目的進(jìn)展。
我們需要您毫不分心地完成此項(xiàng)目。在合同期限內(nèi)，您將只與我們合作，并及時(shí)交付成果。我們會(huì)對(duì)給您造成的麻煩進(jìn)行補(bǔ)償。
任務(wù)說(shuō)明很簡(jiǎn)單：閱讀這些需求然后估計(jì)完成這個(gè)項(xiàng)目需要多長(zhǎng)時(shí)間。這是我職業(yè)生涯中遇到的一個(gè)那類比較容易的項(xiàng)目之一。這是一個(gè)HTML頁(yè)面，包含一些簡(jiǎn)單的動(dòng)畫(huà)和幾個(gè)嵌入的視頻。我花了一個(gè)晚上研究需求并在腦中模擬實(shí)施。這些年來(lái)，我已經(jīng)學(xué)會(huì)了在能確定收到報(bào)酬之前不為客戶寫(xiě)任何代碼。
我確定了這個(gè)項(xiàng)目充其量也就是一天的活兒。但為了保持謹(jǐn)慎，我上報(bào)了20個(gè)小時(shí)，總計(jì)1500美元。畢竟這只是一個(gè)HTML頁(yè)面而已，我也只能收取這么多費(fèi)用。他們讓我到25英里外的衛(wèi)星辦公室去。在為他們工作的那三天里我必須天天開(kāi)車去那兒。
第二天，我到了衛(wèi)星辦公室。在一個(gè)購(gòu)物中心，然后通過(guò)一扇秘密的門進(jìn)入了一個(gè)秘密的世界，一些工作人員在他們的小隔間里安靜地工作著。接待員給我看了一個(gè)我將用它來(lái)工作的全新MacBook Pro，我必須從零開(kāi)始設(shè)置環(huán)境。我的確更偏向于使用公司的筆記本電腦，因?yàn)樗麄兘?jīng)常要求承包商安裝一些可疑的軟件。（我可不想裝到自己電腦上。）
我花了一天時(shí)間下載我的工具包，設(shè)置電子郵件、ssh密鑰和請(qǐng)求服務(wù)的授權(quán)。換句話說(shuō)，我什么都沒(méi)做。這就是為什么我上報(bào)了20個(gè)小時(shí)，還沒(méi)開(kāi)始寫(xiě)代碼呢，光前期設(shè)置就耗費(fèi)了8個(gè)小時(shí)。
第二天，我準(zhǔn)備開(kāi)始真正地干活了。有了MacBook Pro，我用它發(fā)了一封電子郵件給經(jīng)理。我告訴他我已經(jīng)準(zhǔn)備好工作了，正在等待上述的資源。那天，我在我柔和燈光下的工位上待著，玩著手指，直到太陽(yáng)落山。
我再次計(jì)算了一下。根據(jù)我的估計(jì)，我還只剩4個(gè)小時(shí)的時(shí)間來(lái)完成這項(xiàng)工作，這對(duì)單個(gè)HTML頁(yè)面來(lái)說(shuō)也不是不可能。但不用說(shuō)，第二天，我把這剩下的4個(gè)小時(shí)花在了吃公司贊助的午餐上，伙食很不錯(cuò)，而且我與其他員工玩得很開(kāi)心。
當(dāng)預(yù)計(jì)的20小時(shí)到期時(shí)，我確保向經(jīng)理發(fā)送了另一封電子郵件，讓他知道我確實(shí)人一直在公司，但我沒(méi)有收到我需要的資源。當(dāng)然，那封電子郵件被無(wú)視了。
接下來(lái)的星期一，我猶豫地開(kāi)過(guò)了這25英里。令我驚訝的是，經(jīng)理已經(jīng)來(lái)到衛(wèi)星辦公室，并熱情地問(wèn)候了我。他是個(gè)三十來(lái)歲，很隨和很不錯(cuò)的人。我很不解，他并不像當(dāng)初要雇我的那時(shí)候那么著急了。我們進(jìn)行了友好的交談，沒(méi)有提到任何工作。后來(lái)，我們?nèi)コ晕绮停读隋X。這是美好的一天。完全沒(méi)工作。
好吧你可以說(shuō)我很容易形成習(xí)慣，但如果你供我吃喝并每天呵護(hù)我，我會(huì)習(xí)慣這一切。這變成了一個(gè)例程。我來(lái)上班，花一些時(shí)間在網(wǎng)上閱讀以及看視頻。我每天發(fā)一封電子郵件，所以他們知道我確實(shí)去了公司。然后，我會(huì)去吃午飯并和碰見(jiàn)的有趣的人一起玩耍。在一天結(jié)束時(shí)，我站起來(lái)，伸個(gè)懶腰，打一個(gè)當(dāng)之無(wú)愧的哈欠，然后開(kāi)車回家。
我習(xí)慣了。事實(shí)上，我在期待這些。當(dāng)我終于收到一封帶有指向我需要的資源的鏈接的電子郵件時(shí)，我反而有點(diǎn)失望。我重新開(kāi)始腳踏實(shí)地，變回自己工作時(shí)的嚴(yán)肅臉。但是，在花了幾分鐘查看zip文件后，我才注意到它缺少了我需要的大部分內(nèi)容。設(shè)計(jì)師給我發(fā)了一些Adobe Illustrator文件，我無(wú)法在MacBook上打開(kāi)它。
我回復(fù)了電子郵件來(lái)解釋我的疑慮，而且一并問(wèn)了一些其他問(wèn)題以節(jié)省時(shí)間。那時(shí)，我當(dāng)初上報(bào)的20個(gè)小時(shí)時(shí)間早都已經(jīng)過(guò)了。我現(xiàn)在真的想要完成這項(xiàng)工作了。點(diǎn)擊發(fā)送后不久，我收到了一封電子郵件。只有一句：“轉(zhuǎn)發(fā)給Alex”，然后Alex得到了這封電子郵件的抄送。Alex回答說(shuō)他轉(zhuǎn)發(fā)給了Steve。Steve回答說(shuō)Michelle是設(shè)計(jì)師，她會(huì)了解得更多一些。 Michelle的自動(dòng)回復(fù)稱她正在度假，所有詢問(wèn)都應(yīng)該直接告訴她的經(jīng)理。她的經(jīng)理回復(fù)說(shuō)“誰(shuí)是Ibrahim？(我的名字)”我的經(jīng)理回復(fù)說(shuō)他很抱歉還沒(méi)有向大家介紹我。
作為承包商，在人們注意到我在那里工作之前，我通常就已經(jīng)完成我的工作并離開(kāi)那家公司了。但這次，我收到了大量歡迎的電子郵件。這樣的郵件持續(xù)了一段時(shí)間，而我被迫回復(fù)那些友好地過(guò)了頭的郵件。有些人很想跟我本人見(jiàn)面。當(dāng)我說(shuō)我在加利福尼亞州，離得遠(yuǎn)著呢，他們有點(diǎn)失望。以及羨慕，他們說(shuō)他們羨慕加州美好的天氣。
他們很有禮貌地?zé)o視我的電子郵件。他們用抄送來(lái)轉(zhuǎn)移我的問(wèn)題。他們把我問(wèn)過(guò)的任何事情歸為垃圾郵件。我花了很多時(shí)間，像一位考古學(xué)家在深深的電子郵件之溝內(nèi)挖掘，希望找到我問(wèn)題的答案。你可以想象每當(dāng)我想起我唯一的任務(wù)是構(gòu)建一個(gè)靜態(tài)HTML頁(yè)面時(shí)，我感覺(jué)到的冒名頂替綜合癥（心虛，懷疑自己的回報(bào)不是理所應(yīng)得的）的程度之深。原本虛報(bào)了的20個(gè)小時(shí)的項(xiàng)目變成了為期7周的冒險(xiǎn)，期間我享受免費(fèi)午餐，每天開(kāi)車50英里，并翻看電子郵件。
當(dāng)我最終完成項(xiàng)目時(shí)，我在GitHub上將它發(fā)送給了團(tuán)隊(duì)。所有偉大的冒險(xiǎn)都必須有個(gè)盡頭。但不久之后，我收到了邀請(qǐng)，整個(gè)團(tuán)隊(duì)會(huì)用Google Hangout開(kāi)視頻會(huì)議對(duì)我的代碼進(jìn)行code review。我花了一個(gè)多月的時(shí)間來(lái)寫(xiě)一個(gè)靜態(tài)HTML頁(yè)面，而現(xiàn)在整個(gè)團(tuán)隊(duì)都要評(píng)價(jià)我的工作？那個(gè)什么，我要為自己說(shuō)句話，這個(gè)頁(yè)面也包含一些JavaScript交互，是響應(yīng)式的，還包括CSS動(dòng)畫(huà)......好吧我真的覺(jué)得自己像個(gè)來(lái)冒名頂替的。
當(dāng)然，視頻會(huì)議的時(shí)間又重新安排了幾次。當(dāng)它終于發(fā)生時(shí)，我和我的工作已經(jīng)不是會(huì)議的主題了。他們都坐在紐約某個(gè)地方的同一個(gè)房間里，像一個(gè)緊密團(tuán)結(jié)的團(tuán)體一樣聊了一會(huì)兒。事實(shí)上，他們所說(shuō)的關(guān)于我做的項(xiàng)目的所有內(nèi)容只有：
那天晚上回家的時(shí)候，我意識(shí)到自己正面臨另一個(gè)挑戰(zhàn)。我在這家公司工作了7個(gè)星期，而我的原始報(bào)價(jià)為1,500美元。這相當(dāng)于每年11,100美元或每周214美元。或者直接說(shuō)，每小時(shí)5.35美元。
這幾乎還不夠我付油錢的。所以，我給他們發(fā)了一張發(fā)票，我按照原來(lái)的每小時(shí)費(fèi)率給他們報(bào)了7個(gè)星期。總額達(dá)18,000美元。我當(dāng)然感到羞恥，但我還能怎么辦呢？
就像我預(yù)期的那樣，我沒(méi)有收到回復(fù)。如果所有大公司都有什么相同之處，那就是他們并不急于按時(shí)支付賬單。這么簡(jiǎn)單的工作要價(jià)這么多，我覺(jué)得自己像一個(gè)騙子，但話又說(shuō)回來(lái)了，我又不是來(lái)做慈善的。我每天開(kāi)車50英里來(lái)做這項(xiàng)工作，如果工作沒(méi)有完成，那不是因?yàn)槲也幌搿＿@是因?yàn)樗麄兓貜?fù)太緩慢了。
接下來(lái)的一周我得到了回復(fù)。這是一封來(lái)自經(jīng)理的冷郵件，他把我每天的工作日分成不同的時(shí)間段。然后他把我工作的那部分時(shí)間高亮了，每天標(biāo)記一個(gè)小時(shí)的午休時(shí)間。最后他用我們商定的小時(shí)費(fèi)率做了一些計(jì)算。
顯然，我算錯(cuò)了。我錯(cuò)誤估算了總數(shù)。調(diào)整后，他們欠我的總金額是21,000美元。
請(qǐng)確認(rèn)重新調(diào)整后的小時(shí)數(shù)，以便財(cái)務(wù)可以給您寫(xiě)個(gè)支票。
我很快回復(fù)了確認(rèn)。
原文：https://idiallo.com/blog/18000-dollars-static-web-page
作者簡(jiǎn)介：Ibrahim Diallo，具有多年開(kāi)發(fā)經(jīng)驗(yàn)的軟件工程師。
本文為 CSDN 翻譯，轉(zhuǎn)載請(qǐng)注明來(lái)源出處。
學(xué)目標(biāo)：
1. 理解前端開(kāi)發(fā)的基本概念和原理。
- 前端開(kāi)發(fā)的定義和作用
- 前端開(kāi)發(fā)的基本工具和環(huán)境
- 前端開(kāi)發(fā)的職責(zé)和要求
2. 掌握HTML5標(biāo)記語(yǔ)言的基本語(yǔ)法、元素和屬性。
- HTML5的發(fā)展歷程和版本
- HTML5文檔結(jié)構(gòu)和基本語(yǔ)法規(guī)范
- HTML5常用的文本標(biāo)記、圖像標(biāo)記、表格標(biāo)記等
- HTML5的表單元素和相關(guān)屬性
3. 掌握CSS3的基本語(yǔ)法、選擇器和常用樣式屬性。
- CSS3的發(fā)展歷程和版本
- CSS3的基本語(yǔ)法和選擇器
- CSS3的盒模型、布局和浮動(dòng)
- CSS3的文本樣式、背景樣式和過(guò)渡動(dòng)畫(huà)
it學(xué)習(xí)
4. 理解JavaScript的基本語(yǔ)法、數(shù)據(jù)類型、條件語(yǔ)句和循環(huán)結(jié)構(gòu)。
- JavaScript的基本語(yǔ)法和變量定義
- JavaScript的數(shù)據(jù)類型和類型轉(zhuǎn)換
- JavaScript的條件語(yǔ)句和邏輯運(yùn)算
- JavaScript的循環(huán)結(jié)構(gòu)和數(shù)組操作
5. 掌握DOM操作，能夠使用JavaScript操作HTML文檔中的元素。
- DOM的概念和基本原理
- 使用JavaScript獲取和操作HTML元素
- 使用JavaScript創(chuàng)建、修改和刪除HTML元素
- DOM事件的處理和綁定
6. 理解響應(yīng)式設(shè)計(jì)的概念和基本原理。
- 響應(yīng)式設(shè)計(jì)的定義和作用
- 使用媒體查詢實(shí)現(xiàn)頁(yè)面布局的適應(yīng)性
- 使用流式布局和彈性盒子布局實(shí)現(xiàn)頁(yè)面適配
- 使用響應(yīng)式圖片等技術(shù)提升頁(yè)面響應(yīng)性
軟件開(kāi)發(fā)
大綱精細(xì)化教學(xué)設(shè)計(jì)：
第一部分：前端開(kāi)發(fā)基礎(chǔ)
1. 前端開(kāi)發(fā)概述
1.1 什么是前端開(kāi)發(fā)
1.2 前端開(kāi)發(fā)的歷史和發(fā)展趨勢(shì)
1.3 前端開(kāi)發(fā)的基本工具和環(huán)境
2. HTML5基礎(chǔ)
2.1 HTML5的簡(jiǎn)介和發(fā)展歷程
2.2 HTML5的文檔結(jié)構(gòu)和基本語(yǔ)法規(guī)范
2.3 HTML5常用的文本標(biāo)記、圖像標(biāo)記、鏈接標(biāo)記等
2.4 HTML5的表單元素和相關(guān)屬性
3. CSS3基礎(chǔ)
3.1 CSS3的簡(jiǎn)介和發(fā)展歷程
3.2 CSS3的基本語(yǔ)法和選擇器
3.3 CSS3的盒模型、布局和浮動(dòng)
3.4 CSS3的文本樣式、背景樣式和過(guò)渡動(dòng)畫(huà)
4. JavaScript基礎(chǔ)
4.1 JavaScript的簡(jiǎn)介和發(fā)展歷程
4.2 JavaScript的基本語(yǔ)法和變量定義
4.3 JavaScript的數(shù)據(jù)類型和類型轉(zhuǎn)換
4.4 JavaScript的條件語(yǔ)句和邏輯運(yùn)算
4.5 JavaScript的循環(huán)結(jié)構(gòu)和數(shù)組操作
小程序開(kāi)發(fā)
第二部分：網(wǎng)頁(yè)交互與動(dòng)態(tài)效果
1. DOM操作
1.1 DOM的概念和基本原理
1.2 使用JavaScript獲取和操作HTML元素
1.3 使用JavaScript創(chuàng)建、修改和刪除HTML元素
1.4 DOM事件的處理和綁定
2. 事件處理與表單驗(yàn)證
2.1 常見(jiàn)的DOM事件類型和觸發(fā)條件
2.2 使用JavaScript處理交互事件
2.3 表單驗(yàn)證的基本原理和實(shí)現(xiàn)方法
3. Ajax與數(shù)據(jù)交互
3.1 Ajax的簡(jiǎn)介和發(fā)展歷程
3.2 使用JavaScript發(fā)送異步請(qǐng)求
3.3 處理服務(wù)器返回的數(shù)據(jù)
第三部分：響應(yīng)式設(shè)計(jì)與跨平臺(tái)開(kāi)發(fā)
1. 響應(yīng)式設(shè)計(jì)概述
1.1 響應(yīng)式設(shè)計(jì)的定義和作用
1.2 媒體查詢的基本語(yǔ)法和常用屬性
1.3 使用響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)網(wǎng)頁(yè)適配
2. 移動(dòng)端開(kāi)發(fā)概述
2.1 移動(dòng)端開(kāi)發(fā)的特點(diǎn)和挑戰(zhàn)
2.2 使用CSS3實(shí)現(xiàn)移動(dòng)端樣式效果
2.3 使用JavaScript處理移動(dòng)端交互
3. 跨平臺(tái)開(kāi)發(fā)基礎(chǔ)
3.1 常見(jiàn)的跨平臺(tái)開(kāi)發(fā)技術(shù)和框架
3.2 使用跨平臺(tái)開(kāi)發(fā)工具搭建應(yīng)用
3.3 測(cè)試和發(fā)布跨平臺(tái)應(yīng)用
通過(guò)以上的教學(xué)目標(biāo)和大綱精細(xì)化教學(xué)設(shè)計(jì)，學(xué)習(xí)者將能夠全面掌握前端開(kāi)發(fā)所需的HTML5、CSS3和JavaScript的基礎(chǔ)知識(shí)，并能夠應(yīng)用所學(xué)知識(shí)實(shí)現(xiàn)網(wǎng)頁(yè)交互和動(dòng)態(tài)效果，以及具備響應(yīng)式設(shè)計(jì)和跨平臺(tái)開(kāi)發(fā)的能力。
視覺(jué)格式化模型，大體上將頁(yè)面中盒子的排列分為三種方式：
1. 常規(guī)流
2. 浮動(dòng)
3. 定位
1. 文字環(huán)繞
字體環(huán)繞
2. 橫向排列
修改float屬性值為：
- left：左浮動(dòng)，元素靠上靠左
- right：右浮動(dòng)，元素靠上靠右
默認(rèn)值為none
1. 當(dāng)一個(gè)元素浮動(dòng)后，元素必定為塊盒(更改display屬性為block)
2. 浮動(dòng)元素的包含塊，和常規(guī)流一樣，為父元素的內(nèi)容盒
1. 寬度為auto時(shí)，適應(yīng)內(nèi)容寬度
2. 高度為auto時(shí)，與常規(guī)流一致，適應(yīng)內(nèi)容的高度
3. margin為auto，為0.
4. 邊框、內(nèi)邊距、百分比設(shè)置與常規(guī)流一樣
1. 左浮動(dòng)的盒子靠上靠左排列
2. 右浮動(dòng)的盒子考上靠右排列
3. 浮動(dòng)盒子在包含塊中排列時(shí)，會(huì)避開(kāi)常規(guī)流塊盒
4. 常規(guī)流塊盒在排列時(shí)，無(wú)視浮動(dòng)盒子
5. 行盒在排列時(shí)，會(huì)避開(kāi)浮動(dòng)盒子
6. 外邊距合并不會(huì)發(fā)生
> 如果文字沒(méi)有在行盒中，瀏覽器會(huì)自動(dòng)生成一個(gè)行盒包裹文字，該行盒叫做匿名行盒。
高度坍塌的根源：常規(guī)流盒子的自動(dòng)高度，在計(jì)算時(shí)，不會(huì)考慮浮動(dòng)盒子
清除浮動(dòng)，涉及css屬性：clear
- 默認(rèn)值：none
- left：清除左浮動(dòng)，該元素必須出現(xiàn)在前面所有左浮動(dòng)盒子的下方
- right：清除右浮動(dòng)，該元素必須出現(xiàn)在前面所有右浮動(dòng)盒子的下方
- both：清除左右浮動(dòng)，該元素必須出現(xiàn)在前面所有浮動(dòng)盒子的下方
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
