Web前端技术

蔡珉星2014-03-15厦大数据库实验室网站开发网站开发WebWeb前端前端如何快速搭建/开发一个网站实验室网站的改版经历前端介绍前端核心的基础技术前端技术应用解析网站开发网站开发背景知识：疑惑1：网站？网页？网页是单独的，网站是整体的疑惑2：动态？静态？静态网站：不涉及服务器语言（PHP等），直接由HTML页面组成动态网站：通常是从数据库中数据库中读取内容然后输出静态网页：没有用户交互动态网页：通常有Javascript网站开发网站开发几个要点：网站开发：入门容易精通难；搭建一个普通的网站挺容易，门槛很低；如今开发网站，通常会直接应用开源网站框架，或者在此基础上二次开发，而不是从头开发。采用框架省事省力从头开发一个复杂的、可靠的网站需很多人力Web开发应用广泛，即使不是从事该方向，适当的了解也是必须的。网站开发网站开发开源网站框架/系统：优点：免费；可快速搭建网站，样式、功能可扩展，足够应对一般需求；种类多（博客，论坛，CMS），选择多（层出不穷）；常见的开源网站框架博客类：WordPress,EMLog,Z-blog论坛类：Discuz!CMS类：DeDeCMS,PHPCMS缺点：框架漏洞，间接受害；部分需求可能无法满足（功能方面）网站开发网站开发网站搭建流程演示：WordPress&Discuz!网站开发网站开发网站搭建-上线流程：本地进行网站搭建及测试；需要一个服务器/空间；可能需要一个域名；上传程序到服务器。网站开发网站开发低质量网站泛滥：建站门槛低，成本低；CMS“逆天”的功能：采集；类似网络爬虫，获取内容很容易；利益驱使-投放网络广告，流量大就能带来高收益；网站开发网站开发实验室网站改版经历挑战1：网站框架改变(Drupal到WordPress)-数据的迁移数据库的表结构不同；旧框架，内容所涉及的表超过10个，而新框架存放内容的表只有2个;页面URL、图片URL改变。解决：找对应关系编写程序批量读取、转换、导入数据（分多步完成，比较容易实现）获取新旧URL对应，替换数据网站开发网站开发实验室网站改版经历挑战2：网站样式-手机端兼容响应式设计网上的模板不太满意功能方面的定制（相册展示）解决：响应式设计并不难实现框架本身的扩展性良好官方的模板、插件开发文档很齐全网上搜索解决方法网站开发网站开发开源Web开发框架网站系统侧重于直接建站，开发框架则侧重开发降低开发复杂度，提升开发速度网站的一个基本功能-连接数据库，获取数据的原生PHP代码如下：网站开发网站开发开源Web开发框架采用开发框架(ThinkPHP)，相同功能的代码如下：进一步示例：网站开发网站开发开源Web开发框架以MVC架构理解Web开发中的前后端之分：后端产生数据，前端展示数据Model&ControlView网站开发网站开发小结：建站门槛低，有大量的开源网站系统可以直接使用;开发网站很复杂（用网站系统很容易，开发一个就很困难）;自行开发网站时，可以使用Web开发框架，提升效率与质量;用MVC架构的角度理解Web开发的前后端之分.WebWeb前端技术前端技术WebWeb前端技术前端技术Web前端网站的重要组成部分，用户直观感受的地方涉及东西很繁琐，入门容易精通难WebWeb前端技术前端技术背景知识之：一个网页的显示过程1.输入网址，浏览器向服务器发起请求2.服务器接收请求，返回数据（一段HTML代码）3.浏览器接收HTML代码的同时进行渲染4.页面加载、显示完毕浏览器的渲染1.边接收代码边进行渲染；2.服务器只是返回HTML代码，浏览器渲染时会根据代码再向服务器发起请求（图片等资源）；3.很重要的一点：不同浏览器的渲染机制/标准不同，从而导致了不同浏览器下，同一页面的显示可能不同。WebWeb前端技术前端技术前端魅力之CSS(层叠样式表)页面代码跟样式代码分离；无需更改HTML代码，只需更改CSS文件就可以更改样式。WebWeb前端技术前端技术前端魅力之CSS(层叠样式表)同一个页面，引入不同CSS，样式也就大不相同（换肤功能）极致CSSZenGarden()WebWeb前端技术前端技术前端魅力之：响应式设计面临多种屏幕尺寸的兼容挑战，挑战已延伸到手机端；一般方案：判断用户是否使用手机访问，是则输出针对手机的HTML页面。响应式设计方案：同一HTML，同一CSS，不同终端自适应。得益于CSS3的功能：mediaWebWeb前端技术前端技术背景知识：HTML5+CSS3新一代Web标准;HTML5新增了一些标签与功能，便于开发WebAPP;目前智能手机端的浏览器一般采用Webkit内核，支持HTML5+CSS3，基于HTML5标准编写的页面兼容性良好。CSS3也新增了一些功能，原本需要借助图片、Flash、JavaScript才能实现的效果，如今应用CSS3，几行代码就能实现（如文字阴影效果）WebWeb前端技术前端技术前端魅力之：响应式设计通过CSS3的media，可以根据屏幕大小自动匹配样式WebWeb前端技术前端技术前端核心语言：JavaScript跟Java没有关系（雷锋跟雷峰塔）;最早诞生是为了验证用户输入表单数据的正确性；解释性语言（即代码执行时不进行预编译）;只要浏览器带有解析器（都有带），便可在浏览器上运行JavaScript程序。WebWeb前端技术前端技术背景知识：DOM文档对象模型（DocumentObjectModel，DOM）DOM将HTML页面映射成节点树WebWeb前端技术前端技术JavaScript特征基于DOM，JavaScript可以很方便的操作节点（添加、删除、修改）WebWeb前端技术前端技术JavaScript特征事件机制回调WebWeb前端技术前端技术你是否注意到这个：GoogleSuggest如何实现?WebWeb前端技术前端技术Web2.0核心技术：AjaxAsynchronousJavaScriptandXML，异步JavaScript和XML;引领网站架构变革的核心技术;并不是一个全新的语言，而是由多种已有技术组成。描述数据：HTML展示数据：JavaScriptDOM操作、CSS请求数据：XMLHttpRequestobject(XHR)、XML、JSON应用广泛，Web前端必备技能WebWeb前端技术前端技术同步发起请求成功后浏览器会清空当前内容再重定向到一个新的页面异步在当前页面返回数据浏览器不会重定向背景知识之：Web中的同步与异步WebWeb前端技术前端技术Ajax简单的例子WebWeb前端技术前端技术Ajax简单的例子点击按钮后WebWeb前端技术前端技术Ajax优势容易实现无需跳转到新页面即可显示新数据（无刷新，显示速度快）减少数据的传输，减轻服务器压力创意应用Ajax应用场景注册（判断用户名是否可用）登陆加载新内容（翻页）WebWeb前端技术前端技术Ajax应用解析瀑布流式布局起源于Pinterest，参差不齐的布局，会不断加载内容特别适合于图片展示应用广，图片类应用基本都会采用WebWeb前端技术前端技术瀑布流演示WebWeb前端技术前端技术Ajax应用解析瀑布流式布局WebWeb前端技术前端技术Ajax应用解析瀑布流式布局WebWeb前端技术前端技术现在你就大致清楚GoogleSuggest等绝大多数Ajax应用的实现原理了WebWeb前端技术前端技术Ajax应用数据传输JSONJSON(JavaScriptObjectNotation，JavaScript对象表示法)轻量级的数据交换格式，比XML更小、更快Web前后端均支持良好WebWeb前端技术前端技术Ajax应用数据传输JSONJSON的格式-类数组JavaScript原生支持多数编程语言也有相应的函数进行处理json_encode()json_decode()WebWeb前端技术前端技术Ajax应用数据传输JSONQQ空间数据请求示例WebWeb前端技术前端技术JSON的更多应用-数据库应用场景-存储属性，以商品属性为例商品属性多，如果要存到数据库里，如何存储？方案一：方案二：key-value方案三：JSONWebWeb前端技术前端技术JavaScript不只是前端！解释性语言，有解析器就能运行，那如果我们把解析器从浏览器中提取出来，来运行Javascript程序会是怎样？node.jsWebWeb前端技术前端技术node.js专注高性能Web应用，简单的代码就能构建强大的应用;前端、后台均使用JavaScript语言来开发。WebWeb前端技术前端技术关于前端的其他事：前端也有开发框架(jQuery)前端开发资源很多(模板、样式、脚本)，套用很容易套用一些酷炫的效果很容易，开发就不是一回事了前端代码是完全暴露的，copy难度很小小公司一般不会有专门的前端开发，前端人员往往身兼数职WebWeb前端技术前端技术小结：前端涉及方面广，入门容易精通难;创意很重要;Ajax是核心技术，且不难掌握;Web前端资源丰富，但代码难保护前端技术不仅是前端HTML5+CSS3对界面设计的影响;node.js使JavaScript走向Web后端开发;Google推出取代JavaScript的语言Dart;下一个变革？推荐学习网站:Thanks.