猫窝私语 — Makumo's Blog

玛酷猫的温馨小窝,记录生活点点滴滴。

@玛酷猫10年前

11/30
21:51
读书笔记 前端

读书笔记(一)——可以遗忘的HTML标签

长久以来项目网站首页结构一直没有改变,依旧是TABLE结构,随着越做越大,栏目内容越来越多,网站首页也越来越臃肿,访问打开时间也越来越长。趁着年末改版,首页DIV+CSS化也提上日程,虽然这部分工作主要是设计部门处理,不过也借着这个机会好好学一学页面重构方面的知识。最近借阅了本《CSS实战手册(CSS THE MISSING MANUAL)》,还在慢慢阅读中。俗话说:好记性不如烂笔头。把一些好东东记录下来,方便日后查找。这次主要提下一些可以遗忘的HTML标签和一些技巧。 😉

可以遗忘的标签:

<font>标签:这个在自己设计页面是也经常用到,有时候为了某几个字的表现效果,懒得去设置一个新的样式,直接使用<font>标签了,常常一个页面有着许多font,代码看起来有些凌乱,修改起来也不是很方便。

<b>、<i>粗体和斜体标签,这个自己倒是不用,基本在用<strong>,用Dreamweaver设计直接Ctrl+B就OK,斜体自己似乎从做网页也来就没有用过,总感觉字变斜了看起来怪怪的。 :bhan: 做图片的时候到偶尔会用用。

用于网页布局的<table>标签。这个就是自己期望达到的目标:除了显示数据表、图表之外,少或者不用<table>来显示网页结构,这个还需要慢慢来,毕竟是改变一种设计习惯,还需要一定过程

一些展现表现形式的标签属性,类如:color,backgroud,border,一系列调整边距属性,对齐属性等等。如果用过Dreamweaver CS4会发现在元素的设置里面没有了 backgroud 这个填写框了,(家里没装CS4,明天去单位补个图),这些效果的代码代码都很长,使代码变得臃肿的主要原因之一,而且可读性也大幅度下降,其实这些都可以用CSS来定义表现。

不要滥用<br />标签。这块就不是很明白,按书上所写“浏览器自动地——有时令人愤怒地——在段落之间插入空格”,我倒是还没遇到过,先记下来了,或许书中后面、以后工作中会慢慢搞清楚。

一些技巧:

使用<h1>等系列标签来表示标题,使页面层次更分明,更主要的是有助于搜索引擎的收录;
使用无序列表<ul>来显示菜单、一些相关项目;使用有序列表<ol>来显示排名、有顺序的项目;使用<dl><dt><dd>来显示术语表;
使用一些生僻的标签来展示一些特殊的信息,如<cite><address>等等;
注意标签闭合;
使用W3C校验器来校验,能发现一些不容易看出的拼写、不规范等等错误;

暂时先写到这吧,书才刚开始看。以后再慢慢写了 :mrgreen:

PS:读书学习中,难免有一些认识不足或者错误理解,欢迎斧正。

PS2:发现用高亮代码显示来当做<ol>用也挺不错 😀

读书笔记(一)——可以遗忘的HTML标签

@玛酷猫10年前

11/21
22:40
前端 建站日志

FusionCharts参数简单说明

之前介绍了这款很不错的Flash统计图软件[name]FusionChartsFree,http://www.makumo.com/fusioncharts.cat[/name],它是[name]FusionCharts,http://www.fusioncharts.com[/name]的一个免费版本,根据官网介绍,最新版本V3支持46种统计图样式,多统计图联动等等一些很有意思的功能,官网的一些统计图demo

在上篇文章中曾经提到了字体小等等一些问题,这几天好好看了下附带的说明文档,其实这些都可以设置的。在说明文档Chart XML Reference栏目下就有详细的参数说明,针对不同的统计图表都用不同的参数说明。公共部分比如baseFont:设置字体样式;baseFontSize:设置字体大小,将<graph>中间加上baseFontSize=‘12’,字体就变成12号字了;还有numberPrefix、numberSuffix:前缀、后缀,根据说明中的提示“To use special characters for numberPrefix or numberSuffix, you’ll need to URL Encode them.”,比如后缀想显示“元”,在graph标签种应该设置成numberSuffix=‘%D4%AA’,一些文本编辑器支持代码转换可以直接转,实在找不到可以借用搜索引擎,例如百度,在搜索框输入“元”,点搜索,在地址栏里面“http://www.baidu.com.cn/s?wd=%D4%AA”中的wd=后面的字符串就是“元”字转过的编码。参数有许多,根据不同的图表,参数也有不同之处,可以通过设置不同的参数显示出很有个性的统计图出来。这里就不再一一说明了,可以参照说明文档中的说明,虽然都是英文版的,但是很简单明了,一般写过程序的基本都能看得懂。

最后顺便提下LICENSE,免费版只用于individual/research/commercial(个人/研究/交流),要尊重别人的劳动成果和知识产权。LICENSE如下:

  • FusionCharts Free can be used for free if you are a individual/research/commercial user.
  • FusionCharts Free can be distributed for free with your free or commercial softwares, irrespective of whether they’re open source or closed source.
  • You must not sell FusionCharts Free as a component in itself. However, your commercial product can embed FusionCharts Free.
  • You must not represent in any way that you’re the author of FusionCharts Free.

FusionCharts参数简单说明

@玛酷猫10年前

11/16
14:02
前端

Flash统计效果图——FusionChartsFree

很久前开发网站的时候曾经遇到过页面显示统计图的问题,直接调用office显示实在是惨不忍睹,当时用的是一个叫TeeChartOffice的插件,虽然同样是需要office支持,不过显示效果好很多,而且不存在浏览器兼容问题,它是先生成图片,然后调用图片显示。但是那个插件问题也很多,最致命的是对中文支持不是很好,经常把中文显示成方块,具体也不知道是什么地方设置问题,可能今天显示的好好的,明天显示就变成方块了,过几天又好了。。。

