Loading blog entries.. loading


Blogs which referenced tag: [HTML]

 

Print partial web content

 
Written by Wayne Ye  Wednesday, September 28, 2011

Per project needs we need print part of a web page, which I have no idea when I saw this requirement, I googled and I read this post: http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm, it basically use document.write to write the content you want to print to a new window by window.open, it works, however I really don't like the opened window.

Occasionally I tried to find out whether CSS can achieve such function, seemed I was on the right way: CSS media types is to control different display settings on different "media", controled completely by your own. What a shame to myself! CSS media types definiton from W3C official page:

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

We can define print style by few ways:

  1. Make a seperate css file to define print style and link it by specifying media=print, <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  2. Insert a <style media="print"> snippet into the <head>.
  3. Define @media print rule inline with our CSS code: @media print {#text_print:display:visible;}.

I'd reccomended option 1 or 3 if the project is small.

In additional I occasionally found that the Web Development extetion for Chrome already support this, we don't have to waste many pieces of papersSmile.

Web Development Tool

See also:

Print Button

W3C School: CSS Media types


View Post»



Permalink:http://wayneye.com/Blog/Print-Partial-Web-Content
Tag:

HTML5 Web Storage in Essence

 
Written by Wayne Ye  Saturday, February 26, 2011

Background

Web Storage (also named Dom storage) is a brand new mechanism of storing temporary/permanent data introduced in HTML5 to replace cookie, it contains two new DOM objects: sessionStoragy and localStorage), in Web Storage Spec, Ian Hickson documented that Web Storage are intended to solve two cases that "not handled well by Cookie", they are:

  1. The first is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time.
  2. The second storage mechanism is designed for storage that spans multiple windows, and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.

sessionStorage and localStorage are introduced by W3 in HTML5 to solve problems above, let's begin with a review of how Cookie currently works.


Current HTTP State Storage – Cookie

Mechanism

An HTTP Cookie was a set of key/value pairs which an HTTP web server requests a concrete client browser (i.e. User Agent - UA) to store on client's hard disk, when the UA request to the web server further, UA will wrap all the cookie data within the HTTP request header as long as following conditions are all satisfied:

  1. The cookie data has not expired.
  2. The requested domain is under exactly the same domain when cookie was stored.
  3. The requested path under the domain is the same one where cookie was stored.

Once the cookie expires, browser will delete it from local hard disk.

A common cookie example:

  1. An end user types www.foo.net in a browser's navigation bar and hit enter.
  2. www.foo.net returns HTTP status 200 message below (In the Green part, web server expected client browser to store two Cookie key/value pairs: WayneKey1=value1;WayneKey2=Value2, they could be accessible from the entire domain, and they will expire after 1 year):

    HTTP/1.1 200 OK
    Content-type: text/html
    Set-Cookie: WayneKey1=value1;WayneKey2=Value2;domain=www.foo.net; expires=Tue, 24-Feb-2012 07:13:22 GMT; path=/; HttpOnly
     
    (Response HTTP body)


View Post»



Permalink:http://wayneye.com/Blog/HTML5-Web-Storage-In-Essence
Tag:

Significant Enhancement in Internet Explorer 9

 
Written by Wayne Ye  Friday, February 18, 2011

Background

Microsoft announced Internet Explorer 9 Release Candidate on  Feb 10th, 2011, RC indicates except bug fixing, there would not have big changes before the final RTM. Since I've been keeping a watchful eye on IE9 from its very first preview version, I would like to write a post about its significant enhancement from a developer's point of view, I intend to summarize most significant enhancement points of IE9 listed below:

  • Enhanced performance
    1. The New Chakra JavaScript Engine
    2. Hardware Acceleration
  • Enhanced Web Standard Support
    1. HTML5 (huge number of new attributes support and Web Storage support)
    2. CSS3 (border-radius, ::selection pseudo-element, )
    3. W3 standard Geolocaltion API
  • Windows 7 Integration
    1. Website customizable TaskBar Jumplist.

By achieving new features above, IE9 will absolutely be the fastest and best Web Standard support version in the entire IE history.  

Walk through IE9 Enhancements

New JavaScript Engine – Chakra

IE9 team must be persistently working so hard on improving Chakra's performance, I picked following two paragraph  from Chakra Page on Wikipedia:

Microsoft's development of the engine was in response to evolving competing browsers, on which IE8 was lagging behind in terms of JavaScript processing speed.[3] SunSpider tests performed on November 18, 2009 showed the PDC version of IE9 executing scripts much faster than IE8, but slower than respectively Firefox 3.6, Chrome 4, and WebKit Nightly.[4] The same test performed on March 15, 2010 showed the first IE9 Platform Preview (using the then-current version of Chakra) to be faster than Firefox (with SpiderMonkey), but slower than respectively Safari (with SquirrelFish Extreme), Chrome (with V8), and Opera (with Carakan)

On February 8, 2011, the test showed the IE9 Release Candidate (using the current version of Chakra) to be faster than Safari, Firefox (with TraceMonkey), Opera, and Chrome.


View Post»



Permalink:http://wayneye.com/Blog/Significant-Enhancement-In-InternetExplorer9
Tag:

HTML is the new HTML5

 
Written by Wayne Ye  Monday, January 24, 2011

Few days ago Ian Hickson wrote a blog: HTML is the new HTML5, he referred "we moved to a new development model", and comes with two major changes:

  1. The HTML specification will henceforth just be known as "HTML", with the URL http://whatwg.org/html.
  2. The WHATWG HTML spec now became "living standard", "It's more mature than any version of the HTML specification". I took a screenshot below:

HTML Living Standard

In a simple sentence: HTML is going to "unversioned model", according to this there is definitely a concern: OK, living standard? Does this mean the standard could be changed/updated/revised at anytime? I saw one person asked posted this question and Ian Hickson replied, he emphasized WHATWG worked hard on backward-capability, and they worked tightly with browser vendors to make sure they do not change things that most people depend on, this is good and really important!

So, things is getting more and more interesting with HTML 5 (should I just call HTML?), few days


View Post»



Permalink:http://wayneye.com/Blog/HTML-is-the-new-HTML5
Tag:

把Blog里的照片全部加上圆角效果吧:)

 
Written by Wayne Ye  Sunday, May 4, 2008

前几天在网上找到这么个酷酷的玩意,用JS给图片加上各种各样的圆角效果,官方主页:

http://www.netzgesta.de/corner/

看后顿时觉得很酷,今天周末,有时间来搞搞这个:)

读了官网的说明后发现很简单,下载corner.js(本地下载 ),然后页面include后直接使用class="自己挑一个喜欢的class"就ok了。

那么这里有个问题,如果你的Blog上线已有时日(比如鄙博),难道要手动更新你之前所有Blog里的图片代码给它们加上 class??

呵呵,这点事根本不能称之为问题:)当然是加段JS脚本给动态注册className喽,鄙播采用了Div+Css架构以及 MasterPage,所有的Blog都包含于一个名为“ContentPlaceHolder”对Div中


View Post»



Permalink:http://wayneye.com/ViewBlog.aspx?BlogID=21
Tag: