如何修正DIV float之后导致的外部容器不能撑开的问题

      如何修正DIV float之后导致的外部容器不能撑开的问题

      在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:

      HTML4STRICT代码:

          1. <div style="width:200px;border:1px solid red;">

          2. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

          3. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

          4. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

          5. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

          6. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

          7. </div>

                显示的结果如下:

                P_1160709253_0.gif

                容器DIV没有被撑开

                大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。

                我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?

                以前我都是用这样的方法来解决:

                HTML4STRICT代码:

                  1. <div style="width:200px;border:1px solid red;">

                  2. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  3. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  4. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  5. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  6. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  7. <div style="clear:both;"></div>

                  8. </div>

                  显示的结果如下:

                  P_1160709321_0.gif

                  显示正常了

                  我们看到,在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV:<div style="clear:both"></div>  。这样,其实就在最后增加了clear的动作。

                  但是,我总觉得,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,我一直在寻找更好的解决办法。

                  昨天在无数次的询问了Google大仙后,我终于找到了How To Clear Floats Without Structural Markup 这篇文章,找到了解决的办法。

                  首先设置这样的CSS:

                  CSS代码:

                  1. .clearfix:after {

                  2. content: ".";

                  3. display: block;

                  4. height: 0;

                  5. clear: both;

                  6. visibility: hidden;

                  7. }

                  然后,我们再修改原来的HTML代码,让外部的容器DIV来使用这个CSS:

                  HTML4STRICT代码:

                  1. <div style="width:200px;border:1px solid red;" class="clearfix">

                  2. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  3. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  4. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  5. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  6. <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

                  7. </div>

                  在 Firefox里测试一下,哈哈,这样做的确很有效,显示正常,而且dojo的 Drag & Drop 也不会有问题了。原来,这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。

                  但是,在文章中说,Windows IE并不支持这样做。所以要让IE也完美显示,则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下:

                  CSS代码:

                  1. .clearfix:after {

                  2. content: ".";

                  3. display: block;

                  4. height: 0;

                  5. clear: both;

                  6. visibility: hidden;

                  7. }

                  8. /* Hides from IE-mac \*/

                  9. * html .clearfix {height: 1%;}

                  10. /* End hide from IE-mac */

                  因为转义字符"\",Mac IE浏览器会忽略掉这段Hack,但Windows IE不会,它会应用 * html .clearfix {height: 1%;} 来达到撑开DIV容器的目的(貌似Mac IE没有办法解决这个问题,不过幸好用户数量是在是太少了,Safari支持就可以了:p)。

                  测试一下,果然大功告成。

                  P_1160709321_0.gif

                  Continue reading 如何修正DIV float之后导致的外部容器不能撑开的问题

                  css3-jqeury

                  css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果,但是目前支持css3的浏览器少之又少,往往了实现圆角效果要去写一堆代码,下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。

                     在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。

                  1.多重背景

                  #backgrounds-box {
                  background: url(top-backgroundg.png) top left no-repeat,
                  url(bottom-backgroundg.png) bottombottom left no-repeat,
                  url(middle -backgroundg.png) left repeat-y;
                  padding: 35px;
                  }

                  2.文字阴影

                  b { text-shadow:  5px 5px 5px #666666; }

                  3.圆角

                  #rounded-corners-box {
                  -moz-border-radius-topleft: 8px;
                  -moz-border-radius-topright: 8px;
                  -moz-border-radius-bottomright: 8px;
                  -moz-border-radius-bottomleft: 8px;
                  -webkit-border-top-left-radius: 8px;
                  -webkit-border-top-rightright-radius: 8px;
                  -webkit-border-bottom-left-radius: 8px;
                  -webkit-border-bottom-rightright-radius: 8px;
                  }

                  4.透明效果

                  .div-name { background: #333333; opacity:0.8; width: 380px; height:70px; }

                  下面来看看jQuery插件实现css3效果的插件:

                  jQuery Corners 0.3

                  http://malsup.com/jquery/corner/

                  轻松地实现漂亮的圆角,无需额外的标签或图片。支持 iPhone.、Chrome、Firefox、Safari 2+、 Opera 9.0+、Internet Explorer 6+。

                  jQuery Corners 0.3

                  jQuery Canvas Rounded Corners

                  通过canvas 实现圆角的jQuery插件,支持IE7、FF。

                  jQuery Canvas Rounded Corners

                  How To  Border Image with CSS3 and jQuery

                  CSS3 draft 介绍灰墙强大的图片边框技术。

                  How To Border Image with CSS3 and jQuery

                  How To CSS Multiple Backgrounds / Background Layering with jQuery

                  实现多重图片背景的这个插件可以极大地减少xhtml标签,精简你的代码,多重背景的概念类似于PS的图层,一个图层叠在另一个图层上面。

                  How To CSS Multiple Backgrounds / Background Layering with jQuery

                  How To Drop Shadow with jQuery

                  为页面上的文字和透明图片添加柔和和阴影效果。

                  drop-shadow

                  How To Text-shadow in Internet Explorer using jQuery

                  这个教程会教你如何在IE中轻松实现文字阴影效果。

                  How To Text-shadow in Internet Explorer using jQuery

                  How To Element Gradient with jquery

                  允许你自定义元素的填充渐变效果,支持指定渐变的方向。

                  How To Element Gradient with jquery

                  How to Rounded Corners in jQuery

                  一个简易的用jQuery实现圆角的教程。

                  How to Rounded Corners in jQuery

                  CSS3 Template Layout realized with jQuery

                  实现CSS3布局。

                  CSS3 Template Layout realized with jQuery

                  Creating a polaroid photo viewer with CSS3 and jQuery

                  结合CSS3的 Box Shadow 属性Rotate 实现拖动图片过程中的阴影效果。

                  Creating a polaroid photo viewer with CSS3 and jQuery

                  jSlickmenu: A jQuery plugin for slick CSS3 menus

                  jSlickmenu通过类似CSS3的rotation 和shadows属性现非常酷的菜单效果。

                  Super slick jQuery menu with CSS3

                  Continue reading css3-jqeury

                  p3p 跨域

                  p3p 跨域

                  最近因为工作需要写了个msn机器,发现xiaoi机器的活动页面是使用frame来加载用户页面,于是会导致cookie,session,js,等权限问题。
                  1、cookie,session的权限问题,解决方案一:可以通过添加P3P header解决,如:Response.AddHeader("P3P", "CP=CAO PSA OUR");,也可在IIS里面直接设置。//很好
                  2、如有页面中还有frame,就会报禁止访问。
                  终极方案:添加一个跳转页面,页面只需一个js:
                    window.top.location = "your url";//这一条行不通,跨域访问仍然会报错,top则造成在msn外面打开了新窗口,莫名其妙。
                  这样,就不会存在任何权限问题。
                  =====================================================================================================
                  sohu实现-单点登录:

                  跨域(cross-domain)访问 cookie (读取和设置)

                  由 qyb 于 星期四, 2006-11-16 21:41 发表

                  Passport 一方面意味着用一个帐号可以在不同服务里登录,另一方面就是在一个服务里面登录后可以无障碍的漫游到其他服务里面去。坦白说,目前 sohu passport 在这一点实现的很烂(不过俺的工作就是要把它做好啦,hehe)

                  搜狐的 SSO 需求比较麻烦,因为它旗下有好多域名:sohu.com、chinaren.com、sogou.com、focus.cn、17173.com、go2map.com,登录用户漫游的主要障碍也来自于此。

                  以前亿邮的邮件系统在和别的系统整合的时候是提供一个 URL,用户从第三方系统里面点击这个链接就可以生成访问邮件界面所需的 cookie,然后进入邮件。这个方式的确很有效,但问题是:
                  1. 每个外部链接都必须用特殊的 URL 跳转,维护很麻烦
                  2. 两个系统集成已经很麻烦了,若是集成的系统有好几个,彼此都需要跳转而缺乏一个中心机制就成了噩梦
                  3. 根本无法处理用户直接在地址栏输入地址进行访问的情况

                  即使是跨域,上述的解决方法相对来说还是容易的。
                  A. 首先是所有登录必须首先通过一个中央服务器进行认证,然后在它那里给浏览器种下 cookie(下面称之为 sso cookie)
                  B. 当用户访问另外的域名 app 的时候,浏览器是无法直接发送 sso cookie 给服务器认证的。此时应该利用 javascript,动态创建一个隐藏的 iframe,让其访问 sso
                  C. 这个 iframe 的请求是可以把 sso cookie 送给 sso server 的。sso server 验证 cookie 后,返回一个重定向页面到 app 的某个 URL,由该 URL 设置 app cookie
                  D. 此时浏览器上可看见的页面容器实际上也是可以和重定向回来的内容交互的。比如可以用 js 控制发现重定向页面成功返回后,就刷新整个页面,让它看起来和用户登录后访问没有什么区别。

                  下面是真正的技巧:怎样才能在 IE 里面跨域去设置 cookie
                  上述技术看起来是不是很好?但它的前提是所有的登录都 post 到 sso server 上,认证成功后再返回 app 页面。可我接受到的需求之一就是要支持页面无刷新登录。

                  哈!就是说本来在 chinaren.com 上提交登录表单的 action 应该是 passport.sohu.com 这个 sso server。可是在 AJAX 大潮下,chinaren 计划采用 XMLHTTPRequest 提交,这个就麻烦了,因为是不能跨域来提交的。

                  那么解决方法就是跨域产生 cookie,即 js 发现口令校验成功后,再在 passport.sohu.com 上种上合法的 cookie.

                  套用上面的跨域读 cookie 的方案似乎很简单去推论:就是创建一个隐含的 iframe,让那个 iframe 去调用 passport.sohu.com 的 URL 来产生 cookie。很遗憾,此方法在 Fx 下工作的很好,但是不能在 IE 上应用。(在 IE 状态栏上显示 cookie 隐私警告,红色圆底白横杠)

                  我试了很多很多方法,包括创建 、 node,包括用 js 设置,但都一次次被 IE 无情的挡在了浏览器外。google 之,也没有任何真正可用的答案,中文网页要么介绍的方法是错的,要么说无解。

                  最后还是在 chinaren 一哥们的帮助下,翻出了他们所使用的,以和 alumni.sohu.com 交互的方法(不知道是哪位牛人发现的),只需要设置 P3P HTTP Header,在隐含 iframe 里面跨域设置 cookie 就可以成功。他们所用的内容是:

                  P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"

                  最后是我做的一个小小的演示:cookie 怎么在 vmx.cn 和 dup2.net 之间交互

                  1. http://qiuyingbo.test.vmx.cn/cookie.php

                  2. 随便输入什么,点 reset cookie,就可以看到 vmx.cn 的 cookie 已经被设上了

                  3. 在该页面点连接到 http://www.dup2.net/vmx/cookie.html

                  4. 点"get corss-domain cookie" .. (此时 js 会去创建一个iframe,请求 qiuyingbo.test.vmx.cn ,返回页面把 cookie 值作为 GET 参数重定向回 dup2.net 的另外一个URL。)

                  5. 点 "display corss-domain cookie" .. 就可以看到 vmx.cn 的 cookie 了

                  6. 在该页面的输入框中输入其它的值,然后点 "set cross-domain cookie",该行为将主动设置 vmx.cn 的 cookie

                  7. 点链接回到 http://qiuyingbo.test.vmx.cn/cookie.php ,就可以看到新的值了

                  ==============================================================================================================================

                  作者:老王

                  说使用P3P可以完成跨域COOKIE操作,感觉很COOL,不过没有提供源代码,我胡乱写了一下,大家看看。

                  实际工作中,类似这样的要求很多,比如说,我们有两个域名,我们想实现在一个域名登录后,能自动完成另一个域名的登录,也就是PASSPORT的功能。

                  我只写一个大概,为了测试的方便,先编辑hosts文件,加入测试域名(C:\WINDOWS\system32\drivers\etc\hosts)

                  127.0.0.1       www.a.com
                  127.0.0.1       www.b.com

                  首先:创建 a_setcookie.php 文件,内容如下:

                  <?php 
                  //header('P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"'); 
                  setcookie("test"
                  , $_GET['id'], time()+3600, "/", ".a.com"); 
                  ?>

                  然后:创建 a_getcookie.php 文件,内容如下:

                  <?php 
                  var_dump($_COOKIE
                  ); 
                  ?>

                  最后:创建 b_setcookie.php 文件,内容如下:

                  <script src="http://www.a.com/a_setcookie.php?id=www.b.com"></script>

                  ----------------------------

                  三个文件创建完毕后,我们通过浏览器依次访问:

                  http://www.b.com/b_setcookie.php
                  http://www.a.com/a_getcookie.php

                  我们会发现,在访问b.com域的时候,我们并没有在a.com域设置上cookie值。

                  然后我们修改一下a_setcookie.php文件,去掉注释符号,a_setcookie.php即为:

                  <?php  
                  header('P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"');  
                  setcookie("test", $_GET['id'], time()+3600, "/", ".a.com");  
                  ?>

                  再次通过浏览器依次访问:

                  http://www.b.com/b_setcookie.php
                  http://www.a.com/a_getcookie.php

                  这次,你会发现在访问b.com域的时候,我们设置了a.com域的cookie值。

                  末了补充一句,似乎只有IE对跨域访问COOKIE限制比较严格,上述代码在FIREFOX下测试,即使不发送P3P头信息,也能成功。不过IE是老大啊。

                  参考文档:http://www.w3.org/P3P/

                  p3p介绍:

                  http://www.yxl.cn/Info/20060302,212041,5095.html

                  这里水很深……

                  Continue reading p3p 跨域

                  wicket与jsf/seam比较

                  wicket与jsf/seam比较

                  原文:

                  http://swik.net/Peter-Thomas/Incremental+Operations/Seam+%2F+JSF+vs+Wicket:+performance+comparison/cp1je

                  Seam / JSF vs Wicket: performance comparison

                  Your tags: or Cancel

                  Tags Applied to this Entry

                  No one has tagged this page.

                  Tag this Entry | Tagging Details

                  created on 20 Jan 2009, by Syndication, read more…

                  A while after Seam support for Apache Wicket was announced, I downloaded Seam and took a look at the Wicket example. Then an idea struck – how about doing a performance comparison – I mean, here was the very same application implemented in JSF and Wicket – right? So I decided to write a JMeter script for both the JSF and Wicket versions of the Seam “hotel booking” example and compare results. I started right away but very soon got tired of waiting for app-server re-starts on my trusty laptop (Jetty has really spoiled me) – and it kind of bothered me that the Seam examples were not in Maven 2 layout. Anyway, at some point I decided to re-write an “EJB-free” version of the Seam booking example using just Wicket and JPA. And use Maven and Jetty. And… one thing led to another – and what I ended up doing is this:

                  • Adapted the Seam JPA example (the one that does not use EJB) as the baseline application. Converted it into a Maven 2 WAR project which can run on Jetty.
                  • Implemented what I hope is the exact equivalent of the above using only Wicket and JPA, also Maven-ized and Jetty-fied. Decided to also experiment with some of the ideas in this blog post.
                  • Wrote a JMeter script for both applications taking care to exercise identical functionality.
                  • Used an Ant script to run the JMeter scripts in batch mode (passing number of concurrent users as a parameter) and start / stop Jetty in sync.
                  • Automated the entire cycle of running the load test for 1, 5, 10, 15 and 20 concurrent users including some code to parse the JMeter logs and generate a CSV file of tabular results.
                  • Also included an Ant target that takes a JVM heap dump at the end of the load test – just before the users are logged out and the HTTP sessions killed.

                  I was able to re-use the official Seam Wicket example to some extent, mainly the HTML files – but the Java side is almost completely re-written. The Seam booking example covers quite a bit of ground from the framework comparison point of view – for example:

                  • Security – some pages are secured and redirect to a login page
                  • Templating – some pages inherit from a common layout with a header / footer defined
                  • Ajax
                    • hotel search results refresh as you type and a “busy” image is shown during the Ajax request
                    • form field validations occur as soon as the field loses focus
                  • Session scope – some state is stored and retrieved in the session
                  • Page navigation / state
                    • user navigation state transparently managed by the framework
                    • user should be able to work in multiple concurrent conversations (browser tabs)
                    • the browser back button should work as expected
                  • JPA – getting access to the entity manager and transaction management
                  • Forms – binding, validation and displaying error / info feedback to the user
                  • Hibernate Validator – annotations on the JPA entity classes are re-used for form-validation

                  Both sides use the exact same entities, persistence.xml and initial HSQLDB import. I’m using the latest Seam 2.1.1-GA and Wicket 1.3.5. Disclaimer: my Wicket code may not be ideal, and I’ve also experimented with a custom RequestCycle for JPA and tried to use inherited models as far as possible. Instructions on how you can download the source and run the scripts on your local machine are at the end of this blog post.

                  I may do some follow up blog posts on how the code compares between the Seam / JSF and Wicket implementations, and also share some tips on writing JMeter scripts and automation using Jetty, Ant etc. I’m also expecting to have to make corrections and changes to the code based on feedback. For now, I’ll summarize my observations on performance and memory usage.

                  Performance:
                  In the JMeter script, except for the login and logout (first two rows and last row), the actions are executed in a loop ten times for each concurrent user. So if the number of concurrent users is 20, the login and logout actions happen 20 times and the rest 20 x 10 times. The numbers below are average page response time in milliseconds.

                  performance2

                  Wicket appears to be faster by a wide margin. For two pages (“ajax post search” and “post confirm booking”) the results are a bit closer. This can possibly be explained by the fact that these particular actions display the results from a relatively expensive database query. My amateur profiling attempts suggest that the database query is taking most of the time here.

                  One thing I have to mention: the “cc number” and “cc name” requests are simulations of the Ajax validations of the credit card number and name fields on the booking form. For these particular requests on the JSF side, the entire form is being POST-ed instead of just the value of the form field being validated when the user tabs out (onblur). So the difference here is quite dramatic. I did try adding ajaxSingle=”true” in the JSF view but it did not appear to work (I used HttpFox while building the JMeter scripts). I can re-post the updated results if someone lets me know what changes need to be made to “book.xhtml” to get the Ajax validation to work as expected.

                  Memory Usage:
                  The JMeter script can be told to skip the logout page and I wired up one of the Ant targets to take a JVM heap dump / snapshot as soon as the JMeter script completes. So I can compare what the heap looks like just after a load test when all the concurrent HTTP sessions are alive.

                  I’m very much a NetBeans user but I have to say that the Eclipse Memory Analyzer is far better than what the built-in NetBeans Profiler offers for looking at JVM heap dumps. Here are some side-by-side screenshots of the heap analysis after running the JMeter script for 20 concurrent users.

                  “Top Consumers” report below showing the classes that dominate memory usage:

                  top-consumers2

                  The “dominator tree” report below is very useful to see which objects hold on to the most memory directly as well as indirectly. The column headings after “Class name” are Shallow Heap, Retained Heap and Percentage. Shallow Heap means the memory consumed by a single object and Retained Heap is the sum of shallow sizes of all objects that will be garbage collected if the given object is garbage collected.

                  dominator-tree

                  Looking at the above two reports we can infer that on the Seam / JSF side, the 20 sessions each take up about 800 KB adding up to around 16 MB total. On the Wicket side the 20 sessions add up to around 1.5 MB. On the Wicket side it is the DiskPageStore that appears to hold the most memory and we can see what is going on here after drilling down a little:

                  diskpagestore2

                  The Wicket DiskPageStore uses SoftReference-s to serialized pages so the memory will be reclaimed by the JVM if needed. And the SerializedPageWithSession holds a WeakReference to the actual page instance (MainPage). You can also spot the byte-array which is the result of page serialization. If a serialized page is requested (perhaps the user hit the browser back-button) and the page is no longer in memory because the SoftReference has been GC-ed – it will be restored from the temp file that the DiskPageStore has been saving pages to.

                  I’m totally impressed by the Eclipse Memory Analyzer. Here we can see the break-up of the contents of the largest HTTP session on both sides. I think we can safely blame JSF for the lion’s share of memory usage on the left:

                  session-dominators

                  Finally, a summary of the heap-dump comparison (for 20 users) collated from the various reports:

                  heap-summary

                  Instructions:

                  Prerequisites:

                  • JDK 1.5 or greater installed
                  • Apache Ant installed
                  • JMeter 2.X available unzipped somewhere (better use latest 2.3.2)

                  Steps:

                  • Do a Subversion check out of the source from here: http://perfbench.googlecode.com/svn/trunk/perfbench/
                  • Create a perfbench/build.properties file that points to your JMeter installation. You can look at the comment in perfbench/build.xml for an example.
                  • Open a command prompt, change directory to perfbench/seam-jpa
                  • If running for the first time, use the command “ant jmeter-cycle”. The build script would prompt for the number of threads, so enter “1”. It may take time for all the required JAR files to get downloaded. Once you see Jetty start and stop successfully, you should be all set to run the actual benchmark.
                  • To start the benchmark run “ant jmeter-cycle-full”. This should take 2 – 3 minutes to run a series of tests for 1, 5, 10, 15 and 20 concurrent users. Results will be dumped into perfbench/target. You can look at the *.csv file at the end for the results.
                  • You can also run a load test which saves a snapshot of the heap dump towards the end by running “ant jmeter-cycle-heapdump”.
                  • Repeat the previous 3 steps after changing working directory to perfbench/wicket-jpa

                  Update: perfbench/build.xml starts Jetty with JVM options “-Xms64m -Xmx64m” and you may need to change this if you want to experiment with more concurrent users.

                   

                  我说,这两个都不行啊,别怪我打击你。

                  Continue reading wicket与jsf/seam比较

                  模板库

                  国外免费
                  http://www.freewebsitetemplates.com
                  模板库

                  http://www.skinpress.com/
                  韩国模板

                  http://sc.68design.net/

                  Continue reading 模板库

                  sso 综述

                  sso

                  理论文章 http://www.ibm.com/developerworks/cn/security/se-sso/index.html

                  这里面谈的cas的较多,另外一方面还有openID可以了解一下。

                  1. SSO 原理浅谈

                  这篇文章写的很好,特别要注意要保证      的安全。
                  http://kazge.com/archives/491.html

                  3. CAS 以外的其他开源 SSO 方案

                             除了 CAS 之外,还有很多开源的 SSO 方案,采用何种方案跟用户的应用环境有比较大的关系。 SSO 的优劣一般要考虑易用性,安全性,性能,扩展性等因素。

                  3.1 JOSSO

                             经常听到别人讨论 JOSSO , JOSSO ( www.josso.org )是我很早就用过的 SSO 开源项目,我后来抛弃了它,因为它存在比较多缺点,下面我们来看看:

                  1,  没有将后台认证与 SSO 分离,过分强调 JAAS , Axis 等

                  JOSSO 官方网站发布了 JOSSO 三个基准:

                  Standard Based

                  • JOSSO security infrastructure is based on JAAS (Java Authentication and Authorization Service)
                  • JOSSO uses web services implementing Axis as the distributed infrastructure.
                  • JOSSO uses Struts and JSP standards

                  这些标准可以看到 JOSSO 的适应性存在较大的限制,因为 SSO 其实并不关心认证细节,作为一个开源项目,不应该引用过多的技术,如 Axis ,因为这个世界还有很多人用 Xfire 。

                  2,  没有描述 SSO 协议的 UseCase 图

                  从 JOSSO 的网站,似乎都看不到一个 SSO 的 UseCase ,容易让那些关注安全性的大型项目负责人感到忧虑。

                  3,  缺乏广泛的 SSO 客户端支持

                  JOSSO 的支持的客户端比较少,这个跟他的 Memember Team 、 Contributor Team 有比较大的关系。

                  4,  缺乏成功案例

                  读者使用任何 SSO 开源方案之前,有必要先了解次方案的成功案例, CAS 全球有 50 多个大学在使用 ( 大学对 SSO 的要求往往更复杂 ) 成功案例,这方面, JOSSO 跟 CAS 存在很大的差距。

                  5,  不支持跨域的落后设计

                  当然, JOSSO 不支持跨域是因为它使用了共享 cookie ,下面的话截取于 JOSSO 的官方文档:

                  JOSSO uses a session HTTP cookie to keep track of the SSO session identifier. This cookie lives as long as the browser window is open, being sent only in requests associated with the domain that generated it. This means that all JOSSO partner applications must be accessed using the same domain.

                  这段话给我们一个提示,如果设计 SSO 的时候,使用了 cookie 来在 SSO Server 和 SSO Agent( 相当于 CAS 的 CAS Client) 之间共享用户信息,那么这个协议是无法突破跨域限制的。因为当多个 SSO Agent 如果不使用同一个域名,也就是 Microsoft.com 和 IBM.com 无法共享同一个 cookie , JOSSO 采用了一种 DNS 技巧,即使用 Microsoft.sso.com 和 ibm.sso.com 来共享 cookie ,但这带来的问题同样很多,尤其是业务系统本身存在一些对域名限制的业务逻辑的时候,需要改动原来业务系统,这不是一件好受的事情。

                  3.2 CoSign

                             CoSign 原先是 Michigan 大学的一个 SSO 项目, CoSign 是一个很不错的设计,但是它跟 CAS 比较相似,都是基于 Kerberos 方式的协议,一个最大的不同是 CoSign 的 SSO Server 是基于 CGI(Java Fans 更多会选择 CAS) ,对 C/C++ 的群体应该是一个不错的选择。 CoSign 协议的 UseCase 跟 CAS 很相似, CoSign 的客户端虽然也支持 J2EE/Apache/MSAPI(IIS) ,但它的 Server 端使用 C 来编写,影响了在 Java 群体中的使用。 CoSign 是一个不错的选择,可能是因为本人比较喜欢 Kerberos Model 的原因吧。

                  3.3 WebAuth

                             WebAuth 是一种早期的 SSO 方案,它的 WebServer 是用 perl 来编写的,客户端支持 Apache , C++ , Perl 等,当然, WebAuth 推出的时候, Java 并不是很流行,现在,要让 WebAuth 跟众多的 Java 产品结合不是一件容易的事情。
                  WebAuth 的协议适用了 Share Secret ,即 SSO Server 和 SSO Client 之间存在一个对称密钥 (symmetric key ) 。 SSO Server 和 SSO Client 之间的信任关系通过这个 Key 来保障。
                     上图中展示了一个 WebAuth 的基本模式, Client 就是浏览器用户, Generic Web Service 是 SSO Client , WebAuth Service 和 Auth Service 可以看作是 SSO Server 。
                  当浏览器发起一个对 Web 应用的访问请求时,这个请求未授权,因此被重定向到 WebAuth Service 进行认证,认证的结果是获得一个经过 symmetric key 加密的 token ,而这个 Token 只有 Generic Web Service 能够解密,因此, Web 应用能够知道浏览器用户的身份。使用对称加密来共享用户身份信息存在一定的安全隐患,首先是 WebAuth Service 如何保护这些对称密钥 ( 保护密钥安全本身是一件很困难的事情 ) ,一旦这些对称密钥被泄漏了, Token 就可以被随意篡改。另外,由于 Token 本身是基于 Cookie 方式发送,因此,只要 Hacker 能够复制这个 Token ,他同样可以访问其他应用。
                  如果不考虑安全性问题, WebAuth 的效率应该比其他 SSO 方案要高,因为它的协议没有 CAS/CoSign 那么复杂, WebAuth 中, SSO Server 不需要跟 SSO Client 通讯以确认用户的身份,用户的身份就放在 Token 中。

                  4. SAML

                  SAML 是 OASIS 制定的一种安全性断言标记语言,它用于在复杂的环境下交换用户的身份识别信息。在 SAML 诞生之前,如果想在 Websphere 、 Weblogic 和 SunONE 等之间实现 SSO ,我们必须分别实现一个适配层,来达成一种相互理解的协议,在该协议上,产品能够共享各自的用户认证 / 授权信息。 SAML 诞生之后,我们免去了这种烦恼。可以预计,将来大部分产品都可以实现基于 SAML 的联邦服务。
                         事实伤, SAML 已经在很多商业 / 开源产品中得到实现,包括:

                  l         IBM Tivoli Access Manager

                  l         BEA Weblogic

                  l         Oblix NetPoint

                  l         SunONE Identity Server

                  l         Baltimore, SelectAccess

                  l         Entegrity Solutions AssureAccess

                  l         Internet2 OpenSAML

                  l         Yale CAS 3

                  l         Netegrity SiteMinder

                  l         Sigaba Secure Messaging Solutions

                  l         RSA Security ClearTrust

                  l         VeriSign Trust Integration Toolkit

                  l         Entrust GetAccess 7

                  SAML 背后是强大的商业联盟和开源联盟,尽管 Microsoft 迟迟未能在 SAML 2.0 观点上达成一致,但它也正努力跟进SAML标准化过程,由此可见SAML协议已经是势在必行。

                  4.1 SAML 的基本概念

                             理解 SAML 的概念很重要,个人认为 SAML 协议的原理跟 CAS/Kerberos 很类似,理解上不存在困难,但 SAML 引入了一些新的概念名词,因此要先把握清楚这些概念。
                         断言,这个在 SAML 的 ”A” ,是整个 SAML 协议中出现的最多的字眼,我们可以将断言看作是一种判断,并且我们相信这种判断,因此,做出断言的一方必须被信赖。校验来自断言方的断言必须通过一些手段,比如数字签名,以确保断言的确实来自断言方。
                         SAML 目标是让多个应用间实现联邦身份 (Identity Federation) ,提起联邦,大家可以想象一下欧盟,欧盟国家之间的公民都具有一个联邦身份,比如 Peter 是法国公民, John 是比利时公民,这两个公民的身份都能够互相被共享,恰好,张三是一个中国公民,但他能像 Peter 和 Jhhn 那样随意进入欧盟国家,显然不能,因为它不具有欧盟联邦身份。
                         理解了联邦的概念,我们就可以回到 SAML 上, SAML 解决了联邦环境中如何识别身份信息共享的标准化问题,比如,法国的 Peter 进入比利时,他如何证明自己的身份呢?
                         SAML 就是为了解决这个问题。
                  在联邦环境中,通常有下面的 3 种实体:

                  l         Subject ( 主题 ) : Subject 是 SAML 实体中的第一个重要的概念, Subject 包括了 User 、 Entity 、 Workstation 等能够象征一个参与信息交换的实体。

                  l         Relying Party ( 信任方 ) : SAML 中的 Service Provider 角色,也就是提供服务的一方。

                  l         Asserting Party ( 断言方 ) : SAML 中的 Identity Provider 角色,用于提供对主题的身份信息的正确的断言,类似一个公证机构。

                  我们看看联邦环境的一个场景:
                  假设有一个 Peter(Subject) 的法国公民,他需要访问比利时 (Service Provider) ,他在比利时机场被要求提供身份信息, Peter 提供了欧盟 (Federation) 的通行证件,随即,这个通行证件在比利时机场被审核,或通过计算机送到欧盟身份认证中心 (Identity Provider) ,该中心有一个由所有欧盟国家共同建立的公民数据库,中心审核了 Peter 的身份信息,并断言“ Yes , He is Peter From France ”,于是, Peter 得到礼貌的回应“欢迎光临比利时”。
                         如果你将欧盟看作是一个联邦环境,你会发现上面的场景跟在联邦环境应用 SAML 很相似。
                  在联邦环境下,任何需要授权访问的服务都需要知道服务请求方的身份主题信息 (Who are you) ,服务提供方 (Service Provider) 不负责审核用户的身份信息,但它依赖于 1 个甚至多个 Identity Provider 来完成此任务,见下图。
                  1 个 Idnetity Provider 可以被多个 Service Provider 共享,当然,共享的前提是建立信任关系 ( 即 Service Provider 要信任 Idnetity Provider) ,就好比如,如果比利时 (Service Provider) 需要开放对欧盟国家成员访问,它信任欧盟的 Idnetity Provider ,它信任欧盟的 Idnetity Provider 的任何判断,包括 ”He is Peter From France” 。至于是否让 Peter 入境,那是受权限策略的控制 ( 注意 SAML 同样对 Authorization 断言做了标准化,此处,我们仅仅关注 Authentication) 。

                  4.2 SAML 的 2 种典型模式

                             在协议的角度, SAML 原理非常类似 CAS 和 Kerberos , CAS 协议依赖于 CAS Server , Kerberos 依赖于 KDC ,而 SAML 则依赖于 Identity Provider 。
                         根据 Service Provider( 以下简称 SP) 和 Identity Provider( 以下简称 IDP) 的交互方式, SAML 可以分为以下几种模式:一种是 SP 拉方式,一种是 IDP 推方式。
                         在 SAML 中,最重要的环节是 SP 如何获取对 Subject 的断言, SP 拉方式是 SP 主动到 IDP 去了解 Subject 的身份断言,而 IDP 推方式则是 IDP 主动把 Subject 的身份断言通过某种途径告诉 SP 。
                  2.2.1 SAML 的 POST/Artifact Bindings 方式(即 SP 拉方式)
                         该方式的主要特点是, SP 获得客户端的凭证 ( 是 IDP 对 Subject 的一种身份认可 ) 之后,主动请求 IDP 对 Subject 的凭证的断言。如下图所示: Subject 是根据凭证去访问 SP 的。凭证代表了 Subject 的身份,它类似于“来自 IDP 证明:我就是 Peter ,法国公民”。
                  现在,让我们看看 SP 拉方式是如何进行的:  
                  Subject 访问 SP 的受保护资源, SP 发现 Subject 的请求中没有包含任何的授权信息,于是它重定向用户访问 IDP.
                         协议执行:

                  1,  Subject 向 IDP 请求凭证 ( 方式是提交用户名 / 密码 )

                  2,  IDP 通过验证 Subject 提供的信息,来确定是否提供凭证给 Subject

                  3,  假如 Subject 的验证信息正确,他将获取 IDP 的凭证以及将服务请求同时提交给 SP 。

                  4,  SP 接受到 Subject 的凭证,它是提供服务之前必须验证次凭证,于是,它产生了一个 SAML 请求,要求 IDP 对凭证断言

                  5,  凭证是 IDP 产生的,它当然知道凭证的内容,于是它回应一个 SAML 断言给 SP

                  6,  SP 信任 IDP 的 SAML 断言,它会根据断言结果确定是否为 Subject 提供服务。

                  4.2.1 SAML 的 Redirect/POST Bindings 方式 ( 即 IDP 推方式 )
                         该方式的主要特点是, IDP 交给 Subject 的不是凭证,而是断言。
                         过程如下图所示:
                         1 , Subject 访问 SP 的授权服务, SP 重定向 Subject 到 IDP 获取断言。
                         2 , IDP 会要求 Subject 提供能够证明它自己身份的手段 (Password , X.509 证书等 )
                         3 , Subject 向 IDP 提供了自己的帐号密码。
                         4 , IDP 验证密码之后,会重订向 Subject 到原来的 SP 。
                         5 , SP 校验 IDP 的断言 ( 注意, IDP 会对自己的断言签名, SP 信任 IDP 的证书,因此,通过校验签名,能够确信从 Subject 过来的断言确实来自 IDP 的断言 ) 。
                         6 ,如果签名正确, SP 将向 Subject 提供该服务。

                  4.3 SAML 的优势所在

                             SAML 协议仍在不断的发展, SAML1.0, SAML1.1 到现在的 SAML2.0 ,都是 IT 商业巨头协商后,由 OASIS 发布的产物,另外, OASIS SAML 实验室得到拥有美国政府 GSA 的大力资助。
                  SAML 在 SOA 中扮演了一个关键角色,由于用户要求将企业资源从原有的面向数据 / 接口转变为面向服务,而建立在众多 Vendor 产品下的服务存在这种种鸿沟,最大的鸿沟是如何识别身份,如何能够让网易 163 邮件的 VIP 用户享受免费参加 Dev2dev 广州 UserGroup 的活动?
                  读者可能已经听闻很多身份管理软件, IBM Tivoli , SiteMinder , RSA SecureID 等,虽然身份管理软件都非常强,但成本同时也很高。身份管理并不适合于那种构建是 B2B 之上的商业环境(联邦环境)。
                  但对用户来说,根本问题是,网易和 Dev2dev 是两个不同的公司 / 组织,它们都严格保护自己的用户身份信息,一般极少可能会共享身份数据,因此,做法是双方都提供一个服务入口,对身份信息做断言,例如只告诉 Dev2dev 该用户确实是网易的 VIP 用户。
                  SAML 提供了一个安全标记规范,并且给出了一些的 UseCase ,这些 usecase 足以满足我们绝大部分的 SSO 需求。
                  我喜欢这种规范,很大原因是因为以前用 SSO 实在很累,配置要花去大半天时间, SAML 让这一切变得非常灵活简单,因为厂商一旦在其产品中提供 SAML 支持,我们就可以将其产品作为联邦服务纳入 SSO 环境。
                  我喜欢 SAML 的另一个原因是因为,它跟 SOAP 一样,不考虑传输协议,事实上, SAML 可以跟 HTTP/SSL/JMS 等任何传输协议捆绑。在 SOA 环境中,这个特性非常重要,因为我们已有的许多服务(来自各个不同 IT Vendors )都可能有各自的传输协议,即如果在这种复杂的环境下实现 SSO ,传统 Yale CAS 已经无能为力,因为 CAS SSO 实现在 HTTP/SSL 之上,只有 SAML 能够完成这项任务,因为它与传输协议无关。
                  最后,应该提一下, SAML 是一种 SSO 标准而 CAS 是一种 SSO 的实现,从 CAS 的 Roadmap 可以看出, CAS 很快会提供对其他 SAML 的支持。
                  ===============================================================================================================================================================================
                  Portal的功能可以分为三个主要方面:
                  1.        Portlet容器:Portlet容器与servlet容器非常类似,所有的 portlet都部署在portlet容器里,portlet容器控制portlet的生命周期并为其提供必要的资源和环境信息。Portlet容器负责初始化和销毁portlets,向portlets传送用户请求并合成响应。
                  2.        内容聚集:Portlet规范中规定portal的主要工作之一是聚集由各种portlet应用生成的内容,我们将在“如何创建Portal页面”部分对此做进一步讨论。
                  3.        公共服务:portlet服务器的一个强项是它所提供的一套公共服务。这些服务并不是portlet规范所要求的,但portal的商业实现版本提供了丰富的公共服务以有别于它们的竞争者。在大部分实现中都有望找到的几个公共服务有:
                           o 单次登录:只需登录portal服务器一次就可以访问所有其它的应用,这意味着你无需再分别登录每一个应用。例如一旦我登录了我的intranet网站,我就能访问mail应用、IM消息应用和其它的intranet应用,不必再分别登录这些应用。
                  Portal 服务器会为你分配一个通行证库。你只需要在mail应用里设定一次用户名和密码,这些信息将以加密的方式存储在通行证库中。在你已登录到 intranet网站并要访问mail应用的时候,portal服务器会从通行证库中读取你的通行证替你登录到mail服务器上。你对其它应用的访问也将照此处理。
                            o 个性化:个性化服务的基本实现使用户能从两方面个性化她的页面:第一,用户可以根据她的自身喜好决定标题条的颜色和控制图标。第二,用户可以决定在她的页面上有哪些portlets。例如,如果我是个体育迷,我可能会用一个能提供我钟爱球队最新信息的 portlet来取代股票和新闻portlets。
                         一些在个性化服务方面领先的商业实现版本允许你建立为用户显示什么样的应用所依据的标准(如收入和兴趣)。在这种情况下,可以设定一些像“对任何收入为X的用户显示馈赠商品的portlet”和“对任何收入为X的用户显示打折商品的portlet”这样的商业规则。

                   

                   

                  ============================

                  jasig实战

                   

                  Continue reading sso 综述

                  一个将目录或指定文件使用img2py进行处理的小程序

                  [Python学习]一个将目录或指定文件使用img2py进行处理的小程序

                  img2py 可以将图片文件存成文本文件,但它不支持多个文件处理,这特别在我的目录下有许多的文件,如果一个个处理的话,会非常麻烦。于是为了解决目录及支持多个文件的问题,我编写了下面的小程序,希望对你有用。

                  import wx.tools.img2py as img2py
                  import getopt
                  import sys
                  import os
                  import os.path

                  def usage():
                      print """
                  %s [-d directory][-h] -o outputfile files
                  """ % sys.argv[0]
                  def main():
                      if len(sys.argv) == 1:
                          usage()
                          sys.exit(1)
                      try:
                          opts, fileArgs = getopt.getopt(sys.argv[1:], "d:o:h")
                      except getopt.GetoptError:
                          usage()
                          sys.exit(1)

                      imagedir = ''
                      outputfile = ''
                      for opt, val in opts:
                          if opt == "-h":
                              usage()
                              sys.exit(1)
                          elif opt == "-d":
                              imagedir = val
                          elif opt == "-o":
                              outputfile = val

                      convert(outputfile, imagedir, fileArgs)

                  def isImageFile(filename):
                      f, ext = os.path.splitext(filename)
                      if os.path.isfile(filename) and ext.lower() in ('.gif', '.png', '.bmp', '.jpg', '.ico'):
                          return True
                      else:
                          return False
                  def convert(outputfile, dir='', imagefiles=[]):
                      files = []
                      files.extend(imagefiles)
                      if dir:
                          f = [os.path.join(dir, x) for x in os.listdir(dir) if os.path.isfile(os.path.join(dir, x))]
                          files.extend(f)
                      files = list(set([x for x in files if isImageFile(x)]))
                      for i, x in enumerate(files):
                          name = os.path.splitext(os.path.basename(x))[0].lower()
                          cmd =[]
                          if i != 0:
                              cmd.append('-a')
                          cmd.append('-n')
                          cmd.append(name.capitalize())
                          cmd.append(x)
                          cmd.append(outputfile)
                          os.system("img2py %s" % " ".join(cmd))
                  if __name__ == '__main__':
                      main()

                  我们在写gui程序的时候,经常会用到一些图标图片资 源,对此有几种解决办法,有人喜欢用zip模块将其打包,用的时候取出来,因为python读取zip文件也是很方便的,有人则干脆不打包,直接放在一个 子目录中,用的时候直接读取。而我则喜欢将其转换为.py文件,作为模块调用。

                  我在看wxPython程序的例程的时候,[encode_bitmaps.py]发现它的图片是从一个模块(.py文件)中调入的,于是很好奇,顺藤摸瓜,于是发现:

                  wxPython安装好之后,会在 wx\tools 目录下安装一些工具,其中名为img2py.py的工具。
                  这个工具可以很方便的将我们程序中所用到的图片或者图标资源转换成py文件,这样我们在需要使用这些图片资源的时候,只需要
                  import 这些扩展名为.py的模块文件即可

                  在命令行下输入img2py.py并回车,可以查看详细的帮助信息。而一般情况下,我们所要做的,只是将图片转换为.py文件

                  例如,我有一个ico文件,想用其作为我程序的托盘图标

                  那么我可以这样做

                  首先,将其转换为 .py 文件

                  img2py.py myicon.ico myicon.py

                  然后,在程序中导入这个模块

                  import myicon

                  最后,当我需要用它的时候,只需要:

                  icon = myicon.geticonIcon()

                  注意,如果你的myicon.py中没有geticonIcon()方法,只需要加入如下一行语句即可:

                  geticonIcon = icon.GetIcon

                  怎么样,是不是很方便?

                  在 wx\tools 目录下还有一些其他的工具,具体用法还有待大家发掘

                  --------------------------------------------------

                  目的:
                          即为img2py的用处,img2py是将图像转为以py文件存储的程序,简化了程序过程中读文件的处理。
                  开发环境:eclipse+pydev插件
                  步骤:
                  1,在 eclipse工程中增加个含有main函数的模块,用来处理图片到py,代码如下:
                  '''
                  Created on 2009-6-16
                  @author: fengxuanshuo

                  This is a way to save the startup time when running img2py on lots of
                  files...

                  '''
                  import sys
                  from wx.tools import img2py

                  command_lines = [
                                   "-a -F -n book   pictures/right_menu/222.png   ../main/images.py",
                                   "-a -F -n boo   pictures/right_menu/111.png   ../main/images.py",
                                   "-a -F -n ook_red   pictures/right_menu/000.png   ../main/images.py",
                                   ]

                  if __name__ == '__main__':
                      for line in command_lines:
                          args = line.split()
                          img2py.main(args)
                  其中command_lines为命令行执行内容,程序需要的图片都可以处理,而且目标文件可以有多个,名字自己取。
                  2,执行新增加的模块,就会发现 main目录多了个images.py文件。
                  3,更新eclipse pydev工程:pydev插件并没有常用的那个add file to project选项,不过有pydev->source format python files.
                  4,然后再原工程里面就可以用图片py文件了(可能有些版本,在生成py文件的时候不会加import相关库的语句,需要手动添加)
                  5,images.py 在wxpython demo 中的用法
                  定义全局变量 images: images =None
                  在app里面声明全局的images : globel images
                  import imgaes as i
                  images = i
                  其他py文件类似,这么做的好处在demo的注释里面说了,不罗嗦了,over

                  Continue reading 一个将目录或指定文件使用img2py进行处理的小程序

                  Pagination


                  Total views.

                  © 2013 - 2019. All rights reserved.

                  Powered by Hydejack v6.6.1