文章归档

[MixMVC]MixMVC3.1 Image

最新在完善upload widget的时候顺便制作的Image Model,主要是用于处理图片缩放及裁剪。 SVN: http://192.168.33.2/svn/mixmvc3/project/MST_v3.1/application/models/Image.php Class里面对每个function都有注解,可以直接查看注解的使用说明。 以下是使用例子: $img = new Image(); $img->load('test.jpg'); //load完之后调用available() 防止加载的不是图片文件 if (!$img->available()) { return; } $img->crop(100, 100); $img->save('out.jpg', IMAGETYPE_JPEG, 100); 原图 [1024×768] 使用裁剪缩放 [100×100] $img = new Image(); $img->load('test.jpg'); //load完之后调用available() 防止加载的不是图片文件 if (!$img->available()) { return; }

文章分类 MixMVC, 经验分享

[MixMVC]MixMVC3.1 View概述

1.Layout概念: 先看一下基本的页面结构:   如上图,在MixMVC3.1中有一个布局(Layout 一些框架称之为container)的概念,它表示页面的基本容器。 一般我们把head 元素,html body页面基础元素放到layout之中。还可以把一些基本的固定页面结构如上图黑色部分,放到layout之中。   2.Layout的编写: Layout文件一般存放在application/views/__layouts 目录下 通过controller中的$layout 变量定义流程中使用的layout文件。 一个常见的layout如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?php echo $this->systemName, ' > ', $this->pageTitle ?></title> <?php $this->stylesheet('admin.css'); $this->script(array('mootools/core-1.2.5.js', 'mootools/more-1.2.4.2.js', 'application.js')); ?> </head> <body>

文章分类 MixMVC, 经验分享

[MixMVC]MixMVC3.1 工具及示例

1.更新了框架自带项目的后台js库,升级为bootstrap 3.0,将mootools的依赖去掉。 最新的后台效果见 http://demo2.mixmedia.com/mvctools   2.更新一个Model构建器(其实这个大家已经知道,只是没有正式发布而已) http://demo2.mixmedia.com/mvctools/database 大家只要是在33.2上新建的数据表,都可以通过此工具生成框架Model文件。   3.更新基础widget的实例代码(分别是grid及form组件的使用方法)。 http://demo2.mixmedia.com/mvctools/sample/grid

文章分类 MixMVC, 经验分享

实现Responsive邮件的不同策略

本文由大漠根据Tina Ye的《Responsive HTML Emails: a Different Strategy》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/,以及作者相关信息 ——作者:Tina Ye ——译者:大漠 电子邮件变得相当的重要,它在我们身边随时出现。所以我们重新在思考FogBugz邮件通知的制作,我们知道我们必须在随时随地都能阅读,这意味着移动端上要做很多的优化。 在这篇文章中有很丰富的资源。Campaign Monitor提供了一份响应式设计指南,文中一步一步教您如何设计与制作响应式邮件(“EDM模板”)。Ros Hodgekiss早在2011年8月份就在Smashing Magazine发表了一篇From Monitor To Mobile: Optimizing Email Newsletters With CSS。MailChimp 发表了移动电子邮件的最佳实践相关技巧。如果你不想阅读这么多文章,那你么可以花点时间阅读Litmus团队根据自己产品总结的一些响应式邮件制作的经验。 但是,有一个小问题,上面所有文章中,他们都提倡使用媒体查询功能。   媒体查询的难处 媒体查询在桌面浏览器上得到完美的支持,但至今仍然有很多电子邮件客户端无法识别媒体查询。其中最受欢迎的手机邮件客户端是Android和iPhone的Gmail,但仍然无法支持媒体查询。没有媒体查询检测设备和重新配置相应的布局,用户可能很难看清移动设备上的内容(因为文字太小了),像这样: 一个移动端的设计策略,并不能解决一个最受欢迎的移动端电子邮件客户端,这不能称得上是一个很好的策略。所以我们在想…如果我们采用另一种不同的方法呢? 一个布局来控制一切 大多数的移动端电子邮件设计文章还是让你认为“不同的屏幕采用不同的布局”。例如,为桌面端电子邮件客户端设计一个两列布局,然后到移动端电子邮件 客户端时调整为单列布局。这种策略在很大程度上是依赖于媒体查询检测设备宽度,然后由内容流,减少,或隐藏给i后个章节标题来采用适当的布局。当媒体查询 支持仍然是如此参差不齐的情u情况下,你可以看到什么,这将是一个问题。 因此,不能依靠媒体查询来修改布局,我们认为,“为什么不设计一个布局,在所有屏幕的尺寸下看起来很不错呢?” 不可能吗?不,这是有可能的。 移动端第一 我的灵感来源于Luke Wroblewski的移动端第一的方法。在这里,首先要考虑到是极限制(移动端的极限性),然后才开始设计。毕竟,将一只小猫装入一个大罐子中要比一个大的猫装进一个小罐子中来得轻松。不管怎么说,这是一个伟大的设计哲学,他让我们的最终设计达如何达到我们所有的差异。 我们开始在质问,什么布局能在移动端上很好的工作?回答我们的是“单列布局”。 单列布局,我的意思是,主要的内容流都是向下的,而不是两个向下和并列的。并列的内容在小屏幕下要重新回流。相比之下,一个直线向下的文档流意味着内容可以自适应水平方向的空间。瞧,在任何尺寸下的一列布局。

