10 sai lầm phổ biến khi phát triển Web

Có vẻ là sự lựa chọn vô tận về làm thế nào để thực hiện các nhiệm vụ tương tự - để phát triển một trang web mà các công trình trong web hiện đại ngày nay. Các nhà phát triển Web phải chọn một web hosting nền tảng và lưu trữ dữ liệu cơ bản, công cụ để viết HTML, CSS, và JavaScript trong, cách thiết kế sẽ được thực hiện, và những gì các thư viện JavaScript libraries/frameworks. Khi lựa chọn này được thu hẹp xuống, thế giới trực tuyến là đầy với các bài viết, diễn đàn và các mẫu cung cấp mẹo để làm cho một trải nghiệm web tốt hơn. Tuy nhiên, không có vấn đề mà con đường được thực hiện, tất cả các nhà phát triển dễ bị sai lầm. Mặc dù một số sai lầm sẽ liên quan đến một cách tiếp cận cụ thể, có những thách thức chung cho tất cả các nhà phát triển web. Vì vậy, qua nghiên cứu, kinh nghiệm và quan sát gần đây, tôi nghĩ rằng tôi sẽ chia sẻ một danh sách tôi được biên dịch của mười sai lầm phổ biến Tôi thấy các nhà phát triển web làm - và làm thế nào để tránh chúng.

Danh sách sau đây là không theo thứ tự cụ thể.

1) Viết Old School HTML
Sai lầm: Những ngày đầu của Internet đã có ít nhiều tùy chọn cho việc đánh dấu hơn chúng ta ngày nay. Tuy nhiên, thói quen cũ chết cứng, và nhiều người vẫn viết HTML của họ, nếu như chúng ta còn là trong thế kỷ 20. Ví dụ ở đây đang sử dụng yếu tố để bố trí, hoặc yếu tố khi các thẻ ngữ nghĩa cụ thể khác sẽ thích hợp hơn, hoặc sử dụng các thẻ không được hỗ trợ trong tiêu chuẩn HTML hiện như hoặc , hoặc khoảng cách giữa các mặt hàng trên một trang với một số lượng lớn các & nbsp; các thực thể.

Tác động: Viết HTML thập kỷ qua có thể dẫn đến đánh dấu quá phức tạp mà sẽ hành xử không nhất quán trên nhiều trình duyệt. Và nó không cần thiết trong nhiều trình duyệt hiện đại gần đây như Microsoft Edge và thậm chí qua các phiên bản của Internet Explorer (11, 10, 9).

Làm thế nào để tránh: Ngừng sử dụng yếu tố để bố trí các nội dung, và hạn chế sử dụng cho nó để hiển thị dữ liệu dạng bảng. Làm quen với các tùy chọn đánh dấu hiện tại có sẵn như nhìn thấy ở whatwg.org. Sử dụng HTML để mô tả những gì mà nội dung là, không làm thế nào nó sẽ được hiển thị. Để hiển thị nội dung của bạn một cách chính xác, sử dụng CSS (http://www.w3.org/Style/CSS/).

2) "Nó hoạt động trong trình duyệt của tôi ..."
Sai lầm: Một nhà phát triển có thể ngây thơ của một trình duyệt cụ thể hoặc thực sự khinh dể một, và chủ yếu có thể kiểm tra các trang web với sự thiên vị trong-view. Nó cũng có thể là mẫu mã được tìm thấy trực tuyến có thể được viết mà không bao thanh toán như thế nào nó sẽ làm cho các trình duyệt khác. Ngoài ra, một số trình duyệt có giá trị mặc định khác nhau cho phong cách.

Tác động: Viết một trang web trình duyệt trung tâm có khả năng sẽ dẫn đến chất lượng rất kém khi hiển thị trong trình duyệt khác.

