Tips: MT SSH登录及相关压缩命令

thumb-tips-tricksMT SSH登录信息

  • Host Name: example.com OR s00000.gridserver.com
  • Port: 22 (leave as default)
  • Connection Type: SSH (leave as default)

详见 http://kb.mediatemple.net/questions/1595/Using+SSH+in+PuTTY+%28Windows%29

用SSH压缩zip,gz,tar.gz格式的方法

先用一下常用的tar,用tar命令可以压缩文件夹,同样也可以解压缩,tar压缩的文件在win下用winrar或者7z都是可以解压的,如果不能,将后缀名改成.rar继续操作即可。

用tar压缩一个文件夹:tar -czvf cosbeta.tar ./cosbeta(tar -czvf 压缩后的名字.tar ./要压缩的文件夹 也可以不要./直接写上要压缩的文件名)

解压缩文件:tar -zxvf cosbeta.tar

zip命令是用来压缩.zip格式的文件的,在 shell 提示下键入下面的命令:

zip -r filename.zip filesdir

详见 http://www.joay.com/10622

For Dear Editors (2) 定位与编辑

thumb-editors-notebook已然不早了,今天够呛能完成第二篇,有多少算多少先写着。根据之前的一些反馈意见来看,东西还是做的更加简单易懂、贴近实际、图文并茂才好。也真是这么回事,平时自己写东西翻译东西没什么鸭梨,现在搞起这档子事还有些许紧张了。

说正经的了。在我看来,编辑(editor)与页面文件产生互动的过程中,主要的工作分为定位(locate)和编辑(edit)两部分。其中:

  • 定位:包括使用已知的关键词对文案进行搜索,以及寻找页面中特定的元素或板块位置这两点。
  • 编辑:包括对文案的添加、替换、删减、复制粘帖等操作,以及对超级链接和图片文件的替换等。

我们用比较常规的开发与编辑工具Dreamweaver说事儿;简称DW了啊。针对以上两大部分以及它们各自包含的目标任务来大致看下。

Attachments:
Download this file (For Dear Editors.doc)For Dear Editors.doc[更新至第2篇]297 Kb
Read more on "For Dear Editors (2) 定位与编辑"

For Dear Editors (1) 前言及HTML标签简介

thumb-editors-notebook我在这里说话比做一份规矩的文档要自在一丁点。整个内容大的原则是尽量有条理、尽量简单易懂、尽量挑实用的东西、尽量少说废话。

正文之前我突然想起一事儿,刚第二段就开始发散了啊这思维,不过还是想说一下。我们貌似约定俗成的使用“切页面”来指代涉及重构方面的工作,其实“切页面”这种说法,或是做法,是差不多10年前的“制作网页”的主流方式,比如使用Photoshop自动切片输出HTML及图片包,或者手动切图之后拉到Dreamweaver里面使用WYSIWYG(所见即所得)的方式拼页面。目前符合Web规范的重构及前端开发相关工作的实现方法,当然也是我们目前所使用的方式,是“写页面”,大家拿到的HTML原型文件以及CSS样式表、JS脚本中的那些五光十色毫不焦虑的代码都是相关人员一行一行、一段一段敲进去的。不使用WYSIWYG这类generator性质的工具的原因没必要具体陈述,不过在后中还是会提及实际编辑工作中对这类操作的原则和最佳实践。

Read more on "For Dear Editors (1) 前言及HTML标签简介"

(HTML5之路) 开发人员需要牢记的HTML5安全问题

thumb-html5-talk应用程序安全砖家表示,HTML5给开发人员带来了新的安全挑战。

苹果公司与Adobe公司之间的口水战带来对HTML5命运的诸多猜测,尽管HTML5的实现还有很长的路要走,但可以肯定的一点是,运用 HTML5的开发人员将需要为应用程序安全开发生命周期部署新的安全功能以应对HTML5带来的安全挑战。

那么HTML5将会对我们需要覆盖的攻击面带来怎样的影响?本文将探讨关于HTML5几个重要安全问题。

Read more on "(HTML5之路) 开发人员需要牢记的HTML5安全问题"

CSS3实战学习-创建漂亮的表单(3) 纯CSS背景渐变

thumb-css3-tutorial本站原创编译,转载请给面子,尊重劳动果实,欢迎交流指正。

