`
simlee
  • 浏览: 53736 次
  • 性别: Icon_minigender_1
  • 来自: 地球
社区版块
存档分类
最新评论

Web2.0: 是时候放弃弹出窗口了!

阅读更多
为什么使用弹出窗口?

    弹出窗口是在以前的Web开发中与用户交互简便手段。弹出窗口可以方便将用户的焦点转至我们需要的地方。开发中的实现难度也很低,一条简单的JavaScript语句就能实现。还有一个好处是可以自定义长宽,对于少量信息的交互,可以将实用的交互放在小空间里,避免了整个页面耗时的刷新。正是因为以上的种种优点,在以前的互联网世界里弹出窗口大行其道,任何依靠广告为生的网站都不会放过这个好办法。


为什么放弃?

    当弹出窗口被各类网站滥用的时候,弹出窗口就和弹出广告划上等号了,用户也逐渐开始厌恶弹出窗口。各浏览器提供者纷纷将自己的浏览器中加入阻止弹出窗口的功能。当浏览器开始流行标签方式时,弹出窗口更加没有生存的余地了。


什么是替代品?

    答案很简单,就是DIV。基本的原理就是先把DIV层载入页面中设visible为false,按钮触发事件后再将他显示出来。因为DIV有隐藏显示和绝对定位的功能,将它作为弹出窗口的替代品是绝佳之选。
    将DIV作为弹出窗口与用户交互一般要注意几点:
    1.尊重用户的习惯。比如有标题栏、右上角有关闭X按钮。
    2.当作为输入交互或提供阅读时,应该提供拖拽的功能,以此提高用户的体验。
    3.轻量级。DIV隐藏在页面中已经是多出来的数据,如果DIV中图片复杂,会更加长用户的等待时间。所以DIV的设计应该是简约的,图片链接可以定义在CSS上,这样可以减少第一次加载的时间。


有没有傻瓜式的工具?

    显而易见,用DIV代替弹出窗口增加了网站的技术含量,恐怕一个网页设计师已经搞不定了,公司得再请上一个JavaScript程序员。那么现在有没有使用简易的程序库呢?答案是:有,而且很多。我就介绍两个很酷的工具:
   
Qooxdoo:
    Qooxdoo的特点就是完全设计成了窗口程序的UI界面,甚至连编码的方式都向窗口程序靠拢。它的UI非常丰富,这种完全抛弃传统Web设计的东西属于比较前卫的。


Yahoo UI:
    Yahoo UI与Qooxdoo等不同的是,它还是基于传统的Web设计。它可以很方便的和原始的HTML网页集成起来。对话框也集成了Ajax方法。
 

附:
    Qooxdoo: http://qooxdoo.org/
    Yahoo UI: http://developer.yahoo.com/yui/

分享到:
评论

相关推荐

    Web2.0:企业信息化发展新趋势

    ### Web2.0:企业信息化发展新趋势 #### 引言 随着信息技术的飞速发展,Web2.0作为互联网的进化版本,不仅深刻改变了个人的网络体验,更引领了企业信息化的新潮流。Web2.0的核心在于从“只读”的信息接收模式向...

    web2.0色系与经典web2.0站点配色

    Web2.0色系是21世纪初网络设计领域中的一种流行趋势,它与早期的Web1.0设计风格有着显著的区别。Web1.0主要采用冷色调和简单的色彩组合,而Web2.0则引入了更加丰富、明亮且具有活力的色彩方案,以创造更加互动、动态...

    web2.0&web3.0

    #### 二、Web2.0:交互式网络时代 Web2.0标志着互联网进入了一个全新的发展阶段,这一阶段强调用户的参与性和互动性。与Web1.0相比,Web2.0最大的特点是让用户不仅仅是信息的消费者,更是内容的生产者。这体现在...

    什么是web2.0

    Web2.0 是相对Web1.0 的新的一类互联网应用的统称。Web1.0 的主要特点在于用户通过浏览器获取信息。Web2.0 则更注重用户的交互作用,用户既是网站内容的浏览者,也是网站内容的制造者。所谓网站内容的制造者是说...

    web2.0 & CRM

    ### Web2.0与CRM的关系 #### Web2.0技术简介 Web2.0是指互联网发展的第二阶段,它强调用户生成内容、互动性以及社区构建的重要性。与传统的Web1.0相比,Web2.0更加注重用户体验和服务的个性化。Web2.0技术包括但不...

    精通Struts 2:Web 2.0开发实战

    总之,《精通Struts 2:Web 2.0开发实战》是一本深入浅出的教程,适合有一定Java基础的开发者学习,通过阅读本书,你可以全面了解Struts 2框架的精髓,提升自己的Web开发能力,为构建高效、稳定的Web 2.0应用打下...

    web2.0详细介绍

    Web2.0是互联网发展的一个重要阶段,它标志着互联网从静态信息展示的Web1.0时代,迈向了用户参与、互动交流与个性化服务的新时代。Web2.0的核心理念是用户生成内容(User-Generated Content,UGC)、社交网络、富...

    web2.0 色系表

    【标题】"Web2.0色系表"指的是在Web2.0时代广泛采用的一系列色彩搭配方案,这些颜色在网页设计、平面设计以及UI设计中具有重要地位。Web2.0时代,互联网开始从静态信息展示转变为动态交互体验,设计理念也随之更新,...

    11_WEB2.0启发式爬虫实战_猪猪侠.pdf

    2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt

    AJAX和WEB2.0

    **AJAX(Asynchronous JavaScript and XML)和Web 2.0是互联网发展史上的两个重要概念,它们共同推动了Web应用程序的交互性和用户体验的提升。** **AJAX** 是一种在不重新加载整个网页的情况下,能够更新部分网页的...

    web2.0使用教程

    Web2.0是一个术语,代表了互联网从早期静态网页向互动性和用户参与度...结合这些技术,你可以创建出富于交互性、吸引用户参与的Web2.0应用。记得实践是检验真理的唯一标准,理论学习后要多动手实践,以加深理解和掌握。

    精通Web 2.0

    ### 精通Web 2.0:深入理解与应用 #### 一、Web 2.0概述 Web 2.0是指互联网发展的第二阶段,它强调用户参与、互动和内容共享。相比于早期的Web 1.0,Web 2.0更注重用户的交互体验,支持动态网页内容和用户生成内容...

    web2.0技术标准

    Web2.0技术标准是互联网发展的一个重要里程碑,它标志着互联网从单纯的静态信息展示转变为动态交互和用户参与的新阶段。以下将详细介绍这些技术标准及其在现代网页开发中的应用。 1. CSS (Cascading Style Sheets) ...

    web2.0风格效果的photoshop样式包

    "web2.0风格效果的photoshop样式包"正是针对这种设计风格的资源集合,它包含了预设的样式、图案、图层样式等,旨在帮助设计师快速、高效地创造出具有Web 2.0特色的界面设计。 Web 2.0设计的核心特征包括: 1. **...

    web2.0常用图标

    Web2.0是一种互联网发展概念,它强调用户体验的互动性、参与性和个性化。在这个时代,网站设计变得更为动态和富媒体化,图标作为用户界面(UI)的重要元素,扮演着引导用户、传达信息的关键角色。以下是一些关于Web...

    php web2.0开发实战源码

    Web2.0是指互联网从信息传递转向用户交互的变革,它强调互动性、社区化和个性化。PHP作为一种流行的服务器端脚本语言,被广泛用于Web2.0应用的开发。 一、PHP Web2.0开发基础 PHP Web2.0开发涉及的主要技术包括:...

    web2.0配色专用工具

    Web2.0时代的网站倾向于使用鲜艳、饱和的色彩,以及富有活力的色调,以创造出现代、动态的视觉效果。这种配色方法与早期Web1.0时代较为保守和单一的色彩方案形成了鲜明对比。 "网页流行色选取器.exe"这个文件名暗示...

    WEB2.0论文

    随着互联网技术的飞速发展,我们已经从Web 1.0时代步入Web 2.0时代,这是一个以用户为中心的网络世界,一个用户可以积极创造信息、自由互动交流的时代。Web 2.0不仅仅是一个技术革新,它更是一场互联网使用方式的...

    web2.0样式包(photoshop按钮样式)

    "Web 2.0样式包(Photoshop按钮样式)"是一个专门针对这些设计风格的资源集合,旨在帮助设计师快速创建符合Web 2.0风格的设计作品。 这个资源包主要包含了Photoshop的样式预设,样式预设是Photoshop中的一个强大...

    jsp做的网上书店jsp web2.0

    "jsp做的网上书店jsp web2.0" 这个标题表明这是一个基于JSP技术构建的Web应用程序,特别关注Web2.0的特性。JSP(JavaServer Pages)是Java平台上的一种动态网页技术,允许开发人员在HTML或XML文档中嵌入Java代码,...

Global site tag (gtag.js) - Google Analytics