分类目录归档：Web 开发

将自己网站的搜索功能加入到Chrome Tab中

Code、HTML 类别、Web 开发、Web 类别、

在使用 Chrome 浏览器的时候，你肯定会发现，在地址栏输入 google.com, bing.com 等网站时，右侧会出现按 Tab 进行搜索的功能，免去了先进入页面再进行搜索的步骤。如果你也想要此功能，那就继续看吧~

实现原理

怎么让浏览器知道你的网站有搜索功能？

非主动添加情况

在使用 Chrome 访问一个网站时，Chrome 会先查看有没有定义 OpenSearch XML，如果没有的话，会在网页中找有没有这样一个表单：

  1. 表单以GET方式提交（POST不可以）；
  2. 表单的提交url为HTTP协议的（HTTPS不可以）；
  3. 表单没有附加onSubmit事件（确保提交过程不被用户代码干涉）；
  4. 表单中仅包含一个input输入框，而且类型为text（其他类型的都不可以，多余的控件也都不可以）

如果有这样一个表单，Chrome会认为这是一个搜索框，并根据这个表单的信息推断出这个网站的搜索方法。具体可以查看 Chrome 文档说明。

主动添加情况

如果 Chrome 没有自动识别上，我们只要遵循 OpenSearch XML 协议告诉 Chrome 即可，而且配置方法简单，无需对服务器改造。

前提条件

你的网站必须有搜索功能，且搜索链接较为固定，例如：

// 我的网站搜索格式
https://www.nousbuild.org/search/?q=搜索词

// Bing 的搜索格式
https://cn.bing.com/search?q=搜索词

// Google 的搜索格式
https://www.google.com/search?q=搜索词

// Baidu 的搜索格式
https://www.baidu.com/s?wd=搜索词

即，只要替换 关键词 的内容，即可进行搜索。

OpenSearch 协议

OpenSearch 是用于共享搜索结果的简单格式集合，在 Github 项目中，你可以查看到最新的、详细的说明：点击此处

截至此文章发布，目前最新的协议版本是 OpenSearch 1.1 Draft 6，请尽可能的查看最新说明。

实现操作

下面开始如何操作吧。首先在 首页 <header> 处添加一条 <link> 声明，仅仅在网站首页添加即可：

<link rel="search" type="application/opensearchdescription+xml" href="http://www.nousbuild.org/opensearch.xml" title="SA Search">

你只要修改 title=”网站名称/搜索引擎名称”， href=”xml文件的地址” 即可，建议使用绝对连接（即使支持https协议也建议写成http协议）。

接下来就是新建一个 XML 文件（opensearch.xml）：

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
	<ShortName>SA Search</ShortName>
	<Description>Search SA Website</Description>
	<Url type="text/html" method="get" template="http://www.nousbuild.org/search/?q={searchTerms}"/>
</OpenSearchDescription>

我只定义了三个属性，ShortName 表示搜索引擎的名字，Description 表示搜索引擎的描述，Url 表示刚刚说的你的固定搜索格式，你只需将上面说的 关键词 替换为 {searchTerms} 即可 （同样，即使支持https协议也建议写成http协议）。

到此，大功告成，上传更新即可。

除了此方法定义外，还有 JavaScritp 定义当方法等，你可以自行继续阅读官方文档。

继续阅读将自己网站的搜索功能加入到Chrome Tab中 →

CityWeather小程序问答

Code、JavaScript 类别、Web 开发、Web 类别、小程序开发、

城市天气 CityWeather，一个简约风格的世界主要城市的天气查询小程序，是微信讨论组中分享天气的极佳途径，下面来看看这款小程序的开发过程吧～

城市天气 CityWeather 是我开始学习微信小程序开发的第一款 Mini Program，选择从一个简单的天气小程序入手。你也可以从 Udacity 上学习次小程序：点击查看

天气程序需要什么样的功能？

市面上的天气应用或小程序很多很多，但随着应用/小程序不断更新，这些天气应用变得就比较臃肿了，比如一些天气应用/小程序还添加了广告、应用推荐、打赏、账号登录等七七八八但功能，完全脱离了应用/小程序本身。一个好的应用/小程序，就应该在它该出现的时候出现，不需要的时候就不出现。

城市天气 CityWeather 就是这么一款简单的天气小程序，专注于天气本身，一款插画风格的可爱天气小程序，给你每个季节、每个天气应有的“温度”。开发者 Mickey Wu

社么样的天气显示最直观呢？

整体UI设计，当然是插画风格啦！简约、可爱的天气插画背景，让你直接看图片就能直观的看到当天的天气。

因为天气情况很多，最基础的天气就是譬如 晴、多云、阴、小雨、中雪 等常规天气，还有 微风、和风、大风 等刮风天气，当然还有一些极端天气 沙尘暴、浮沉，甚至是代号为999的，只有会在世界末日中才会出现的 未知天气。目前的部分天气素材来自于Udacity以及网络。

小程序如何内容布局？

第一页UI采用上下两栏设计，上部将近60%的区域用来显示当前天气以及最具特色的天气背景插画；第二页UI采用列表样式布局，显示未来7天天气预报。

当然，未来可能会在增加一个页面用来显示当前天气的风速、日出日落时间、空气质量、紫外线强度等内容。

如何设计好的图标？

应用/小程序 的图标可谓第一脸面，用户最先看到的必然是小图标，所以一个好的图标对于应用/小程序的推广有着举足轻重的作用。如何在众多天气应用/小程序图标中脱颖而出？

