重构HTML改善Web应用设计_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > 重构HTML改善Web应用设计

重构HTML改善Web应用设计

 2014/10/27 3:13:35  floraLam  程序员俱乐部  我要评论(0)
  • 摘要:本文从良构,有效性,布局三个角度,结合往日项目开发经历,整理总结重构HTML改善Web应用设计的几点规则和做法。部分参考自《重构HTML改善Web应用设计》。重构。什么是重构?为什么要重构。重构是在不改变程序行为的基础上进行小的改动,是代码逐渐改善的过程。移除长期累积下来的烂码,以得到更清晰和更容易维护,除错以及添加新功能的代码,这做法不能单纯只出现在编码的后期,甚至是你意识到你的代码已经无从再下手非重写不可的时候,而是从开始开发起,逐渐积累,逐渐修改。以前因为日常编码的随意性
  • 标签:Web 应用 设计

  本文从良构,有效性,布局三个角度,结合往日项目开发经历, 整理总结重构HTML改善Web应用设计的几点规则和做法。部分参考自《重构HTML改善Web应用设计》。

 重构。什么是重构?为什么要重构。

  重构是在不改变程序行为的基础上进行小的改动,是代码逐渐改善的过程。移除长期累积下来的烂码,以得到更清晰和更容易维护,除错以及添加新功能的代码,这做法不能单纯只出现在编码的后期,甚至是你意识到你的代码已经无从再下手非重写不可的时候,而是从开始开发起,逐渐积累,逐渐修改。以前因为日常编码的随意性,导致问题日益积累,逐步扩散,最后只能推倒重来。如果时间经受不起推倒重来,你别无选择,唯一实现的选择就是重构。

  无论做什么,都不要因为追求完美而忽略晓得改进,如果眼下时间足够做一点重构,那就做一点儿。日后有时间还可以做更多。整体的重构设计虽然惹人注目令人难忘,但没有平日的积累,何以收获庞大的成就?你的目标应该是让代码每天都有新变化。坚持几个月,我相信我们都能拥有骄傲地,清晰代码。

 

 良构

  把标记转换为符合现代标准的首要任务是实现良构。良构保证了DOM可操作的文档树结构的唯一性,因而成为可靠的跨浏览器的javascript代码的基础。对于一个乱构的页面来说,任何可靠的自动化处理或测试都是非常难以保证的,其次,浏览器页面的展示效果更是不可预估。对于乱构的页面,不同的浏览器使用不同的方式补充确实的片段,并纠正其中的错误。因此,对于重构HTML,最要紧的无疑是实现页面良构化。

  要达到良构,大部分的网站要至少或全部做到以下几点:

  • 所有的其实标签都应有一个匹配的结束标签
  • 空元素应该使用空元素的标签语法
  • 所有的属性都必须有一个值
  • 所有的属性都需要用引号括起来
  • 所有的&好必须转义为&
  • 所有的小于号都要转义为<
  • 只有唯一的根元素
  • 所有未预定义的实体应用必须在DTD中声明

  针对往日因为个人编程习惯和随意性容易犯的错误,从良构角度思考,整理一下日后构建HTML时,有几点需要特别注意。

  更好实现良构的几个要点:

  1. 将名称改成小写。<P></P> 改写为 <p></p>等,因为XHTML只使用小写名称,所有元素和属性都要小写,<TABLE>和<Table>都不被接收
  2. 给属性值加引号。<span class = speack></span>改写成<span class =“ speack”></span>等。一些空格的属性有时候出现有做括号而没有右括号,浏览器不宜定按照你的意愿解析,不同的浏览器有不同的解析效果,这就有可能造成跨浏览器问题。
  3. 补足遗漏的属性。<input type = "radio" checked>改成<input type = "radio" checked = 'checked'>等。XHTML不支持只有属性名称而没有值的语法。
  4. 将空标签替换为空元素标签XML解析器要求所有的起始标签都有匹配的结束标签<p>要有对应的</p>,<br>改写为</br>等
  5. 消除重叠。<strong><em>xxxx</strong></em>改写成<strong><em>xxxx</em></strong>等。不同的浏览器对包含重叠元素的文档所构建的DOM树不一样。在重叠元素面前,javascript,css以及其他需要读取DOM的程序都变得难以创建,排错和维护。

 有效性

  有效性比良构稍微严格,即不仅要确保文档的语法正确,还要保证语义正确。保证元素和属性只能按自身语义出现在恰当的地方。

  有效性是面向未来开发的基石。有效的网站与设备无关,有效的页面为不同的读者传达相同的信息,就算读者使用的是界面不相同的浏览器。

