2006年11月18日

先看对比:

说的形象一点就是photoshop里面字体效果的“无”和“平滑、厚重”的对比
“微软这样描述雅黑:“Vista完全可以沿用原来的字体,但启用微软雅黑,将令中文版Vista更加清晰、明亮。”最妙的是,它支持WinXP,只要从Vista中提取出来放进字体目录就可以体会Vista的感觉,多棒!”
看这篇详细介绍:http://www.windstudio.net/html/200611/20061114102849.htm
从网页设计的角度考虑,中文字体大小的使用所受限制少了,中文网页设计也会更加的漂亮

在XP下怎样使用:
1.下载下面的
雅黑字体下载:
http://cool.ever360.com/download/msyh.zip

ClearType下载
http://www.microsoft.com/windowsxp/downloads/powertoys/xppowertoys.mspx

2.在控制面板打开ClearType.
3.在浏览器IE或者firefox里面设置显示字体为微软雅黑

2006年11月11日

Google adsense的广告中的小字体改好看了,研究了一下用的字体是:Pmingliu,大小:11px,之前在POCO站点的图上看到过这样的字
google ad中使用的:
font-family: Pmingliu,verdana,arial,sans-serif;font-size:11px
不过如果用GB2312或者GBK字符集的时候,你在测试的时候,用IE6看的时候,会发现还是有锯齿,狠难看,用firefox和IE7没事,只要把测试文件转成UTF-8格式就好

2006年11月10日

CSS Diagrams, Bar Graphs, Star Rater

CSS Forms

CSS Galleries

CSS Image Maps, Image Switcher, Sliding Photograph Galleries

  • CSS Image Maps
    Below is a sample image map that’s built entirely using CSS and XHTML…
  • Map Pop
    This experiment uses CSS to create an image map with CSS pop-ups
  • FotoNotes RolloverViewer
    FotoNotes™ RolloverViewer is an open-source PHP script which will read a FotoNote™-annotated image and create an imagemap with Javascript rollovers to display the image’s notes…
  • Simple CSS Image Switcher
    This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function…..
  • Simple(r) CSS Image Switcher
    I didn’t use nested unordered lists. Instead, I used just one unordered list…
  • A Two Step Photograph Gallery
    Stu Nicholls
  • Hoverbox Image Gallery
    …super light-weight (8kb) roll-over photo gallery that uses nothing but CSS…
  • Sliding Photograph Galleries
    Stu Nicholls Photo Galleries – vertical slide & horizontal slide

CSS Layouts Templates

Lightboxes

  • ThickBox 2.0
    Cody Lindley – ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
  • Lightbox Gone Wild!
    Particletree – Chris Campbell
  • Suckerfish HoverLightbox
    Jonathan Christopher
  • Lightbox JS v2.0
    by Lokesh Dhakar
  • Lightbox Plus
    takuya otani – Lightbox JS is very cool and useful script to display an image on the page
  • Leightbox
    Simon de Haan · Eight Media

CSS Lists, Navigation, Menus, Rollovers

Miscellaneous

  • Architecting CSS
    The first step in architecting our CSS is to devise a plan for organizing our files…..
  • CSS Organization
    Tip 1: Flags
  • Beginner’s guide from a seasoned CSS designer
    Cameron Moll – Authentic Boredom
  • CSS Advanced Guide
    The CSS Advanced Guide is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.
  • CSS Panic Guide
    This is not a complete resource, this is a fast resource….
  • CSS & Design Galleries
    List of CSS and Design Showcases
  • CSS Table Gallery
    The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
  • Dynamic Drive CSS Library
    Practical CSS codes and examples
  • CSSplay
    Stu Nicholls – Experiments with Cascading Style Sheets
  • CSS tests and experiments
    Floats, Containers, margins, …Centering, Shrink wrapping, Images, Miscellaneous, hacks, inline-block, Layouts, Tables…
  • Stylish
    Stylish allows easy management of user styles. User styles empower your browsing experience by letting you fix ugly sites, customize the look of your browser or mail client, or just have fun
  • Professor X
    The Professor X extension for Firefox let’s you see inside a page’s head without viewing the sourcecode
  • X-Ray
    The X-Ray extension let’s you see the tags on a page without viewing the sourcecode.
  • CSSViewer
    A simple CSS property viewer.

