From now on no matter what happens, this sign on this left arm… will forever be the sign of our friendship.

——The Straw Hat Crew(草帽海贼团)













This is not a new function supported by OSChina, but I’m just aware of that yesterday. Long time ago, I had once made a choice whether to use github or OSChina to be the repository storing my public code, and I finally use github later due to the fact that I found OSChina seems to have to function like github Pages. You know, as I front end developer, it’s import to show not both your code but also its visual display to others. Therefore, functions like github pages are very meaningful to me and it’s also very convenient. Without functions like github pages, I will need to build my code and then use FTP/SFTP tools like FileZilla to upload my frontend static files to my server. If you change your code in high frequency, you will find this way quite time-wasting. Whereas if you use github pages, all you need to do after rebuild your code is type one line’s command in your command line tools and press enter button ^_^.

Using Github Pages

Right. There is a npm package called “gh-pages”. If your built files are stored in a folder named “src” in the root directory of your project. You can add one custom script in your package.json file like below:

The scripts “gh-pages -d dist” will deploy all your code under dist folder to a remote branch in github called “gh-pages”, and then you can visit your project online through link like “http://yakima-teng.github.io/demos/” in which “yakima-teng” should be replaced by your github user name and “demos” should be replaced by your project name of your github repository.

Using OSChina Pages

Although there is strings “gh” in the name of the npm package “gh-pages”, this package is also available to use for OSChina Pages. As per the official npm website for this package, you can find many custom options. In short, if:

  • your files need to be visited online are all built to a folder called dist in your project root,
  • you want to use a remote branch called “oschina-pages” to be used for online display purpose,
  • your remote git repository address is “https://git.oschina.net/yakima/demos.git”.

You can add a script alias (short name) “deployToOSChina” in your package.json file like below:

Yakima Teng,

August 28, 2017,

In Shanghai, China

Install nodejs on Ubuntu


Lecture 01: Introduction and Overview



For those of you who don’t know me, my name is Christopher Scanland. I’ll be the lecturer and tutor in this subject – The Online Production Workshop.

What you have coming around at the moment is a subject outline. It’s a cut-down version of the longer version which is online and in this seminar today we ‘re just going to be going through the expectations of the subject, going through a little bit of what to expect in this subject, and in terms of assignments, due dates, some of the content of the subject, and some sort of justification of it too because, I guess one the things that this course does, or this subject does is take you into sort of the technical side of production, particularly online production.

When I first taught this subject in 2008, we didn’t sort of, we didn’t go into the code. We just kept you looking at Dreamweaver, so you never actually saw any code or HTML (INAUDIBLE). It was more or less building a website, without, like if you were just using Word or a similar application.

Now I’ve changed that, and I’ve got you all coding, and a lot of people get a little bit frightened of that.

So first of all, I wanted to ask: who has built a website before, with code or with Dreamweaver? No? No one? That’s interesting because one of the things we get told, as university lecturers, over and over again is that, generation Y (most of you are generation Y) are all Digital Natives, and that you’re all at home with technology, and that you’ve all done these things before. I am very suspicious of that kind, actually. I think it’s kind of, it does no one any favors to pretend that. We’re all up with technology. And I’m certainly not blaming students for not being true to the theory educational theorists come up with, but I think educational theorists have actually run a little bit ahead. It may be true in some places, but it certainly isn’t in my experience true of La Trope students. But in this course you will be building a website. You’ll be learning the techniques to build a website.

Who has a blog? That’s the other question. Okay, who has used. Of those people who have blogs, who has one on wordpress.com? Okay, and other people have blogger.com, Tumbler? Something like that? Yeah? Okay. Because we’re going to be blogging, in this subject as well.

Now you might, and this I guess is my way of justification. You might ask yourself, well, I’m a media student, or I’m a journalism student, why do I need to learn how to code? Why do I need to learn how to do anything but the creative side? And the reason I would give you is, I thinks it’s, like any skill, whether you’re doing something like video game production or sound production, you should actually know something about the technologies that you’d use to produce these things. And so much of journalism is now online, and online of course as we know is changing the face of journalism. It’s changing the face of public relations for those of you who are interested in that kind of path. It’s changing the shape of all communications. And I think it’s going to be incumbent upon us as educators to actually teach something about those technologies.

