文章列表
黄龙 于 8个月前发表 1065 0 1
webcomponent是一个新的浏览器功能,为web提供了一个标准组件模型,包括以下几个部分: * Shadow DOM * Custom Elements * HTML Imports * HTML Templates SHADOW DOM是什么 直接翻译是 影子文档对象模型。 定义:Shadow DOM 是一个 HTML 的新规范,其允许开发者封装自己的 HTML 标签、CSS 样式和 JavaScript代码。 使得开发人员可以自定义诸如 <input type="range"> 这样的一级标签。 我们就用range组件来来解释Shadow DOM <input type="range"> 打开Chrome的开发者工具,点击右上角的"Settings"按钮, [http://7tszky.com1.z0.glb.clouddn.com/FhB6-IZ9B8FNQOUq-LbQugtNXwU9] 勾选“Show user agent shadow DOM”,
8个月前
HTML&HTML5
helinjiang 于 8个月前发表 1536 0 1
本文讨论的主题是 SVG Path 动画(路径动画)。之所以要讨论这个话题,是因为在项目中有要求用到它。所谓 SVG Path 动画,就是让图形有像人实时绘制一样的动画效果,就比如下面这种: [http://7tszky.com1.z0.glb.clouddn.com/FuRRdy4-sjg-2mUYyuY-BDXTCSPD] 1. 基础知识 开始 SVG Path 动画之前,你需要先准备一些基础知识,主要是SVG是什么,以及 Path (路径) 和 Stroke (描边)这两个东东。 1.1 SVG SVG 指可伸缩矢量图形 (Scalable Vector Graphics),因此,SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。SVG 除了制作图像之外,还有各种用途,比如动画、 ICONFONT等。 看看兼容性: [http://7tszky.com1.z0.glb.clouddn.com/FnS2ipxN6osNjRd3rVAwz1UDHmkU] 1.2 PATH(路径)
8个月前
HTML&HTML5
json 于 1年前发表 2474 5 0
离线存储的作用 1、用户可离线访问应用,这对于无法随时保持联网状态的移动终端用户来说尤其重要 2、用户访问本地的缓存文件,通常意味着更快的访问速度 3、仅仅加载被修改过的资源,避免同一资源对服务器多次的请求,大大降低了对服务器的访问压力 MANIFEST是什么 manifest文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容),支持manifest的浏览器,会将按照manifest文件的规则,将文件保存在本地,从而在没有网络链接的情况下,也能访问页面。 浏览器支持情况 [http://7tszky.com1.z0.glb.clouddn.com/Fn7F_siZ7NPA3eJ7Z-CICBhzwPTV] 从图中可以看出主流浏览器均支持应用程序缓存, 除了IE 如何用 如需启用应用程序缓存,在文档的 <html> 标签中包含 manifest 属性: <!DOCTYPE HTML><htmlmanifest="demo.appcache"><body> The content of the document...... </body></html>
1年前
HTML&HTML5
刘起 ,教程在手,天下我有 于 1年前发表 850 0 0
Sass的数据类型可以说是一个大家庭了,其数据类型中的数字、字符串、列表、颜色和布尔型,涵盖了大多数我们的需求。但是,正如一个框架开始的演变,在这个数据类型中还缺少一个关键性的工具:关联数组。 这里创建了一个变量$objects,并且给他赋了一个列表值。 $objects: (carrot, salt, chicken); 列表可以同时定义多个数据,但他不像数组一样有对应的key,没办法来分配上下文,也没有指数来索引这些数据。所以让我们看看如何创建一个关联数组(Sass中称之为Maps)。 这里有三个相同的值,对应添加了一个key,并且赋值给变量$objects。 $objects: (vegetable: carrot, mineral: salt, animal: chicken); 正如你所看到的,这个和列表长得非常的相似。你甚至可以在其上面执行列表相关的功能。这里变量$objects保存了三个值,每个值有一个对应的key。如果我们想要索引出salt值,我们并不需要知道他在哪个位置,我们只需要在传递其对应的key给map就行。
1年前
HTML&HTML5
刘起 ,教程在手,天下我有 于 1年前发表 1560 0 0
编者按 :自2013年Facebook发布以来,React吸引了越来越多的开发者,基于它的衍生技术,如React Native、React Canvas等也层出不穷。InfoQ精心策划“深入浅出React”系列文章,为读者剖析React开发的技术细节。 React最初来自Facebook内部的广告系统项目,项目实施过程中前端开发遇到了巨大挑战,代码变得越来越臃肿且混乱不堪,难以维护。于是痛定思痛,他们决定抛开很多所谓的“最佳实践”,重新思考前端界面的构建方式,于是就有了React。 React带来了很多开创性的思路来构建前端界面,虽然选择React的最重要原因之一是性能,但是相关技术背后的设计思想更值得我们去思考。之前我也曾写过一篇React的 入门文章 [http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react] ,并提供了示例代码,大家可以结合参考。
1年前
HTML&HTML5
何璇 于 1年前发表 3414 1 0
移动端web开发基本上分为三种: * 移动端网页开发 传统的页面开发,可以参考手机腾讯网。 * 移动端web app开发 简单来说就是在开发中使用一些浏览器私有的方法,使得web页面拥有一些native的功能。 * hybrid app开发(在此不谈) 简单来说就是通过写特定的代码生成跨平台的web app,类似react,phonegap,cocos2d等。 由于本身没有深入移动端开发,但也可以预见一些移动端开发会碰到的问题: * css与js跨平台的问题 * h5及诸多新特性的使用 * 响应式布局及屏幕分辨率问题 * native交互的使用 * 调试方法 * 性能优化 * 等等 当前移动设备的市场,主要考虑android,ios,windows三大平台就可以了。国内的话注意本身机器是可能安装有QQ,UC等浏览器的,还要考虑这方面的支持。在此入门只考虑webkit内核就可以了。 接着,针对于前两种开发模式,还是有必要了解一下移动端浏览器关于viewport的概念! CSS像素与设备像素
1年前
HTML&HTML5
zzbozheng 于 1年前发表 1855 0 0
最近在用管理后台配置数据时,发现辛辛苦苦配置好的表单无缘无故地被覆盖,之后了解到由于我们都是在同一台开发机上做开发,难免会遇到其他同学做数据变更时覆盖掉自己的配置数据。于是我决定在表单配置里增加一项 “配置操作” 功能来解放自己双手以及惠及他人。 用什么方式保存? 1. 找后端同学去帮忙做保存? 2. 把配置数据都保存到 localStorage? 3. 把配置数据都保存到本地文本? 然而看到后端同学繁忙的景象之下,默默地放弃了,所以忽略第一点。如果把数据都保存到 localStorage,那么我是不是还要做一个界面来管理这个配置数据的版本呢,而且还可以选中某个版本快速还原,但这些都需要一定的工作量,localStorage 的数据也不方便导出给别的同学。如果我只用前端技术直接把配置文件保存到本地,那前面两个问题都不存在了,还会带来一个好处就是:拿到这些文件,发布到现网时我可以直接导入,而后端同学只需要运行创建表文件和上传相关的java文件就足够了,减少后端同学的工作量。 实现方式
1年前
HTML&HTML5
张颖 ,认真认真 于 1年前发表 1731 0 0
简介 HTML5的Device API中提供了几个DOM事件,可以获得设备的物理方向及运动的信息,API提供的数据不是来源于原始的传感器信息,而是来源于设备上的陀螺仪、加速计以及指南针等。 * deviceorientation事件,提供了设备的物理方向信息,表示为一系列本地坐标系的旋角。 * devicemotion事件,提供了设备的加速信息,表示为定义在设备上的坐标系中的笛卡尔坐标以及设备在坐标系中的自转速率。 * 实际上还有另一个事件compassneedscalibration,用于罗盘信息校准,其浏览器支持性较差,就先不讨论了。 首先我们来关注一下deviceorientation和devicemotion这两个事件的兼容性:[http://7tszky.com1.z0.glb.clouddn.com/Fmqd30hUCnRcBq2a3Sgn76g0fGF4] 只能算是部分支持,所以在使用时,首先需要检测支持能力,很简单: if (window.DeviceOrientationEvent) {
1年前
HTML&HTML5
niconico 于 1年前发表 1195 0 1
[http://7tszky.com1.z0.glb.clouddn.com/FvIbI00PwVFN2LINuuLhy-Mv4iMG] 深度操作系统是由英特尔开源技术中心创建的一个基于Blink/Chromium内核的开源HTML 5引擎,通过全方位的创新和优化提升HTML 5的体验,可帮助开发者迅速构建跨平台的Web应用,致力于为全球用户提供美观易用、安全可靠的Linux发行版。 在创立之初,英特尔就与深度科技达成重要合作关系,双方将携手助力现有Web应用迁移至Linux平台,对丰富Linux平台应用的多样性,提升Linux平台体验将有极大的促进作用,目前深度商店中已上架诸多备受欢迎的Crosswalk Project应用。 深度操作系统15更加注重国际化,拥有全新的镜像源加速(CDN加速)功能,多国语言支持已攀升至30种,新增马来语、保加利亚语、瑞典语、克罗地亚语、日语、韩语、芬兰语、西班牙语(拉丁美洲)、印地语(印度)、乌克兰语等多种语言,方便来自世界各地的开发人员体验深度操作系统的无限魅力!
1年前
HTML&HTML5
helondeng 于 1年前发表 7392 4 1
最近做产品小A的需求,设计到图片的上传问题,整理一下。 PC上传图片 基本结构 1. form[enctype="multipart/form-data"] 2. input[type="file"] 3. 上传完毕后,获取图片url,显示到页面上 问题 1. 图片要上传完毕后,才能显示 2. 压缩上传 H5 如何解决 1. FileReader 2. canvas FILEREADER FileReader可以将File对象转化成base64,这样可以优先展示图片,然后处理上传操作。 var fr = new FileReader(); fr.readAsDataURL(file); fr.onload = function(e) { $('img').attr('src', e.target.result); }; FORMDATA 实际的上传操作,大多是ajax处理的,FormData可以用来构建form表单。 var fd = new FormData(); fd.append('filename', file); $.ajax({
1年前
HTML&HTML5
coolriver 于 1年前发表 4983 2 1
1. SERVICE WORKER的身份 Service的意思是服务,Worker的意思是工人,那么Service Worker的意思就是服务员。这个员工是2014年6月HTML5新招的实习生,目前在试用中。在此之前,已经有一位老员工,它叫Web Worker。那么问题来了,Boss是谁?Boss就是浏览器。准确来说,每个页面的javascript运行主线程都是一个Boss。 这里先谈一下大的背景。Boss很厉害,在页面上指点江山,呼风唤雨。但他有个局限:同一时刻只做一件事( 单线程 )。当一些很耗时的杂事让Boss去处理时,在处理的过程中他就无暇顾及其它重要的事了。在用户看来,页面没人管了,Boss不干事了!这时Boss就很郁闷。为了保证Boss能处理更重要的事情,董事会( W3C )终于招聘了一个新员工:Web worker。这下,Boss终于可以从耗时的杂事中解放出来了,他只需要把Web
1年前
HTML&HTML5
刘恒兵 ,永远不要怀疑一个人的潜力! 于 1年前发表 3021 6 1
感言 终于有时间停下来来回顾一下 2015上海Qcon [http://2015.qconshanghai.com/] 分享 《Hybrid App极限优化解决方案》 [http://2015.qconshanghai.com/speakers/201931] 旅途。不喜欢总结,往往是比较痛苦的,些许时间之后回过头来,发现部分细节已然模糊。不得已要求自己写点什么,哪怕随便写写,给自己看也好,给其他人参考也好。总归于相忘于历史较好。 首先很感谢 Qcon [http://www.infoq.com/cn/qcon/] 这个大平台,也感谢组织者 @臧秀涛 [http://weibo.com/zangxiutao] 全程的鼎力帮助。特别感谢 @郝培强 [http://tinyfool.org] 老师的支持,有幸能和@罗升阳、@ 赵世婚、@李跃辉、@胡文江(白衣)、@董一凡 几位大牛一起分享《移动开发新趋势》这个专题。 心路历程 “一次收获颇多的成长历程”,用这句话概括,最适合不过了。至于聊到收获,大致概括为:
1年前
HTML&HTML5