Trước đây tôi đã từng thực hiện một số mã hóa HTML, CSS và PHP, nhưng tôi chỉ từng làm việc với những thứ đã "hoàn thành" và tôi chưa bao giờ bắt đầu một trang web từ đầu. Tuy nhiên, gần đây tôi đã mua một tên miền và một số lưu trữ với giá rẻ và tôi hy vọng sẽ cải thiện các kỹ năng HTML, CSS và Javascript của mình để tôi có thể trở thành một nhà tiếp thị hơn một chút với tư cách là nhà phát triển web / quản trị trang web.

Thông thường, quá trình bạn sử dụng để bắt đầu một trang web là gì? Bạn có vẽ bố cục trên giấy và sau đó làm mã? Hay bạn chỉ bắt đầu mã hóa và điều chỉnh đầu ra theo ý thích của mình?

Quá trình của tôi thường trông hơi giống thế này:

1. Tính năng . Với bút chì và giấy, hãy trình bày các tính năng / trang riêng biệt sẽ bao gồm trang web. Điều này nhận được ở các câu hỏi đột quỵ rộng - bạn đang xây dựng một trang web thông tin và đồ họa đơn giản cho mẹ của bạn? một giải pháp thương mại điện tử cho một doanh nghiệp nhỏ? một blog / bộ sưu tập cho một người bạn nhiếp ảnh gia? Câu trả lời của bạn sẽ xác định rất nhiều về con đường xây dựng mà bạn sẽ cần phải làm theo. Giai đoạn này cũng có thể bao gồm thảo luận đáng kể với khách hàng hoặc bất kỳ ai đang lái thuyền (nếu đó không phải là bạn).

2. Khung dây . Với tất cả các tính năng cần thiết được đặt ra, làm việc với một khung dây. Hoặc trên giấy hoặc với một công cụ như pháo hoa sẽ cho phép bạn xây dựng trong chức năng điều hướng rất đơn giản. Nếu bạn đang làm việc với một CMS như wordpress, nội dung tĩnh của bạn sẽ được xử lý như thế nào? Đây cũng có thể là thời điểm tốt để bắt đầu suy nghĩ về cấu trúc tệp. Nếu dự án của bạn sẽ cần một cơ sở dữ liệu tùy chỉnh, bây giờ cũng là lúc để bắt đầu lập kế hoạch thiết kế và thực hiện. Đây là một giai đoạn quan trọng, vì kế hoạch thông minh sẽ tiết kiệm rất nhiều việc quay lại và làm lại, nếu các lỗi được thực hiện, hoặc dự án creep xảy ra.

3. Công nghệ . Khi giai đoạn lập kế hoạch tương đối hiệu quả - hãy chọn công nghệ của bạn. Bạn đang làm html thẳng? một cm cm trong môi trường đèn? .net mvc cửa hàng? Những câu hỏi này có thể ảnh hưởng đến môi trường lưu trữ sẽ được yêu cầu, cũng như chi phí để điều hành. Nếu bạn đang làm một cửa hàng, bảo mật là mối quan tâm chính ở đây (ví dụ như tuân thủ SSL và PCI). Hãy chắc chắn rằng bạn có một môi trường thử nghiệm tuyệt vời (localhost, hoặc nếu không) được thiết lập.

4. Thiết kế / Bố trí . Khi danh sách tính năng và khung dây của bạn được xác định khá tốt, bạn có thể bắt đầu suy nghĩ về thiết kế của trang web. Biết những gì sẽ lấp đầy các trang, rõ ràng, là một điều kiện tiên quyết. Tôi thích làm việc trong photoshop và sử dụng rất nhiều thư mục như một cấu trúc tương tự với cấu trúc đánh dấu của bạn. Tôi đi xa đến mức đặt tên cho chúng với các định danh đánh dấu và css dự định. Mặc dù nó có thể là khôn ngoan để làm một số hình thức vẽ miễn phí trước khi bạn thực sự chi tiết. Tôi có xu hướng sử dụng các tệp "bố trí" mà tôi sẽ lấy các phần tử từ đó và đặt vào các tệp "xử lý" - các tệp mà tôi sử dụng để xuất đồ họa sản xuất.

