web程序怎么团队开发_每个团队都应掌握的30个Web开发清单

web程序怎么团队开发

Building a website or app and making it available for the world is a complex business. A number of factors must come together to ensure the final product is successful. That means attracting and keeping visitors, meeting business goals, and minimizing problems. You can deliver a better product with the help of web development checklists.

建立网站或应用程序并将其提供给全世界是一项复杂的业务。 必须结合多种因素来确保最终产品成功。 这意味着吸引和留住访客，实现业务目标并最大程度地减少问题。 您可以借助Web开发清单提供更好的产品。

As in everyday life, checklists can be a great organizational tool. They keep web development teams on track. They also ensure important tasks aren’t overlooked in the rush to complete a project.

就像在日常生活中一样，清单可以是一个很好的组织工具。 他们使Web开发团队保持跟踪。 它们还确保重要的任务在紧急完成项目时不会被忽略。

We searched the web for the most useful web development checklists. They cover everything from front-end and performance to SEO and marketing.

我们在网络上搜索了最有用的Web开发清单。 它们涵盖了从前端和性能到SEO和市场营销的所有内容。

发射(发射前/发射后) (Launch (Pre-launch/Post-launch))

1. 网站的基本启动前清单 (1. The Essential Pre-launch Checklist for Your Website)

A practical checklist that includes:

实用清单包括：

• design elements to look out for before launch
  发布前要注意的设计元素
• functionality
  功能性
• cross-browser testing
  跨浏览器测试
• SEO and content editing
  SEO和内容编辑

2. 网站启动清单 (2. Website Launch Checklist)

This is a nice checklist tool built by Glasgow developer Fraser Boag.

这是由格拉斯哥开发人员Fraser Boag构建的一个不错的清单工具。

This tools lets you:

该工具可让您：

• check items as you complete each task
  完成每个任务时检查项目
• grey out an item if it’s not applicable
  如果某项不适用，则将其灰显
• reset the checklist to get it ready for the next project.
  重置清单以使其准备好用于下一个项目。

Changes will be saved using cookies, so you can easily use the checklist throughout the duration of your project.

更改将使用Cookie保存，因此您可以在项目的整个过程中轻松使用清单。

The checklist covers content, benchmarks and performance, compatibility, accessibility, analytics, and more. Items in the list include, among other things:

该清单涵盖了内容，基准和性能，兼容性，可访问性，分析等等。 列表中的项目包括：

• content editing
  内容编辑
• navigation usability
  导航可用性
• links testing
  链接测试
• GDPR compliance
  符合GDPR
• HTML and CSS validity
  HTML和CSS的有效性
• styles and scripts minification
  样式和脚本最小化

3. Web应用程序和移动应用程序的基本启动清单 (3. The Essential Launch Checklist for Web Apps and Mobile Apps)

Ben Cheng presents “… a simple launch checklist for web and mobile apps … for product managers to quickly test performance of their apps.”

Ben Cheng展示了“……针对Web和移动应用程序的简单启动清单……供产品经理快速测试其应用程序的性能。”

Not only does the author include important tasks to complete before launching, he also explains the why behind his choices.

作者不仅在发布前包含了重要的任务，还解释了为什么选择之后的原因 。

The list presents items belonging to the following areas:

该列表显示了属于以下领域的项目：

• performance
  性能
• security
  安全
• broken links
  断开的链接
• compatibility
  兼容性
• SEO/social
  SEO /社交
• nice to haves, such as a 404 page, print stylesheets, and more.
  很不错，例如404页，打印样式表等。

后端(数据库和服务器)和安全性 (Back-end (Database and Server) and Security)

4. 数据库测试清单 (4. Database Testing Checklist)

For data persistence, you most likely need a database. The smooth running and integrity of the database are crucial to a fast and secure website or app. In this checklist, you’ll find items relating to:

为了保持数据持久性，您很可能需要数据库。 数据库的平稳运行和完整性对​​于快速安全的网站或应用程序至关重要。 在此清单中，您将找到与以下内容有关的项目：