Làm thế nào để tránh: Nó sẽ không được thực hiện để kiểm tra các trang web ở mọi trình duyệt và phiên bản trong quá trình phát triển. Tuy nhiên, có một khoảng thời thường xuyên kiểm tra như thế nào trang web của bạn sẽ xuất hiện trong nhiều trình duyệt là một cách tiếp cận tốt. Ngày nay các công cụ miễn phí để giúp có sẵn bất kể nền tảng ưa thích của bạn: miễn phí máy ảo, máy quét trang web. Các trang web như http://browsershots.org/ hoặc https://www.browserstack.com/show ảnh chụp nhanh như thế nào một trang nhất định sẽ làm cho trên nhiều browsers/versions/platforms. Các công cụ như Visual Studio cũng có thể gọi nhiều trình duyệt để hiển thị một trang duy nhất mà bạn đang làm việc. Khi thiết kế với CSS, xem xét việc "cài đặt lại" tất cả các giá trị mặc định như hình meyerweb.com.

Nếu trang web của bạn đang sử dụng bất kỳ tính năng CSS tạo cụ thể cho một trình duyệt, hãy cẩn thận như thế nào bạn sẽ tiếp cận tiền tố nhà cung cấp như -webkit-, -moz-, hoặc -ms-. Để có hướng dẫn về các xu hướng ngành công nghiệp trong vấn đề này, nó sẽ có giá trị thời gian của bạn để kiểm tra tài liệu tham khảo sau đây:

?? Microsoft cạnh Dev Blog: Một break từ quá khứ, phần 2: Nói lời tạm biệt với ActiveX, VBScript, attachEvent
?? QuirksMode.org: tiền tố nhà cung cấp CSS coi là có hại
?? Bruce Lawson: Mở Internet Explorer hỗ trợ -webkit- tiền tố nhà cung cấp
Trong khi các tài liệu tham khảo ở trên giải thích một phong trào đi từ mã nhà cung cấp và lý do tại sao, trang web này cung cấp các đề xuất thiết thực về cách làm việc thông qua điều này hôm nay.

3) Bad Form
Sai lầm: khiến một người sử dụng để cung cấp bất kỳ thông tin (đặc biệt là khi bước vào một lĩnh vực văn bản) và giả định các dữ liệu sẽ được nhận như dự định.

Tác động: Nhiều thứ có thể (và nhiều khả năng sẽ) đi sai khi mục người sử dụng là đáng tin cậy. Trang này có thể thất bại nếu dữ liệu cần thiết không được cung cấp, hoặc các dữ liệu nhận được là không tương thích với một kế hoạch dữ liệu nằm bên dưới. Thậm chí nghiêm trọng hơn là vi phạm cố ý của cơ sở dữ liệu của trang web, có thể thông qua các cuộc tấn công Injection (xem OWASP Top 10 năm 2013-A1-Tiêm).

Làm thế nào để tránh: Các bit đầu tiên của lời khuyên ở đây là để đảm bảo rằng nó là rõ ràng cho người sử dụng những loại dữ liệu bạn đang tìm kiếm. Những ngày này, yêu cầu cho một địa chỉ có thể dẫn đến hoặc là một doanh nghiệp, nhà, hoặc thậm chí địa chỉ email! Ngoài ra phải cụ thể, tận dụng lợi thế của các kỹ thuật xác nhận dữ liệu có sẵn trong HTML của ngày hôm nay như đã thấy ở bài viết này. Không có vấn đề làm thế nào dữ liệu được xác nhận trên phía trình duyệt, hãy chắc chắn nó là luôn luôn xác nhận trên server-side là tốt. Không bao giờ cho phép một câu lệnh T-SQL nối để sử dụng dữ liệu từ mục người sử dụng mà không cần xác nhận của từng lĩnh vực là loại dữ liệu mà nó nên được.