良构和有效性检查是基本的语法约束保证,接下来要保证语义是恰当的。

  具体实现方法:

  1,加入过渡型DOCTYPE声明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

 

 

  过渡式DTD让你不必要完全语义标记就能让文档通过验证,并且他允许包含i,b和center等这些不推荐使用的表现性元书,因此,在进一步改善文档的语义之前,你可以找出比修复更严重的结构问题。

  2,删除所有不存在的标签

  3,用CSS替代center,i,font等不被推荐或弃用的标签。

  4,把行内(inline)元素,放在块(block)元素中

  要做到有效,文档中所有元素是有效的严格性XHTML元素还不够,还必须保证它们之间的正确关系,浏览器和其他程序处理XHTML需要依赖元素间的正确位置。

Do you like this pictrue?<br />
<img src = "file.gif" />
I think it's really <em>neat</em>


<!--改写为-->
<p>Do you like this pictrue?<br /></p>
<div><img src = "file.gif" /></div>
<p>I think it's really <em>neat</em></p>

 

 

  

 布局

  1,熟悉元素语义

  每一个元素都应各司其职:ul是无序列表,ol是有序列表,table是表格式数据,blockquote是应用,h1~h6是标题等。恰当的语义元素有助于屏幕阅读器呈现更容易理解的结构,也能保证不同平台间正确显示。对于初学者,很多本来语义良好的元书,如ul,blockquote,table等,被滥用与实现某种特定布局效果。这些滥用的目的是给网页生成特定的外观,然而这些外观难以跨浏览器,几乎除了设计者自己的电脑,通常很多地方都不通用的。

 

                     失败经历:

   为了实现导航效果,一开始没有考虑内容语义,无意中将导航主项和相关联的菜单分开,在利用css中的相对定位,设定top和left属性,将相关菜单移动到相关的主项下。这样会导致一个严重的问题。一旦将不同页面放置在不同的分辨率的屏幕上,菜单就会错位。就是说,针对不同分辨率的屏幕,还要设计不同的top和left属性。

<div class = "nav">
     <div class="nav01">菜单一</div><div class="nav02">菜单二</div><div class="nav03">菜单三</div>
</div>
<div class = "menu">
    <div class="menu01">子菜单一</div><div class="menu02">子菜单二</div><div class="menu03">子菜单三</div>
</div>

  优化设计过的导航HTML结构,组合主菜单和子菜单:

<nav>
    <ul class="clear">
        <li class="first"><a href="#">菜单一</a></li>
        <li>
            <span class="Darrow"></span> <a href="#">菜单二</a>
            <dl>
                <dt><span class="arrow"></span></dt>
                <dd><a href="#">子菜单一</a></dd><dd><a href="#">子菜单二</a></dd><dd><a href="#">子菜单三子菜单三</a></dd>
            </dl>
        </li>
        <li>
            <span class="Darrow"></span> <a href="#">菜单三</a>
            <dl>
                <dt><span class="arrow"></span></dt>
                <dd><a href="#">子菜单一</a></dd><dd><a href="#">子菜单二</a></dd><dd><a href="#">子菜单三子菜单三</a></dd>
            </dl>
        </li>
    </ul>
