Month: May 2007

Categories
CSS & HTML Tips

HTML5 adopted by W3C

News for the web development community: The new W3C HTML Working Group has voted to adopt the HTML5 draft specification comprising the Web Apps 1.0 and Web Forms 2.0 specifications developed and copyrighted as far by major browser companies Mozilla Foundation, Apple Inc., and Opera Software ASA under the umbrella of WHAT-WG, or Web Hypertext Application Technology Working Group, which includes Google, the Mozilla Foundation, Opera Software, Apple Inc. as its key contributing groups.

Some official infomation:

To summarise, the W3C will:

  • Adopt the WHAT-WG “HTML 5” (Web Applications 1.0 and Web Forms 2.0) as the current working draft, which will now be subject to review and development by the W3C HTML Working Group
  • Release a version of HTML which will be called “HTML 5”

The group editors will be:

What does this mean for webmasters?

  • The approved path for HTML development has shifted from XHTML 2.0 to HTML 5, indicating that HTML 5 may well not be as XML as XHTML 2.0.
  • The development process of HTML 5 is still in its early stages, and we are unlikely to see HTML 5 published before 2010.

Additional resources for HTML5

  1. WHAT-WG resources: FAQs, blogs, forums and more on HTML5.
  2. HTML5 elements and attributes remapped: including global attributes, event handling attributes and those defined in Web Applications 1.0 as well as Web Forms 2.0.
  3. HTML5, XHTML2, and the Future of the Web talks about HTML5 and XHTML2 as different means to create the future of the Web.
  4. Improve your forms using HTML5 displays the new functionalities to enhance your forms with HTML5.
  5. X/HTML 5 Versus XHTML 2: the competition and differentiation explained.
  6. (X)HTML5 Conformance Checking Service: HTML5 validator.
Categories
Free Web Templates

Free Web Template: My Dear Lounge

I’m glad to introduce you to yet another template by me, My Dear Lounge! It’s templated with PHP, so should be easier to customize than the previous pure HTML template Nickl, which I have now translated from Chinese to English and put online along with the most current MDL. Check them out here and here! Some of the screenshots and related information are available below.

My Dear Lounge

  1. Name: My Dear Lounge
  2. Author: Yang Yang
  3. License: CC 3.0
  4. Preview: https://www.kavoir.com/templates/mdl/
  5. Requirement: PHP required
  6. Download: https://www.kavoir.com/download/mdl.zip

My Dear Lounge, the free web template!

Overview of the raw design that is previously intended for one of my Chinese website, vism.cn, now suspended as a result of time shortage. 🙁

My Dear Lounge head

Head navigation and logo. The logo is an original PNG backgrounded, so you can adapt it as you want in any graphic editor that swims with PNG. See more logo design inspirations.

My Dear Lounge foot

The footer.

Nickl

  1. Name: Nickl
  2. Author: Yang Yang
  3. License: CC 3.0
  4. Preview: https://www.kavoir.com/templates/nickl/
  5. Requirement: Any web hosting will suffice
  6. Download: https://www.kavoir.com/download/nickl.zip

Nickl, the free web template in HTML!

Nickl is released in GPL the last time you saw it, should you had any chance of stumbling upon this post. After a few revisions and the thorough translation, I now release it under a CC 3.0.

People I learned from

I’m still a rookie designer, so I learn and imitate a lot from other veteran designers at present. They are so great that I don’t know when I could become as proficient as they are now! My thanks goes to the following designers and developers when I’m making these 2 templates:

  1. Cameron Moll: He’s just too talented to imitate, I think, his design is always so pleasant to look at. Borrowed one or two colors from his portfolio, hopefully he won’t mind. 🙂 The greatest I believe he is.
  2. WordPress.org: Is it Matt? Or some other developer? Anyway, you can see how my footer nav and links in the paragraphs resemble those of the main nav of wordpress.org. In fact those are quite popular right now, but they started it, did they.
  3. Dan Cederholm: Frequent SimpleBits a lot, and Dan has given me a lot to ponder about.
Categories
Rich Internet Application

Beginning Silverlight, and XAML Resources – QuickStarts, Videos, Walkthroughs

To be honest, I don’t know much about XAML, actually very little. However, after I came across Silverlight, the Microsoft way of Adobe Flash, it really doesn’t matter whether you know much or not. Because we can build very decent bells and whistles for our websites in almost no time with it!

What is Silverlight then?

According to Microsoft,

Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of media experiences and rich interactive applications (RIAs) for the Web.

While it can do as much, Silverlight differs from Flash in its deployment wherein it is built upon existing technologies like HTML, XML and JavaScript, delivering text-centric solutions compared with Flash’s binary packaging, though you do have to install a small plug-in to perform Silverlight applications, which you can download here. It’s nimble, so easy to spread! Development can be done in a mere text editor, Windows Notepad for instance. It’s very easy, very intuitive and very enjoyable. If you are already well versed in XHTML+CSS+JavaScript development, this should be a piece of cake for you. Go grab it while it’s fresh and delicious!

What is XAML? And in Silverlight?

I hate definitions, so I’ll just cut through to the essence that I have understood. XAML is just XML that Microsoft has developed to describe objects. Silverlight relies on XAML to store and represent visual objects to be displayed and animated on HTML pages. So technically they are no more than text files, nothing to be afraid of. I promise that you will learn very fast to represent things such as canvas, shapes, images, text, media, animations and controls in XAML so as to further silverlight them in your browser.

