首页风格
门户
博客

HTML技术

前端代码回放:使用Phaser开发一款HTML5网页版本的flappybird

前端代码回放:使用Phaser开发一款HTML5网页版本的flappybird

Phaser是一款开源的HTML5游戏类库,可以帮助你快速的开发基于HTML5的游戏,提供了相关很多特性,例如,物理,动画,preloader等等特效。

更多信息请浏览主页查看具体:http://phaser.io/

在这个前端代码回放中,我们将教大家一步一步的开发一个slappy bird类型的游戏,通过这个开发,大家能够快速的熟悉如何使用phaser.io来开发HTML5游戏。

全屏播放地址: http://www.gbtags.com/gb/rtreplayerpreview/3.htm

更多代码回放请访问:极客标签社区

阅读更多

免费的SVG图案工具网站 - SVGgeneration

免费的SVG图案工具网站 - SVGgeneration

SVG是一种非常灵活的文件格式,可以方便的缩放,操作,并且被所有的主流浏览器支持。

SVGeneration是一个可以帮助你创建SVG文件的拥有丰富特性的网站,制作的SVG文件可以方便的整合到我们的项目中。

站内目前拥有很多不同的图形,并且我们也可以自由的贡献自己的图片内容,通过web的编辑器所有的图形文件都可以自定义(例如,颜色,尺寸),并且可以自动生成SVG + CSS代码。

网站地址: http://www.svgeneration.com/

标签: svg, SVGgeneration

阅读更多

HTML5的仿本地应用移动端UI互动开发框架 – Ionic

Native App Development With HTML5 - Ionic

本地移动应用往往速度更快,更流畅并且拥有更好的用户体验,作为web开发设计人员来说,寻找新的方式和技术来实现类似的效果和UI是我们的重要的责任。

Ionic,是一个前端的框架,帮助你快速的使用HTML5,CSS3,Javascript创建本地效果的移动应用。

使用Ionic不是为了取代PhoneGap或者JS框架,它主要是帮助开发人员创建UI界面和互动。

这个框架使用SASSS和AnguarJS扩展,并且包含其它的组件,例如,按钮,切换,页头/页脚,tab栏及其其它。

拥有完整的文档,包含了完整的教程和例子 ,大家可以方便的了解和学习

网站地址: http://ionicframework.com/
下载地址: https://github.com/driftyco/ionic/

标签: ionic, 前端框架, frameworks, HTML5

阅读更多

web开发中需要注意的一些编码习惯

web开发中需要注意的一些编码习惯

有过一定工作经验的朋友们,肯定对于项目开发中的coding标准非常熟悉,不同的团队或者项目,都有不太一样的编码习惯和指导文档。但是对于不同 的编码习惯,大家肯定都希望使用大体上统一的风格,简单来说会使得开发效率更高,阅读速度更快,在这篇文章中,我们将分享一些个人觉得比较有效的编码习惯 和最佳实践,如果你觉得有更多其它的经验,请和我们分享。

以下内容主要使用PHP做为例子,如果使用其它编程语言,编码基本类似,大家可以自己在项目中具体应用。

缩进问题 - Tab或者空格

最简单的问题,大家对于缩进使用的是tab或者space呢?

这个问题没有太多的必要去讨论,因为没有谁拥有完全正确的答案,但是最重要的一点,就是不要混用空格和tab,如果大家使用一些JS的校验工具,比如,jshint的话,你最常看到的问题就是

Mixed Tab and Space

个人推荐使用tab,因为不同的编辑器对于tab的解析也不太一样,如果你需要使用tab的话,可以考虑使用4个空格来代替。

类名称定义

为了在定义中避免重复,尽量使得定义包含一些前缀,并且使首字母大写,这样易于阅读,如下:

class…

标签: web开发, 编码设计, php, js, javascript

阅读更多

绝对应当收藏的10个实用HTML5代码片段

绝对应当收藏的10个实用HTML5代码片段

