12个实用的HTML应用程序和开发工具
openkk 12年前
<h2>1. Mockups : HTML5 Apps for Creating Wireframes & Mockups</h2> <p><a href="https://simg.open-open.com/show/637e12ff15712917ac55783b5c21621c.jpg"><img class="aligncenter size-full wp-image-12010" title="moqups" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/637e12ff15712917ac55783b5c21621c.jpg" width="530" height="354" /></a><br /> Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them. They’ve tried to make things simple and fairly intuitive so you can unleash your creativity without any obstacles. Moqups is built on open standards, striving to provide the best experience within the browser, without compromise.<br /> There are 60+ handcrafted, crisp-looking SVG stencils (and more down the pipeline). You can export to PDF and PNG. It supports Auto-save. You can easily Undo, Redo, Cut, Copy and Paste. You can use Desktop-like keyboard shortcuts. It supports snap to objects/grid when manipulating objects as well. And it’s free.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958523323800638076" target="_blank"><span class="left">Source </span></a><br /> </p> <h2>2. OriDomi : Fold Up HTML Elements Like Paper</h2> <p><a href="https://simg.open-open.com/show/e6737819d9dc1bb4435626932165817e.jpg"><img class="aligncenter size-full wp-image-12011" title="oridomi" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/e6737819d9dc1bb4435626932165817e.jpg" width="530" height="168" /></a><br /> oriDomi is a JavaScript library for beautifully folding up any HTML element just like a paper. The library doesn’t depend on any JavaScript frameworks (but has optional support for jQuery) and uses CSS 3D transitions for creating the effect. Folding is performed as an animated event where the number of vertical/horizontal slices, speed and shading can all be set. There are multiple effects and events provided: accordion, reveal, curl, collapse, ramp, foldUp, unfold and reset.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958523323903268777" target="_blank"><span class="left">Source </span></a><br /> </p> <h2>3. Stitches : Useful HTML5 Sprite Sheet Generator</h2> <p><a href="https://simg.open-open.com/show/30d60ddb8e9b471be22fe29ecdf5d35a.jpg"><img class="aligncenter size-full wp-image-12012" title="stiches" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/30d60ddb8e9b471be22fe29ecdf5d35a.jpg" width="530" height="308" /></a><br /> Stitches is an HTML5 sprite sheet generator. Simple drag and drop image files into the space below and click “Generate” to create a sprite sheet and stylesheet. Stitches uses a couple of HTML5 APIs, and it is only currently compatible with the latest versions of Chrome and Firefox. However, it does not work on IE9. It required jQuery 1.7.1+, Modernizr, Dropfile, Flashcanvas for older browser support. It is licensed under MIT License.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958523324001705211" target="_blank"><span class="left">Source </span></a><br /> </p> <h2>4. Speaker : A Cross browser Audio Solution with HTML5</h2> <p><a href="https://simg.open-open.com/show/db604ae0623ad695b5afbd77969e1461.jpg"><img class="aligncenter size-full wp-image-12013" title="speaker2" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/db604ae0623ad695b5afbd77969e1461.jpg" width="530" height="183" /></a><br /> Speakker is a Crossbrowser Audio solution featuring HTML5. It comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors and two different button sets for light and dark themes. Easy to set up. Just a few lines of Javascript and a quantum CSS.<br /> It is featuring the technology of Projector it comes with cross-browser compability, Flash-fall back plus optional social media links and artists information links. It is free for download and released under GPL License.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958331646679236449" target="_blank"><span class="left">Source </span></a><br /> </p> <h2>5. Gauge.js : Animated Gauges With HTML5 Canvas</h2> <p><a href="https://simg.open-open.com/show/279562c65090c29a837743eb9e3ffb05.jpg"><img class="aligncenter size-full wp-image-12014" title="gauge_js" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/279562c65090c29a837743eb9e3ffb05.jpg" width="530" height="227" /></a><br /> Gauge.js is a slick script for creating animated gauges with JavaScript (Coffeescript) in HTML5 canvas. The script is standalone (jQuery is supported but not required) and doesn’t use any images or CSS. It has 2 built-in interfaces (both looks very nice) and responds very well to value changes by animating the gauge. There are options to set the animation speed, default/min/max values, colors and more.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958521907584434277" target="_blank"><span class="left">Source </span></a><br /> </p> <h2>6. WYSiHTML5</h2> <p><a href="https://simg.open-open.com/show/b1cf86fff14e2b942495cf7b0b581c19.jpg"><img class="aligncenter size-full wp-image-12015" title="html5-editor" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/b1cf86fff14e2b942495cf7b0b581c19.jpg" width="530" height="330" /></a><br /> wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing un maintainable tag soups and inline styles. It’s fast and lightweight. It generates valid and semantic HTML5 markup. It uses class names instead of inline styles. It supports speech-input for Chrome as well. It is released under MIT License.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958344733754872935" target="_blank"><span class="left">Source </span></a><br /> </p> <h2>7. Brunch : An Assembler for HTML5 Applications</h2> <p><a href="https://simg.open-open.com/show/63ae2e21fede27bbdea871f94efb7f11.jpg"><img class="aligncenter size-full wp-image-12016" title="bunch-framework" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/63ae2e21fede27bbdea871f94efb7f11.jpg" width="530" height="310" /></a><br /> Brunch is an assembler for HTML5 applications. It is a lightweight approach to building HTML5 applications with emphasis on elegance and simplicity. It’s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology. To simplify app development, brunch watches your files for changes and automatically wraps your scripts and templates in require.js modules. All build errors are printed to console. If you have growl / libnotify, brunch will use them too.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958523324229268786" target="_blank"><span class="left">Source </span></a><br /> </p> <h2>8. Jukebox Lite : HTML5 Image Gallery</h2> <p><a href="https://simg.open-open.com/show/cce09050b0c01ea1918af2665b8326d0.jpg"><img class="aligncenter size-full wp-image-12017" title="juicebox_lite" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/cce09050b0c01ea1918af2665b8326d0.jpg" width="530" height="449" /></a><br /> Juicebox Lite is a free-to-use (branded) and HTML5-powered image gallery for creating good-looking galleries very easily. Galleries build with it works everywhere; desktop, tablet or mobile and handles different screen sizes well (responsive). Images can be browsed either with keyboard, mouse or touch (swipes) and they can be viewed in full-screen. There is an -optional- control bar which is shown on hover and allows us to view/hide thumbnails, switch to full-screen mode or load only the image file displayed.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958344761898304340" target="_blank"><span class="left">Source </span></a><br /> </p> <h2>9. Spaceport : Build Your Mobile Games with HTML5 and JavaScript</h2> <p><a href="https://simg.open-open.com/show/2216a1948ba9595a49c123d874d3ea13.jpg"><img class="aligncenter size-full wp-image-12018" title="spaceport2" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/2216a1948ba9595a49c123d874d3ea13.jpg" width="530" height="295" /></a><br /> Spaceport helps you build beautiful high-performance games and run them as native apps. Spaceport uses OpenGL to accelerate rendering on native devices. With Spaceport’s graphics engine, you use versatile and efficient vector graphics formats instead of bloated sprite sheets. Doing so minimizes the size of asset downloads and drastically reduces loading times. Spaceport leverages universal web standards like HTML5 and Javascript to deliver remarkably consistent gaming experiences across platforms. Spaceport allows you to create dynamic online games for multiple devices without a large development team. Better yet, Spaceport is completely free to use. Only pay if your game makes you money.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958200382985092388" target="_blank"><span class="left">Source </span></a><br /> </p> <h2>10. jPlayer : The jQuery HTML5 Audio /Video Library</h2> <p><a href="https://simg.open-open.com/show/09bfc2c957bc1dfdb11fdad6e41e794f.jpg"><img class="aligncenter size-full wp-image-12019" title="jplayer" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/09bfc2c957bc1dfdb11fdad6e41e794f.jpg" width="530" height="369" /></a><br /> jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community. It is easy to get started and deploy in minutes. It’s totally customizable and skinnable using HTML and CSS. It has been tested on Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958342065792099247" target="_blank"><span class="left">Source </span></a><br /> </p> <h2>11. HTML5 Please </h2> <p><a href="https://simg.open-open.com/show/ba11831465edd4401da02f61ba6e589f.jpg"><img class="aligncenter size-full wp-image-12020" title="html5-please" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/ba11831465edd4401da02f61ba6e589f.jpg" width="530" height="367" /></a><br /> HTML5 Please helps you look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. So that, you can decide if and how to put each of these features to use.<br /> The recommendations represent the collective knowledge of developers who have been deep in the HTML5 trenches. If you think the recommendation is incorrect, you can edit the recommendation for each feature and send a pull request as well.<br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958338407603469299" target="_blank"><span class="left">Source </span></a><br /> </p> <h2>12. Flotr2: Open Source HTML5 Charts & Graphs</h2> <a href="https://simg.open-open.com/show/d40fd212db3ee3ab1e1afd051c43caab.jpg"><img class="aligncenter size-full wp-image-12021" title="flotr2" alt="12个实用的HTML应用程序和开发工具" src="https://simg.open-open.com/show/d40fd212db3ee3ab1e1afd051c43caab.jpg" width="530" height="426" /></a> <br /> Flotr2 is an open source library for HTML5 canvas charts and graphs which is a fork of the popular flotr without the dependency of Prototype JS framework and has many improvements. The library is framework independent and has support for line, bar, candle, pie and bubble charts. There are lots of customization options offered like the ability to define titles, subtitles, colors, labels on/off and so many others for each and every possible variable. <br /> <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958330454385699767" target="_blank"><span class="left">Source </span></a>