5. Đánh dấu / CSS . Khi một thiết kế khá sạch sẽ được thực hiện (với điều kiện là nó chắc chắn sẽ uốn cong một chút, khi bạn chuyển sang chế độ sản xuất), bạn có thể bắt đầu viết đánh dấu. Tôi thường muốn có một bố cục tiêu chuẩn sẽ chứa tất cả nội dung trong trang web. Vì vậy - sạch sẽ và linh hoạt nên là điểm chính ở đây. Đánh dấu bố cục phải khá đầy đủ trước khi bạn bắt đầu viết CSS, nhưng tôi thấy họ làm rất nhiều việc để thông báo cho nhau. Bạn cũng sẽ thực hiện nhiều tối ưu hóa SEO trong giai đoạn này (đặt tên đúng cho hình ảnh hoặc thẻ A, thông tin meta, tài liệu, v.v.) Hãy cẩn thận.

5.1 Quản lý chủ đề . Nếu bạn đang làm việc với một CMS và thiết kế của bạn sẽ được sử dụng như một chủ đề tùy chỉnh, hãy tìm một số hướng dẫn về cách chính xác để làm điều đó cho ứng dụng dự định của bạn. Điều này có thể gây nản lòng, thẳng thắn;) Tôi sẽ luôn xây dựng bố cục đánh dấu tĩnh với CSS khá hoàn chỉnh trước khi cắt nó thành các yếu tố chủ đề.

6. Hành vi . Khi đánh dấu và css của bạn trông khá hoàn chỉnh và có thể chủ đề của bạn đã sẵn sàng, bạn có thể bắt đầu phát triển các hành vi (Rollover, v.v.) javascript không phô trương là rất quan trọng, trừ khi bạn đang sử dụng các tính năng hoàn toàn yêu cầu nó (nặng thư viện, hoặc nội dung flash hướng dữ liệu). Nguyên tắc chung là - nếu ai đó truy cập trang web của bạn khi tắt javascript, họ sẽ thấy gì? Đôi khi tôi loại bỏ các phần tử tĩnh và thay thế bằng các phiên bản tương tác khi chạy.

7. Nội dung . Trừ khi thiết kế phụ thuộc vào nội dung (ví dụ hình ảnh là nội dung) = Tôi thường sử dụng văn bản / đồ họa giữ chỗ cho đến khi thiết kế và hành vi được thiết lập khá tốt. Tránh làm việc nhiều hơn một lần. Nếu bạn đang điền dữ liệu sản phẩm, sẽ cần phải kiểm tra và kiểm tra lỗi cẩn thận.

Tại thời điểm đó, dường như luôn có một khoảng thời gian làm lại và sửa chữa và đánh bóng. Nhưng, về cơ bản, thời gian của nó để làm cho nó sống. Sau đó đi ăn nhẹ.

Hừm. Tôi đoán đó không chỉ là "làm thế nào để bắt đầu". Nhưng có lẽ nó giúp, dù sao đi nữa. Chúc may mắn!

Khi thiết kế một trang web tôi bắt đầu bằng cách hỏi tại sao?

Phần đầu tiên trong quy trình làm việc của tôi là hỏi TẠI SAO? Nếu tôi đang làm việc với khách hàng, tôi cần đảm bảo rằng họ có tầm nhìn rõ ràng về những gì họ muốn trang web thực hiện.

1. Câu hỏi tại sao.

• Nói cho tôi biết một chút về bản thân và lý do tại sao bạn làm điều này.