HTML5是WEB技术发展的重要的里程碑,对于前端开发来说,如果能够找到一些未来大家开发中可能需要经常重复使用的代码的话,相信大家一定不会拒绝,下面是我们精心收集的10多个HTML5代码片段,相信大家一定喜欢!

HTML5的最简单模板

如果你需要开始一个新的HTML5项目的话,大家肯定会需要一个最简单的模板,这里是一个非常简单并且清晰的HTML5模板,相信大家会喜欢!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

标签: html, html5, 代码片段

阅读更多

CanvasLoader Creator - 免费的在线工具,生成加载动画

CanvasLoader Creator - 免费的在线工具,生成加载动画

CanvasLoader是一款免费的在线工具,可以帮助你生成加载动画的脚本,它生成的是自旋转的圆圈加载动画,脚本可以用在你的HTML5项目 中。它可以进行一定的客制化,来生成你想要的加载动画,其中包括圆圈的半径,旋转速度,密度,颜色等属性。 你可以下载代码片段,也可以直接下载生成的html文件,应用在你的程序中。

CanvasLoader Creator的操作

它的操作非常简单,只需要在链接中,调整你需要的参数,就可以生成你想要的加载动画样式了。

可设置的属性包括:

  • Diameter: 半径,既圆圈的半径。
  • Density: 密度,既旋转中的竖纹图案的密度。这个属性在你放大了半径之后,可以看得非常清楚。
  • Range: 范围,既旋转时,有颜色的范围占据了整个圆圈的多少比例。
  • FPS: 每秒帧数。
  • Speed: 速度,旋转的速度。
  • Color: 圆圈的颜色。
  • Shapes: 旋转的形状。
  • Background color: 背景颜色。

在设定了属性之后,它会实时生成代码片段,你可以下载整个的html文件,也可以从页面上拷贝代码片段放在你的程序中使用。

CanvasLoader核心代码

如果你打开代码,你可以看到它使用的是加载了一个名为Heartcode…

标签: javascript, html5, canvas, 进度条效果

阅读更多

创建平滑的HTML5动画

创建平滑的HTML5动画

现代浏览器都内置了专用动画技术,Martin Görner为您展现四种最棒的实例。

创建平滑的HTML5动画

现代移动 操作系统将用户接口动画化,并已达到了电脑端交互的标准--精选流畅的动画,体现出沉浸效果以及支持直观的交互。我们都想当然的认为,可以设置一个列表, 使之带有运动特性,用手指轻轻一推,它就如同有重量和惯性一样运动起来,直到遇到边缘再反弹回来一点。但是,在网络上,我们还达不到这样的效果。

接 受事实吧,现有网上的动画经常被视作UI灾难,还在使用二十年前陈旧的<blink>标签技术。加入Flash有点帮助,不过它缺乏HTML DOM集成,都变成了不美观的800×600分辨率,并且JavaScript DOM操作还有其标志性的5帧/秒(fps)动画率--真是绝望啊!

改变

2013年,现代浏览器内置了专用动画技术,达到60 fps。是时候去忘掉过去,开始构建美妙的UI动画体验了。我将展示四个动画技术,帮助你决定,哪一个更适合你的项目。

CSS3动画--3D

让我们从最简单的声明式技术开始:CSS3。这里不需要JavaScript,存CSS,加上一点现代手段。

CSS通过两种基本属性来声明动画:过渡和动画。过渡属性通知浏览器计算两种状态(由各自CSS定义)间的中间帧。动画通过改变元素CSS触发。比如,当你以编程方式改变它的层,或启动一个:hover…

标签: html, html5, 动画效果, css3动画, css

阅读更多

【大杂烩】56个绚丽矢量、UI工具(免费)

矢量、UI工具

网络中有许多资源供设计者寻求,我们提供给大家最新最有用的网络资源,以下免费资源包含了代码工具,图标系列,字体,PSD,矢量设计集,模型,还有UI工具包。你都可以运用到项目、网站或博客中去!

OOcharts

这个工具包用于构建你自己的谷歌分析仪表盘。

56个绚丽矢量、UI工具(免费)

One div emoticons

用div创建基本文本的表情符号。

