ในอดีตที่ผ่านมาฉันได้ทำการเขียนโค้ด HTML, CSS และ PHP แต่ฉันเคยทำงานกับสิ่งที่ "เสร็จสิ้น" ไปแล้วและฉันไม่เคยเริ่มต้นเว็บไซต์เลย อย่างไรก็ตามเมื่อเร็ว ๆ นี้ฉันซื้อโดเมนและโฮสติ้งราคาถูกและฉันหวังว่าจะพัฒนาทักษะ HTML, CSS และ Javascript ของฉันเพื่อที่ฉันจะได้กลายเป็นนักพัฒนาเว็บ / ผู้ดูแลเว็บได้มากขึ้น

โดยทั่วไปคุณใช้กระบวนการใดในการเริ่มเว็บไซต์ คุณวาดเค้าโครงบนกระดาษแล้วทำรหัสหรือไม่ หรือคุณเพิ่งเริ่มการเข้ารหัสและปรับแต่งผลลัพธ์ตามที่คุณต้องการ?

กระบวนการของฉันโดยทั่วไปมีลักษณะเช่นนี้:

1. คุณสมบัติ ด้วยดินสอและกระดาษให้จัดวางคุณลักษณะ / หน้าที่แตกต่างกันซึ่งจะประกอบไปด้วยไซต์ สิ่งนี้จะทำให้เกิดคำถามแบบคร่าว ๆ - คุณสร้างข้อมูลและไซต์กราฟิกที่เรียบง่ายสำหรับคุณแม่หรือ โซลูชันอีคอมเมิร์ซสำหรับธุรกิจขนาดเล็กหรือไม่ บล็อก / แกลเลอรี่สำหรับเพื่อนช่างภาพ? คำตอบของคุณจะเป็นตัวกำหนดจำนวนมากเกี่ยวกับเส้นทางการสร้างที่คุณจะต้องปฏิบัติตาม ขั้นตอนนี้อาจเกี่ยวข้องกับการสนทนากับลูกค้าหรือใครก็ตามที่กำลังขับเรือ (ถ้าไม่ใช่คุณ)

2. Wireframe ด้วยคุณสมบัติที่จำเป็นทั้งหมดวางโครงร่างโครงร่าง ไม่ว่าจะเป็นบนกระดาษหรือด้วยเครื่องมือเช่นดอกไม้ไฟที่จะช่วยให้คุณสร้างในฟังก์ชั่นการนำทางที่ง่ายมาก หากคุณทำงานกับ CMS เช่น wordpress เนื้อหาสแตติกของคุณจะถูกจัดการอย่างไร นี่อาจเป็นเวลาที่ดีที่จะเริ่มคิดเกี่ยวกับโครงสร้างไฟล์ หากโครงการของคุณต้องการฐานข้อมูลที่กำหนดเองตอนนี้เป็นเวลาที่จะเริ่มวางแผนการออกแบบและการนำไปปฏิบัติ นี่เป็นขั้นตอนที่สำคัญเนื่องจากการวางแผนที่ชาญฉลาดจะช่วยประหยัดการย้อนรอยและการทำงานซ้ำจำนวนมากหากมีข้อผิดพลาดเกิดขึ้นหรือการคืบของโครงการเกิดขึ้น

3. เทคโนโลยี เมื่อขั้นตอนการวางแผนค่อนข้างใช้งานแล้ว - เลือกเทคโนโลยีของคุณ คุณกำลังทำ html ตรงอยู่หรือไม่ php cms ในสภาพแวดล้อมหลอดไฟหรือไม่? .net mvc หน้าร้าน? คำถามเหล่านี้อาจมีผลต่อสภาพแวดล้อมการโฮสต์ที่ต้องการรวมถึงค่าใช้จ่ายในการดำเนินการ หากคุณกำลังทำหน้าร้านความปลอดภัยเป็นข้อกังวลหลักที่นี่ (SSL และความสอดคล้องกับ PCI เป็นต้น) ตรวจสอบให้แน่ใจว่าคุณมีสภาพแวดล้อมการทดสอบที่ยอดเยี่ยม (localhost หรืออย่างอื่น)