• database integrity
  数据库完整性
• stored procedures
  存储过程
• field validation
  现场验证
• constraints
  约束
• security
  安全
• transactions and more.
  交易等等。

5. 后端最佳做法 (5. Back-end Best Practices)

These are stack-agnostic guidelines for best practices that encompass various back-end architectures. It’s comprehensive, including best practices on:

这些是涵盖各种后端体系结构的最佳实践的与堆栈无关的指南。 它是全面的，包括以下方面的最佳实践：

• data storage solutions
  数据存储解决方案
• security
  安全
• server environments
  服务器环境
• application monitoring, and much more.
  应用程序监视等等。

Towards the end of the document, you’ll find a responsibility checklist to organize your team’s work. You’ll also find a release checklist for the launch of your website or app.

在文档末尾，您将找到一份责任清单以组织团队的工作。 您还将找到发布网站或应用程序的发布清单。

前端 (Front-end)

6. 前端部署清单 (6. A Front-end Deployment Checklist)

If you code landing pages, Fred Rocha’s deployment checklist is what you need. It’s succinct and to the point. It includes technical front-end items such as:

如果您对着陆页进行编码，则需要Fred Rocha的部署清单。 简洁明了。 它包括技术前端项目，例如：

• checking performance
  检查表现
• validating the markup
  验证标记
• checking the console for JavaScript errors, and more.
  检查控制台中是否有JavaScript错误等。

7. David Dias撰写的前端清单 (7. The Front-end Checklist by David Dias)

It describes itself as “perfect for modern websites and meticulous developers”. This is an online interactive tool that allows you to enter the project’s URL and get a complete report on the following areas:

它称自己为“完美的现代网站和细致的开发人员”。 这是一个在线交互式工具，可让您输入项目的URL并获取以下方面的完整报告：

• head
  头
• HTML
  HTML
• webfonts
  网络字体
• CSS
  CSS
• JavaScript
  JavaScript
• images
  图片
• accessibility
  可及性
• performance
  性能
• SEO
  搜索引擎优化

The check is thorough and reveals which items in the various areas deserve high, medium or low priority.

该检查是彻底的，并揭示了在各个领域中哪些项目应具有高，中或低优先级。

React App部署和性能 (React App Deployment and Performance)

8. React应用的实时准备清单 (8. Live Readiness Checklist of a React App)

This is a list of tasks you need to complete before your React app is ready for production.

这是您需要在React应用准备投入生产之前完成的任务列表。

9. 千载难逢：消除常见React性能问题的清单 (9. Death by a Thousand Cuts: A Checklist for Eliminating Common React Performance Issues)

This is a six-item checklist with fun and clear explanations of how to go about implementing each of the tasks on the list for a blazing fast React app.

这是一个包含六个项目的清单，其中包含有趣而清晰的说明，说明了如何快速实现出色的快速React应用程序中列表中的每个任务。

跨浏览器测试 (Cross-browser Testing)

10. 跨浏览器测试清单上线之前 (10. Cross-browser Testing Checklist Before Going Live)

Deeksha Agarwal offers a top-notch checklist to ensure your website or app works and looks as intended in all browsers and platforms on your local dev environment before the launch. Among the items you’ll find in this list are:

Deeksha Agarwal提供了一个一流的清单，以确保您的网站或应用在发布前在您本地开发环境中的所有浏览器和平台上都能正常工作和显示。 您将在此列表中找到以下项目：

• element alignment, and other HTML and CSS cross-browser issues
  元素对齐以及其他HTML和CSS跨浏览器问题
• font rendering
  字体渲染
• API connections, and much more.
  API连接等等。

11. 跨浏览器测试清单 (11. Cross-browser Testing Checklist)

Rajkumar offers this handy checklist where he mentions all the items you need to test on multiple operating systems and browsers.

Rajkumar提供了这个方便的清单，其中提到了您需要在多种操作系统和浏览器上测试的所有项目。

