Coursera 笔记

Module 01 · Introduction to Web and Front-End Development网页与前端开发简介

Web Development Trends网络开发趋势

Coursera ↗

Web development is a constantly evolving field. It is crucial for developers and businesses to stay up to date with the latest trends and technologies. Here are some key developments:
Web 开发是一个不断发展的领域。对于开发者和企业来说,跟上最新的趋势和技术至关重要。以下是几个关键发展:

AR and Web Development 增强现实与网络开发

Augmented Reality (AR) is a technology that overlays digital information, such as images, videos, 3D models, or other interactive content, into the real-world environment. AR blends the virtual and physical worlds, enhancing a user's perception of reality by adding computer-generated elements to their view of the real world.
增强现实(AR)是一种将数字信息,如图像、视频、3D 模型或其他交互式内容叠加到现实世界环境中的技术。AR 将虚拟世界与物理世界融合,通过向用户对现实世界的观察中添加计算机生成的元素,增强用户对现实的感知。

In web development, developers integrate AR to bring augmented reality experiences directly to web browsers. They accomplish this through WebAR technologies, enabling users to access AR content without requiring dedicated AR apps or installations.
在网络开发中,开发者通过集成 AR 技术,将增强现实体验直接带到网页浏览器中。他们通过 WebAR 技术实现这一目标,使用户无需安装专门的 AR 应用程序即可访问 AR 内容。

For instance, a furniture retail website might incorporate AR functionality, allowing users to visualize how a piece of furniture would appear in their own home through their smartphone camera. Similarly, educational websites might utilize AR to offer interactive and engaging lessons by overlaying 3D models onto textbooks or other physical objects.
例如,一个家具零售网站可能集成 AR 功能,使用户能够通过智能手机摄像头查看家具在他们自己家中呈现的样子。同样,教育网站可能利用 AR 技术,通过在教科书或其他实物上叠加 3D 模型,提供互动和吸引人的课程。

Web-based AR provides accessibility and convenience, reaching a broader audience without mandating that users download additional apps. It heightens user engagement, interactivity, and the overall user experience, rendering it an exciting and innovative frontier in web development.
基于网络的增强现实技术提供了便利性和可访问性,无需用户下载额外应用即可触及更广泛的受众。它提升了用户的参与度、互动性以及整体用户体验,使其成为网络开发领域一个令人兴奋且创新的领域。

VR and Web Development 虚拟现实与网络开发

Virtual Reality (VR) is a technology that immerses users in a computer-generated, three-dimensional, interactive environment, often using specialized equipment like VR headsets or goggles. Web developers incorporate VR into web applications and websites to provide immersive and interactive experiences. Here are some ways in which web developers are using VR:
虚拟现实(VR)是一种使用户沉浸在计算机生成的三维交互式环境中的技术,通常使用专门的设备,如 VR 头盔或眼镜。网站开发人员将 VR 集成到网络应用程序和网站上,以提供沉浸式和交互式的体验。以下是网站开发人员使用 VR 的一些方式:

  • VR Websites: Web developers are creating entire websites that are VR experiences. Users can explore these websites using VR headsets, immersing themselves in a 3D environment. These VR websites are helpful in showcasing products, real estate tours, or artistic projects.
    VR 网站:网络开发者正在创建完整的 VR 体验网站。用户可以使用 VR 头盔探索这些网站,沉浸在 3D 环境中。这些 VR 网站有助于展示产品、房地产游览或艺术项目。
  • 360-Degree Videos and Photos: Web developers use VR to present 360-degree videos and photos. These immersive visuals are used for virtual tours of museums, tourist attractions, and real estate properties.
    360 度视频和照片:网络开发者使用 VR 技术展示 360 度视频和照片。这些沉浸式视觉用于博物馆、旅游景点和房地产的虚拟游览。
  • Virtual Reality Games: Web-based VR games are gaining popularity. Web developers use technologies like WebVR and WebXR to build and distribute VR games.
    虚拟现实游戏:基于网络的 VR 游戏越来越受欢迎。网络开发者使用 WebVR 和 WebXR 等技术来构建和分发 VR 游戏。
  • Training and Simulations: VR helps in training simulations in various industries. Web developers create web-based VR training modules that allow users to practice skills in a safe and controlled virtual environment.
    培训和模拟:虚拟现实有助于在各个行业的培训模拟中发挥作用。网络开发者创建基于网络的 VR 培训模块,使用户能够在安全和可控的虚拟环境中练习技能。
  • Interactive Storytelling: VR enables the creation of interactive narratives where users become part of the story. It's useful in education, marketing, and entertainment.
    交互式叙事:VR 技术使创建交互式叙事成为可能,用户成为故事的一部分。在教育、营销和娱乐领域都有应用。

VUIs Integration in Web Development Web 开发中的语音用户界面集成