So that’s what this course is really about – Teaching you tha basics of HTML and CSS. We’re going to be looking at and I’ll be talking a little bit more about this, the latest iteration of HTML, because there are different versions of HTML. Luckily there’s only about, you know, about a 2% difference between versions. So it’s not a big deal. So the version of HTML that I’m going to teach you will equip you to understand all the other versions as well. So although you may come across HTML 5, which is what we’re going to be talking about in this subject. And you may come across HTML 4, 4.01, you may come across XHTML. There are kind of names, and they do many things, but there’s very little difference between XHTML, HTML 4, and HTML 5. You’ll be pleased to know. We’ll also be talking about accessibility and design issues, this is a major issue online. And you might think I’m not a designer, didn’t enroll in a design course, I’m not in a computer science course, why are we doing this? Again, I maintain that these sorts of skills are absolutely intergral to a full journalism/media/pr education now. And even if you don’t go on to create websites, or anything in that vein, just knowing how the back end of these things work, what’s under the hood, will help you to become a better writer. And to kind of know the limitations and possibilities o this technology as well which will then fold in to kind of how you think about story telling. By way of a couple examples here, or a couple of stories of how this pointed out during the non-teaching break, I caught up with a colleague, who teaches a similar kind of course in Canada, and one of the things he tries to get students to do is not just to think about the technology, all the sort of code, and the applications, and all those sorts of things, but also how you actually go about telling a story online, in a way that is fundamentally different from in print, or broadcase, or radio. And even if you have audio and video in it, how do you do it differently online. So I think all of those are absolutely essential to a journalism education.

The other thing I would say is that again you may not wish to. This may be the only course you ever do where you use HTML and CSS. And that’s fine, but I promise you that having a little bit of knowledge particularly on the knowledge of code, even understanding the grammar of code, the syntax and code things together, will put you so far ahead of the people who don’t know anything about it. And I can tell you this from my own experience. Because I’m sort of in the journalism area, whenever people have problems with websites, or with Upstart, which I built, things like blogging platforms and whatever, they come to me and that creates work for me. But it also means you have a lot more flexibility about what you can do, and the possibilities of what you can do. So you can kind of, this will give you an edge, in terms of employment, and you only have to know a little bit, to be an expert, or to be considered an expert, which is the same thing. Okay, it’s not the same thing. But for the purpose of perceptions, it is the same thing.

The other thing we’ll be looking at is building an audience and promoting a website, which is a huge area. We’re just going to touch on it. But it will give you a taste of the issues and considerations that go into those things.

Okay, so, at the end of the course, you should be able to do these things. Design and code a functional, user-friendly web page. And even if you have’t done this, I’m not expecting you to become… I’ll get into this in a moment (我会稍微说说这个). I’m not expecting you to become a designer, through tis course. I’m not a designer, I don’t expect you to do that. I’m certainly not a computer scientise, and I don’t expect you to become a computer scientise, okay? So I see, I’m unable to teach these things. What I can teach you is some very basic design skills online, and loads of things like, can you aligh things to the left, can you anchor things to a page like, and what I’m talking about, when I’m talking about anchors is visual anchors. So like, for sort of non-designers like me, things have to be connected to other things on the page. So if you have left aligned, then you have centered, then you have right aligned, and you don’t have them connected to anything else, then it’s not a very designed page. But if you have left aligned up here, and you have something down here, that that’s left aligned, and something right aligned over here, that lines up with somethings on the right, then it’s kind of a balanced page, even if it’s just a picture over here, it’s just something for the eye to follow. This is why centered text, if you ever get an essay, an essay you write, you put it and you center it, in Word, it looks terrible, it’s very hard to read, because there’s nothing for your eye to follow. So we’re going to be talking about design at that level, very simple level.