4. การออกแบบ / เค้าโครง เมื่อรายการคุณสมบัติและโครงร่างของคุณได้รับการพิจารณาอย่างดีคุณสามารถเริ่มคิดถึงการออกแบบเว็บไซต์ การรู้ว่าสิ่งใดที่จะเติมเต็มหน้าเว็บนั้นเป็นสิ่งที่จำเป็นล่วงหน้า ฉันชอบทำงานใน photoshop และใช้โฟลเดอร์เป็นอะนาล็อกในโครงสร้างมาร์กอัปของคุณ ฉันไปจนถึงชื่อพวกเขาด้วยตัวระบุมาร์กอัปและ css แม้ว่ามันอาจจะฉลาดที่จะทำการวาดรูปแบบอิสระก่อนที่คุณจะได้รับรายละเอียดจริงๆ ฉันมักจะใช้ประโยชน์จากไฟล์ "เลย์เอาต์" ที่ฉันจะดึงองค์ประกอบจากและวางลงในไฟล์ "กระบวนการ" - ไฟล์ที่ฉันใช้ในการผลิตกราฟิกออก

5. มาร์กอัป / CSS เมื่อการออกแบบที่สะอาดหมดจด (เพราะจะทำให้งอเล็กน้อยเมื่อคุณเข้าสู่โหมดการผลิต) คุณสามารถเริ่มเขียนมาร์กอัป โดยทั่วไปฉันต้องการมีเลย์เอาต์มาตรฐานที่จะรองรับเนื้อหาทั้งหมดในไซต์ ดังนั้นความสะอาดและความยืดหยุ่นควรเป็นจุดสำคัญที่นี่ มาร์กอัปเค้าโครงควรจะค่อนข้างสมบูรณ์ก่อนที่คุณจะเริ่มเขียน CSS แต่ฉันพบว่าพวกเขาทำอะไรมากมายเพื่อแจ้งให้ผู้อื่นทราบ คุณจะทำการเพิ่มประสิทธิภาพ SEO จำนวนมากในขั้นตอนนี้ (การตั้งชื่อรูปภาพหรือแท็ก A ข้อมูล meta หลักคำสอน ฯลฯ ... ) อย่างละเอียด

5.1 รูปแบบการบริหารจัดการ หากคุณกำลังทำงานกับ CMS และการออกแบบของคุณจะถูกนำไปใช้เป็นธีมที่กำหนดเองให้ค้นหาบทเรียนบางส่วนเกี่ยวกับวิธีการทำเช่นนั้นสำหรับแอปพลิเคชันที่คุณต้องการ สิ่งนี้อาจเป็นเรื่องที่น่ากลัวตรงไปตรงมา;) ฉันจะสร้างเลย์เอาต์มาร์กอัปแบบคงที่ด้วย CSS ที่ค่อนข้างสมบูรณ์ก่อนที่จะตัดมันออกเป็นองค์ประกอบของธีม

6. พฤติกรรม เมื่อมาร์กอัปและ css ของคุณค่อนข้างสมบูรณ์และอาจมีธีมของคุณอยู่คุณสามารถเริ่มพัฒนาพฤติกรรม (rollovers ฯลฯ ) จาวาสคริปต์ที่ไม่สร้างความรำคาญเป็นสิ่งสำคัญเว้นแต่คุณจะใช้คุณสมบัติที่จำเป็นอย่างยิ่ง (ajax-heavy แกลเลอรี่หรือเนื้อหาแฟลชที่ขับเคลื่อนด้วยข้อมูล) กฎทั่วไปคือ - หากมีคนเข้าชมเว็บไซต์ของคุณโดยปิดจาวาสคริปต์พวกเขาจะเห็นอะไร บางครั้งฉันลบองค์ประกอบแบบคงที่และแทนที่ด้วยเวอร์ชันแบบโต้ตอบตอนรันไทม์

