CSS and JavaScript tools to take your website to the next level. Topcoat Topcoat is a very neat and clean library of CSS classes specialized in form elements: buttons, checkboxes, sliders, etc. A super easy way to make your website or app look good in minutes. Demo/Download: Countable.js As you can guess, countable.js is a JavaScript function to add live paragraph, word and character counting to any HTML element. Demo/Download: iCheck Want super-looking checkboxes and radio buttons for your new web app? Demo/Download: CSS only responsive navigation Responsive layouts are very popular on the web right now, and this is definitely a good thing in my opinion.
Demo/Download: Almost Flat UI Based on Foundation Framework, Almost Flat UI is a complete HTML/CSS/JS framework to build your site on. Demo/Download: Chart.js Demo/Download: PlaceIMG Demo/Download:
Hiroshi/knockoutFire. Firebase - A scalable real-time backend for your app. Learn.knockoutjs.com. In this first tutorial you'll experience some of the basics of building a web UI with the Model-View-ViewModel (MVVM) pattern using knockout.js. You'll learn how to define a UI's appearance using views and declarative bindings, its data and behavior using viewmodels and observables, and how everything stays in sync automatically thanks to Knockout's dependency tracking (even with arbitrary cascading chains of data). Using bindings in the view In the bottom-right corner, you've got a viewmodel containing data about a person.
In the top-right corner, you've got a view that's supposed to display the person data. Modify the two <strong> elements in the view, adding data-bind attributes to display the person's name: <p>First name: <strong data-bind="text: firstName"></strong></p><p>Last name: <strong data-bind="text: lastName"></strong></p> data-bind attributes are how Knockout lets you declaratively associate viewmodel properties with DOM elements. Running the code Having trouble? Ingrid, the jQuery Datagrid. How to Use Part 1 - Setup Ingrid uses the sugary sweetness only found in your latest version of JQuery. You'll just need two files to get Ingrid working in your site/app.
<script type="text/javascript" src="js/jquery-1.2.js"></script><script type="text/javascript" src="js/ingrid.js"></script> Include the Ingrid CSS (or roll your own). <link rel="stylesheet" href="css/ingrid.css" type="text/css" media="screen" /> Check the CSS and make sure the images are properly referenced. ..
Part 2 - Activate Part 3 - Server Side Download Currently on Github Ingrid is on Github. Legacy Prior to moving to Github in 01/2014, changes were tracked at Google Code. v.9.4 (Thanks Patrice!) Questions What are all the moving parts? Ingrid's got 3 main parts: a header, a body, and a paging control. How does the server-side script work? Ingrid passes a couple different params to the server, depending on how it's configured. I think I saw Ingrid on Del.icio.us. Contact Donate. The Toolbox: a directory of useful single-page sites and apps. » HTML 簡報正夯：html5slides, deck.js, impress.js 使用心得 | iCoding.
即使有精練的文字、美麗的圖片、華麗的動畫效果，仍舊覺得自己的投影片沒有新意嗎？ 那麼來試試看使用 HTML CSS 製作你的投影片吧！ 優點 1. 可以加入 JavaScript 做出可以互動的效果。 2. 可以內嵌 iframe 直接把網頁內容匯入。 缺點 1. 聽起來好像缺點比較多？ The best way to teach the web is with the web. 說的真是太好了！ Html5slides (官網) 是由 Google 做出來的一個小玩具工具，它很單純，就一個 html 檔案，直接另存新檔或者原始碼複製貼上就可以開始修改了。 Deck.js (GitHub) 是一個功能頗完整的 HTML 簡報工具，包含了快速鍵可以：總覽所有投影片(m)，跳到某張投影片(g)，並且提供幾個投影片範本、換頁效果可以選擇。 Impress.js (GitHub) 是利用 CSS3 來做呈現，有別於傳統投影片一張張放映的方式，它像是在一張大圖片上遊走，瀏覽各個小區塊。 下面筆者將簡單介紹一下如何開始 happy coding 一份 HTML 投影片，但不會詳細描述該如何加上標題、插入圖片及 iframe…等等，其實這些就跟製作網頁一樣簡單！ 必備技能：必須要了解基本 HTML 和 CSS 語法才有辦法使用這些工具。
共同部份 無論是哪一套工具，它們描述一頁頁畫面(投影片)的方式都很固定，都是用一個特定的 HTML tag 來標記一頁的內容。 <article>；deck.js 用的是<section class="slide">；impress.js 用的是 <div class="step">。 Deck.js 跟 impress.js 都可以額外指定 id 屬性來替這張投影片命名，這個名字會成為這頁在網址列上的識別與定位(#id)。 此外，HTML 簡報設計都仰賴 CSS 來調整版面，如果不是一個接一個擺下來，而需要並排或者其他特殊排版，撰寫 CSS 是絕對免不了的。 差異比較 * 固定版面大小 v.s. 這三個工具最明顯的差異在於對版面大小的設定，html5slides 固定是以寬 900 高 700 像素作為一頁的呈現，因此它都不太會有「在我的螢幕看起來好的，在你的螢幕走位」的問題。
* 初始化的複雜度 * 動畫方面 * 嵌入 iframe * 程式碼呈現 個人心得 結論. Presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz. Jaysalvat/jquery.facedetection. BonsaiJS. KineticJS HTML5 Canvas JavaScript Library Framework. Paper.js — Paper.js. Tangle: a JavaScript library for reactive documents. Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn. This is a simple reactive document. When you eat 3 drag cookies, you consume 150 calories.
This is the HTML for that example. When you eat <span data-var="cookies" class="TKAdjustableNumber"> cookies</span>, you consume <span data-var="calories"> calories</span>. And this is the JavaScript. Write your document with HTML and CSS, as you normally would. Try out some examples. Proposition 21: Vehicle License Fee for State Parks The way it is now: California has 278 state parks, including state beaches and historic parks. What Prop 21 would do: Proposes to charge car owners an extra $18 on their annual registration bill, to go into the state park fund.
Analysis: Suppose that an extra $18 was charged to 100 % of California taxpayersvehicle registrations. Fc = 2 KHz Q = 0.8 Unstable. Datavisualization.ch Selected Tools. Javascript in Modern Web Design. In today's web design, Javascript is a must-have component. Aside from its functionality, Javascript can enhance user experience by creating transitional effects such as fading and sliding animation. Thanks to the open source Javascript frameworks, we don't need to write custom Javascript from scratch anymore. Here are 47 Javascript plugins that you can use to enhance the user experience and functionality of your website. Don't forget to check out the sample sites, which show how the plugins can be used. The Two Popular Javascript Frameworks Right now, the two commonly used Javascript frameworks are: jQuery and MooTools.
Check out the poll below: Loading ... Image Zoom and Popup Lightbox You're probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. jQuery lightBox Plugin This is exactly the same as Lightbox JS, but written on top of jQuery library. Thickbox Highslide JS FancyBox jQZoom Gallery and Slideshow Slideshow 2! Slideshow 2! Noobslide. jClockClock.