I also want you, at the end of this couse, you’ll be confident on reading and writing HTML and CSS3 cascading style sheets, and again we’ll get into what those acronyms actually mean in a moment, but you will have kind of a taste, and you only need a little taste, to get the grammar or syntax down, and you can kind of work out what’s happening in a page. I would warn you though, and some of you will come, and it’s often the person that comes up to me at the end of the course, and says you know, I’m really a technical Luddite, I know nothing about this stuff. I’m going to really struggle. It’s often those people that by week 12, week 13 are really into HTML and CSS. And I think some of you will be … so that’s definitely not going to be me, but HTML and cascading style shets are a bit addictive. They’re frustrating but addictive, because it’s kind of like working out a puzzle, and you get instant feedback. So you can kind of write your code in the text editor, then load it into the browser, and you get an instant result, and you can see what changes happened, and if no changes happened, then you have to go back to the drawing board, back to the text editor. But you get this very quick feed back, and it becomes highly addictive, and there’s also, with coding, there’s often the case that you’ll just sit there writing code, and you telegraph into another, sort of, zone of consciousness, and you look at you clock, and you think 5 minutes has passed, but it’s actually 3 hours has passed.


It’s kind of one of those things where it almost becomes meditative, you kind of go into thise meditative state. But I will say it’s actually, particularly at the start, very very very frustrating. So if you are making mistakes, sorry I should rephrase that, if you’re not making lots of mistakes, up until about 8, you’re not trying hard enough. Okay? You’re not writing enough. The only way to learn this stuff of the fastest way I can teach you or tell you to learn it is to write lots of it, make lots of mistakes, and come out the other end, and it will start to make sense. And again, to some of you, it might start only making sense by about week 10, but that’s normal. So don’t worry if you’re kind of like, you know, uterly confused with this stuff, particularly when we get to things like layouts, and divs, where you divide up the page, and shift things around. If you find that particularly frustrating, that’s a good sign. Because it means that, you know, first comes confusion, then comes understanding. So if you’re making lots of errors, but you’re writing lots of code, and finding it very frustrating. That’s very normal with HTML. It’s a steep learning curve. But once you get it, you get it, and it’s time to make lots of things. The other thing why it’s a steep learning curve is that you have to learn one thing, then you have to zig-zag over here, and learn another thing, and then you come back, and that first thing kind of makes sense, and then you kind of download a bit more HTML. Then you go back to the CSS, so it’s kind of a zig-zag approach. And it’s only at the end, when you look back, and go Ah, it all makes sense. But until that point, a lot of you will find it very frustrating, and that okay. The other thing I want you to be doing again by blogging, is to make an online portfolio of work by a blog, and twitter accounts, so we will be setting up twitter accounts. So who’s on twitter? Yep, for those of you who aren’t, we’ll get you on twitter. That’s again another important thing. You may think twitter is just this thing that people keep talking about, and people keep telling you to get on twitter, and you say no, and I’ve said this before, it’s becomming more and more integral to news. And a good example of that, my wife Casey recently went to a book launch by Darren Hinch, and at readings, and Darren Hinch, as part of his launching of his books, he said that in the news room, they no longer subscribe to feeds anymore, like they don’t have Reuters, and these kinds of wire services. Now they just use twitter, they just sign up to their twitter page, and it’s instantaneous. So you get this sort of news, and they buy in the content that they want. So the just use twitter now. So twitter is transforming the way, in which people know about news. Of course, you can use it, for completely banal purposes, such as you can update people on what you had for breakfast, bu there are more serious purposes, that people are using it. And it’s across the board. It’s not just journalism. It’s people working in PR, working in media. It’s a whole range of things, and who knows? In 5 years twitter might not exist, and that’s okay, we will have moved on to the next thing. The thing is to get on the track now and then watch as things change, and how they change. So I’m not suggesting wordpress.com is going to be around forever. I’m not suggesting twitter is going to be around forever. But those kinds of communication are reaching , sorry those platforms are reshaping, the ways in which we get news, and the way in which we communicate online. So they’re good starting points, at least for the present.