7. เนื้อหา นอกเสียจากการออกแบบนั้นขึ้นอยู่กับเนื้อหา (บางครั้งรูปภาพเป็นเนื้อหาตัวอย่าง) = โดยทั่วไปฉันใช้ตัวยึดข้อความ / กราฟิกจนกว่าการออกแบบและพฤติกรรมจะได้รับการยอมรับอย่างดี หลีกเลี่ยงการทำงานมากกว่าหนึ่งครั้ง หากคุณกรอกข้อมูลผลิตภัณฑ์จะต้องมีการตรวจสอบและทดสอบข้อผิดพลาดอย่างระมัดระวัง

ณ จุดนั้นดูเหมือนว่าจะมีช่วงเวลาของการทำงานซ้ำและแก้ไขและขัดเงา แต่ที่สำคัญก็คือเวลาที่จะทำให้มันมีชีวิตอยู่ จากนั้นไปทานของว่าง

อืมม ฉันเดาว่าเป็นมากกว่า "วิธีการเริ่มต้น" แต่บางทีมันอาจช่วยได้ โชคดี!

เมื่อออกแบบเว็บไซต์ฉันเริ่มด้วยการถามว่าทำไม

ส่วนแรกของเวิร์กโฟลว์ของฉันถามว่าทำไม ถ้าฉันทำงานกับลูกค้าฉันต้องแน่ใจว่าพวกเขามีวิสัยทัศน์ที่ชัดเจนของสิ่งที่พวกเขาต้องการให้เว็บไซต์สำเร็จ

1. คำถามที่ทำไม

• บอกฉันสักเล็กน้อยเกี่ยวกับตัวคุณและทำไมคุณถึงทำเช่นนี้

• ใครคือลูกค้า ความต้องการ / ความเจ็บปวดของพวกเขาคืออะไร? โปรดให้ฉันด้วยตัวอย่างที่เฉพาะเจาะจงของลูกค้าประเภทต่างๆสิ่งที่พวกเขาต้องการสิ่งที่เว็บไซต์จะทำเพื่อพวกเขา

• บอกฉันเกี่ยวกับธุรกิจ คุณทำอะไรกันแน่

• อะไรทำให้คุณดีกว่าผู้ชายคนต่อไป

• หากคุณกำลังค้นหาบริการที่ธุรกิจของคุณมีให้คุณพิมพ์อะไรลงใน Google เพื่อค้นหา

หากคุณสร้างเว็บไซต์ด้วยตัวคุณเองคุณก็จะรู้ว่าคำตอบเหล่านี้คืออะไร

หากคุณพิจารณาจากคำตอบของคำถามข้างต้นว่าคนเหล่านี้จริงจังและมีความคิดที่ดีจริง ๆ จากนั้นดำเนินการต่อ (โปรดจำไว้ว่าคุณยังไม่ได้รับเงิน แต่คุณดีกว่าถ้าคุณต้องการให้พวกเขาจ้างคุณ)

2. การวิจัย

ใช้เวลาค้นคว้าลูกค้าและธุรกิจของเขา ค้นหาความสำเร็จที่ผ่านมาและปัญหาที่พบ คุณเป็นนักพัฒนาที่ 3 ที่พวกเขาจ้างหรือไม่ เกิดอะไรขึ้นกับผู้ชายอีก 2 คน?

ค้นหาสิ่งที่ลูกค้าต้องการ คุณจะสร้างเว็บไซต์นี้เพื่อใคร ลูกค้าเป็นทหารผ่านศึกที่เกษียณแล้วอายุ 60 ปีหรือเป็นสิวเสี้ยนเด็กอายุ 16 ปีที่เล่น Farmville บน Facebook ทุกวัน

ค้นหาว่าคู่แข่งเป็นใคร พวกเขาอาจไม่รู้ด้วยซ้ำ ทำการวิเคราะห์การแข่งขันของคู่แข่ง 5 ถึง 10 คนและค้นหาว่าใครคือคนที่เราต้องเตะในทีม นี่คือขั้นตอนที่คุณต้องรู้ว่าเป้าหมายคำสำคัญคืออะไร ในภายหลังและความล้มเหลวของคุณแล้ว

