博客 (80)

Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices. For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images!

Things to Consider When Adding Retina Images

The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only). If your site is mostly used on-the-go over a 3G network it may not be wise to make all your graphics high-definition, but maybe choose only a select few important images. If you’re creating something that will be used more often on a WI-FI connection or have an application that is deserving of the extra wait for hi-res graphics these steps below will help you target only hi-res capable devices.

Simple Retina Images

The basic concept of a Retina image is that your taking a larger image, with double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and setting the image to fill half of that space (100 x 100 pixels). This can be done manually by setting the height and width in HTML to half the size of your image file.

<img src="my200x200image.jpg" width="100" height="100">

If you’d like to do something more advanced keep reading below for how you can apply this technique using scripting.

Creating Retina Icons for Your Website

When users add your website or web app to their homescreen it will be represented by an icon. These sizes for regular and Retina icons (from Apple) are as follows:

For each of these images you create you can link them in the head of your document like this (if you want the device to add the round corners remove -precomposed):

<link href="touch-icon-iphone.png" rel="apple-touch-icon-precomposed" />
<link href="touch-icon-ipad.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
<link href="touch-icon-iphone4.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
<link href="touch-icon-ipad3.png" rel="apple-touch-icon-precomposed" sizes="144x144" />

If the correct size isn’t specified the device will use the smallest icon that is larger than the recommended size (i.e. if you left out the 114px the iPhone 4 would use the 144px icon).

Retina Background Images

Background images that are specified in your CSS can be swapped out using media queries. You’ll first want to generate two versions of each image. For example ‘bgPattern.png’ at 100px x 100px and ‘bgPattern@2x.png’ at 200px x 200px. It will be useful to have a standard naming convention such as adding @2x for these retina images. To add the new @2x image to your site simply add in the media query below (You can add any additional styles that have background images within the braces of the same media query):

.repeatingPattern {
     background: url(../images/bgPattern.png) repeat;
     background-size: 100px 100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
     .repeatingPattern {
          background: url(../images/bgPattern@2x.png) repeat;
     }
}

JavaScript for Retina Image Replacement

For your retina images that aren’t backgrounds the best option seems to be either creating graphics with CSS, using SVG, or replacing your images with JavaScript. Just like the background images, you’ll want to create a normal image and one ‘@2x’ image. Then with JavaScript you can detect if the pixel ratio of the browser is 2x, just like you did with the media query:

if (window.devicePixelRatio == 2) {

//Replace your img src with the new retina image

}

If you’re using jQuery you could quickly replace all your images like this very basic example below. It’s a good idea to add a class to identify the images with hi-res versions so you don’t replace any others by mistake. I’ve added a class=”hires” for this example. Also make sure you have the standard (non-retina) image height and width set in the HTML:

<img class="hires" alt="" src="search.png" width="100" height="100" />
<script type="text/javascript">
$(function () {

	if (window.devicePixelRatio == 2) {

          var images = $("img.hires");

          // loop through the images and make them hi-res
          for(var i = 0; i < images.length; i++) {

            // create new image name
            var imageType = images[i].src.substr(-4);
            var imageName = images[i].src.substr(0, images[i].src.length - 4);
            imageName += "@2x" + imageType;

            //rename image
            images[i].src = imageName;
          }
     }

});
</script>

Server-Side Retina Images

If you’d like to implement a server-side retina image solution, I recommend checking out Jeremy Worboys’ Retina Images (which he also posted in the comments below). His solution uses PHP code to determine which image should be served. The benefit of this solution is that it doesn’t have to replace the small image with the retina one so you’re using less bandwidth, especially if you have lots of images that you’re replacing.

Website Optimization for Retina Displays

If you’re looking for additional information on creating Retina images, I’ve recently had a short book published called Website Optimization for Retina Displays that covers a range of related topics. It contains some of what is above, but also includes samples for many different situations for adding Retina images. It explains the basics of creating Retina images, backgrounds, sprites, and borders. Then it talks about using media queries, creating graphics with CSS, embedding fonts, creating app icons, and more tips for creating Retina websites.

xoyozo 曾经写过 简单实现在 ASP.NET 中执行 URL 重写，文中提到使用微软的 URLRewriter.dll 来配置实现 ASP.NET 的 URL 重写，并以此扩展为任意扩展名及目录的 URL 重写。本文在此基础上再次扩展，使之支持泛域名解析。

首先，您的网站必需放在独立服务器或 VPS 中，虚拟空间可能不支持泛解析。

进入域名控制面板，配置 A 记录：通配符（*）星号解析到网站所在的 IP。

根据前文配置 URL 重写。

<configuration> 节点下配置：

<RewriterConfig>  
<Rules>  
<RewriterRule>   
<LookFor>http://([a-zA-Z0-9-]+)\.域名/</LookFor>  
<SendTo>~/u.aspx?u=$1</SendTo>  
</RewriterRule>  
</Rules>  
</RewriterConfig>

HyperLink 使用 ImageUrl 属性时会生成 <a><img /></a> 标签组，而 W3C 验证 XHTML 时 <img/> 必须包含 alt 属性，这时我们不需要把代码改成 <asp:HyperLink><asp:Image> 只需要设置 HyperLink 的 Text 属性即可。