Tips & Tricks

Slideshows

CSS Tables

CSS (and JS)Tooltips

  • Bubble Tooltips
    Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.
  • qTip
    qTip will work on all like elements that are on the page. You can specify any HTML tag as your preferred element. Since the title attribute can be applied to any HTML element, this technique is standards compliant!
  • Sweet Titles Finalized
    JavaScript Fading Tooltips
  • Tooltip.js
    …is the NEXT GENERATION in Tooltips; using the Web 2.0 approach of doing a simple thing, and doing it well.

Articles

Tutorials

  • Advanced CSS Layouts: Step by Step
    By Rogelio Vizcaino Lizaola and Andy King
  • CSS Basics.com
    Making Cascading Style Sheets Easy to Understand
  • CSS Beginner’s Guide
    CSS, or ‘Cascading Styles Sheets’ are a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
  • CSS Intermediate Guide
    Like the HTML Intermediate Guide, this CSS Intermediate Guide should not be that difficult, but rather build on the basics of the CSS Beginner’s Guide.
  • CSS Advanced Guide
    The CSS Advanced Guide is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.
  • CSS Demonstrations and Tutorials
    CSS and HTML examples, demonstrations and tutorials
  • CSS Layout Techniques: for Fun and Profit
    A resource for web designers and developers who want to learn CSS layout techniques to replace archaic table-based web page layouts..
  • CSS Menu Tutorial
    Horizontal and Vertical CSS Menu Tutorials
  • CSS Tutorial
    CSS Tutorial von w3schools.com
  • CSS TUTORIAL
    The Complete CSS tutorial
  • Floatutorial: Step by step CSS float tutorial
    Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
  • Learn CSS Positioning in Ten Steps
    This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float
  • Listutorial: Step by step CSS list tutorial
    Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists
  • Selectutorial – CSS selectors
    Selectors are one of the most important aspects of CSS as they are used to “select” elements on an HTML page so that they can be styled.
    Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.
  • Site in an Hour
    by Andrew Krespanis – Making Simple Work of Complex CSS Layouts
  • Style master css tutorial
    hands on css tutorial – This tutorial teaches CSS using both hand-coding and Style Master for Windows.
  • Online tutorials
    The House of Style has several cascading style sheets tutorials, with explanations, excercises and worked examples to get you up and running with style sheets as quickly as possible.
  • Stylesheets
    Cascading style sheets tutorials and style guide
2006年08月19日

KESO的BLOG上之前加了一个新浪的WOOCALL.,这种blogchat的东西还是挺好玩的
我朋友ZW也做了一个类似的东西,http://www.vqq.com

下面其他牛友写的一个关于这种chat的对比
原文:http://blog.donews.com/siyusiyu/archive/2006/08/19/1006607.aspx

一篇文章表达了本人对WEB QQ的关注有加,引出一个专业做聊天工具的家伙,那就是——VQQ。

去看看他们的网站——http://www.vqq.com,界面做得很分明,功能和指导一目了然,而且颜色搭配还比较和谐。手头没有工具也就没有分析其界面构架是不是真正符合2.0的标准。不过象这样的特殊功能网站,关键能够让人一目了然找到他需要的东西。以下是网站界面截图。

 

点右下角那个立即展开聊天,就会加载一个漂浮的聊天窗口。这个样子和设计思路跟Gabbly大同小异。以下是试用后的一点感受:

优点:

  1. 支持表情用语和表情图案,这在传统聊天室里很平常了;
  2. 据说代码并不是用Ajax写的,因此在服务器的负荷没有Gablly大;果如他们老大所言,我祝贺它,运行效率高意味着具有普及的最基础条件,不然前期投入会相当巨大。
  3. 可自定义聊天室的标题(名称)。
  4. 嵌入页面时可以用JS 代码,显示时可选择直接出现窗口还是通过点击飘浮的图标弹出窗口,这个设计思路比Gabbly的要好得多。
  5. 图标支持自定义,嗯,这点考虑得非常人性化。
  6. 可以针对性的一对一聊,也可以两个人私聊。这点也很对路,毕竟是一群专业开发聊天工具的技术团队,有技术背景和经验;
  7. 甚至预览都考虑到了……
  8. 支持UTF-8和GB2312编码,对中文英文的支持就更不用说了。