辅助功能 (Accessibility)

12. Web内容辅助功能指南1.0的检查点清单 (12. Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0)

This W3C checklist includes all the items you need to consider so that more people can access and use your site. The items are grouped according to a priority number from one to three.

该W3C清单包括您需要考虑的所有项目，以便更多的人可以访问和使用您的网站。 根据优先级编号从1到3对项目进行分组。

It covers:

它涵盖：

• providing text for non-text elements
  为非文本元素提供文本
• organizing documents so they can be read without stylesheets
  组织文档，以便无需样式表即可阅读它们
• color contrast
  颜色对比
• appropriate structure and elements for HTML documents
  HTML文档的适当结构和元素
• expanding acronyms and abbreviations the first time they appear
  首次出现缩写词和缩写时
• logical tab navigation, and more.
  逻辑标签导航等等。

13. WebAIM的WCAG 2清单 (13. WebAIM’s WCAG 2 Checklist)

This checklist presents WebAIM’s (Web Accessibility in Mind) accessibility recommendations for those seeking WCAG conformance.

此清单为寻求WCAG一致性的用户提供了WebAIM(“ Web Accessibility in Mind”)的可访问性建议。

14. A11Y项目清单 (14. The A11Y Project Checklist)

This A11Y Project checklist organizes items under the following headings:

该A11Y项目检查表将项目组织在以下标题下：

• content
  内容
• global code
  全局代码
• keyboard
  键盘
• images
  图片
• headings
  标题
• lists
  清单
• controls
  控制项
• tables
  桌子
• forms
  形式
• media
  媒体
• appearance
  出现
• animation
  动画
• color contrast
  颜色对比
• mobile/touch.
  手机/触摸。

15. 权威的网站可访问性检查表 (15. The Definitive Website Accessibility Checklist)

This checklist is presented in a great, user-friendly table where items are grouped on the basis of their accessibility priority level in accordance with WCAG 2.0 guidelines:

此检查表以简洁易用的表格呈现，该表格根据WCAG 2.0准则根据可访问性优先级对项目进行分组：

• Level A makes your website or app accessible to some users

  级别A使某些用户可以访问您的网站或应用

• Level AA makes it available to almost all users

  AA级使几乎所有用户都可以使用

• Level AAA makes it available to all users.

  AAA级使其对所有用户可用。

性能 (Performance)

16. 前端性能清单 (16. Front-end Performance Checklist)

There’s hardly anything that puts users off more than a slow website or app. Here’s another great checklist by David Dias. He labels his checklist “The only front-end performance checklist that runs faster than the others”. For each rule, you’ll have an explanation of why it’s important and how you can fix that specific issue. Also, items in this checklist have priority indicators. There are three levels of priority: low, medium and high. Finally, David also lists a number of useful tools that you can use to test or monitor your website or app’s performance.

除了缓慢的网站或应用程序，几乎没有什么能使用户失望。 这是大卫·迪亚斯(David Dias)撰写的另一份很棒的清单。 他将自己的清单标记为“唯一比其他人运行得更快的前端性能清单”。 对于每条规则，您都将解释为什么它很重要以及如何解决该特定问题。 另外，此清单中的项目具有优先级指示符。 优先级分为三个级别：低，中和高。 最后，David还列出了许多有用的工具，可用于测试或监视网站或应用程序的性能。

17. 前端性能清单2020 (17. Front-end Performance Checklist 2020)

Vitaly Friedman offers “an updated overview of the issues you might need to consider to ensure that your response times are fast, user interaction is smooth and your sites don’t drain user’s bandwidth”. Items in this thorough checklist are under the following headings:

Vitaly Friedman提供了“有关可能需要考虑的问题的最新概述，以确保您的响应时间很快，用户交互顺畅并且您的站点不会浪费用户的带宽”。 此详尽清单中的项目位于以下标题下：

• Getting ready: planning and metrics
  准备：计划和指标
• Setting realistic goals
  设定切合实际的目标
• Defining the environment
  定义环境
