webapp案例源码下载（web开发案例）

本文目录一览：

• 1、如何用html5构建移动端的webapp
• 2、如何让嵌入式Jetty加载Spring WebApplicationInitializer
• 3、前端开发时遇到过什么坑？尤其是webapp开发时
• 4、app有几大分类，分别是什么
• 5、推荐几个适合新手练手的Python项目

如何用html5构建移动端的webapp

H5edu教育html5开发为您解答：

移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。

1.四大浏览器内核

1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。

2.Gecko:( FireFox )优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。

3.Webkit: ( Chrome/ Safari / UC )优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。

4.Presto: ( 欧朋 ) Presto内核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。

移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，基于Webkit内核，可使用Chrome浏览器调试即可。

2.手机浏览器

浏览器已经逐渐从传统桌面转向手机端，竞争也越来越激烈。目前国内市场主流的手机浏览器：UC、百度、欧朋、QQ、海豚、safari、Chrome，这些浏览器都是基于webkit内核的，兼容性方面不存在问题，同时对html5和css3的支持很好，所以，大胆地应用html5和css3技术吧。

在开始编写webapp时，前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序 的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

3.终端分辨率

手机分辨率比PC分辨率要庞杂得多，各种分辨率有木有？大小差距那么大有木有？这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素，必须有充分的考虑。考虑到浏览器自适应，需要设计和制作完成各种不同的方法。

1) 市场上主流手机生产商的产品分辨率。经过调研发现，目前主流的手机分辨率为：480*800像素、320*480像素，而1280*720像素（720P）会是接下来的趋势。这些都是很粗略的统计，要有精确的数据需要花费不少的精力，那是数据分析人员的工作。

2) 项目目标群所持设备的分辨率。项目目标群即用户，用户拥有什么样的手机分辨率，从一定程度上来说比第一点来得更加重要，它决定着项目开发的方向。

4.响应式web开发

在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付 宝 采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。

响应式web开发不是一项开创性的技术变革，简单地说，响应式web设计采用了媒体查询、流式布局、液态图片三项技术，把它们组合在一起来制作页面，使得页面不只在传统桌面，在平板电脑和手机上，各种不同的分辨率都能够完美显示。而要做到这点，我觉得不难，请继续往下：

1) 准备工作：

a) 插件安装：window resize。您可以通过下载安装谷歌浏览器插件，安装成功后，当您调整浏览器窗口时，在浏览器右下角会有灰度提示当前窗口和类似于手机视图的大小提示。

b) 编辑器安装：Hbulder或Webstorm

c) 弄清视图和屏幕的区别。视图是浏览器的内容显示区域，屏幕是设备的物理显示区域。比如视图宽度我们一般用width表示，而屏幕宽度是用device-width来表示。相信做过手机页面的童鞋都经常见过这段代码：

meta name="viewport" content="width=device-width,initial-scale=1.0"

其中width=device-width就是说把页面宽度设置成和屏幕宽度一样。

d) 响应式设计创意网站收集 。这里有很多响应式Web设计的网站，供您参考和学习。

2) 征途ING：

e) 响应式web设计之媒体查询：

为了减少http请求，我想在css样式表里进行媒体查询会是个不错的选择，而不是在页面head部分使用link进行加载。样式表里的媒体查询格式为：

@media screen and (max-width:960px){}

大括号内部书写样式。该语句相当于判断语句，有两个条件，一个是视口宽度最大不超过960px，screen代表显示屏，这两个条件都具备了，就调用大括号内的样式。

f) 响应式web设计之流式布局：

流式布局以百分比进行布局。最重要是时刻关注元素的父级层，所有的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合，形成平滑的布局变 化跳转效果。一般而言，media里的样式多以width、padding、margin、font-size、line-height这些为主。

g) 响应式web设计之液态图片：

要实现液态图片，只需加入如下代码：img{max-width:100%;}

web移动头部书写

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /

这个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

meta content="yes” name=" apple-mobile-web-app-capable" /

meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

meta content="black" name=" apple-mobile-web-app-status-bar-style" /

meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

meta content="telephone=no" name="format-detection" /

meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

如何让嵌入式Jetty加载Spring WebApplicationInitializer

使用Jetty的嵌入式API，可以将J2EE容器嵌入你的Application中，更进一步的是，采用Servlet 3.0的标准，你甚至可以省掉web.xml的配置文件，因此Spring提供了类 SpringServletContainerInitializer。但是在实际开发中，发现Jetty的嵌入式API默认情况下只加载WEB-INF/lib/或者WEB-INF/classes中的类。通过阅读Jetty的源代码，找到一个解决方法，代码如下：

WebAppContext context = new WebAppContext();

context.setContextPath("/");

context.setBaseResource(Resource.newClassPathResource("META-INF/webapp"));

MetaData metaData = _ctx.getMetaData();

Resource webappInitializer = Resource.newResource(WebApp.class.getProtectionDomain().getCodeSource().getLocation());