几乎做了有始无终的表率,想起了小盆友们熟悉的白头翁的故事;其实白头翁也够冤枉的;凭什么整天拿一堆无辜的小动物说事呢我就不明白了。正事是3月开始弄的小连载“CSS3实战学习-创建漂亮的表单”在做了基础样式和阴影之后就再没碰过了;今天争取结束掉吧,只剩下背景渐变的实现这么一部分了。

首先我们回顾一下当时的目标范例,简洁雅致的小表单一个。

另外也可以先围观下mozilla.org的这篇css gradients in Firefox 3.6,从单向渐变到形变彩虹渐变...看看CSS3为我们带来了多少好东东=)

Read more on "CSS3实战学习-创建漂亮的表单(3) 纯CSS背景渐变"

CSS3实战学习-创建漂亮的表单(2) 基本样式和阴影

thumb-css3-tutorial前面一篇CSS3实战学习中,我们了解了这次的目标及表单代码;今天继续,来看下表单元素基本的样式设置以及CSS3阴影样式方面的应用。

基础样式设置包括表单元素的呈现、文字样式等方面,比较常规;代码见全文。做好这一步其实已经是个中规中距的常规表单的模样了;沿袭了近年来的风格习俗;样式截图见全文。

基础样式搞定,接下来进入正题,我们将使用以小撮CSS3来实现目标范例中的阴影样式部分。用来设置阴影的代码通常是这样的形式:

Read more on "CSS3实战学习-创建漂亮的表单(2) 基本样式和阴影"

CSS3实战学习-创建漂亮的表单(1) 概述

thumb-css3-tutorial还上瘾了;继续coder人格的业务知识学习与交流。之前集中做过的两个小连载分别是HTML5+CSS3实战他们说这叫“面向对象CSS”;今天开始的小系列主要集中看下CSS3在表单方面的应用,其实作者重点是要演示一下阴影和背景渐变的使用。

究竟搞什么飞机呢,我们首先来看下目标范例;朦朦胧胧的蛮好看哦,不过我个人觉得用表单元素演示CSS3外部阴影的效果不是很合适,感觉输入框都凸出来了,好像摆着几块瓷砖一样。

Read more on "CSS3实战学习-创建漂亮的表单(1) 概述"

他们说这叫“面向对象CSS” (5) 文章内页

thumb-logo-lego-object-oriented-css其实是another HTML5+CSS3实战教程。之前的一篇中,我们学习了页面侧边栏的样式定义,整个目标范例的首页基本搞定;今天来看看内页方面的东东。

复制之前的首页文件,并重命名为“post.htm”内页的整体结构与首页基本相同,头部与侧边栏保持不变,主要内容部分由文章列表变成单篇文章,并且增加了评论列表及评论表单等元素。

复制以下代码,将当前post.htm中的<header>及主要内容部分的<section>容器整体替换掉:

Read more on "他们说这叫“面向对象CSS” (5) 文章内页"

他们说这叫“面向对象CSS” (4) 侧边栏样式

thumb-logo-lego-object-oriented-css其实是another HTML5+CSS3实战教程。昨天开始了样式方面的话题,围观了主要内容部分的样式设定,主样式表styles.css也开始有些样子了。今天继续,来看侧边栏。

再次参考一下目标范例页面,我们可以观测到侧边栏主要由两部分组成:

  • 按发布时间归档的文章列表
  • 近期评论列表,包括评论内容及内容信息等

首先,我们可以把它们同等的作为侧边栏内容容器,定义一个名为.side-box的class,并设置样式:

Read more on "他们说这叫“面向对象CSS” (4) 侧边栏样式"

他们说这叫“面向对象CSS” (3) 主要样式代码

thumb-logo-lego-object-oriented-css其实是another HTML5+CSS3实战教程。之前一篇里面,我们了解了这轮学习的目标页面范例以及相应的页面代码,对整体布局的HTML5用法也做了简要的解释;今天开始进入样式方面的话题。

在之前一篇的页面代码范例中,我们可以看到该页面一共调用了3个样式表:reset.css、text.css和styles.css;其中reset.css就是Eric Meyer的样式重置方案;text.css用来定义一些文本元素的基本样式,我们来看下它的代码:

Read more on "他们说这叫“面向对象CSS” (3) 主要样式代码"

他们说这叫“面向对象CSS” (2) 目标范例及HTML5代码

thumb-logo-lego-object-oriented-css其实是another HTML5+CSS3实战教程。昨天我们起了个头,看了作者对他所定义的“面向对象CSS”的概述;天上一句地上一句的且不管他,今天来实际看看究竟要搞怎样的飞机。