56个绚丽矢量、UI工具(免费)

Metrize icons

收集了300多种文件格式的大量metro图标。

56个绚丽矢量、UI工具(免费)

Famous landmarks

12种著名地标性建筑图标集。

56个绚丽矢量、UI工具(免费)

Sabado type family

特别的字体。 

Pricing tables

漂亮简单且直接的PSD定价表。

World monuments

一套包含250个来自世界各地纪念牌的矢量图标。

Relax widgets

包含专业部件的PSD包。

PSD Shelves

100个完全可编辑,并且像素完美的PSD货架。

Verb Condensed

漂亮的现代字体。

Creative Link…

标签: 免费素材, 图标设计, ui, icon, web在线工具

阅读更多

web页面内容优化管理与性能技巧

web页面内容优化管理与性能技巧

回想一下,以前我们不得不花费大量时间去优化页面内容(图片、CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片。然而,随着移动开发的兴起,我们又回到了过去的窘状。网站优化是十分重要的,需要下载的内容少,反应速度快,就能使我 们加载应用程序更快速。

图片:控制在合适的尺寸大小

很多时候我们在不同的网站使用同样的图像,例如一个网上商店,所有产品都 有一个概览图片。打个比方,有三个页面描述产品,第一个页面显示产品清单,第二个页面显示产品细节图,第三个页面显示产品原始大小图。因此,我们需要三种 不同大小的图片。如果使用一个文件放到不同的三个页面上,那么浏览器会自动加载完整大小的图片,就连清单页也是,实际上清单页只需要200×200尺寸的 图片。如果原始文件大小在1MB左右,每页上有十个产品介绍,那么用户就要下载10MB大小的资源。这样做效果不好。如果可以的话,尽量为你的网站不同位…

标签: web页面优化, 页面优化, javascript, web页面, css, jquery

阅读更多

使用HTML5画布(canvas)生成阴影效果

使用HTML5画布(canvas)生成阴影效果

使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影。

  var canvas = document.getElementById('shadowcanvas');
var ctx = canvas.getContext('2d');

ctx.save();
ctx.fillStyle = '#EB852A';
ctx.shadowOffsetX = 15; // 阴影Y轴偏移
ctx.shadowOffsetY = 15; // 阴影X轴偏移
ctx.shadowBlur = 14; // 模糊尺寸
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色

ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();

ctx.fillStyle = '#222222';
ctx.beginPath();
ctx.arc(350,…

标签: html5, 阴影效果, 特效, 画布效果, canvas

阅读更多

跨浏览器的HTML5 Audio解决方案 - Audio5js

跨浏览器的HTML5 Audio解决方案 - Audio5js

在线演示

HTML5 audio的确非常棒,能够快速简单的帮助你添加音频到你的网页上。但是唯一遗憾的是不支持老版本的浏览器。

Audio5js恰恰是一个能够帮助你解决类似这样的浏览器兼容性问题的js类库,轻量级并且能够很优雅的使用flash向前兼容老版本的浏览器。

这个类库自动监测用户使用的浏览器,了解兼容性及其相关属性使用正确的codec来自动加载正确的播放器。

主要特性:

  • 拥有完整API来控制"加载","播放","暂停","音量"和"查找"
  • 并且可以得到播放内容的具体相关信息
  • 不依赖任何类库
  • 兼容版本浏览器,包括:
    • IE8, IE9
    • Chrome 23 (Mac)
    • Firefox 17 (Mac)
    • Safari 6
    • Opera 12 (Mac)
    • Safari Mobile (iOS 6.0)
    • Webkit Mobile (Android 4.0.4)

阅读更多

HTML5的未来 - HTML5 还能走多远?

HTML5的未来 - HTML5 还能走多远?

还记得现在就开始使用HTML5的十大原因吗?HTML5目前仍旧是讨论的焦点,在今天的这篇文章中,我们将讨论HTML5可能的未来。

HTML5的问世引发了网络开发者们的激烈争论,HTML5 - HTML5真的有如看上去那么好吗?还是说它只是一个被大肆炒作了的标准HTML?现在网上有大量关于HTML5的虚假信息,但大多人可能根本就不明白什 么是HTML5。然而,事实上当这项技术还在预期阶段时,人们就对它报以了太多的期望。当然也不可否认,这项技术确实给用户们带来了很多新的特性和优势, 甚至Drupal 8也大程度上将它作为热点,但是HTML5同时也有它的劣势,而这个劣势却是不可能被消除的,就是这个原因导致了关于HTML5的无休止争论,了解 HTML5的优缺点将成为唯一结束争论的途经。

HTML5究竟是神马东东?

HTML5 的问世将会成为用户们广泛使用工具之一,所以先要了解什么是HTML5是非常有必要的, 它在HTML原有的基础上新增加了一些标签列入<video>,…

标签: html5, html5未来

阅读更多

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

还记得Emmet(即Zen coding)吗?最棒的书写HTML代码的利器之一,能够帮助你快速书写HTML代码的工具。在今天这篇文章中,我们将要分享7个超酷的Emmet书写HTML的技巧,希望大家喜欢!

1. 跳过Div

第一个小技巧就是跳过div,Emment非常清楚你需要输入什么内容,你只需要输入class或者是id,Emmet会自动帮助你生成正确的div。如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

大家可以看到,不管你是否添加了div,Emmet都会自动生成需要div元素。

含糊标签名称

这个技巧属于implicit tag names特性,你不需要指定div或者li,Emmet会自动帮助你生成,如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

2. 带有DOM导航的链式缩写

如果你使用Emmet来扩展简单的class名称生成div的话。这个方式可以帮助你省去大量的时间。你只需要记住如下语法:

  • > 子节点:在DOM树下一层添加创建一个元素
  • + 同级别:在DOM树同一层添加创建一个元素
  • ^…

标签: HTML, Zen-coding, Emmet, 工具

阅读更多

HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

在线演示

大家可能都知道HTML5中出现了很多以前没有的标签,例如,header,nav,和footer,在这之前我们如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部,导航及其页底部分,如下:

#nav{  padding: 10px  ... }
#header{  padding: 10px  ... }
#footer{  padding: 10px  ... }

定义完之后呢,我们使用div标签来组织页面结构,如下:

<div id="header"></div>
<div id="nav"></div> 
<div id="footer"></div>

这样的代码让我们创建了很多的非样式的CSS定义,是的代码结构复杂并且不直观易懂。

在新的HTML5标准中,我们定义了一系列的标签,帮助你更语义化的定义页面层次和逻辑,你不需要自己定义相关的DIV,HTML5提供了现成的标签来完成上述的结构化定义,如下:

<header></header>
<nav></nav>
<footer></footer>

使用以上的标签,你只需要在css文件中定义相关的真正的样式信息即可。 

在今天的这篇文章中,我们将介绍相关的基本HTML5标签Header,nav和footer。

header标签

在新的标准中header标签定义如下:

"A…

标签: HTML5, header, nav, footer, html5标签, 响应式

阅读更多

帮助你开发基于HTML5的网站原型页面 - HTML5 Bones

帮助你开发基于HTML5的网站原型页面 - HTML5 Bones

相关阅读: 分享一个快速开发jQuery插件工具:jqueryboilerplate

熟悉前端开发的朋友肯定都知道Boilerplates,它可以有效地帮助我们搭建网站页面的最初版本。

在今天的文章中,我们将介绍一个新的HTML5 Boilerplates - HTML5 Bones。这个模板可以帮助你搭建最基础的HTML5页面。最棒的地方在于它包含了很完整的行内注视,可以有效地指导你如何正确的使用HTML5。它可以作为你正确使用HTML5的一个指导性手册。

模板本身并不带有任何的javascript类库,例如 jQuery or Modernizr,但是带有Normalize.css和原始的html5shiv,能够很好的帮助你处理不同浏览器的显示差别和浏览器兼容性问题。

同时也包含了WAI-ARIA roles等。

标签: boilerplate, 模板, html5模板, html5页面模板

阅读更多

下一页

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