方法：
   alert,对话框，OK按钮
   confirm,对话框，OK和Cancel按钮
   prompt,对话框，可输入
   close，关闭当前浏览器窗口
   navigate，在当前窗口中导航到指定的URL资源
   setInterval，设置每隔一定时间调用指定程序代码，毫秒，setInterval("Func()",5000)
   setTimeout,设置经过一定时间后执行一次指定程序代码，毫秒，setTimeout("Func()",5000)
   clearInterval,
   clearTimeout,
   moveTo，将浏览器窗口移动到屏幕上的某个位置
   resizeTo,改变浏览器窗口的大小
   open，打开一个新窗口 window.open("abc.html","_blank","top=0,left=0,width=100,height=200,toolbar=no");
   showModalDialog产生一个模态对话框
   showModelessDialog产生一个非模态对话框窗口
属性：
    closed
    opener
    defaultstatus
    status
    screenTop
    screenLeft
事件：
    onload,onunload,onmouseover,...
对象属性：
    location对象：设置和返回当前网页的URL信息。
        载入一个新的网页：window.location.href="http://g.cn";
        刷新当前页：window.location.reload();
    event对象：获取和设置当前事件的有关信息。
        altKey属性，用于检测事件发生时Alt键是否被按下
        ctrlKey。。。
        shiftKey...
        screenX,screenY设置和返回鼠标相对屏幕顶点的x,y坐标
        offsetX,offsetY设置和返回鼠标相对事件源顶点的x,y坐标
        x,y 设置和返回鼠标相对事件源的父元素顶点x,y坐标
        returnValue设置和返回事件的返回值，一般情况下设置为false
        cancelBubble设置和返回当前事件是否继续向下传递
        srcElement设置和返回事件源对象
        keyCode设置和返回键盘按下或弹起时的键的unicode码
        button检索鼠标动作使用的是哪个按键，1左鍵，2右键，3左右同时
function window_onkeypress()
{
//    alert(window.event.keyCode);
    if(window.event.keyCode==27)
    {
        window.close();
    }
}

－－－－－－－－－－－－－－－－－－－－
常量：
整型，实型，布尔值，字符串型，null，undefined

变量：var
－－－－－－－－－－－－－－－－－－－－
除法运算：9/4 = 2.25 （而不是2）

－－－－－－－－－－－－－－－－－－－－
系统函数：
1，encodeURI URL编码
   var urlStr=encodeURI("http://www.abc.com/?country=吴&name=z x");
   结果：http://www.abc.com/?country=%E5%90%B4&name=z%20x
2，decodeURI URL解码
3，parseInt 将字符串按指定进制转换成一个整数,参数二表示进制
   parseInt("32",10) 结果：32
   parseInt("3c2",10) 结果：3
   parseInt("c32",10) 结果：NaN
   parseInt("0x18",10) 结果：0
   parseInt("12",16) 结果18
4，parseFloat 将字符串转成小数
   parseFloat("2.5") 结果：2.5
   parseFloat("2.c5") 结果：2
   parseFloat("c2.5") 结果：NaN
5，isNaN 用于检测parseInt和parseFloat返回是否为NaN
   返回true/false
6，escape 编码
   非ASCII替换为%xx
7，unescape 解码
8，eval 将字符串作为JS表达式执行，例
   for(var i=0;i<3;i++) eval("var a"+i+"="+i);
   相当于：
   var a0=0; var a1=1; var a2=2;
－－－－－－－－－－－－－－－－－－－－
对象
1，Object
2，String
   方法：
   indexOf,
   lastIndexOf,
   match,使用正则表达式模式对字符串执行搜索，返回包含该搜索结果的数组
   replace,
   search,使用正则表达式搜索，第一个匹配的字符的位置
   slice,截字符串：参数一，开始位置，参数二，结束位置（不指定或为-1时表示末位置）
   split,返回一个字符串按照某种分隔标志符拆分为若干子字符串时所产生的字符串数组，分隔符可以是多个字符或一个正则表达式，它不作为任何数组元素的一部分返回。
   substr,截字符串：参数一，开始位置，参数二，长度
   toLowerCase,
   toUpperCase,
3，Math（不能用new创建）
   方法：
   abs,绝对值
   sin,cos,正余弦
   asin,acos,反正余弦
   random,返回介于0~1之间的伪随机数
   例：var num = Math.randow();
4，Date
    var currentTime=new Date();
    //var currentTime=new Date(2002,3,4);
    var strDate=currentTime.getYear()+"年";
    strDate+=currentTime.getMonth()+"月";
    strDate+=currentTime.getDate()+"日";
    strDate+=currentTime.getHours()+":";
    strDate+=currentTime.getMinutes()+":";
    strDate+=currentTime.getSeconds()+" ";
    strDate+=currentTime.getMilliseconds();
    alert(strDate);
   结果：2008年1月19日15:27:10 518
－－－－－－－－－－－－－－－－－－－－－－
数组
1，
    var arr=["abc",123,'abc',,3.4];
    for(var i=0;i<arr.length;i++)
    {
        alert(arr[i]);
    }
