仓酷云

标题: html教程之html5实例剖析:开辟web app的历程 [打印本页]

作者: 灵魂腐蚀 时间: 2015-1-15 23:13
标题: html教程之html5实例剖析:开辟web app的历程
但他也直言说，这就像写软件时，在添加改善的新功能时，难免遭遇稳定性的问题，必须先把问题清除干净，才能推出新产品。破洛洛文章简介：HTML5当地存储初探.
html5带给我们的不单单是更多语义丰厚的标签，另有更多更牛逼的特征，好比“离线存储”。关于台式电脑来讲，大概它并没有带来甚么欣喜，可是关于挪动设备来讲离线存储几乎就是一个神迹。关于任何具有撑持离线存储扫瞄器的挪动设备，好比iphone，ipodtouch，离线存储使得web前端工程师能够很简单的针对它们开辟使用程序。
后面吹捧了一段，不外说其实的，html5当地存储就今朝来讲仍是很受限的。其一，扫瞄器限定，今朝只要Safari3.1andlater,andiniPhoneOS2.0andlater.供应了javascriptdatabase原生撑持，不外也有TaffyDB能够曲线救国。(还没有效过，不敢妄下结论。)。其二，服务器端必要修正设置，旦假如是本人的服务器就很复杂了。
上面就以一个复杂的offlinewebapp－notebook为例，纪录一下为iphone/ipodtouch开辟webapp的历程。不是履历，只是初探。

创建合适iphone/ipodtouch的UI
数据的当地存储
文件的当地存储
完美这个app(不盘算完美它了，偶然间做一个有用的app专门先容iphonewebapp的开辟吧)

起首，合适iphone/ipodtouch的UI它并非本文的重点，有乐趣的同砚能够移步这里。这里只夸大一点：你默许做的页面，放到iphone看会变的很窄，字很小。这是由于iphone用它320px宽的屏幕显现了一个默许980px宽的页面，你的内容被按比例减少了。要办理这个成绩很复杂，只需在html的head地区加一个meta标志，详细语法请看这里。也就是如许：

这个成绩办理以后我们就能够肆意的利用html5和css3来打造界面了，（针对设备开辟能够不思索兼容性，真是痛快淋漓呀。）
我也许做了个丑恶的界面：

html代码，CSS代码(实在你能够不必看，最初有打包的代码)
完成了UI，我们就必要对数据举行处置了。
在入手下手“数据”的当地存储之前，我们先来懂得一下client-sidedatabasestorageAPI:

theclient-sidedatabasestorageAPIallowswebapplicationstostorestructureddatalocallyusingamediummanywebdevelopersarealreadyfamiliarwith–SQL.－－webkitblog

今朝只要webkit中心的扫瞄器撑持这一特征。你乃至都不克不及在w3c的html5事情草案中找到（cs-db）client-sidedatabase的具体形貌。
起首我们要实验创建一个数据库链接：