4) Bloated Responses
Sai lầm: Các trang được làm đầy với nhiều đồ họa chất lượng cao và / hoặc hình ảnh, thu nhỏ lại với việc sử dụng các yếu tố chiều cao img và các thuộc tính chiều rộng. File liên kết từ các trang như CSS và JavaScript là lớn. Các đánh dấu nguồn HTML cũng có thể là không cần thiết phức tạp và phong phú.

Tác động: Thời gian để có một trang hoàn toàn làm cho trở nên đủ dài cho một số người dùng từ bỏ hoặc thậm chí sốt ruột lại yêu cầu toàn bộ trang một lần nữa. Trong một số trường hợp, lỗi này sẽ xảy ra nếu chế biến trang được chờ đợi quá lâu khi lập trình php

Làm thế nào để tránh: Không chấp nhận những suy nghĩ đó truy cập vào internet là nhận được nhanh hơn và nhanh hơn - do đó cho phép các kịch bản cồng kềnh. Thay vào đó, hãy xem xét tất cả mọi thứ sẽ trở lại và ra từ trình duyệt đến trang web của bạn như là một chi phí. Kẻ hành chính trong trang sưng lên là hình ảnh. Để giảm thiểu chi phí của hình ảnh mà làm chậm tải trang, hãy thử các ba lời khuyên:

Hãy tự hỏi mình: "Có phải tất cả đồ họa của tôi hoàn toàn cần thiết?" Nếu không, loại bỏ hình ảnh không cần thiết. Bạn có thể quét site của bạn ở đây đã gợi ý về những hình ảnh để nén.
Giảm thiểu kích thước tập tin hình ảnh của bạn với các công cụ như Shrink O'Matic hoặc bạo loạn.
Hình ảnh trước khi tải. Điều này sẽ không cải thiện chi phí trên tải về ban đầu, nhưng có thể làm cho các trang khác trên trang web có sử dụng các hình ảnh được tải nhanh hơn nhiều. Đối với lời khuyên về việc này, xem bài viết này.
Một cách khác để giảm chi phí là để giảm bớt CSS liên quan và các tập tin JavaScript. Có rất nhiều công cụ hiện có để hỗ trợ trong nỗ lực này như Thu nhỏ CSS và JS Giảm bớt.

Trước khi chúng tôi rời khỏi chủ đề này, phấn đấu để được hiện tại với HTML (xem sai lầm # 1) và sử dụng bản án tốt khi sử dụng hoặc trong HTML.

5) Tạo Mã đó nên làm việc
Sai lầm: Cho dù đó là JavaScript hoặc mã chạy trên các máy chủ, một nhà phát triển đã được thử nghiệm và xác nhận rằng nó hoạt động, do đó kết luận nó nên vẫn làm việc một khi triển khai. Mã này thực hiện mà không có bẫy lỗi, bởi vì nó làm việc khi nó đã được thử nghiệm bởi nhà phát triển.

Tác động: Các trang web mà không cần kiểm tra lỗi thích hợp có thể tiết lộ các lỗi đến người dùng cuối một cách xấu xí. Không chỉ trải nghiệm người dùng có thể bị ảnh hưởng đáng kể, các loại nội dung thông báo lỗi có thể cung cấp manh mối để một hacker như thế nào để thâm nhập vào một trang web.

Làm thế nào để tránh: Để err là con người, do đó, mang triết lý đó để mã hóa. Với JavaScript, hãy chắc chắn để thực hiện kỹ thuật tốt để ngăn chặn các lỗi cũng như nắm bắt chúng. Mặc dù bài viết này đề cập JavaScript mã hóa cho Windows Apps, đa số các chủ đề được áp dụng để phát triển web quá, và nó có đầy đủ các lời khuyên tốt! Một viện trợ để giúp tạo ra mã vững chắc để có thể chứa lên cũng với những thay đổi trong tương lai đang kiểm tra đơn vị (xem bài viết này Wikipedia).

