先来说一道面试题吧，“说一下，web 2.0 和web 1.0的区别？”

官方的解释是这样的：

　　Web1.0 的主要特点在于用户通过浏览器获取信息，Web2.0 则更注重用户的交互作用，用户既是网站内容的消费者（浏览者），也是网站内容的制造者。web1.0与web2.0最大的不同就是在web2.0之中个人不再是互联网信息被动的接收者,而是作为一个主动者参与到了互联网的发展之中!用户不再是一个单纯的浏览者而是成为了互联网这块大网的编织者,使用者与传播者!由Web1.0单纯通过网络浏览器浏览html网页，模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。

　　再来引申说一下web 3.0,web 3.0之前的个体地位“唯中心论”。要么以门户为中心，要么以个人为中心。而web3.0的提法是完全的去中心，无中心概念。只有利益圈和利益链的概念，也就是只有起点或者甚至没有起点，如在那个例子里，博客大赛是一个利益链的起点，如果最终的终点回到博客大赛上，那就无所谓起点，每个参与方都可以算是一个利益的起点。你只要是参与进来，你就可以处于每个利益的节点，实现利益共享。

***************************互联网新贵  前端工程师*********************************

那么说到web 2.0, 我们来说说承载web 2.0 发展所需要的一些前端的技术：HTML4; HTML5; CSS; DOM; JQUERY; BOOTSTRAP; JAVASCRIPT; AJAX;下面我们就从技术角度对这些中的内容做一些整理和总结：

****************************************** HTML 5 start******************************************************

先来说说html5中的<video>标签，(取代了传统的通过插件播放Flash之类的方法)。<video>视频标签;<audio>音频标签;draggable="true"可拖放属性;标签<canvas>结合JavaScript来在网页上绘制图像。接下来我们分析一个雪花的案例源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<!--meta标签提供有关页面的元信息, 放在文档头部, 处于<head>标签内部-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width,hight=device-hight,minimum-scale=1.0,maximum-scale=1.0,ser-scalable=none"/>

<title>3D雪花飘落场景动画特效</title>

<style type="text/css">

body { 
margin: 0; padding: 0; position: relative; background-image: url(images/xh.jpg); 
background-position: center; /*background-repeat: no-repeat;*/ 
width: 100%; height: 100%; background-size: 100% 100%; }

</style>

</head>

<!--
javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。
比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。
因而除了部分需要在网页中输出内容、调整显示的JavaScript必须放在<head></head>之间，
一般的JavaScript放在<head></head>和放在<body></body>之间从执行结果来看是没有区别的，但是有如下的经验规则：
1.当JavaScript要在页面加载过程中动态建立一些Web页面的内容时，应将JavaScript放在body中。 
2.定义为函数并用于页面事件的JavaScript应当放在head标记中，因为它会在body之前加载。
采用这种方法，页面就不会被脚本搞得一团糟，易于阅读，在每个页面中，总可以在同一个位置找到脚本。
-->

<body id="body" onLoad="init()">

<script type="text/javascript" src="js/ThreeCanvas.js"></script>

<script type="text/javascript" src="js/Snow.js"></script>

<script type="text/javascript">

    var SCREEN_WIDTH = window.innerWidth;//

    var SCREEN_HEIGHT = window.innerHeight;

    var container;

    var particle;//粒子

    var camera;

    var scene;

    var renderer;

    var starSnow = 1;

    var particles = []; 

    var particleImage = new Image();

    //THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );

    particleImage.src = 'images/ParticleSmoke.png'; 