• Assets optimizations
  资产优化
• Build optimizations
  构建优化
• Delivery optimizations
  投放优化
• HTTP/2
  HTTP / 2
• Testing and monitoring
  测试与监控
• Quick wins. These are 15 issues that you can quickly resolve if you have just one hour to gain significant performance results.
  快速获胜。 如果您只有一个小时的时间来获得显着的性能结果，则可以快速解决这15个问题。

18. Addy Osmani的18点Web性能清单 (18. Addy Osmani’s 18-Point Web Performance Checklist)

Ben Halpern recommends Addy Osmani’s performance checklist, taken from one of Addy’s AMAs. Among the suggestions you’ll find in this list are:

Ben Halpern建议从Addy的AMA之一中摘取 Addy Osmani的性能清单。 您会在此列表中找到以下建议：

• code-splitting
  代码分割
• lazy loading non-critical resources
  延迟加载非关键资源
• file compression
  文件压缩
• caching, and much more.
  缓存等等。

网站迁移 (Site Migration)

19. SEMRush网站迁移清单 (19. The SEMRush Website Migration Checklist)

There are different reasons why you would want to migrate your website. You may have changed from HTTP to HTTPS, changed domain names, or opted for a new framework or CMS. SEMRush offers a free online interactive checklist for managing this process. You can also download it in PDF format.

您要迁移网站的原因有多种。 您可能已从HTTP更改为HTTPS，更改了域名，或选择了新框架或CMS。 SEMRush提供了免费的在线交互式清单来管理此过程。 您也可以下载PDF格式的文件。

20. 最终网站迁移清单 (20. The Ultimate Website Migration Checklist)

The main sections under which items are grouped in this checklist are:

在此清单中将项目分组的主要部分是：

• Pre-migration
  迁移前
• Post-migration
  迁移后

SEO concerns take center stage in this checklist. It covers reviewing analytics data, gathering key metrics and trends, monitoring top pages, and so on.

SEO问题在此清单中处于中心位置。 它涵盖了查看分析数据，收集关键指标和趋势，监视首页等等。

21. 网站迁移清单 (21. The Website Migration Checklist)

This is a comprehensive website migration checklist which groups its items under a

这是一个全面的网站迁移清单，将其项归类为

• pre-launch roadmap
  发布前的路线图
• launch day
  发射日
• post-launch phase
  发布后阶段

SEO(搜索引擎优化) (SEO (Search Engine Optimization))

22. 2020年完整的SEO清单 (22. The Complete SEO Checklist for 2020)

This is a super comprehensive SEO checklist by Backlinko that includes multiple checklists. In particular, you’ll find:

这是Backlinko的超级综合SEO清单，其中包括多个清单。 特别是，您会发现：

• an SEO basics checklist
  SEO基础清单
• a keyword research checklist
  关键字研究清单
• an on-page SEO checklist
  页面上的SEO检查清单
• a technical SEO checklist
  SEO技术清单
• a content checklist
  内容清单
• a link building checklist
  链接构建清单

As a bonus, you’ll also get some advanced SEO tips and tactics and some case studies and examples.

作为奖励，您还将获得一些高级SEO技巧和策略以及一些案例研究和示例。

23. 2020年完整的51点SEO清单 (23. The Complete 51-Point SEO Checklist for 2020)

ClickMinded’s Tony Griffith lists a “step-by-step SEO checklist that you can use immediately. It’s a very direct, straightforward process that will drive more traffic and more customers to your website as quickly as possible.”

ClickMinded的Tony Griffith列出了一个“逐步的SEO清单”，您可以立即使用它。 这是一个非常直接，直接的过程，将尽快吸引更多流量和更多客户访问您的网站。”

24. 您的2020年9点SEO清单 (24. Your 9-Point SEO Checklist for 2020)

With great visuals and clear explanations, this checklist covers the tasks involved in:

该清单以出色的视觉效果和清晰的说明涵盖了以下任务：

• basic SEO
  基本SEO
• keyword research
  关键字研究