And what the subject is not. It’s not a design course. I’m talking about basic principles only. We’re not intersested in creating an MSN.com. I’m not going to teach you anything like java script or you know action script, or any of these advanced tools, we’re not going to go in to XML. If all of that seems like blah blah blah to you, that’s okay, we’re not going to be touching them. They are, kind of, if you choose to go on, these would be the kinds of things, you would come across later on. But HTML and CSS is the basis of the internet. It’s kind of like the DNA of every web page. This is not a computer science course, and again, a lot of people are scared here. They say well you’re teaching us code, that looks like computer science to me. A computer scientist would laugh at that. HTML is mark-up, and I’ll show you an example, of what HTML is. It’s basic formatting information, that a computer can understand. But there’s no, in computer science, you have things like variables, and you can manipulate data. HTML what we’re going to be learning anyways is completely static. You tell things this is a paragraph, this is a heading, this is a section of a page, this is the heading section, this is a menu. That’s all HTML does. It does nothing else. It doesn’t manipulate data, it just is a way of encoding information, in a way that a web browser can understand. So it’s not computer science. This is the technologies that we’ll be using. HTML 5, or just HTML as it’s called now. You will find HTML 5 referred to on the internet, as the 5th iteration of HTML standard, the standard language of the net. They’ve now dropped the 5, it’s just HTML because it’s what they call a living standard, so it’s going to be continually updated, and maintained. We’re also going to be looking at CSS, and the latest version of that is CSS3. CSS stands for cascading style sheets. And style sheets, one way of thinking about this and it’s not a perfect description in my mind anyway. HTML tells you what is a paragraph on a page, what’s a heading, what’s a menu, what’s a link. CSS will tell you what a heading looks like. So that’s the basic divider. HTML will tell you about, the structure of the page. CSS will tell you what it looks type is. So HTML will say This is a paragraph, and CSS will say This is a paragraph and render it in Arial 12 point font, in a horrible shade of green. So that’s kind of what CSS does. HTML sort of does nothing. It just sort of tells you what’s a paragraph, what’s a heading, and you can target all of these things. We’ll go into that. Those are the basics, the basic technologies we’ll be looking at. HTML just to give you a bit of history. HTML actually, it’s actually people wonder, where these things come from, how do we all agree? Working groups and groups that get together. The latest version of HTML, which stands for hypertext markup language, developed by the Web Hypertext Application Technology Working Group, and this is basically people from Apple, Google, Mozilla. Mozilla are the people behind Firefox, the browser Firefox, and Opera, another browser manufacturer. And they were disheartened with how the World Wide Web Consortium, that’s this organization here, W3C. They call themselves. This stands for the World Wide Web Consortium. These were the people they kind of maintain the language. Another sort of working group, these sort of companies, with a key interest in the net. They developed the hypertext markup language, and now have kind of been annoyed, so the slow progress of developing HTML, the previous version or iteration of HTML, came out in about 2002, and nothing had really happened, fr years and years and years. And they felt they were being ignored, and their browsers, and development, of what people were doing with the web was changing, and they really weren’t keeping up. So they formed their own working group, came up with a specification, a standard called HTML 5, it’s the 5th iteration and that’s what we’re going to be looking at. The tricky thing about HTML 5, oh, I should, before we get into that, if any of you have a computer now, if you have a PC or and Apple, you have all of the software you’ll need, to start making web pages right now, all you need is a text editor and a web browser. A web browser, quite simple, although I’ll talk about some of the dangers. Internet Explorer, Microsoft, Mozilla Firefox, Apple Safari, and a lot of people don’t know, that Safari is available for PCs as well. It’s not just for Macs. So if you go down here, Safari 5.1, which I think was released yesterday, for Mac and PC. Google Chrome, and the last of the bunch, that hardly anyone knows about, is Opera. And Opera is, a lot of devices have Opera. I’ve got Opera on my Blacberry, for instance. Opera is kind of the standard, they’re really keen about keeping standards, so everything is standards compliant. When web people talk about standards complicant, they mean that, everyone abides by the same rules. So these people, particularly people who like Opera, ted not to like Internet Explorer, for instance, because they say, Internet Explorer doesn’t really abide by any standards, because Microsoft is so big, they can kind of more or less do what they want. That’s a whole debate, and we’ll leave that for the message boards. People complain, vigorously, particularly web designers. They hate working with Internet Explorer. The reason why, and this isn’t an anti-microsoft rant, people actually, there is a well-founded dislike, by people who have to build websites, because Internet Explorer 6 or 7 almost did not work in supporting cascading style sheets. So as style sheets were developed, version 6 and 7 of the Internet Explorer Browser didn’t really keen up, so they had to find all these work-arounds so their pages are rendered properly in Internet Explorer, and dispalyed properly to the user in the way that the author of the page intended.




上海宝山顾村棉被加工店 专业加工新旧棉被