再来说说不足,大多数借鉴与传统的聊天室和在线IM而言:

  1. 窗口过大,且无法象Gablly那样拖曳变大变小;这点很致命。
  2. 拖曳窗口时会附带鼠标选中页面内容,看来需要优化处理这个细节;
  3. 没有声音;更没有开关;
  4. 没有保留聊天历史纪录的办法;Gabbly是支持RSS订阅,从某种程度上可以保持历史纪录;
  5. 没有传统聊天工具中以不同颜色(通常是红色)字体显示本人发出信息或接收到信息的区别方式;也没有自定义字体颜色的选择;

 

其实,在我跟VQQ的老大MSN聊天过程中,我总结了几句话,他备感兴趣,现在一并综合写出来,也跟对这方面感兴趣的朋友们探讨一下。

  • 在线chat不同于web IM,它应该是介于BBS与Web IM之间的东西;毕竟没有注册帐号的繁琐过程;
  • 它的未来发展可以结合博客、BSP和企业在线客服,进行大面积的运用;
  • 交互性的细节做得是否到位,往往决定它的未来命运:比如,传统论坛里可以查看到发贴人的更多信息,包括他的主页、QQ甚至邮箱;而在QQ聊天室里,你也可以在弹出菜单中查看这个人的QQ信息。
  • chat中每个人来得容易去得也快,信息的真实性与虚拟性一定要结合得较好,如果一眼望去全是“游客1234”之类的一大串,估计你也没有继续聊下去的欲望。穿马甲应该成为最基本的必须的第一道程序。
  • 如果可以选择填写性别并区别开来,也是增强粘性的办法之一,当然还可以选择填写blog。如果某人进了一会就走了,你永远找不到她,但她填写了blog地址,你打开了她的另一个附加信息之地,可以去留言评论,一样还有交互的可能性。
  • 其它的,应该结合BBS和chat的细节认真琢磨,结合在线IM,可以定义状态,如离开、在线、私聊、忙碌等,以颜色不同的图标区别开来,就不会有往常聊天室乱哄哄的样子。
  • VIP:这个东西要根据用户特殊的需求来开发,做成升级的黄金版,可以出售;比如聊天记录的保留,比如信息聚合到web静态页面,比如添加管理员(可以踢人)等,还可以增加一些娱乐性强的东西。

但愿VQQ能够成为中国特色的web chat的佼佼者,关键要与gabbly、新浪、web QQ等东西区别开来,自己有特色,并且在推广思路上独辟蹊径,估计还是有很大发展空间。