try{if(!window.openDatabase){//检测扫瞄器是不是撑持cs-dbalert(notsupportedcs-db!);}else{varshortName=noteDB;varversion=1.0;vardisplayName=Notebookdatabase;varmaxSize=65536;//创立一个数据库vardb=openDatabase(shortName,version,displayName,maxSize);}}catch(e){//实验捕捉毛病if(e==2){alert(Invaliddatabaseversion.);}else{alert("Unknownerror"+e+".");}}

复制代码

假如以上代码无误，你就会在safair大概chrome的开辟者工具中看到这个数据库：

在右边地区能够间接实行一些sql查询，可是我老是失掉“产生不测毛病“0”。”如许的了局，不晓得是否是RP的成绩。
接上去就是创立表，和实行一些sql语句举行增编削查。
js实行sql的基础语法大抵是如许的：

db.transaction(function(transaction){transaction.executeSql(sqlquery,[],dataHandler,errorHandler);});

复制代码

个中transaction.executeSql中参数顺次为：sql查询字符串，传送给sql查询的参数，数据处置句柄，毛病处置句柄。个中只要第一项为必选，其他都为可选项。
第二个参数的用法大抵是如许的：

transaction.executeSql("UPDATEpeoplesetage=?wherename=?;",[age,name]);

复制代码

查询字符串中的“？”会被前面数组中的变量顺次交换。
注重：以上我用了“大抵”这个词，由于没有官方的文档（W3C-webdatabase），只是从一些别的文献和本人判别得来，如有毛病还请斧正。
上面我们创立一张用来存储note的表：

db.transaction(function(transaction){transaction.executeSql(CREATETABLEIFNOTEXISTSnotes(idINTEGERNOTNULLPRIMARYKEYAUTOINCREMENT,titelTEXT,noteTEXTNOTNULL,dateDATE);,errorHandler);});

复制代码

errorHandler是如许的：

functionerrorHandler(transaction,error){alert(Errorwas:+error.message+(Code:+error.code+));varfatal_error=true;if(fatal_error){returntrue;}returnfalse;}

复制代码

error.message是一段毛病形貌，error.code是毛病代码(概况)
再看看假如从db中检索出数据并显现到页面上：

db.transaction(function(transaction){transaction.executeSql("SELECT*fromnotes;",[],dataHandler,errorHandler);});functiondataHandler(transaction,results){varstring="";for(vari=0;i"+row[titel]+"";}varlistConts=$(listCont);listConts.innerHTML=string;}

复制代码

能够看出，基础上和php之类后端言语操纵迥然不同。
更多代码可检察示例程序，不再逐一排列。
完成了数据的当地存储，就要将文件存储也弄定。为了完成文件的当地存储，html5弄了一个叫manifest的文件，这个文件就是一个缓存清单，把必要缓存在客户真个文件告知扫瞄器。manifest是一个mimetype为text/cache-manifest的纯文本文件。注重，这点很主要。
上面是一个manifest文件的例子：

NETWORK,CACHE,FALLBACK都是可选的。
manifest文件必需以CACHEMANIFEST开首
厥后必要下载并缓存的文件利用绝对或相对路径皆可，每一个资本一行。
NETWORK段标明一些在线资本地点的域，一切这个域下的资本都不会被缓存，即便客户端处于离线形态，也会实验往哀求基于这些域的资本。
CACHE段还不是很分明
FALLBACK段上面每行都包括两部份内容，用空格分开。后半部分是以后半部分路径不克不及会见时的备选路径（很拗），如上图就是，假如demoimages目次不克不及会见时，实验会见images目次。
manifest文件先容就到这里，上面创立我们本人的manifest文件：
我们只必要缓存两个文件便可，nbStyle.css和nbScript.js。另有index.html自己，因为manifest文件会默许缓存援用本人的文件，以是index.html不克不及在缓存列表中写出来：

CACHEMANIFEST#version:2010-01-2022:30nbStyle.cssnbScript.js

复制代码

就是这么复杂了，我们将他保留为notebook.manifest文件，并和别的文件一同放在根目次。
最初一个成绩，假如将notebook.manifest的mimetype标识为text/cache-manifest范例呢？我晓得有两种办法：
1.在站点根目次创建.htaccess文件，在个中声明.manifest的mimetype，这个必要修正下服务器的设置文件，我没有实验乐成。
2.php情况在apache目次寻觅一个为“mime.types”的设置文件，在其最初增加一行：

text/cache-manifestmanifest

复制代码

然后在index.html文件援用它：

弄定了这些器材，你就能够实验用webkit会见你的使用，然后离线，再实验利用它，程序应当也能够照旧运转。
至此，html5的离线存储基础先容完了，上面附上打包的代码，代码自己没有甚么难度，只是我写的太烂了:
代码下载
实在还远没有完，缓存上去的文件假如被更新了怎样办呢？怎样关照客户端更新缓存实在也有api，渐渐的再探究吧。十分等候与人人切磋html5相干的成绩。
</p>
历经多年来的停滞不前，如今全球信息网联盟(WorldWideWebConsortium，W3C)重拾HTML标准化。

作者: 兰色精灵 时间: 2015-1-17 20:51
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 透明 时间: 2015-1-25 23:24
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 愤怒的大鸟 时间: 2015-2-4 13:43
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 仓酷云 时间: 2015-2-10 01:16
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 老尸 时间: 2015-2-28 15:19
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 灵魂腐蚀 时间: 2015-3-10 03:18
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 简单生活 时间: 2015-3-17 04:12
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 分手快乐 时间: 2015-3-23 21:51
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

欢迎光临仓酷云 (http://ckuyun.com/)