• 网站建设

Blog Archives

sass scss less bootstrap compass

sass scss less bootstrap compass

名词解释

  1. CSS预处器:CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用
  2. Sass:Sass是对CSS(层叠样式表)的语法的一种扩充,是最早最成熟的一款css预处理器。可以使用变量函数等功能,能更加有效更弹性的书写css。
  3. Scss:sass的另外一套语法规则,从sass3.0开始,使用新的语法规则
  4. Less:less是一种动态样式语言。
  5. Bootstrap是一个用于前端开发的开源工具包。
  6. Compass是一个sass的Framework。简单来说就是将sass中的很多样式,compass都已经帮忙写好了, 再加入了一些常用的功能,并且简化了写法,极大了提高了开发效率。

sass

语法看demo

使用: 监控sass并生成css文件

sass –watch –style expanded style.scss:style.css

压缩生成:

sass –watch –style compressed style.scss:style.css

官方文档: http://sass-lang.com/

预定义函数:http://sass-lang.com/docs/yardoc/_index.html

compass

compass就是sass中的rails,语法同sass。

使用:

编译生产环境的文件:

compass compile –output-style compressed

自动编译:

compass watch

compass 的模块:

reset css3 layout typography utilities

compass sprite

参考: http://compass-style.org/help/tutorials/spriting/

参考: http://compass-style.org/help/tutorials/production-css/

less

语法和sass基本类似。具体可以看less官方文档。bootstrap就是用less写的。

less中文文档:http://www.lesscss.net/article/home.html

less官方文档:http://lesscss.org/

bootstrap git库:

git clone https://github.com/twbs/bootstrap.git

bootstrap

看demo

列了一些比较常用的用法。

QQ应用开发

QQ应用开发

QQ应用开发背景

  1. 更好的推广品牌
  2. 利用腾讯海量用户,从而迅速积聚用户量
  3. 其他

QQ应用演示

我们公司有两个QQ应用

一个的调取地址是:http://qq.app.tao800.com/ 老版

另外一个是:http://qq.app.zhe800.com/qq_tao 新版

QQ空间应用开发具体步骤

  1. 申请成为QQ开放平台开发者

    链接:http://wiki.open.qq.com/wiki/%E6%B3%A8%E5%86%8C%E6%88%90%E4%B8%BA%E5%BC%80%E5%8F%91%E8%80%85

  2. 创建应用 注:应用部署,腾讯托管和非腾讯托管 链接:http://wiki.open.qq.com/wiki/%E5%BA%94%E7%94%A8%E6%8E%A5%E5%85%A5%E6%96%B0%E6%89%8B%E6%8C%87%E5%BC%95
  3. 应用调试
  4. 申请上线

QQ应用开发注意事项

  1. 注: 填写平台信息中填入应用开发地址:http://demo.com
  2. 在本地绑定 127.0.0.1 demo.com
  3. 点击调试即可

注1:

因为QQ应用是将我们的项目以iframe的形式嵌入到页面中的,故需要在rails4项目中(rails3不用),加入配置:config.action_dispatch.default_headers = {‘X-Frame-Options’ => ‘ALLOWALL’}

注2:

调用API需要appid, appkey

调用API测试环境: 119.147.19.43 生产环境:openapi.tencentyun.com

注3:

QQ应用中的信任IP,这里需要填你服务器的IP,注意,这个IP只能加不能删,所以需要注意一下。

如果不填写信任IP,那么你的应用服务就不能获取到数据

api接口调用

QQ开放平台在调用应用时,跳到应用首页时url会带上参数:openid,openkey,pf,pfkey

我们在调用应用API时都需要openid,openkey,pf这三个参数,且需要用这三者和其他参数生成签名后调用。

需要生成签名:http://wiki.open.qq.com/wiki/%E8%85%BE%E8%AE%AF%E5%BC%80%E6%94%BE%E5%B9%B3%E5%8F%B0%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%94%E7%94%A8%E7%AD%BE%E5%90%8D%E5%8F%82%E6%95%B0sig%E7%9A%84%E8%AF%B4%E6%98%8E

签名使用了HMAC-SHA1加密算法

HMAC_SHA1(Hashed Message Authentication Code, Secure Hash Algorithm)是一种安全的基于加密hash函数和共享密钥的消息认证协议。它可以有效地防止数据在传输过程中被截获和篡改,维护了数据的完整性、可靠性和安全性。

HMAC_SHA1消息认证机制的成功在于一个加密的hash函数、一个加密的随机密钥和一个安全的密钥交换机制。

HMAC_SHA1 其实还是一种散列算法,只不过是用密钥来求取摘要值的散列算法。

HMAC_SHA1算法在身份验证和数据完整性方面可以得到很好的应用,在目前网络安全也得到较好的实现。

api接口调试工具:

http://open.qq.com/tools