metaData.addContainerResource(webappInitializer);

AnnotationConfiguration config = new AnnotationConfiguration();

context.setConfigurations(new Configuration[] { config });

ListHandler handlers = new ArrayListHandler();

handlers.add(context);

HandlerList handlerList = new HandlerList();

handlerList.setHandlers(handlers.toArray(new Handler[0]));

HandlerCollection handlerCollection = new HandlerCollection();

handlerCollection.setHandlers(new Handler[] { handlerList });

Server server = new Server(8888);

server.setHandler(handlerCollection);

server.setStopAtShutdown(true);

server.start();

server.join();

关键就是下面两句：

MetaData metaData = _ctx.getMetaData();

Resource webappInitializer = Resource.newResource(WebApp.class.getProtectionDomain().getCodeSource().getLocation());

metaData.addContainerResource(webappInitializer);

由于Jetty本身代码的原因，WebApplicationInitializer的实现必须直接实现接口，不能继承 AbstractContextLoaderInitializer。

public class WebApp implements WebApplicationInitializer {

@Override

public void onStartup(final ServletContext servletContext)

throws ServletException {

AnnotationConfigWebApplicationContext context = new AnnotationConfigWebApplicationContext();

//..省略

}

另外，把webapp的内容放入"META-INF“下，同时打包到.jar文件，设置相应的路径为：

context.setBaseResource(Resource.newClassPathResource("META-INF/webapp"));

即可将你的webapp制作成一个可执行的.jar文件。顺便说一句，Nexus似乎就是这么干的。

前端开发时遇到过什么坑？尤其是webapp开发时

过去，应用开发需要注重大量的专业知识，程序员只需关注单一的语言（比如COBOL、RPG、C++等），并利用该语言创建应用。Web不再是单单关注独立的一面。相反，一个现代化的Web应用开发者应该是“样样精通”。他们不仅要理解开发方面还要明白Web应用安全漏洞问题，了解如何与其他设备集成在一起等等。往深了说，他们还需要了解这些应用程序是如何运行在平板电脑和智能手机上的。

换句话说，Web应用开发正变得更加复杂化。它迫切需要一个不断增加以及不断发展的配套技能。

掌握六大技能后，估计Web应用开发时候就会避免一些坑。

1. 安全

过去，企业在内部安装应用，基于防火墙背后的应用无法与第三方服务或应用进行通信。而随着软件的发展，现代Web应用能够与其他设备进行集成，并存储在云服务器上或者访问多种类型设备。因此，安全问题显得尤为重要。

“作为一名应用开发者（web/desktop），深入理解应用程序的安全性是最为重要的技能之一。”Veracode首席安全顾问Stephen Jensen说道，“在当今世界，有关安全问题的新闻不绝于耳，大多数是揭露数以百万计的人们的敏感信息。因此，Web应用开发者必须知道如何预防常见的漏洞，比如Cross-Site Scripting (XSS)，SQL注入等。为了确保应用在创建过程中免受安全问题的恶意攻击，同时也为了保护用户潜在的敏感信息问题，这也是所有开发者应当学习的必备基础技能。”

2. 用户体验（UX）设计

“随着移动设备用户需求量的不断增加，开发者需要充分理解用户体验设计显得愈发重要。”Raster Media CEO Michael Smith说，“设计团队单独负责某款应用的用户体验的日子已经一去不复返了。开发者必须考虑互动、动画、速度以及各个APP之间的通信等问题。”

我完全赞同这一观点。用户体验设计有几大重要因素，首先，用户的期望有所上升。用户下载一款新的应用，他们想立即知道它是如何运行的。他们希望从业务应用中获取相同的体验。其次，用户有选择的余地。如果不喜欢这款应用，他们会寻找另一款代替。由于用户的期望值增加以及竞争的加剧，更为直观的界面需求比以往显得更加重要。

3. 自适应/响应式设计

谈及UX设计，Web App开发者必须建立可随处运行的应用程序。现在的问题不再是“用户如何与我的应用进行交互？”而是演变成“用户与我的应用如何在每款设备类型上进行交互？”

想要做到这一点并不容易。你必须回答以下这些问题：“智能手机上的按钮设置在哪里？你如何在小屏幕上格式化数据表？当设备从人像模式切换至风景模式会发生什么？”总之，Web开发者必须知道让Web应用适应不同屏幕大小的方法。

针对跨平台/设备，响应式设计和自适应设计主要两大方法：

响应式设计使用流体网格以及CSS3媒体查询来适应各种屏幕大小/类型上的应用。你可以通过Web找到各种响应式设计案例。例如TheNextWeb就是个典型的案例。你会发现，当你调整浏览器大小时，该网站会自动适应新的尺寸。

自适应设计根据不同的设备提供不同的HTML页面。比如，一款独立的Web应用可能需要3个独立的表示层（HTML）：一个是PC端，一个是平板电脑，另一个则是智能手机。例如，在不同的设备上访问Web App，外观和行为显示的均各不相同。

那么哪一种方法最好呢？我想说它们有各有各的优势。响应式方法对于Web网页设计以及Web应用信息来说是个不错的选择；而自适应方法可更好的适用于数据驱动Web应用，尤其是包含那些数据表的应用。为什么？这是因为它让开发者能够更好的控制数据结构和样式，而不是试图去适应多种屏幕尺寸上的单个表格，自适应设计方法可让你为每款设备创建不同的表单。

4. JavaScript

开发者总会为他们选择的编程语言而争论。你无法说服一个Java程序员称赞PHP是最好的，反之亦如此，就像你也无法说服一个PHP程序员赞同Java是最好的，但在Web应用中开发者大多数会选择使用JavaScript。

“随着移动和Web桌面应用的发展，JavaScript已快速成为最为重要的计算机语言。” Coordinato创始人Ben Bakhshi表示，“不少业内人士认为利用JavaScript编码将在未来10年内显著增加。”

5. Web应用架构

在Web开发上，应用架构变得比以往更加重要。应用体系架构直接影响到应用可扩展性、灵活性，以及集成其他Web服务和应用的能力。如果开发者想要创建一款有用的、可持续性的应用，那么理应深刻掌握Web应用架构知识。

“Web应用开发者应该充分关注Web应用架构”，MRC软件开发经理Tyler Wassell说，“开发者应该了解，所开发的应用程序如何与所有系统组件进行交互，以及底层架构将如何影响诸如可移植性、可维护性、可用性等性能情况。”

6. API集成

现如今，API已发展成为Web开发一个重要的方面。从本质来讲，API让不同的Web服务之间相互通信。开发者可以通过其他应用/服务上调用数据创建应用。

SimpleCollegeRecipes网站创始人兼CEO Brendan O’Connor认为，“API集成已成为现在Web应用开发者必备的技能。API允许你从其他网站上整合内容和信息。可以说，API使人人受益，包括终端用户，API供应商以及程序员自己。”

总结：

Web应用开发正在不断演变，Web开发所具备的技能也在不断更新变化中。开发者唯有不断进取、学习新的知识才能在开发行业中站住脚。当然，想要掌握每一种Web（移动Web）技能，几乎是不可能的，大部分公司无法为员工给予Web以及移动开发方面不同的解决方案，不可能做到面面俱到。

app有几大分类，分别是什么

App主要有三种形式，分别是WebApp，Native App(原生App)和Hybrid App(混合App)。

WebApp：简单来说，Web App就是针对iOS/Android优化后的web站点，用户不需要下载安装即可访问。一般的web站点测重使用网页技术在移动端做展示，包括文字，视频，图片等，而Web App更侧重“功能”，是基于网页技术开发实现特定功能的应用，必须依赖手机浏览器运行。Web App开发成本低，维护更新简单，支持云修复，用户不用下载更新，但是App的用户体验不足，页面跳转迟钝甚至卡壳，页面交互动态效果不灵活，而且可能上不了AppStore，如果企业的核心功能不多，App需求侧重于信息查询，浏览等基础功能，可以选择Web App。

技术栈：html5+css3+js常用框架

相应案例： 通过手机UC浏览器打开抢票助手、充值易等

Native App(原生App)：Native App是基于智能手机操作系统(现在主流的是ios和Android)用原生程序编写运营的App。Native App运行时是基于本地操作系统的，所以它的兼容能力和访问能力更好，拥有良好的用户体验、交互界面，但也是开发难度大，开发成本和维护成本较高的App。

技术栈:编程语言Android，需要掌握 JAVA ios、Objective-C

1. 开发环境，Android Studio、eclipse；

2. 数据结构，App的某些功能涉及到做算法，所以要有一定的数学基础；

3. Android SDK，会API接口开发，包括自行开发API的能力和调用第三发API的经验；

4. 熟悉tcp、IP，socket等网络协议；

5. 如果涉及到服务器，你还需要了解webservice相关知识和相应的开发语言，常用有PHP、JSP、ASP.Net；

6. 除了这些功能基础，App开发还涉及到UI设计、框架、性能优化、调试适配等。

相应案例：酷狗音乐、美图秀秀

Hybrid App(混合App)：是指半原生半web的混合类App，同时采用网页语言和程序语言进行开发，通过不同的应用商店进行打包分发，用户需要下载安装使用。Hybrid App兼具Native App良好的用户交互体验和web App跨平台开发的优势，因在开发过程中使用网页语言，所以开发成本和难度大大降低。

技术栈：html5+css3+前端主流框架

相应案例：微信、淘宝等。

推荐几个适合新手练手的Python项目

《Python实战：四周实现爬虫系统》百度网盘免费下载

链接:

提取码: xbdu   

Python实战：四周实现爬虫系统