<!--在上面，看到这个标签<body id="body" onLoad="init()">时，会执行-->

    function init() {

        //alert("message3");

<!--
document.creatElement('');的用法：
创建元素‘’到当前的文档，(创建div元素到当前的文档)
-->

        container = document.createElement('div');//container：画布实例;

<!--
document.body.appendChild()方法，

-->

        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );

        camera.position.z = 1000;

        //camera.position.y = 50;

        scene = new THREE.Scene();

        scene.add(camera);

        renderer = new THREE.CanvasRenderer();

        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

        var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );

            //alert("message2");

        for (var i = 0; i < 500; i++) {

            //alert("message");

            particle = new Particle3D( material);

            particle.position.x = Math.random() * 2000-1000;

            particle.position.z = Math.random() * 2000-1000;

            particle.position.y = Math.random() * 2000-1000;

            //particle.position.y = Math.random() * (1600-particle.position.z)-1000;

            particle.scale.x = particle.scale.y =  1;

            scene.add( particle );

            particles.push(particle);

        }

        container.appendChild( renderer.domElement );

        //document.addEventListener( 'mousemove', onDocumentMouseMove, false );

        document.addEventListener( 'touchstart', onDocumentTouchStart, false );

        document.addEventListener( 'touchmove', onDocumentTouchMove, false );

        document.addEventListener( 'touchend', onDocumentTouchEnd, false );

        setInterval( loop, 1000 / 60 );

    }

    var touchStartX;

    var touchFlag = 0;//储存当前是否滑动的状态;

    var touchSensitive = 80;//检测滑动的灵敏度;

    //var touchStartY;

    //var touchEndX;

    //var touchEndY;

    function onDocumentTouchStart( event ) {

        if ( event.touches.length == 1 ) {

            event.preventDefault();//取消默认关联动作;

            touchStartX = 0;

            touchStartX = event.touches[ 0 ].pageX ;

            //touchStartY = event.touches[ 0 ].pageY ;

        }

    }

    function onDocumentTouchMove( event ) {

        if ( event.touches.length == 1 ) {

            event.preventDefault();

            var direction = event.touches[ 0 ].pageX - touchStartX;

            if (Math.abs(direction) > touchSensitive) {

                if (direction>0) {touchFlag = 1;}

                else if (direction<0) {touchFlag = -1;};

                //changeAndBack(touchFlag);

            }

        }

    }

    function onDocumentTouchEnd (event) {

        // if ( event.touches.length == 0 ) {

        //     event.preventDefault();

        //     touchEndX = event.touches[ 0 ].pageX ;

        //     touchEndY = event.touches[ 0 ].pageY ;

        // }这里存在问题

        var direction = event.changedTouches[ 0 ].pageX - touchStartX;

        changeAndBack(touchFlag);

    }

    function changeAndBack (touchFlag) {

        var speedX = 25*touchFlag;

        touchFlag = 0;

        for (var i = 0; i < particles.length; i++) {

            particles[i].velocity=new THREE.Vector3(speedX,-10,0);

        }

        var timeOut = setTimeout(";", 800);

        clearTimeout(timeOut);

        var clearI = setInterval(function () {

            if (touchFlag) {

                clearInterval(clearI);

                return;

            };

            speedX*=0.8;

            if (Math.abs(speedX)<=1.5) {

                speedX=0;

                clearInterval(clearI);

            };

            for (var i = 0; i < particles.length; i++) {

                particles[i].velocity=new THREE.Vector3(speedX,-10,0);

            }

        },100);

    }

    function loop() {

        for(var i = 0; i<particles.length; i++){

            var particle = particles[i];

            particle.updatePhysics(); 

            with(particle.position)

            {

                if((y<-1000)&&starSnow) {y+=2000;}

                if(x>1000) x-=2000;

                else if(x<-1000) x+=2000;

                if(z>1000) z-=2000;

                else if(z<-1000) z+=2000;

            }

        }

        camera.lookAt(scene.position); 

        renderer.render( scene, camera );

    }

</script>

</body>

</html>

2010年正式推出了HTML5，跨平台完美运行，对硬件要求非常低。代替Flash的存在。html5它不是一种编程语言，而是一种超文本标记语言。

1.html5新特性：<canvas>绘制图形。<video>和<audio>标签播放视频和音频。对本地离线存储的更好支持。新的特殊内容元素(article footer header nav section)。新的表单控件(calendar date time url email search)。

2.html5开发工具：Intellij IDEA 和web storm。

3.几点学习方法：寻求问题根源；查看参考文档；参考案例；常见问题通过搜索引擎搜索。

4.html5工程师要求掌握的技能包：xhtml、css3、javascript、jquery、jquery-UI、jquery-mobile。

5.层间在面试中被问到的三个问题：JavaScript的for循环；javascript的预编译；javascript的闭包。

Canvas是HTML中你可以绘制图形的区域；

html5的本地存储概念：很多时候我们会存储用户本地信息到电脑上，例如：比方说用户有一个填充了一半的长表格，然后突然网络连接断开了，这样用户希望你能存储这些信息到本地，当网络恢复的时候，他想获取这些信息然后发送到服务器进行存储
现代浏览器拥有的存储被叫做“Local Storage”,你可以存储这些信息。

  Cookies Local storage
客户端/服务端 客户端和服务端都能访问数据。Cookie的数据通过每一个请求发送到服务端 只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器
大小 每个cookie有4095byte 每个域5MB
过期 Cookies有有效期，所以在过期之后cookie和cookie数据会被删除 没有过期数据，无论最后用户从浏览器删除或者使用Javascript程序删除，我们都需要删除

上面是本地存储和cookie的区别。

什么是事务存储：会话存储和本地存储类似，但是数据在会话中有效，简而言之数据在你关闭浏览器的时候就被删除了。为了创建一个会话存储你需要使用“sessionStorage.variablename.”在以下的代码我们创建了一个名为”clickcount”的变量；

如果你刷新浏览器则数目增加，但是如果你关闭浏览器，“clickcount”变量又会从0开始。

1
2
3
4
5
6
7
8
if(sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount = 0;
}

****************************************** HTML 5 end *******************************************************

最后推荐几个学习前端的好的网站(互联网是最好的老师)

1.极客学院(Video)：http://www.jikexueyuan.com/path/html5/ (包含以HTML5为核心生态圈所有知识点)

2.W3C(文字+在线演示)：http://www.w3school.com.cn/html5/ (其余知识自己在W3C school中寻找)