• Khách hàng là ai? Nhu cầu / nỗi đau cụ thể của họ là gì? Vui lòng có thể cung cấp cho tôi - với một vài ví dụ cụ thể về các loại khách hàng khác nhau, những gì họ cần, những gì trang web sẽ làm cho họ.

• Nói cho tôi biết về kinh doanh. Chính xác thì bạn đang làm gì?

• Điều gì làm cho bạn tốt hơn so với các chàng trai tiếp theo?

• Nếu bạn đang tìm kiếm dịch vụ mà doanh nghiệp của bạn cung cấp, bạn sẽ nhập gì vào Google để tìm dịch vụ này?

Nếu bạn xây dựng trang web cho chính mình thì tốt hơn bạn nên biết những câu trả lời này là gì.

Nếu bạn xác định dựa trên các câu trả lời cho các câu hỏi trên rằng những người này nghiêm túc và thực sự có một ý tưởng tốt. Sau đó tiến hành (Hãy nhớ rằng bạn chưa được trả tiền nhưng tốt hơn hết bạn nên rút tất của họ ra nếu bạn muốn họ thuê bạn.)

2. Nghiên cứu.

Dành thời gian nghiên cứu khách hàng và doanh nghiệp của mình. Tìm hiểu những thành công trong quá khứ của họ và bất kỳ vấn đề nào họ gặp phải. Bạn có phải là nhà phát triển thứ 3 họ đã thuê? Chuyện gì đã xảy ra với 2 anh chàng kia?

Tìm hiểu những gì khách hàng cần. Bạn sẽ xây dựng trang web này cho ai. Là khách hàng của một cựu chiến binh đã nghỉ hưu 60 tuổi hay một đứa trẻ mặt mụn 16 tuổi, chơi Farmville trên Facebook cả ngày.

Tìm ra ai là đối thủ cạnh tranh. Họ thậm chí có thể không biết. Thực hiện phân tích cạnh tranh từ 5 đến 10 đối thủ cạnh tranh và tìm ra ai là người chúng ta cần đá trong Serps. Đây là giai đoạn bạn cần biết mục tiêu từ khóa là gì. Bất kỳ sau này và bạn đã thất bại.

2b Đề xuất

Thổi bay họ với kiến ​​thức về kinh doanh của họ và đưa ra một thỏa thuận / đề xuất trang web và sẵn sàng với hợp đồng của bạn một khi họ đồng ý. Nhận hợp đồng đã ký và đặt cọc 50% sau đó tiến hành bước 3.

3. Nhiệm vụ - Có một

Có một chủ đề phổ biến ở đây: trong tất cả các trường hợp này, nhiệm vụ không phải là về sản phẩm như vậy. Nhiệm vụ này chỉ là một thứ gì đó mà nếu bạn thực sự nghiêm túc yêu cầu sản phẩm trở nên hoàn toàn tuyệt vời, vì vậy bạn sẽ thực hiện điều đó. Nếu bạn thích: những nhiệm vụ này là tất cả câu trả lời, tại sao chúng ta chỉ thêm tính năng mới đó?, Không, chúng ta sẽ thêm tính năng mới nào? - Thăm dò ý kiến.

Dòng thời gian cần phải được thiết lập để mọi người sẽ có những kỳ vọng của họ trong quan điểm.

4. Quy trình làm việc

Đây là nơi hầu hết mọi người bắt đầu vì vậy tôi sẽ giải thích quy trình của tôi nhưng bạn sẽ phải quyết định quy trình làm việc nào là tốt nhất cho tình huống, nhóm, khách hàng của bạn, v.v.

1. Đối với tôi Nội dung đến trước. Tôi đảm bảo rằng máy khách có phần lớn được thực hiện trước khi bất kỳ mã nào được viết. Chúng tôi sẽ không nói về việc chỉnh sửa bản thảo bằng chứng cuối cùng nhưng ít nhiều các từ của văn bản sẽ có trên các trang. Nếu một nhóm tiếp thị có liên quan, điều này có thể mất một thời gian.

