แนะนำให้รู้จักกับการพัฒนาเว็บ

กลับในวันที่ฉัน (ตกลง, ก่อนวันของฉัน), อาชีพของนักพัฒนาเว็บเป็นต่ำหนึ่ง. มันติดอันดับด้านล่างลูกสุนัขเกลียด แต่เหนือพัดลมแยงกี้ในระดับมืออาชีพของการให้เกียรติ. เพราะแท็กทั้งหมดและภาพ spacer เราใช้ความโปร่งใส, เราถูกมองว่าเป็นแฮกเกอร์น้ำมันดิบด้วยความรู้สึกของความสวยงามไม่.

ดี, เราอาจจะยังไม่ขาดในแง่ความงาม, แต่เป็นเว็บที่มีการพัฒนาเพื่อให้มีอาชีพของนักพัฒนาเว็บ. วันนี้มีเครื่องมือมากมายที่เราสามารถใช้เพื่อให้ดีเขียนเป็น, มาตรฐาน-conforming, และสวยงาม (ตกลง, อาจจะไม่ไฟล์ล่าสุด) หน้าเว็บ. ที่สุดของเว็บไซต์ที่ดีที่คุณใช้ในวันนี้ (เสียบด้านหน้า: รวมถึงนี้อย่างใดอย่างหนึ่ง) สร้างขึ้นโดยใช้เครื่องมือเหล่านี้.

ฝูงของเราของเครื่องมือในส่วนของเบราว์เซอร์ได้รับอนุญาตให้เราสามารถสร้างสิ่งที่อยู่ในเว็บที่เป็นไปไม่ได้เพียงแค่ 10 ปีที่ผ่านมา, เช่นเครือข่ายทางสังคมที่นับไม่ถ้วนที่อ้างว่าเป็นวิธีที่ดีที่สุดที่จะเสียเวลาของคุณ, “ร้อน” ที่เพิ่งเริ่มต้นเทคโนโลยีที่อ้างว่าจะมีการปฏิวัติสิ่งที่ได้ทำไปแล้วเป็นพัน ๆ ครั้ง, และโคลนนกโกรธที่อ้างตัวว่าเป็นเพียงเลวร้ายยิ่งกว่าเดิมเล็กน้อย. ทั้งหมดในเว็บ. ดังนั้นบางทีเครื่องมือเหล่านี้ยังไม่ได้ไปที่ยิ่งใหญ่ที่สุดของการใช้งาน.

ดังนั้นสิ่งที่เป็นเครื่องมือที่น่าตื่นตาตื่นใจเหล่านี้ฉันได้รับการพูดคุยเกี่ยวกับ? นำวิธีการที่ได้รับการ (ที่น่าตื่นตาตื่นใจตรงไปตรงมา) ภาษาที่เรียกว่า HTML5, CSS3, และ JavaScript, ซึ่งผมชื่อเล่น 3 ทหารม้าของ webocalypse. ที่นี่ดูที่แต่ละคนเป็น:

HTML

HTML (ที่รู้จักกันอย่างถูกต้องตาม HyperText Markup Language; คุณสามารถดูว่าทำไมคนที่ไม่ต้องการที่จะดูไม่ดีเพียงแค่ใช้ตัวย่อ) เป็น ภาษาที่ใช้ในการวางออกหน้าเว็บ. คลิกขวาที่หน้านี้และคลิก “มาดู”. นั่นเป็น HTML ที่หน้านี้ใช้.

เป็นหลัก, HTML ที่เป็นพวงของ ป้าย, ซึ่งเบราว์เซอร์ ตีความและออกวาง. เช่น, ดูโค้ด HTML นี้:

<พี>ฉันไม่ทราบเกี่ยวกับคุณ, แต่ผมชอบการกดปุ่ม</พี>

<นอน>

<ปุ่ม>คลิกที่ผม!</ปุ่ม>

โค้ด HTML นี้มีการตัดข้อความในวรรค (the <พี> แท็กเริ่มต้นย่อหน้า, the </พี> แท็กสิ้นสุดวรรค) มีเส้นแบ่งเป็น (the <นอน>) แล้วปุ่มคุณสามารถคลิกไปที่เนื้อหาของหัวใจของคุณ. เบราว์เซอร์ของคุณจะวางมันออกมาบนหน้าจอของคุณ.

ดังนั้นนั่นคือทั้งหมดที่ดีและดี. แต่ถ้าคุณมีอะไร แต่ HTML, you get a webpage that looks like it came straight out of the 1990’s. ไม่ดีมากออกมาจากทศวรรษที่มาต่อไป (ทรงผม, เพลง, เป็นต้น) แต่รอ! มีมากขึ้น!

CSS

ย่ออีก. ฤดูร้อน. CSS ย่อมาจาก สไตล์ Cascading แผ่น, ซึ่งเป็นบิตของการเรียกชื่อผิดตั้งแต่พวกเขาไม่ได้จริงๆน้ำตก (สิ่งที่หมายถึง… เป็นรหัสคอมพิวเตอร์, ไม่น้ำตก!) CSS เป็น ภาษาที่ใช้ไปยังหน้าเว็บรูปแบบ. นี้, เกินไป, ถูกแปลโดยเบราว์เซอร์ของคุณ.