文章分类 前端技术, 经验分享

微信公众平台API接口SDK

相信很多同事都已经有了,还是发个post吧。 这个是在做飞镖机服务的时候开发的微信SDK,支持高级收费接口。 SVN地址: http://192.168.33.6/svn/sam/wechat_sdk 文件说明: API.php 高级接口的API(收费) Auth.php OAuth用户认证接口(收费) Wechat.php 基础回复接口  

文章分类 新品尝鲜, 经验分享

关闭Skype 80端口占用

 1.进入Skype找到工具 =>选项:   2.找到 高级  => 连接,去掉“将80端口与443端口作为接入连接的备用端口” 勾,然后重启Skype即可。  

文章分类 新品尝鲜, 经验分享

[转]CSS减肥工具 — CSS Usage

前端构建工程师经常会遇到随着网站产品的规模扩大、产品数量、日常专题上下线等情况,造成网站的CSS慢慢变得臃肿从而影响了网站的用 户体验,这种情况下,给网站CSS文件减肥类似于海底捞针的大工程,因为稍不留神,一个不经意的删除,就会造成线上的产品的事故。下面我们就给大家推荐一 款CSS减肥的工具–Firefox插件 CSS Usage.   首先,我们需要安装Firefox(猛击此处下载),或者确定你已经安装的版本已经高于3.1; 第二步,安装前端开发人员最普及的开发工具 Firebug; 第三步,安装CSS Usage 0.2.2(写此文时的版本); 第四步,在浏览器中打开我们要优化的页面(本地的页面也可以),点击右下角的firebug小图标,打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先我们来分析最上面的三个功能按钮的使用 Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况. Clear: 清除扫描结果,但我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始我们的扫描. AutoScan: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率. 当我们点击Scan按键后会有什么样的情况呢?我们以 独臂老宋的博客为案例http://blog.sina.com.cn/laosong11 点击Scan之后, CSS Usage会对当前的页面HTML和样式进行扫描,如下图 下面我们展开一个内联样式 我们能看到这一句Line CSS Selector Seen, Seen before, Unseen, :hover,告诉我们” 列出CSS选择器的状态: 绿色–表示当前扫描看到的, 深绿色–的以前的扫描中看到的,

文章分类 前端技术, 经验分享

[分享]Ghost 基於NodeJS的博客系統

Ghost是一个基于Node.js 的博客系统,是WordPress的前员工 John O’Nolan 的 Kickstarter 众筹成功的项目。  最近该项目发布了第一个预览版本,我们也第一时间部署了项目Demo。 demo url: http://ghost.mixmedia.com   admin: http://ghost.mixmedia.com/ghost/ user:info@mixmedia.com password:mixmedia9398

文章分类 新品尝鲜, 经验分享

自定义Post Type 实例二 – By piklist

      接上次实例,因为lanegie 项目中的category和tags都是自定义的,所以也用piklist来实现,当中的用到piklist的add_more属性,在新版本中还存在问题(有待解决) 过程中,我们用到settings保存category和tags,然后整合到上次教程中的新建的Make UP Series metabox 并设置为多选和选取相应的series 而category即与settings的category相挂勾,当setting保存时,更新post type中的category(这样不用自己手工添加category。 setting效果图一: 上图根据lanegie项目经验,通过piklist的add_more可以添加category和series,然后两个seletc选项中,就是勾选相应的series,然后在post type的Make UP series metabox中显示。 category效果图: 上图中就是setting保存后,自动加进的category一共3个。这里运用的技巧就是:要勾一个action hook,来实现添加! add_action( 'update_option_series-setting', 'add_new_category'); function add_new_category(){ $catArr = array(); $seriesObj = get_option('series-setting'); foreach($seriesObj['categorys'] as $cat){ if(is_string($cat['en_cat'])) { $catArr[] = $cat['en_cat']; } else

文章分类 Piklist, 经验分享 标签: ,

自定义Post Type 实例一 – By piklist

    主要是结合Piklist做个post type实例,当中用到了新版本0.8.0 beta4加进来的功能,还用metabox中的布局templates,自定义列表显示的字段(这里有点不完善,我修改了下原码,到时再向作者反应情况)。      以laneige项目中三大系列Make up为例,建个post type,这样的好处是可以让大分类,层次清晰方便管理。 将要生成的菜单图: 效果图一:       上图一共加进两个metabox,右上角Make UP Image是新版本加入来的metabox,而编辑器下的Make UP Info是普通的metabox,不过它用到了布局,要想达到上面效果,这奇芭写法实在是坑爹。 效果图二: 上图完成重定义显示列表字段名,这样显示比较直观,缩略图、描述、和其他单位、价格信息都显示了。这里改了下原码位于piklist目录下的includes\class-piklist-cpt.php中的328行: return array_merge($columns, self::$post_types[$post_type]['edit_columns']); 改为: return self::$post_types[$post_type]['edit_columns']; 之所以这样改,是因为本身是自定义字段例显示,就不需要原来的存在。原码合并数组中,会造成布局达不到自己想要输出的顺序(也许是我写法问题,有待求证) 代码就不贴了,打包插件下载,传送门: post-type-demo

文章分类 经验分享 标签: ,