3.伯乐在线 http://www.jobbole.com/

　　

说说web 2.0生态圈的那些事的更多相关文章

  1. O'Reilly总裁提姆-奥莱理：什么是Web 2.0

    O'Reilly总裁提姆-奥莱理:什么是Web 2.0 译者序:Web 2.0这一概念,由O'Reilly媒体公司总裁兼CEO提姆·奥莱理提出.他是美国IT业界公认的传奇式人物,是“开放源码”概念的缔 ...

  2. 大佬福利之在你眼中 Web 3.0 是什么？(转)

    web 3.0 Web 3.0一词包含多层含义,用来概括互联网发展过程中某一阶段可能出现的各种不同的方向和特征.Web 3.0 充满了争议和分歧,它到底应该什么样?具体的标志点又是什么? Web 2. ...

  3. 语义网 （Semantic Web）和 web 3.0

    语义网=有意义的网络. "如果说 HTML 和 WEB 将整个在线文档变成了一本巨大的书,那么 RDF, schema, 和 inference languages 将会使世界上所有的数据变 ...

  4. 基于Server-Sent Event的简单聊天室　Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。

    基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...

  5. asp.net web api2.0 ajax跨域解决方案

    asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种.  一,ASP.NET Web API支持JSONP,分两种 1, ...

  6. 体验Hadoop3.0生态圈-CDH6.1时代的来临

    体验Hadoop3.0生态圈-CDH6.1时代的来临 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我在公司使用的是CDH5.15.1这个发行版本,具体的部署文档之前也有给大家分享 ...

  7. 关于web.xml3.0启动报错

    九月 08, 2017 10:18:19 上午 org.apache.tomcat.util.digester.SetPropertiesRule begin 警告: [SetPropertiesRu ...

  8. Web 2.0应用客户端性能问题十大根源《转载》

    前言 Web 2.0应用的推广为用户带来了全新的体验,同时也让开发人员更加关注客户端性能问题.最近,资深Web性能诊断专家.知名工具dynatrace的创始人之一Andreas Grabner根据自己 ...

  9. （转）park1.0.0生态圈一览

    转自博客:http://www.tuicool.com/articles/FVBJBjN Spark1.0.0生态圈一览 Spark生态圈,也就是BDAS(伯克利数据分析栈),是伯克利APMLab实验 ...

随机推荐

  1. 搭建hexo博客

    hexo 是一款快速.简单.并且强大的博客博客模板框架 - 基于nodejs . 特点 基于nodejs 使用Markdown书写文章 无需数据库 可以使用GitHub Pages发布 要用到的模块 ...

  2. Atitit  java jsp 新的tag技术

    Atitit  java jsp 新的tag技术 1.1.  Tag Files  vs 原生写 SimpleTag 比较麻烦的 JSP 1.x 允许 Web 开发人员创建 Java 组件(称为标记处 ...

  3. Netty权威指南

    Netty权威指南(异步非阻塞通信领域的经典之作,国内首本深入剖析Netty的著作,全面系统讲解原理.实战和源码,带你完美进阶Netty工程师.) 李林锋 著   ISBN 978-7-121-233 ...

  4. vs xamarin android SharedPreferences

    读 PreferenceManager.GetDefaultSharedPreferences(this).GetInt("uid", 0); 写 var editor = Pre ...

  5. 使用selenium+phantomJS实现网页爬取

    有些网站反爬虫技术设计的非常好,很难采用WebClient等技术进行网页信息爬取,这时可以考虑采用selenium+phantomJS模拟浏览器(其实是真实的浏览器)的方式进行信息爬取.之前一直使用的 ...

  6. FlashFXP(强大的FXP/ftp上传工具)V5.0.0.3722简体中文特别版

    flashfxp是功能强大的fxp/ftp软件,融合了一些其他优秀ftp软件的优点,如像cuteftp一样可以比较文件夹, FlashFXP是一款功能强大的FXP/ftp上传工具, FlashFXP集 ...

  7. JS实现弹出层对话框

    点击按钮后,弹出层对话框,可交互,点击关闭后才关闭掉对话框. 效果图: 源码: <!doctype html> <html> <head> <meta cha ...

  8. [python]进阶学习之阅读代码

    起因 最近在公司的任务是写一些简单的运营工具,因为是很小的工具,所以就用了github上面的一个开源项目flask-admin,可以省去很多的事情. 但是,这个开源项目是个人维护的项目,所以文档相对简 ...

  9. Azure ARM (9) 创建ARM模式下的虚拟机网络

    <Windows Azure Platform 系列文章目录> 笔者在之前几章内容中,创建了ARM Resource Group,然后在这个ARM Resource Group下创建Azu ...

  10. 2013年最佳的16个 Photoshop 设计教程推荐

    使用 Photoshop 的时候,没有基础操作知识的话,用起来会非常困难,所以你应该阅读一些教程才能应用它们在你的工作中.在这篇文章中你看到的 Photoshop 教程的集合是2013年发布的最优秀的 ...