Monthly Archives: January 2015

【HTML&CSS】边学边写更有动力!

这是一门”公开课“的课程笔记(Codecademy 上面的 HTML & CSS 课程)

哈,终于完成这门课的 HTML 部分啦!

学习这门课的过程特别有趣,虽然长时间写代码有些无聊,但看到自己的成果就特别开心。学习 HTML & CSS 的一个优点就是,学了马上就可以用上,可以展示出来!

先展示一下我最近的成果吧!(以下是我写的两个网页)

分享一下我学这门课的几点心得吧~

  • 给学习以解决实际问题的需求

哈!最近不是期末考刚考完吗?又到了新学期选课的时候,每当这时我们总爱到处问学长学姐

“喂,那个老师怎么样?给分好不好?讲课水吗?”

“哪些老师是杀手,给我个黑名单吧”

“我想知道电磁学A几个老师授课的评分方式”

“这门课你上过吗?感觉怎么样?”

于是我就想,如果我们大家都把自己上过的课点评写出来,对啊,像校内的MOOC学院一样,有很多课程点评就好了。再加上我自己有记录强迫症,一学期结束了就想给每门课做一个课程主页。正好学HTML,还能给学弟学妹们做选课参考。说做就做!

  • 边学边做,大量的重复

Codecademy 上面的课程有一点实在想吐槽!!时间完全不靠谱!

写着7个小时也不知道是怎么算出来的!反正我是从放假(1.23)到现在(1.26)空闲时间一直在学这门课。

这这门课的时候,每当我学了一个新技能,就会想应用到自己的网页上。对,开始一定要早!我说的是,不要想着自己全部学完了,再开始写自己的网页。你记不住那么多新知识的。必须边学边用,而且大量的重复。还记得你高中刷了很多数学题题吧!有些题到现在你还记得做法,没错,就是肌肉记忆。一样的道理。当然我们不是要你刷题,而是想要你应用到解决实际问题中去。我一直很反对刷题,因为很无聊,但通过解决实际问题来巩固记忆,实在是再好不过了!

到目前,我手写了7个HTML文件啦!

这是我手写的第一个HTML,因为要开始学CSS,想把这个文件拆成CSS和HTML两个部分,所以就来写笔记和大家分享了。可以戳这里,并且右键查看网页源代码

说一下我是怎么开始的吧?

我们学校给每个学生提供一个静态的个人主页,网址是 home.ustc.edu.cn/~你的科大邮箱id,我在电脑上用编辑器写HTML,然后用浏览器预览,写完了以后,通过Filezilla软件把HTML文件,从本地扔到我的远程(home.ustc.edu.cn)家目录里。

然后从最早的index.html开始,先写一个人主页,很快就仍上去了。之后我一直学,然后不停的改进,到目前为止我已经写了好多个HTML页面了!

  • SHOW!分享,给你坚持的动力

每写完一个课程点评(HTML页面),我的成就感又增加一点。总是会忍不住把它分享到社交网站。再附上运营的宣传,比如:

“想知道中科大大一女生体育课什么样吗?想看妹子们跳健身操吗?这里不仅有图片,对!还有视频~基础体育课程档案

然后就会有很多点赞的,评论的。然后我就继续很开心的学 Codecademy 上的这门课,继续手写 HTML 去了。

最后列一下,到目前为止我写的HTML吧。大家可以按 F12分析我的代码,也可以右键【查看网页源代码/View page source】,来看我写的 HTML,除了边学边用,大量重复以外,模仿也是很好的学习方法哦!(从现在开始,我就能看懂一些网站源代码啦!)

  1. http://home.ustc.edu.cn/~jenny42/original-index.html(这个网页是不断改进的)
  2. http://home.ustc.edu.cn/~jenny42/single-variable-calculus.html
  3. http://home.ustc.edu.cn/~jenny42/c-programming.html
  4. http://home.ustc.edu.cn/~jenny42/template.html(对,写到第三门课的时候,我就自己写了一个模板了,模板也是不断改进的)
  5. http://home.ustc.edu.cn/~jenny42/ideological-and-moral-cultivation-and-basics-of-law.html
  6. http://home.ustc.edu.cn/~jenny42/beta_index.html(这个页面就是为了学习表格table的使用,但是我觉得它很丑,所以…随便加了一个页面)
  7. http://home.ustc.edu.cn/~jenny42/basic-physical-education.html

我按写的顺序排了一边,你可以从这些页面看到我的进步(比如从没有颜色到有颜色,颜色搭配变的更加美观。)

继续学习CSS之后,会把首页 http://home.ustc.edu.cn/~jenny42 拆开重写,所以第一个链接给的是一个copy的版本。

