【前端专场 学习资料七】第四届字节跳动青训营

·  阅读 1623

第四届字节跳动青训营讲师非常用心给大家整理了课前、中、后的学习内容,同学们自我评估,选择性查漏补缺,便于大家更好的跟上讲师们的节奏,祝大家学习愉快,多多提问交流~

第一节:web多媒体入门

简介:

本节课主要给大家介绍下什么是web多媒体,涉及到一些比较重要的概念和前端常用的多媒体web API,让大家对多媒体相关知识点有一个初步的了解和认识。

学习手册

概述

本节课程分为四个章节

  1. web多媒体历史介绍
  1. 基础知识
  1. 应用场景
  1. 一些新的技术标准

基础知识部分涉及到概念较多,大家可以在课前了解一下,比如编码格式、封装格式、Media Source Extensions(MSE)等等,可以帮助大家更好的理解web多媒体。

课前

熟悉视频相关概念,如I帧、B帧、P帧、帧率、GOP、H264、mp4

熟悉 videoElement、audioElement相关属性和API

熟悉Media Source Extensions原理及其API

课后

可以查看xgplayer的源码,学习关于web多媒体播放器的具体流程

分享要点

编码格式

  • 图像基本概念
  • 视频基本概念
  • 编码原理
  • 主流编码格式

封装格式

  • mp4
  • ts
  • flv

多媒体元素和扩展API

  • videoElement
  • audioElement
  • Media Source Extensions

第二节:小游戏开发

概述

本节课包含以下内容:

  • 游戏发展历史
  • 前端场景下的游戏开发
  • 游戏引擎
  • 游戏开发的技能树
  • PixiJS + Web 开发
  • Cocos Creator 编辑器开发
  • 小游戏“小”在哪里

\

课前

安装 cocos creator。

\

课后

Q:在 cocos creator 中添加 sprite,绑定脚本,监听方向键控制 sprite 移动,构建生成 web 产物。

Tips:本题没有标准答案,主要考察对游戏引擎基本流程的了解。

第三节:小程序技术全解

概述

本节课程主要分为四个方面:

  1. 小程序发展历程
  1. 小程序业务价值
  1. 小程序技术解析
  1. 相关拓展内容

课前 (必须)

注册字节小程序账号

按照以下地址中的步骤注册字节小程序账号 microapp.bytedance.com/docs/zh-CN/…

安装字节小程序开发者工具并登录

  1. 访问 microapp.bytedance.com/docs/zh-CN/…
  1. 下载安装完成后打开开发者工具并使用刚刚注册的账号就行登录
  1. 新建一个项目,其中appid填入测试号:testAppId 这样就成功创建一个小程序项目了,你可以在预期的过程中,自己做尝试修改代码看有什么变化

初步学习小程序相关概念和语法

在以下地址 microapp.bytedance.com/docs/zh-CN/… 学习简单预习下小程序相关概念,文件结构,组件,api等,可以快速过下,了解下相关概念,后续完整语法api等,可以等时机开发时再学习

课后

  1. 自己实现一个番茄时钟,要求能够正确展示倒计时,并能够重置和开始
  1. 有余力的同学,可以添加更多功能如加入登录功能,设置多个番茄,自定义番茄时间等等
  1. 可下载以下代码,并导入小程序开发者工具中,进行参考

bytedance.feishu.cn/docx/doxcnP…

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改