• technical SEO
  技术搜索引擎优化
• content SEO, and more.
  内容SEO等。

25. 2020年最终SEO清单 (25. The Ultimate SEO Checklist for 2020)

This is a massive but extremely user-friendly, 66-point checklist that focuses on optimizing a website for Google in 2020.

这是一个庞大但极为人性化的66点清单，重点在于2020年为Google优化网站。

26. 2020年页面搜索引擎优化清单 (26. On-page SEO Checklist for 2020)

On-page SEO is the process of optimizing a single page on your website, which is very important for getting a great Google ranking. Nathan Gotch of GotchSEO shows his step-by-step, on-page SEO checklist, which takes into account:

页内搜索引擎优化是优化网站上单个页面的过程，这对于获得良好的Google排名非常重要。 GotchSEO的Nathan Gotch显示了他的分步式SEO检查清单，其中考虑了以下内容：

• SEO performance
  SEO表现
• crawling and indexing
  检索和索引
• keywords
  关键字
• content
  内容
• images
  图片
• video
  视频
• links
  链接
• user experience (UX) and design and user interface (UI)
  用户体验(UX)以及设计和用户界面(UI)
• ranking your page in the local pack
  在本地包中对页面进行排名
• structured data
  结构化数据
• and more
  和更多

数字营销 (Digital Marketing)

27. 2020年数字营销清单 (27. Digital Marketing Checklist for 2020)

Here’s a practical checklist to ensure your digital marketing supports your business. A brand-centered, responsive, and Google-friendly website is first up on the list, of course.

这是一个实用的清单，可确保您的数字营销支持您的业务。 当然，首先要考虑以品牌为中心，响应Swift且对Google友好的网站。

28. 2020数字营销清单 (28. 2020 Digital Marketing Checklist)

Here’s an 8-point 2020 digital marketing checklist by Clear Blue Sky Digital. It walks through:

这是Clear Blue Sky Digital发布的2020年8点数字营销清单。 它通过：

• the look, feel, and security of your website
  网站的外观，感觉和安全性
• its SEO and SEM (search engine marketing) strategies
  其SEO和SEM(搜索引擎营销)策略
• your social media marketing approach.
  您的社交媒体营销方式。

GDPR(通用数据保护法规) (GDPR (General Data Protection Regulation))

29. 用于评估数据策略的GDPR合规性检查表 (29. A GDPR Compliance Checklist for Evaluating Your Data Strategy)

GDPR compliance is a must for most businesses inside the European Union or dealing with countries in the European Union. Its rationale is to give EU citizens more control and transparency over their data. This checklist covers GDPR requirements and what your business needs to do to ensure compliance.

对于欧盟内部或与欧盟国家打交道的大多数企业，必须遵守GDPR。 其理由是使欧盟公民对其数据有更多的控制权和透明度。 该清单涵盖了GDPR要求以及您的企业为确保合规性而需要做的事情。

30. GDPR合规性检查表 (30. The GDPR Compliance Checklist)

GDPR regulations are not a walk in the park for big businesses, let alone medium to small ones. If you’re struggling, here’s a checklist that can help your business fulfill its requirements.

对于大型企业，更不用说GDPR法规了，更不用说中小型企业了。 如果您正在苦苦挣扎，这是一份清单，可以帮助您的企业满足要求。

结论 (Conclusion)

As you can see, some lists include items from different categories. Items under the Performance heading are present under the SEO heading. This is so because page load speed is a key component in achieving top search engine rankings. All aspects of a web presence must work together to achieve the desired end result. With these checklists, that kind of coordination is much easier.

如您所见，某些列表包含不同类别的项目。 性能标题下的项目是SEO的标题下。 之所以如此，是因为页面加载速度是获得顶级搜索引擎排名的关键因素。 网络存在的所有方面必须共同努力才能达到理想的最终结果。 使用这些清单，这种协调变得容易得多。

翻译自: https://www.sitepoint.com/web-development-checklists/

web程序怎么团队开发