</nav>

 

 

                  

 

  编写HTML的目的不是为某种结构或者页面外观,而是为了如何更好地呈现内容,因此在编写HTML之前,务必思考这种内容应该使用哪种语义的元素。

  恰当的HTML非常适合处理跨浏览器问题。拿到web设计图后,在着手构建web应用之前,你必须要停止考虑页面的外观,而应该开始思考页面表达的是什么含义。

 

  2,替换表格布局

    基于CSS的页面比基于表格的页面更小更简单。

    a)编写和编辑更容易,下载更快,

    b)通过转向CSS,可以节省带宽。同时外联的css文件可以缓存和重用,不必随每次页面的下载又重下一次。

 

    取代滥用本用于呈现表格数据的table元素而使用表格布局,可以考虑频繁使用的分栏式布局:

    1)两栏,左侧固定宽度的侧栏,右边是弹性宽度的内容栏

    2)三栏,左右各固定宽度的侧栏,中间是内容。

 

                     根据以往项目开发经验:

  栏目的高度是由它们所包含的内容量决定。对于内容比重大的网站来说,因为不能保证单个内容栏跟其他栏等高,栏会固定高度,保证各栏高度相同;而对于内容简单短小页面,不固定高度问题不大。另外,主体内容的div应该在侧栏,页头或页脚之前,这样屏幕阅读器可以从页面最重要的内容开始线性读取页面。搜索引擎机器人也可以对排在页面前面的内容予以更高的优先级。

  就两栏布局而言,有三种可能的宽度:

    (1)两栏宽度固定。最普遍,固定宽度对于一部分用户来所可能过大,过大的宽度用户必须滚动水平内容来查看内容,降低文本的可读性

    (2)左栏固定,内容栏是百分比宽度

    (3)两栏都是百分比

  从更好的用户体验考虑,主体内容应该能调整大小,以便适应不同窗口宽度。

                  

 

  3,内容与样式分离

    

  当然我们的页面也需要漂亮的外观,以帮助我们在竞争中脱颖而出。这可以通过在独立的CSS样式中放置有关表现的信息来实现。CSS用来描述网页的外观,而浏览器可以自由选择不同的样式表或是修改过的样式表。实际上,你可以为不同的浏览器随意发送不同的样式表,也可以为它们独特的能力量身定制。这是响应式设计的基本实现方法。

  “响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷。”

  出于方便或者是自身的编码习惯,在修改某种被更改的需求的样式代码时候,我们很容易在html代码中直接镶嵌样式代码。这样的做法除了更快的完成你暂时的任务之外没有任何好处。

 

  4,使用CSS定位替代框架

 

  网站使用框架的理由实际上就两种:

     (1)为所有页面引入相同的静态内容,而不用单独编辑每个页面。例如导航,网页头部尾部。也就是说,单独的非框架页面可能比相应的框架页面更耗带宽,因为框架内容每次都要给客户端重新发送内容。

   (2)显示多栏外观。例如Java API,包含包和类的列表,主体内容

  然而,过多使用框架将降低可用性:

   (1)难以标记数千或返回指定页面

   (2)难以保存和打印页面

     (3)过多的滚动条占据屏幕的宝贵空间

  在每一个页面上都有导航和其他相同或几乎相同的内容,对网站来说是非常普遍的,使用CSS取代框架,关键在于设立对应每个框架的div,每个div内容是对应框架里的文档内容。然而,这样做的问题在于,它违反了DRY原则(Don't Repeat Youself,别重复你自己),对于相同的内同,虽然有时候只是很小的变化,但还是需要不断在这一页那一页重复出现。重复内容通常也是代码的坏味道。框架在静态页面上避免恶劣不必要的重复,我提倡清晰,可维护的代码,在不损害用户界面的前提下,我更远一选择难看的代码而不是难看的用户界面。日常中原始的HTML是重复的,但不是我们必须编辑的,很多时候我们可以通过后台自动生成重复内容。

    

                     Apache服务器端包含:

   通常,拥有服务器端包含的以.shtml结尾的文件会在发送到客户端之前,告诉服务器需要解析自身以及包含的内容

   几乎所有的Web服务器都支持某些形式的服务器端包含功能,使用服务器端包含各种非静态文件,性能有所降低,但影响不大。

<!DOCTYPE html>
<html>
    <meta charset = "utf-8">
<body>
    
    <!--#include virtual = "/header.html" -->
    <!---这里嵌套主内容-->

    <!--#include virtual = "/footer.html"-->
    <!--#include virtual = "/siderbar.html"-->
</body>
</html>

 

尽管Apache默认的编译会包含mod_include,但可能不会在所有目录上启用,你需要子啊Apache主配置文件或是.htacess文件中添加一下三行配置,以指向每一个使用服务器包含的目录:

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
Options +Includes

 


PHP包含:

PHP的include函数有类似的功能

<!DOCTYPE html>
<html>
    <meta charset = "utf-8">
<body>
    <!--主内容-->
   <?php
       include("footer.html");
       include("sidebar.html");    
    ?>
</body>
</html>

 

                  

 

  5,正确标记列表

  正确标记列表能够提升可访问性,通常我们子啊列表中实现跳转和导航。

  大部分浏览器给列表以及列表中的项目都制定特定的外观,通常表现为缩进和项目符号,可能不是你所需要的外观,因此很容易在搭建html的时候忽略它们的存在,放弃使用正确列表标记,而使用语义较差的标签,实现同样的效果。根据需求,你能够通过CSS可以容易地修复这些特定的外观。下面整理了开发中常用的CSS样式修改规则:

/*删除项目符号*/
ul{
   list-style-type:none;       
}

/*载入外部图片自定义项目符号*/
ul li {
     list-style-image : url(images/str.gif);
}

/*去掉缩进的规则*/
ul{
   margin-left : 0px;
    padding-left :0px;
}

/*把项目排成一行*/
ul,li{
   display: inline;
    margin:0px;
  padding: 0px;
}

/*在列表项之间插入逗号*/
ul li:after{
  content : ",";
}

/*制定项目的宽度,超出时显示省略号*/
div.titleholder {
    font-size: 8pt;
    width: 100px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
} 

  然而,lu应用与列表上,blockquote应用在应用上。blockquote与ul相比,整理文本缩进更强大,更准确。

 

  6,为图片添加width和height属性

    width和height属性能让浏览器更快地样式化页面并展现给用户。但注意,这样做,对页面的显示速度有提升,但对下载速度并没有帮助。

    出于一般项目开发触觉,改变图片的尺寸意味着要修改HTML,否则图片会奇怪地变大变小。如果需要经常改变图片,比如设计页面是,最好是在最后的阶段插入确定的宽度和高度。

 

 

  

 

 

  

  

 

上一篇: Swift学习Day003 下一篇: 没有下一篇了!
发表评论
用户名: 匿名