HTML5
SharePoint HTML5特性之响应式布局 实例教程
SharePoint 2013基于HTML5的响应式的布局，就简单的尝试了一下，感觉还不错。当页面在不同的浏览器可视区域上浏览的时候，会通过不一样的css文件来进行展示，使用户在浏览页面中能尽可能的达到最佳体验。 下面简单看看效果，在1380px浏览器可视区域中浏览，下面的css生效：（浏览器的可视区域为1380） 在920px浏览器可视区域中浏览，下面的css生效：（浏览器的可视区域为920px） 在600px浏览器可视区域中浏览，下面的css生效：（浏览器的可视区域为600px）
SharePoint Iframe 报错“此内容不能显示在一个框架中”
在之前的SharePoint站点iframe引用中，我们遇到过下面的问题，就是其它系统或者不通环境的SharePoint站点，引用SharePoint页面会报错“此内容不能显示在一个框架中”，之前我们采取了解决方案的办法。 今天，无意中翻看msdn，发现了更加简便的方法，分享给大家。原理介绍 在大部分情况下，如果网页在响应中发送 X-Frame-Options HTTP 头，则该网页将无法在框架中显示。默认情况下，SharePoint 网页包含 X-Frame-Options 头。如果使用应用程序 Web 承载的 SharePoint 网页，您可能会遇到以下错误（如上图所示）："此内容无法在框架中显示"。This content cannot be displayed in a frame To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame. What you can try: Open this content in a new window 请记住，当网页在框架中显示时，特定方案易受"点击劫持"攻击。请仔细评估您的应用程序部件方案，以确保不存在点击劫持攻击风险。 如果在应用程序 Web 中承载的页面不易受点击劫持攻击，则您可以使用 AllowFraming Web 部件抑制页面响应中的 X-Frame-Options 头。下面的代码示例展示如何在 SharePoint 页面中使用 AllowFraming Web 部件。 <webpartpages:allowframing id="AllowFraming1" runat="server"/> 解决方法 使用SharePoint Designer打开该页面（特别的，修改的是要被iframe方式引用的页面）的页面布局，加入如下图代码：
SharePoint 创建web应用程序报错＂This page can’t be displayed＂
错误描述This page can’t be displayed•Make sure the web address http://centeradmin is correct.•Look for the page with your search engine.•Refresh the page in a few minutes.发生过程 创建web应用程序，填写完基本信息以后点击确定，就是“这不会花费很长时间”的提示，然后就报错了，并且SharePoint和iis的日志中均没有记录错误。错误截图解决方案
详细解析HTML5开发移动项目经验谈
说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择native app和web app还争论了一番，最后综合考虑，我们选择了web(我们选择了h5)开发。但从这两种开发模式的特点来说，从它们诞生之日起就开始了不断的争论，孰好孰坏，本文不作探讨，只是简单罗列下本人开发遇到的问题和最终的解决方案。1. 响应式web设计说到这个，移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。我们在PC端常用的两种布局方式就是固定布局和弹性布局，前者设置一个绝大多数电脑能正常显示的固定宽度居中显示，后者则采用百分比。关于这两者讨论的文章很多，有兴趣的自己查阅下，我今天要介绍的就是相信你已经听过的“响应式布局”，响应式布局意味着媒体查询，这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。响应式web设计并非新的技术，只不过将已有的开发技巧(弹性布局、弹性图片和媒体查询等)整合在了一起，并命了这个听起来很牛X的名字——响应式web设计。犹如当年的Ajax一样，将已有的技术重新组合发挥新的作用。(1).媒体查询初探。媒体查询并非新出现的技术，如下：其中就使用了媒体查询，通过 标签的media属性为样式表指定了设备类型，当然CSS3时代的媒体查询更加丰富。发现了他们的区别吗?对，不只是针对设备进行适配，而且加了一个条件，就是当设备纵向放置的时候才匹配，咱们再看一个。
HTML5+CSS3城市场景动画教程
最近一直在研究HTML5的动画表现，特别是在移动设备上的呈现。在上一篇文章《盛开的CSS3梦幻荷花》中提到如何用css3制作丰富动画效果的两个思路，当然除此之外，结合使用javascript脚本语言将可以实现更加强大的动画效果以及交互动作。 今天就为大家分享一个用HTML5+CSS3制作的城市场景动画，动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果；除此之外，页面的视觉效果采用了插画的设计风格，希望大家会喜欢。这个示例中的HTML结构采用了HTML5的语言来编写，代码将更加的简洁、结构更加清晰易懂。从下面的代码可以看出示例中的每个元素是独立的，最后再重组成一个完整的动画效果。<section><div class="stage"><div class="nightOverlay"></div><div class="skyline"></div><div class="beans"></div><div class="ground back"></div><div class="ground mid"></div>
十分钟零代码实现HTML5视差滚动特效
视差滚动是最近出现的一个比较火的站点视觉效果，适用于做整站(mini-site)也可以做小动画。通常来说，要使用JavaScript和CSS手工编代码来实现视差滚动效果。本文来介绍如何使用Edge Animate，在十分钟之内，无编码，无压力地实现类似效果。在ipad和我的HTC One上，动画非常流畅，你也可以在你的移动设备上试一试: DEMO上述动画用到的图片资源是作者厚颜无耻的“借”自一个视差滚动效果JS库：spritely.net 。非常感谢。在本教程发布的时间，Edge Animate版本为1.5，可以在Adobe云创意平台上免费下载。 您只需要在注册地址注册即可登录下载。Edge+Animate+Tutorial+4.zip 本教程用到的素材可以在项目解压后的images目录下找到，包括：本教程不会逐步来介绍如何实现上述动画，在上述动画中用到的一些技巧在之前教程中也有介绍过，比如如何使用SpriteSheet来生成逐帧动画 。生成元件在上面的视差效果动画中，背景和前景始终在不间断的滚动。这是通过操纵一幅图片完成的。打开Edge Animate，新建一个作品。快捷键Cmd+I/Ctrl+I导入背景图片hill2.png，在舞台上选中该图片后，快捷键Cmd+Y/Ctrl+Y将其转换成一个元件(Symbol)，命名为symHillBack。结果如图：在舞台右侧的Library面板下的Symbol子面板中能看到“symHill”。现在，你可以删除舞台上symHill实例。我们来开始编辑symHill元件。平移图片hillA