CSS และ HTML ทำงานร่วมกัน – HTML ทำให้รูปแบบของหน้าเว็บ, CSS ให้มันไหวพริบของ. ลองจินตนาการถึงการสร้างบ้าน: HTML ให้กรอบไม้สีน้ำตาลอมเหลือง แต่จำเป็น, CSS เพิ่มสีนีออนและเฟอร์นิเจอร์ที่เล่นโวหาร.

CSS เป็นภาษาที่ตรงไปตรงสวย: แท็ก HTML บาง (เช่นวรรค), คุณสามารถระบุค่าสำหรับการเรียนรูปแบบต่างๆ. เบราว์เซอร์ของคุณจะอ่าน CSS และนำไปใช้กับแท็กที่ตรงกัน. เช่น:

พี {

สี: สีแดง;

font-size: 16px;

}

เพื่อให้ทุกย่อหน้า (สิ่งที่อยู่ใน HTML <พี> ป้าย) จะมี สีแดง ตัวอักษรและ 16 พิกเซลในขนาด. หากคุณสังเกตเห็น, เหล่านี้คือบางส่วนของรูปแบบเดียวกันกับที่คุณสามารถใช้ใน Microsoft Word และโปรแกรมอื่น ๆ.

ดังนั้นตอนนี้หน้าเว็บของคุณออกมาวางไว้และพวกเขาดูสวย. แต่นี่คือสิ่งที่: นั่นคือทั้งหมดที่พวกเขาทำ. พวกเขาเพียงแค่นั่งอยู่ตรงนั้นและดูสวย. ซึ่งเป็นที่ดีและทุก, แต่ผู้ใช้เว็บต้องการมากขึ้น. พวกเขาต้องการให้ภาพเคลื่อนไหวแฟนซี. พวกเขาต้องการที่ป๊อปอัพ (ตกลง, บางทีพวกเขาก็กลับมาอยู่ใน 2002, แต่ผมพูดนอกเรื่อง) พวกเขาต้องการให้ปุ่มที่จะทำสิ่งที่เมื่อคุณคลิกที่พวกเขา.

ประมาณหนึ่งแล้วว่า – ที่เป็นปัญหา. คุณสามารถทำให้ <ปุ่ม> ใน HTML, และคุณสามารถคลิกที่มันทุกสัปดาห์, แต่ก็ไม่ได้ทำอะไรเวลาเร็ว ๆ. ถ้าคุณต้องการปุ่มเพื่อ, โอ้ผมไม่ทราบว่า, ย้ายช้างของคุณผ่านหน้าจอและการโจมตีบางสิ่งบางอย่าง, แล้วคุณต้องการบางสิ่งบางอย่างมากขึ้น.

JavaScript

JavaScript เป็น ไม่ ตัวย่อ, ถ้าคุณสงสัย. พวกเขาเรียกมัน JavaScript เพราะมันดูเหมือนการเขียนโปรแกรมภาษาจาวาที่เรียกว่า, ซึ่งเป็นสาเหตุแปลกมันไม่ได้. อย่างไรก็ตาม, JavaScript เป็น ภาษาโปรแกรมที่เหมาะสมที่ทำให้ทุกผลแบบไดนามิก ที่คุณเห็นในเว็บ.

เช่นเดียวกับการเขียนโปรแกรมภาษาใด ๆ, JavaScript เป็น ชุดของคำสั่งที่ทำให้ตัวแปรและใช้ฟังก์ชั่น. ส่วนเย็นเกี่ยวกับ JavaScript (ดี, เป็นเย็นเป็นภาษาเขียนโปรแกรมสามารถ) คือการที่คุณสามารถเข้าถึงองค์ประกอบเหล่านั้น (เช่นย่อหน้าและปุ่ม) และรูปแบบ CSS (เช่นสีตัวอักษรและขนาด) และเปลี่ยนพวกเขา. ดูรหัสนี้:

วรรคอาจ = $('p');

paragraph.css('สี','สีฟ้า');

รหัสจาวาสคริปต์นี้จะได้พบกับย่อหน้าทั้งหมดที่อยู่ในหน้า – the $ สัญญาณที่บอกว่าเบราว์เซอร์เพื่อหาองค์ประกอบที่ตรงกันทั้งหมด, และ 'p’ หมายความว่าจะต้องมีการเลือกย่อหน้า (จำ <พี> องค์ประกอบจาก HTML?) จากนั้นคุณสามารถเก็บย่อหน้าให้กับตัวแปร, และคำสั่งเบราว์เซอร์จะเปลี่ยนรูปแบบ CSS สีของพวกเขาที่จะ สีน้ำเงิน.

สิ่งที่ฉันพบที่น่าสนใจ (อีกครั้ง, นี่คือทั้งหมดจากมุมมองของ “webdev”) เป็นวิธีการอย่างหรูหราสามภาษาทำงานร่วมกัน. ที่บรรทัดสุดท้ายของการมีความสัมพันธ์กับ JavaScript HTML ของหน้าเว็บและ CSS ที่ใช้ในสไตล์มัน. มันไม่เหมือนภาษาเหล่านี้เป็นเพียงองค์ประกอบที่แตกต่างกันของสิ่งเดียวกัน – พวกเขากำลังหนึ่งเดียวกัน, ด้านที่แตกต่างกันของเครื่องที่น่าตื่นตาตื่นใจเหมือนกัน.

เสียงที่น่าสนใจ? ฉันคิดว่ามันไม่. นั่นเป็นเพียงส่วนหนึ่งของความงามของเว็บ.