2b ข้อเสนอ

ระเบิดพวกเขาออกไปด้วยความรู้เกี่ยวกับธุรกิจของพวกเขาและทำข้อตกลงเว็บไซต์ / ข้อเสนอและพร้อมกับสัญญาของคุณเมื่อพวกเขาเห็นด้วย รับสัญญาที่ลงนามและเงินมัดจำ 50% แล้วไปที่ขั้นตอนที่ 3

3. ภารกิจ - มีหนึ่งอย่าง

มีชุดรูปแบบทั่วไปที่นี่: ในทุกกรณีเหล่านี้ภารกิจไม่ได้เกี่ยวกับผลิตภัณฑ์เช่นนี้ ภารกิจคือ "เพียงแค่" สิ่งที่หากคุณจริงจังกับมันต้องให้ผลิตภัณฑ์กลายเป็นสิ่งที่น่าอัศจรรย์อย่างยิ่งดังนั้นคุณจะต้องทำให้มันเกิดขึ้น หากคุณต้องการ: ภารกิจเหล่านี้เป็นคำตอบทั้งหมดทำไมเราเพิ่งเพิ่มฟีเจอร์ใหม่นั้นไม่ใช่ไม่เราเพิ่มฟีเจอร์ใหม่อะไรอีก? - เบนจามินพอลแล็ค

ระยะเวลาจะต้องมีการจัดตั้งขึ้นเพื่อให้ทุกคนมีความคาดหวังในมุมมองของพวกเขา

4. เวิร์กโฟลว์

นี่คือที่ที่คนส่วนใหญ่เริ่มต้นดังนั้นฉันจะอธิบายกระบวนการของฉัน แต่คุณจะต้องตัดสินใจว่าเวิร์กโฟลว์ใดดีที่สุดสำหรับสถานการณ์ทีมลูกค้า ฯลฯ

1. สำหรับฉันเนื้อหามาก่อน ฉันตรวจสอบให้แน่ใจว่าลูกค้ามีส่วนใหญ่ทำก่อนที่จะเขียนรหัสใด ๆ เราไม่ได้พูดถึงการแก้ไขหลักฐานขั้นสุดท้าย แต่มีคำศัพท์ที่จะปรากฏในหน้ามากขึ้นหรือน้อยลง หากทีมการตลาดมีส่วนร่วมอาจต้องใช้เวลาสักครู่

2. คุณควรมีแนวคิดว่าไซต์จะมีลักษณะอย่างไร คุณควรมีเนื้อหา ตอนนี้คุณต้องทำงานกับเค้าโครงและหลักการออกแบบทั่วไปที่จะบรรลุเป้าหมายที่คุณทำไว้ในขั้นตอนที่ 3

   ฉันเกลียดโครงลวด แต่เข้าใจว่าพวกเขาจำเป็น เพียงเพราะคุณรู้ว่าเว็บไซต์ของคุณดูเหมือนลูกค้าของคุณอาจจะไม่ นี่คือการป้องกันและลูกค้าของคุณ เมื่อทุกคนมีความสุขทำให้พวกเขาลงชื่อในสิ่งที่บอกว่า "นี่คือสิ่งที่เราจ่ายให้คุณเพื่อสร้าง"

3. การพัฒนาส่วนหน้าและ UI - HTML, CSS และการออกแบบในเบราว์เซอร์ซึ่งเป็นเทคนิค Hardboiled ของ Andy Clarke ฉันเบื่อที่จะเสียเวลามากใน Photoshop เมื่อฉันรู้ว่าสามารถแสดงให้เห็นถึงการจำลองที่รวดเร็วยิ่งขึ้นและสมจริงมากขึ้นซึ่งทำให้ฉันได้เริ่มต้นในการพัฒนา

4b Codebase