2. Bạn đã có một ý tưởng về các trang web sẽ trông như thế nào. Bạn nên có nội dung. Bây giờ bạn cần làm việc trên các nguyên tắc bố trí và thiết kế chung sẽ hoàn thành mục tiêu bạn đã đưa ra trong bước 3.

   Tôi ghét khung lưới nhưng hiểu rằng chúng là cần thiết. Chỉ vì bạn biết những gì trang web trông giống như khách hàng của bạn có thể không. Điều này là để bảo vệ bạn và khách hàng. Khi mọi người vui vẻ, hãy bắt họ đăng nhập vào một cái gì đó có nội dung "Đây là những gì chúng tôi đang trả tiền cho bạn để xây dựng".

3. Phát triển giao diện người dùng và giao diện người dùng - HTML, CSS và THIẾT KẾ TRONG BROWSER , kỹ thuật Hardboiled của Andy Clarke. Tôi mệt mỏi vì đã lãng phí quá nhiều thời gian vào Photoshop khi tôi biết có thể chứng minh một mockup nhanh hơn thực tế hơn cũng giúp tôi bắt đầu phát triển.

4b. Codebase

Cuối cùng bạn cũng có được một vài niềm vui. Đối với lợi ích của bạn và khách hàng, hãy thiết lập KIỂM SOÁT PHIÊN BẢN trước khi bạn bắt đầu. Vì kiểm soát phiên bản thực hiện của bạn, bạn nên tiếp tục và thiết lập BUG TRACKING trong khi bạn ở đó.

4c. Bản sao đã chỉnh sửa

Hãy nhớ rằng nội dung chúng ta có? Bây giờ là khi nó phải được sao chép chỉnh sửa. Tôi rất thích điều này vì vậy tôi cố gắng thuê người khác hoặc đảm bảo nhiều người đọc nó. Kiểm tra và đảm bảo những từ khóa mà chúng ta đã nói ở bước 2 được tối ưu hóa cho SEO. Nếu nội dung của chúng tôi là tuyệt vời và thực sự là về những từ khóa đó, điều này sẽ đến một cách tự nhiên.

5. Thử nghiệm Beta và UI

Hãy để một số con người thực sự sống thở ngồi xuống trước trang web của bạn và bắt đầu sử dụng nó. Tôi thích tranh thủ mẹ tôi thỉnh thoảng gọi và muốn biết lý do tại sao máy in của bà không in (Đầu cắm của mẹ, Nó phải được cắm trước). Những loại người dùng này cần có khả năng điều hướng trang web của bạn trừ khi tất nhiên là đang sử dụng ví dụ về đứa trẻ bị mụn mặt 16 tuổi ở trên.

6. Kế hoạch bảo trì và SEO

Hãy chắc chắn rằng mọi người đều biết ai chịu trách nhiệm chiến đấu với quái thú máy chủ .

Trong một tháng, hãy quay lại phân tích cạnh tranh mà chúng tôi đã làm và so sánh trang web của chúng tôi với các phân tích mà chúng tôi đã phân tích. Sử dụng dữ liệu này để tạo kế hoạch SEO của bạn và KHÔNG Tôi không nói về SEO dầu rắn, tôi đang nói về việc đảm bảo rằng bạn vẫn tạo nội dung liên quan, các trang web sẽ tự nhiên liên kết với bạn (vì bạn rất tuyệt vời) và thẻ tiêu đề của bạn phù hợp với văn bản cơ thể. SEO là một quá trình lâu dài trừ khi Stack Overflow của bạn và có một đội quân 14,1 triệu người dùng để tạo ra nội dung chất lượng cho bạn.

Có một sự khác biệt lớn giữa nội dung chất lượng và nội dung bạn tìm thấy trên "trang web có gạch nối" mà tôi sẽ không liên kết. (Để ngăn nước trái cây không theo dõi thậm chí nhỏ giọt trên chúng).

