浏览模式: 标准 | 列表

    失误是那么的经常和不可捉摸,成功才是那么的引人注目。

    发布时间:2016-10-31, 11:32:11 | 评论:3 | 分类:默认分类

    人类探索太空史之8大尴尬事件

    刚刚过去的10月19号,随着欧空局的斯基亚帕雷利号探测器“轰”地一声在火星表面上留下人类的印记,地球上热心的居民又一次被告诫宇宙有风险,入行需谨慎。作为人类科学和技术的集大成,航天工程中的意外可谓恒河沙数,不论地面上计划如何周密,上天之后永远有足够多的变化导致事故。有些事故回溯起来让人们以泪洗面,以头抢地,不过在飞天半世纪里,也是有很多尴尬的,不那么痛苦的事件,单独拿出来倒是也能在严肃的科学界当做极客们的笑话。下面就列举八大尴尬的事故。

    第一、先锋号事故

    1957年10月4号发射的“人造卫星一号(Sputnik 1)”让苏联人的航天从0变成了1。尽管这个小卫星大小只有一个足球,还只能发射一种信号,不过其意义大于其功能这是毋庸置疑的。苏联人能把卫星放到轨道上,就能把核弹发射到西方国家任何一个角落,顿时西方人发现自己的天空都觉得陌生了,似乎在被渐渐染成苏维埃红。

    西方的灯塔国哪能咽下这口气。于是赶忙支起自己的先锋号火箭,准备在航天领域分离追赶。可惜这个先锋号真不是个东西,当时临近发射的时候还没通过验证。这就像在游园会里的那种穿麻袋跑步的小孩一样,不够这次还带了眼罩,一只手绑起来,鞋子钉在地上,然后旁边的苏联小孩短袖、短裤、钉鞋全副武装,还抢跑了一段。

    倒不是美国没有合适的发射载具,三军都有验证过的火箭,只是白左们不愿意看着军方的科技发射卫星,其实话说回来还是艾森豪威尔自己作。1957年是全球地质年,力求用最新的科技探测全球地形。艾总统明确说明,这个先锋一号卫星啊,是为了民用项目,和平的项目。所以用军方的导弹发射民用的火箭,想想都是在打自己的脸。另外还有就是艾总统想太多,觉得卫星肯定会飞跃苏联的领空,毕竟在轨道上嘛。如果是军方的,会不会惹苏联人抗议呢?前一阵子自己拍过去的气球和飞机都太多了,再发个火箭岂不是宣战?这次还是保留民用性质吧。

    其实先锋火箭一开始也是海军设计的,不过改为民用了,加了推力和操控。先锋1号卫星相比苏联的第一颗要小得多,只有1.4公斤,只有西柚那么大。不过小归小,里面的东西不少,有一对发射机,温度计,水银电池,甚至还有几片小太阳能板。上轨道后,它不光能发布简单的信号,自己的温度和参数也能发回来。

    前提是能发射上去。

    1957年12月6号,苏联发射后的两个月,美国人骄傲的吧自己的先锋火箭树立在卡纳维拉尔角的新发射场。随着倒计时数到0,巨大的火焰从火箭的菊花里喷涌而出,巨大声响中火箭直直上升,向着太空飞去。飞了大约1.3米,先锋号觉得太空不值得自己大费周章,干脆就摔了下来。燃料罐在巨大的重力压迫下破损,上层火箭倾倒在发射台上,整个发射台一片火海。

    先锋一号卫星倒是很欢快地跳到发射台的旁边,边自嗨边记录着自己的温度。

    第二、双子座9A

    1966年,东西方的太空竞赛进入白热化。为了肯尼迪的“此旬嫦娥蟾宫会”,NASA决定应该教一下宇航员们在轨道上对接交会。于是就有了双子座计划,目的是让两人在太空中生活14天,并且其中练习出舱行走和航天器交会。

    其中最有戏剧性的是双子座9A任务。这任务一开始就不平常。本身计划练习对接的无人目标卫星没有发射成功,在天上炸了。然后原定的两人组的大组长在飞行训练中坠机了,临近发射才告诉候补航天员顶上。不过候补航天员不简单,是后来著名的托马斯·斯坦福和尤金·谢尔南。

    为了赶进度,NASA临时发射了一个对接目标航天器ATDA(Augmented Target Docking Adapter)。这次发射倒是顺利,ATDA进入了离地259公里的轨道。入轨后,参数表明有个东西出了意外,什么该脱落的没脱落。因为没有造成意外,所以任务组表示宇航员上去看看。

    两天后,1966年6月3号,双子座9A发射。发射顺利,变轨顺利,宇航员工作正常,雷达接触ATDA,双子座追赶ATDA。直到距离ATDA 900英尺的时候,航天员发现玩儿脱了,ATDA在发射的时候整流罩没脱离成功,两片的整流罩卡在了ATDA上。有一片打开一半,另一片被打开的带子卡在ATDA上,成了这个样子。

    目标器变成了太空鳄鱼,对接演练自然是完成不了了。最可惜的是,这个整流罩看着就像是敲一下能脱离的,两名宇航员也训练过出舱行走。尽管两名宇航员在任务中不断请愿,说自己只要开着双子座弄一下就可以造福后面的同志了,NASA还是觉得整件事情风险太大,取消了所有的任务。要是两位胆大的宇航员成功敲掉整流罩,就真的功德无量了。

    第三、阿波罗登月模拟器

    月球登陆前最重要的一个演练,就是,练习怎样登陆月球。月面着陆这最后一步怎么演练呢?怎样才能在1个G的环境里模拟1/6G的行动呢?电视模拟器没有那种直观的感觉,所以还是要飞的。NASA拜托贝尔飞机公司做了一个月面着陆测试载具(LLRV),也没说要做成怎样。贝尔公司也努力,14个月就把LLRV做出来了,1964年到1968年给阿波罗宇航员来训练着陆,这个时候真正的阿波罗着陆器还没建出来呢。

    LLRV这个名字太长了,大家干脆叫它“飞行床架”。要说这个飞行床架也真不是个东西,和真的床架也没差了。四只脚是铝合金支架杵着的,驾驶员是坐在露天座椅上的,中间在云台上安装了一个通用电气的CF700-2V的涡扇引擎。计划是用这个4200磅推力的涡扇引擎把整个床架飞到1200米的高空,然后减油门,模拟1/6的下降重力。期间宇航员可以用床架上的两个过氧化氢火箭模仿下降任务的细节,直到整个床架降落在地上。

    理想很丰满,但当时的电控系统烂得一比。虽说床架能爬升,悬停和平移,可这都是力气活,稍不留意就操纵过度,在离地低的地方很容易机毁人亡。事实上也真出过坠毁的事情,那是在1968年的5月6日,休斯顿旁边的艾林顿空军基地。LLRV床架在例行训练的时候出现了推进剂泄露事故。这个时候床架离地200英尺,大约60多米。推进剂泄露后操控面也失效了,床架开始歪向一边,迅速下坠。正在训练的宇航员没有一丝丝犹豫,立刻拉动弹射座椅,在坠地前几秒钟弹射升空,4秒后降落在燃烧的残骸旁边。然后这位宇航员跟没事儿一样回办公室写报告去了。

    顺便说一句,这个宇航员是后来阿波罗11号的指令长,尼尔·阿姆斯特朗。

    第四、天空实验室

    看到这里极客们都知道为啥了。作为NASA历史上出名的阿斗,天空实验室可谓身世浮沉。1973年5月14日在截了一半的土星5号上发射。作为无人载具的天空实验室的唯一工作,就是上天后打开太阳能版,准备好舱室等着宇航员来。结果这一简单的工作天空实验室都没做好。

    这次出名的发射失误首先导致天空实验室的隔热帘子被扯掉。这个帘子不单单是保护加压舱不会被微流星破坏,更主要的是反射过多的太阳光,维持舱内温度不至于太热。扯掉的帘子碎片还挂掉了左边的太阳能板,卡住了右边的那半边。所以作为一次无人发射任务,天空实验室算是失败了。

    等5月25号第一批宇航员来到天空实验室的时候,他们带了一个神奇的修补工具,一把太阳伞。因为过高的温度把舱内的塑料制品烤焦了,宇航员们第一次进入的时候都是带着防毒面具的。他们把这一把大太阳伞从一个工具舱门里推到外面,然后旋转打开,遮蔽了大部分的阳光,慢慢舱内的温度就下来了。之后他们又开展了几次舱外行走,用锤子敲掉了卡住的残片,强行修复了右半边的太阳能板,于是天空实验室勉强能开始工作。

    你以为天空实验室多舛的命运就这样了?图森破了。1974年2月8号,最后一批宇航员离开天空实验室后,大家想着要不赶紧把航天飞机开发好,送个助推器上去,吧天空实验室推到更高的轨道上?结果翻翻黄历,夜观星象,一个英国数学家预言说1970年代可是太阳活动高发期,大气层会由此膨胀,会增加天空实验室的阻力(你以为太空里都是真空吗,图样了吧),然后就不知道能不能再撑到航天飞机发射了。

    NASA拿着黄历一看,我去真的。增厚的大气层不光会让天空实验室早日坠落,而且还会以一个诡异的姿势坠落,NASA还没有办法操控。虽然碎片砸到某个人只有6000亿分之一的概率,不过飞过一个百万人以上的城市则有1/7的概率。NASA赶紧打开天空实验室的操控平台,给通讯设施充好电,一边改变轨道一边计算可能的着陆点,直到耗尽最后一点燃料。

    NASA一开始想瞄准着印度洋下去,结果最后一刻燃料比预想的少了那么一丁点,天空实验室就坠毁到澳大利亚的珀西了。倒还好,没有人受伤,不过负责捡残骸的澳大利亚环保局给NASA开了一个400美元乱丢垃圾的罚单,NASA还拖欠了30年。想想NASA给珀西居民上演一场全世界最大烟火秀,这400美元还要倒付?

    第五、哈勃望远镜

    啊,哈勃。1990年代哈勃被认为是最大的装饰工程,因为它几乎是NASA有史以来耗资最大的单个任务之一,耗资从一开始的4亿蹭蹭跑到10亿多,结果照片也没拍几张好的。就像你花了买佳能1D的价格,结果卖家给你送来一个小孩玩的针孔相机,箱子里还多放了几个石头。

    幸运的是,地上的科学家立刻就发现问题所在,是主镜头的一个小瑕疵导致了一点形变,所以聚焦一直是个问题。工程师在地上做了一幅给哈勃的眼镜,让1994年奋进号的宇航员带上了太空。这个眼镜全称是“太空望远镜同轴光学矫正器”,直接由主刀宇航员塞进哈勃的肚子里。

    第六、火星气候探测者号

    当公制单位一统天下,灯塔国还一如既往使用英治单位,直到撞了南墙。

    1998年12月11日,火星气候探测者号发射升空,前往火星探测其气候数据,并给“火星全球探测者号”和“火星极地登陆者号”充当和地球的中继站。从发射到变轨各种指令都没有问题,只剩下火星载入轨道了。正当大家准备欢呼的时候,气候探测者号在1999年9月23号突然就和地面失去联系了。后来大家发现是探测器太低,冲进火星大气层烧掉了。

    为啥会这样呢?原来是NASA在阿波罗之后就改公制单位为主了,在设计这个气候探测者号时也是用公制单位计算每次点火时间和力量的。但是承包商洛克希德公司是英制单位的死忠粉,在计算和设计零部件的时候是英制单位。结果NASA说我要N牛·秒的推力,洛克希德的推进器给了N磅·秒,一下子给了多了3倍。然后火星载入轨道没进去,进到大气层里面了。

    所以说公制大法好,退英保平安。

    第七、起源号探测器

    起源号探测器是NASA在世纪初发射来探测太阳风粒子的探测器。从2001到2004年,起源号一切任务都完成得很出色,其主要任务是用密度最小的固体——气凝胶来抓住速度奇快的太阳风粒子,以便送回地面研究。收集任务结束后,气凝胶盘折进返回舱里,然后返回舱和探测器分离,回到地球。

    2004年9月8日,返回舱以秒速11公里进入俄勒冈州的上空。按原计划,空气阻力降低返回舱速度到接近音速,然后减速伞蹭蹭打开。不过为了防止降落后的污染,NASA决定使用冷战的“天钩”,即用直升机把正在下落的减速伞连着返回舱一起抓住,然后不接触地面带回实验室。

    又是一个理想丰满脑洞大的计划。返回舱进入大气层后,减速伞机构卡死。别说天钩了,直升机驾驶员只能眼睁睁看着返回舱从前面“唰”地飞过去。最后返回舱以时速311公里的高速径直砸到了尤他州的地面。坚固的返回舱舱体被砸破,想着花样保护的样本舱也破损了。

    还好尤他州的荒漠地不是很硬,返回舱只是砸开,没有杂碎。最后回到实验室的样本虽然有些污染,但是还是抢救回了一些珍贵的太阳风粒子。

    NASA发言人的厚脸皮在这次事件中被充分显现出来。他在事发当日说起源号是一次圆满的任务,胜利的任务。是,任务圆满完成,就是最后水花没压住。

    第八、猎兔犬2号

    最后的最后,让我们怀念一下故去的猎兔犬2号。这个火星探测器是有史以来最“草根”的探测器有着最励志的发展史和最可惜的结果。继承达尔文环球座驾(HMS Beagle,猎兔犬号)的衣钵,猎兔犬2号由英国开放大学教授科林·帕林觉博士带头,莱斯特大学研制,为了欧洲人对于火星的好奇和热情奔向红色的不毛之地。

    猎兔犬2号的牛逼之处在于,这是个完全的民间活动。尽管有几个大的航天公司的介入,如果没有帕林觉博士的牵头和带队,恐怕这个探测器永远没有办法升空。帕林觉博士为了增加公众对于火星的兴趣,甚至邀请Blur乐队为这次任务谱写了一首小歌,用来作为猎兔犬的呼号。连搭载用来校色的色板都是艺术家 Damien Hirst 手画的。

    最终整个项目成功筹款6600万英镑,只有2200万是从英国政府那里讨来的。这一点钱放任何一个国家的航天局里都是牙膏钱。但是凭借着这一点点钱,帕林觉博士他们制造除了一个33.2公斤的蛤蜊状探测器,为了是能方便在任何一面落地。落地后展开4片太阳能板,一个相机摇臂,一个岩石采集器,还有一个光谱分析仪。最后这个小探测器还有一个更小的“宠物”,一架系着绳子的小车,可以离开探测器母体几米,然后就需要拽回来了。

    2003年6月2日,猎兔犬2号搭载在欧空局的火星快车探测器上升空。在火星快车进入火星载入轨道前6天,猎兔犬2号脱离火星快车,在2003年圣诞节开始自己的大气层载入任务。

    然后就没音讯了。

    传讯,下议院听证,各种官僚事情弄了好多,大家还是不知道猎兔犬怎么就这么没了。猎兔犬2号之父帕林觉博士操劳过度,于2014年去世。去世后的几个月,2015年1月,NASA的火星侦察者号探测器发现了猎兔犬2号的着陆地,并且证明帕林觉博士的设计抵御住了大气层载入的高温和极端环境,成功着陆。不过着陆之后的事情就不是计划内的了。

    NASA和猎兔犬2号的班组商量后,讨论出了这样的一种情况。猎兔犬2号成功打开降落伞,缓冲气囊成功充气,着陆器成功接触地面。不过有着特殊气囊使用技巧的NASA有经验,他们说可能猎兔犬2号比原计划中弹跳更多次,或者弹跳更狠。弹起的气囊带着探测器可能再碰到降落伞,伞绳和气囊缠绕在了一起,也可能弹到气囊漏气了还在跳。总之是气囊泄气后,没有按照原计划收起来,结果在缠住了舱盖,还挡住了太阳能板受光。太阳能板没有光,就没有办法给探测器充电,于是乎猎兔犬就没能够向地球发信号了。

    想想大家冬天被被窝缠住的场景,可能和猎兔犬2号差不多吧。

    后记

    所以这些尴尬的事情我们学到了什么?老生常谈一点,就是说太空很神秘,宇宙探测很难,一点小细节的疏漏都能造成巨大的过失。实话说,回忆起这些曾经辉煌的失败,才能更加激励起现在的航天人们用更大的热情和更大的决心走好现在的一步步。正是因为过去,失误是那么的经常和不可捉摸,现在和未来航天事业的成功才是那么的引人注目。

    煎蛋 Atlas

    Chrome 问题 Adobe Flash 版本太旧,因此已被屏蔽

    发布时间:2016-10-28, 09:50:04 | 评论:1 | 分类:Linux

    Adobe Flash 版本太旧,因此已被屏蔽

    如果 Adobe Flash 无法正常运行,或者您在计算机上看到“
    Adobe Flash 版本太旧,因此已被屏蔽
    ”这条错误消息,请检查并确保您使用的是最新版的 Chrome,并且 Flash 也是最新版本。

    面向 Android 设备、iPhone、iPad 和其他移动设备的 Chrome 不支持 Flash。

    第 1 步:启用 PPAPI 插件。
    打开 Chrome。
    在顶部地址栏中,输入
    chrome://plugins
    Run code
    Cut to clipboard
      ,然后按 Enter。
      点击右上角的详细信息。
      找到“Adobe Flash Player”。
      在“类型:PPAPI”下方点击启用。

      第 2 步:确保 Chrome 是最新版本。
      您会在 Chrome 上自动获得 Adobe Flash Player,并且此插件会随着 Chrome 一起更新。

      在计算机上打开 Chrome。
      点击右上角的“更多”图标 更多。
      点击更新 Google Chrome。如果您没有看到此按钮,则表明您的 Chrome 是最新版本。
      点击重新启动。
      更新 Chrome 时遇到问题?了解如何解决 Chrome 更新问题

      第 3 步:手动更新 Adobe Flash Player。
      打开 Chrome。
      在顶部地址栏中,输入
      chrome://components
      Run code
      Cut to clipboard
        ,然后按 Enter。
        在“Adobe Flash Player”下方,点击检查是否有更新。
        返回含有 Flash 内容的页面。如果 Flash 内容没有自动下载,请点击“重新加载”图标 重载。

        管理员必读
        我们已在 Adobe Flash Player 中发现严重漏洞。它们本身已是攻击包的一部分。最新的 Chrome 版本已包含必要的更新。如果贵单位使用的 Chrome 会自动更新(建议),则您无需进行任何其他操作。不过,如果您因任何原因手动停用了更新功能,且 Flash 版本被视为不安全的版本,那么用户将看到 Flash 内容在默认情况下处于屏蔽状态,而且系统会显示信息栏提示用户进行更新。我们认为这种漏洞非常严重,因此请务必执行这项操作。

        作为管理员,您可以使用 AllowOutdatedPlugins 政策,选择禁止此默认屏蔽操作和信息栏消息。不过,这不是我们建议的做法,建议您最好还是将 Chrome 更新到最新版本。

        越墙

        一张GoPro照片背后的悲伤事实

        发布时间:2016-10-24, 18:05:49 | 评论:5 | 分类:默认分类


        印度尼西亚的婆罗洲八隆山国家公园,一只红毛猩猩紧紧抱住两棵缠绕在一起的树干,高耸在茂密的雨林树冠层之上。它目光如炬,盯着上方的树梢,准备采摘无花果作为今天的午餐。

        这张让恐高症者晕眩的照片让美国生物学家和野生动物摄影师Tim Laman赢得了伦敦自然历史博物馆所授予的年度野生动物摄影师的至高荣誉。在使用GoPro拍下这张照片前,Laman已经见过这只猩猩爬到树上摘无花果,并且成功预测它会再会来这里。Laman花了三天时间爬上树梢并架设了数台相机,当他看见猩猩开始爬树时,就站在丛林的地面上遥控快门。

        这张照片看起来岁月静好,但是整个“交织的生命”系列照片却令人不安,这组2015年的照片讲述了婆罗洲濒危猿类对抗干旱与森林大火的心碎故事。这些猩猩不得不离开天然的栖息地,很多年幼的猩猩被偷猎者捕获,并作为宠物非法贩卖。

        在河边,一只红毛猩猩和她的幼崽在躲避燃烧的丛林大火。Tim在船上隔着浓烟拍摄下这张照片。


        虽然婆罗洲野生动物依赖于茂密和丰富的热带雨林,但是这片地区季风气候在2015年被厄尔尼诺南方震荡现象所打乱,导致了长期干旱与森林大火。去年,野火摧毁了超过21000平方公里的猩猩栖息地。在卫星图片上都可以清晰看到烟雾和干涸的土地。

        人为纵火通常用作开辟棕榈油农场,同样是威胁猩猩栖息地的重要因素。旱情在全球变暖趋势不断加重,全球棕榈油的需求不断增加,两者相加意味着印尼野生动物面临的威胁可能会越来越大。

        2015年森林大火之后,西加里曼丹省的吉打邦成立了诸如国际动物援救组织这样的援救中心,一时间大量猩猩孤儿涌入了这里。一旦跟母亲分开,这些年幼的猩猩几乎不可能学会在丛林里独自生活了。以下是Laman拍摄的其他照片:

        护理人员带着一车只有一两岁大的婆罗洲猩猩前往森林中玩耍,它们将在那里学会基本的生存技能。


        这只一个月大的孤儿被当做宠物收养在西加里曼丹的一个村庄里。一名来自国际动物援救组织的兽医没收了它,并将其送往康复中心。


        幼崽会跟母亲一起生活超过10年时间。Laman在八隆山国家公园花了三周时间跟踪拍摄这对猩猩母子。


        Laman还使用了无人机拍摄了森林大火中的缓冲带。


        Quartz

        中文技术文档的写作规范

        发布时间:2016-10-21, 16:36:07 | 评论:0 | 分类:默认分类

        1.标题
        标题 层级 标题分为四级。 一级标题:文章的标题 二级标题:文章主要部分的大标题 三级标题:二级标题下面一级的小标题 四级标题:三级标题下面某一方面的小标题 原则 一级标题下,不能直接出现三级标题。 标题要避免孤立编号(即同级标题只有一个)。 下级标题不重复上一级标题的内容。 谨慎使用四级标题,尽量避免出现,保持层级的简单和防止出现过于复杂的章节。如果三级标题下有并列性的内容,建议只使用项目列表(Item list)。
        Run code
        Cut to clipboard


          2.文本
          文本 字间距 全角中文字符与半角英文字符之间,应有一个半角空格。 错误:本文介绍如何快速启动Windows系统。 正确:本文介绍如何快速启动 Windows 系统。 全角中文字符与半角阿拉伯数字之间,建议有一个半角空格。 不推荐:2011年5月15日,我订购了5台笔记本电脑与10台平板电脑。 推荐:2011 年 5 月 15 日,我订购了 5 台笔记本电脑与 10 台平板电脑。 半角的百分号,视同阿拉伯数字。 英文单位若不翻译,单位前的阿拉伯数字与单位间不留空格。 错误:一部容量为 16 GB 的智能手机 正确:一部容量为 16GB 的智能手机 半角英文字符和半角阿拉伯数字,与全角标点符号之间不留空格。 错误:他的电话号码是 13899912345 。 正确:他的电话号码是 13899912345。 句子 避免使用长句。一个句子建议不超过 100 字或者正文的 3 行。 尽量使用简单句和并列句,避免使用复合句。 写作风格 尽量不使用被动语态,改为使用主动语态。 错误:假如此软件尚未被安装, 正确:假如尚未安装这个软件, 不使用非正式的语言风格。 错误:Lady Gaga 的演唱会真是酷毙了,从没看过这么给力的表演!!! 正确:无法参加本次活动,我深感遗憾。 用对“的”、“地”、“得”。 她露出了开心的笑容。 (形容词+的+名词) 她开心地笑了。 (副词+地+动词) 她笑得很开心。 (动词+得+副词) 使用代词时(比如“其”、“该”、“此”、“这”等词),必须明确指代的内容,保证只有一个含义。 错误:从管理系统可以监视中继系统和受其直接控制的分配系统。 正确:从管理系统可以监视两个系统:中继系统和受中继系统直接控制的分配系统。 名词前不要使用过多的形式词。 错误:此设备的使用必须在接受过本公司举办的正式的设备培训的技师的指导下进行。 正确:此设备必须在技师的指导下使用,且指导技师必须接受过由本公司举办的正式设备培训。 单个句子的长度尽量保持在 20 个字以内;20~29 个字的句子,可以接受;30~39 个字的句子,语义必须明确,才能接受;多于 40 个字的句子,在任何情况下都不能接受。 错误:本产品适用于从由一台服务器进行动作控制的单一节点结构到由多台服务器进行动作控制的并行处理程序结构等多种体系结构。 正确:本产品适用于多种体系结构。无论是由一台服务器(单一节点结构),还是由多台服务器(并行处理结构)进行动作控制,均可以使用本产品。 同样一个意思,尽量使用肯定句表达,不使用否定句表达。 错误:请确认没有接通装置的电源。 正确:请确认装置的电源已关闭。 避免使用双重否定句。 错误:没有删除权限的用户,不能删除此文件。 正确:用户必须拥有删除权限,才能删除此文件。 英文处理 英文原文如果使用了复数形式,翻译成中文时,应该将其还原为单数形式。 英文:⋯information stored in random access memory (RAMs)⋯ 中文:……存储在随机存取存储器(RAM)里的信息…… 外文缩写可以使用半角圆点(.)表示缩写。 U.S.A. Apple, Inc. 表示中文时,英文省略号(⋯)应改为中文省略号(……)。 英文:5 minutes later⋯ 中文:5 分钟过去了⋯⋯ 英文书名或电影名改用中文表达时,双引号应改为书名号。 英文:He published an article entitled "The Future of the Aviation". 中文:他发表了一篇名为《航空业的未来》的文章。 第一次出现英文词汇时,在括号中给出中文标注。此后再次出现时,直接使用英文缩写即可。 IOC(International Olympic Committee,国际奥林匹克委员会)。这样定义后,便可以直接使用“IOC”了。 专有名词中每个词第一个字母均应大写,非专有名词则不需要大写。 “American Association of Physicists in Medicine”(美国医学物理学家协会)是专有名词,需要大写。 “online transaction processing”(在线事务处理)不是专有名词,不应大写。
          Run code
          Cut to clipboard


            3.段落
            段落 原则 一个段落只能有一个主题,或一个中心句子。 段落的中心句子放在段首,对全段内容进行概述。后面陈述的句子为核心句服务。 一个段落的长度不能超过七行,最佳段落长度小于等于四行。 段落的句子语气要使用陈述和肯定语气,避免使用感叹语气。 段落之间使用一个空行隔开。 段落开头不要留出空白字符。 引用 引用第三方内容时,应注明出处。 One man’s constant is another man’s variable. — Alan Perlis 如果是全篇转载,请在全文开头显著位置注明作者和出处,并链接至原文。 本文转载自 WikiQuote 使用外部图片时,必须在图片下方或文末标明来源。 本文部分图片来自 Wikipedia
            Run code
            Cut to clipboard


              4.数值
              数值 半角数字 数字一律使用半角形式,不得使用全角形式。 错误: 这件商品的价格是1000元。 正确: 这件商品的价格是 1000 元。 千分号 数值为千位以上,应添加千分号(半角逗号)。 XXX 公司的实收资本为 RMB1,258,000。 对于 4 ~ 6 位的数值,千分号是选用的,比如1000和1,000都可以接受。对于7位及以上的数值,千分号是必须的。 多位小数要从小数点后从左向右添加千分号,比如4.234,345。 货币 货币应为阿拉伯数字,并在数字前写出货币符号,或在数字后写出货币中文名称。 $1,000 1,000 美元 数值范围 表示数值范围时,用~连接。参见《标点符号》一节的“连接号”部分。 带有单位或百分号时,两个数字都要加上单位或百分号,不能只加后面一个。 正确:132kg~234kg 错误:132~234kg 正确:67%~89% 错误:67~89% 变化程度的表示法 数字的增加要使用“增加了”、“增加到”。“了”表示增量,“到”表示定量。 增加到过去的两倍 (过去为一,现在为二) 增加了两倍 (过去为一,现在为三) 数字的减少要使用“降低了”、“降低到”。“了”表示增量,“到”表示定量。 降低到百分之八十 (定额是一百,现在是八十) 降低了百分之八十 (原来是一百,现在是二十) 不能用“降低N倍”或“减少N倍”的表示法,要用“降低百分之几”或“减少百分之几”。因为减少(或降低)一倍表示数值原来为一百,现在等于零。
              Run code
              Cut to clipboard


                5.标点符号
                标点符号 原则 中文语句的标点符号,均应该采取全角符号,这样可以保证视觉的一致。 如果整句为英文,则该句使用英文/半角标点。 句号、问号、叹号、逗号、顿号、分号和冒号不得出现在一行之首。 句号 中文语句中的结尾处应该用全角句号(。)。 句子末尾用括号加注时,句号应在括号之外。 错误:关于文件的输出,请参照第 1.3 节(见第 26 页。) 正确:关于文件的输出,请参照第 1.3 节(见第 26 页)。 逗号 逗号,表示句子内部的一般性停顿。 注意避免“一逗到底”,即整个段落除了结尾,全部停顿都使用逗号。 顿号 句子内部的并列词,应该用全角顿号(、) 分隔,而不用逗号,即使并列词是英语也是如此。 错误:我最欣赏的科技公司有 Google, Facebook, 腾讯, 阿里和百度等。 正确:我最欣赏的科技公司有 Google、Facebook、腾讯、阿里和百度等。 英文句子中,并列词语之间使用半角逗号(,)分隔。 例句:Microsoft Office includes Word, Excel, PowerPoint, Outlook and other components. 分号 分号;表示复句内部并列分句之间的停顿。 引号 引用时,应该使用全角双引号(“ ”),注意前后双引号不同。 例句:许多人都认为客户服务的核心是“友好”和“专业”。 引号里面还要用引号时,外面一层用双引号,里面一层用单引号(‘ ’),注意前后单引号不同。 例句:鲍勃解释道:“我要放音乐,可萨利说,‘不行!’。” 圆括号 补充说明时,使用全角圆括号(),括号前后不加空格。 例句:请确认所有的连接(电缆和接插件)均安装牢固。 冒号 全角冒号(:)常用在需要解释的词语后边,引出解释和说明。 例句:请确认以下几项内容:时间、地点、活动名称,以及来宾数量。 表示时间时,应使用半角冒号(:)。 例句:早上 8:00 省略号 省略号……表示语句未完、或者语气的不连续。它占两个汉字空间、包含六个省略点,不要使用。。。或...等非标准形式。 省略号不应与“等”这个词一起使用。 错误:我们为会餐准备了香蕉、苹果、梨…等各色水果。 正确:我们为会餐准备了各色水果,有香蕉、苹果、梨…… 正确:我们为会餐准备了香蕉、苹果、梨等各色水果。 感叹号 应该使用平静的语气叙述,尽量避免使用感叹号!。 不得多个感叹号连用,比如!!和!!!。 破折号 破折号————一般用于做进一步解释。破折号应占两个汉字的位置。 例句:直觉————尽管它并不总是可靠的————告诉我,这事可能出了些问题。 连接号 连接号用于连接两个类似的词。 以下场合应该使用直线连接号(-),占一个半角字符的位置。 两个名词的复合 图表编号 例句:氧化-还原反应 例句:图 1-1 以下场合应该使用波浪连接号(~),占一个全角字符的位置。 数值范围(例如日期、时间或数字) 例句:2009 年~2011 年 注意,波浪连接号前后两个值都应该加上单位。 波浪连接号也可以用汉字“至”代替。 例句:周围温度:-20°C 至 -10°C
                Run code
                Cut to clipboard


                  6.章节结构
                  章节结构 软件手册是一部完整的书,建议采用下面的结构。 简介(Introduction): [必备] [文件] 提供对产品和文档本身的总体的、扼要的说明 快速上手(Getting Started):[可选] [文件] 如何最快速地使用产品 入门篇(Basics): [必备] [目录] 又称”使用篇“,提供初级的使用教程 环境准备(Prerequisite):[必备] [文件] 软件使用需要满足的前置条件 安装(Installation):[可选] [文件] 软件的安装方法 设置(Configuration):[必备] [文件] 软件的设置 进阶篇(Advanced):[可选] [目录] 又称”开发篇“,提供中高级的开发教程 API(Reference):[可选] [目录|文件] 软件API的逐一介绍 FAQ:[可选] [文件] 常见问题解答 附录(Appendix):[可选] [目录] 不属于教程本身、但对阅读教程有帮助的内容 Glossary:[可选] [文件] 名词解释 Recipes:[可选] [文件] 最佳实践 Troubleshooting:[可选] [文件] 故障处理 ChangeLog:[可选] [文件] 版本说明 Feedback:[可选] [文件] 反馈方式
                  Run code
                  Cut to clipboard

                    范例
                    Redux 手册
                    Atom 手册

                    7.参考链接
                    产品手册中文写作规范, by 华为
                    写作规范和格式规范, by DaoCloud
                    技术写作技巧在日汉翻译中的应用, by 刘方
                    简体中文规范指南,by lengoo
                    文档风格指南, by LeanCloud
                    豌豆荚文案风格指南, by 豌豆荚
                    中文文案排版指北,by sparanoid
                    中文排版需求,by W3C
                    github

                    从天空中看看 我们的地球已经面目全非

                    发布时间:2016-10-18, 17:42:28 | 评论:0 | 分类:默认分类

                    “浪漫”西部不复存在,取而代之的是一片片被规划整齐的土地,人和动物在这里生老病死,并遗留下大量的垃圾。

                    Evan Anderman在科罗拉多州的东部平原度过了大部分的童年时光,和父亲一起探索人迹罕至的地域。成年之后,受到他自己以及我们所有人对美国西部景观集体怀旧的启发,他又再次回到了科罗拉多、怀俄明以及堪萨斯。

                    当驾驶着赛纳斯206私人飞机冲上天空时,他发现在沿途的某些地方,人类已经丧失了与土地的联系。他所看到的是一片由于养殖场的扩建、水力压裂法的普及以及各类矿产开采而变得面目全非的土地。

                    “In Plain Sight”在这里当然是玩了个文字游戏(字面意思平原风光,暗指肉眼可见的明显的);Anderman通过镜头记录下三年以来在无数次飞行中的所见,见证了发生在西部的这些肉眼可见但是在某种程度上算是一种破坏的变化,美国的这片地区,许下了太多承诺,也打碎了太多承诺。

                    Anderman作品中展现的美刻意表现出了一种自我矛盾。人类活动改变了原始的自然景观,但如果说人类力量带来的改变没有带来一丝一毫的美感也是不准确的。事实上,我们在这些杂乱意象中所看到的美感与繁杂不仅是对Anderman艺术才能的一种证明,同时也证明我们能够意识到并且曲解这一可怕的真相。

                    我们皆为共犯。在摄影师看来,在我们面前的这一切都是由于我们对于“大房子”“大汽车”的贪念所造成的恶果。Anderman把自己所珍视的这片土地的丑陋一面公布于众。而这些照片正是他所不希望看到的。

                    这位拥有地质学博士学位的摄影师已经失去了他想象中的“浪漫”西部,取而代之的是一片片被规划整齐的土地,人和动物在这里生老病死,并遗留下大量的垃圾。

                    1871年,《纽约论坛报》的主编霍勒斯·格里利(Horace Greenley)——被赞为最先一批提出“到西部去吧,年轻人”的人之一——在一封信中这样建议一位年轻人。“你会劈柴吗?会犁地吗?会收庄稼吗?”他这样问道,“如果这些你都会,那就带上你的家人一起,去到西部吧!”看着Anderman的作品,想着我们现在所知晓的一切,145年前的这些言语显得分外天真。

                    我们劈砍了树木,犁好了土地,收获了粮食。我们也铸成了大错。不过Anderman仍未放弃希望。我们把自己推到了灾难的边缘,但我们也许可以就此止步,去纠正犯下的错误。最后,Anderman写道:“我们是适应力极强的种族。”

                    Evan Anderman:《In Plain Sight》将在丹佛公共图书馆开幕。Anderman也会在11月12日的同一时间回到这里进行演讲。展览将一直持续到12月31日。

                    红色花海,摩根堡,摄于2014年:紫红色的藻类在摩根堡附近的养殖场排出的富营养废水中盛开。

                    改良版天堂,松树城堡,摄于2015年:许多像这样的自然景观被高尔夫球场的建造所破坏。

                    清晨景致,罗克堡,The Meadows,摄于2014年:随着科罗拉多州人口的激增,像罗克堡The Meadows这样的大量被细分的土地逐渐成为了一种常态。

                    刮擦的一片狼藉,尤马,摄于2014年:每隔一段时间,图中这样养殖场中的小围场就会清扫一次粪便。

                    黝黑的水塘,尤马,摄于2016年:富营养的废水会被暂时储存在这些水塘中,且仍会不断释放出氨气、甲烷和硫化氢。

                    拼凑的网格,尤马,摄于2016年:俯瞰尤马附近的这间养殖场,奶牛就像是一只只小虫。

                    摇摆木马Ⅱ,帕克,摄于2015年:为了给丹佛东南部新的分区建造道路,机器掀开土地露出了底层的沙土。

                    石油公司的椭圆轨道,金斯堡,摄于2016年:原油被装载金轨道车通过金斯堡附近的这一设施运往全国各地。

                    潜藏的管道,温莎,摄于2016年:等候安装的管道。

                    水力压裂故障,Pawnee Buttes,摄于2014年:水力压裂需要大量基础设施的支持,就如同照片中韦尔德县展现的这样。

                    铲出的矿堆,粉河盆地,怀俄明州,摄于2014年:大量表土被铲走,露出下面暗黑色的煤层。

                    水位下降,伊兹,摄于2015年:科罗拉多州东南部多年连续的干旱也影响了这座水库,不断后撤的水岸线就是证明。

                    高高伫立,利蒙,摄于2016年:利蒙附近的风电场中,风力发电机伫立在浓雾之中。

                    叶片,温莎,摄于2016年:在生产基地等待运输的风力发电机的叶片看起来就像是火柴棒。

                    轮胎山,哈德逊,摄于2014年:科罗拉多是美国最大的废旧轮胎回收地。所有者称这里的3100万个轮胎将被用于柴油、活性炭以及钢铁的生产之中。



                    来源:featureshoot
                    原标题:INTENSE AERIAL PHOTOS REVEAL MANKIND’S EFFECT ON THE PLANET

                    移动Web开发技巧汇总

                    发布时间:2016-10-13, 15:55:20 | 评论:1 | 分类:HTML

                    META相关
                    1. 添加到主屏后的标题(IOS)
                    <meta name="apple-mobile-web-app-title" content="标题">
                    Run code
                    Cut to clipboard


                      2. 启用 WebApp 全屏模式(IOS)
                      当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果)
                      <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" />
                      Run code
                      Cut to clipboard


                        3. 百度禁止转码
                        通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:
                        <meta http-equiv="Cache-Control" content="no-siteapp" />
                        Run code
                        Cut to clipboard

                          百度SiteApp转码声明

                          4. 设置状态栏的背景颜色(IOS)
                          设置状态栏的背景颜色,只有在 "apple-mobile-web-app-capable" content="yes" 时生效
                          <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> content 参数: default :状态栏背景是白色。 black :状态栏背景是黑色。 black-translucent :状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。
                          Run code
                          Cut to clipboard


                            5. 移动端手机号码识别(IOS)
                            在 iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:
                            7位数字,形如:1234567
                            带括号及加号的数字,形如:(+86)123456789
                            双连接线的数字,形如:00-00-00111
                            11位数字,形如:13800138000
                            可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别:
                            <meta name="format-detection" content="telephone=no" />
                            Run code
                            Cut to clipboard

                              开启电话功能
                              <a href="tel:123456">123456</a>
                              Run code
                              Cut to clipboard

                                开启短信功能:
                                <a href="sms:123456">123456</a>
                                Run code
                                Cut to clipboard


                                  6. 移动端邮箱识别(Android)
                                  与电话号码的识别一样,在安卓上会对符合邮箱格式的字符串进行识别,我们可以通过如下的meta来管别邮箱的自动识别:
                                  <meta content="email=no" name="format-detection" />
                                  Run code
                                  Cut to clipboard

                                    同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能:
                                    <a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
                                    Run code
                                    Cut to clipboard


                                      7. 添加智能 App 广告条 Smart App Banner(IOS 6+ Safari)
                                      <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
                                      Run code
                                      Cut to clipboard


                                        8. IOS Web app启动动画
                                        由于iPad 的启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对应的方向上的20px大小,相应地在retina设备上要减去40px的大小
                                        <!-- iPhone --> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) --> <link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (portrait) --> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <!-- iPad (landscape) --> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <!-- iPad (Retina, portrait) --> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (Retina, landscape) --> <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> (landscape:横屏 | portrait:竖屏)
                                        Run code
                                        Cut to clipboard


                                          9. 添加到主屏后的APP图标
                                          指定web app添加到主屏后的图标路径,有两种略微不同的方式:
                                          <!-- 设计原图 --> <link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed"> <!-- 添加高光效果 --> <link href="short_cut_114x114.png" rel="apple-touch-icon"> apple-touch-icon:在IOS6及以下的版本会自动为图标添加一层高光效果(IOS7开始已使用扁平化的设计风格) apple-touch-icon-precomposed:使用“设计原图图标”
                                          Run code
                                          Cut to clipboard

                                            效果:

                                            图标尺寸:
                                            可通过指定size属性来为不同的设备提供不同的图标(但通常来说,我们只需提供一个114 x 114 pixels大小的图标即可 )
                                            官方说明如下
                                            Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.

                                            For iPhone and iPod touch both of these sizes are required:

                                            57 x 57 pixels

                                            114 x 114 pixels (high resolution)

                                            For iPad, both of these sizes are required:

                                            72 x 72 pixels

                                            144 x 144 (high resolution)

                                            10. 优先使用最新版本 IE 和 Chrome
                                            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
                                            Run code
                                            Cut to clipboard

                                              11.viewport模板
                                              <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>标题</title> <link rel="stylesheet" href="index.css"> </head> <body> 这里开始内容 </body> </html>
                                              Run code
                                              Cut to clipboard


                                                常见问题

                                                1、移动端如何定义字体font-family
                                                三大手机系统的字体:
                                                ios 系统
                                                默认中文字体是Heiti SC
                                                默认英文字体是Helvetica
                                                默认数字字体是HelveticaNeue
                                                无微软雅黑字体
                                                android 系统
                                                默认中文字体是Droidsansfallback
                                                默认英文和数字字体是Droid Sans
                                                无微软雅黑字体
                                                winphone 系统
                                                默认中文字体是Dengxian(方正等线体)
                                                默认英文和数字字体是Segoe
                                                无微软雅黑字体
                                                各个手机系统有自己的默认字体,且都不支持微软雅黑
                                                如无特殊需求,手机端无需定义中文字体,使用系统默认
                                                英文字体和数字字体可使用 Helvetica ,三种系统都支持
                                                * 移动端定义字体的代码 */ body{font-family:Helvetica;}
                                                Run code
                                                Cut to clipboard


                                                  2、移动端字体单位font-size选择px还是rem
                                                  对于只需要适配手机设备,使用px即可
                                                  对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备
                                                  rem配置参考:
                                                  html {font-size:10px} @media screen and (min-width:480px) and (max-width:639px) { html { font-size: 15px } } @media screen and (min-width:640px) and (max-width:719px) { html { font-size: 20px } } @media screen and (min-width:720px) and (max-width:749px) { html { font-size: 22.5px } } @media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px } } @media screen and (min-width:800px) and (max-width:959px) { html { font-size: 25px } } @media screen and (min-width:960px) and (max-width:1079px) { html { font-size: 30px } } @media screen and (min-width:1080px) { html { font-size: 32px } }
                                                  Run code
                                                  Cut to clipboard


                                                    3、移动端touch事件(区分webkit 和 winphone)
                                                    当用户手指放在移动设备在屏幕上滑动会触发的touch事件
                                                    以下支持webkit
                                                    touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
                                                    touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
                                                    touchend——当手指离开屏幕时触发
                                                    touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用
                                                    以下支持winphone 8
                                                    MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
                                                    MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动
                                                    MSPointerUp——当手指离开屏幕时触发

                                                    4、移动端click屏幕产生200-300 ms的延迟响应
                                                    移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。
                                                    以下是历史原因:
                                                    2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态。
                                                    双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
                                                    原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接<a href="#"></a>,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS safari下,大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。
                                                    解决方案:
                                                    fastclick可以解决在手机上点击事件的300ms延迟
                                                    zepto的touch模块,tap事件也是为了解决在click的延迟问题
                                                    触摸事件的响应顺序
                                                    1、ontouchstart
                                                    2、ontouchmove
                                                    3、ontouchend
                                                    4、onclick
                                                    解决300ms延迟的问题,也可以通过绑定ontouchstart事件,加快对事件的响应

                                                    5、什么是Retina 显示屏,带来了什么问题
                                                    retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个
                                                    在高清显示屏中的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统PC的2倍
                                                    那么,前端的应对方案是:
                                                    设计稿切出来的图片长宽保证为偶数,并使用backgroud-size把图片缩小为原来的1/2
                                                    //例如图片宽高为:200px*200px,那么写法如下
                                                    .css{width:100px;height:100px;background-size:100px 100px;} 其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px .css{font-size:20px}
                                                    Run code
                                                    Cut to clipboard


                                                      6、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
                                                      ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩
                                                      a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}

                                                      7、部分android系统中元素被点击时产生的边框怎么去掉
                                                      android用户点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样,可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
                                                      a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0) -webkit-user-modify:read-write-plaintext-only; }
                                                      Run code
                                                      Cut to clipboard

                                                        -webkit-user-modify有个副作用,就是输入法不再能够输入多个字符
                                                        另外,有些机型去除不了,如小米2
                                                        对于按钮类还有个办法,不使用a或者input标签,直接用div标签

                                                        8、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
                                                        <meta name="msapplication-tap-highlight" content="no">
                                                        Run code
                                                        Cut to clipboard


                                                          9、webkit表单元素的默认外观怎么重置
                                                          .css{-webkit-appearance:none;}
                                                          Run code
                                                          Cut to clipboard


                                                            10、webkit表单输入框placeholder的颜色值能改变么
                                                            input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;}
                                                            Run code
                                                            Cut to clipboard


                                                              11、webkit表单输入框placeholder的文字能换行么
                                                              ios可以,android不行~

                                                              12. 关闭iOS键盘首字母自动大写
                                                              在iOS中,默认情况下键盘是开启首字母大写的功能的,如果启用这个功能,可以这样:
                                                              <input type="text" autocapitalize="off" />
                                                              Run code
                                                              Cut to clipboard


                                                                13. 关闭iOS输入自动修正
                                                                和英文输入默认自动首字母大写那样,IOS还做了一个功能,默认输入法会开启自动修正输入内容,这样的话,用户经常要操作两次。如果不希望开启此功能,我们可以通过input标签属性来关闭掉:
                                                                <input type="text" autocorrect="off" />
                                                                Run code
                                                                Cut to clipboard


                                                                  14. 禁止文本缩放
                                                                  当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以选择禁止:
                                                                  html {    -webkit-text-size-adjust: 100%; }
                                                                  Run code
                                                                  Cut to clipboard

                                                                    需要注意的是,PC端的该属性已经被移除,该属性在移动端要生效,必须设置 `meta viewport’。

                                                                    15. 移动端如何清除输入框内阴影
                                                                    在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:
                                                                    input, textarea {   border: 0;   -webkit-appearance: none; }
                                                                    Run code
                                                                    Cut to clipboard


                                                                      16. 快速回弹滚动
                                                                      我们先来看看回弹滚动在手机浏览器发展的历史:
                                                                      早期的时候,移动端的浏览器都不支持非body元素的滚动条,所以一般都借助 iScroll;
                                                                      Android 3.0/iOS解决了非body元素的滚动问题,但滚动条不可见,同时iOS上只能通过2个手指进行滚动;
                                                                      Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果,不过随后这个特性又被移除;
                                                                      iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果
                                                                      在iOS上如果你想让一个元素拥有像 Native 的滚动效果,你可以这样做:
                                                                      .xxx { overflow: auto; -webkit-overflow-scrolling: touch; }
                                                                      Run code
                                                                      Cut to clipboard

                                                                        PS:iScroll用过之后感觉不是很好,有一些诡异的bug,这里推荐另外一个 iDangero Swiper,这个插件集成了滑屏滚动的强大功能(支持3D),而且还有回弹滚动的内置滚动条,官方地址:
                                                                        iDangero

                                                                        17. 移动端禁止选中内容
                                                                        如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:
                                                                        .user-select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
                                                                        Run code
                                                                        Cut to clipboard


                                                                          18. 移动端取消touch高亮效果
                                                                          在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局的禁止:
                                                                          html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
                                                                          Run code
                                                                          Cut to clipboard

                                                                            但这个方法在三星的机子上无效,有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签,可以解决这个问题。

                                                                            19. 如何禁止保存或拷贝图像(IOS)
                                                                            通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:
                                                                            img { -webkit-touch-callout: none; }
                                                                            Run code
                                                                            Cut to clipboard


                                                                              20.模拟按钮hover效果
                                                                              移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下,
                                                                              <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style type="text/css"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue:active{background-color: #357AE8;} </style> </head> <body> <div class="btn-blue">按钮</div> <script type="text/javascript"> document.addEventListener("touchstart", function(){}, true) </script> </body> </html>
                                                                              Run code
                                                                              Cut to clipboard

                                                                                兼容性ios5+、部分android 4+、winphone 8
                                                                                要做到全兼容的办法,可通过绑定ontouchstart和ontouchend来控制按钮的类名
                                                                                <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style type="text/css"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue-on{background-color: #357AE8;} </style> </head> <body> <div class="btn-blue">按钮</div> <script type="text/javascript"> var btnBlue = document.querySelector(".btn-blue"); btnBlue.ontouchstart = function(){ this.className = "btn-blue btn-blue-on" } btnBlue.ontouchend = function(){ this.className = "btn-blue" } </script> </body> </html>
                                                                                Run code
                                                                                Cut to clipboard


                                                                                  21.屏幕旋转的事件和样式
                                                                                  事件
                                                                                  window.orientation,取值:正负90表示横屏模式、0和180表现为竖屏模式; window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("横屏:" + window.orientation); case 0: case 180: alert("竖屏:" + window.orientation); break; } }
                                                                                  Run code
                                                                                  Cut to clipboard

                                                                                    样式
                                                                                    //竖屏时使用的样式 @media all and (orientation:portrait) { .css{} } //横屏时使用的样式 @media all and (orientation:landscape) { .css{} }
                                                                                    Run code
                                                                                    Cut to clipboard


                                                                                      22.audio元素和video元素在ios和andriod中无法自动播放
                                                                                      应对方案:触屏即播
                                                                                      $('html').one('touchstart',function(){ audio.play() })
                                                                                      Run code
                                                                                      Cut to clipboard

                                                                                        23.摇一摇功能
                                                                                        HTML5 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

                                                                                        24.手机拍照和上传图片
                                                                                        <input type="file">的accept 属性 <!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">
                                                                                        Run code
                                                                                        Cut to clipboard

                                                                                          使用总结:
                                                                                          ios 有拍照、录像、选取本地图片功能
                                                                                          部分android只有选取本地图片功能
                                                                                          winphone不支持
                                                                                          input控件默认外观丑陋

                                                                                          25. 消除transition闪屏
                                                                                          .css{ -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; }
                                                                                          Run code
                                                                                          Cut to clipboard

                                                                                            开启硬件加速
                                                                                            解决页面闪白
                                                                                            保证动画流畅
                                                                                            .css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
                                                                                            Run code
                                                                                            Cut to clipboard

                                                                                              设计高性能CSS3动画的几个要素
                                                                                              尽可能地使用合成属性transform和opacity来设计CSS3动画,
                                                                                              不使用position的left和top来定位
                                                                                              利用translate3D开启GPU加速

                                                                                              26. android 上去掉语音输入按钮
                                                                                              input::-webkit-input-speech-button {display: none}
                                                                                              Run code
                                                                                              Cut to clipboard


                                                                                                框架

                                                                                                1. 移动端基础框架
                                                                                                zepto.js 语法与jquery几乎一样,会jquery基本会zepto~
                                                                                                iscroll.js 解决页面不支持弹性滚动,不支持fixed引起的问题~ 实现下拉刷新,滑屏,缩放等功能~
                                                                                                underscore.js 该库提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。
                                                                                                fastclick 加快移动端点击响应时间
                                                                                                animate.css CSS3动画效果库
                                                                                                Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案

                                                                                                2. 滑屏框架
                                                                                                适合上下滑屏、左右滑屏等滑屏切换页面的效果
                                                                                                slip.js
                                                                                                iSlider.js
                                                                                                fullpage.js
                                                                                                swiper

                                                                                                3.瀑布流框架
                                                                                                masonry

                                                                                                原文链接

                                                                                                VB简洁时间显示窗口最前端实例代码

                                                                                                发布时间:2016-10-11, 11:36:01 | 评论:3 | 分类:VB


                                                                                                Public i As Integer Public j As Integer Private Declare Function SetWindowPos Lib "user32" (ByVal hwnd As Long, ByVal hWndInsertAfter As Long, ByVal x As Long, ByVal y As Long, ByVal cx As Long, ByVal cy As Long, ByVal wFlags As Long) As Long Private Sub Form_Load() SetWindowPos Me.hwnd, -1, 0, 0, 0, 0, 3 ss = addition() Timer1.Enabled = True End Sub Private Function addition() Label1.Caption = Format(Now(), "HH时MM分") Label2.Caption = Format(Now(), "yyyy年m月d日") Dim i As Long i = Weekday(Now) Select Case i Case 1 Label2.Caption = Label2.Caption & " 周日" Case 2 Label2.Caption = Label2.Caption & " 周一" Case 3 Label2.Caption = Label2.Caption & " 周二" Case 4 Label2.Caption = Label2.Caption & " 周三" Case 5 Label2.Caption = Label2.Caption & " 周四" Case 6 Label2.Caption = Label2.Caption & " 周五" Case 7 Label2.Caption = Label2.Caption & " 周六" End Select End Function Private Sub Timer1_Timer() i = i + 1 j = j + 1 Label3.Caption = j If i = "50" Then i = 0 ss = addition() End If End Sub
                                                                                                Run code
                                                                                                Cut to clipboard


                                                                                                  vb的窗口运行时位于最前端
                                                                                                  在VB6.0里要先在最前面进行如下声明 Private Declare Function SetWindowPos Lib "user32" (ByVal hwnd As Long, ByVal hWndInsertAfter As Long, ByVal x As Long, ByVal y As Long, ByVal cx As Long, ByVal cy As Long, ByVal wFlags As Long) As Long 在过程中加入 SetWindowPos Me.hwnd, -1, 0, 0, 0, 0, 3
                                                                                                  Run code
                                                                                                  Cut to clipboard

                                                                                                    就可以了,还原把 -1 改为 -2 。

                                                                                                    如果是VB.net就容易了,直接在窗体属性中设置TopMost属性就行了

                                                                                                    vb中日期显示格式
                                                                                                    Print Format(Now(), "yyyy年m月d日 HH时MM分SS秒")
                                                                                                    Run code
                                                                                                    Cut to clipboard


                                                                                                      VB函数if
                                                                                                      Dim aa as String '定义一个字符变量 aa="123" '字符变量定义 If aa="123" Then '判断aa的值是否与字符"123"相同 Msgbox "aa的内容是123。" Else Msgbox "aa的内容不是123。" End If
                                                                                                      Run code
                                                                                                      Cut to clipboard


                                                                                                        VB如何调用函数
                                                                                                        private Function fn1() as string '函数fn1,返回字符串类型的值 '函数体 fn1 = "你好" end Function private Function fn2(n as boolean) as string '函数fn2 fn2 = iif(n,"真","假") end function 调用时: dim str as string str = fn1 'str = "你好" str = fn2(true) 'str = "真"
                                                                                                        Run code
                                                                                                        Cut to clipboard


                                                                                                          VB编程显示星期几
                                                                                                          Private Sub Command1_Click() Dim i As Long i = Weekday(Now) Select Case i Case 1 Label1.Caption = " 星期天" Case 2 Label1.Caption = "星期一" Case 3 Label1.Caption = "星期二" Case 4 Label1.Caption = "星期三" Case 5 Label1.Caption = "星期四" Case 6 Label1.Caption = "星期五" Case 7 Label1.Caption = "星期六" End Select End Sub
                                                                                                          Run code
                                                                                                          Cut to clipboard


                                                                                                            vb语言获得系统时间
                                                                                                            Now:系统日期及时间 Date:系统日期 Time:系统时间 如text1.text=Now ‘显示系统日期及时间 text1.text=Date ‘显示系统日期 text1.text=Time ‘显示系统时间 用NOW()获得现在时间 data()获得年月日 weekday()获得星期 Option Explicit Private WithEvents Timer1 As Timer Private Sub Form_Load() Set Timer1 = Controls.Add("vb.timer", "timer1") Timer1.Interval = 1000 End Sub Private Sub Timer1_Timer() Cls Print Now End Sub 直接贴代码运行就可以看到了
                                                                                                            Run code
                                                                                                            Cut to clipboard

                                                                                                              跨域浅谈

                                                                                                              发布时间:2016-10-08, 18:06:30 | 评论:0 | 分类:HTML

                                                                                                              说到跨域,我们就不得不先提一下同源。

                                                                                                                同源是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同,而不同源就是跨域。也就是说我们如果域名,协议,端口只要有一个不是不同的那么就是跨域。

                                                                                                                举个例子说:http://www.example.com/
                                                                                                              http://api.example.com/detail.html 不同源 域名不同 https//www.example.com/detail.html 不同源 协议不同 http://www.example.com:8080/detail.html 不同源 端口不同 http://api.example.com:8080/detail.html 不同源 域名、端口不同 https://api.example.com/detail.html 不同源 协议、域名不同 https://www.example.com:8080/detail.html 不同源 端口、协议不同 http://www.example.com/detail/index.html 同源 只是目录不同
                                                                                                              Run code
                                                                                                              Cut to clipboard

                                                                                                                  通过上面的例子,相信大家都对同源和跨域有了一定的了解。浏览器出于安全考虑,同源策略不允许跨域调用其他页面的对象。但是安全限制的同时也给我们使用iframe或者获取其他服务器上的接口数据带来了不少的麻烦。

                                                                                                                  因为我们在所难免的会需要调用其他服务器的接口,所以提供了一下几个跨域的方案。

                                                                                                                解决iframe跨域

                                                                                                                方案一:document.domain
                                                                                                                  前面我们说到浏览器的同源策略限制了不同源的iframe之间进行的DOM操作,但是需要说明的一点是,在不同的iframe之间(父子或同级)是能够获取到彼此window对象的。

                                                                                                                document.domain解决了在顶级域名相同的情况下但是域名不完全相同的跨域问题.

                                                                                                                  比如:我们有一个页面它的地址是: http://www.study.com/domain.html 在这个页面中有一个有一个iframe,它的src是http://api.study.com/domain.html,代码如下
                                                                                                                <body> <p>我是父窗口study.com的内容</p> <iframe id="iframe" src="http://api.study.com/domain.html" frameborder="0"> </iframe> <script> // 这种情况适合 顶级域名相同的情况 document.domain = 'study.com'; var iframe = document.getElementById('iframe'); iframe.onload = function () { var contentWin = iframe.contentWindow; contentWin.document.getElementById('txt').style.color = 'red'; } </script> </body>
                                                                                                                Run code
                                                                                                                Cut to clipboard

                                                                                                                    很显然这个页面和它里面的iframe来自不同的域,我们默认是无法相互操作对方的DOM元素的,但是如果我们都将两个页面的document.domain 设为相同的域名即:document.domain = 'study.com'就可以操作对方DOM元素了。iframe页面的代码如下
                                                                                                                  <body> <p id="txt">我是api.study.com域下的一个页面</p> <script> document.domain = 'study.com'; // 访问父级 top.document.getElementsByTagName('p')[0].style.color = 'red'; </script> </body>
                                                                                                                  Run code
                                                                                                                  Cut to clipboard

                                                                                                                      需要说明的是:document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且顶级域名必须相同。 例如:a.b.study.com 中的某个页面的document.domain 可以设成a.b.study.com、b.study.com 、study.com中的任意一个,但是不可以设成 c.a.b.study.com,因为这是当前域的子域,也不可以设成baidu.com,因为顶级域名已经不相同了。

                                                                                                                      在实现了两个页面的DOM元素访问也就相当于实现了两个页面之间的数据传递,这个就需要我们一起发散思维了。

                                                                                                                    方案二:window.name
                                                                                                                      我们前面说到在不同的iframe之间(父子或同级)是能够获取到彼此window对象的。我们可以通过window.name实现的跨域数据传输。window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有页面都是共享一个window.name的,每个页面对window.name都有读写权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的的载入而进行重置。

                                                                                                                      效果实现: 我们需要准备三个页面:

                                                                                                                      www.study.com/name.html //应用页面。
                                                                                                                    <body> <!-- setp 1 --> <iframe id="iframe" src="http://api.study.com/name.html" frameborder="0"> </iframe> <button id="btn">获取数据</button> <script> var iframe = document.getElementById('iframe'); // 将数据填加到name上了 iframe.contentWindow.name = 100; iframe.onload = function () { this.src = 'proxy.html'; this.onload = null; } var btn = document.getElementById('btn'); btn.onclick = function () { var text = iframe.contentWindow.name; document.write('<p>我是从api.study.com中得到值' + text + '</p>'); } </script> </body>
                                                                                                                    Run code
                                                                                                                    Cut to clipboard

                                                                                                                        www.study.com/proxy.html //代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。在应用页面动态创建iframe

                                                                                                                        api.study.com/name.html //应用页面需要获取数据的页面,可称为数据页面。
                                                                                                                      <body> <p id="txt">我是api.study.com域下的一个页面</p> <script> window.name = 400; </script> </body>
                                                                                                                      Run code
                                                                                                                      Cut to clipboard

                                                                                                                        方案三:location.hash
                                                                                                                          大家都知道location是javascript里边BOM中管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。

                                                                                                                          它的原理和window.name有些类似都需要通过一个同源文件作为代理文件,和window.name一样我们也需要准备三个页面。

                                                                                                                          www.study.com/hash.html //应用页面。
                                                                                                                        <body> <script type="text/javascript"> function getData(url, fn) { var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = url; iframe.onload = function() { fn(iframe.contentWindow.location.hash.substring(1)); window.location.hash = ''; document.body.removeChild(iframe); }; document.body.appendChild(iframe); } // get data from server var url = 'http://api.study.com/hash.php'; getData(url, function(data) { var jsondata = JSON.parse(data); console.log(jsondata.name + ' ' + jsondata.age); }); </script> </body>
                                                                                                                        Run code
                                                                                                                        Cut to clipboard

                                                                                                                            www.study.com/proxy.html //代理文件,需要和应用页面在同一域下。

                                                                                                                            api.study.com/hash.php //应用页面需要获取数据的页面,可称为数据页面。
                                                                                                                          <?php // 如果有必要则进行数据处理 $_GET['..'] // code // 返回的数据 $data = '{\"name\":\"zs\",\"age\":10}'; echo "<script> window.location = 'http://localhost/proxy.html' + '#' + \"$data\"; </script>"; ?>
                                                                                                                          Run code
                                                                                                                          Cut to clipboard

                                                                                                                            方案四:HTML5中新引进的window.postMessage方法来跨域传送数据
                                                                                                                              window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

                                                                                                                              postMessage(data,origin)方法接受两个参数

                                                                                                                              1.data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。

                                                                                                                              2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

                                                                                                                              这次我们只需要两个页面即可

                                                                                                                              www.study.com/postMessage.html
                                                                                                                            <body> <iframe id="iframe" src="http://api.study.com/postmessage.html" frameborder="0"> </iframe> <script> var iframe = document.getElementById('iframe'); iframe.onload = function () { // 向哪个域下传值 iframe.contentWindow.postMessage('red', 'http://api.study.com'); } </script> </body>
                                                                                                                            Run code
                                                                                                                            Cut to clipboard

                                                                                                                                api.study.com/possMessage.html
                                                                                                                              <body> <p id="txt">我是api.study.com域下的一个页面</p> <script> window.addEventListener('message', function(ev) { document.getElementById('txt').style.color = ev.data; }); </script> </body>
                                                                                                                              Run code
                                                                                                                              Cut to clipboard

                                                                                                                                方案五:JSONP
                                                                                                                                  全名为:JSON with Padding

                                                                                                                                  我们都知道link 、 script 、img 标签都有跨域的能力,而jsonp的本质就是利用了script标签的可跨域的特性,由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。

                                                                                                                                  前端页面:www.study.com/jsonp.html
                                                                                                                                <script> function fuck(data){ var data = JSON.parse(data); console.log(data); } </script> <script src="http://api.study.com/jsonp.php?callback=fuck"></script>
                                                                                                                                Run code
                                                                                                                                Cut to clipboard

                                                                                                                                    后台页面api.study.com/jsonp.php
                                                                                                                                  <?php header('Content-Type:text/html;charset=utf-8'); $callback = $_GET['callback']; $json = '{"name":"xjj","age":"10"}'; echo $callback."('$json')"; ?>
                                                                                                                                  Run code
                                                                                                                                  Cut to clipboard

                                                                                                                                      在我们常用的jquery中的调用时集合在了ajax方法中,

                                                                                                                                      将设置dataType值为jsonp即开启跨域访问

                                                                                                                                      jsonp 可以指定服务端接收的参数的“key”值,默认为callback

                                                                                                                                      jsonpCallback 可以指定相应的回调函数,默认自动生成

                                                                                                                                      前端调用 www.study.com/jquery_jsonp.html
                                                                                                                                    $.ajax({ type:'get', url:'http://api.study.com/jquery_jsonp.php', dataType:'jsonp', jsonp:'callback', success:function(data){ console.log(data); } });
                                                                                                                                    Run code
                                                                                                                                    Cut to clipboard

                                                                                                                                        后台页面 api.study.com/jquery_jsonp.php
                                                                                                                                      <?php header('Content-Type:text/html;charset=utf-8'); /*处理业务逻辑 返回数据给第三方过的的接口*/ $callback = $_GET['callback']; $json = '{"name":"xjj","age":"18"}'; echo $callback.'('.$json.')'; ?>
                                                                                                                                      Run code
                                                                                                                                      Cut to clipboard

                                                                                                                                        方案六:CORS: 跨域资源共享(Cross-Origin Resource Sharing)
                                                                                                                                          当前几乎所有的浏览器(Internet Explorer 8+, Firefox 3.5+, Safari 4+和 Chrome 3+)都可通过名为跨域资源共享(Cross-Origin Resource Sharing)的协议支持ajax跨域调用。

                                                                                                                                        启用 CORS 请求
                                                                                                                                          假设您的页面在 www.study.com 上了,而您想要从 www.learn.com 提取数据。一般情况下,如果您尝试进行这种类型的 AJAX 调用,请求将会失败,而浏览器将会出现“源不匹配”的错误。利用 CORS,www.learn.com 服务端只需添加一个HTTP Response头,就可以允许来自 www.study.com 的请求:
                                                                                                                                        Access-Control-Allow-Origin: http://example.com Access-Control-Allow-Credentials: true(可选)
                                                                                                                                        Run code
                                                                                                                                        Cut to clipboard

                                                                                                                                           可将 Access-Control-Allow-Origin 添加到某网站下或整个域中的单个资源。要允许任何域向你提交请求,请设置如下:
                                                                                                                                          Access-Control-Allow-Origin: * Access-Control-Allow-Credentials: true(可选)
                                                                                                                                          Run code
                                                                                                                                          Cut to clipboard

                                                                                                                                              启用开发人员工具后,您就会在响应中看到 Access-Control-Allow-Origin 。

                                                                                                                                            提交跨域请求
                                                                                                                                              如果服务器端已启用了 CORS,那么提交跨域请求就和普通的 XMLHttpRequest 请求没什么区别。例如,现在 example.com 可以向 www.example2.com 提交请求了:
                                                                                                                                            $.ajax({ type:'get', url:'http://api.study.com/CORS.php', dataType:'jsonp', success:function(data){ console.log(data); } });
                                                                                                                                            Run code
                                                                                                                                            Cut to clipboard

                                                                                                                                                CORS在移动终端支持的不错,可以考虑在移动端全面尝试;PC上有不兼容和没有完美支持。

                                                                                                                                                CORS提供了一种跨域请求方案,但没有为安全访问提供足够的保障机制,如果你需要信息的绝对安全,不要依赖CORS当中的权限制度,应当使用更多其它的措施来保障。
                                                                                                                                              原文

                                                                                                                                              JavaScript“尽快失败”的原则

                                                                                                                                              发布时间:2016-10-08, 18:02:23 | 评论:0 | 分类:HTML

                                                                                                                                              我第一次听说编码原则中有“尽快失败”这一条时,觉得很奇怪,为什么代码要失败?应该成功才对呀。但事实上,当代码在遇到错误的时候应该尽快的终止。为了检测各种状态,我们需要频繁的创建if语句与条件分支,而这些条件检测的结果不是成功就是失败(true&&false)。之所以会有这么多的条件检测语句,是因为如果不在构建过程中植入这些监测点(checkpoint),那么浏览器内核会执行很多无用的代码,并占用许多宝贵的CPU性能和处理时间,拖慢网站加载速度。

                                                                                                                                              根据那些判断结果为false的检测语句块放置位置的不同,有些情况下,一旦发生错误就迅速中止,而另外一些情况下则会在执行了很长一段时间的无用代码后才终止。如果我们在遍历数组之前先检测其长度,或是在处理DOM时先看看有没有我们需要的class属性,那么就可以在不满足条件时立刻中止代码的执行。因为遍历数组信息与解析DOM都是相当耗时的工作,所以最好是在执行这些任务之前先检测一下,在满足于执行条件时及早终止。正是基于上述原因,所以我才要提倡那种“尽快失败”的代码。

                                                                                                                                              这是我的示例代码:
                                                                                                                                              //创建在遇到错误时尽快终止的代码 (function Salad(totalSlices,peopleCount){ //我要创建一个沙拉函数,用来返回派对需要的总沙拉数量 "use strict"; var fairness = totalSlices * peopleCount; return fairness; })(); (function () { "use strict"; var body = document.getElementsByTagName("body")[0], //我在此闭包函数中建立了一些变量,并将其传入salad函数以供计算 partyStarter = "starlen", peopleCount = 18, Salad = 6, sliceCount = Salad * 3; if(peopleCount > 0 && Salad >0){ //先检测一下我们的派对有没有人或沙拉,避免js消耗不必要的计算性能 body.innerHTML += " '<p>'"+ partyStarter +","+ Salad(peopleCount,Salad) +" '</p>' " } else { body.innerHTML += "<p>参加聚会的人数或沙拉果盘不足!</p>" } })();
                                                                                                                                              Run code
                                                                                                                                              Cut to clipboard

                                                                                                                                                在输出某些变量信息之前,我们首先检查确保这些变量信息是否保存于内存之中或者某些数组内的变量是否大于0,从而回避那些不需要执行那些计算代码了。这是在日常的开发工作中基础且重要的易引发性能的问题,所以要重视。欢迎交流

                                                                                                                                                常用API——日期型函数Date

                                                                                                                                                发布时间:2016-10-08, 17:14:44 | 评论:0 | 分类:Linux

                                                                                                                                                上图

                                                                                                                                                声明
                                                                                                                                                var myDate = new Date(); //系统当前时间 var myDate = new Date(yyyy, mm, dd, hh, mm, ss); var myDate = new Date(yyyy, mm, dd); var myDate = new Date("monthName dd, yyyy hh:mm:ss"); var myDate = new Date("monthName dd, yyyy"); var myDate = new Date(epochMilliseconds);
                                                                                                                                                Run code
                                                                                                                                                Cut to clipboard

                                                                                                                                                  获取时间的某部分
                                                                                                                                                  var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) 注意:返回一个距1900的偏移量,返回的值+1900,就是正确的年份。 myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) 时间戳!! myDate.getHours(); //获取当前小时数(0-23) myDate.getMinutes(); //获取当前分钟数(0-59) myDate.getSeconds(); //获取当前秒数(0-59) myDate.getMilliseconds(); //获取当前毫秒数(0-999) myDate.toLocaleDateString(); //获取当前日期 myDate.toLocaleTimeString(); //获取当前时间 myDate.toLocaleString( ); //获取日期与时间
                                                                                                                                                  Run code
                                                                                                                                                  Cut to clipboard

                                                                                                                                                    计算之前和未来的时间
                                                                                                                                                    var myDate = new Date(); myDate.setDate(myDate.getDate() + 10); //当前时间加10天//类似的方法都基本相同,以set开头,具体参考第2点
                                                                                                                                                    Run code
                                                                                                                                                    Cut to clipboard

                                                                                                                                                      计算两个日期的偏移量
                                                                                                                                                      var i = daysBetween(beginDate,endDate); //返回天数 var i = beginDate.getTimezoneOffset(endDate); //返回分钟数
                                                                                                                                                      Run code
                                                                                                                                                      Cut to clipboard

                                                                                                                                                        检查有效日期
                                                                                                                                                        //checkDate() 只允许"mm-dd-yyyy"或"mm/dd/yyyy"两种格式的日期 if( checkDate("2006-01-01") ){ } //正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种) var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/;if( r.test( myString ) ){ }
                                                                                                                                                        Run code
                                                                                                                                                        Cut to clipboard

                                                                                                                                                          常用API——字符串String型函数

                                                                                                                                                          发布时间:2016-10-08, 17:11:14 | 评论:0 | 分类:Linux

                                                                                                                                                          上图:

                                                                                                                                                          声明
                                                                                                                                                          var myString = new String("Every good boy does fine."); var myString = "Every good boy does fine.";
                                                                                                                                                          Run code
                                                                                                                                                          Cut to clipboard

                                                                                                                                                            字符串连接
                                                                                                                                                            var myString = "Every " + "good boy " + "does fine."; var myString = "Every "; myString += "good boy does fine.";
                                                                                                                                                            Run code
                                                                                                                                                            Cut to clipboard

                                                                                                                                                              截取字符串
                                                                                                                                                              //截取第 6 位开始的字符 var myString = "Every good boy does fine."; var section = myString.substring(6); //结果: "good boy does fine." //截取第 0 位开始至第 10 位为止的字符 var myString = "Every good boy does fine."; var section = myString.substring(0,10); //结果: "Every good" //截取从第 11 位到倒数第 6 位为止的字符 var myString = "Every good boy does fine."; var section = myString.slice(11,-6); //结果: "boy does" //从第 6 位开始截取长度为 4 的字符 var myString = "Every good boy does fine."; var section = myString.substr(6,4); //结果: "good"
                                                                                                                                                              Run code
                                                                                                                                                              Cut to clipboard

                                                                                                                                                                转换大小写
                                                                                                                                                                var myString = "Hello"; var lcString = myString.toLowerCase(); //结果: "hello" var ucString = myString.toUpperCase(); //结果: "HELLO"
                                                                                                                                                                Run code
                                                                                                                                                                Cut to clipboard

                                                                                                                                                                  字符串比较
                                                                                                                                                                  var aString = "Hello!"; var bString = new String("Hello!"); if( aString == "Hello!" ){ } //结果: true if( aString == bString ){ } //结果: true if( aString === bString ){ } //结果: false (两个对象不同,尽管它们的值相同)
                                                                                                                                                                  Run code
                                                                                                                                                                  Cut to clipboard

                                                                                                                                                                    检索字符串
                                                                                                                                                                    var myString = "hello everybody."; // 如果检索不到会返回-1,检索到的话返回在该串中的起始位置 if( myString.indexOf("every") > -1 ){ } //结果: true
                                                                                                                                                                    Run code
                                                                                                                                                                    Cut to clipboard

                                                                                                                                                                      查找替换字符串
                                                                                                                                                                      var myString = "I is your father."; var result = myString.replace("is","am"); //结果: "I am your father."
                                                                                                                                                                      Run code
                                                                                                                                                                      Cut to clipboard

                                                                                                                                                                        特殊字符
                                                                                                                                                                        \b : 后退符 \t : 水平制表符 \n : 换行符 \v : 垂直制表符 \f : 分页符 \r : 回车符 \" : 双引号 \’ : 单引号 \ 反斜杆
                                                                                                                                                                        Run code
                                                                                                                                                                        Cut to clipboard

                                                                                                                                                                          将字符转换成Unicode编码
                                                                                                                                                                          var myString = "hello"; var code = myString.charCodeAt(3); //返回"l"的Unicode编码(整型) var char = String.fromCharCode(66); //返回Unicode为66的字符
                                                                                                                                                                          Run code
                                                                                                                                                                          Cut to clipboard

                                                                                                                                                                            将字符串转换成URL编码
                                                                                                                                                                            var myString = "hello all"; var code = encodeURI(myString); //结果: "hello%20all" var str = decodeURI(code); //结果: "hello all" //相应的还有: encodeURIComponent() decodeURIComponent()
                                                                                                                                                                            Run code
                                                                                                                                                                            Cut to clipboard

                                                                                                                                                                              解决javascript变量的全局污染问题

                                                                                                                                                                              发布时间:2016-10-08, 17:07:06 | 评论:0 | 分类:HTML

                                                                                                                                                                              作用域的概念总是和变量形影不离,它不是javascript语言独有的概念,只是其运用上与其他大型语言略有不同,JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

                                                                                                                                                                              JavaScript对作用域的运用与其他语言略有不同,然而总体概念是一致的。作用域限定了javascript文档中的各个资源的可用范围,决定了你定义变量的位置。使用一个匿名函数来容纳所需的变量就是个很好的方法。所有在函数中定义的变量都只应该在该函数的作用域内生效。(变量的作用域会自动向下延伸,这是闭包的概念)

                                                                                                                                                                              再声明全局作用域的变量,无论何时都能被所有函数所使用,这是个非常诱人的特性,但是对全局作用域的过度使用会造成全局作用域污染,这倒是我们用光所有的合适的变量名,也会导致长久占用内存空间,从而很难创建出一个能够长久维护的应用来。所以,对全局作用域的使用一定要少而谨慎。

                                                                                                                                                                              比如,以下的全局污染示例:
                                                                                                                                                                              //全局作用域污染示例 var partyStarter = "starlen"; //我创建了一个全局作用域变量 function pizzaParty(totalSlices,peopleCount) { "use strict"; var fairness = totalSlices * peopleCount; return fairness; } (function () { "use strict"; var body = document.getElementsByTagName("body")[0]; body.innerHTML = "'<p>' '<a href='*'>'partyStarty(26,18) '</a>'+partyStarter+'</p>'"; })();
                                                                                                                                                                              Run code
                                                                                                                                                                              Cut to clipboard

                                                                                                                                                                                全局变量与任何编程语言中的其他东西一样,也有其用途。然而对他的使用尤需谨慎,而且在用之前必须仔细的思量其内容及名称。使用全局变量来设定程序的全局配置数据是个比较好的办法,全局配置包括:基地址(base URL)、目录信息、程序名称,或是一些需要反复使用而重复定义又会造成资源浪费的东西,应该利用每一件东西的长处,而不应该滥用。

                                                                                                                                                                                现在,我将这个变量移动到了匿名函数之中,以清理该文档的全局作用域。合适的位置看起来也更加顺眼,并且在该函数执行完毕时会立即销毁变量,不会占用内存的宝贵资源。
                                                                                                                                                                                //局部变量作用域 function pizzaParty(totalSlices,peopleCount) { "use strict"; var fairness = totalSlices * peopleCount; return fairness; } (function () { "use strict"; var partyStarter = "starlen"; //现在,这个变量的作用域只归此闭包函数所有 var body = document.getElementsByTagName("body")[0]; body.innerHTML = "'<p>' '<a href='*'>'partyStarty(26,18) '</a>'+partyStarter+'</p>'"; })();
                                                                                                                                                                                Run code
                                                                                                                                                                                Cut to clipboard

                                                                                                                                                                                  CSS 美化复选框CHECKBOX-无图片方式

                                                                                                                                                                                  发布时间:2016-09-27, 10:56:36 | 评论:4 | 分类:HTML

                                                                                                                                                                                  今天和大家分享一个不使用图片美化复选框的方式。来看下效果图吧,如下是3种不同状态下的效果:

                                                                                                                                                                                  一. Html结构
                                                                                                                                                                                  <div class="check-wrap"> <input type="checkbox" class="icheck" id="icheck" /> <label for="icheck" class="ilabel"></label> </div>
                                                                                                                                                                                  Run code
                                                                                                                                                                                  Cut to clipboard

                                                                                                                                                                                    注: label 标签的 for 属性值必须指定为 input 的 id 名称。

                                                                                                                                                                                    二. CSS 代码
                                                                                                                                                                                    .check-wrap{ position: relative; height: 24px; width: 24px; } .icheck{ opacity: 0; } .ilabel{ border-radius: 3px; cursor: pointer; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ilabel:after{ content: " "; border: 2px solid #DDD; display: block; font-weight: bold; text-align: center; border-radius: 3px; width: 20px; height: 20px; } .icheck:checked + .ilabel:after{ content: "✓"; border-color: #3f51b5; background-color: #3f51b5; color: #fff; } .icheck:indeterminate + .ilabel:after{ content: "■"; color: #3f51b5; background-color: #FFF; border-color: #3f51b5; }
                                                                                                                                                                                    Run code
                                                                                                                                                                                    Cut to clipboard

                                                                                                                                                                                      1. 将原有的 input 标签透明度设为0

                                                                                                                                                                                      2. label:after 的宽高设置 20px 是因为 border 占据了4px

                                                                                                                                                                                      3. checkbox 的 indeterminate 状态大家用的可能比较少(效果图中的第2个状态),只能通过 js 进行设置,这种情况通常用在树型结构(即:子节点有选中但并未全部选中的时候父节点的状态)
                                                                                                                                                                                      <script> var icheck = document.getElementById("icheck"); icheck.indeterminate = true; </script>
                                                                                                                                                                                      Run code
                                                                                                                                                                                      Cut to clipboard

                                                                                                                                                                                        我经历的三次营销狂欢

                                                                                                                                                                                        发布时间:2016-09-21, 11:20:40 | 评论:0 | 分类:默认分类

                                                                                                                                                                                        作为一个靠管理学吃饭的人,过去两三年,我发现自己在公共言论空间有点不合时宜。一拨又一拨的互联网时髦青年,欢天喜地、敲锣打鼓地在那里大喊,管理过时啦,组织要消亡啦,各行各业产品过剩,简直就可以不要钱白拿啦之类。

                                                                                                                                                                                        我板着个脸过来,一本正经地讲,互联网本质上主要还是一种营销渠道和营销手段,改变不了组织的逻辑和商业的本质(参见我2014年写的《互联网改变的和没有改变的》等文)。不要说别人爱不爱听,我自己先就觉得有点不好意思了。有点像备考期间中学生偷偷开party,不小心被教导主任撞到:“你读书不是给我读,是给你自己读的……” 披头盖脸先来一顿大道理。是非先不论,至少是无趣吧。

                                                                                                                                                                                        可惜企业界不是娱乐界,铁的逻辑和无情的事实从来就这么无趣。

                                                                                                                                                                                        当初互联网思维大潮来势汹汹,大致可以分为小米、互联网餐饮、O2O(含P2P)等几条主线。2016年,几条线相继传来各种各种负面消息,包括互联网金融诈骗案、小米市值戏剧性大缩水、互联网餐饮几家始作俑者一一折戟等等,再加上,几大O2O行业的合并案,如滴滴与优步合并,美团与大众点评合并,携程与去哪儿的合并等等,大多数比较冷静的业界观察者,一般都倾向于认为,移动互联网带来的这一轮喧嚣与骚动,应该是到了水落石出、结帐买单的时候了。这么多投资、这么多青春,这么多发财梦,居然就这样给带进了下水道。我现在讲“I told you so”(早告诉你了),又是另外一种形式的不合时宜。我们还是静下心来,把更深层次的逻辑理一理。

                                                                                                                                                                                        一个麦克风的时代

                                                                                                                                                                                        49年以来,列宁主义在中国建立了一个中心化、垂直性、全方位的政治、经济、社会控制体系,其完整性、强大性和灵活性,在中国是史无前例,估计在整个人类历史上也是罕有其匹。例如,只要中专以上学历、在体制内上过班的人,就知道“档案”这个东西的厉害。单位上有“党政工团妇”,回到家有“朝阳区群众”,原则上讲,你做的任何事情,都有可能被人一一记录在案,加盖公章,装进那个你永远不能打开看的神秘兮兮的牛皮纸口袋。思想控制已经无以复加,更不用说,粮票、布票、肉票这些资源控制方式,转正、提干、调动这些向上移动(upward mobility)的方式等等。

                                                                                                                                                                                        1978年以来的改革开放,往简单里说,几乎可以说是人们用各种各样的方式逃离这个体制、逃离这个无所不在的系统的一个过程。这个体制的一个至关重要的维度是对传播、对大众话语权的控制。改革开放前是无线和有线广播。例如,我的童年几乎是在各种喇叭声中长大的:当时的每个乡镇、每个大点的单位,都有各自的广播系统,一早一晚准点开始广播,根本用不着闹钟。

                                                                                                                                                                                        然后是八十年代以来,电视台的崛起。当年万民空巷,男女老少,大家一齐追《霍元甲》、追《血疑》,比现在的网络粉丝们,不知道要疯狂多少倍。中央电视台,在广大人民群众心目中的地位,几乎是仅次于中南海。

                                                                                                                                                                                        1997年,迎来一个新生事物:卫星电视。湖南卫视、浙江卫视、东方卫视等,从此进入大众的视野。稍微晚几年,互联网也来了,但因为带宽、台式机普及率、内容生产方式等方面的限制,互联网虽然催生了几家门户公司,但在传播方面的威力,并没有完全展示出来。

                                                                                                                                                                                        2009年诞生的微博带来一个小高潮,标志移动互联网的开启。但真正的传播大招,要等到2011年国庆节时腾讯推出的微信3.0。潘多拉的盒子,到这个时候,才算是真正完全打开了。

                                                                                                                                                                                        短短几十年,从全中国只有一个麦克风,到哪里都有麦克风,再到了人人都有一个麦克风(甚至可以说是人人都有一个摄像机)。在中国讲大众传播、讲市场营销,一定不能忘记这段极富“中国特色”的历史。如果说改革开放前是瘫痪在床,八十年代是扶着墙走,今天则是满城找夜店蹦迪;如果说改革开放前是中山装,偷偷自己稍微收一下腰,八十年代是连衣裙,今天是三点式还嫌穿得太多。从那个时代过来的人,都能理解,极度的压抑如何带来极度的渴求,极度的渴求如何带来极度的狂欢。

                                                                                                                                                                                        从全国只有一个麦克风到人人都有一个麦克风,每一次新的传播渠道打开,都会成为一个巨大的轰动性事件。而对于企业界来说,率先拿到麦克风的人或企业势必会以一种极轻巧的方式赚到一茬新的传播红利,然后群情激奋,进入一轮全行业范围的营销狂欢。

                                                                                                                                                                                        第一次营销狂欢

                                                                                                                                                                                        第一次营销狂欢与中央电视台尤其是中央电视台经济频道有关。

                                                                                                                                                                                        1988年3月15日,中央电视台开始允许播放商业广告,开启了它成为事实上中国营销业核心的一个黄金时代。1991年,中央电视台经济频道播出了一部讲郑州零售业竞争的专题片《商战》,点燃了中国营销界的一场狂欢。企业界最火爆的案例是郑州的亚细亚商城,最受追捧的咨询公司是亚细亚商城的策划者“恩波智业”,最受欢迎的讲演者是点子大王何阳……邓小平南巡确认以经济建设为中心的国策之后,企业界对这些“点子公司”、“策划大师”的追逐更加热情了。

                                                                                                                                                                                        我当时刚从人民大学经济类专业本科毕业,市场上很难找到企业管理类图书。印象深刻的是一本讲韦尔奇改革GE的书,一本《定位》,内容很好,但封面上只有书名,没有任何设计,有点像内部出版物,摆在书店里,非常不起眼。而北京大学出版社出版的《恩波智业》,封面上赫然是恩波智业的创始人王力的大幅照片,以一种毛主席的姿态坐在那个年代很少见的宽大真皮沙发之上。所以,很长一段时间,王力之于我,首先是策划大师王力,然后才是中央文革小组的王力,然后才是著名语言学家王力。

                                                                                                                                                                                        这一轮营销狂欢的最高潮是1995、1996两年的中央电视台连续两年的标王山东秦池酒厂的厂长的那句名言:“我们每天向中央电视台开进一辆桑塔纳,开出的是一辆豪华奥迪!”人生在世,失败是磨练,成功是更大的磨练。可怕的不是成功本身,而是成功之后的错误归因。中央电视台的前三大标王,孔府宴酒、秦池酒、爱多VCD,不是衰落,就是破产,甚至创始人锒铛入狱,也许是这种错误归因带来的严重后果的最好写照。

                                                                                                                                                                                        几个月前到广州开会,居然又碰到了胡志标和他的“立于不败”公司组织的一场企业管理培训活动。巨大的易拉宝上,还是熟悉的标哥和他那标志性的微笑。一水儿的穿黑色西服的小伙子,在门口站成两排,每来一个听众,就一齐大声喊他们的口号,震耳欲聋。果然是,“会做的自己做,不会做的就教人怎么做”啊。

                                                                                                                                                                                        第二次营销狂欢

                                                                                                                                                                                        第二次营销狂欢与地方卫视的兴起有关。

                                                                                                                                                                                        标志性事件是2005年湖南卫视第二届“超级女声”的出人意外的大火。当知识界开始意淫粉丝投票如何体现了民主精神的时候,数钞票数到手软、睡梦中都笑出声来的是来自内蒙古的乳业新兵蒙牛公司。“一头牛跑出了火箭的速度!”关于蒙牛公司和该公司创始人的传记类图书都开始大卖,封面上基本上都被类似的血红色的大字填满,从内容到形式,都非常刺激。

                                                                                                                                                                                        我当时已经在中欧商学院任教。内行人都知道,中国商学院老师最痛苦的是没有几个真正靠谱的中国案例可用。蒙牛超级女声策划案的负责人正好是中欧的毕业生,经过多方确认,这个案例的数据、事实还比较靠谱。这么靠谱又活色生香的案例能不用吗?我于是开始在课堂上大讲蒙牛的案例,直到……2008年9月三聚氰胺毒奶粉事件爆发。蒙牛公司深陷丑闻,货物下架,资金链吃紧,创始人向中国企业家聚乐部理事和长江商学院同学“落泪求救”…… 最后,2011年,蒙牛公司被卖给了中粮公司,国字旗一遮,一了百了。一头牛跑出火箭速度云云,仔细想想,其实并不吉利:火箭上去是快,但下来得更快。

                                                                                                                                                                                        地方卫视的传播红利消失得非常快。不仅“加油好男儿”、“中国达人秀”各种满世界开花的选秀节目没有复制超级女声的营销奇迹,连超级女声自身都无法复制自己第二届的成功。十年下来,真正有影响力的,也就2005年的第二届。因为选秀节目而走出一条像样的职业发展道路的,整个中国,也貌似只有李宇春一个人。湖南卫视很努力,请我去讲课,我也希望能帮到他们,可惜,有些客观规律不是我们能够改变的。

                                                                                                                                                                                        这一轮营销狂欢的尾声也许是借力浙江卫视“中国好声音”一时火遍大江南北的加多宝凉茶最近的窘况。一轮又一轮的官司和炒作之后,加多宝传出多名高管辞职和多家分厂停产的消息。虽然一时真假难辩,但靠抓住营销机会而不是企业的全面能力冲上去的品牌,上去得快,下来得更快,应该是一个大概率的事件。

                                                                                                                                                                                        第三次营销狂欢

                                                                                                                                                                                        第三次营销狂欢则是以优酷和微信的崛起为代表。

                                                                                                                                                                                        与传统互联网相比,移动互联网的不同是:语音、图片和影像为主代替了文字为主;自媒体代替了编辑主导;泛娱乐化和碎片话代替了深度思考。原来大家都在一个窗口前一本正经地排着大队,突然旁边新开了一个窗口,而且还载歌载舞,非常开心。最先发现、迅速冲过去的几个人自然狂喜,但很快,几乎几秒钟之内,这个新窗口前的队就与老窗口的队一样长了,如果不是更长的话。移动互联网没有那么神奇,最初的传播红利确实看起来有点惊心动魄,再有定力的人也难免心猿意马。

                                                                                                                                                                                        但过一段时间,大家就会慢慢发现,初期的传播红利瓜分殆尽之后,最后拼的还是企业的全面综合能力。所以,对于大多数主流企业而言,移动互联网的兴起,卑之无甚高论,不过是多了一个营销渠道而已。

                                                                                                                                                                                        当然,这次还是有些不同。中央电视台时代、地方卫视时代中国消费市场还基本上处于“大头”为王的时代,移动互联网才真正让中国进入了“长尾”时代。

                                                                                                                                                                                        换一个说法,主流文化(大头)之外,移动互联网让中国社会的各种亚文化群体(长尾)得以真正形成。散落在社会各角落的年轻人通过移动互联网(微信、微博、直播等),第一次形成真正的亚文化群体,通过这个群体(或代表这个群体的偶像人物)来确认自我身份,进行自我表达,甚至是寄托人生意义。亚文化群体内的成员互相之间高度认同,在一种真实或虚拟的优越感的驱使下,一起宣告、一起消费,一起炫耀,甚至一起对外进行征伐。这种亚文化崛起的代表性事件如《小时代》系列电影的走红、二次元文化的流行、李毅吧(屌丝一词的出处)的“帝吧出征“、虚拟世界里各种网络游戏组织(所谓“公会”)之间的叫板和竞争、直播平台上五音不全的“喊麦大王”年入几千万等等。

                                                                                                                                                                                        亚文化是社会学最基础的概念之一,一些互联网专家造出“社群经济”、“圈层经济”、“粉丝经济”等等概念,吸人眼球,但并不比亚文化的概念更能抓住问题的实质。真正的中国特色是:犹如半个世纪以来队国人房产所有权的压抑带来今天中国的“买房癌”一样,半个世纪以来对中国社会对任何社会横向联络机制的压制,是今天年轻人们的火山喷发一样的对亚文化的激情背后深层次的原因。这种后极权社会的反应过度,也使得我们的这些亚文化的强度甚至一时远超有悠久的结社传统的西方社会,以至于让很多观察者都看花眼,以为其中蕴藏着多大的革命性的商机。

                                                                                                                                                                                        但是,一种亚文化,无论它看起来有多么强大,它有几个致命的问题。

                                                                                                                                                                                        第一亚文化多变,不稳定,不可预测,一两个关键事件,就可能让一个亚文化群体不复存在;
                                                                                                                                                                                        第二;大多数亚文化群体都是由荷尔蒙过剩的年轻人组成,但年轻人总是要长大的,大多数亚文化群体成员一旦上班、结婚、生子,他们会迅速变得比主流还主流;
                                                                                                                                                                                        第三,从商业上来看,更麻烦的是,一种亚文化,它的影响力永远只能局限在一个小圈子之内,一旦突破,它就走向自身的反面,不再是亚文化了。

                                                                                                                                                                                        亚文化的极致时起时就是邪教,人类历史中,敛财最快的方式确实是邪教,但邪教的最大问题是,它是邪教,教主洗脑、控制、利用信众,而不是真正努力去用自己的产品和服务去增进群体内每个个体的福祉,所以邪教基本没有能够基业长青的。打造亚文话群体,确实可以挣到一些传播红利,但一个严肃企业的商业模式和长治久安,多大程度上可以建立这种流沙一样的亚文化群体的基础之上,估计谁也不敢太乐观吧。

                                                                                                                                                                                        不要被啸音迷惑

                                                                                                                                                                                        从麦克风发出的声音传回到麦克风中,声音得到了再次的放大,形成了重合后,麦克风会发出极其尖锐和刺耳的啸音。人人都有麦克风的移动互联网时代,到处充斥着各种自以为是、自我陶醉、自我催眠式的啸声。我们首先要做到的事,首先是自己不要被这种啸声迷惑,不要以为自己能发出那么大的声音;其次,不要被别人的啸声所干扰,事实很无趣:互联网上99%的人发出的声音,不值得我们关注,不值得我们去认真倾听。

                                                                                                                                                                                        互联网通过把企业营销集成在一个统一的信息平台上,极大地提高一个经济体的效率。通过打造一套线上商业基础设施,弥补中国薄弱的线下商业基础设施,阿里巴巴创造惊人的商业价值;通过打造一套线上社交基础设施、弥补中国更为薄弱的线下社交基础设施,腾讯创造了惊人的社会价值和商业价值;通过打造一套线上数据基础设施,百度本来也可以缔造出一个类似级别的帝国,可惜他们好像正在逐渐丧失这个机会。商业、社交、数据全行业基础设施平台基本就这三个,所以,那些一言不合就要复制马云的创业者,还是先洗了睡了吧。

                                                                                                                                                                                        商业、社交、数据三个全行业基础设施平台之外,还有一批互联网公司提供某一行业的基础设施平台(酒店机票预订、打车、法律服务、二手物品交易等),某一类群体的基础设施平台(美图、经期管理、母婴服务、白领、农民工等)。看起来,机会很多,但因为都是平台企业,胜者全得,最后基本上都只能有一家企业生存下来,竞争其实非常血腥和残酷,尤其是到了下半场的时候,还没有一统江山的互联网企业做好思想准备。

                                                                                                                                                                                        至于其他非互联网企业,把互联网当作营销工具用好即可,重心还是要回到磨豆腐上(任正非语:华为二十八年,只做一件事,磨豆腐)。有了互联网营销平台的存在的最大好处是,酒好不怕巷子深,只要你的豆腐磨得比别人好,有的是人会来义务帮你做传播、做广告(想想你的朋友圈,第几次看到任正非在机场的照片了),一心一意发展企业的全面综合能力,全心全意为客户创造价值,持续创造价值,创造别人无法创造的独特价值,自古华山一条路,伟大企业,莫不如此。营销很重要,但不管说得多么天花乱坠,营销只是企业能力的一个方面。而且,还是最容易被竞争对手复制的一种能力。台上一分钟,台下十年功,把手上的活练好,才是正经生意人千古不易的本分。

                                                                                                                                                                                        三次营销狂欢,颠倒众生,意乱情迷,耽误了多少事,耽误了多少人。理解中国过去这段历史,才能理解中国人、中国企业界对于营销、对于策划、对于透过麦克风喊话的不成比例的热衷。大多数人,早年大喇叭听得太多,确实太羡慕那些手持麦克风、掌握话语权,一言九鼎,一言定邦的台面人物了。羡慕归羡慕,时代变了,一定不能入戏太深。例如,弗洛伊德认为,3-5岁的女孩,有点阳具羡慕,其实很正常。但如果长大之后,还继续迷恋不已,发展成为情结,那可能麻烦就大了。

                                                                                                                                                                                        鲁迅说,在中国,搬一张桌子是要流血的

                                                                                                                                                                                        发布时间:2016-09-21, 11:00:19 | 评论:2 | 分类:默认分类

                                                                                                                                                                                        互联网转型为什么这么难?

                                                                                                                                                                                        我家旁边的一所民办大学招不到生,转型做创业园。学生宿舍打掉中间的非承力墙,两间变一间,做办公室;操场篮球架、围栏拆掉,做停车场;再种上几棵树,铺了几片草坪,创业园就算是开张了。过了一段时间,学生食堂重新装修,也成了员工餐厅。窗明几净,杯盘井然,饭菜也还可口,工作日午餐客人不算少,晚饭和节假日就门可罗雀了。大学南门外就是几个还算有点档次的小区,按理说是餐厅很重要的潜在市场,但按照当初大学的管理规定,晚上和周末,南门一律不开。上这种餐厅吃饭,本来就是图个方便,大多数住户自然不愿意绕一大圈从正门进入来吃这顿饭,这市场就难于打开了。我问餐厅经理,为什么不去把南门打开?他面有难色。他承包的是这个餐厅,但负责校园安保的是另外一个部门,协调起来,恐怕没那么容易。

                                                                                                                                                                                        做个吃房租的地主,转型都这么难,惶论其它。这里问题的核心问题很简单,其实就是李克强的那句话:触及利益比触及灵魂还难。管大门的人想,你承包餐厅,赚多赚少,和我有什么关系?如果原来还算认识,那就更麻烦:你而今发达了,才想起来找我来了?如果原来就有矛盾,曾经是竞争对手,那就更是恨不得直接把这门给封死了。鲁迅说,在中国,搬一张桌子是要流血的,开门、关门,自然也不是例外。

                                                                                                                                                                                        历史性的苏东对决

                                                                                                                                                                                        这些年最受业界关注的转型案例是苏宁,包括这场转型过程中他们与京东之间的历史性对决。2014年年报数字出来,这场对决算是落下帷幕了。2010年,苏宁名列全国零售百强榜首,销售额800亿,净利润40亿;京东当时只有100亿,还亏损若干,是一个苏宁不大看得起的一个小弟;2014年,苏宁1091亿,京东1150亿,加上第三方平台则是2602亿,更重要的是,苏宁上半年亏损7.55亿,而京东2014年(按非GAAP会计标准)已经取得0.2%的净利润。不管苏宁将来怎样挣扎,看起来大局已定,他们回天乏力了。

                                                                                                                                                                                        短短几年时间,行业大佬就这样被小弟掀翻在地,很多人又要用“降维攻击”、“价值网络”、 “颠覆性创新”之类玄而又玄的术语来评论了。其实以大多数中国企业的管理水平,造成这些大败局的原因往往更简单:利益之争而已。可以想见,当时苏宁公司转型时,线下部门很自然的反应是:凭什么让我们线下的部门支持你们线上的部门,让你们吃香的、喝辣的,好像是你们拯救了公司,拯救了我们似的,大不了不就大家一起死嘛。(话外音:公司死了你有什么好处?)是没有什么好处,大家一起出去找工作呗。

                                                                                                                                                                                        对于老板来说,是生死大事,对于员工来说,不就是再找一份工作嘛。这是给所有自以为是、单相思、一厢情愿地在那里捶胸顿足、指天发誓的老板的最响亮、最刺耳、最惊心的morning call(叫醒电话)。公司管理水平差、员工内心不认同企业、没有真正建立同舟共济的企业文化,面对转型的时候,各级员工自然会在局部利益和整体利益之间选择局部利益,在当期利益和未来收益之间选择当期收益,大家逐渐集体无意识地陷入一种“大不了大家一起死”的恶性内斗,这是很多传统企业在转型的时侯被行业小辈掀翻在地的悲惨命运背后最直接、最简单、也最重要的原因。

                                                                                                                                                                                        军事化管理的假象

                                                                                                                                                                                        过去几十年中国大多数劳动密集型行业盛行的都是军事化管理,一切行动听指挥,唯领导马首是瞻,容易给人这个企业管理水平很高、内部利益机制很顺、员工士气很高昂的假象。到了需要用bottom-up(至下而上)的方式来管理企业的互联网时代,军事化管理掩盖的各种利益冲突和深层次矛盾就暴露得一览无遗了。看过我的书、听过我的课的朋友都知道我在“智慧型组织”模型中对bottom-up,对平等、参与、分享等原则的强调,以及对各种军事化管理方式各种不无刻薄的嘲讽。可惜十几年来,言者敦敦,听者藐藐。我甚至还产生过自我怀疑,也许中国人真是不一样,如成龙所言,“就是要管的”?现在我终于释然了:智慧型组织仿佛找到了他们的“幽灵军团”,气势如虹,所向无敌,那些看起来很强大的、军事化管理的哥利亚们根本不是对手,这个“幽灵军团”就是互联网!

                                                                                                                                                                                        还是苏宁的例子。苏宁历来被业内嘲笑为“西服电商”,因为不像大多数电商公司牛仔加T恤,他们讲究的是整齐划一、令出即行的军事化管理。在连锁实体店时代,这种管理方式可以支持他们在全国各地攻城略地、复制门店。一朋友转述关于苏宁的一个故事,这种管理风格可窥一斑:一经理与公司闹纠纷,气冲冲地冲进董事长办公室,要找董事长“算账”,话不投机,几近动手。事后,董事长非常生气,要求处理坐在他办公室外面的所有工作人员,理由是:你们看见他冲过来,要为难董事长,你们却没有一个人出手,把他拦下来!好不威风的一个董事长!

                                                                                                                                                                                        国企喜欢在客户面前撒威风,民企喜欢在员工面前撒威风,互联网时代,估计所有这些撒出去的威风都要连本带息地还回来。再举个例子:王健林也素以威风著称,每次出场,后面跟着十几个一水儿黑色西服的高管。老板这么威风,万达电商自然举步维艰。

                                                                                                                                                                                        在一次O2O沙龙上,一位刚离开万达的高管总结万达电商(万汇网)发展的几大障碍。第一个障碍是部门冲突。原渠道与新渠道、原团队与新团队、线上与线下之间的利益矛盾要解决,否则不仅没有协同增效,反倒左右互搏;第二是至上而下的传统管理方式无法适应市场的新变化和客户提出的新需求;第三是强调保守、稳健的传统管理方式与试错、迭代的创新文化之间的矛盾等等。这些都绝不是靠老板一声令下就能解决的问题。与苏宁不一样,综合体里还有很多网络消费无法替代的餐饮、娱乐。可是苏宁兵败如山倒案例在前,王董事长还是要深思啊。

                                                                                                                                                                                        一代人对一代人的战争

                                                                                                                                                                                        利益冲突、管理模式冲突之外,中国传统企业互联网转型更深的一个背景是这场转型背后的价值观冲突和代际矛盾。以50后、60后为主的这些传统企业家,因为他们成长的背景,管理效法最多的对象很自然地是军队,是“毛”,强调权力、权威甚至权术。中国的改革开放和野蛮增长,在很短的一段时间内,给这一代人带来了令人眩目的巨额财富。台风来了,猪都会飞。胆子大一点、运气好一点、吃苦耐劳一点的创业者,基本都能做成一点事情,成为他们所在社会圈的核心人物,为大家所仰望。

                                                                                                                                                                                        这种成功,自然也强化了他们对于等级、命令、控制等传统管理手段的认同,他们中的很多人,甚至把管理等同于等级、命令、控制。而作为互联网“原住民”的85后、90后,大多数人从小没有衣食之忧,在一种低政治化、低意识形态化的消费社会中成长,强调的自然是平等、参与、分享,与信奉权力、权威、权术的老一代格格不入。更新锐的年轻人,进一步要求的是自主、掌控和意义,更是视权力、权威、权术如敝屣。年轻人虽然羡慕这些老一辈的机会和成功,但内心深处,他们其实也有非常瞧不起这些靠台风飞起来的“土豪”们的成分(这个词的流行,本身就说明了这个问题)。

                                                                                                                                                                                        但是更复杂的是,到了这一代年轻人开始闯荡社会的时候,中国社会的利益格局基本形成,金字塔结构基本成型,几乎所有的社会资源基本都掌握在以50后、60后为主的那一代人手上。余生也晚!为之奈何!上一代年轻人在意识形态破灭后还能吼出“一无所有”,重重重压之下的这一代年轻人中的大多数的选择是躲进二次元空间自娱自乐,用“屌丝”、“土豪”、“撕逼”之类字眼嘲笑自己、嘲笑他人,试图用调侃和吐槽的方式消解一切、化解一切。虽然人口结构的调整在开始帮他们的忙,从2012年开始,中国劳动人口数量开始下滑,年轻人越来越少了。以富士康事件为代表,年轻人发现,土豪们对他们的态度发生了一些微妙的变化。然而,最后真正的杀手锏是伴随着他们长大的互联网:好像几乎是一瞬间,整整一代人突然发现了移动互联网对传统产业似乎无远不届的重组和解构潜力!哈哈,过来受死吧,土豪们!你们居然也有今日!传统产业的各个角落,一时都在回荡着这些年轻人带着复仇的亢奋的呐喊之声。

                                                                                                                                                                                        所以,从这个意义上讲,站在马佳佳背后的其实是马加爵。马佳佳来自云南,比她大九岁的这个云南大学的大四学生用一种更直接、更极端、更惨烈的方式展示了这种被逼到墙角的年轻人在代际冲突中所能达到的激烈程度。企业的技术转型从来不是瓶颈,但要同时考虑到技术转型背后的利益冲突,利益冲突背后的价值观冲突和代际矛盾,也许才能算是抓住现在这场方兴未艾的“互联网革命”背后最基础的逻辑和最核心的脉络。

                                                                                                                                                                                        唯一的选择是投降

                                                                                                                                                                                        代际矛盾的提法似乎给了传统企业一个选择,其实他们根本没有选择,原因很简单:世界是你们的,也是我们的,但归根到底,是你们的。世界潮流,浩浩荡荡,逆我者亡,顺我者昌。50后、60后在这场价值观对决当中,唯一的选择是投降,而且是投降得越快越好。投降得快一天,他们的企业被行业小辈掀翻在地的可能性就小一点。物竞天择,适者生存,企业和生物一样,如果不能通过学习,努力改变自己的基因,就会被基因更好的其他物种淘汰掉。所以,从这一个角度讲,未来大家将要看见的波澜壮阔的行业变化,与其说是因为偏技术性维度的所谓“颠覆式创新”所导致,不如说是因为传统企业的傲慢自大、固步自封、跟不上年轻一代人的价值观而产生的一个社会性的结果。

                                                                                                                                                                                        所以,企业要想转型,首先要解决老板的价值观问题。抓住这个牛鼻子,多大的牛都跟着你走了。

                                                                                                                                                                                        我和同事们这些年做私人董事会,很大程度上要解决的其实也是这个问题。作为一个企业主,你有没有发自内心把你们公司一线年轻人当人看、尊重他们、给他们职业发展的空间?实话说,我们跟一百个老板提出这个要求,真正听得懂的、有反应的也就十几个。大多数老板还是习惯性地把人当成自己挣钱的工具,当作资产负债表上的数字,所以他们企业的文化、他们企业的气氛、企业里的味道自然就不对。如果老板有点反省能力,能意识到时代变了,努力用bottom-up而不是top-down(至上而下)的方式去管理企业,充分尊重年轻人,和年轻人平起平坐,大家一起出主意、想办法,互联网的转型根本不是什么大问题。但如果还是原来的野蛮增长的心态,用颐指气使的态度跟年轻人沟通,人家宁可在街头流浪,住咖啡馆创业,也不给你写这几行代码。

                                                                                                                                                                                        技术系统和社会系统是相辅相成的。互联网看起来属于技术系统,但它带着与生俱来的独特的社会属性和人文属性。互联网的这种独特的人文属性与中国传统社会的异质性,远远超过了它在技术上的异质性。所以,互联网对于中国,与其说是技术革新,不如说是人文革新。学理的说法,它其实是一个surrogate(替代)变量,表面上发挥作用的是技术,其实发挥更大作用的是人文与价值观。看不到这一点,关于互联网转型的很多问题就看不透。1949年之后中国大陆的人文学科和社会科学基本不存在,大多数人认识不到人文与社会维度的重要性。尤其在商业领域,总觉得这些软东西好像与收入、利润等硬指标没有太直接的关系。然而,一个公司的价值观(values)往往决定他们的市场价值(value),要想公司bottom line(底线,即利润)好,你就得充分尊重底层(bottom)的人,世界上的事情,往往就这么奇妙。
                                                                                                                                                                                        你好,残忍屏蔽广告

                                                                                                                                                                                        确定要清除编辑框内容吗?

                                                                                                                                                                                        该删除操作将不可恢复。

                                                                                                                                                                                        删除 取消

                                                                                                                                                                                        激活Windows

                                                                                                                                                                                        转到"设置"以激活Windows。