07 2015 档案

浏览器渲染页面原理
摘要：当了解web访问原理后，与前端工程师或页面重构师工作更为关系密切的应该是浏览器，WEB 页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验， 特别是浏览器渲染页面的原理，页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程，理解了原理就... 阅读全文
posted @ 2015-07-29 20:20 331415706 阅读(7501) 评论(0) 推荐(2)
Web访问原理-从输入URL到页面加载完成的过程中都发生了什么事情？
摘要：从输入URL到页面加载完成的过程中都发生了什么事情？--这是一个经典的面试题； 主要是关于计算机网络方面的知识基础，对于非科班计算机自学web开发的同学可能理解起来就很困难。 StackOverFlow上有一个简要回答： http://stackoverflow.com/questions/2092527/... 阅读全文
posted @ 2015-07-29 16:39 331415706 阅读(7326) 评论(0) 推荐(0)
JSON
摘要：JSON的全称是”JavaScript Object Notation”，就是一个有特殊规则的字符串，按照这个规则我们就可以把这个字符串解析成JS对象，是一种基于文本，独立于语言的轻量级数据交换格式。 XML也是一种数据交换格式，为什么JSON更适合JS使用呢？ 因为XML在JS中处理XML不方便，同时XML标记比数据多,JSON无附加的标记，在JS... 阅读全文
posted @ 2015-07-29 16:24 331415706 阅读(358) 评论(0) 推荐(0)
AJAX缓存问题
摘要：Ajax页面缓存是ajax处理数据时对一些重复相同数据进行一个缓存操作，这种设计使客户端对一些静态页面内容的请求，比如图片，css文件，js脚本等，变得更加快捷，提高了页面的响应速度，也节省了网络通信资源。 但有时候如果通过Ajax对一些后台数据进行更改的时候，虽然数据在后台已经发生改变，但是页面... 阅读全文
posted @ 2015-07-28 20:04 331415706 阅读(4649) 评论(0) 推荐(1)
AJAX
摘要：AJAX : Asynchronous JavaScript and XML 异步JavaScript和XML （XML更多的是被JSON格式替代使用） AJAX 只做一件事情：异步获取数据，更为重要的是还是JS对返回的数据进行操作。 异步获取数据极大地改善web与用户的数据交互（如下图左侧为传统... 阅读全文
posted @ 2015-07-28 16:54 331415706 阅读(402) 评论(0) 推荐(0)
web设计_9_CSS常用布局，响应式
摘要：一个完整的页面和其中的组件该如何具备灵活性。 怎么样利用CSS来实现无论屏幕、窗口以及字体的大小如何变化，都可以自由扩展和收缩的分栏式页面。 要决定使用流动布局、弹性布局还是固定宽度的布局，得由项目的特点和需求来决定。 流体布局 Header Goes Here ...content goes here... ...sidebar goes here... ...... 阅读全文
posted @ 2015-07-13 22:38 331415706 阅读(653) 评论(0) 推荐(0)
web设计_8_数据表格内容样式分离
摘要：1.页面需要用到table的时候，样式重置CSS要设置： table{ border-collapse: collapse; border-spacing: 0; } 2. HTML结构 标题 ... /*tfoot在tbody之前，这样浏览器就可以在收到所有数据前呈现页脚了*/ ... ... 阅读全文
posted @ 2015-07-13 22:37 331415706 阅读(597) 评论(0) 推荐(0)
web设计_7_页面缺失图片或CSS的情况下仍然易读
摘要：1. 在任何可能使用背景图片的地方应设置同样的颜色的背景色。 防止图片不能加载的情况下，页面内容同样保持较好可读性。 例如文字为白色，背景图为深色，如果不设置背景色，当背景图未成功加载， 而浏览器多数默认背景为白色，那么这是文字内容无法可读。 2.当禁用CSS样式后，web仍然能够呈现很好地内容页面。 需要能够较好的保证页面核心内容与样式很好的分离。做到清晰易读的结构代... 阅读全文
posted @ 2015-07-13 22:36 331415706 阅读(288) 评论(0) 推荐(0)
web设计_6_图片/标题/说明文字布局
摘要：这个web中常见的单元布局，最好的布局方式就是利用float布局。 其中有个很关键的问题是需要清浮动。子集浮动是无法撑开父级的高度。 目前较完善的清浮动解决方案：在浮动的父级上添加.clear，达到清楚浮动的效果。 .clear{ *zoom:1; /*利用CSS hack 触发IE6，7haslayout 解决bug */ } .clear:after{ conten:'... 阅读全文
posted @ 2015-07-13 22:35 331415706 阅读(421) 评论(0) 推荐(0)
web设计_5_自由的框式组件
摘要：1. CSS3 border-radius 圆角矩形框 圆角矩形框组件是页面布局中常常用到的，利用CSS3的border-radius可非常方便的创建。 并且在横向纵向上面都有很好的扩展性和灵活性。 border-radius需要针对不用浏览器做兼容，-webkit-和-moz-部分语法还有些区别。 推荐http://border-radius.com/ 直接设置圆角，自动生成代码。 注意：IE... 阅读全文
posted @ 2015-07-13 22:34 331415706 阅读(240) 评论(0) 推荐(0)
web设计_4_可扩展的行
摘要：不要指定横向页面组件的高度，要让它们能够在纵向自由扩展。 常见的包含文章正文或大段文字的区域，应该适应任何篇幅和大小的文字。 但是例如文章标题、登陆信息栏等也要考虑文字内容数量及高度的变化。 例如：下图中标题文字数量过多时固定高度就会破坏样式 如何修改： 1.HTML结构为:利用H5的header标签 role属性，标题采用h1，对搜索引擎友好 Sample Blog 2.避免代... 阅读全文
posted @ 2015-07-13 22:33 331415706 阅读(168) 评论(0) 推荐(0)
CSS hack
摘要：针对不同的浏览器写出的CSS code就称为CSS hack. 1.HTML头部针对不同浏览器不同引入或语句 lte：就是Less than or equal to的简写，也就是小于或等于的意思。 lt ：就是Less than的简写，也就是小于的意思。 gte：就是Greater than or equal to的简写，也就是大于或等于的意思。 gt ：就是Greater th... 阅读全文
posted @ 2015-07-13 22:25 331415706 阅读(242) 评论(0) 推荐(0)
web设计_3_可伸缩的导航栏
摘要：1. HTML5构建一个选项卡,需要标签包围一个无序列表,也可以添加role属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色。 绝对不要基于图片的导航，对搜索引擎不友好，更新编辑也非常麻烦。 ... ... ... 2. 如果有渐变，直接采用CSS3设置渐变，对于IE9以下版本需要采用过滤器，最好设置一个中间色... 阅读全文
posted @ 2015-07-13 21:56 331415706 阅读(901) 评论(0) 推荐(0)
web设计_2_灵活的文字
摘要：最佳设计：可以让用户自由控制任何页面的文字大小。 浏览器中用户都是可以自定义默认的文字大小的，如果使用 px，用户自行在浏览器设置中改变了文字大小后，网页上是不会变化的。我们不能排除视障用户（如近视）、老年用户不会这么做. 利用CSS3的rem单位，避免了em相对父元素比例的嵌套问题，为了兼容IE低版本的需要添加px单位. html { font-size... 阅读全文
posted @ 2015-07-13 21:53 331415706 阅读(138) 评论(0) 推荐(0)
web设计_1_思路总览
摘要：核心思想：结构和样式分离 HTML与CSS 只有充分将页面核心内容和外观设计相分离而获得的灵活性，才能顺利构建出能够满足每个web用户需要的最佳设计方案。 核心要求：灵活性 适应不同的浏览器，适应各种各样的设备和软件。 结构和样式设计方案能够轻松地适应不同的文字大小和内容数量，能够随着这些变化自动扩展或缩小。 ... 阅读全文
posted @ 2015-07-13 21:52 331415706 阅读(441) 评论(0) 推荐(0)
PHP与ECMAScript_7_流程控制
摘要：PHP ECMAScript 顺序结构 默认从上到下依次执行 默认从上到下依次执行 分支结构 if / switch if / switch 循环结构 for / while / do-while / foreach(数组） for / while / do-while / for-in(数组) 跳转结构 return 终止函数运行并返回... 阅读全文
posted @ 2015-07-09 15:45 331415706 阅读(174) 评论(0) 推荐(0)
PHP与ECMAScript_6_常用运算符
摘要：优先级从上到下PHPECMAScript特殊运算符[ ] ,( )[ ] ,( ) 自增减/类型++ -- ! int float string array object @ (错误抑制符)++ -- - ~ ! delete new typeof void算数* / % + - .(字符串连接）... 阅读全文
posted @ 2015-07-08 23:51 331415706 阅读(150) 评论(0) 推荐(0)
PHP与ECMAScript_5_常用数组相关函数
摘要：PHP ECMAScript 长度 $length = count($array) length = array.length 增 array_unshift($array, new1,new2) 开头添加一个或多个元素，返回长度 array.unshift(new1,new2) array_push($array,new1,new2)... 阅读全文
posted @ 2015-07-08 23:06 331415706 阅读(168) 评论(0) 推荐(0)
PHP与ECMAScript_4_常用数学相关函数
摘要：PHP ECMAScript 向上取整 ceil($number) Math.ceil( number ) 向下取整 floor($number) Math.floor( number ) 绝对值 abs($number) Math.abs( number ) 四舍五入 round($number,n) Math.round( number ) ... 阅读全文
posted @ 2015-07-08 17:23 331415706 阅读(219) 评论(0) 推荐(0)
PHP与ECMAScript_3_常用字符串函数
摘要：PHP ECMAScript 长度 strlen($str) str.length 查找类 $str[n] 获取字符串中第n个字符 charAt(n) charCodeAt(n) 获取字符串中第n个字符的Unicod... 阅读全文
posted @ 2015-07-08 10:41 331415706 阅读(169) 评论(0) 推荐(0)
PHP与ECMAScript_2_数据类型
摘要：PHP ECMAScript 数据类型 基本：String、Integer、Float、Boolean 基本：String、 Number、 Boolean、NULL、undefined 复合：Array、Object 复合：Array、 Object、 Function 特殊：NULL 和 Resource 强弱类型 弱类型 弱类型 隐式类型转换 .... 阅读全文
posted @ 2015-07-07 16:27 331415706 阅读(196) 评论(0) 推荐(0)
PHP与ECMAScript_1_变量与常量
摘要：PHP ECMAScript 变量命名规则 （相同点） 变量包含：字母、数字、下划线字符 变量只能以字母或下划线开头 变量不能以数字开头 变量名是区分大小写 变量包含：字母、数字、下划线字符 变量只能以字母或下划线开头 变量不能以数字开头 变量名是区分大小写 变量命名规则 （不同点） 关键字和函数名不区分大小写 变量不需要提前定义，使用时直接赋值即可... 阅读全文
posted @ 2015-07-07 11:15 331415706 阅读(312) 评论(0) 推荐(0)
HTTP_5_通信数据转发程序：代理、网关、隧道
摘要：HTTP通信时，除客户端和服务器之外，还有一些用于通信数据转发的应用程序，例如代理，网关，隧道。配合服务器工作。代理转发功能，客户端与服务器之间可有多个代理，缓存代理：减少服务器压力，透明代理：不对报文做任何修改加工非透明代理：会对报文做加工网关同代理类似，并且可以提供非HTTP协议服务利用网关可以... 阅读全文
posted @ 2015-07-03 20:36 331415706 阅读(307) 评论(0) 推荐(0)
HTTP_4_返回结果的HTTP状态码
摘要：状态码：返回请求结果。状态码种类繁多，以下总结常用的状态码：类别信息性状态码1XX服务器接受请求，继续处理成功状态码200 OK请求处理成功，并返回资源（响应报文中含有实体主体）200 No Content请求处理成功，但没有资源可返回。（响应报文中无实体主体）206 Partial Content... 阅读全文
posted @ 2015-07-03 19:55 331415706 阅读(394) 评论(0) 推荐(0)
HTTP_3_HTTP报文
摘要：用户HTTP协议交互的信息被称为HTTP报文简单的请求报文和响应报文实例HTTP传输过程中常用设置提升传输速率编码压缩传输 (常见压缩格式：gzip compress deflate )分块传输编码 (Chunked Transfer Coding)传输多种数据（图片或文本文件上传）Web表单提交时... 阅读全文
posted @ 2015-07-03 18:32 331415706 阅读(269) 评论(0) 推荐(0)
HTTP_2_HTTP协议概要
摘要：http协议概要HTTP通信对象通信方式通信状态定位资源节省通信量超文本传输协议客户端与服务器端请求和响应不保存状态(借助cookie)请求URIkeep-alive/pipelining请求方法一览方法说明支持HTTP协议GET获取资源1.0/1.1POST传输实体主体1.0/1.1PUT传输文件... 阅读全文
posted @ 2015-07-03 15:56 331415706 阅读(237) 评论(0) 推荐(0)
HTTP_1_Web及网络基础
摘要：HTTP,IP,TCP,DNS 阅读全文
posted @ 2015-07-03 15:46 331415706 阅读(208) 评论(0) 推荐(0)
一个完整的产品设计流程——家庭安全管家
摘要：不管是产品设计，还是前后端开发，始终都应该做出来才能够有很好的提高锻炼。书看得再多，如果不配合实际练习始终得不到实质性的进展。 接下来的案例是和几位学弟学妹一起做的，契机是参加一个用户体验设计比赛，从队伍的搭建，整个想法的提出，后期项目的推进，成品的完善，评委答辩，我都尽力去完成。 付出还是很有收获，整个产品设计流程都是依靠《用户体验要素》的五大架构层来实现。 ... 阅读全文
posted @ 2015-07-02 15:58 331415706 阅读(467) 评论(0) 推荐(0)
用户体验要素——产品系统设计方法
摘要：用户体验已经成为了每个互联网人的口头词，特别是互联网产品经理或产品设计师。 的确，对于任何一个互联网产品而言，体验都是非常重要的。 但是具体的用户体验到底指的是哪些方面，界面，UI，还是交互，其中到底是什么因素决定了一个产品体验的好与坏？而这些因素之间具体是什么的逻辑关系？决定体验好与坏的整体框架是什么？这是我一直想弄明白的事情。 前后读了很... 阅读全文
posted @ 2015-07-02 12:20 331415706 阅读(2361) 评论(0) 推荐(0)