ในที่สุดคุณก็จะได้รับความสนุกสนาน เพื่อประโยชน์ของคุณและลูกค้าให้ตั้งค่าVERSION CONTROLก่อนเริ่มใช้งาน ตั้งแต่การควบคุมเวอร์ชันที่คุณทำคุณควรไปข้างหน้าและตั้งค่าBUG TRACKINGในขณะที่คุณอยู่

4c คัดลอกการแก้ไข

จำเนื้อหาที่เรามี? ตอนนี้คือเมื่อมันจะต้องมีการคัดลอกแก้ไข ฉันดูดที่นี่ดังนั้นฉันลองและจ้างคนอื่นหรือให้แน่ใจว่าคนจำนวนมากอ่าน ตรวจสอบและตรวจสอบให้แน่ใจว่าคำหลักที่เราพูดถึงในขั้นตอนที่ 2 นั้นได้รับการปรับให้เหมาะสมสำหรับ SEO หากเนื้อหาของเราดีมากและเป็นจริงเกี่ยวกับคำสำคัญเหล่านี้สิ่งนี้ควรเกิดขึ้นตามธรรมชาติ

5. การทดสอบเบต้าและ UI

ให้มนุษย์มีชีวิตที่น่าทึ่งหายใจออกมานั่งอยู่หน้าไซต์ของคุณและเริ่มใช้มัน ฉันต้องการเกณฑ์แม่ของฉันที่บางครั้งโทรและต้องการที่จะรู้ว่าทำไมเครื่องพิมพ์ของเธอจะไม่พิมพ์ (แม่ปลั๊กมันจะต้องมีการเสียบก่อน) ผู้ใช้ประเภทนี้จำเป็นต้องสามารถนำทางไซต์ของคุณได้เว้นแต่จะใช้ตัวอย่างเด็กที่เป็นสิวเสี้ยนอายุ 16 ปีด้านบน

6. แผนการบำรุงรักษาและ SEO

ตรวจสอบให้แน่ใจว่าทุกคนรู้ว่าคนที่อยู่ในความดูแลของการต่อสู้ออกสัตว์เซิร์ฟเวอร์

ในหนึ่งเดือนกลับไปดูการวิเคราะห์การแข่งขันที่เราทำและเปรียบเทียบเว็บไซต์ของเรากับเว็บไซต์ที่เราวิเคราะห์ ใช้ข้อมูลนี้เพื่อสร้างแผน SEO ของคุณและไม่ฉันไม่ได้พูดถึงน้ำมันงู SEOฉันกำลังพูดถึงการทำให้แน่ใจว่าเนื้อหาของคุณยังคงสร้างเว็บไซต์ที่เชื่อมโยงกับคุณตามธรรมชาติ (เพราะคุณยอดเยี่ยม) และแท็กชื่อของคุณ ตรงกับเนื้อความ SEO นั้นเป็นกระบวนการที่ใช้เวลานานมากยกเว้นว่าStack Overflowของคุณมีผู้ใช้งาน 14.1 ล้านคนเพื่อสร้างเนื้อหาที่มีคุณภาพให้กับคุณ

มีความแตกต่างใหญ่ระหว่างเนื้อหาที่มีคุณภาพและสิ่งที่คุณพบใน "ไซต์ที่ใส่ยัติภังค์" ซึ่งฉันจะไม่เชื่อมโยง (เพื่อป้องกันไม่ให้น้ำผลไม้ที่ไม่ได้ตามมาหยดลงบนพวกเขา)

7. เปิดตัว

ทุกอย่างทำงานอย่างไร ภารกิจของการสร้างความสุดยอดได้สำเร็จหรือไม่? มีแผนการเปิดตัวและดำเนินการ

หากคุณทำทุกอย่างถูกต้องในขั้นตอนที่ 1 - 6 การเปิดตัวของคุณจะเป็นเรื่องง่ายที่คุณอาจมีปัญหา เพียงเตรียมพร้อมสำหรับพวกเขาและแก้ไขข้อผิดพลาดใด ๆ

ส่งใบแจ้งหนี้ล้างและทำซ้ำ

ฉันชอบที่จะเริ่มต้นด้วย <!DOCTYPE html>