How exactly to start developing in Silverlight?

  1. Install the Silverlight runtimes for Windows Internet Explorer.
  2. Download the Silverlight 1.0 Beta SDK.
  3. Unzip the package.
  4. Unzip Silverlight_1.0_QuickStarts.zip to a new directory.
  5. In the quickstart directory, you should have quickstart.html, double cilck to open it.
  6. Navigate through “Go to the Silverlight 1.0 Beta QuickStart (offline version)” to the quickstart tutorial.
  7. There you go. Just follow the instructions and you are on your way.

Start the feast!

Quick Facts:

  1. Microsoft is expected to come up with the final release of Silverlight 1.0 this summer.
  2. Silverlight for Linux is likely to be released at the end of 2007.
  3. Silverlight is based upon the great WPF.
  4. According to PC World, Microsoft is expected to announce at MIX 07 that part of its Silverlight technology source code will be released to developers. Adobe had previously announced that it would open source its Flex software development kit (SDK) by the end of this year.

Links and Resources

Official:

  1. Microsoft Silverlight: http://www.microsoft.com/silverlight
  2. Silverlight.net, the community: http://silverlight.net/
  3. Blogs: http://www.microsoft.com/silverlight/blogs.aspx
  4. Forums: http://silverlight.net/forums/
  5. MSDN Developer Center: http://msdn2.microsoft.com/en-us/silverlight/default.aspx

Downloads:

  1. Browser runtimes or plug-in: both downloadable Windows and MAC OS X versions. Or you can visit this page to automatically install it.
  2. Silverlight 1.0 Beta SDK, Silverlight 1.1 Alpha SDK: quickstarts, documentations, code samples and more.

Learn:

  1. MSDN Silverlight: http://msdn2.microsoft.com/en-us/library/bb188743.aspx
  2. Whitepapers: provides a good overview of Silverlight.
  3. Quickstarts: designed to help you become rapidly productive in performing common developer tasks.

Tools:

  1. Silverlight Tools Alpha for Visual Studio codename “Orcas” Beta 1: an add-on to the Beta 1 release of Visual Studio codename “Orcas” to provide tooling for Microsoft Silverlight 1.1 Alpha. It provides a Silverlight project system for developing Silverlight applications using C# or Visual Basic.
  2. SWF2XAML: an Adobe/Macromedia Flash to XAML conversion tool.
  3. Adobe Illustrator XAML Export: a freely available plug-in that enables Adobe® Illustrator® to export WPF and WPF/E compatible XAML.

Services:

  1. Windows Live Silverlight Streaming: 4GB of free hosting offered to Silverlight developers and content publishers.
  2. Silverlight Streaming SDK: http://dev.live.com/silverlight

Screencasts:

  1. Using Silverlight Brushes for Color, Gradient and Video
  2. Using the Silverlight Downloader Object
  3. Basic Keyboard Input with Silverlight
  4. Adding Ink Support to a Silverlight-based Application
  5. 2D Geometries in Silverlight
  6. Building Video Overlays with Silverlight
  7. Creating a Video Scrubbing Control with Silverlight
  8. Using Silverlight for Full Screen Experiences
  9. Silverlight Event Handling with JavaScript
  10. Animating and Clipping Video with Silverlight
  11. Creating Vector Art for Silverlight with Expression Blend
  12. Animating Vector Art for Silverlight with Expression Blend Part I
  13. Animating Vector Art for Silverlight with Expression Blend Part II
  14. Animating Raster Art for Silverlight with Expression Blend
  15. Using Expression Blend to Control Silverlight Media Playback
  16. Delivering Parameterized Silverlight Content with ASP.NET
  17. Delivering Parameterized Silverlight Content with PHP
  18. Delivering Parameterized Silverlight Content with Java
  19. Using AJAX to Dynamically Update Silverlight Content
  20. Creating a Video Playlist with Silverlight and ASP.NET
  21. Overlaying HTML and Silverlight Content
  22. Real-Time Data Update with Silverlight and Web Services

Fun:

  1. How Did We Come Up With Silverlight
  2. Community gallery: http://silverlight.net/community/communitygallery.aspx

In-depth readings:

  1. A Guided Tour of Windows Presentation Foundation: http://msdn2.microsoft.com/en-us/library/aa480221.aspx
  2. Silverlight resources on ZDNet: http://updates.zdnet.com/tags/Silverlight.html
  3. Silverlight at Techboo.com: http://silverlight.techboo.com/

XAML:

  1. XAML Overview: http://msdn2.microsoft.com/en-us/library/ms752059.aspx
  2. XAML.net: http://www.xaml.net/
  3. Inside XAML: http://www.ondotnet.com/pub/a/dotnet/2004/01/19/longhorn.html
  4. XAMLdev: http://xamldev.com/
  5. XAML Resources: http://www.codeproject.com/dotnet/xamlresources.asp

WPF:

  1. Windows Presentation Foundation: http://msdn2.microsoft.com/en-us/library/ms754130.aspx
  2. WPF@MSDN: http://msdn2.microsoft.com/en-us/netframework/aa663326.aspx
  3. WPF at Wikipedia: http://en.wikipedia.org/wiki/Windows_Presentation_Foundation
  4. WPF Community: http://wpf.netfx3.com/
  5. WPF Resources: http://wpf.netfx3.com/files/default.aspx
Categories
Free Web Templates

A home made HTML web page template – simple, clean and free

Updated: Nickl, in addition to another template My Dear Lounge have been added to Kavoir Mag template section now. Check them out here and here. More hand-made easy-to-use templates are on their way! 🙂

I named it Nickl! It’s just comprised of 4 pages, 6 images and 1 stylesheet that I have fabricated for my resume. Really simple and plain design. I now release it in public domain and you are granted the rights to use it in whatever way your enjoy.

Nickl, the free web template!

Download it here. Be happy! 🙂