前端
第四届WebRebuild年会深圳站
初次参加WebRebuild的活动，收获巨大。认识了不少前端的牛人，工具/软件，美女帅哥。 个人收获如下（中间因前天晚上熬夜而精神不集中，听得不甚认真,sorry）。 1.HTML5：现在几乎所有的浏览器厂商都推动，HTML5的实用会越来越快。Google Chrome的胡坤认为HTML5是：HTML5~=HTML+CSS+jsAPI。范例很精彩（胡哥的演示文档是用html写的，强悍）。 2.工具/软件：第二个分享是腾讯石玉磊（大牛）的《web前端开发实用工具》，重点介绍了他开发的软件Fiddler插件 ——willow（willow是他FG的名字，好感动）。好多大牛在微博墙上回应严重推荐这个工具。其他工具/软件还有，vim，EditPlus，html validator等。 3.思想/方法：第三个分享是腾讯帅哥郑焕义带来的《重温网站重构》，回顾web开发的发展，其中重点是说到语义化标签的使用的好处（SEO，方便重构，结构清晰，无障碍浏览等）。随之的即兴分享，也是和语义化标签有关，说到table的滥用和div的滥用等。第四位演讲嘉宾是迅雷的邹惠斌，主题是《移动设备的web重构》，内容主要是怎样在PC上搭建移动设备的运行环境，并且在低端手机上怎样进行web重构，因为自己关注得少，很多知识都没听懂。第五位嘉宾是彩讯的张思坚，《浏览器兼容性》，演示文档很有特色（第一次看到用思维导图做演示），很全面地介绍了各类浏览器（搭建本地测试环境时很有参考价值），他所讲的内容还有不少，事过二天，现在记得清楚只有这些,等课件出来再补。压轴的彪叔，题目是《化烦为减》，以哈佛大学的公开教程《公平与正义》开题，讲得很广，气氛很轻松，主要内容是说，看，做要把握好度。另外石玉磊也提了不少优化的方法，比如用base64来表现图片。 4.项目管理：第六位演讲者是来自金蝶的陈军，是交流会上互动做得最好的嘉宾，题目是《scrum敏捷项目管理》。scrum敏捷项目管理比较适合互联网产品的开发管理。WebRebuild官方微博的对它的总结： Scrum的核心是“拥抱变化”，它的迭代周期很短，在迭代完成之后的功能演示会议上客户会提出一些需求。因为互联网行业中客户在看到界面之前往往不清楚自己需要的是什么，通过完成核心需求来展示给客户界面，可以让他提出意见，团队好进行下一轮的迭代讨论。 Scrum Master要保证团队不受打扰，保持项目的心跳，让团队自己发挥潜能。 Scrum里有一个经典事件：每天早上有一个15分钟的Scrum简会，每位团队成员陈述当前状态，记录在白板上。白板无论对于内部成员还是对外部接口都是一个很好的描述项目进展的展示板。 在每一次迭代开始之前产品经理都会准备一份排好优先级的需求列表，团队可以提出意见，哪些优先级可以排高一些，最后由产品负责人确定本次迭代要开发的功能。在以后的迭代开始之前负责人有权调整这些需求的优先级，以确保每一次团队都在开发最有价值的需求。 Scrum特点三：面对面沟通，非语言特征比如表情和肢体动作通常能表达我们的真实意识，所以面对免沟通的效率是最高的。 Scrum是一个敏捷开发框架，是一个增量迭代的开发过程.。 重构是敏捷开发中很重要的一部分。 5.个人感受：我喜欢这种交流会。之前的WebRebuild交流会我也有报名，不过最后觉得自己觉得的东西太少，拿不上台面而退怯了，现在后悔了。互联网的知识体系很大，全才是极少有的，交流会能很快让人发现新天地和自身不足。火花得多碰撞才耀眼。
25个令人惊奇的CSS3实验和例子
CSS3为设计师和开发者打开一片新天地。以前需要用到图片，JavaScript或者Flash的地方，现在能用CSS来实现了。不幸的是，现在主流浏览器不支持CSS3，这些开发只能当作实验或学习。不过，如果你有兴趣了解CSS3的强大，下面例子值得一看。 文中我们列举了来自不同设计师/开发者25个CSS3的实验或例子。有一些比较实用，所有的例子都展现了CSS3的功能和创新之处。 Pure CSS Social Media Icons Apple’s Navigation Bar Using Only CSS Easily Turn Your Images into Polaroids with CSS3 Recreating the OS X Dock Use CSS3 to Create a Dynamic Stack of Index Cards CSS Posters CSS3 Background-Clip & @Font-Face CSS3 Button Maker Create a Vibrant Digital Poster Design with CSS3 Experiment: Realistic [...]
WordPress主题:Focusec
半个假期已讫，实习尚无着落（实乃不求上进)，诸事无成，只做了个wordpress主题：focusec。还没全部完善，摆在这里，想请各位朋友同学多赐建议，以便改良，不胜感激。 效果图如下，预览站点这里，图片有压缩，难免失真，最好去网站看一真面目。 上图是首页（index.php)，分页(page.php)效果，下图是文章内容效果（singlepage.php)。 制作这个主题源于练笔冲动，目的是让博客阅读体验更好，因此设计伊始就不与广告版面空间。单栏布局借鉴纸媒简洁排版的优点，减少阅读时信息噪声干扰，用色也比较简单。着墨最多处是评论留言区，花时间最多也在此。主要是把评论的内容和评论的相关信息分隔开来，以便浏览。留言表单比较吸引眼光，目的是促进读者多多评论。 虽然给这博客改版积累些小经验，不过对wordpress了解还不够，制作这主题过程中学习了网上很多教程和资料，特别是水煮鱼写的wordpress主题制作教程（推荐有兴趣者阅读）。另外这个focusec主题不用插件实现了分页导航和嵌套评论的功能。 不过问题也有很多，主要在于边栏（sidebar.php)，我把边栏放在底部，这样窗体化就很难设置，现在问题我还没方法解决，请WP达人帮忙指点。还有怎样向官方提交主题上，怎样才能快速高效，也请指教。谢谢。
纯粹CSS制作图片滑动栏
之前翻译过用jQuery制作的精彩图片滑动栏的文章，又曾利用ul和页内锚点制作过水平滚动的网页。前几天突然想，为什么不也用ul和页内锚点来制作图片滑动栏呢？用js和 jQuery制作的图片滑动栏的效果虽然很漂亮，不过对SEO不友好，而且不同浏览器，不同平台对它们的支持也不一致。纯粹用css和html制作图片滑 动栏在这些方面是有好的表现的。 效果：样例（点击可见），下载样例 制作思路如图： 具体制作步骤： 1.搭建好框架 <body> <div id=”box”> <div id=”slider”> <ul id=”image-text-div”> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> </ul> </div> <ul id=”button”> <li><a href=”#a1″>1</a></li> <li><a href=”#a2″>2</a></li> <li><a href=”#a3″>3</a></li> <li><a href=”#a4″>4</a></li> </ul> </div> </body> 2.添加细节。“滑动栏的内容”加上具体的图片与文字。还有添加一些样式以控制显示效果。我在“滑动栏的内容”中加的是: <img src=”image/css-slider.jpg” /> <div> <h2>纯粹CSS图片滑动栏</h2> <p>这里是滑动栏的文字区域。主要是为了说明左边图片，摘要而已，字数不需多，重点突出即可。 此滑动栏用到HTML和CSS。</p> </div> 3.添加样式 *{ margin:0; padding:0;} body{ [...]
怎样在wordpress中实现把分类做为导航栏和在分类页面中实现摘要和缩略图
阅读本文之前，最好请你先看《怎样在wordpress 中显示摘要和缩略图》并按它的操作方法在首页显示摘要和缩略图， 这篇文章是基于它的基础之上写得，要用到之前的代码和文件，效果请点本站导航栏中任一个就行了. 1.怎样在wordpress中实现把分类当作导航栏 修改模板里的header.php文件（修改之胶最好备份）：打开后台控制面板，外观–编辑–在主题文件中打开点header.php, 把<?php $pages = wp_list_pages(’sort_column=menu_order&title_li=&echo=0′);中的 wp_list_pages改为wp_list_categories，这样导航栏中导航就是以博客的分类来导航，而不是默认的页面。还有就是不同主题这 句语句不一样，比如说我的主题就是<?php wp_list_pages(‘title_li=’ ); ?>，没关系，也是把它改为wp_list_categories，都一样。 2.怎样在分类页面中实现摘要 后台控制面板–外观,编辑–文章索引模板 (archive.php)，找到 <div class=”entry”> <?php the_content(‘Continue reading…’); ?> </div> 把<?php the_content(‘Continue reading…’); ?>改为<?php the_excerpt(); ?>,这样在分类页面中就可以像主页那样只显示摘要了。 3，在分类页面中实现摘要和缩略图 实现以分类为导航栏后，并且也只显示摘要后，如果也想像首页那样也显示缩略图，一样也得把下面的代码加到刚才我们修改好的<?php the_excerpt(); ?>上面。 <?php $custom_values = get_post_custom_values(“thumb_source”); if (isset($custom_values[0])) $image_source= $custom_values[0]; else {$id =$post->ID; $the_content =$wpdb->get_var(“SELECT post_content FROM $wpdb->posts WHERE ID = $id”); $pattern [...]
怎样在wordpress中显示摘要和缩略图
这篇文章不算真正的原创，我是根据国外一篇文 章与国内一篇文章写 的，因为用中文搜索了好几种方法与插件，效果都不如意（同宿舍的说：RP问题），根据coder+的文章实现摘要与缩略图的效果，根据javaws专栏的 文章解决首页博客摘要中文字数显示问题。还有我用的是wordpress 2.8.6,别的版本的wp没试过。 下面是操作方法： 1.显示摘要 找开你在用的主题的文件夹，找到index.php这个文件，找开<?php the_content(‘Continue reading…’); ?>也有可能是<?php the_content(); ?>，然后把其修改为<?php the_excerpt(); ?> 2.Timthumb: 点这 里 点View Source Code,然后在找开的网页中右键timthumb.php 3.timthumb和cache： 在www文件中的wp-content文件夹中创建一个thumbnails文件，把刚才下载下来的timthumb.php文件上传进去。然后在 thumbnails文件夹中创建一个文件夹cache，并把cache的文件属性改为777。 4.thumbnail generation+display： 把下面的thumbnail generation+display代码加到第一步中的<?php the_excerpt(); ?>上面，也就是你修改的index.php文件中的<?php the_excerpt(); ?>上面，代码如下： <?php $custom_values = get_post_custom_values(“thumb_source”); if (isset($custom_values[0])) $image_source= $custom_values[0]; else {$id =$post->ID; $the_content =$wpdb->get_var(“SELECT post_content FROM $wpdb->posts WHERE ID = $id”); $pattern = ‘!<img.*?src=”(.*?)”!’; [...]