Thất bại trong mã phía máy chủ nên được bắt gặp mà người dùng nhìn thấy bất kỳ chi tiết Nerdy. Reveal chỉ những gì là cần thiết, và chắc chắn để thiết lập các trang báo lỗi thân thiện cho những thứ như 404s HTTP (xem bài viết này Wikipedia).

6) Viết forking Mã
Sai lầm: Với khái niệm cao quý của tất cả các trình duyệt hỗ trợ và các phiên bản, một nhà phát triển tạo ra mã để đáp ứng với mỗi kịch bản tốt. Mã này sẽ trở thành một đống nếu báo cáo, forking trong tất cả các loại hướng.

Tác động: Là phiên bản mới của trình duyệt cập nhật, quản lý các tập tin mã trở nên cồng kềnh và khó quản lý. Và như đã nói ở # 1, nó càng không cần thiết.

Làm thế nào để tránh: Thực hiện tính năng phát hiện trong mã so với phát hiện trình duyệt / phiên. Kỹ thuật tính năng phát hiện không chỉ làm giảm đáng kể số lượng mã, nó là dễ dàng hơn để đọc và quản lý. Xem xét sử dụng một thư viện như Modernizr đó không chỉ giúp với tính năng phát hiện, nó cũng tự động giúp cung cấp hỗ trợ dự phòng cho các trình duyệt cũ không lên đến tốc độ với HTML5 hay CSS3.

7) Thiết kế Unresponsively
Sai lầm: phát triển trang web giả xem trong màn hình kích thước tương tự như các nhà phát triển / thiết kế.

Tác động: Khi xem các trang web trong các thiết bị di động hay màn hình rất lớn, trải nghiệm người dùng bị với một trong hai không thể nhìn thấy những khía cạnh quan trọng của trang hoặc thậm chí ngăn ngừa điều hướng đến các trang khác.

Làm thế nào để tránh: Hãy suy nghĩ responsively. Sử dụng thiết kế đáp ứng (Wikipedia) hoặc (A List Apart bài viết) trong các trang web của bạn. Dưới đây là một số hướng dẫn thực tế về nó bao gồm cả hình ảnh nhạy. Một thư viện rất nổi tiếng sẵn sàng phục vụ trong lĩnh vực này là Bootstrap.
Xem thêm: KHóa học android tại hà nội !
8) Making Meaningless Pages
Sai lầm: Sản xuất trang ốp nào với nội dung có thể rất hữu ích, nhưng không cung cấp bất kỳ gợi ý để công cụ tìm kiếm. Truy không được thực hiện.

Tác động: Các trang không được phát hiện thông qua công cụ tìm kiếm và do đó có thể nhận được ít hoặc không có người thăm. Các nội dung trang có thể là rất khó hiểu cho người dùng với suy giảm thị lực.

Làm thế nào để tránh: Sử dụng SEO (tối ưu hóa công cụ tìm kiếm) và hỗ trợ cho người khuyết tật trong HTML. Về SEO, hãy chắc chắn để thêm thẻ để cung cấp ý nghĩa cho một trang với các từ khóa và mô tả. Một ghi tốt trên được tìm thấy tại Về Tech. Để kích hoạt một kinh nghiệm tiếp cận tốt hơn, được xác định để cung cấp một alt = "mô tả hình ảnh của bạn" thuộc tính trong mỗi img hoặc khu vực thẻ của bạn. Tất nhiên, có nhiều việc phải làm và các đề xuất có thể tiếp tục được điều tra tại Về Tech. Bạn cũng có thể kiểm tra một trang web công cộng tại Cynthia nói để xem nó có phù hợp với mục 508.

9) Producing Sites That Are Too Refreshing
Sai lầm: Tạo một trang web đòi hỏi phải làm mới hoàn toàn của một trang cho mỗi tương tác.