7. Ra mắt

Làm tất cả mọi việc? Nhiệm vụ xây dựng sự tuyệt vời đã đạt được? Có một kế hoạch khởi động và thực hiện nó.

Nếu bạn đã làm mọi thứ ngay trong các bước 1 - 6, việc ra mắt của bạn sẽ dễ dàng mà bạn có thể gặp vấn đề. Chỉ cần sẵn sàng cho họ và sửa chữa bất kỳ sai lầm.

Gửi hóa đơn, rửa sạch và lặp lại.

Tôi thích bắt đầu với <!DOCTYPE html>

Nghiêm túc mặc dù ... ưu tiên đầu tiên:

1. Tìm hiểu những gì khách hàng muốn. Vẽ một bản phác thảo thô cho bố cục cơ bản, đi lên với bảng màu, v.v.
2. Thực hiện một điều hướng cơ bản và bố trí giả lập (tĩnh) và làm việc với khách hàng để tinh chỉnh nó.
3. Sản xuất thực tế. Nhận CMS và / hoặc nội dung tĩnh tại chỗ. Trao đổi với khách hàng một lần nữa để đảm bảo đó là những gì họ đang tìm kiếm và họ có thể xử lý CMS / CMS có thể đáp ứng nhu cầu của họ.
4. Tinh chỉnh và lặp lại 3 cho đến khi khách hàng hài lòng.
5. ????
6. Lợi nhuận!

Trước hết tôi sẽ vẽ bố cục cơ bản và thiết kế nó trên giấy trước khi bắt đầu viết mã. Sau khi hoàn thành thiết kế cơ bản trên giấy, thật dễ dàng để mã hóa nó theo cách mô đun. Chương trình php & css sẽ là cách tốt nhất để tùy chỉnh nó.

Tôi luôn muốn bắt đầu bằng cách tạo một mockup bằng một số loại phần mềm photoshop để nó có thể kết hợp bất kỳ và tất cả hình ảnh trong trang web của bạn.

Hầu hết các câu trả lời đã đi sâu, hãy để tôi nói thêm rằng bạn nên sử dụng một số khung hoặc mẫu để bạn không lãng phí thời gian viết lại những điều cơ bản.

Có rất nhiều khung công tác PHP có sẵn ( Kohana là sở thích cá nhân của tôi) hoặc nhiều người sử dụng Wordpress làm cơ sở. Ngoài ra, bạn có thể sử dụng khung CSS, một lần nữa có rất nhiều, một trong những phổ biến nhất là hệ thống lưới 960

Khi thiết kế một trang web, bạn thường bắt đầu như thế nào?

Giống như bạn, tôi thấy cần phải tiếp thị bản thân như một nhà phát triển / thiết kế web vài năm trước. Tôi tìm thấy nơi bắt đầu của tôi là để hiểu trong tâm trí của riêng tôi, tôi muốn cung cấp thông tin, hình ảnh và thông điệp nào cho khách truy cập vào trang web của tôi? và những gì tôi muốn người dùng thực hiện / làm trong khi truy cập trang web của tôi .

Khi tôi đã hiểu rằng quá trình thiết kế trở nên rõ ràng hơn rất nhiều. Nó cho phép tôi viết ra các yếu tố trong trang chủ của mình và các trang tiếp theo sẽ truyền đạt các mục đó.

Ví dụ, tôi rất muốn làm cho CV của tôi dễ dàng tìm thấy và có thể tải xuống. Vì vậy, khi thiết kế trang web của tôi, tôi đảm bảo rằng thông tin về CV của mình và nơi có thể tìm thấy ở nơi có sẵn.

Đạo đức của câu chuyện là có liên quan. Tất cả mọi thứ trên trang web của bạn nên phục vụ một mục đích, nếu không nó chỉ là tiếng ồn không cần thiết.