|
|||
|
摘要：
[文章作者：张宴 本文版本：v1.0 最后修改：2008.12.09 转载请注明原文链接：http://blog.s135.com/post/385.htm] 曾经在七月，写过一篇文章──《基于Sphinx+MySQL的千万级数据全文检索（搜索引擎）架构设计》， 前公司的分类信息搜索基于此架构，效果明显，甚至将很大一部分带Where条件的MySQL SQL查询，都改用了Sphinx+MySQL搜... 阅读全文
posted @ 2009-01-14 23:22 analyzer 阅读(1397) 评论(0) 推荐(0)
摘要：
[文章作者：张宴 本文版本：v1.0 最后修改：2008.07.27 转载请注明原文链接：http://blog.s135.com/read.php/360.htm] 前言：本文阐述的是一款经过生产环境检验的千万级数据全文检索（搜索引擎）架构。本文只列出前几章的内容节选，不提供全文内容。 在DELL PowerEdge 6850服务器（四颗64 位Inter Xeon MP 7110N处理器 /... 阅读全文
posted @ 2009-01-14 23:20 analyzer 阅读(1118) 评论(0) 推荐(0)
摘要：
在生产应用中，某台“Nginx+PHP+MySQL”接口数据服务器，扮演的角色十分重要，如果服务器硬件或Nginx、MySQL发生故障，而 短时间内无法恢复，后果将非常严重。为了避免单点故障，我设计了此套方案，编写了failover.sh脚本，实现了双机互备、全自动切换，故障转移时间 只需几十秒。 一、双机互备、全自动切换方案： 1、拓扑图： 2、解释： (1)、假设外网域名blog.... 阅读全文
posted @ 2009-01-14 22:21 analyzer 阅读(1440) 评论(1) 推荐(0)
摘要：
转自：http://dingyu.me/blog/posts/view/flowchart-howtos 一个哥们在MSN上告诉我，他们公司的交互设计师只产出流程图，并问我用什么标准评价流程图的好坏。他的说法把我彻底震了－这分工也太细了吧！也不知道该说他们那里这样是好还是不好。 不过仔细想来，我倒的确没有仔细考虑过流程图的好坏，正好借此机会自我总结一下。 1、各司其职的形状 在我的流程图中，... 阅读全文
posted @ 2009-01-14 14:54 analyzer 阅读(627) 评论(0) 推荐(0)
摘要：
转自：http://www.planabc.net/2008/10/31/javascript_ready_onload/ 在“按需加载”的需求中，我们经常会判断当脚本加载完成时，返回一个回调函数，那如何去判断脚本的加载完成呢？ 我们可以对加载的 JS 对象使用 onload 来判断（js.onload），此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ ... 阅读全文
posted @ 2009-01-14 14:07 analyzer 阅读(251) 评论(0) 推荐(0)
摘要：
拿到IE 8 beta 2的 Search Partner Build Invitation。于是下午花了点时间先在网上搜寻了一下关于IE 8对CSS的支持，以及如何对它做Hack。 我是个懒人，最不喜欢去记那些复杂的hack，所以总是希望能找到一个“银弹”Hack，也就是“能搞定一切的通用方法”。下面是我能找到的最好的一个： .indicator{ background: red; ... 阅读全文
posted @ 2009-01-14 14:05 analyzer 阅读(166) 评论(0) 推荐(0)
摘要：
CSS优先级的知识大家应该都比较了解了（如果不了解可以参看《详解CSS的优先权》）。但是，注意哦，这只是W3C的CSS2.1规范自己声称的。而事实上，确实有“极少数的浏览器”并不一定按照这个规则来办。这个“极少数浏览器”我就不点名了哈。 今天介绍一个最简单的。 div.colorful {color: red;} div .colorful {color: green;} 按照CSS2.1规范... 阅读全文
posted @ 2009-01-14 14:04 analyzer 阅读(289) 评论(0) 推荐(0)
摘要：
IE里面关于CSS优先级的bug其实挺多，所以这里还得来个第二篇。可预见的还有个第三篇，大家耐心。 这次讲的是有关链接伪元素的。CSS2.1规范里有明确的提到，类名和伪元素的个数是合并在一起计算的。换句话说，:hover的优先级，应该和如.highlight一样高。但是在IE 6里并不是这样的哦。看下面两个定义 a:hover{ /* 优先级 [0,1,1] */ color: red;... 阅读全文
posted @ 2009-01-14 14:04 analyzer 阅读(186) 评论(0) 推荐(0)
摘要：
.orange_link .orange_link .orange_link a { color: orange; } .orange_link .orange_link a { color: orange;} a:hover{ color: red;} .orange_link a { color: orange;} 根据上次的结论：在IE6里，“a:hover”的优先级比“.orange_... 阅读全文
posted @ 2009-01-14 14:03 analyzer 阅读(326) 评论(0) 推荐(0)
摘要：
图形化按钮，就类似这个样子的： 当然，它其实就是一张图片而已。这样做纯粹是为了好看。这里探讨的不是怎么设计这种按钮，而是怎么在网页里把它做出来。这里要提几个要求： A. 语义化。如果这个按钮叫“完成注册”，就要在HTML中写出这四个字，以保证只读HTML的情况下也知道这个按钮是什么文字。 B. display:inline。用display:block可以很容易的调整大小。但是如果一横排并列两... 阅读全文
posted @ 2009-01-14 14:03 analyzer 阅读(329) 评论(0) 推荐(0)
摘要：
坦率的说，我写CSS时，有至少1/4的时间是在纠结选择符该如何命名。随意的命名，会让你陷入尴尬。 举个例子，我们需要在一段文字里将某些词标红。所以为此建了一个.red { color: red; }。结果产品经理觉得，红色太刺眼了，改成橘色比较好吧。这下头大啦，难道写成.red { color: orange; }么？要不然就是把HTML里的每个class="red"改成class="orang... 阅读全文
posted @ 2009-01-14 13:58 analyzer 阅读(213) 评论(0) 推荐(0)
摘要：
http://www.cssremix.com/ http://bestwebgallery.com/ http://www.stylecrunch.com/ 阅读全文
posted @ 2009-01-14 13:51 analyzer 阅读(137) 评论(0) 推荐(0)
摘要：
转自：http://www.aliued.cn/?p=1455 样式的优先级 在这之前先讲解特殊符号的含义——‘+’ ’_’ ’ !important’，这类特殊符号是针对不同浏览器识别的。打个比方，就象家长去幼儿园认领孩子，看到头上贴着’+’这个符号的，哦，这是ie家的孩 子，firefox和opear家长是不认得的，当然符号不止3个，但有这3个就能满足大部分的需要了。 ‘+’ 加上该符号的... 阅读全文
posted @ 2009-01-14 13:29 analyzer 阅读(282) 评论(0) 推荐(0)
摘要：
http://algo.net.cn/tmp/titles/ 这种方法采用主体CSS渲染，并使用JS渲染细节。最大限度确保浏览的一致性。 阅读全文
posted @ 2009-01-14 13:18 analyzer 阅读(98) 评论(0) 推荐(0)
摘要：
转自：http://ued.taobao.com/blog/2008/09/17/grid_systems/ 栅格系统的形成 1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，... 阅读全文
posted @ 2009-01-14 13:05 analyzer 阅读(277) 评论(1) 推荐(0)
摘要：
转自：http://lifesinger.org/blog/?p=143 这是淘宝懒懒交流会第五期的内容，大纲为： 淘宝上常用的JS组件（Widgets） Tbra的实现与优缺点分析 再思考，我的尝试 LiquidView实战 花花世界，原样的蝴蝶 下载：talk_on_tb_js_widgets.zip (2.9M) 所有相关的js代码请用SVN下... 阅读全文
posted @ 2009-01-14 12:19 analyzer 阅读(373) 评论(0) 推荐(0)
摘要：
转自：http://lifesinger.org/blog/?p=461 网上有不少解决方案，贡献下我使用的两个函数： /** * 得到字符串的字符长度（一个汉字占两个字符长） */ function getBytesLength(str) { // 在GBK编码里，除了ASCII字符，其它都占两个字符宽 return str.replace(/[^"x00-"xff]/g, 'xx').l... 阅读全文
posted @ 2009-01-14 12:18 analyzer 阅读(733) 评论(0) 推荐(0)
摘要：
转自：http://lifesinger.org/blog/?p=400 首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自... 阅读全文
posted @ 2009-01-14 12:13 analyzer 阅读(190) 评论(0) 推荐(0)
摘要：
转自：http://lifesinger.org/blog/?p=600 百度有啊开了，作为淘宝的一名深情前端开发工程师，打开百度有啊的第一件事是F12: 很典型的24列960栅格系统的两栏布局，很明显的YUI风格。注意主体的两栏布局又分成了两部分，两部分的结构是一样的。来看一下base.css: /* Copyright (c) 2008, Baidu Inc. All rights res... 阅读全文
posted @ 2009-01-14 12:11 analyzer 阅读(273) 评论(0) 推荐(0)
摘要：
转自：http://lifesinger.org/blog/?p=446 研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统） 淘宝的首页（截图）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）： （图1） 纷乱的高度世界 我们来看下图1左上角。左上... 阅读全文
posted @ 2009-01-14 12:09 analyzer 阅读(200) 评论(0) 推荐(0)
摘要：
转自：http://lifesinger.org/blog/?p=614 直接借用PPK的演示代码： div.container { border: 1px solid #000000 } div.left { width: 45%; float: left } div.right { width: 45%; float: right } 浮动门Bug就这样粉墨登场了： div.cont... 阅读全文
posted @ 2009-01-14 12:08 analyzer 阅读(279) 评论(0) 推荐(0)
摘要：
转自：http://lifesinger.org/blog/?p=678 IE6 Text Indent Bug, IE6 Doubled Float-Margin Bug. 这两个bug的解决办法是display: inline; IE6 Expanding Box Problem. 连续英文字符（包括URL等）、过大的图片会导致浮动布局换行。解决办法是：word... 阅读全文
posted @ 2009-01-14 12:07 analyzer 阅读(207) 评论(0) 推荐(0)
摘要：
转自：http://lifesinger.org/blog/?p=659 上篇中讨论了各种已有的布局实现。仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用： 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方... 阅读全文
posted @ 2009-01-14 12:06 analyzer 阅读(177) 评论(0) 推荐(0)
摘要：
转自：http://lifesinger.org/blog/?p=631 来看一个经典的三栏布局： 从内容出发（渐进增强的核心思想），一份合理的HTML结构如下： main是主要内容，sub是辅助内容，比如导航、相关文章等，extra是额外信息，比如广告等，具体含义根据实际情况来定。书写HTML文档有个非常重要的原则是：重要的内容放前面。这能让文档更富语义，能提高可访问性，... 阅读全文
posted @ 2009-01-14 12:05 analyzer 阅读(179) 评论(0) 推荐(0)
摘要：
转自：http://lifesinger.org/blog/?p=448 前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。 Blueprint的实现 Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面： 以上三栏布局的代码为： 上面是基本功能，Blueprint还支持append-n, pre... 阅读全文
posted @ 2009-01-14 12:04 analyzer 阅读(229) 评论(0) 推荐(0)
摘要：
本文转自：http://lifesinger.org/blog/?p=818 说明：这是今年三月份发在原Blog上的文章。来淘宝后，原Blog所在服务器出了故障，数 据丢了不少。现在这个Blog是全新搭建的，数据也就懒懒地一直没转移过来。今天为了程序员杂志的稿子头疼，于是在Google上瞎逛，无意搜索到这篇老 文章，欣然释然，小豆腐块用这种话题最适合不过了^o^ 图1. 可怜的JavaSc... 阅读全文
posted @ 2009-01-14 11:52 analyzer 阅读(165) 评论(0) 推荐(0)
摘要：
原文：Progressive Enhancement with JavaScript 作者： Aaron Gustafson 翻译：射雕 & 安吉 如果你阅读了本系列的第一篇和第二篇文章，现在应当开始进入渐进增强的思维模式了。本文讨论如何将渐进增强的哲学应用到客户端脚本。你将很快看到，这涉及两个方面：约束与规划。 聪明地支配能力 也许你已经听说过“权力腐败”。这个词能引发很多联想，不过根据我们... 阅读全文
posted @ 2009-01-14 11:50 analyzer 阅读(303) 评论(0) 推荐(0)
摘要：
本文转自：http://lifesinger.org/blog/?p=298 原文：Understanding Progressive Enhancement 作者：Aaron Gustafson 翻译：http://lifesinger.org/ 从1994年开始，Web开发社区就敲响了优雅降级（Graceful Degradation）的 鼓声。这个概念来自工程世界，其核心理念是给最新最... 阅读全文
posted @ 2009-01-14 11:49 analyzer 阅读(283) 评论(0) 推荐(0)
摘要：
原文：Progressive Enhancement with CSS 作者： Aaron Gustafson 翻译：lifesinger 本系列上一篇涵盖了渐进增强的基本概念，现在我们来讨论如何应用。有多种方式可以将渐进增强融入到层叠样式表（Cascading Style Sheets, 简称CSS）的工作中，本文将讨论其中比较成功的一些，并考虑采用其它方式来逐步增强你的站点。 样式表的组织... 阅读全文
posted @ 2009-01-14 11:47 analyzer 阅读(221) 评论(0) 推荐(0)
摘要：
SoftFacade是一家图标和用户界面设计工作室，位于俄罗斯圣彼得堡。 网站：http://www.softfacade.com Fasticon是巴西的一家专业图标设计工作室，成立于2003年。 网站 http://www.fasticon.com/ Iconka，来自俄罗斯莫斯科的图标设计公司，成立于2000年。 网站 http://iconka.com/ TurboMilk是俄罗斯的一家图... 阅读全文
posted @ 2009-01-14 11:45 analyzer 阅读(469) 评论(1) 推荐(0) |
|||
浙公网安备 33010602011771号