More Related Content
Viewers also liked
Similar to Website Pracice Focusing on UX, Chinese
Similar to Website Pracice Focusing on UX, Chinese (20)
Website Pracice Focusing on UX, Chinese
- 1. 互联网——从设计到用户体验 互联网——从设计到用户体验 multiple1902 May 11, 2011 . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 2. 互联网——从设计到用户体验 提纲 1. 基础 语言基础知识 简单的例子 HTML5 分析网页 2. 交互 交互的细节 辅助技术 数据可视化 3. 总结 . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 3. 互联网——从设计到用户体验 基础 语言基础知识 网页和它的源代码 在浏览器中直接浏 览页面结构 . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 4. 互联网——从设计到用户体验 基础 语言基础知识 网页和它的源代码 在浏览器中直接浏 览页面结构 Google Chrome: Ctrl+Shift+C . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 5. 互联网——从设计到用户体验 基础 语言基础知识 网页不只是 HTML . 文本文件 . HTML CSS JavaScript ... . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 6. 互联网——从设计到用户体验 基础 语言基础知识 网页不只是 HTML . . 文本文件 数据文件 . . HTML PNG CSS MP3 JavaScript swf (Flash) ... flv (Flash Video) . ... . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 7. 互联网——从设计到用户体验 基础 简单的例子 最简单的 HTML 文档 . . 代码 解释 . . <head> head 头部 <title>Hello World</title> title 显示出来的标题 </head> 网页主体 . body <body> Hello World </body> . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 8. 互联网——从设计到用户体验 基础 简单的例子 用什么编辑器编写网页? . . 所见即所得编辑器 文本编辑器 . . Adobe DreamWeaver Notepad++ Microsoft Expression Web gVIM ··· ··· 设计师使用较多, 可以自动生成 . 许多界面代码, 但不能迷信 . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 9. 互联网——从设计到用户体验 基础 简单的例子 用什么编辑器编写网页? . . 所见即所得编辑器 文本编辑器 . . Adobe DreamWeaver Notepad++ Microsoft Expression Web gVIM ··· ··· 设计师使用较多, 可以自动生成 传说中的手写代码 . 许多界面代码, 但不能迷信 . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 10. 互联网——从设计到用户体验 基础 简单的例子 HTML 和 CSS . 一段 CSS . body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255);padding: 20px;} . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 11. 互联网——从设计到用户体验 基础 简单的例子 HTML 和 CSS . 一段 CSS . . body {background-color: CSS 的作用 . yellow} CSS(层叠样式表) 用来规 h1 {background-color: 定页面的表现, 用于分离 #00ff00} 数据和表现 . h2 {background-color: transparent} p {background-color: rgb(250,0,255);padding: 20px;} . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 12. 互联网——从设计到用户体验 基础 简单的例子 HTML 和 CSS . 一段 CSS . . body {background-color: CSS 的作用 . yellow} CSS(层叠样式表) 用来规 h1 {background-color: 定页面的表现, 用于分离 #00ff00} 数据和表现 . h2 {background-color: . transparent} 使用 CSS 的好处 . p {background-color: 只需更换 CSS 就能改变 rgb(250,0,255);padding: 网页的外观 . 20px;} . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 13. 互联网——从设计到用户体验 基础 HTML5 下一个版本的 HTML 用于取代 HTML4.01 包含了大量的、语义的标签 <article> <header> <audio> <video> <canvas> 还在修订, 但已经受到广泛支持 广义的概念包含 CSS 和 JavaScript 更 的交互 . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 14. 互联网——从设计到用户体验 基础 分析网页 如何分析一个网页的代码 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 8 <meta name="robots" content="all" /> 9 10 <meta name="author" content="w3school.com.cn" /> 11 <meta name="Copyright" content="Copyright W3school.com.cn All Rights Reserved." /> 12 <meta name="MSSmartTagsPreventParsing" content="true" /> 13 <meta http-equiv="imagetoolbar" content="false" /> 14 15 <link rel="stylesheet" type="text/css" href="/c3.css" /> 建议用浏览器内建的工具 16 17 18 19 <title>CSS 教程</title> </head> Element Inspector / Chrome 20 <body class="html"> 21 22 23 <div id="wrapper"> <div id="header"> Firebug / Firefox 24 <a href="/index.html" title="w3school 在线教程" style="float:left;">w3school 在 25 26 线教程</a> <div id="ad_head"> <script type="text/javascript"><!-- 复杂的网页完整保存较难 27 google_ad_client = "pub-3381531532877742"; /* 728x90, 创建于 08-12-1 */ 找主要架构 28 29 google_ad_slot = "7423315034"; 30 google_ad_width = 728; 31 google_ad_height = 90; 32 //--> 33 34 35 </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 根据特征字符串找关键代码 36 </script> 37 38 39 </div> </div> 可能在外联文件 (如.js 文 件) 中 40 <div id="navfirst"> 41 <ul id="menu"> 42 <li id="h"><a href="/h.asp" title="HTML 系列教程">HTML教程</a></li> 43 <li id="x"><a href="/x.asp" title="XML 系列教程">XML教程</a></li> 44 <li id="b"><a href="/b.asp" title="浏览器脚本系列教程">浏览器脚本</a></li> 45 <li id="s"><a href="/s.asp" title="服务器脚本系列教程">服务器脚本</a></li> 46 <li id="d"><a href="/d.asp" title=".NET (dotnet) 教程">dot net教程</a></li> 47 <li id="m"><a href="/m.asp" title="多媒体系列教程">多媒体教程</a></li> 48 <li id="w"><a href="/w.asp" title="网站构建手册">建站手册</a></li> 49 </ul> 50 </div><div id="navsecond"> . . . . . . 51 52 <div id="course"> 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 15. 互联网——从设计到用户体验 交互 垃圾的交互 . 启示 . 与传统媒体不同, 用 户有更强的主动权 用户找不到要找的内 容, 就会选择离开 要讨好用户, 设计令 人愉快的体验 . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 16. 互联网——从设计到用户体验 交互 交互的细节 可以点击的对象 . 3 种基本方式 . 对象本身的静态视觉启示 动态改变对象的视觉启示 在光标经过对象时改变光标 的视觉启示 . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 17. 互联网——从设计到用户体验 交互 交互的细节 可以点击的对象 . 3 种基本方式 . 对象本身的静态视觉启示 动态改变对象的视觉启示 在光标经过对象时改变光标 . 的视觉启示 启示 . . 使可点击的元素看起来都 是可点击的 . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 18. 互联网——从设计到用户体验 交互 交互的细节 可以撤销的操作 . 启示 . 危险操作执行前要确认 普通操作可以直接执行, 提供撤销功能 . . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 19. 互联网——从设计到用户体验 交互 交互的细节 可以变化的提示 . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 20. 互联网——从设计到用户体验 交互 交互的细节 . 设计原则 . 别 . 让用户思考 . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 21. 互联网——从设计到用户体验 交互 辅助技术 OAuth . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 22. 互联网——从设计到用户体验 交互 辅助技术 AJAX 让网页活起来 一系列技术 1998 年左右诞生; GMail 之后, 广泛使用 更好的体验 . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 23. 互联网——从设计到用户体验 交互 数据可视化 数据可视化是. . . 借助图形化手段，更高效和清晰地交流信息 . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902
- 24. 互联网——从设计到用户体验 总结 相关链接 W3School.com.cn 网页设计教程 http://www.w3school.com.cn 西乔的九卦 http://blog.xiqiao.info HTML5Rocks http://slides.html5rocks.com 数据之美系列 http://is.gd/RRjwJB . . . . . . 互联网——从设计到用户体验 http://twitter.com/multiple1902