UECSS.COM

专注前端开发,关注用户体验,记录成长历程

Milestone新布局HTML5


这些天除去其他项目的维护的工作,主要精力还是放在了迈石网站建设上,上一篇提到了两个方向这篇开始我用Milestone来代表迈石科技。
进度如下:
完成了对整个站点的HTML5标签重构,由于HTML5、CSS3目前还处于定义草案阶段,这里仅做参考;

W3C 在 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性:嵌入音频、视频、图片的函数、客户端数据存储,以及交互式文档。其他特性包括新的页面元素,比如 <header>, <section>, <footer>, 以及 <figure>。
通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则,HTML 5 改进了互操作性,并减少了开发成本。

Milestone的HTML5页面框架: Continue reading →

迈石网站建设第一篇

由于公司的网站建设是基于几年前的 HTML 4.01 Table布局站点,结构不清晰,多Table的嵌套布局不适合搜索引擎的检索抓取,缺点这里就不多说了,毕竟已经有一大群整天喊着DIV+CSS,都快喊烂了。现考虑将这个站点重构,之后再进行搜索引擎优化。

网站重构 — 制定搜索引擎喜欢的网站构架

采用最近流行起来的HTML5+CSS3的更符合语义化的标签来进行页面的布局(由于Milestone这个站点结构比较简单,并没有使用之前提到的圣杯布局,合适的才是最好的)

搜索引擎优化

前面提到的“制定搜索引擎喜欢的网站构架”是基础,在对基础设施进行完善之后,就开始相应的搜索引擎优化了,以期望达到目标关键词能在搜索结果页中有个较好的排名,实现更多的流量转化。

先来完成两步(优化代码、静态化页面上面以说这里不考虑)

第一步,路径的设计
- 搜索引擎能对路径和网页上的关键词进行匹配,因此路径中带有关键词是有利于在搜索结果页排名的

第二步,标签的设计
- Title
- Keywords
- Description

第三步,待续。。

这将会是一个学习和实践的过程,事实上已经开始实施了,这周基本可以完成重构工作,很高兴Cherry能一起参与进来协同工作。

iphone/ipad网站开发技巧整理


iphone/ipad异常刚猛,在此把收集到的一些开发技巧罗列出来,方便项目中参考使用,如下:

侦测iPhone/iPod

开发特定设备的移动网站,首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA,然后转向到专属的URL。

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.example.com";
}
}

虽然Javascript是可以在水果设备上运行的,但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输,所以下面是服务器端侦测和转向:

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
header('Location: http://yoursite.com/iphone');
exit();
}

设置viewpoint和屏幕等宽

如果不设置viewpoint,网站在viewpoint就会显示成缩略形式。如果你专门为iPhone/iPod开发网站,这一条很有用,而且很简单,只需要插入到head里就可以: Continue reading →

[SEO学习笔记]10个常规SEO操作法则

1.网站选择的关键词要有搜索量,而且与网站内容有关。

2.网站标题最多融入2~3个关键词。

3.网站重要页面一定要静态化。

4.要学会自己来写网站的原创内容。

5.内容要保持及时更新。

6.网站内部链接要形成蜘蛛网状,相互链接。

7.多增加相关网站的反向链接。

8.不要主动链接被搜索引擎惩罚的网站。

9.不要为SEO而SEO,网站面向的是用户。

10.不要作弊,搜索引擎比你聪明。

Runcode插件

Runcode一款在WP上运行代码的插件,最近才启用,这篇文章试用这个插件,已安装启用可跳过。

在编辑器中插入如下代码:

<runcode width="400" height="100" size="12">
<div class="mod">第一个框中的文字</div>
        <div class="mod2">缩进后的第一个框中的文字</div>
<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>
</runcode>

Continue reading →

CSS裸奔节-NAKED

今天,你裸了吗

今天,你裸了吗

4月9日的CSS裸奔节到了,脱掉CSS,露出HTML真实的脊梁骨吧 – PS:宁可CSS分层多一些,也要保证HTML结构的简洁、语义化的书写习惯。

第6期WEB标准化交流会[上海站]总结

WEB标准化交流会

第六期了,其实上海站还是第二期,刚起步,大家都很用心。

月底了,在结束掉这个月之前还是抓紧时间总结下,总是拖着只会消磨掉自己,我的语句杂乱,就这么整吧。

二期要比一期好些,虽然去的时候说这次没请什么嘉宾,但看起来效果不错,就是觉得前面有2/3的时间都是在陈述,以及抱怨流程中出现的种种情况及问题(自我介绍那段很好,拉近了大家伙的距离,这可能也是这次比上次觉得热闹的原因之一吧);之后有1/3的时间有PPT的演讲,就是觉得这部分时间有些短,刚好讲完,刚好结束的那种。

很多问题都只是将其浮在表面,大家提供的经历、经验、流程案例用来很好的借鉴,不同性质的工作环境,需要不同的协作流程来应对吧。

Continue reading →

New Theme – Base on iNove

之前启用过,之后停掉过,昨晚花了差不多3小时的时间在iNove 1.4.6 (目前最新版本)上进行改版重构;

看起来还是有些粗糙,这些天会继续尝试改变些元素,大致风格就是现在的样子了;

还算是白白净净的 O(∩_∩)O~

TAG:white, light, two-columns, fixed-width, theme-options, right-sidebar

待续..