分类目录归档:技术

jQuery在DOM中添加元素

学习jQuery使用的测试页面代码如下,后续的继续学习中如无变化则以该文档为测试练习文档,练习时jQuery的版本为1.11.1,其所在路径与测试页面相同,该系列文档为《深入PHP与jQuery开发》的阅读笔记及总结。

    
    
    
      Reading Test Page
    
    
      
Hello World!
      
Another paragraph, but this one has a class.
      
This is a span inside a paragraph.
      
Paragraph with an id. 
         And this sentence is in a span.
      

      
Sign Up Form

append() / appendTo()

作用:在目标元素内之后添加元素
区别:由目标元素调用 / 由新建元素调用
示例:

    //append()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("body").append(para);

    //appendTo()
    $("

", {
       "text" : "I'm a new paragraph!",
       "css"  : {"background" : "yellow"}
    }).appendTo("body");

prepend() / prependTo()

作用: 在目标元素内之前添加元素
区别: 由目标元素调用 / 由新建元素调用
示例:

    //prepend()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("body").prepend(para);

    //prependTo()
    $("

", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    }).prependTo("body");

after() / insertAfter()

作用: 在目标元素外之后添加元素
区别: 由目标元素调用 / 由新建元素调用
示例:

    //after()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("p.foo").after(para);

    //insertAfter()
    $("

", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    }).insertAfter("p.foo");

before() / insertBefore()

作用: 在目标元素外之前添加元素
区别: 有目标元素调用 / 由新建元素调用
示例:

    //before()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("p.foo").before(para);

    //insertBefore()
    $("

", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    }).insertBefore("p.foo");

制作漂亮的Android应用图标

本文翻译自Android Developers博客
原文:Making Beautiful Android App Icons
作者:Roman Nurik

对于一般用户而言,主屏启动图标(有时候又叫应用图标)会带来用户对该应用的第一印象,随着手机跟平板高分辨率的普及,将应用图标做的精细和高质量就变得比较重要。要做到这样,请确保给你的应用制作XHDPI(320dpi)和XXHDDPI(480dpi)的图标。

在制作应用图标时,除了应用图标指南中的规范外,也请遵循下面这些同样重要的规范:

  • 应用图标为48dp大小的方形,并需要提供MDPI、HDPI、XHDPI与XXHDPI分辨率大小,如果不能全部提供,至少也应该提供XHDPI与XXHDPI分辨率大小;
  • Google Play中展示的512px大小的图标除了展示的小细节之外应该和应用图标保持一致;
  • 应用图标应该专门针对Android进行设计,可参考Pure Android指南中提到的,不要从其他平台照搬视觉元素和样式;
  • 应用图标应该是三维立体的,前视图,俯视时有一定的角度的透视,以便让用户感受到立体的存在;
  • 应用图标应该有明显的轮廓,尽量选择独特的形状,避免使用简单的方形或圆形图标;
  • 总体上应用图标应该简洁明了,但在局部也要有丰富的细节;(例如:精细的边缘效果、渐变、纹理等)
  • 应用图标应该使用浅背景,不要太暗或视觉对比太大,比如图标阴影部分;
  • 应用图标应该包括0dp-3dp的内边距,利用不同的内边距达到视觉上的一致性。

需要注意的是对于平板和大屏幕设备,其对于应用图标分辨率的要求要大于其自身分辨率,应该尽可能提供高分辨率的应用图标。举例来说,如果一个具有XHDPI屏幕的平板,则其对应用图标的要求需要达到XXHDPI级别的分辨率。

从写代码中找到乐趣

大概是从7月中下旬开始,每天业余时间会尽量分配一点时间写写代码,主要是自己还真是好这口,能够悠然自得的享受书写代码所带来的乐趣,当然发现这点经过了想当长时间的自省与反思,结合自己也一直在这个行当中从业,如果说能够在一定的时间做些什么的话,无疑写代码对我来说是一件相对靠谱的事情。

从开始到恢复战斗力相对比较缓慢,至今仍在途中,在对基本知识进行一段时间熟悉之后,从8月6日开始写一个具体的应用。工作日相对写的较少,周末大块的时间内写的相对多一点。

晚上思路有点不顺畅,就审查代码,突然想看看这些天写了多少代码,就写了段脚本统计了下代码行数,去除了空行,没去除注释,一共有4010行,大概平均每天230行多点,刨除注释及大括号等,应该差不多在130-150行/天这个样子。既然思路不顺畅,那么就该总结梳理一下这段业余时间的工作。

先来总结一下这个应用的总体设计,实现简单的MVC模式,通过Application作为路由处理请求,请求对应的功能模块由相应的控制器与模型进行交互,模型与实际数据库进行交互,最后由控制器返回View渲染输出。

设计图

依据设计对照相应的文件目录组织概要为

目录组织

大部分功能基本上已经实现,随着代码编写的过程,凸显出很多很细节上的东西,仍需进一步进行处理与完善,同时发现很多不熟悉的东西,咋一看好像能挥舞两下,但就其细节往往下手很慢,这是不熟的表现,例如在前端css部分针对css3中的很多新特性用起来非常的不顺手。同时也对很多php的函数及用法也不是很熟,这部分唯有通过长时间的锻炼慢慢恢复提高,还有很多东西都需要逐步的掌握提高。

通过这段时间的代码编写还是有不少收获的,同时也是很有乐趣的。比较有意思的地方在于能够通过代码验证实际的业务逻辑,这是蛮有意思的,因为在验证的同时会促进你进行思考,进而获取相关行业领域的知识,有助于拓宽视野。举例来说,假如要写一个工资管理的应用,那势必要了解现在工资计量的方式都有哪些,税收是怎么处理,社保是怎么处理的等等工资管理领域的知识。纯粹的掌握一门编程语言是毫无意义的。

写代码的过程也是一个创作过程,也是一个能够锻炼人心态的过程,因为会随着时间的增长需要补的坑会越来越多,这是一个常态的的事情,同时也是很枯燥的事情,能够坚持下来对于做其他事情均会有帮助。

接下来要做的主要包括对于字符校验等安全相关进一步在应用中加强,前端的css与js的进一步完善,业务逻辑严密性的进一步检查及数据处理部分相关代码的实现,然后进一步重构代码,抽取出来更加通用的部分以供以后使用。

 

 

本机使用.htaccess文件Apache配置

在本机调试PHP代码,使用.htaccess文件出现500 Internal Server Error的错误,修改Apache配置后即可正常使用,配置包含两部分:

1、开启rewrite_module

取消前面的注释。

LoadModule rewrite_module modules/mod_rewrite.so

2、设置AllowOverride属性

将你的目录或者别名配置中的AllowOverride修改为All。

AllowOverride All

修改完配置后重启Apache即可正常使用.htaccess文件。

php学习练习(2)-微信版宝宝睡前故事

小的功能需求在生活的周围存在很多,这些功能需求的编程实现是学习的一种良好方式。对于给孩子读睡前故事是现阶段我这个家庭的需求,买了不少故事书,也有读,就想着将这些故事放到手机上也是一个不错的选择。

时下比较火热的「微信」是手机上呈现的一个不错的方式,于是着手规划这个小的功能需求,这个小的需求分为两部分,第一部分是服务器端对于故事的组织与管理;第二部分是服务器端与微信公众号之间的接口实现。

服务器端需要一个存储故事的数据库,用于存储故事数据,一组页面及其脚本来完成故事的管理,完成对应于数据库的ADU相关操作。剩下的就是与微信的接口部分,通过微信公众号的自定义菜单获取每日睡前故事,通过脚本依据当日信息组成微信公众号的图文信息,点击后展现故事。

最终的阅读操作如图所示「如果你也有这样的需求,可通过微信搜索smallsoftware关注即可使用,也可在微信中扫描本Blog右侧二维码直接关注」:

babystorys

微信接口这部分主要是从数据库中获得数据,然后组织成图文信息即可,根据微信自定义菜单的KEY完成组装即可。

$postStr = $GLOBALS["HTTP_RAW_POST_DATA"];
if(!empty($postStr)) {
  $postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
  $fromUser = $postObj->FromUserName;
  //详细请参看微信公众帐号开发接口文档
  //...
  $fromMsgType = $postObj->MsgType;
  //...
  if($fromMsgType == "event") {
    $formEvent = $postObj->Event;
    if($formEvent == "CLICK") {
      $eventKey = $postObj->EventKey;
      if($eventKey == 'YOUR_KEY') {
        //取数据
        //组织图文信息数据
        //输出
      } else { //... }
    }
  }
//......

服务器端包含故事的添加、修改、删除、查看,用于后台对于故事的管理。使用了Bootstrap前端框架的部分内容,具体的结构如下。

babystory archite

数据库类基于PDO,故事类继承数据库类,完成故事的数据相关操作封装及故事的展现,admin类完成权限和管理的封装,前端页面通过init入口完成对于数据的管理工作,init入口部分完成数据的初始化工作与上下交互操作。

没有其他可供的选择,每天一篇睡前故事,对于选择性故事的定制阅读及过往的查询不支持,对于用户阅读这部分的统计也没有完成,可以说留下了不少的坑等着填。

至于微信自定义菜单,根据其接口文档中的说明,先要由appid和secret通过一个URL用Get方式获得AccessToken,然后将准备好的菜单和获得的AccessToken通过一个URL用POST的方式提交数据,从而创建自定义菜单。

<!--?php
  class WechatMenu {
    private $_appid = "";  //你的appid
    private $_secret = ""; //你的secret
    function __construct($menu) {
      //先获得AccessToken
      $result = $this--->getAccessToken();
      if(array_key_exists('errcode', $result)) {
       throw new Exception($result['errmsg'], 1);
      } else {
         $url = "https://api.weixin.qq.com/cgi-bin/menu/create?access_token=" . $result['access_token'];
         $result = $this-&gt;Post($url, $menu);
         if($result['errcode'] == 0) {
           //ok
         } else {
           throw new Exception($result['errcode'], 1);
         }
      }
    }
    
    private function Post($url, $data) {
      $ch = curl_init();
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
      curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
      $data = curl_exec($ch);
      curl_close($ch);
      return json_decode($data,true);
    }

    private function Get($url) {
      $ch = curl_init();
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
      curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
      $data = curl_exec($ch);
      curl_close($ch);
      return json_decode($data,true);
    }

    private function getAccessToken() {
      $grant_type = "client_credential";
      $appid = $this-&gt;appid;
      $secret = $this-&gt;secret;
      $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type={$grant_type}&amp;appid={$appid}&amp;secret={$secret}";
      $result = $this-&gt;Get($url);
      return $result;
    }
  }
?&gt;

调用 (1) 生成json格式的菜单数据 (2)new WechatMenu($menu);

wechatmenu

-EOF-