2006年08月16日
  1. Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell
  2. AJAX – microlink pattern tutorial : A microlink is a link that opens up content below it.
  3. Ajax BBC News RSS Reader : demo by Nigel Crawley
  4. AJAX Chat in Python with Dojo : at AquaAjax
  5. Ajax Chess : multiplayer chess
  6. Ajax examples at BackBase : examples demonstrating several aspects of the Backbase technology.
  7. Ajax examples at Rico : Inner HTML, JavaScript updater etc.
  8. Ajax examples using ColdFusionMX, SQLServer, SOAP : Contact Manager, NOAA 7 Day Forecast code and demos.
  9. Ajax Feed TV : News feed
  10. Ajax inline dictionary : Highlight any text on this site then right click. A tooltip containing the definition of the selected word should show up.
  11. Ajaxload : Ajax loading gif generator.
  12. Ajax Login Demo : Creating a secure login system using XMLHttpRequest
  13. Ajax Newsletter Signup : A newsletter signup form that shows Thank You on the same page.
  14. ajaxProject : Project Management applicaiton with rich UI
  15. Ajax Rater : A star rating system that uses Ajax.
  16. AJAX-S : An Ajax-based slideshow system.
  17. AJAX Spell Checker : spell check text / form content.
  18. Ajax Toolbox : Tools for the Ajax Developer
  19. Amazon Catalog Tree : Amazon Catalog Tree
  20. Amazon Zuggest : Amazon product suggestion (like google suggest)
  21. Askeet by symfony : Digg-like AJAX interactions; open source
  22. Backbase – Ajax Demos : Ajax demos at BackBase
  23. Basic Ajax Examples : Ping, track changes, drop down, Google suggest hack etc at Clearnova
  24. Behaviour : Fading lists, Sortable lists, Dropout boxen, Shaky lists
  25. chat.app : ajax chat
  26. Chihuahua Word Puzzle : daily word puzzles
  27. Coloir : Ajax Slideshow
  28. DHTML arcade/action games : a collection that demonstrate the power of DHTML
  29. DomAPI : Windows Desktop, Outlook-like, RSS Reader
  30. Drag and Drop Shopping Cart Demo : at CyberDummy
  31. Easy AJAX inline text edit 2.0 : edit a piece of text inline
  32. FileChucker : File upload and progress bar at Encodable.com
  33. Gmail Style Check Username AJAX Demo : at CyberDummy
  34. Google Web Toolkit Example Projects : Hello World, Dynamic Table, Desktop App Clone etc
  35. GreyBox : Pop up window using idea of light box.
  36. FiftyFourEleven: Ajax Examples
  37. IntuiCat – ajax Catalogue : Ajax-based Catalogue Demo
  38. jsLINB programming demos : LINB(Lazy INternet and Browser)
  39. JSlog : Ajax logging tool.
  40. JS/UIX Unix Shell : JS/UIX is an UN*X-like OS for standard web-browsers, written entirely in JavaScript.
  41. Lace : free web chat application
  42. Lightbox : simple, unobtrusive script used to overlay images on the current page.
  43. Leightbox : Light Box with inline div’s instead of AJAX calls.
  44. Live Quote Demo : Simple way of creating an updating stock quote table in ajax.
  45. Magnetic Poetry : drag and drop poetry
  46. Metatron Chat Engine : PHP/MySQL/JavaScript powered chat engine
  47. Monket Calendar : online calendar
  48. Multi List Drag Drop Demo : at CyberDummy
  49. NetDirector : open and extensible framework for managing configurations of common open source network services.
  50. nexImage : Image processing demo
  51. Opera Platform : Enabling AJAX applications on mobile phones
  52. Orbeon examples : various examples illustrating the capabilities of OPS, from the OPS Tutorial examples to XForms examples
  53. OVO Suite : Online Virtual Office : virtual office limited demo
  54. phpFreeChat : php Free Chat
  55. S5: A Simple Standards-Based Slide Show System : S5 is a slide show format based entirely on XHTML, CSS, and JavaScript.
  56. script.aculo.us Reflector : image reflector script that uses uses opacity-based fades
  57. Slider Bar Demo : at CyberDummy
  58. SmallestAjax : Smallest Ajax example in the world?
  59. Spell Check demo : by Primal Grasp
  60. Super Maryo World : Japanese game demo
  61. Tacos : Tacos provides a library of useful Tapestry components. This application provides some examples to get you started.
  62. theList : to-do list / bug-tracker
  63. ThickBox : ThickBox is a Lightbox than can show html pages as well as images.
  64. Tooltip.js : Tooltip.js is a simple class to make it possible to add tooltips to your page.
  65. Treehouse Chat : ajax chat
  66. Tudu Lists : open-source to-do lists
  67. WeBoggle : Ajax Boggle
  68. XHTML live Chat : ajax chat
  69. YahooSearchAsYouType : Yahoo search as you type
  70. ZK Demo : demo programs for various components
2006年08月14日

