HTML5 and CSS3 - Adobe - The Expressive Web - Beta

Style Master CSS Editor for Windows and Mac OS X Cool Tools and Toys for Web Developers John, the lead developer (ok, pretty much the only developer) of Style Master is an avowed hacker. He loves exploring and experimenting with the latest features in browsers. XRAY works in Safari, Firefox and Internet Explorer. XRAY uses lots of cool CSS3 features like border-radius, opacity, box and text shadow, as well as the HTML5 canvas. MRI helps you create the best possible selectors for your CSS. MRI also uses lots of cool CSS3 features like border-radius, opacity, box and text shadow, as well as the HTML5 canvas. CSS3 Sandbox Gradients Explore CSS gradients (both linear and radial) (an experimental feature in Safari 4, and a proposed addition to CSS3). Shadows CSS now lets you create drop shadows on text, and on the box of an element. CSS Transforms You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Coming soon

iWeb Widgets, Tutorials, Tips, and Tricks | Beyond iWeb How Browsers Work: Behind the Scenes of Modern Web Browsers Web browsers are the most widely used software. In this primer, I will explain how they work behind the scenes. We will see what happens when you type google.com in the address bar until you see the Google page on the browser screen. The browsers we will talk about There are five major browsers used on desktop today: Chrome, Internet Explorer, Firefox, Safari and Opera. The browser's main functionality The main function of a browser is to present the web resource you choose, by requesting it from the server and displaying it in the browser window. The way the browser interprets and displays HTML files is specified in the HTML and CSS specifications. Browser user interfaces have a lot in common with each other. Address bar for inserting a URIBack and forward buttonsBookmarking optionsRefresh and stop buttons for refreshing or stopping the loading of current documentsHome button that takes you to your home page The browser's high level structure The browser's main components are (1.1): Syntax:

Responsive template design for dynamic learning personalization | eXact learning Blog From single source/multiple channel to responsive content template design for dynamic learning personalization Producing effective learning content to date required the right pedagogical approach, a good level of creativity, effective production methodologies and the appropriate set of tools. Now the learning content authoring community wants more. Instructional designers want to be able to turn learning content into a live and ever evolving learning experience able to attract users and keep them engaged whilst adapting to their user skills, devices and context of use. They want the content to hook to the users’ workflow status, delivering the right piece of learning where and when the user needs it, adapting to his or her skills and tasks to be accomplished, detecting devices and location of use. In a nutshell, they want learning content to be personalized and localized to be available in a “context responsive” way, just in time and just enough as needed.

10个必需的iOS开发工具和资源 界面总不是一件很容易事，尤其是iPhone/iPad的界面，做过iOS开发的程序员，一定会感到开发iPhone/iPad的界面是一件多么不容易的事。下面的文章来自10 Essential iOS Developer Tools & Resources，这个文章介绍了十个iOS开发的基础性工具和资源，其一定会很有效地帮你做iOS的开发。（在这里，我再闲扯一句，虽然Android的开发好像整整XML文件界面就出来了，其明显比iOS的开发要容易很多，但是我还是觉得iOS的生命力要强过Android，看看Android今天的应用就知道，有时候入门门槛低不是一些好事，大多数的程序员搞出来的Android代码和软件简直令人作呕，就像不是每个人都能烧得手好菜一样。（“食客与大厨”，也许偏激，但值得你我思考），又把蛋扯远了） 1. Omnigraffle 是一个很强大的像Microsoft Viso的一个软件，其只能于运行在Mac OS X和iPad平台之上。 Omnigraffle Link, Ultimate iPhone Stencil Link 2. 你可能能从上面的这些图标中看到Flipboard 和 Twitter 在iOS上的应用使用了其中的一些图标。 Glypish Link 3. teehan + lax iPhone 4 GUI PSD teehan+lax 是一个加拿大多伦多的代理商。 teehan + lax iPhone 4 GUI PSD Link 4. 斯坦福大学iPhone开发教程，这可能是iOS开发者的圣经级的课程了，你可以从 iTunes U上下载，当然，国内的各大门户公开课也有这个视频，还有中文字幕。 iTunes U Link 5. 71 Squared 如果你要搞iPhone的游戏开发，那么你可看看 71 Squared 上的资源和教程，让你从零开始搞iPhone游戏。 71 Squared Link 6. 如果你想让你的应用发出一个HTTP请求，并通过仿真器来调试，这恐怕是一件很难的事。 Charles Link 7. 和 Charles一样， ASIHTTPRequest 也是一个强大的封装其由 CFNetwork API构造。 ASIHTTPRequest Link 8. Stack Overflow 这个东西不用说了吧。 Stack Overflow Link 9.

淺談HTML5中的 Mobile App Cache 與 Web Database 作者：李孟翰 / 臺灣大學工程科學及海洋工程研究所研究生 前言 隨著Android/iPhone等智慧型手機的狂賣，Mobile apps也如雨後春筍般產出。但大部分Mobile apps都需要上網連線才能正常運作，不管是3G上網或者Wi-Fi上網都可能遇到網路不穩或者擁塞等問題。HTML5的開發團隊注意到這個問題，提出使用 Mobile App Cache機制，不只是可以加快網站載入的速度，離現時還可以繼續使用。 Mobile App Cache Mobile App Cache的基本概念是就是告知瀏覽器哪些東西需要cache住，哪些東西一定要上網抓，若沒有網路線時應該用哪些預設檔案。 這個mobile web app 需要test.html、test.css、test.js以及 才能運作。 為了讓瀏覽器能知道這個檔案，需要再<html>標籤中增加一段程式如下： 瀏覽器可利用取得manifest設定來cache什麼檔案，之後瀏覽器便可從local端取得這些資料，除了當version 編號增加時，瀏覽器才會下載新版本的cache資料，如此一來就可以達到版本控制以及減少再到伺服器讀取資料所的負擔，甚至可以達到離線支援。 使用cache將會出現cache invalidate的問題，即cache住的資料有更新時候，要如何讓瀏覽器知道？ 舉個實例來探討，當Android/iPhone手機連上Google的行動版網站(m.google.com.tw)，會發現曾經連過的網站，重新讀取或者在下一次載入時，其畫面出現速度會變快，而其他的網路連線資料則會稍後才會有所動作。 Web Database 為了可以提供更佳的服務品質，因此Web Database為HTML5新加入的元素，可以將資料庫存在用戶端的瀏覽器中，讓 mobile app具有豐富的查詢能力並結合在線與離線的能力。 STEP 1: 建立資料庫 存取資料前先建立資料庫，需要明確定義資料庫的名稱、版本、描述及大小。 STEP 3: 新增資料到Table 建立一個transaction並執行一個INSERT到todo Table中。 STEP 4-a: 從Table選取資料 只需要一個取回資料的函式即可操作Web Database使用標準的SQLite SELECT 進行查詢。

» CSS Trick: Turning a background image into a clickable link One of the things I most often get asked by people trying to master HTML and CSS is “How do I make a background image clickable?” It’s easy to wrap a regular image tag in a link, but what if your design or situation required that you use a background image? It’s actually quite simple. Range Web Development Start with just a link exactly as you would make it for any other purpose, and make sure to give the link an id so that we can use that to apply our styles: That’s all the (X)HTML you’ll need to make your background image clickable. So, how can we make a background image a clickable link? At this point it should look something like this: Range Web Development Now all we need to do is hide the text. And the finished product looks like this: Range Web Development And there you have it – a quick CSS trick with clean markup that turns your background images into clickable links.

Developer Network