重庆首届前端培训体验班资料

《你真的会切图吗》

切图概念

前端职责

与产品经理和交互、视觉设计师协作,根据需求文档、线框图、设计稿完成页面制作(切图部分); 与后台工程师协作,完成数据交互、动态信息展现和用户的互动

切图定义

  • 设计思路的理解和还原
  • 页面模块化制作的预演

切图理论储备

常见图片格式 web常见格式

设备像素比

devicePixelRatio = 物理像素 / dips(device-independent像素,设备无关的像素),常见@1x,@2x,@3x

切图实践要领

心中有数

需求定位、结果模块、资源细分、 疑难杂症

大刀阔斧

  • 工欲善其事,必先利其器:硬件舍得、软件恰当、工具够用

  • 图层的合理运用:选择、分组、复制

精雕细磨

压缩图片体积、图片大小范围、仿色杂边处理、雪碧图合并

simple than simple

不切图、让他人切图、自动化切图

《HTML构建之法》

HTML释义

HTML与XHTML、结构与表现分离、使用语义化标签

语义化

What:用合理的HTML标签标记相应的内容。

Why:可用性、易用性、可维护、SEO等

How:认识HTML标签、理解标签的意义

HTML5

新特性

  • Canvas 元素
  • Video 、 Audio 元素
  • 本地离线存储
  • 新标签: article、footer、header、nav、section
  • 新表单: calendar、date、time、email、url、search

模块化

可复用性、方便维护、利于协作

BEM:B -> 块(Block)、E -> 元素 (Element)、M -> 修饰符(Modifier)

最佳实践

  • 书写规范:小写、闭合
  • 合理使用标签:语义化、模块化
  • 声明正确的文档类型
  • 少使用框架
  • 结构、表现、行为分离:不写内联样式

学习提升

  • 多看手册(W3School)
  • 分享文章(UED、个人博客、前端社区)
  • 查看元素(Chrome、Firefox)
  • 告别随意(实践出真知...)

《CSS基础》

CSS概念

CSS基本概念、引入方式、CSS规则

CSS选择器

CSS基本选择器:标记选择器、类别选择器、ID选择器、伪类选择器、伪元素选择器

选择器优先级:从高到低:

  • 使用了 !important声明的规则。
  • 内嵌在 HTML 元素的 style属性里面的声明。
  • 使用了 ID 选择器的规则。
  • 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  • 使用了元素选择器的规则。
  • 只包含一个通用选择器的规则。

CSS继承:继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。一般文本样式和列表样式可继承。

CSS盒模型

CSS内定义的宽(width)和高(height),指的是填充以内的内容范围

实际宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

实际高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

CSS定位和布局

常规流(Normal Flow):static position、relative position

浮动(Float)

绝对定位(Absolute Position):absolute position、fixed position

CSS3介绍

  • 文字渲染
  • 边框和颜色
  • 渐变效果
  • 阴影和反射
  • 变换和动画
  • 多列布局

浏览器兼容性

兼容性查询:http://caniuse.com/

条件注释、CSS Hack、Javascript:http://browserhacks.com/

CSS预处理器

  • Less、Sass、Stylus
  • 变量、嵌套、混入(Mixin)、继承、函数和操作符
  • 用户根据这些语法定义自己的样式规则,最终会通过解析器生成对应的 CSS 文件

《JavaScript Rocks》

JS能做些什么?

面试时都问些什么?

this、原型、作用域、函数各种方式定义

介绍

ECMAScript介绍、版本历史

JS宿主环境、Web解析引擎

特性

动态语言、松散类型、函数特征、原型

曙光

语言改善:ES6 / ES7、CoffeeScript、TypeScript

开发方式:React、AngularJS, Meteor等

跨平台:React-native

How to start

多造轮子、和优秀的人为伍、读万卷书、行万里路

《前端开发实践》

前端开发历史演变

系统在变,浏览器在变,终端在变,技术在变

对前端的要求越来越高,前端发挥的空间越来越大

前端开发流程

需求沟通

深入理解产品,了解需求,有利于后期排期

风险控制,与需求方确认详细交互细节,避免后期需求变更

提出自己专业性的意见建议,对产品负责,对自己负责

技术选型

  • 基础库 : jQuery、Zepto、Lodash、Angulajs、Backbone、Ember、React
  • UI框架 : Bootstrap、jQuery UI、Foundation
  • 样式管理 : LESS、SASS、Stylus
  • 模块管理 : SeaJS、RequireJS
  • 模板选择 : Smarty、Handlebars、Jade
  • 构建工具 : NODE、Grunt、Gulp、F.I.S
  • 包管理工具 : Bower、SPM、Component

拥抱开源技术 、使用成熟稳定的产品、社区活跃, 文档丰富、功能、性能维度、可维护性、可扩展、团队学习成本、

规范意义

统一全局,促进团队合作、降低维护成本、提高代码的可读性、提升团队代码质量、降低缺陷引入机会、有利于知识传递

前后端分离意义

工作依赖关系解耦、让擅长的人做擅长的事、职责分工明确、修改维护方便

前端自动化处理

  • 编译预处理语言比如LESS、SASS、CoffeScript
  • 代码美化、压缩、合并、语法检查
  • 静态资源版本号管理
  • 图片压缩
  • 图片自动合并

前端调试

chrome为主

前端优化

抛开背景谈优化都是耍流氓

可维护性为主,当性能成为问题的时候才谈优化

前端基本优化原则:降低HTTP请求数、降低文件大小、加载顺序

前端的发展

ATWOOD定律:任何可以使用JavaScript来编写的应用,最终会由JavaScript编写

扩展:如果一个软件可以被 JavaScript 实现,这个软件就一定会被 JavaScript 的实现版所取代——那个金科玉律的马云(反正大家也不知道真假)

浏览器、服务器、移动端、游戏端,全方位发展

前端最好的时代已经到来

《前端无线开发实践》

  • viewport介绍
  • 响应式介绍
  • Hybird混合模式介绍
  • 移动端事件介绍
  • 移动端调试