2，用对象的方式实现数组
    function MyArray(){this.length=arguments.length;for(var i=0;....
3，Array对象
    var arr=new Array(2.4,"abc",2);
    arr.sort(); //排序
    alert的结果为 2 2,4 abc
－－－－－－－－－－－－－－－－－－－－－－－

在母板页"CS"加入:

在子页"源"加入:

即可在子页重写它:

但最好放在Page_LoadComplete:

public static bool loadRss(string RssUrl, int RssCount)
{
bool ok = true;
XmlDocument doc = new XmlDocument();
if (RssUrl != "")
{
try
{
doc.Load(RssUrl);
XmlNodeList nodelist = doc.GetElementsByTagName("item");
XmlNodeList objItems1;

int i = 0;
int count = 0;

if (doc.HasChildNodes)
{
foreach (XmlNode node in nodelist)
{
string title = "";
string link = "";
string description = "";
string pubDate = "";
i += 1;
if (node.HasChildNodes)
{
objItems1 = node.ChildNodes;
foreach (XmlNode node1 in objItems1)
{
switch (node1.Name)
{
case "title":
title = node1.InnerText;
break;
case "link":
link = node1.InnerText;
break;
case "description":
description = node1.InnerText;
break;
case "pubDate":
pubDate = node1.InnerText;
break;
default: break;
}
}
}
if (i > RssCount)
{
break;
}
}
}
}
catch (Exception ex)
{
ok = false;
}
}

return ok;
}

我们在用数据控件的时候，一般会在 .aspx 页面生成如单向绑定

或双向绑定

之类的绑定代码，如果我们必需对它进行进一步处理，譬如取得的“产品分类的ID”，我想显示为“产品分类的名称”，或者格式化时间显示

等等。

如果只是连接字符串可以这样处理

如果是通过一个方法去改变绑定值，则可以：

这里可以套用任何自定义的方法。更可以实现绑定两个数据库字段的实现：

研究了两个小时，确认了一个BUG。

平台：VS2005,VS2008 （VS2003未知）

Framework:2.0,3.5 (1.1未知)

首先跟我做一遍，非常简单：

一、在 VS 中新建网站；
二、已有 Default.aspx，再建 Default2.aspx；
三、在这两个网页的 Page_Load 事件上分别加上断点；
四、在 Default2.aspx 中拖入一个 ImageButton，并设该页为起始页；
五、运行。

这时可以发现，程序在两处断点的地方都会停下来，而这两上网页根本就没有任何关系，只是在同一级目录而已。

经测试，ImageMap 控件也有同样的现象，其它的就没一一去试了。

建议大家尽量用Button代替ImageButton。按照下面的做法可以把Button美化成和ImageButton一样的效果，甚至更棒！

方法如下：

给 Button 加上 CssClass 属性来写样式，或在App_Themes 的 .skin 文件中定义 Button 的属性

然后在 .css 文件中处理它的样式，例如：

这样就可以了，这时你会发现写在 Button 上的 Text 会随着你的鼠标按下而偏移，这个效果是不是 ImageButton 所没有的呢？

需要 URLRewriter.dll，它可以在微软官方下载到：取出Bin里面的文件

接下来配置 Web.Config 文件：

在 <configSections> 节点下添加：

<section name="RewriterConfig" type="URLRewriter.Config.RewriterConfigSerializerSectionHandler, URLRewriter" />

在 <configuration> 节点下添加：

<RewriterConfig>
<Rules>
<RewriterRule>
<!--测试-->
<LookFor>~/(\d{2})/(\d{2})\.aspx</LookFor>
<SendTo>~/Default.aspx?m=$1&amp;d=$2</SendTo>
</RewriterRule>
</Rules>
</RewriterConfig>

在 <httpHandlers> 节点下添加：

<add verb="*" path="*.aspx" type="URLRewriter.RewriterFactoryHandler, URLRewriter" />

完成以上步骤即可以实现URL重写的。但是它只能实现 ~/11/11.aspx 到 ~/Default.aspx?m=11&d=11 的重写，如果要实现 ~/11/11.html 到 ~/Default.aspx?m=11&d=11 的重写，那么需要通过设置 IIS 来实现 .html 文件的筛选。(适合 IIS5 IIS6，在 IIS7 中不用这么麻烦，具体见本文末尾的链接，scott 的文章)

进入：Internet 信息管理服务 -》网站属性 -》主目录 -》配置 -》映射 -》添加 -》把扩展名 .html 映射到 C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll。

然后在 <httpHandlers> 节点中,把 *.html 也交给 URLRewriter 处理就行了。

OK，试试看，访问 ~/11/11.html 确实是 ~/Default.aspx?m=11&d=11 的内容，可是只要 postback 一下，地址栏又显示实际路径了。只要在你的/app_browsers文件夹里添加一个.browser文件，注册使用一个控件适配类即可输出新的action属性。

你可在这里查看一个我创建的样例实现，其展示了该如何实现与URL重写协作的表单控件适配器(Form Control Adapter) 。

参考：http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx
译文：http://blog.joycode.com/scottgu/archive/2007/03/01/94004.aspx