最后加上几篇最近学这门课的过程中,查看的网站和博客

  • w3school 对!这个怎么能忘记,有时候我想实现一个新效果,但是Codecademy上面的课程还没有学到,于是就去 w3school 里面搜一下。Done!问题解决了~
  • 阮一峰的网络日志 我在搜一些技术问题的时候经常搜到他的博客,这次看了两篇字体的简介。《字体笔记》 《中文字体网页开发指南

O(∩_∩)O 啥?你问我代码最后面那一堆用 <script></script>包起来的东西是什么?

哦,发帖之前,我想统计一下访问量,就用 Google Analytics 站长工具,粘了一堆代码在里面。因为是静态网页,所以…每个页面我都粘贴了一遍…看来需要尽快学动态网页啊。

Emacs 多窗格命令

你可以按 C-h t ,从帮助文档中看详细介绍:

首先,多窗格的时候,光标始终只会在一个窗格中。我们称之为当前窗格,或被选中的窗格

C-x 2 水平划分两个窗格

C-M-v 向下滚动另一个窗格

C-M-S-v 向上滚动另一个窗格

C-x o 将光标转移到另一个窗格

C-x 1 只保留当前窗格(关掉其他窗格)

C-x 4 C-f 打开一个新窗格,并且光标跳到那里

我发现自己最经常用的还是,Ctrl-x-1,Ctrl-x-o,Ctrl-x-3(竖直划分成两个窗口)

被 Emacs 虐的日子

一周前我想重新开始学 Python。之前我写 Python 是在 Windows 下用 IDLE,或者是在Codeskulptor在线平台。这学期初开始写 C 代码的时候,就是在 Ubuntu 下用 Emacs 了。于是就想在 Emacs 里写 Python,不会弄。搜了一下 Emacs,就开始看这篇神文:一年成为Emacs高手(像神一样使用编辑器)

我应一开始就照抄 世界级大师 Steve PurcellEmacs 配置.

如你不愿折腾,那至少不要重复我的错误,不要质疑,不要创新,跟着高手做.比如 Eric Schulte 的 Emacs-starter-kit 很适合初学者.Bozhidar Batsov 的配置 也不错 (不一定适合初学者).也可用 我的配置.

我一开始下载了 Purcell 的配置,结果配色很奇怪。Purcell 和 神文作者本人都是用 Vim 的 键绑定(key bounding),从 Help-Tutorial 来看,Purcell 改了 Emacs 的一些键位,并且在 Tutorial 里用红字说明了,但我在尝试的时候,似乎他的修改都没有生效。总之,我觉得他的配置我估计是没装好,于是又下载了另一个配置。

下载 Emacs-starter-kit 之后,我有点没搞清楚,最终应该因为没搞定,又觉得效果貌似看不出来。。。于是又换成作者本人的配置了。

作者本人的配置,一装好效果就很明显,颜色很喜欢…然后,按照说明解除 Vim 的键绑定就可以用了。结果几天后打开,编辑python文件瞬间卡死。最后光宇说是某两个插件有bug。反正我自己是搞不定。

作者 一直强调新手一开始要用大神的配置。可是我连下载安装配置都搞不清楚…..光宇推荐下 starter-kit,剩下的自己配。下次再出问题,可以考虑一下。Emacs 有的搞的…感谢光宇带我入坑。

该期末考复习去了……

疯狂的快捷键

哈哈,自从上周看完 Emacs 简单操作的一些快捷键,就开始想摆脱鼠标=

于是:

Codecademy 快捷键用起来

http://www.codecademy.com/blog/67-bringing-back-keyboard-shortcuts

这是一篇官方的博客,主要讲了4个导航快捷键(Navigation shortcuts)

Reset Exercise —— Alt-R
Next Exercise—— Alt-P
Previous Exercise—— Alt-O
Save and Submit—— Control-Enter

http://help.codecademy.com/customer/portal/articles/1402980-can-i-navigate-codecademy-courses-with-keyboard-shortcuts-#pc-shortcuts

这是搜到的另一个贴子,还讲了文本编辑快捷键(Text editing shortcuts)

用了一下发现这些比较实用(哎呀还有好多不想写了):

  1. Ctrl + D ==>> Remove current line.
  2. Ctrl + Left ==>> Move the cursor one word to the left.
  3. Ctrl + Right ==>> Move the cursor one word to the right.
  4. Ctrl + Home ==>> Go to the start of the document.
  5. Ctrl + End ==>> Go to the end of the document.
  6. Ctrl + Backspace ==>> Remove the word to the left of the cursor.
  7. Ctrl + Delete ==>> Remove the word to the right of the cursor.
  8. Alt + Shift + Down ==>> Copy current line down.