前几天又遇到网站显示统计图的需求,网上找了一下,大部分是要求组件。检索到一个用VML的解决方案,显示效果还比较满意,就先使用着了。不过随后发现VML只支持IE,没办法,只有放弃。

网上搜索时无意在一篇[name]博文,http://hi.baidu.com/phoenix_lee15/blog/item/effcac13cc66f8045baf5330.html[/name]中看到了一款叫[name]FusionChartsFree,http://www.filetransit.com/go.php?id=34476-4-1[/name]的Flash版统计图,下来试用了下,内附的使用文档还是很全面的,包括用法和例子。有点遗憾的是没有源码,不过一个free版也不能要求太多。还有一点就是中文汉字显示很小,估计只有10号,英文还能看清,中文基本就是一团。暂时先不填写XML中的标题和描述,先凑合用了。继续寻找更好的统计图。

后附几张效果图,从自带说明文档里面截取的:


Flash统计效果图——FusionChartsFree

@玛酷猫10年前

06/27
21:21
前端 他山之石

Web 前端优化最佳实践之内容篇[转]

(朋友发给我的,觉得很不错就转到这来了,方便随时查看。)

Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献。广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条–真是与时俱进啊。最新的 34 条也针对不同的角度做了分类。

面向内容的优化规则目前有 10 条。

1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests)

作为第一条,可能也是最重要的一条。根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益。有几种常见的方法能切实减少 HTTP 请求:
    * 1) 合并文件,比如把多个 CSS 文件合成一个;
    * 2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位;参见:CSS Sprites: Image Slicing’s Kiss of Death
    * 3) 图像地图
    * 4) 内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据.

2. 减少 DNS 查找 (Reduce DNS Lookups)

必须明确的一点,DNS 查找的开销是很大的。另外,我倒是觉得这是 Yahoo! 所有站点的通病,Yahoo!主站点可能还不够明显,一些分站点,存在明显的类似问题。对于国内站点来说,如果过多的使用了站外的 Widget ,也很容易引起过多的 DNS 查找问题。

3. 避免重定向 (Avoid Redirects)

不是绝对的避免,尽量减少。另外,应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ,就能有效避免一次重定向。http://www.dbanotes.net/arch 与 http://www.dbanotes.net/arch/ 二者之间是有差异的。如果是 Apache 服务器,通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。

4. 使得 Ajax 可缓存 (Make Ajax Cacheable)

响应时间对 Ajax 来说至关重要,否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。

5. 延迟载入组件 (Post-load Components)

6. 预载入组件 (Preload Components)

上面两条严格说来,都是属于异步这个思想灵活运用的事儿。

7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)

8. 切分组件到多个域 (Split Components Across Domains)

主要的目的是提高页面组件并行下载能力。但不要跨太多域名,否则就和第二条有些冲突了。

9. 最小化 iframe 的数量 (Minimize the Number of iframes)

熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处,也有其弊端,一分为二看问题吧。

10. 杜绝 http 404 错误 (No 404s)

对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误,亦能提升用户体验。值得一提的是,CSS 与 Java Script 引起的 404 错误因为定位稍稍”难”一点而往往容易被忽略。

这是内容篇的 10 条。应该说具体引导性的内容还不够详细。逐渐会根据自己的理解补充上来。

Web 前端优化最佳实践之内容篇[转]

@玛酷猫11年前

07/3
11:02
心情点滴 前端

图片分辨率闹出来的笑话

搬家免不了的要去电信办电话和ADSL的移机,正巧朋友在电信工作,也免得自己跑营业大厅了。但是还有身份证的问题,这个也简单,中午扫描了下身份证,传给我朋友,就等着上门检测线路了。谁知没过多久朋友一个电话就打来了“打印不行呀,整一A4纸大的身份证!!”我一听顿时瀑布汗……,连忙问用什么软件打印的,朋友说是系统自带的“图片和传真查看器”,自己试了下,只有默认的几种打印格式,没法调原始或者其他的,问朋友有没有其他的,他说有ACDSEE,但是按打印,打印机没有反映。我连忙在自己着试了下,同样A4大小的身份证,感觉像是通缉犯=。=,上网查了下资料,原来是分辨率的原因,扫描的图片默认一般是300像素/英寸,调到72像素/英寸就差不多了。于是说调就调,调好后发给朋友,过了会,朋友说到好象小了点。小了点?那没关系,改96像素/英寸试试,发过去后朋友说差不多了。

说到打印图片,方法有很多,再没有装任何图形处理软件的情况下用系统自带的画图板、WORD、IE都可以做到打印图片。系统自带的图片查看器就PASS了,除了固定几种尺寸,基本打出来的都是满A4的图片……

图片分辨率闹出来的笑话

@玛酷猫11年前

06/21
08:49
前端

让DIV里面的文字垂直居中

之前在做DIV+CSS的页面中经常遇到这种问题,虽然可以用定高以及DIV的位置解决,但是遇到文字内容不固定就比较头痛。今天无意中看到篇文章说到这点,转录如下:

.con_div{ 
  width:440px; 
  height:300px; 
  border:1px solid #777; 
  text-align:center; 
  display:table-cell; 
  vertical-align:middle; 
  background:red; 
  color:#fff 
} 
/*FOR IE*/ 
.fixie{ 
  width:0; 
  height:100%; 
  display:inline-block; 
  vertical-align:middle; 
} 
测试内容

 
看来还是要找些CSS的书来看下

让DIV里面的文字垂直居中