【html5】加速Web开发的9款知名HTML5框架

伴随着智能手机正在席卷整个移动市场,在移动设备上开发出兼容性高的网站已变的非常重要,本文推荐9款非常流行的HTML5框架,可以轻松助你开发出兼容各个移动平台的网站。

与手工编码比起来,HTML5框架在准确性和正确率方面给予了保证。大多数HTML5框架都会有一个组合或者包含一些额外的组件,比如jQuery Scripts。CSS3样式表则以改善多媒体特征的功能性和响应式的Web布局为主。

如果你有一个根据固定流程进行的特定项目,为了保证项目刚开始就能有较高的正确率,那么你可以利用HTML5框架来提升整个开发过程,并且让网站拥有一致性结构。

伴随着智能手机正在席卷整个移动市场,在移动设备上开发出兼容性高的网站已变的非常重要,相信所有的网站所有者都希望自己的网站能够兼容所有的智能手机平台,HTML5框架可以轻松解决这种跨平台问题。

如果你是一名Web设计师,你肯定有兴趣开发出杀手级的应用,那么使用下面推荐的HTML5框架将会对你的开发过程产生巨大的帮助,帮你搭建跨平台网站。

1. LungoJS

这个是被认为开发移动网站最好的HTML5开发框架,使用 HTML5/CSS3 和 JavaScript 技术。可帮助创建基于 iOS、 Android、 Blackberry 和 WebOS 平台的应用程序。该框架可利用当前移动设备的高级特性,可捕捉事件包括滑动、触屏、长按等。无需使用图片,全部采用向量声称。

Lungo.JS 无需服务器端支持,可帮助实现 HTML5 特性,包括 WebSQL、Geolocation、 History、 Device orientation 等等。这是一个完全可定制的框架,可用来创建应用、游戏等程序。

2.Kendo UI

Kendo UI是一个HTML5平台,开发者利用它可以开发新颖的、交互的移动应用程序和网站。该框架提供了大量的动画和丰富的拖拽功能、模板功能以及提供了将近10款客户端常用的数据绑定小部件,如图表、组合框以及常用表格。

3.Sencha Touch

Sencha Touch是第一个基于HTML5的移动应用框架,利用JavaScript、HTML5和CSS3来构建移动应用程序,该框架利用本地代理存储离线数据,具体使用HTML5来渲染视频和音频组件。

可以让你的Web App看起来就像本地应用程序一样。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的Web标准,全面兼容Android和Apple iOS设备。

4.Jo

该框架可以创建像本地一样的应用,并且兼容任何操作系统,无论是Blackberry、iOS还是Android。并且提供许多HTML5小部件。使用它可以解决任何动画设计方面的问题。

5.52 Framework

52 Framework拥有16列的网格模板。该框架来自于CSS3样式里的新“Selection”、阴影、圆角以及有效的HTML5标记。该框架还提供了一些特殊的脚本和样式用于IE6。

6. G5 Framework

如果你想要快速实现Web开发,并且想要重用ant主题或应用程序或网站项目,那么G5 框架是您最好的选择,因为该框架旨在提升开发效率、减少代码。该框架采用特色的PHP激活类、SEO优化技术。除了G5自身所带的这些功能特性外,它还集成其他许多功能,例如Orbit Slider、CSS3 PIE、Reveal Modals、CSS3 Buttons和Tipsy Tooltips等。

7.LimeJS

LimeJS 是一个 JavaScript 游戏开发框架,用于快速构建运行于触屏设备和桌面浏览器的游戏。允许开发者创建基于 HTML5 的游戏,支持主流浏览器包括iOS。

8.jQuery Mobile

jQuery Mobile(jQueryMobile)是 jQuery在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。

9.Phone Gap

PhoneGap是一个开源的开发框架,使用HTML,CSS和JavaScript来构建跨平台的的移动应用程序。它使开发者能够利用iPhone,Android,Palm,Symbian,Blackberry,Windows Phone和Beda智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等。

【技术排行榜】2013年11月编程语言排行榜:日益蓬勃的微软编程语言

本月编程语言排行榜中,我们看到一件有趣的事。排名前20的编程语言中,四种由微软公司推出的编程语言中,有三种都发展势头迅猛!这四种编程语言是C#、SQL Server 语言、Transact-SQL and Visual Basic.NET。也许这样的现象只是一个巧合。但是,本月Windows Mobile市场占有率同Android和IOS相比有明显的提升。

JavaScript发展依然呈上升趋势。作为时下各种网站必用的编程语言,这样的结果也是意料之中的事。

前20名榜单排行榜

微软十大编程语言

1、C++

C++这个词通常被读做“C加加”,而西方的程序员通常读做“C plus plus”,“CPP”。 它是一种使用非常广泛的计算机编程语言。

C++是一种支持多重编程范式的通用程序设计语言。它支持过程化程序设计、数据抽象、面向对象程序设计、制作图标等等泛型程序设计等多种程序设计风格。

2、C#

C#是微软公司发布的一种面向对象的、运行于.NET Framework之上的高级程序设计语言。它是由微软工程师Anders Hejlsberg主导开发的。

C#看起来与Java有许多相似之处;它包括了诸如单一继承、接口、与Java几乎同样的语法和编译成中间代码再运行的过程。

但是C#与Java有着明显的不同,它借鉴了Delphi的一个特点,与COM(组件对象模型)是直接集成的,而且它是微软公司.NET windows网络框架的主角。此外,C#还具有安全、稳定、简单的特点。

3、Visual Basic

