25 个最新的Web应用和工具
jopen 12年前
<h3>1. Ninja : An Authoring Tool for HTMl5 Content & Apps</h3> <p><a href="/misc/goto?guid=4958524108611637219" rel="attachment wp-att-2034"><img class="alignnone size-full wp-image-2034" title="ninja_full" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/d9467250ea0806788d8de601318f956f.jpg" width="625" height="412" /></a><br /> Ninja is a fully featured content authoring tool for creative professionals who need to deploy HTML5 web applications for desktop or mobile, and want to create content in a visual way.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958524108714914872" target="_blank">Source </a><br /> </p> <h3>2. jsPDF : Create PDF Files with JavaScript</h3> <p><a href="/misc/goto?guid=4958524108802569575" rel="attachment wp-att-2035"><img class="alignnone size-full wp-image-2035" title="jspdf" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/42d7fa11e513c6005b540f5410ddd663.jpg" width="625" height="281" /></a><br /> jsPDF, a free JavaScript library, doesn’t need any server-side script and cancreate PDF files on the client-side. It has support for text (styling is possible), drawing shapes and images. Also, the document can be set as landscape and metadata like subject an title can be added as well. The library works with no requirements in modern browsers and has aFlash-fallback for the others.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958523623297220172" target="_blank">Source </a><br /> </p> <h3>3. This is Responsive</h3> <p><a href="/misc/goto?guid=4958524108913615361" rel="attachment wp-att-2036"><img class="alignnone size-full wp-image-2036" title="thisisresponsive" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/07f89ba3f5d16ae63f5d30dd8abf4f3e.jpg" width="625" height="347" /></a></p> <p>This Is Responsive is an impressive and must-bookmark resource for anyone working on such layouts. It features responsive patterns for the layout, tables, navigation, forms, images and more. Also, it has a very well categorized list of links to responsive-related resources where you can find articles, tutorials and libraries/plugins.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958524109011215246" target="_blank">Source </a><br /> </p> <h3>4. Infinity.js : Speeds Up Scrolling Through Long Lists</h3> <p><a href="/misc/goto?guid=4958524109099271884" rel="attachment wp-att-2037"><img class="alignnone size-full wp-image-2037" title="infinity-js" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/4090ac2c11ead53a7bb0d276270f0aa9.jpg" width="625" height="360" /></a><br /> Infinity.js is a UITableView for the web: it speeds up scrolling through long lists and keeps your infinite feeds smooth and stable for your users. It is small, battle-tested, and highly performant. The code is hosted on Github, and distributed under the BSD License. The annotated source is available, as are demos both with Infinity turned off and on. Infinity.js was built by Airbnb alongside the development of the Popular Wishlists and Friends feeds, and sees daily production use there today. Its only dependency is on jQuery.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958523618379389912" target="_blank">Source </a><br /> </p> <h3>5. Reveal.js : HTML Presentation Framework</h3> <p><a href="/misc/goto?guid=4958524109212184513" rel="attachment wp-att-2038"><img class="alignnone size-full wp-image-2038" title="reavel-js" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/786bac4c96e9499a8e4a2d31294f4d60.jpg" width="625" height="404" /></a><br /> Reveal.js is a framework for easily creating beautiful presentations using HTML. It comes with a broad range of features including nested slides, markdown contents, PDF export, speaker notes and a JavaScript API.<br /> It’s best viewed in a browser with support for CSS 3D transforms but fallbacks are available to make sure your presentation can still be viewed elsewhere. If you’re interested in using speaker notes, reveal.js comes with a Node server that allows you to deliver your presentation in one browser while viewing speaker notes in another.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958331267816467187" target="_blank">Source </a><br /> </p> <h3>6. OpenKeyval</h3> <p><a href="/misc/goto?guid=4958524109336650472" rel="attachment wp-att-2039"><img class="alignnone size-full wp-image-2039" title="OpenKeyval" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/89f322312711d33fcddf9f6d4dcbbd0d.jpg" width="625" height="125" /></a></p> <p>OpenKeyval is a completely open key-value data store, exposed as a drop-dead simple web service. The goal is to make this a very easy way to persist data in web applications. We simply send a POST request to store any data (with a unique prefix of our preference), can request or delete it anytime and responses comes in a JSON format. Also, like mentioned, OpenKeyval is open source. It is built with PHP and anyone can host their own instance.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958524109426414519" target="_blank">Source </a><br /> </p> <h3>7. PHP The Right Way</h3> <p><a href="/misc/goto?guid=4958524109524749014" rel="attachment wp-att-2040"><img class="alignnone size-full wp-image-2040" title="php-the_right_way" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/2ddca64bf27e0b9fc27d292068ac68ea.jpg" width="625" height="217" /></a><br /> “PHP: The Right Way” is a very detailed and free documentation of PHP’s best practices to help anyone write better code. There is no standard way of writing code and the website aims to show the generally accepted practices and alternatives. Also, there are lots of links to authoritative tutorials on the web. It has topics from the setup of PHP to the basics, security, caching and much more.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958524109617693334" target="_blank">Source </a><br /> </p> <h3>8. Big Screen</h3> <p><a href="/misc/goto?guid=4958524109707834367" rel="attachment wp-att-2041"><img class="alignnone size-full wp-image-2041" title="bigscreen" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/0cfbddda39b6b806156bd5241c7d9bfc.jpg" width="625" height="394" /></a><br /> BigScreen is a simple library for using the JavaScript Full Screen API. BigScreen makes it easy to use full screen on your site or in your app. It smoothes out browser inconsistencies and bugs, especially if the element you’re working with is inside of an iframe. It will also intelligently fall back to the older video full screen API if the element contains a <video tabindex="0" controls=""> and the older API is available. It supports Chrome 15+, Firefox 10+, Safari 5.1+. </video></p> <h3>9. Site Cake : Open Source CMS for Small Websites</h3> <p><a href="/misc/goto?guid=4958524109787538379" rel="attachment wp-att-2042"><img class="alignnone size-full wp-image-2042" title="sitecake_com" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/2cb50b060492c954fea9775002390e43.jpg" width="625" height="351" /></a></p> <p>SiteCake is an open source PHP CMS application which allows site admin toedit a website while browsing it. Once logged in, everything becomes editable and it displays a “content editing bar” with options for inserting HTML elements like headers, lists, images, videos and other stuff like Google Maps or a slideshow. It is possible to crop images, drag ‘n’ drop items, create new pages and delete anything with a click. SiteCake-enabling any website is easy by simply adding specific classes to the HTML elements and the its UI is multi-language (there are various languages files provided).<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958524109894616837" target="_blank">Source </a><br /> </p> <h3>10. PDF Sketch Sheets for Creating Wireframes</h3> <p><a href="/misc/goto?guid=4958524109974167642" rel="attachment wp-att-2043"><img class="alignnone size-full wp-image-2043" title="pdfsketchsheets" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/d069cabd4ff56fff968f4f51e0b45d90.jpg" width="625" height="268" /></a></p> <p>Sneakpeekit is a website providing high-quality PDF sketch sheets for web designers. The sheets are compatible with the most popular grid systems like Less Framework 4, 978 grid system, 1140 css grid, The Semantic grid system, Bootstrap from 推ter, etc. And, they are not only for the desktop browsers but there are versions for tablets and mobile as well.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958524110066185509" target="_blank">Source </a><br /> </p> <h3>11. MobileCartly : Open Source Mobile E-Commerce App</h3> <p><a href="/misc/goto?guid=4958524110158603013" rel="attachment wp-att-2044"><img class="alignnone size-full wp-image-2044" title="mobilecartly" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/3ccf075e7cf5091ee5b6f4fbefbbae87.jpg" width="625" height="370" /></a></p> <p>MobileCartly is an open source shopping cart application that focuses on mobile. With a front-end that is compatible with all major mobile browsers and a powerful back-end, it makes selling via mobile pretty easy. It uses a CSV file as the data source and you can use Open Office, Google Docs or MS Excel to add/edit/remove your products. There are features like PayPal integration, order management, stats and invoicing. It also has a WordPress plugin that can integrate your blog with the mobile store.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958524110252491587" target="_blank">Source </a><br /> </p> <h3>12. Speakker</h3> <p><a href="/misc/goto?guid=4958524110342443070" rel="attachment wp-att-2046"><img class="alignnone size-full wp-image-2046" title="speakker2" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/fdc9cee33d8347eb766a7edb2a3a0e46.jpg" width="625" height="216" /></a></p> <p>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 /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958331646679236449" target="_blank">Source </a><br /> </p> <h3>13. Derby MVC Framework</h3> <p><a href="/misc/goto?guid=4958524110470362860" rel="attachment wp-att-2047"><img class="alignnone size-full wp-image-2047" title="derby" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/27640f386b1c6c7b0abbb6f2908d848f.jpg" width="625" height="385" /></a></p> <p>The Derby MVC framework makes it easy to write realtime, collaborative applications that run in both Node.js and browsers.Derby includes a powerful data synchronization engine called Racer that automatically syncs data among browsers, servers, and a database. </p> <p>Models subscribe to changes on specific objects, enabling granular control of data propagation without defining channels. Racer supports offline usage and conflict resolution out of the box, which greatly simplifies writing multi-user applications.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958521772897604825" target="_blank">Source </a><br /> </p> <h3>14. Express : Robust Node.js Web Application Framework</h3> <p><a href="/misc/goto?guid=4958524110597873860" rel="attachment wp-att-2048"><img class="alignnone size-full wp-image-2048" title="express-node-framework" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/0b3f5f9ee798245f892c3496ff007c11.jpg" width="625" height="401" /></a><br /> Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications. With a myriad of HTTP utility methods and Connect middleware at your disposal, creating a robust user-friendly API is quick and easy.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958522262563415188" target="_blank">Source </a><br /> </p> <h3>15. Stictches : A Handy HTML5 Sprite Sheet Generator</h3> <p><a href="/misc/goto?guid=4958524110714430354" rel="attachment wp-att-2049"><img class="alignnone size-full wp-image-2049" title="stiches" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/85e8e986812856111d4ab435faebcfd0.jpg" width="625" height="363" /></a></p> <p>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="zilla-button medium black square" href="/misc/goto?guid=4958523324001705211" target="_blank">Source </a><br /> </p> <h3>16. Cage : A Pretty Slick Online Collaboration Tool</h3> <p><a href="/misc/goto?guid=4958524110835806279" rel="attachment wp-att-2050"><img class="alignnone size-full wp-image-2050" title="cage" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/d17107f2f50b88ad641c8ed0994d327f.jpg" width="625" height="384" /></a></p> <p>Cage is a an online collaboration tool that makes it shockingly simple for designers and teams to share, organize, manage, and approve creative work. Using Cage, you can add simple, straightforward notes & conversations directly on the work, and then show your clients past revisions so they can see the progress you have made.</p> <p>Cage provides your clients and team the ability to approve work faster. It is useful for any type of designer, artist or creative team without a lot of clutter. Leaving out vital features for the sake of simplicity leads to workarounds, and that doesn’t work for anyone. It makes it easy for creatives to present, manage and secure approvals on their work.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958521908905429767" target="_blank">Source </a><br /> </p> <h3>17. Jam : A JavaScript Package Manager for Front End Developers</h3> <p><a href="/misc/goto?guid=4958524110962313962" rel="attachment wp-att-2053"><img class="alignnone size-full wp-image-2053" title="jam" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/b62dfce6b7ccca6ffd334e59089ac19e.jpg" width="625" height="337" /></a></p> <p>Jam is a package manager for JavaScript. Unlike other repositories, they put the browser first. Using a stack of script tags isn’t the most maintainable way of managing dependencies, with Jam packages and loaders like RequireJS you get automatic dependency resolution.</p> <p>You can achieve faster load times with asynchronous loading and the ability to optimize downloads. JavaScript modules and packages provide properly namespaced and more modular code. Every package work in the browser and play nicely with module loaders like RequireJS. They’re not hijacking an existing repository, they’re creating a 100% browser-focused community.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958521909106611350" target="_blank">Source </a><br /> </p> <h3>18. FileDrop : Cross-Browser Drag n Drop File Uploader</h3> <p><a href="/misc/goto?guid=4958524111099975467" rel="attachment wp-att-2054"><img class="alignnone size-full wp-image-2054" title="filedrop" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/9910b2e50750fa6a2c5cb403a6071497.jpg" width="625" height="216" /></a><br /> FileDrop is a JavaScript class for quickly creating drag ‘n’ drop file upload interfaces. The class doesn’t require any JavaScript frameworks and works cross-browser, including IE6 (with iFrame fallback). </p> <p>It has support for multiple file uploads, there are callbacks on many events and any number of FileDrop uploaders can be used in the same page. Also, the size of the class is lightweight (3.5 gzipped) and its API is well-documented.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958524111185237713" target="_blank">Source </a><br /> </p> <h3>19. DbNinja</h3> <p><a href="/misc/goto?guid=4958524111273014075" rel="attachment wp-att-2055"><img class="alignnone size-full wp-image-2055" title="dbninja" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/4ee56dad7ef4080dac96a6ea4035fe62.jpg" width="625" height="438" /></a></p> <p>DbNinja is an advanced web-based application for MySQL database administration and development. It’s a must-have for those who wish to access their hosted servers remotely. DbNinja supports all the latest features including: triggers, events, views, stored routines and foreign keys; in addition it allows to import and backup data and MySQL object structures, manage users and much more. DbNinja has a highly functional and elegant user interface, and can be used securely in any modern browser on any OS.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958524111371174927" target="_blank">Source </a><br /> </p> <h3>20. CSSComb : Sort CSS Properties in a Given Order</h3> <p><a href="/misc/goto?guid=4958524111457558757" rel="attachment wp-att-2056"><img class="alignnone size-full wp-image-2056" title="csscomb_com" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/1e45417b90c64bf446d55286183760e1.jpg" width="625" height="351" /></a></p> <p>CSScomb, a free service sorts CSS properties in any order you want (and, their default order is pretty good too -from the most to least important-). It works with both single + multi-line CSS code and besides the online version, there are add-ons provided for the most popular IDEs.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958522636819312687" target="_blank">Source </a><br /> </p> <h3>21. EpicEditor : An Embeddable JavaScript Editor</h3> <p><a href="/misc/goto?guid=4958524111596696529" rel="attachment wp-att-2057"><img class="alignnone size-full wp-image-2057" title="epic-editor" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/c995d4e41f0a2610820f92106534c60f.jpg" width="625" height="434" /></a></p> <p>EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it.</p> <p>EpicEditor is set up to allow you to use any parser that accepts and returns a string. This means you can use any flavor of Markdown, process Textile, or even create a simple HTML editor/previewer. Theming is easy in EpicEditor as well.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958521909294192098" target="_blank">Source </a><br /> </p> <h3>22. Moqups</h3> <p><a href="/misc/goto?guid=4958524111702683160" rel="attachment wp-att-2058"><img class="alignnone size-full wp-image-2058" title="moqups" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/44bb22a83143cd56506ad166a566e16c.jpg" width="625" height="417" /></a></p> <p>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 /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958523323800638076" target="_blank">Source </a><br /> </p> <h3>23. AuthManager : Open Source PHP User Authentication & Management App</h3> <p><a href="/misc/goto?guid=4958524111822609793" rel="attachment wp-att-2059"><img class="alignnone size-full wp-image-2059" title="authmanager" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/f0957e57eb23fd83ea5d8aee8bf56cae.jpg" width="625" height="208" /></a></p> <p>It is an open source user management and authentication system built with PHP. AuthManager comes with a ready-to-use registration module where users can register with their e-mails or 非死book accounts, sign-in and get a new password if they forgot it. Besides the front-end, AuthManager has a powerful back-end which integrates with Google Analytics, shows the logs of user activities, displays members for editing/deleting and presents various settings for customization.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958524111915576401" target="_blank">Source </a><br /> </p> <h3>24. Foundation 3</h3> <p><a href="/misc/goto?guid=4958524111997693147" rel="attachment wp-att-2060"><img class="alignnone size-full wp-image-2060" title="foundation-3" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/a4f77c50ae9cf3258577dbced3a0e9e9.jpg" width="625" height="338" /></a></p> <p>Foundation 3 is built on ZURB’s 14 years of experience at building sites and apps for the Web. It is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself, as well as sites built with it. You can use the Sass or straight CSS version of Foundation.<br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958338175196780124" target="_blank">Source </a><br /> </p> <h3>25. Prism : Light Weight Syntax Highlighter</h3> <p><a href="/misc/goto?guid=4958524112114505575" rel="attachment wp-att-2061"><img class="alignnone size-full wp-image-2061" title="prism-syntax_highlighter" alt="25 个最新的Web应用和工具" src="https://simg.open-open.com/show/2bd51ff5334074d9298f3fdb7218af83.jpg" width="625" height="292" /></a></p> Prism is lightweight (1.5KB minified & gzipped), can be integrated so easily (just insert a CSS and JS file) and works fast. It is already used to beautify lots of code in Dabblet (an interactive CSS playground) so its pretty stable. New languages can be added and the functionality can be improved with the plug-in architecture and the look/feel can be completely styled via CSS. <br /> <br /> <a class="zilla-button medium black square" href="/misc/goto?guid=4958524112203035774" target="_blank">Source </a>