Jorux Notebook

Just a web designer's blog

时隔12年,Survival confirmation

12年,刚好一个干支轮回。

虽已不再从事web design相关工作,但是最近开始开发一款医疗相关APP,再次与web design发生交集。
本网站由于长期未能更新,主题仍然停留在wordpress2.0阶段,虽靠残存的记忆重写了部分css,仍然不能完美的继承原设计,甚是遗憾。
记录开发过程遇到的问题和解决思路。也算是一种纪念吧。

1.MySQL数据库迁移造成的乱码处理方法。

由于不良空间服务商擅自更新后台版本,造成MySQL数据文件被latin1编码改写,诸如此类方法,是无效的。
颇费周折之后找到以下方法,希望能帮到需要的人。
由于原始数据并没有变化,需要通过Mysql命令行将已经乱码的数据转写为Blob(二进制数据):

ALTER TABLE `tableNAME`
CHANGE `columnNAME` `columnNAME` blob

然后再转写为utf8格式:

ALTER TABLE `tableNAME`
CHANGE `columnNAME` `columnNAME` VARCHAR(2000) CHARACTER SET utf8

转换完成后可以在phpMyAdmin中将默认的排序规则“latin1_swedish_ci”更改为“utf8_general_ci”
或者参考先前的链接在命令行中执行。

2.Nginx反向代理wordpress时遇到的问题

服务器迁至AWS后,涉及到单一主机ip部署多个应用问题。
方法参考了这篇(单IP多站点反向代理配置)的部署方法。
部署nodejs应用和thinkphp应用都没有问题。但是在代理第三个wordpress网站时出现了主页无法显示的BUG。
参考了以下两篇文章:
https://blog.csdn.net/wshk918/article/details/108047551
https://www.taijicoder.com/2018/04/21/deploy-wordpress-behind-reverse-proxy/
问题出在wordpress没有原生支持反向代理.

需要在wp-config.php中加入

if ( ! empty( $_SERVER[‘HTTP_X_FORWARDED_HOST’] ) ) {
$_SERVER[‘HTTP_HOST’] = $_SERVER[‘HTTP_X_FORWARDED_HOST’];
}

Nginx Reverse Proxy 配置加入,并重启服务