Google Chrome 快捷键

https://support.google.com/chrome/answer/157179

刚刚看Chrome快捷键的时候,惊奇的发现有一些光标的移动和Codecademy编辑框里是一样哒!

比如:地址栏快捷键,Ctrl + 方向键左/右(光标跳动),或 Ctrl + delete/backspace(删除词语)

还有其他我原先记不住/不知道的(按好用/玩程度排序)

  1. Ctrl+Shift+V ==>> 从剪贴板中粘贴内容(不带格式)  #再也不要用notepad去格式啦!
  2. Ctrl+Shift+T ==>> 重新打开上次关闭的标签页。Google Chrome 浏览器可记住最近关闭的 10 个标签页
  3. Ctrl+W ==>> 关闭当前标签页或弹出式窗口
  4. Ctrl+J ==>> 打开“下载内容”页面。
  5. Ctrl+Tab ==>> 切换到下一个标签页。
  6. Ctrl+T ==>> 打开新标签页
  7. Ctrl+N ==>> 打开新窗口

 掌握快捷键的方法

多用啊!

我觉得,先大体浏览一遍帮助/教程,看下都有哪些奇技淫巧,有哪些自己相见恨晚的快捷键,然后先记住这些。再把这些帮助/教程,下次用的时候打开。每次操作之前,先想想有没有快捷键可以实现,不记得现查。并且怀有这样的信念:“我不用鼠标,我不用鼠标,我就是不用鼠标”。

不久就能形成肌肉记忆啦!

很多快捷键很少用,也没必要记住吧~

元旦手机被偷事件始末

昨天挺悲惨的,大早上六点知道上海外滩的踩踏事件震惊了。中午自己的手机就被偷了。。。第一次手机损失,好长一段时间我一直无法释怀,想着“如果不是怎么怎么样,我手机就不会被偷了”。竟然有考试改错答案那种后悔感。

现在来交代一下事情始末吧。

起因:不熟悉学校周边环境,边骑车边看地图

昨天下午,室友们为”发泄学习C语言的痛苦,并庆祝C语言终于考完试“,去维果KTV唱歌。我因为不会唱歌不想呆太久,又有事儿,就迟了一个多小时才去。赶时间,所以骑自行车,又不熟悉校园周边环境,连乐城在哪也想不起来了。就一边骑车,一边看百度地图,从东区西门出去,过了马路,向北骑到了安医附院那个十字路口。

被偷:瞬间发觉,却不知小偷是谁

再往东走就是维果大厦了吧,我最后一次看手机地图。于是给舍友发了条短信“我到安医附院附近了”,然后就把手机塞进了大衣口袋,原来拿手机的手放到了车把上,等红绿灯准备过马路。

然后紧接着就感觉到左边口袋东西被抽走了,马上意识到手机被偷了。从来没想到手机被偷也会发生在自己身上,因为每次在公交车上都会把书包背在前面,大部分时间也比较警惕。

被偷瞬间我是有感觉的,于是直接转身,却无法判断小偷是谁。我几乎可以断定那个时候,小偷还在我的视野以内,看着周围凌乱的人,貌似有两个中年男性看起来挺像小偷的,一个拿着一个纸袋往南走,一个正要上出租车。但后来觉得,也许是周围的其他人。总之,我愤怒极了,赶紧把自行车摔到地上,四处环顾的走了几步,当时想要是认出谁是小偷,一定冲上去揪住他,毫不畏惧。没认出谁是小偷,我好沮丧,想起自行车别再丢了,就重新回到车上,估计手机也是回不来了。

怎么办?一片空白,没有手机,无法和任何人联系,除了父母的手机,不会背任何人的号码。然后,又骑车巡逻了一会,放弃,愤怒,无助,想着手机上绑定的各种服务需要取消,以最快的速度骑车回了学校。根据后来的记录,大概只花了5分钟。

紧急处理:手机被偷怎么办?

几乎是冲到了活动室,告诉小伙伴们手机被偷了,然后开始解绑各种服务。

首先,我的手机是有屏幕锁的,然后手机上的大部分服务都是记住密码的。从外面赶回学校,大概是太激动了,特别累,而且肚子疼的厉害。boj 帮我打了10000号,把手机号码挂失,然后开始登小米云。比较坑爹的是,我的小米账号有安全令牌,也就是没有手机自己是无法登录的,搞了好久,也打了几次客服,最后去电信营业厅补了张卡,又借了一部电信手机,才终于登上。我手机几乎所有数据都是同步到云端的,所以手机被偷倒是没什么数据损失,把小米账号安全令牌取消,利用找回手机的功能,向手机发出了”删除SD卡上所有数据“的命令。所以,只要小偷用原来的系统联网,SD卡的数据就会被抹除,而如果小偷先线刷系统,大概还是能看到SD卡的信息,不过我们觉得小偷应该不是冲着数据去的。

