Web開發經常會是非常複雜的事情。今天,針對初學者,我希望向你介紹26個概念和技術,每個都對應英文字母的一個字母。聽起來很奇怪吧,那就讓我們開始吧。
A——Ajax
AJAX是異步javaScript和xml的意思,它是近年來你所使用的所有流暢的Web應用背後的主要驅動力。 AJAX作為一項技術來說,使用已經很普遍了。 Gmail,Flickr等,你甚至可以在WordPRess的管理員面板裡找到它。那麼它到底是什麼、它如何實現的呢?
說到底它的核心是xmlhttpRequest,這允許在頁面完全渲染之後發送請求並接收返回,而無需關聯頁面其它部分。這意味著web程式不需要為每一個操作而刷新整個頁面。這提供了非常流暢,動感的類似桌面應用程式的使用者體驗。
相關閱讀
How to Make AJAX Requests With Raw Javascript
24 Best Practices for AJAX Implementations
Submit A Form Without Page Refresh using jQuery
B——Browser(瀏覽器)
瀏覽器是能理解你的網站或應用傑作的結構的東西。它不僅可以用來上網,現代的瀏覽器還是一個多任務的平台。例如我安裝的,有IRC,FTP和同步資訊到每個設備的功能。你可能已經知道,瀏覽器及時寶貴的開發工具,又會帶來很多麻煩。每個必須保證他們的作品在每個瀏覽器下都看起來很完美的開發者應該很能理解這個痛苦。
相關閱讀
13 Ways to Browser Test and Validate Your Work
Top 5 Ways to Browser-Test your Website
9 Most Common IE Bugs and How to Fix Them
C——CSS
CSS是前端開發的一把利劍。 CSS是層疊樣式表單的縮寫,它是一門可以定義網頁如何顯示的語言。在Web開發最恐怖的年代,開發者常把樣式程式碼寫到HTML原始碼中去。 CSS則非常好地將樣式從內容中分離出來。
相關閱讀
The 30 CSS Selectors you Must Memorize
30 CSS Best Practices for Beginners
Understanding CSS Specificity
CSS: Noob to Ninja – The Complete Video Series
D——DOM
DOM是文件物件模型的縮寫,這是與HTML或XML文件互動的公認的約定。 DOM API提供了用程式遍歷和操作文件的功能。 「DOM為分析後的HTML文件建立了一個相符的層級結構。子元素叫做節點或DOM節點」。如果你聽到人家談論DOM,其實他們是在說DOM腳本。這以前是描述透過JavaScript存取和操作DOM的術語。這是大多數你現在看到的現代網站和應用程式背後的技術。
相關閱讀
JavaScript and the DOM Series: Lesson 1
Javascript and the DOM: Lesson 2
The Dom is a Mess – Lecture by John Resig
E——Events(事件)
現代Web應用是深層事件驅動的。那什麼是事件呢?你在網頁上做的大多數事情都組成一個事件。滑鼠放在連結上,點擊按鈕,按下Tab鍵等都是有效的事件。事件處理指的是當某個事件發生時執行一段指定的程式碼。這也是你必須掌握的現代web開發背後的基本概念。
相關閱讀
JavaScript from Null: Chapter 5 – Events
JavaScript Events from the Ground Up
JavaScript from Null: Cross-Browser Event Binding
JavaScript Event Delegation in 4 Minutes
F——Firebug
工欲善其事,必先利其器。 Web開發者也是一樣。一個很強大的工具就是Firebug。 Firebug是一個可以貫穿你的工作的Firefox擴充。它讓你在運行中編輯和監控一個頁面的各個方面。這裡不能詳細說它的特性,所以點擊下面的連結吧。
相關閱讀
10 Reasons Why You Should Be Using Firebug
How to Theme any CMS Using Firebug
Firebug: White to Black Belt
G——Grid(網格)
網格是頁面結構化的可視化框架。它從一度發達的印刷工業移植過來,網格是當前Web開發中必不可少的一部分。有許多CSS框架可以用來創建基於網格的佈局,對於非常大數量的頁面和佈局需要高強度的練習。
相關閱讀
A Detailed Look at the 960 CSS Framework
A Closer Look At the Blueprint CSS Framework
Crash Course: YUI Grids CSS
Mastering the 960 Grid System
H——HTML
如果你現在在閱讀這篇文章,你可能對它的概念有一些模糊的認識了。如果你被這個連結欺騙了,請繼續閱讀。順便歡迎大家來rockux,我們提供很多關於web開發的文章。 HTML是超文本標記語言的縮寫,是網頁語言事實上的標準。 HTML由幾個元件或元素組成:標籤,標籤屬性和標籤中包含的內容。 HTML標準的最新版本,HTML5,為我們帶來了許多新特性,並解決了一些相容性問題。
相關閱讀
“HTML5 and You” Course
30 HTML Best Practices for Beginners
28 HTML5 Features, Tips, and Techniques you Must Know
The 10 HTML Tags Beginners Aren't Using
I —— IE
呃,Internet Explore。這個名字喚起敬畏和憤怒。曾經它是一個英雄,帶來了四個令人興奮的新功能,推動了整個工業的向前發展,它也結束了瀏覽器停滯不前的歷史。直到今天,它依然引領著前端開發者。經過十年的戰爭,IE的最後版本是9,它重新走向了正確的創新方向。不管你對IE的態度如何,它始終是Web開發過程逃脫的。
相關閱讀
The Things Internet Explorer Got Right
9 Most Common IE Bugs and How to Fix Them
Did Internet Explorer get the Box Model Right?
J —— JavaScript
JavaScript是基本web開發三件套中的最後一個成員。 JavaScript,不是Java,是Web的腳本語言。有幾十億的網頁在使用它,更重要的是網站支撐了這個說法。你透過JavaScript定義行為,管理事件,處理DOM並與伺服器互動。歸功於不可思議的類別庫的使用,如jQuery,對JavaScript的理解和知識逐年增長。我覺得可以很適合地說JavaScript是每個現代web開發者絕對必備的。
相關閱讀
24 JavaScript Best Practices for Beginners
JavaScript from Null: Video Series
33 Developers you MUST Subscribe to as a JavaScript Junkie
K —— Keyword Optimization(關鍵字優化)
SEO只與Web開發有關係,但是即使是這樣,web開發者掌握一些什麼是SEO以及它能做什麼之類的基本知識是非常重要的。關鍵字優化指的是為你的網站選擇正確的關鍵字並且優化它們以使你的訪客可以找到你的網站。而當你涉足所有SEO的原則時,記住:內容是王道。如果你擁有非常棒的SEO但是內容很差勁,用戶可能會找到你但是很快就會離開。如果你有好的內容,用戶會找到你並留下來。
相關閱讀
The Only SEO Tools You'll Ever Need
L —— Less
Less是一門帶有刺玫瑰式的樣式語言。它們的網站描述到LESS擴展了CSS的動態行為,例如變量,混合類型,操作符和函數,我也傾向於贊成這種做法。 LESS是CSS合成類固醇。是的它對我來說聽起來更好一些,但是你知道它是什麼意思。它將動態語言的特性帶到CSS中,因此使得樣式表更加強大和容易管理。
相關閱讀
How to Squeeze the Most out of LESS
You Need to Check out LESS.js
Never Type a Vendor Prefix Again
M —— MVC
模型視圖控制模式,更為人所知的是MVC模式,是web開發中用得最多的模式之一。這是一個架構模式,它將web應用的每一部分分割到邏輯的大塊以方便維護—— 模型處理數據,視圖處理展現而控制器負責這兩部分之間的數據流。
如果你使用現代web開發框架,你就使用了MVC。 Ruby on Rails,Code Igniter和Zend Framework都使用這種模式。
相關閱讀
MVC for Noobs
Create your First Tiny MVC Boilerplate with php
asp.net from Scratch: MVC
N —— node.JS
node.JS引領Web開發走進了一個新的時代。它使在非常快速的VM(V8)引擎上運行JavaScript成為可能。這個思考模式的轉移的結果可能不會馬上就顯現出來,但是過一段時間就會明顯展現出它的優勢了。
驚人的速度以及管理成千上萬的並發IO事件是全世界JavaScript開發者主要的談論點。
相關閱讀
Learning Server-Side JavaScript with Node.js
Node.JS Official Site
O —— Object
物件導向程式設計因為它的靈活性已經被程式設計社群廣泛接受。使用OOP你可以寫很少行的程式碼,使得它更乾淨因此也更容易維護。但究竟什麼是對象呢?很難用一兩句話解釋清楚,看下面的連結吧。
相關閱讀
Object-Oriented PHP for Beginners
The Basics of Object-Oriented JavaScript
Wikipedia link
P —— PHP
PHP無疑是最受歡迎的伺服器端語言—— 它支撐著上百萬,可能是數十億的網頁和應用程式。
雖然面對一系列的更新的,爭論說更好的選擇來寫web應用程序,PHP不僅生存下來了,而且來興旺繁榮起來。 WordPress,Joomla,Drupal,MediaWiki都使用PHP作為後端語言。一個主要的原因是部署容易且你相對容易找到支援PHP的主機。
相關閱讀
30+ PHP Best Practices for Beginners
Why You're a Bad PHP Programmer
9 Useful PHP Functions and Features You Need to Know
Q —— Query(查詢)
在我們文章中查詢可以代表很多東西。查詢語言用於向外部系統取得資料的介面。 SQL就是一個很好的例子,它從關係型資料庫中取得資訊。
另一方面,查詢字串是作為URL一部分傳遞給web應用的一塊。這個數據可能是用戶要存取驗證ID或交易的頁面中的任何東西。查詢字串被格式化為鍵值對。
相關閱讀
CodeIgniter from Scratch: Search Results without Query Strings
“Popular Posts By Comment Count” SQL Query in WordPress
R —— Regular Expressions(正規表示式)
正規表示式提供一種靈活的方式來以指定的模式來匹配文字中的字串。它以一種特定的語言書寫,並有解釋器解析。所有現代語言都支援正規表示式。
相關閱讀
Regular Expressions for Dummies: Screencast Series
You Don't Know Anything About Regular Expressions: A Complete Guide
Advanced Regular Expression Tips and Techniques
S —— Source Control(源碼控制)
原始碼控制是一個團隊開發過程中流行的做法,無論他們專注於哪一個方面—— 任何領域的程式設計師都使用原始碼控制。但是它到底是什麼呢?簡單地說,原始碼控制讓團隊開發人員在一個文件集合上工作,追蹤並標識每個成員的變更。每個版本的程式碼都可以合來比較,合併甚至是還原。
相關閱讀
Terminal, Git, and GitHub for the Rest of Us: Screencast
A Visual Introduction to Git
Easy Version Control with Git
Getting the Hang of GitHub
T —— TDD(測試驅動開發)
這又是一個所有開發者中普遍的元素。 TDD是測試驅動開發的簡寫,指的是程式碼和自動這個程式碼的測試案例同時進行的過程。這移除了許多乏味的軟體測試並且鼓勵開發者更多的測試。
相關閱讀
The Newbie's Guide to Test-Driven Development
Test-Driven JavaScript Development in Practice
How to Test your JavaScript Code with QUnit
U —— Unit Testing(單元測驗)
單元測試是一系列的TFF,小型的程式碼單元被測試以確保他們是可發布的。然而單元測試經常與OPP中的方法有關,通常它意味著程式的中可以獨立的測試最小單元。
相關閱讀
How to Test your JavaScript Code with QUnit
V —— VIM
VIM是一個非常極端的文字編輯器。 Vim是免費,開源的,有無數的功能包可以選擇。另一方面,它的學習曲線幾乎是難以忍受的陡峭,如果沒有好的資源,你可能會很長一段時間就會迷失。點擊下面的連結查看為什麼它值得你去投靠。
W —— WordPress
WordPress以最小的部落格系統為起點,但現在它已經驚人地擴張了。它的可擴展性使得它被用作從CMS到電子商務系統等各種用途。它還擁有許多狂熱愛好者和追隨者,包括開發和設計人員,他們想把它做成你將來網站可以依賴的可靠平台。
相關閱讀
How to Create a WordPress Theme from Scratch
Essential Plugins for Every WordPress Installation
Scaling WordPress for High-Traffic
Top 50 WordPress Tutorials
8個出色的WordPress SEO插件
X —— XSS
XSS表示跨站腳本(Cross-site scripting)。這是當你創建網站時可能需到的眾多安全問題之一。 XSS指的是載入帶有惡意腳本的易受攻擊的網站或程序,以提升權限或獲取敏感資訊的行為,通常是二者都有。
相關閱讀
Can You Hack Your Own Site? A Look at Some Essential Security Considerations
CodeIgniter from Scratch: Security
5 Helpful Tips for Creating Secure PHP applications
Y —— YUI
Yahoo使用者介面庫是一個JavaScript庫,它簡化了建立互動式網站就用的過程。與大多數現代的類別庫一樣,它提供了DOM操作和立即可以使用的AJAX。雖然沒有jQuery出名,YUI依然擁有非常龐大的用戶基礎,而且它一直在活躍的開發中。
相關閱讀
An Introduction to YUI
2010 Through the Lens of YUI Theater
Z —— Z index
Z-Index是一個CSS屬性,它定義了一個元素在頁面上如何堆疊—— 它定義了一個元素離視口頂端有多近。數值大表示它將出現在數值小的元素的上面。然而這個屬性可能相對專業,當你創建widgets或更複雜的網頁設計時它立刻就會起作用。