server_name www.example.com
location / {
proxy_pass http://wordpress-server-ip:port
#Proxy Settings
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

12年前还是css和w3c标准刚普及的时候,而现在的前端已是各种框架(VUE,bootstrap)的天下。
动态响应,前后端分离,设计扁平化,字体图标的大量使用,尤其是重视对手机端的适配,甚至是只开发手机APP是目前的趋势?。
前端设计师后端化也是一大趋势,就像歌手要变成创作型歌手,自己写歌一样,必须要跳出舒适区,多学习实践才可能有进步吧。

共勉

I am still alive

1. 鼠年了,本站只是在城头放上只老鼠,让它啃啃那张具有讽刺意味的“新船票”,实在是对不起读者…

2. 上次更新好像是去年7月份的事了,如果再挺三个月,刚好一年没动静,到时候再更新一下,然后将本站改为”年刊”,想来也算是个交待…

3. 这段日子,应该说Jorux几乎和Web design脱离了关系,虽说没忘CSS语法,但是要想信手拈来一篇文章,已无可能。鉴于原创和少给互联网添垃圾的原则,忍到了现在…

4. 应该说本人对Firefox是有意见的,不然我就不会向我老爸推荐Opera了。

5. Firefox有那么多缺点,我居然也认了,不就是多了那几个插件嘛!加上现在多了个刀枪不入的Safari,我真有种先弃Firefox而后快的冲动。

6. 好在Mozilla CEO不只是发发牢骚,Firefox 3b5应该说在启动速度,系统资源占用率等方面有了长足的进步。

7. 上次那个版本的FirefoxPortable,Liveshare把它弄丢了,所以把它放在以下两个位置,希望这次免费的下载能进行地久一点。
liquid

Box: http://www.box.net/shared/49u79vvccc

Fs2You: http://www.fs2you.com/files/ec86b46b-07eb-11dd-8bd5-0014221f4662/

8. 此J版FirefoxPortable共含插件23个,其中有三个被Disable,原因是Jorux没有将它crack成功,暂时用不了,只好等原作者自己更新了。

9. 如果想了解上个版本所用的插件,可以在这里下载

什么是Semantics?

Semantics可翻译为语义的(学),它是Html/Xhtml是否真正符合标准的重要一环。Jorux在这和大家讨论一些自己的观点,如有不妥之处,还请各位网友指正。在西方,为什么这么多人如此重视网页的Semantics,也许你会说,西方比较守规矩,重视标准,但我想说的是,在这些表象的背后有着“一只无形的手”控制着。

在此,举个导航条的例子来说明我的观点。大家应该看见过很多诸如下类的导航结构:

首页 | 关于 | 博客 | 留言 | 相册

它们有着共同的特点,都有分割条“|”将各个条目分开。要实现以上效果的导航栏,其Html/Xhtml有很多种写法,在此仅具几个比较典型的例子:

例1

<p><a href=”home.html”>首页</a> | <a href=”about.html”>关于</a> | <a href=”blog.html”>博客</a> | <a href=”message.html”>留言</a> | <a href=”album.html”>相册</a></p>

例2

<ul>
<li><a href=”home.html”>首页</a></li>
<li>|</li>
<li><a href=”about.html”>关于</a></li>
<li>|</li>
<li><a href=”blog.html”>博客</a></li>
<li>|</li>
<li><a href=”message.html”>留言</a></li>
<li>|</li>
<li><a href=”album.html”>相册</a></li>
</ul>

例3

<ul>
<li><a href=”home.html”>首页</a> | </li>
<li><a href=”about.html”>关于</a> | </li>
<li><a href=”blog.html”>博客</a> | </li>
<li><a href=”message.html”>留言</a&

引号是可以成对的

引号(quote mark)顾名思义是用于引起人注意, 区别于一般内容之用的标点符号。分为上引号和下引号,并且是成对出现的,这种概念我们可能在小学就知道了,所以引号应该是成对出现的。

但是在现在网页设计中,由于某些原因,我们经常忽略这种基本概念,一些权威网站在使用引号时往往只使用上引号图标,导致大家觉得在技术上很难实现引号图标的成对。

例如在A List Apart的一篇文章中出现如下效果:
liquid

再如推行网页标准的著名设计站点SimpleBits也出现类似问题:
liquid

但是在另一个本人比较推崇的网页设计站点Digital Web Magazine在这方面就要好的多:
liquid

可能也因为该网站的每篇内容都需要用引号引出中心思想有关,马虎不得。该网站在细节方面精确控制的同时,文章质量也是越来越高,大有取代A List Apart之势,希望读者能够重点关注。如此优秀的网站,其技术必然值得我们去研究。

引号图标的成对之所以在CSS上难以实现,主要是因为CSS中关于背景图片的控制度有限造成的,即你不能给任意元素(element)同时赋予两个背景图片。

那么就来看看Digital Web Magazine是如何实现引号图标的成对。还是以上个例子

Jorux版FirefoxPortable(英文版)下载

为什么要共享自己使用的浏览器

1. 对于Firefox的初级使用者:一个全新的Firefox并不能比IE优越。而安装种目繁多的插件,几乎是初用者的噩梦。
2. 对于Web design的爱好者:web design是本人的爱好,所以对于Firefox的依赖要比一般的网友程度深。而很多初级web designer对本人使用的插件感兴趣。
3. 对于自己:也许某天,本人电脑崩溃或是丢失,在网上留个备份。

明确几个概念

1. Jorux版—-出自Jorux.com, 准确的讲是Jorux几乎每天使用的版本,包括设置,偏好以及插件。Jorux已经尽自己的能力将使用痕迹清理,例如历史,收藏夹,帐号,密码。老实讲到现在还很犹豫,担心一些过于隐私的东西发布到网上。如果网友发现一些尚未清理完全的信息,麻烦留言通知一声。
2. FirefoxPortable—-即Firefox的移动版,可随身携带的浏览器。不要小看FirefoxPortable,一个设置并调教完全的版本,几乎能在网吧实现在自己家里一样的上网体验,比如收藏夹,历史,密码。
3. 英文版—-对于想使用中文版Firefox的朋友,Jorux只能说声抱歉。

重点插件介绍:(共39个插件, 介绍其中十六种, 均已安装于浏览器中)

1. ScrapBook: 用于网页收藏,离线浏览。优点,利于管理自己喜欢的页面,资料,能保持绝大部分网页的原貌;具有搜索功能。
2. MeasureIt: 测算网页中两点之间的距离,某个范围的面积。
3. ColorZilla: 获得页面内任意一点的颜色。
4. Gmail space: Gmail硬盘的Firefox版。
5. Gmail Manager: 用于提示Gmail的新邮件。
6. FEBE: 备份Firefox的插件,设置等
7. StumbleUpon: 初次使用,需要注册一个帐号,即可获得一些可遇而不可求的站点。
8. Backgroundimage Saver: 保存网页的背景图片。
9. Firebug: 用于

瞧瞧这一年半

2005-2006的Jorux.com记事

1. 域名Jorux.com是在2005买的,这点可以肯定, 创建日期2005-05-20在时代互联的管理后台有着确实的记录。
时代互联

2. 2005.05–2006.02这段时间,Jorux.com及其空间只是几个简单的页面而已,没有任何内容可言。但却提供了一个向外界展示我当时的网页技术的机会。

3. 2006.02安装上zblog后,确实想着如何提高流量,刚好一些国外的资源既能满足我的需求,也能充实网站的内容,这种挖掘工作做了大约半年,期间也做过SEO的实验,终于把网站流量提高到了1000IP/日。也做过广告,脉动100人民币是我的第一桶”金”。
myad

4. 也许你要问,是什么时候跟CSS扯上关系的,我想是从一开始就扯上了,这一扯就是一年半。最开始是用dreamweaver,但从来没用表格布过局,老实讲,让我现在空手写个表格代码都完成不了。所以我只会W3C的东西。
w3c

5. 开始的时候,就是没事做个网页,模仿一下别人的设计,然后放在Jorux.com美一下,基本没有人访问,当然,除了我本人。 Jorux几乎以常人不可想象的频率访问Jorux.com。想一下也容易明白,一个不和别的网站做友情链接,又不在论坛宣传的自己的新站,访客几乎只能是你自己。

6. 我也不知道为什么用zblog写(或是copy)几篇经过SEO

空间之痛

首先要对关心本网站的网友说声抱歉!

由于一些不可知的原因,导致本网站瘫痪了一星期,万幸的是我有备份数据库的习惯,所以以前的posts和珍贵的留言都得以保存。

如果网友看到此页面,说明Jorux.com还在线上,请立即把你所需要的资料下载备份!

毕竟现在Jorux.com还在一个试用空间上,请大家帮忙测试一下网页加载速度,如果反映不佳,有可能再次更换空间。

Update: 本网站已经安置在九州科技,目前本人对此空间的表现比较满意。感谢参与反馈的朋友:leavic, allen, baiqiang, xiaojiaoya.

Thanks

Jorux

布局篇(2)—If you love css …

上篇讲的布局(切割)方法相信大家己经掌握,其特点是用固定宽度(fixed-width)来实现页面内各个元素的显示效果,简单实用,易于掌握。本篇将讲述其他相对高级的布局方法。

布局的分类,根据对元素宽度的定义不同,布局可分为以下几种:

1. 固定宽度(fixed-width)布局
即上一篇所用到的布局方法,其特点是主要DIV的宽度都是用固定大小的px值定义的,其宽度不随浏览器及字体大小的影响。多以px作为宽度单位。
优点:宽度固定,最为保真地表现作者的设计意图;简单易学。
缺点:它是这几种布局方法中最为“自私”的,因为其不考虑访客的浏览设备及设置。比方说,在1024宽的浏览器表现良好的布局,到了1600以上的宽屏浏览器就显得较为局限,其可能缩于屏幕一侧或是中央。
现状:由于其简单易用,且基本满足大部分访客的需求,仍是主要的布局方法,尤其在大陆。
趋势:随着液晶屏幕的发展和普及,成本的下降,市面上宽屏显示器已经开始大量涌现,尤其在西方发达国家,1600的宽屏显示器渐成主流,所以在800或是1024下显示良好的,使用固定宽度的布局方法已经开始被边缘化。
站点举例网易 蓝色理想

2. 自适应(liquid)布局
即根据用户浏览器的宽度,自动调整宽度显示的布局方法。以%作为宽度单位。
优点:自动适应各种屏幕宽度,轻松实现满屏显示。
缺点:如果屏幕过宽,而内容有不多的情况下,文字可能拉伸得很长,影响美观。而当屏幕过窄时,内容又会被压缩得很窄,可读性下降。

寻找Web Programmers

现已暂停招募程序员!

由于本人所在的学校,以及天生的对codes敏感度有限,导致现在的编程能力止于初级。但是目前的Web Design形势已经不是photoshop, css等表面处理就能满足客户的需要。因此Jorux在此向各位读者发出寻找programme合作者的邀请。

Jorux在乎什么:

1. 目前最需要的技术就是网页的后台技术—-PHP/MySQL, Ruby, XML。以及前端技术Javascript/AJAX。PHP/MySQL Programmer是最为迫切的;
2. 你只需在以上例举的语言中至少有一种达到让你自信的水平;
3. 大陆人士,熟练运用简体汉语;
4. 不拒绝对ps,css极为自信的非programmer。

Jorux不在乎什么:

1. 你还是高中生,或是大学没毕业,或是参加工作了。这不重要,要知道你目前的收入越低,你在这获得的酬劳就会让你越满足;
2. 你的技术尚未达到所谓的“精通”,Jorux不要求所谓的“精通”,只要你有自信写出漂亮的codes。没有人从一开始就能“精通”,Jorux可以给于一个合作的磨合期,成长期;
3. 身高,长像没有自信吗?放心,这不是选美。
4. 专业不对口吗?高中生是不会有什么专业的, 大学生也许会被束缚一点, 但你要知道Jorux是一个无聊的医学生, 我没有理由要求你是计算机相关专业的。

工作地点

很明显我们在北美汇合,请注意这是指网上。虽说本人很想去北美,但考虑到签证难度,强烈的移民倾向,以及收入的不足,我们在local工作,然后在北美的主机(例如Basecamp, Gmail)汇合就好。

酬劳:

1. 非常希望Jorux所付的$能让你满意, 当然也可以用人民币结算;
2. 收入目前不是很稳定,

95%的中国网站需要重写CSS

很长一段时间,我都使用12px作为网站的主要字体大小。10px太小,眼睛很容易疲劳,14px虽容易看清,却破坏页面的美感。唯独12px在审美和视力方面都恰到好处。

谁对我的网站字体大小有意见?
我老爸,他是第一个向我反映看不清我的网站文字的人。这使我意识到12px,其实只是让我觉得很不错而已,而对于那些视力下降明显的中年以上的人来讲,几乎等于10px对于我的感觉。
于是我告诉他,在“查看”里调整“文字大小”就可以了。但是却发现这是徒劳的。在Firefox能轻易调整的字体大小,怎么在IE就变得如此”坚不可调“?

问题出在哪
我又试着打开中国的三大门户—新浪网易搜狐。它们的字体无一例外的在IE里失去可调性。看来这不是我网站独有的毛病。再看看MSNGoogleA list apart华盛顿邮报,在IE里却是可调的。难道IE在字体调整上也搞歧视不成?
困扰我的问题直到看到这篇大作:How to size text using ems,才得到彻底的解决。
关键点
1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。这意味这中国网站的字体大小可以被认为不可调。

95%的中国网站需要重写CSS
在我所观察的中国网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想ChinaUI

Designed by Jorux. Proudly powered by WordPress    Except where otherwise noted, this site is licensed under a Creative Commons License.