专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

开发

  • 主流web2.0网站的配色参考方案

    / 分类: 开发,工具 / No Comments

     

    Shiny silver [#EEEEEE]

     

    Reddit white [#FFFFFF]

     

    Magnolia Mag.nolia [#F9F7ED]

     

    Interactive action yellow [#FFFF88]

     

    Qoop Mint [#CDEB8B]

     

    Gmail blue [#C3D9FF]

     

    Shadows Grey [#36393D]

    Bold

     

    Mozilla Red [#FF1A00]

     

    Rollyo Red [#CC0000]

     

    RSS orange [#FF7400]

     

    Techcrunch green [#008C00]

     

    Newsvine Green [#006E2E]

     

    Flock Blue [#4096EE]

     

    Flickr Pink [#FF0084]

    Muted

     

    Ruby on Rails Red [#B02B2C]

     

    Etsy Vermillion [#D15600]

     

    43 Things Gold [#C79810]

     

    Writely Olive [#73880A]

     

    Basecamp Green [#6BBA70]

     

    Mozilla Blue [#3F4C6B]

     

    Digg Blue [#356AA0]

     

    Last.fm Crimson [#D01F3C]

  • 具有代表性的web2.0网站配色

    / 分类: 开发,工具 / No Comments

    #96C2F1
    #EFF7FF
    #B2D3F5

    #9BDF70
    #F0FBEB
    #C2ECA7

    #92B0DD
    #FFFFFf
    #E2EAF8

    #CCEFF5
    #FAFCFD
    #FFCC00
    #FFFFF7
    #BBE1F1
    #EEFAFF
    #A9C9E2
    #E8F5FE
    #E3E197
    #FFFFDD
    #ADCD3C
    #F2FDDB
    #F8B3D0
    #FFF5FA
    #D3D3D3
    #F7F7F7
    #BFD1EB
    #F3FAFF
    #FFDD99
    #FFF9ED
    #CACAFF
    #F7F7FF
    #A5B6C8
    #EEF3F7
    #CEE3E9
    #F1F7F9
    #CAE3FF
    #F4F9FF
    #C9D9EE
    #ECF8FF
    }
    #5C9CC0
    #F2FAFF

     

  • WEB软件开发结构十条原则

    / 分类: 开发 / No Comments

    一、 目录结构清楚,不宜过深,复杂,路径最好用相对地址
    二、 命名适当
    三、 常变内容、界面使用模板较好
    四、 公共信息统一存储
    五、 Include文件不可嵌入较多
    六、 目录下不可存储太多内容文件
    七、 数据结构要设计合理
    八、 数据校验应在服务器端
    九、 连接数据库近晚,断开连接近早
    十、 尽量少使用SESSION与COOKIE

    WEB软件开发结构原则详细说明:

    (一) 目录结构清楚,不宜过深,复杂,路径最好用相对地址
    a) 什么样的目录放什么样的内容,这样便于管理,使WEB程序的目录结构,清楚明了,一看便知道某个文件夹下存储了哪些功能模块与内容。若随便存放,时间一长久自己都将不从了解某目录是用来做什么的。如:经常要使用的可执行文件最要存放在(项目根目录)根目录,这样做主要是便于了解其作用,同时也为在程序中少输入些地址字符。程序所用到的图片统一存放在根目录下images目录中,若项目较大,分枝较多,可再在其目录下建立也分枝程序相关的目录名,存储相关的图片内容。程序的配置文件与常用共公函数类库存放在include目录中,存放在此目录下的函数类库文件扩展名得命名为:.php切不命名为.inc .ini之类为扩展名的文件,主要是防此此类文件可供用户下载,或查阅其源码内容,这样对其调用方便明确。模板文件应存储在根目录下templates目录中,扩展名为.html,如果项目较大,分类较多,模板文件可分类存放在下极目录中。临时文件存储在根目录tmp目录中,此目录通常设置为任何人都可读可写。使用相对地址主要是方便程序移植。

    (二) 命名适当
    a) 命名最好是以程序用来作什么用来命名。若一个单词就要描述则用小写单词来命名,若要用多个单词方能代表,也以小写单词之间加下划线连接。要注意命名不可过长,这样就不方便了,虽然能表达的更明确,但打字难打啊。程序中函数命名也可与此相同。不好之上也有,那就是每次命名都得要花时间去想个较合适的名字,由其是对于是我们这种英文水评较差的人来说可不是一件容易的事啊。(惨啊,哈哈!)

    (三) 常变内容、界面使用模板较好 
    a) 常变内容、界面使用模板较好,这是因为当我某天感觉某不页面不美观时尚时,我想更换较新较好的界面,这时就用得上了。如果是按照传统的制作将HTML页面内容放在程序中处理输入时,较麻烦非得要更改程序不可,这可能会带来较大的不便万一更改出错,这就不太好了。(程序有很长一段时没有维护了,突然要改,一时之间是难免不发生改错的情况发生)。若是使用了模板则不用改程序,只要更改一下模板文件就行了。好了说了这么我模板的好处,好像传统的做法没有一点好处是的,好像分文不值是的,也不是,模板也有它不好的地方,现在我也来说说它是怎么个不好的。传统做法是把HTML代码嵌入在WEB程序中,这样做的好处是,执行速度要比使用模板的要快,这是因为它不用经过任何处理就能直接输出,而模板就不一样啦。模板先要打开读取模板文件到字符串变量可数组字符串变量中,这是要时间的吧?读处完了之后还得花时间用字符串操作函数替换模板中模板变量吧?替换完成了方能进入输出。传统做法与使用模板作法,您觉得哪个好呢?(我个人认为如果是开发访问量相当大的网站,选择传统的作法是一个不错的选择,我所说的是相对不是绝对,如果访问量再大那就不能用脚本语言去写了,那得用CGI + Socket + Demon了。不说了,说远了,哈哈)

    (四) 公共信息统一存储
    a) 公共信息统一存储,这主要为了方便团队开发时都能进行调用用的最常的函数,不用每个开发人员都复制一份或自己写一份存储在程序文件中,这样做浪费空间同时效率效果也不好。

    (五) Include文件不可嵌入较多
    a) Include文件不可嵌入较多,这是因为每次程序include某个文件时,是要打开读取这个文件的,这是要时间的哦,再就是说处理路径时可能会遇到较难发现的BUG问题。

    (六) 目录下不可存储太多内容文件
    a) 目录下不可存储太多内容文件,你有没有发现?每当你进入windows的system32文件夹时通常打开的时间要比打开其它文件夹时要长久点呢?这主要是因为system32这个文件夹中文件较多,当你打开系统得花时间查找文件并显示吧?如果文件较多较大时最好是分目录分盘符来处理。假若您的机器够好够强劲的话,就当我没说过,那就得另当别论了。

    (七) 数据结构要设计合理
    a) 数据结构要设计合理,如果数据结构设计不合理的话,不管你的程序写的多精典,写得我容易,也不是不能发挥其最大作用与价值的。这就相当于一个女人的胸部最大最丰满,但人不够高,而且又黑,身体又不好,身架又残疾,你会说她美丽完美吗?程序也一样,有些代码沉长又不起作用,存在也没有什么用。数据结构要精简明了。

    (八) 数据校验应在服务器端

    a) 数据校验应在服务器端,这是因为就算是他人不从我们的页面输入数据,自己做了个链接地址(GET)或自己做了个表单用POST方式传送数据,我们的程序也将进入核对查验。若是放在客户端,他人就能用以上方法逃过审核了。但这样做也有他不好之处,那就是当数据量大时,服务器会负载运行,审核数据完整性是可开销时间与系统资源的。在客户端就不会占用服务器太多的资源,因为他占用的是用户的资源。

    (九) 连接数据库近晚,断开连接近早
    a) 连接数据库近晚,断开连接近早,这主要是因为连接数据是要时间的吧?连接上了不即时使用也要占用系统资源吧?连接数据库连接数量是有限制的吧?所以得尽晚连接,尽早断开连接,这个做能使占用系统资源最少,为下一次连接提供条件。

    (十) 尽量少使用SESSION与COOKIE
    a) 尽量少使用SESSION与COOKIE,因为使用SESSION是要占用系统资源的,SESSION是存储在服务器端的,每次读取SESSION中的数据是要较大开销的。COOKIE虽然不占用服务器资源,但COOKIE不太安全。

  • IE与Firefox的CSS兼容

    / 分类: 开发 / No Comments

    这里只记录了自己经常忽略的。

    1.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
    2.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
    3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题
    4.让高度能自动适应,要在wrapper里面加上overflow:hidden;
    当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性用zoom:1;可以做到,这样就达到了兼容。
    例如某一个wrapper如下定义:.colwrapper{
    overflow:hidden;
    zoom:1;
    margin:5px auto;}
    5、margin加倍的问题。 
    设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
    解决方案是在这个div里面加上display:inline;
    例如:#IamFloat{
    float:left;
    margin:5px;/*IE下理解为10px*/
    display:inline;/*IE下再理解为5px*/}

  • 一个图片转HTML的网址

    / 分类: 开发 / 1 Comment