算是比较全的了

  • : Pastel blue on light gray. available in English, French, German, Spanish, Chinese, Russian, Portuguese, Croatian and Hindi. Modules: Box.net storage with MP3’s player, gmail, Yahoo mail, Ical, Weather, Social applications(Flickr, Digg, Blogmarks, webnote, writly…) RSS/ATOM feedreader with OMPL import. Demo available. Works in Safari. [blog]
  • (Flash): Looks a bit like the Mac OS X desktop theme with it’s dock, see the screenshots. Has a lot of applications like mail management, calendar(drag and drop events!), games…with KDE Linux theme icons. All Flash-based work in Safari. Demo available. [blog]
  • : Pastel blue on white. Is now being used as "an incubation project", mostly to test ideas for live.com. Expand/collapse modules: Feeds, weather, stock, horoscope, click, shopping and some photo modules. Does not work in Safari. Demo available. [blog][via]
  • with user made module you can submit and rate here: Gadgets gallery. You can feel it’s Microsoft, and it’s blue. See Windows Live 8 Years Ago by Pinoy Tech Blog. Demo available. Does not work in Safari.[Blog]
  • : Very ‘bright’ page, has 5 pastel color settings. Expand/collaps modules: Feeds, Notes, Flick slidshow and bookmkarks. Previous icon: icon. No demo available. Works in Safari [review]
  • : Has 8 pastel themes. Does not work in Safari.
  • : What can I say? Google style with user made module you can submit and rate here: Google Modules Gallery or HotModules. Works in Safari.
  • : Tabbed interface, a bit darker than pastel. Has support for many social applications, see the module Gallery. Does not work in Safari.
  • (flash): All blue, has nothing to do with the icon. Demo available.[review][blog]
  • : Original design with bright colors where the blocks can overlap each other. The old icon used to be like this: Does not work in Safari, but you can get the feeling. Demo available. [Blog]
  • BACKBASE: Sober and clean interface. Double click exapnd/collapse maodules. Weather, Horoscope, Email(AOL/Yahoo/Hotmail), Custom portofolio(sortable table)web search. Does not work in Safari.
  • Inbox.com: Multi service, 2GB Webmail(Access Multiple POP3 Accounts), Search, Storage, Calendar, Notes and more, has colorful blocks of 6 different colors. Seems to work in Safari.
  • ItsAStart: An other pastel style with expande/collaps modules. Weather, bookmarks, Google search, clock, Notes and Feeds. Demo available. Seems to work in Safari.
  • Fold: Has shut down.
2006年08月08日

Blog

Photo

Search

Video

Social Services

Web Application

http://bao.265.com

2006年08月07日

Internet Portal
Naver(Focused on search, NHN’s property), Daum(Mail, community and news), Nate/Cyworld(Social network), Yahoo! Korea(News and search), Emaps(Search), Paran(owned by KT), Dreamwiz.

E-commerce
Auction(owned by Ebay), Gmarket(InterPark’s properties, forcused on auction), Dnshop(Daum’s property, shopping), InterPark(Korean first shopping mall), LG eshop and CJ mall(Cable TV shopping).

Game Portal
Hangame(NHN’s property), NetMarble (CJ Internet’s), Pimang(Neowiz’s Property), Nexon.

Entertainment
SayClub(Chatting, Neowiz’s Property), BuddyBuddy(Teenagers Messenger), Bugs(Streaming music).

Internet Banking
KB Bank and Nonghyup Bank. Most of Korean have a personal certificate for internet banking.

Online Media
Chosun Daily and Joongang Daily(korea newspapers), KBS and MBC (korean broadcasts).

These were refered to as following sources. KoreanClick and InternetMetrix are expert research company, so I think they’re trustable rather than Rankey or Alexa.

原文:http://koreacrunch.com/archive/korean-top-20-web-sites

2006年07月28日
http://bao.265.com/

七夕情人节寻宝  得IBM笔记本

纤云弄巧,飞星传恨,银汉迢迢暗渡
金风玉露一相逢,便胜却人间无数
柔情似水,佳期如梦,忍顾鹊桥归路
两情若是久长时,又岂在朝朝暮暮

农历七月初七,是中国的情人节。“两情若是久长时,又岂在朝朝暮暮?”一首相传已久,脍炙人口的古诗,道出了牛郎织女千年不变的爱情故事,现代的人们依旧 羡慕他们两位的爱情,每阅此诗词,无不感人,顿生凄美之情。现传牛郎织女这天会在鹊桥上相会,数不尽的绵绵情话,道不尽的甜言蜜语……动人的爱情 故事,感人的传说,这个就是中国情人节的由来。爱情,永远是人类的主题之一!7月31日就是中国情人节,你为她(他)准备了什么了吗?
2006年07月20日

针对目前的BLOG上MOP的广告形式可以用下面2个方法隐藏。
如果你在页面中其他的交互中没用到iframe,可以用下面到方法1,让页面中所有的iframe都不显示
1.在自定义的样式CSS中加入:
iframe{display:none}

另外一个方法
2.在公告里面加入
function hideFrame(){
if(document.getElementsByTagName("iframe")[0]){
document.getElementsByTagName("iframe")[0].style.display="none"
}
}
onload=hideFrame

[ 如果你已经使用onload了,将
if(document.getElementsByTagName("iframe")[0]){
document.getElementsByTagName("iframe")[0].style.display="none"
}
加入你onload里面的函数内]