QQ应用所使用到的相关技术

rails engines

rails engines 是什么?

一个 Rails应用程序实际上就是一个 “加强版”engine, 我们可以把engine看作一个微型的应用程序 ,因为 Rails::Application 继承了来自 Rails::Engine 的更多习惯。

 为什么使用rails engines?
  1. QQ应用的业务逻辑和主站基本相同,我们可以公用很多代码,从而提升维护性
  2. 使用方便,操作简洁(就相当于一个小rails)

创建步骤:

  1. rails plugin new qq_app –mountable 创建qq_app engine
  2. mount QqApp::Engine, at: ‘qq_app’ 挂载路由
  3. gem ‘qq_app’, path: ‘qq_app’ 挂载engine

这时,qq_app下就相当于一个独立的小rails 你可以在qq_app下执行创建controller,model等的操作

使用:

migrations操作

  • 子目录中:rails g model xxx / rails g migration xxx
  • 拷贝父目录中的数据 cp db/migrate/20130911154334_create_users.rb qq_app/db/migrate/
  • 修改代码数据(具体参考文档4.2)
  • rake railties:install:migrations (拷贝子目录的migration到父目录)
  • rake db:migrate

ActiveSupport::Concern

缘由:因为我们空间应用中许多比如model,helper,controller等都是一样的,如果全部拷贝的话,可维护性差,所以我们把这部分可以公用的代码给提取了出来, 使用了 ActiveSupport::Concern

源码:gems/activesupport-4.0.0/lib/active_support/concern.rb

ActiveSupport::Concern 主要用于模块的引用,作用: 1. 简化self.included 方法 2. 用于模块之间方法的相互调用

代码中 lib/concern/*

相关model都引用了 lib/concern/* 下的模块

ActiveRecord::Store

将任意格式的数据序列化保存到数据库中去。

参考文档:

腾讯应用开发文档:http://wiki.open.qq.com/wiki/PC%E5%BA%94%E7%94%A8%E6%8E%A5%E5%85%A5wiki%E7%B4%A2%E5%BC%95

rails engine文档:http://guides.rubyonrails.org/engines.html

active_record strore文档: http://api.rubyonrails.org/classes/ActiveRecord/Store.html

高性能网站建设读书笔记

规则1:减少http请求

  • 图片地图
  • css sprites
  • 内联图片

可以通过data:URL模式在web页面中包含图片无需任何http请求。

缺点:IE不支持,大小受限。base64编码会增加图片大小,故整体下载量会增大

格式:data:[[;base64],[data]]

合并脚本和样式表。可以使用一些css开发工具来合并css, 比如compass,less,sass等,合并javascript.理想的状态是一次请求只获取一个样式表和一个javascript脚本

规则二:使用内容发布系统(CDN)

规则三:添加expires头

  • 对脚本,样式表添加expires头,(一般通过web服务器做,nginx,apache)来做这部分工作。设置后可在一定的时间减少http请求。
  • max-age && mod_expires

expires头有一个限制,他要求客户端同服务器时间严格同步。

Cache-Control:max-age=xxx 可以指定组件被缓存多久。

如果expires头和max-age同时存在,会以max-age重写expires头

mod_expires Apache模块可以使expires头像max-age一样以相对时间来设置expires头

规则四:压缩组建

  • 使用gzip压缩效果比较好
  • 一般压缩最常见的是html文档和脚本,样式表等。
  • 优点:减少带宽。提高网页加载速度,提升用户体验

配置:apache

http://httpd.apache.org/docs/2.2/mod/mod_deflate.html

配置:nginx

http://wiki.nginx.org/HttpGzipModule

  • 代理缓存.设置 Vary: Accept-Encoding 来解决代理缓存多份问题
  • 有些浏览器是不支持gzip压缩的,比如ie6, 这时就需要web服务器不进行gzip压缩

规则五:将样式表放在顶部

规则六:将脚本放在底部

  1. 脚本的并行下载 对响应时间影响最大的是页面中组件的数量。当缓存为空时,都会产生一个http请求。
  2. 将脚本的域名换为子域名 优点:1.并行下载 2.去除脚本的cookie等

规则七:避免css表达式

有些css规则用于处理页面加载之后会产生性能问题。

规则八:使用外部javascript 和 css

相比较:内联的要快于外部的。因为内联可以节约多个http请求所带来的开销

但是我们还是要用外部: 原因: 1. js,css有机会被浏览器缓存起来 2. 减少文档大小

规则九: 减少DNS查找

可以通过keep-alive和较少的域名减少DNS查找

规则十: 精简JavaScript

压缩JavaScript

规则十一:避免重定向

规则十二:移除重复脚本

确保脚本只被包含一次

规则十三:配置ETag

规则十四:使Ajax可缓存

确保ajax请求遵循性能知道,尤其应该具有长久的Expires头,或者设置max-age