当然是在明确主题的同时，美观、简约、有特点，这样能让人第一眼留有印象。

小程序开发

这一步骤是坑最多的，尤其是微信小程序开发工具的bug也非常多，经常代码是正常的，但是模拟器卡死或没有应用的效果，macOS原生中文输入法有时也会出问题，输不进入字符等一系列问题。

我也非常建议学习小程序开发的你，去Udacity上跟着一起制作：开始学习

还有一些历史问题，一些淘汰的函数和接口也得自己排查，比如跳转页面的 wx.openSetting 接口：

小程序推广与分享

城市天气 Weather City 的官方页面：点击进入

城市天气 Weather City Github 项目：点击进入

未来也会新增其他主题的天气背景，增加一个当日详细信息页面，用于查看 空气质量、风速、紫外线强度、日出日落时间等；再或者，加入一个夜间模式也说不定哦，白天打开时显示白天的天气插画，夜晚打开时夜晚的天气插画，当然这都是未来需要做的事情啦。

使用手机 QQ / 微信扫描下方小程序码也可以观看哦~

继续阅读CityWeather小程序问答 →

PHP基于Linux服务器的随机选择

HTML 类别、JavaScript 类别、PHP 类别、Program、Web 开发、Web 服务器类别、Web 类别、、、、

和朋友们一起聚会、参加活动，有时候想制作一个小小的抽奖程序来分法纪念品？不知道午饭或晚餐吃什么？你需要一个随机选择工具，来帮助解决你的困难选择症 🙂

展示效果：Demogithub_link

为了基于Linux服务器实现可以实时调取摄像头并上传照片的效果，编写时采用了PHP嵌套HTML的方法，在HTML主页面框架的先前插入了以下的PHP代码：

<?php
 $dir = "images/";
 $img = "";
 if (is_dir($dir)){
     if ($dh = opendir($dir)){
         while (($file = readdir($dh))!= false){
         if( $file<>'' && strlen($file)>2 ){
             $img .= '"'.$file.'",';
                                            }
                                                }
                             }
  $img = substr($img, 0, ( strlen($img)-1));
                  }
?>
一、基于Linux服务器的实时采集图片

你可以访问演示Demo页面的下一个目录  /camera/index.php 来启用摄像头的功能。

二、JavaScript实现随机选择

原理上是使用了JavaScript来实现对 /images 目录下的所有照片参与随机的选择：

$(function(){
  
  var alldata = new Array(<?php echo $img;?>);
  var num = alldata.length - 1;
  var show = $("#show");
  var btn = $("#btn");
  var open = false;
 
  function change(){
   var randomVal = Math.round(Math.random() * num);
   var prizeName = alldata[randomVal];
   show.html("<img src='images/"+prizeName+"' />");
  }
  
  function run(){
   if(!open){
    timer=setInterval(change,50);
    btn.removeClass('start').addClass('stop').text('Stop');
    open = true;
   }else{
    clearInterval(timer);
    btn.removeClass('stop').addClass('start').text('Start');
    open = false;
   }
  }
  
  btn.click(function(){run();})
  
 })

以上代码中用深绿色标注出来的就是timer计时器，用这段代码来控制变换的速度；用红色标注出来的就是选择目录。

random-selection-page 继续阅读PHP基于Linux服务器的随机选择 →

使用视频做网页背景

Code、CSS3 类别、HTML 类别、JavaScript 类别、Program、Web 开发、Web 类别、、

使用简短的视频来替换以往的静态图片，可以使信息展现的更为丰富，也能给人们留下比较深刻的印象。

展示效果：Demogithub_link

 

注意考虑因素：
1) 视频应该设置为autoplay，但默认情况下应设为静音，或者不应该包括声音。

2) 视频应该显示是回落至浏览器不支持 HTML5 的静态背景图像的图像占位符。占位符图像也将在移动设备上使用背景，因为大多数的手机和平板电脑都不支持autoplay。Apple也在 WWDC17上 禁用了autoplay 属性。

3) 长度需要注意：太短视频能感觉到重复（像大多数这类的视频将设置为循环播放），时间太长而成为叙事归本身，因此值得要一个单独的设计元素。建议大约12-30秒的时长。

4) 可访问性是很重要：在视频上放置任何文本应在高对比度。用户应当能够轻松访问到 UI 控件以暂停视频;理想情况下，视频播放所要经过只有一次。 

5) 带宽是一个大问题。视频需要较小，而且尽可能有效地压缩。同时，它需要在不同的设备和他们相关的屏幕之间进行缩放。尽量保持视频大小小于 5 MB，理想情况下500KB左右为佳。

一、使用HTML5代码插入视频

<video autoplay loop poster="images/moon.jpg" id="moon"> 
<!--id保持一致-->
<source src="images/moon.webm" type="video/webm">
<source src="images/moon.mp4" type="video/mp4"> </video>

 二、全屏视频代码，引入CSS中

video#moon { /*id保持一致*/
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

注意：

对于不支持 HTML5 的浏览器，使用判断：

<!--[if lt IE 9]> 
<script> 
     document.createElement('video'); 
</script>
<![endif]-->

 之后还需将 video 标签插入到CSS中，来声明 video 是元素：

video { display: block; }

三、对于移动端的优化

特别是 iOS系统的设备，会拒绝HTML5视频的播放，需要用图片缩放来处理

将以下代码插入至CSS：

@media screen and (max-device-width: 800px) {
    html {
         background: url(moon.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}

这样就完成视频做网页背景的任务了！

继续阅读使用视频做网页背景 →