VB是一款由微软公司开发的包含协助开发环境的事件驱动编程语言,拥有众多的忠实使用者。

它源自于BASIC编程语言,VB拥有图形用户界面和快速应用程序开发系统,可以轻易的使用DAO、RDO、ADO连接数据库,或者轻松的创建ActiveX控件,深受开发人员的喜爱。

4、JScript

JScript是一种面向对象的脚本语言,最初由Mozilla公司首席技术官Brendan Eich开发。

它主要功能是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。

对于JavaScript和Java的关系,有网友类比雷锋和雷峰塔,二者的区别还是非常明显的。

5、PHP

PHP是一种 HTML 内嵌式的语言,可以在服务器端执行的嵌入HTML文档的脚本语言,风格类似于C语言,现在被很多的网站编程人员广泛的运用。

PHP 独特的语法混合了 C、Java、Perl 以及 PHP 自创新的语法。它可以比 CGI 或者 Perl 更快速的执行动态网页,执行效率要高许多。

如今,PHP已经占据编程语言前三甲的位置。

6、IronPython

IronPython 是一种在 .NET 及 Mono上的 Python 实现,由微软的 Jim Hugunin 所发起。它是一个开源的项目,基于微软的 DLR 引擎,托管于微软的开源网站 CodePlex。

7、IronRuby

IronRuby是一个运行在.NET框架的完整Ruby 1.8.x实现,它允许Ruby应用能够被无缝的集成到.NET库和基础设施中。

它使用微软的Dynamic Language Runtime,并依据Microsoft Permissive License发布所有源代码。这种集成使得应用Silverlight和.NET框架的全部能力创建应用变得非常容易。

8、F#

F#是由微软发展的为微软.NET语言提供运行环境的程序设计语言。它是基于Ocaml的,而Ocaml是基于ML函数程序设计语言的。这是一个用于显示.NET在不同编程语言间互通的程序设计。

9、Axum

微软新推出的.Net家族新成员Axum,它最主要的目标是实现并行。Axum试图提供一种更为自然的方式来安排组件之间的协作问题。换句话说,如果将方案按照交互式组件建模,在Axum中编码会更为直接了当,而且你可能可以不被许多常见的并发问题所困扰。

10、“M”

​微软旗下代号为“M”的编程语言是为处理数据和建立数据模型而开发的。这种新编程语言是Oslo发展和面向服务策略的一部分,在保持文本(textual)和特定领域(domaiN-specific)的同时,还整合了来自XAML的特性。

前十名编程语言走势图

21-50编程语言排名:

后50名的编程语言排行:

(Visual) FoxPro, 4th Dimension/4D, ABC, ActionScript, Algol, Alice, APL, ATLAS, Automator, Awk, bc, BlitzMax, CFML, cg, CL (OS/400), Clean, Clojure, cT, Dart, Eiffel, Emacs Lisp, Euphoria, Forth, GNU Octave, Icon, Inform, Informix-4GL, Io, J, J#, LabVIEW, Max/MSP, Modula-2, Modula-3, Moto, MS-DOS batch, NATURAL, Object Rexx, OCaml, OpenCL, OpenEdge ABL, PILOT, Pure Data, Q, S, S-PLUS, Smalltalk, Standard ML, VHDL, Z shell

来源于: 51cto

【php】解决$_FILES获取不到数据

今天在写上传文件功能的时候,发现一个从来没有发生过的问题,提交POST数据的时候,用var_dump函数来显示$_FILES,显示的竟然是空数据。于是就开始去调试,调试的结果是问题不在PHP语句,而在于html文件中的form属性(enctype)。请看如下解决代码:

<form method="post" action="****" name="theForm" onsubmit="return validate()" enctype="multipart/form-data">

</form>

只要添加了该属性,就可以获取到数据了!!!!

 

【css3】transform属性

实例

旋转 div 元素:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

浏览器支持

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

为了更好地理解 transform 属性.

默认值: none
继承性: no
版本: CSS3
JavaScript 语法: object.style.transform=”rotate(7deg)”

语法

transform: none|transform-functions;
描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4×4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

【css3】box-shadow属性

实例

向 div 元素添加 box-shadow:

div
{
box-shadow: 10px 10px 5px #888888;
}

浏览器支持

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

定义和用法

box-shadow 属性向框添加一个或多个阴影。

提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!

默认值: none
继承性: no
版本: CSS3
JavaScript 语法: object.style.boxShadow=”10px 10px 5px #888888″

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

【JavaScript】获取offsetTop和offsetLeft值(兼容性)

最近用js获取offsetTop和offsetLeft的值,来实现图片放大镜的功能。遇到一个很纠结的问题,谷歌、火狐浏览器都可以通过获取元素对象,然后再获取offsetTop、offsetLeft的值,代码如下:

var div = document.getElementById("div");
var value = div.offsetTop;

就可以获到该div的offsetTop和offsetLeft值,但是IE、360浏览器就是获取不到该值,总是显示其值为0。

解决方法如下:

function offsetTop( elements ){ 
    var top = elements.offsetTop; 
    var parent = elements.offsetParent; 
    while( parent !== null ){ 
        top += parent.offsetTop; 
        parent = parent.offsetParent; 
    }
    return top; 
}; 
function offsetLeft( elements ){ 
    var left = elements.offsetLeft; 
    var parent = elements.offsetParent; 
    while( parent !== null ){ 
        left += parent.offsetLeft; 
        parent = parent.offsetParent; 
    }
    return left; 
};

通过自定义的函数就可以获取了。