Voice interfaces, or voice user interfaces (VUIs), allow users to interact with digital devices and applications using spoken language commands. Developers implement voice interfaces in web development using voice recognition and natural language processing (NLP) technologies. These technologies convert spoken language into text, analyze user intent, and trigger appropriate responses or actions within the web application.
语音界面,或称语音用户界面(VUIs),允许用户通过语音命令与数字设备和应用程序进行交互。开发者在网站开发中通过语音识别和自然语言处理(NLP)技术实现语音界面。这些技术将语音转换为文本,分析用户意图,并在网站应用程序中触发适当的响应或操作。

Responsive Design 响应式设计

Responsive design in web development is an approach to designing and building websites that ensure they look and function well on various devices and screen sizes. Responsive design aims to create a consistent and user-friendly website experience on a desktop computer, laptop, tablet, smartphone, or any other device with internet capabilities.
响应式设计是网络开发中的一种设计方法,旨在确保网站在各种设备和屏幕尺寸上都能良好地显示和运行。响应式设计的目标是在台式电脑、笔记本电脑、平板电脑、智能手机或其他任何具有互联网功能的设备上,创建一个一致且用户友好的网站体验。

The core principles of responsive design encompass:
响应式设计的核心原则包括:

  • Flexible Layouts: Responsive websites use fluid grid layouts that seamlessly adapt to various screen sizes, often favoring relative units like percentages, Ems, and rems for layout elements instead of rigid pixel measurements.
    灵活布局:响应式网站使用流体网格布局,能够无缝适应各种屏幕尺寸,通常更倾向于使用相对单位如百分比、em 和 rem 来布局元素,而不是使用固定的像素测量。
  • Media Queries: Utilizing CSS media queries, developers can apply distinct styles to a webpage based on device characteristics like screen width, height, and orientation (portrait or landscape).
    媒体查询:通过使用 CSS 媒体查询,开发者可以根据设备特性(如屏幕宽度、高度和方向,即纵向或横向)为网页应用不同的样式。
  • Fluid Images and Videos: Developers design images and videos to scale and maintain proportionality, preventing cutoffs or extremes in size when viewed on diverse devices.
    流体图像和视频:开发者设计图像和视频以实现缩放并保持比例,防止在多种设备上查看时出现截断或尺寸极端。
  • Mobile-First Approach: Many responsive designs start with a mobile-first approach, prioritizing development for smaller screens before enhancing for larger devices.
    移动优先方法:许多响应式设计从移动优先方法开始,优先考虑为小屏幕进行开发,然后再增强对大设备的支持。

Progressive Web Apps 渐进式网络应用

Progressive Web Apps (PWAs) are a modern approach to web development that combines the best of web and mobile app technologies. They are web applications that offer a native app-like experience to users right in their web browsers without requiring installation from an app store. Key characteristics of PWAs include:
渐进式 Web 应用(PWAs)是一种结合了 Web 和移动应用技术优势的现代 Web 开发方法。它们是提供类似原生应用体验的 Web 应用,用户可以直接在浏览器中使用,无需从应用商店安装。PWAs 的关键特性包括:

  • Responsiveness: PWAs adapt to various screen sizes and orientations, ensuring a consistent device experience.
    响应性:PWA 可适应各种屏幕尺寸和方向,确保一致的设备体验。
  • Offline Capabilities: Service workers enable PWAs to cache content, allowing them to function even when the device is offline or has a poor internet connection.
    离线功能:服务工作者使 PWA 能够缓存内容,即使在设备离线或网络连接差的情况下也能正常工作。
  • App-Like Interactions: PWAs offer smooth and responsive interactions, making users feel like they are using a native app.
    应用式交互:PWA 提供流畅且响应迅速的交互,使用户感觉就像在使用原生应用。
  • Security: PWAs are served over HTTPS to ensure data security and privacy.
    安全:PWA 通过 HTTPS 提供服务,以确保数据安全和隐私。

Conclusion 结论

In summary, the ever-evolving field of web development offers exciting prospects. Augmented Reality (AR) and Virtual Reality (VR) enhance user experiences, Voice User Interfaces (VUIs) enrich interactions, and responsive design ensures adaptability across devices. Progressive Web Apps (PWAs) combine the best of web and mobile apps for seamless experiences. Staying updated on these trends is crucial for creating compelling web experiences in this dynamic landscape.
总之,不断发展的网络开发领域提供了令人兴奋的前景。增强现实(AR)和虚拟现实(VR)提升了用户体验,语音用户界面(VUIs)丰富了交互,响应式设计确保了跨设备的适应性。渐进式网络应用(PWAs)将网页和移动应用的优点结合,以实现无缝体验。紧跟这些趋势对于在这个动态环境中创造引人入胜的网页体验至关重要。