Tác động: Tương tự như các trang cồng kềnh (xem sai lầm # 4), hiệu suất của thời gian tải trang bị ảnh hưởng. Kinh nghiệm người dùng thiếu tính lưu động, và mỗi lần tương tác có thể gây ra một cài đặt lại ngắn (hoặc dài) của trang.

Làm thế nào để tránh: Một cách nhanh chóng để tránh điều này là xác định nếu đăng lại cho máy chủ đang thực sự cần thiết. Ví dụ, client-side script có thể được sử dụng để cung cấp kết quả ngay lập tức khi có sự phụ thuộc tài nguyên server-side. Bạn cũng có thể nắm lấy kỹ thuật AJAX (Wikipedia) hoặc đi xa hơn với một trang duy nhất ứng dụng "SPA" (Wikipedia) phương pháp tiếp cận. Thư viện phổ biến JavaScript / khung có sẵn để làm việc thông qua các phương pháp này dễ dàng hơn nhiều, chẳng hạn như JQuery, KnockoutJS, và AngularJS.

10) Làm việc quá nhiều
Sai lầm: Một nhà phát triển dành một thời gian dài tạo ra nội dung web. Thời gian có thể được dành làm nhiệm vụ lặp đi lặp lại, hoặc chỉ đơn giản là gõ rất nhiều.

Tác động: Thời gian cho ra mắt trang web ban đầu hoặc cập nhật tiếp theo là quá dài. Giá trị của các nhà phát triển làm giảm khi nó xuất hiện các nhà phát triển khác đang làm công việc tương đương trong thời gian ít hơn và với nỗ lực ít hơn. Lao động chân tay là dễ bị sai lầm, và khắc phục sự cố lỗi mất thời gian nhiều hơn.

Làm thế nào để tránh: Khám phá lựa chọn của bạn. Xem xét việc sử dụng các công cụ mới hoặc các kỹ thuật tiến trình mới cho mỗi giai đoạn phát triển. Ví dụ, làm thế nào để biên tập mã hiện tại của bạn so với Tiêu Sublime hoặc Visual Studio? Bất kể những gì đang soạn thảo mà bạn đang sử dụng, có bạn vừa chui vào các tính năng của nó? Có lẽ một phần rất nhỏ của thời gian của bạn perusing các tài liệu có thể tiết lộ một cách mới để làm một cái gì đó mà có thể tiết kiệm giờ và giờ thời gian sau đó. Ví dụ, hãy chú ý một phần mở rộng cho Visual Studio có thể làm tăng năng suất cho các nhà phát triển web như đã thấy trong bài viết này.

Đừng bỏ lỡ các công cụ có sẵn trên web để giúp đỡ! Ví dụ, hãy kiểm tra các công cụ theo dev.modern.ie để đơn giản hóa thử nghiệm (trên nhiều nền tảng và thiết bị) và xử lý sự cố.

Bạn cũng có thể giúp giảm bớt thời gian và những sai lầm của quá trình tự động hoá. Một ví dụ của việc này là sử dụng một công cụ như Grunt có thể tự động điều như sự Giảm bớt các tập tin (xem sai lầm # 4). Một ví dụ khác là Bower mà có thể giúp quản lý thư viện / khung (xem sai lầm # 9).

Làm thế nào về các máy chủ web riêng của mình? Với sự giúp đỡ của các dịch vụ như Microsoft Azure Web Apps, bạn có thể nhanh chóng tạo ra một trang web cho hầu như bất kỳ kịch bản phát triển có thể dễ dàng mở rộng công việc kinh doanh của bạn!

Tổng kết
Bằng cách xác định sai lầm phổ biến, các nhà phát triển web có thể loại trừ những thất vọng mà những người khác đã phải chịu đựng. Không chỉ là điều quan trọng để ghi nhận, nhưng khi chúng ta hiểu được tác động của một sai lầm và có biện pháp để tránh nó, chúng ta có thể tạo ra một quá trình phát triển phục vụ cho sở thích của chúng tôi - và làm như vậy với sự tự tin!

Xem thêm: Khóa học photoshop cơ bản tại hà nội