这个“Object Oriented CSS”页面是最终成品图,也就是我们的目标范例。和之前一档HTML5+CSS3实战类似,都是用这样的Blog文章列表形式的页面来做示范,比较典型;如果慢慢的看到这样的页面时脑海里能用新的HTML5元素标签建立起一套轮廓来,那是很好的事情来;这也是反复用小实战演示的方法来学习的一个目的之一。

推荐到目标页面中使用firebug一类对应实际样式查看代码;我拿来放在下面先:

Read more on "他们说这叫“面向对象CSS” (2) 目标范例及HTML5代码"

他们说这叫“面向对象CSS” (1) 概述

thumb-logo-lego-object-oriented-css时隔半月,我的coder人格继续来学习业务知识;这次来翻一翻学一学的是来自nettuts+的“Object-Oriented CSS: What, How, and Why”;可以看到,作者标题到一定程度了,不过仍是值得学习参考的HTML5+CSS3实战性质的流程范例。他们说这叫“面向对象CSS”,我姑且就这么翻着了;开搞。

什么是面向对象CSS?

所谓面向对象CSS,本质上讲,就是编写更加简洁高效的CSS;代码方面仍是我们熟识和热爱的那个CSS,只是在这里用一种新的说法来代表这类简洁的CSS模式及实践方式。(作者一上来就主动揭露了自己标题的本质,很坦诚也很嚣张;继续看)

Read more on "他们说这叫“面向对象CSS” (1) 概述"

HTML5 教程学习 - HTML5+CSS3 实战(17) 收场

w3c-html5-logo-viiiix好了,“HTML5+CSS3实战”系列的最后一篇;本是Smashing Magazine上面的一整篇教程,每天弄来一点最后搞成了17篇连载。HTML5方面的东西慢慢关注下来发现,国外站点上一些公认不错的教程范例,每一篇几乎都有着不同的路子,比如对新标签的理解,使用的策略等等;想来也不奇怪,W3C的HTML5规范本身还处于草案阶段的样子;我个人目前还不打算用它做新东东;CSS3方面倒是在一点点的用着,不过也要看是什么项目了。

不多说了,可以参考“HTML5教程学习 - HTML5+CSS3 实战(9) 页脚”一文来回顾下之前页脚部分的设计样式和HTML。接下来我们来看看样式;将下面的代码添加到main.css中:

Read more on "HTML5 教程学习 - HTML5+CSS3 实战(17) 收场"

HTML5 教程学习 - HTML5+CSS3 实战(16) 文章列表

w3c-html5-logo-viiiix在前面一篇HTML5+CSS3实战里面,我们搞定了范例页面“附加栏目”部分的样式;今天来一起看看正文部分文章列表的样式代码。首先呢,可以参考之前的文章来回顾一下文章列表部分的设计样式及HTML代码。心中有数,下面是文章列表部分的基本样式代码:(见全文)

其中“li:last-child .hentry”的设定去掉了文章列表中最后一篇文章的下边框线及内边距;另外通过“#content > .hentry”,我们可以选取那些作为#content容器直接子元素的.hentry文章段落;如果某.hentry元素嵌套在有序列表中,那么它就不会被选中。这是从文章内页的角度出发进行的考虑(虽然我们的范例里不会涉及到),因为内页单篇文章是不需要下边框的。

Read more on "HTML5 教程学习 - HTML5+CSS3 实战(16) 文章列表"

HTML5 教程学习 - HTML5+CSS3 实战(15) 附加栏目样式

w3c-html5-logo-viiiix前面一篇HTML5+CSS3实战里面嘀嘀咕咕了很多没用的,最后看了下范例页面里面的特色文章和主要内容部分的样式代码;今天来看看“附加栏目”部分的样式吧,这部分多少有意思了一些。

为了在脑子里有个直观些的概念,可以回顾一下“HTML5 教程学习 - HTML5+CSS3 实战(8) 附加栏目”,参观一下“附加栏目”这部分的设计样式以及HTML代码。在样式方面,左侧的博客链接列表里面包含3列内容,我们可以使用左浮动<li>的方式来做;宽度做做好就OK;右侧是常规的单列无序列表,没什么悬念,容器整体右浮动即可。问题主要出在最后一行的那几个<li>上面;我们先把“附加栏目”这部分的样式代码列出来,然后看下哪里有不爽:

Read more on "HTML5 教程学习 - HTML5+CSS3 实战(15) 附加栏目样式"