อย่างจริงจังแม้ว่า ... ความสำคัญอันดับแรก:

1. ค้นหาสิ่งที่ลูกค้าต้องการ วาดภาพร่างคร่าวๆสำหรับเค้าโครงพื้นฐานสร้างโครงร่างสีและอื่น ๆ
2. ทำการนำทางพื้นฐานและเค้าโครงจำลอง (คงที่) และทำงานร่วมกับลูกค้าเพื่อปรับแต่ง
3. การผลิตจริง รับ CMS และ / หรือเนื้อหาคงที่ ติดต่อกับลูกค้าอีกครั้งเพื่อให้แน่ใจว่าเป็นสิ่งที่พวกเขากำลังมองหาและพวกเขาสามารถจัดการ CMS / CMS สามารถจัดการกับความต้องการของพวกเขา
4. ปรับแต่งและทำซ้ำ 3 จนกว่าลูกค้าจะมีความสุข
5. ????
6. กำไร!

ก่อนอื่นฉันจะวาดเค้าโครงพื้นฐานและออกแบบบนกระดาษก่อนเริ่มการเข้ารหัส หลังจากเสร็จสิ้นการออกแบบขั้นพื้นฐานบนกระดาษแล้วมันเป็นเรื่องง่ายในการกำหนดรหัสในแบบแยกส่วนหลักสูตร php & css จะเป็นวิธีที่ดีที่สุดในการปรับแต่ง

ฉันมักจะเริ่มต้นด้วยการทำจำลองโดยใช้ซอฟต์แวร์ photoshop บางประเภทเพื่อให้สามารถรวมภาพใด ๆ และทั้งหมดในเว็บไซต์ของคุณ

คำตอบส่วนใหญ่มีความลึกอยู่แล้วให้ฉันเพิ่มที่คุณควรใช้กรอบหรือแม่แบบบางอย่างเพื่อให้คุณไม่ต้องเสียเวลาเขียนพื้นฐาน

มีกรอบ PHP มากมายที่มีอยู่ ( Kohanaเป็นที่ชื่นชอบส่วนตัวของฉัน) หรือหลายคนใช้ Wordpress เป็นฐาน นอกจากนี้คุณสามารถใช้เฟรมเวิร์ก CSS อีกครั้งมีอยู่มากมายหนึ่งในความนิยมมากที่สุดคือระบบกริด 960

เมื่อออกแบบเว็บไซต์คุณจะเริ่มได้อย่างไร

เช่นเดียวกับคุณฉันพบว่าต้องทำการตลาดด้วยตัวเองในฐานะนักพัฒนา / ออกแบบเว็บเมื่อไม่กี่ปีก่อน ฉันพบว่าจุดเริ่มต้นของฉันคือการทำความเข้าใจในใจของฉันเองฉันต้องการเสนอข้อมูลใดรูปภาพและข้อความใดให้แก่ผู้เยี่ยมชมเว็บไซต์ของฉัน และสิ่งที่ผมอยากให้ผู้ใช้สามารถบรรลุ / ทำในขณะที่การเยี่ยมชมเว็บไซต์ของฉัน

เมื่อฉันเข้าใจกระบวนการออกแบบที่ชัดเจนขึ้น อนุญาตให้ฉันเขียนองค์ประกอบของหน้าแรกของฉันและหน้าถัดไปที่จะสื่อสารรายการเหล่านั้น

เช่นฉันกระตือรือร้นที่จะทำให้ CV ของฉันค้นหาและดาวน์โหลดได้ง่าย ดังนั้นเมื่อออกแบบเว็บไซต์ของฉันฉันมั่นใจได้ว่าข้อมูลเกี่ยวกับประวัติย่อของฉันและที่ซึ่งสามารถพบได้ในที่ที่พร้อมใช้งาน

คุณธรรมของเรื่องราวนั้นมีความเกี่ยวข้อง ทุกสิ่งในเว็บไซต์ของคุณควรมีจุดประสงค์ไม่เช่นนั้นจะเป็นเพียงเสียงรบกวนที่ไม่จำเป็น