再想想手机上的服务,支付宝钱包是有手势密码的,QQ 和 google 账户后来也把这部手机从设备锁中删除了。

想想还能做什么呢?于是就报警了。以上这个过程,我都是比较激动,一点都不淡定。

报警:派出所看监控,手机被偷也能立案

第一次打110报警吧,电话里说了下事件和地点,然后就和 boj 骑车一起赶回手机被偷的地方去了。到那里时,一辆警车已经在等了。我激动的和警察叔叔说,就是这里就是这里…blablablah我的手机是怎么被偷的…然后就上了警车,去派出所了。

我们去的是【合肥市蜀山区三里庵所】,一个民警给我调出了监控录像,出事的时候我看了手表,大概是两点半左右吧,后来根据监控回放、通话记录等得到的一些信息:

  • 14:15 我给舍友最后发了一条短信
  • 14:16:50 我已经骑上自行车准备回学校了
  • 14:23 已经赶到活动室了
  • 15:45 报警

派出所的监控系统特别卡,有好多摄像头可以调,原来它们被称作“枪口”。看了很久的监控,最后从“金寨路绩溪路西北角枪”和“金寨路189号建四公司宿舍门口枪”看到的被偷的前后的自己,但是由于被偷地点刚好是摄像头的盲点,并没有看到被偷的画面。大概都是,差那么一点就被录进去了。╮(╯-╰)╭,派出所的系统卡的一逼,经常戳回放没有反应,警察蜀黍一会还会用我看监控的电脑做点别的事情……

最后也没在监控中看出谁像小偷,倒是看到自己去的时候骑的比较慢,左顾右盼一直看路,回来的时候先是看了一会周围的人,然后决定回学校之后就飞快的骑走了。蛮逗的…你可以看到,紧急情况下你自己的的反应。

大概看了一个多小时的监控,还是挺治愈的。放弃治疗之后就做了笔录:

案发地点:金寨路和绩溪路的路口,西南角

案发时间:2015年1月1日14:15-14:17

事件:手机被盗,属于治安事件

  • 手机型号:黑色的米3电信版
  • 金额:1499元
  • 其他信息:手机是2014年9月初买的

还记录的一些我的信息,联系方式等。警察蜀黍嫌麻烦就叫我不要做口供了,然后还让我写“没有时间做口供”并且签名,后来好后悔没有做口供啊。。。这么难得的机会,没体验一下也真可惜!

大概在派出所呆了2个小时,警察蜀黍最后问我下次买手机还买小米吗?我说是啊,然后对方就从办公室拿出一部”米3联通版”,送到我手里……问我们买不买二手,这联通手机是他同事不用的打算卖掉,还算新,如果想买可以联系,大概900-1000,还留了个联系方式。。。这剧情我也是醉了!

反思

之后回学校吃饭,看电影…看电影的时候有时还会想起自己的手机没了,这部mi3c手机挺好用的,而且和boj的手机是一样的…(这只是碰巧,买手机的时候我们还不认识…),想想小米手环这几天的数据是没法看了,我其实是非常依赖手机的,除了上网,我上课记笔记、记作业、记每天要做的事情,都是用手机。更不要说拍照,支付宝,买车票,QQ人人,各种…

在活动室解除权限的时候,在派出所看监控的时候,我特别希望我能给手机搞个自毁系统。让小偷偷走了也没用…真是恨到了极点。

经过这件事有几个教训吧!

  1. 在外手机尤其要小心。我们后来得出结论:我是边骑车边看手机,被小偷盯上了,所以才会在手机离手1分钟内被偷。手机千万千万不要放在,没有拉链的大衣口袋。不过想起来平时去学校食堂也都是把手机放大衣口袋…
  2. 手机被偷不要慌张。我当时在路口就挺激动的,回到活动室也是,不够淡定…
  3. 尽快挂失和报警。主要还是重新补张卡,然后处理完这些再报警吧…手机被偷也是可以立案的

 

嗯,结果就是没去唱歌,还搭了大半天时间处理手机被偷的事情。其实手机被偷瞬间还有些放松的感觉,终于可以不去唱歌了!(不好意思拒绝舍友…(-。-;)额)。整个过程中,感谢 boj 的陪伴,要不然我那么情绪化,晕头转向的一定不能把事情处理好,也很感谢活动室的小伙伴。在外手机被偷,第一个想起的就是联系boj,然后赶回活动室,活动室简直和家一样…就这样呗。

套用小学日记结尾,这真是令人难忘的一天啊。