HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 谋智火狐资深软件工程师张云龙:HTML 5解密

谋智火狐资深软件工程师张云龙:HTML 5解密

  【CSDN现场报道】2012中国软件开发者大会(SDCC)于9月8-9日在国家会议中心召开,本次大会由CSDN、《程序员》杂志、ITEye 合办。作为年度最具实战的技术盛会,大会云集了来自国内外一线互联网和企业级软件公司的实战专家,就高可用性系统架构、海量数据挖掘、开放平台服务与架构、智能推荐系统、异构计算等话题和参会者进行了深入分享与探讨。

 

  谋智火狐资深软件工程师张云龙给我们带来了《HTML 5解密》的演讲,主要给大家解决的问题就是,首先告诉大家什么是HTML5,在大家解释什么是HTML5之后,给大家铺了一小点路,让大家在演讲的基础之上再去深入研究。

 

  

 

  谋智火狐资深软件工程师张云龙

 

  以下是演讲实录:

 

  HTML5包括了第五代,多了新的标签,还有CSM3,还有新的编程的接口,重量级大块的,扩展外部表现力的这些语言,还有一些小的。如果严格地说,SM这个接口不包含在HTML5里面,因为现在的技术已经更加广泛使用了,大家如果看到关系词里面,还有DND,这就是一些小的知识点。

 

  在HTML5里面有一些新的标签,左边在4.0.1的时代,用ID去标明区块的含义,标明含义的主要用区块,一个主体的部分呈现页面的文章,比如像 Facebook,人人网,现在这种包括微博,左边的一个主体,Facebook是左中右三栏显示,像这种情况到右边来,其实增加了一些语音型的标签。现在可能在IE9以上,最新版本里面,国内这种IE低版本情况比较严重,有一些特殊的原因。在这些标签里面,大家在底层的浏览器解析的时候,Header没有太大的区别,很多Web应用,或者写了一个网页,不光是面向这个网站的用户,还有一些别的服务可能会抓取,最明显就是搜索引擎。

 

  在原来的情况下,不太容易对这个结构进行解析,如果用比较明显的语义化的标签,搜索引擎就会完全检索,这样能提高检索速率。比如说检索当前这篇文章的内容,去解析存储的时候,它就可以直接定位到这个标签的内容,因为它知道这是页面的主体内容,这只是它的特性的一小部分。

 

  后面是一个form,表单的提交是不可避免的,因为表单的使用很多,大家都在用,但是用原来的表单又有一些不方便,正是因为不方便,为了验证表单的一些东西,就会很麻烦不停写一些很简单的片段,不厌其烦。所以现在的HTML5,浏览器里面会支持一些新的表单属性,支持大家做这种验证。就是上面呈现出来的样子,右边的文字就是它的源代码。原来大家写一个表单的时候,必须写在表单的内部,但是现在其实可以在任何一个地方写一个元素,并不一定要把这个元素写在这个form里面。这种情况下要提交表单,它就会提示让输入一些东西,等输入完之后,这个表单就可以提交了。与这个类似的,必须写一个校验的格式,但是这两个不能满足通用的需求,所以它还有一个属性,这样就大大拓展了它的作用,包括在国内的使用,校验身份证号什么的,它会提示这个书写有问题。

 

  下面这个是说有一个属性,要引导用户告诉他想让他输入什么内容,一般有这种东西,进去就可以输入了,没有进去就是一个灰的情况。当一个表单提交的时候,表单提交内容会被浏览器记住,这个记住的顺序就不能控制了,根据用户历史提交的先后顺序,可以置顶一些内容提供给用户,但是这个只是一个使用之一。最底下是一个进度条,大家从这个进度条会发现,其实它是调用了内部底层的东西,进度条是浅蓝色的,还有橘黄色的东西。

 

  CSS3,HTML5新的标签就比较简单了,大家比较好理解,HTML5在整个概念下有更多更广泛的标签,大家有兴趣可以去研究一下。这里面分布的,单项的,为了让大家比较好理解,展现一些HTML5里面的一些标签,这里面显示的Video并不是插件显示的,是HTML5之下,浏览器已经支持了某些视频的播放,写一个video标签就可以了,后缀是webm,这个好处不光是标签,后边要讲一些新的东西,用video标签或者一些插件去呈现视频,举个例子Flash插件,用GS访问它,没有办法访问,可以拿GS去控制video。

 

  中间这个就是CSS的一个例子,比如现在这些效果,因为没有写任何的GS代码,可以做这样的一些动画,后面的这些东西。shadow,这是渐进的,边缘会深,中间会浅一些。在CSS3里面是渐进的变化,旁边这个只是在6个格里面右下角,它是WebGL,是3D的模型,它叫WebGL,也是因为它的接口写法,为了让那些原来用OpenGL进行过渡。原来做一个动作是这样的,没有什么过程,直接从左边跑到右边了,只要简单加一句,火狐下面就有一个前缀了,大概写法都是差不多的,主要是告诉它变化,把它挤到左边或者右边,变化的时间,变化的形态,用户体验就明显比原来好很多,这只是一个简单的小小的解析。

 

  下面这是比较综合的,现在页面上这个框子的显示,这种透明显示,包括它这些洞,都没有任何代码。其实这个文档更加简单,6个面,合并,大家可以看到左边,右边,利用旋转变形这些东西。

 

  后边是一些编程的接口,一系列的编程的接口。第一部分是File API,可以从本地随便找一个图片,这样就显示出来,这个跟咱们原来的显示不太一样,现在并没有连接网络,也没有开WiFi,传统的文件,要让用户上传,一般都是提交表单,把图片传到服务器上,服务器传回这个图片的地址,把这个地址嵌入到里面。现在其实并没有把图片传到服务器上,这个东西早就有了,叫内敛图片的形式,做了一般编码,把这个图片的编码形式显示在里面,就在页面上显示出来了。目前有一个可以作为使用这个技术的亮点,可以让用户上传前做一个预览,可以减少带宽,也比较干净,把图片真正传到服务器上。

 

  在HTML5时代,如何去做2D的绘图,推动开放接口,当初在创建的时候,其实就借鉴了很多JAVA的书写,编写习惯,因为在那个时候JAVA比较流行,程序员比较接受,用得比较好的一种语言,它在书写上尽量用JAVA语法形式,新增加的编程接口也是沿用了这些东西。当看Canvas的时候会觉得很容易,这三个图形可能很多朋友会觉得用原来的CSS的一些技巧也可以做出上边这种样子,其实现在这个是一个Canvas,拿这个定位到源代码的时候,就会发现它是一个Canvas的区域,自己拿程序,自己去写,去画UI,可以在节点里面申请一个Canvas,用编程语言去画。

 

  当大家在看到Canvas接口的时候,所谓的操作很简单,还像大家一样,中间申请了Canvas的区域,也作了一个校验,支持浏览器到了一个程度,就可以做一些事。可以在浏览器,在页面上画出来,首先从导入到页面上的一个原始图片,以它为基础,可以把它通过接口读取出来,读取到这个接口之后,其实这就是一个pix的速度,集合,可以把这个图片的像素点变一下,RGB三原色,下面这个图片和上面对比,上面是白色的下面就是黑色的,以此把像素点变了一变。

 

  WebGL的例子,这个比较简单,一个玩偶的网站,当监测到浏览器可以支持WebGL的时候,就可以用3D的形式来展现一下。比如现在切换到3D的情况,可以360度角去察看。HTML5的一些演示,有些工程师把C语言,C++语言转化,移植了一款游戏,可以跑得很好,但是必须连接网络,比较麻烦,大家有兴趣可以去看一下。那个工程师展示了很多3D的效果,有很多也已经可以呈现出来了。

 

  后面这个大家接触得比较多,比如说github这个网站,就会造成浏览器的前进后退按钮失效了,也可以借助某点,不是那么直接,或者也不是那么正规。但是在HTML5里面是可以进入,或者是控制的,但是有一个前提,不能改变它的域名,连子域名也不可以。

 

  CSS里面的特性,在今天显得更加有用,在今天大家不光是拿电脑来上网了,更多可能用一些PAD,或者手机尺寸的东西,这就可以监测到用户终端的屏幕尺寸。如果用户他的尺寸,更容易工程师的分离,整个逻辑端的代码只有一套,CSS会根据用户屏幕尺寸的变化有几套代码。现在这个网站是尽可能让你的内容全部让用户更友好看到,所以随着你的页面尺寸变化,它网站的排版就会自动发生变化,要定义在不同的浏览器情况下有不同的呈现形式。

 

  最后有一个很小的例子,一个小时钟,简单说明一下它的应用场景,作为浏览器,还是推荐大家优先选用HTML5和CSS,也就是HTML标签和CSS 去渲染你的页面,浏览器可以提供给你强有力的支持。比如说真要做出像现在这样一个东西,或者有一个局部,如果觉得HTML5不能达到要求的时候,就可以申请Canvas空间去做,今天的演讲就到这里,谢谢大家。

       文章来自:CSDN

【编辑推荐】

  1. 外敌重重/自绊自脚?HTML5普及的血泪史

  2. Facebook产品经理:要以长远眼光看待HTML5

  3. Grant Skinner称HTML5并非游戏的最佳选择

【谋智火狐资深软件工程师张云龙:HTML 5解密】相关文章

1. 谋智火狐资深软件工程师张云龙:HTML 5解密

2. 29岁软件工程师高压生活状态致肿瘤破裂大出血

3. 软件工程师必学的9件事

4. 苹果工程师:iPhone5真实存在

5. 微软正寻找Skype for Windows 8 app工程师

6. 怎样才能成为优秀的前端开发工程师

7. GDC China 2011–资深业界专家聚首齐分享

8. Qualys工程总监:HTML5强大功能背后的安全陷阱

9. Opera 11.60最新Beta发布,全新采用HTML5解析算法

10. 谷歌开源Gumbo:纯C语言实现的HTML5解析库

本文来源:https://www.51html5.com/a2855.html

点击展开全部

﹝谋智火狐资深软件工程师张云龙:HTML 5解密﹞相关内容

「谋智火狐资深软件工程师张云龙:HTML 5解密」相关专题

其它栏目

也许您还喜欢