浅谈Web自适应】的更多相关文章

前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置.移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样.这给我们在编写前端界面时增加了困难,适配问题在当下显得越来越突出.记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图,结果可想而知.本篇博文分享一些卤煮处理多屏幕自适应的经验,希望有益于诸君. 特别说明:在开始这一切之前,请开发移动界面的工程师们在头部加上下面这条meta: 简单事情简单做-宽度自适应 所谓宽度自适应严格来…
浅谈web网站架构演变过程   前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理 阶段一.单机构建网站 网站的初期,我们经常会在单机上跑我们所有的程序和软件.此时我们使用一个容器,如tomcat.jetty.jboos,然后直接使用JSP/servlet技术,或者使用一些开源的框架如maven+spring+struct+hibernate.mave…
1.熟悉几个组件 1.1.apache     —— 它是Apache软件基金会的一个开放源代码的跨平台的网页服务器,属于老牌的web服务器了,支持基于Ip或者域名的虚拟主机,支持代理服务器,支持安 全Socket层(SSL)等等,目前互联网主要使用它做静态资源服务器,也可以做代理服务器转发请求(如:图片链等),结合tomcat等 servlet容器处理jsp.1.2.ngnix     —— 俄罗斯人开发的一个高性能的 HTTP和反向代理服务器.由于Nginx 超越 Apache 的高性能和稳…
[原创]浅谈Web UI自动化测试 Web UI自动化测试相信大家都不陌生,今天来谈谈这个,我最早接触自动化测试时大约是在2004年,2006年当时在腾讯财付通算是开始正式接触自动化测试,之所以是正式是因为确确实实一个项目开始去做自动化测试,由于公司当时有个内部研发项目,类似目前的“58同城”之类网站,不过最终由于各种原因,这个项目停掉了,可以看出腾讯内部其实在创新这块,有很多好的创新应用,但好多没做起来,也许是天时,地利,人和各种情况没有发生“共振”,造成了很多产品流产,也挺心痛的. 今天我们…
浅谈|WEB 服务器 -- Caddy 2018年03月28日 12:38:00 yori_chen 阅读数:1490 标签: caddyserverwebhttps反向代理 更多 个人分类: server   Caddy Caddy服务器(或称Caddy Web)是一个开源的,使用 Go 编写,支持 HTTP/2 的 Web 服务端,说到Web 服务器,我们大多想到的是 Apache 和 Nginx,在拥有了强大的 Nginx 以后我们为什么还需要 Caddy? 官网:https://cadd…
随着移动端市场的强势崛起,web的开发也变得愈发复杂,对于个体开发者来说,自己开发的网站,在电脑.手机.Pad等上面都要有正常的显示以及良好的用户体验.如果每次都要自己去调整网页去匹配各个不同的客户端设备,这个工作量可想而知.如果网站可以自适应浏览器大小,对于开发者来说,无疑是天大的福音.今天,我通过自己的实践,简单的探探boostrap的自适应功能,这也是众多平台中,我认为比较好的一个. Boostrap是什么 Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了…
用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说道理,更能彰显主人家的身份地位.由此可见,“门面’就如人的脸面之于人的形象一样重要,而WEB的登录页面就相当传统的“门面”. 现在越来越多的大型网站把登录和首页放在一起设计,由此可见登录页面的重要性,一个出彩的登录界面,将提升产品的品质,赋予产品独特的气质,登录界面也是一个发挥情感化设计,提升用户体…
用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说道理,更能彰显主人家的身份地位.由此可见,“门面’就如人的脸面之于人的形象一样重要,而 WEB 的登录页面就相当传统的“门面”. 现在越来越多的大型网站把登录和首页放在一起设计,由此可见登录页面的重要性,一个出彩的登录界面,将提升产品的品质,赋予产品独特的气质,登录界面也是一个发挥情感化设计,提升用…
前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此文,为了自己备忘也好,为了还没用上前端模板引擎的同学的入门也好.(熟悉模板引擎的可以帮楼主看看文中有没有 BUG ..) 后端 MVC 说起模板渲染,楼主首先接触的其实并不是前端模板引擎,而是后端.后端 MVC 模式中,一般从 Model 层中读取数据,然后将数据传到 View 层渲染(渲染成 HT…
重审业务逻辑 用过MVC的童鞋都知道业务逻辑(Bussiness Logic),但是大多对这概念又是模棱两可,业务逻辑从来都是这样难以理解,谈论前后端分离之前这个概念非常有必要探讨一下! 在简单的CRUD的系统中,基本上都是对数据进行增删改查操作,并没有多少业务逻辑可言:但像银行系统对金融数据的操作就显得不那么简单了,以转账为例:A给B转帐转100元,简易代码如下: if(A.balance - 100 >= 0){ A.balance -100; B.balance +100; }else{…
相信进来的时候你已经看到alert弹窗,显示的是你cookie信息(为配合博客园要求已删除).单纯地在你的客户端弹出信息只是类似于迫使你在自己的房间脱衣服——没人看得到,自然也不算啥恶意行为.那么如果我把你的信息通过脚本发送到我的服务器保存起来呢?先放心,我不打算这么做,也没那笔闲钱去购置一个服务器来做羞羞的事情,也不希望博客园把我这地盘给封掉了. 如同标题所写的,今天要聊的是WEB安全机制,但这“前端”二字倒是说的狭义了些,安全的问题大部分还是更依赖于后端的过滤和拦截措施,后端的朋友如果感兴趣…
单纯地在你的客户端弹出信息只是类似于迫使你在自己的房间脱衣服--没人看得到,自然也不算啥恶意行为.那么如果我把你的信息通过脚本发送到我的服务器保存起来呢?先放心,我不打算这么做,也没那笔闲钱去购置一个服务器来做羞羞的事情,也不希望把我这地盘给封掉了. 如同标题所写的,今天要聊的是WEB安全机制,但这"前端"二字倒是说的狭义了些,安全的问题大部分还是更依赖于后端的过滤和拦截措施,后端的朋友如果感兴趣,看一看也无妨. 先不说上面的"通过脚本把信息发送给服务器"是什么情况…
自然是有很大意义的.下面我可能说的比较多--方便题主能够更全面的了解为什么说是有有意义的.另外,本文是以Java的角度谈前后端分离.放心,大家一定会有种是我了,没错,的感觉. 一.先来明晰下概念 前后端分离是通过Ngnix+Tomcat的方式(也可以中间加一个Node.js)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端化服务(多种客户端,例如:浏览器,车载终端,安卓,iOS等等)打下坚实的基础.这个步骤是系统架构从猿进化成人的必经之路. 它的核心思想是前…
CSRF 跨站请求伪造(Cross-Site Request Forgery) -原理- 从上图可以看出,要完成一次CSRF攻击,受害者必须依次完成两个步骤: 1.登录受信任网站A,并在本地生成Cookie. 2.在不登出A的情况下,访问危险网站B. 看到这里,你也许会说:“如果我不满足以上两个条件中的一个,我就不会受到CSRF的攻击”.是的,确实如此,但你不能保证以下情况不会发生: 1.你不能保证你登录了一个网站后,不再打开一个tab页面并访问另外的网站. 2.你不能保证你关闭浏览器了后,你本…
在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所说,div+css的确能实现一切效果,用户体验也棒棒哒. 但,请明白div是没有语义的,我们是能看懂,但是搜索引擎呢?我们呈现出来的网页是需要计算机连接互联网传达给别人,而负责中转的计算机不可能像人一样去看网页的内容,所以我们需要语义化. 例如我想加粗一个字体,我们可以有以下几种写法 1.  css…
前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理 阶段一.单机构建网站 网站的初期,我们经常会在单机上跑我们所有的程序和软件.此时我们使用一个容器,如tomcat.jetty.jboos,然后直接使用JSP/servlet技术,或者使用一些开源的框架如maven+spring+struct+hibernate.maven+spring+springm…
在前端开发中性能一直都是被大家所重视的一点,然后判断一个网站的性能最直观的就是看网页打开的速度. 其中提高网页反应的速度的一个方式就是使用缓存.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,减低网络负荷.那么我们就来看看服务器端缓存的原理. Web缓存分为很多种,比如数据库缓存,代理服务器缓存.对于太多文字的阅读其实我们是拒绝的,于是就画了个图来解释下.浏览器通过代理服务器向源服务器发起请求的原理如下图, 浏览器先向代理服务器发起web请求…
初级前端 主要学习三个部分:HTML,CSS,JavaScript 一.html + css部分: 这部分特别简单,到网上搜资料,书籍视频非常多.css中盒子模型,流动,block,inline,层叠,样式优先级等这些自学起来也是非常容易.最后再深入了解下浏览器差异性,ie9以下兼容简单了解就行了,ie9以下浏览器被淘汰掉是趋势,低版本没必要浪费大量时间去学习兼容主流浏览器,google chrome浏览器.firefox浏览器.safari浏览器.opera浏览器即可.浏览器差异内容很多,建议…
最近接手的一个项目中,涉及到一个简单的消息模块,由于之前有简单了解过SignalR,所以打算尝试着摸索摸索~! 首先,通过Nuget管理器添加Microsoft ASP.NET SignalR引用~目前最新版本2.2.0,依赖项目也有点多,什么Microsoft.AspNet.SignalR.JS,Microsoft.AspNet.SignalR.SystemWeb,还有Owin相关的项目,没法咯,一起统一引用! 添加启动设置 [assembly: OwinStartup(typeof(Sign…
WEB前端研发工程师,在国内算是一个朝阳职业,这个领域没有学校的正轨教育,大多数人都是靠本人自学成才.本文次要引见本人从事web开发以来(从大二至今)看过的书籍和本人的成长过程,目的是给想了解JavaScript或者是刚接触JavaScript的朋友,引见如何通过按部就班的看书来学习javascript. 一. 入门级 :就是有一定的基础(比如最常见的HTML标签及其属性.事件.方法;最常见的CSS属性;基础的JavaScript编程能力),能够完成一些简单的WEB前端需求. 推荐:<JavaS…
前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理 阶段一.单机构建网站 网站的初期,我们经常会在单机上跑我们所有的程序和软件.此时我们使用一个容器,如tomcat.jetty.jboos,然后直接使用JSP/servlet技术,或者使用一些开源的框架如maven+spring+struct+hibernate.maven+spring+springm…
想聊一聊流量控制,谈谈的重要性,解决了哪些业务问题,那我们问题来进入正题.   1.WEB容器如何流量控制?   一个Tomcat的容器,这个容器呢,部署在一台服务器上面,同时这台服务器的资源非常非常有限,这台服务器只能同时让500个请求访问,若是多余500个的话,这样服务器的资源就会打满,那么我们肯定需要想办法这些问题的.Tomcat本身就有这样的机制,因为每一个请求过来后,tomcat会为这个请求分配一个处理线程,所以tomcat就是来控制处理线程的数量. server.xml <Conne…
我自己用过的WEB编辑器有两种:HBuilder和Dreamweaver.这两种编辑器各有各的特点,但是相对来说,我倾向于前者:后者给我的感觉就是功能繁杂,运行起来慢,而且编码的便捷度不高,时不时需要鼠标的搭配使用,所以在这里我仅发表个人对于HBuilder的看法. 1.人性化 抛开代码的编写效率,我觉得这软件的一大特色就是照顾了我们程序员的心灵之窗--眼睛.每天坐在电脑前一坐就是一天,而几乎大部分时间都是盯着电脑屏幕,所以屏幕的色彩搭配很关键.我通常在编码时喜欢用黑色风格,主要是自己也不会搭配…
本书是介绍怎么编写一个Web服务器,而Web服务器是基于HTTP(HyperText Transfer Protocol)协议实现的,所以要实现一个Web服务器就必须了解HTTP协议,本章主要介绍HTTP协议的相关知识,让我们对HTTP协议有个理性的认识.1.1 HTTP协议简介我们日常生活中经常会使用浏览器访问Web站点,但是大家有思考过在这个过程中到底发生了什么吗?为什么我们在浏览器地址栏上面输入要访问的URL后就可以访问到Web页面呢?浏览器与Web服务器使用HTTP协议进行通信,那么什么…
初级前端 主要学习三个部分:HTML,CSS,JavaScript 一.html + css部分: 这部分特别简单,到网上搜资料,书籍视频非常多.css中盒子模型,流动,block,inline,层叠,样式优先级等这些自学起来也是非常容易.最后再深入了解下浏览器差异性,ie9以下兼容简单了解就行了,ie9以下浏览器被淘汰掉是趋势,低版本没必要浪费大量时间去学习兼容主流浏览器,google chrome浏览器.firefox浏览器.safari浏览器.opera浏览器即可.浏览器差异内容很多,建议…
前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理 阶段一.单机构建网站 网站的初期,我们经常会在单机上跑我们所有的程序和软件.此时我们使用一个容器,如tomcat.jetty.jboos,然后直接使用JSP/servlet技术,或者使用一些开源的框架如maven+spring+struct+hibernate.maven+spring+springm…
1Web服务器和应用服务器简介 通俗的讲,Web服务器传送页面使浏览器可以浏览,然而应用程序服务器提供的是客户端应用程序可以调用(call)的方法(methods).确切一点,你可以说:Web服务器专门处理HTTP请求(request),但是应用程序服务器是通过很多协议来为应用程序提供(serves)商业逻辑(business logic). 1.应用服务器处理业务逻辑,web服务器则主要是让客户可以通过浏览器进行访问. 2.应用服务器处理业务逻辑,web服务器是用于处理HTML文件的.web服…
一 Cookie: 1. Cookie翻译为小甜饼,有一种特殊的味道.cookie主要用来在(浏览器)客户端做记号用的.Cookie不属于java,Cookie是一种通用的机制,属于HTTP协议的一部分,也就是说PHP开发都会涉及到Cookie. 2. Cookie在web开发中的作用是什么呢?存储在什么地方,使用Cookie实现的经典案例有哪些? * web开发中的作用是:将回话的状态保存在浏览器客户端上.(原因:HTTP协议是无状态无连接的,必须有一种机制来保持会话的正常进行) * Cook…
在前端开发中,性能一直都是被大家所重视的一点,然而判断一个网站的性能最直观的就是看网页打开的速度.其中提高网页反应速度的一个方式就是使用缓存.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷.那么下面我们就来看看服务器端缓存的原理. 缓存分类 web缓存分为很多种,比如数据库缓存.代理服务器缓存.还有我们熟悉的CDN缓存,以及浏览器缓存.对于太多文字的阅读其实我是拒绝的,于是就画了个图来解释下. 浏览器通过代理服务器向源服务器发起…
这是一篇知识性的文档,主要目的是为了让Web缓存相关概念更容易被开发者理解并应用于实际的应用环境中.为了简要起见,某些实现方面的细节被简化或省略了.如果你更关心细节实现则完全不必耐心看完本文,后面参考文档和更多深入阅读部分可能是你更需要的内容. 什么是Web缓存,为什么要使用它? 缓存的类型: 浏览器缓存: 代理服务器缓存: Web缓存无害吗?为什么要鼓励缓存? Web缓存如何工作: 如何控制(控制不)缓存: HTML Meta标签 vs. HTTP头信息: Pragma HTTP头信息(为什么…