Going on Holidays?

TAKE IT WITH YOU!

Get a Library Pass and all Downloads are just $999

JULY ONLY

To learn more, check out our

Plans & Pricing
(Close)
Forgot password?
AskAudio Magazine
Join Now! Watch Tutorials
macProVideo.com
Close

Join macProVideo.com

Access free tutorial videos, premium articles and project files.

Share this article with friends!

Author Interview: Elisabeth Robson and Eric Freeman on HTML5 and CSS

Known as the best-selling authors of the Head First book series on HTML5 and web development technologies, Eric Freeman and Elisabeth Robson have created their first video courses on HTML5 for macProVideo.com! To say we are excited and thrilled at the quality, experience and expertise they've brought to these video courses would be an understatement!

Eric and Beth have been at the forefront of the wonderful world of the web for many years and have been involved in some fascinating startups as well as having worked at NASA and Disney.

In this interview they chat about their respective backgrounds, reveal their pedagogical approach to teaching, discuss how the web has and is changing, explain why everyone (yes, musicians, video editors and artists) can benefit from learning HTML & CSS and how simple tools can be used to build complex sites.

Check out their new tutorials (under the name "Wickedly Smart") here at macProVideo.com.


RS: Tell us about yourselves and about your background.

Elisabeth Robson: I started getting into computer science when I was a Freshman in college. I began taking computer classes and really got into it. I stuck with computer science from thereon and I have to credit Eric for pushing me to go to graduate school and I ended up getting both undergrad and grad degrees in computer science. I then started getting in to web development in graduate school when a friend and I started putting together a website for women in technology. There were so few women and we were the only women in a sea of men in the classes that we wanted to reach out to other women. We put up a website that aggregated resources that we found online for women, things like conferences or mentor programs. Then I did some mentoring for undergraduate women who were studying computer science. 

Later I worked with Eric at a startup that he created and then we moved out to the West coast and both went to work for Disney. Following that we began writing Head First books! I’ve been hopping back and forth between working for different tech companies and writing since then. I really enjoy teaching technology to people. I feel very fortunate to be in a position to be able to do that and now with macProVideo too!

Elizabeth Robson

Elisabeth Robson


Eric Freeman: I’m a computer scientist and I did my PhD work at Yale with David Gelernter who is a luminary in the computer science community. For my graduate work I worked on Life Streams. It’s this idea of having a flow of information that’s time-based and being able to do things over the top of that. It’s emerged as the predominant metaphor on the web, if you look at FaceBook feeds or Twitter. It’s everywhere!

I’ve really chosen to work more in the industry than in academia. I started working with NASA back in the late 80s before I knew what the internet was. They already had networks connected together so it gave me a really interesting look at what the world was going to be before it happened. That experience has carried on through the rest of my career. So, I’ve done some startups but my next major milestone was my work at Disney. I was very fortunate to have been the CTO of Disney online and Disney.com. Through that experience I saw every aspect of the web including building software for the web and creating media oriented content.

Then the books were something that Beth and I did when we had taken some time off from the corporate world and we were looking for something fun to do. So we decided to write a book! Our first one was Head First Design Patterns, a high level book on how to design software. While the title may seem a little niche and esoteric, you know something for master software developers, the book has done unbelievably well and really captured that market. 

Eric Freeman

Eric Freeman



RS: What’s the secret behind the success of your books?

EF: I think it’s a combination of good technical content, really interesting settings for learning these things. If you’ve seen the books then you’ll know they can be be kinda wacky and humorous.


RS: They’re certainly very visually engaging too!

EF: We use a lot of techniques like surprise elements to keep the learning interesting and relevant... though we’re still not sure what the secret is to their success, but we try to keep doing it.

And now we’re enjoying the transition to teaching via video. It’s been really interesting for us. We did the Quicklook course for you guys and with these later videos we’re applying some of the techniques we’ve successfully used in our writing. They’re getting better and better! 


RS: Excellent! What attracted you both to web development? What was the hook?

EF: I think the thing that excited me about it is that the technology is pretty simple and people can just go and create web pages. It’s not that hard. On the other hand, a web page, when put on a server, is part of a global publishing system. Anyone, anywhere in the world can put content up. You don’t need a record deal, or a deal with a book publisher to do it. I can just put that content up for the world to see! It’s the platform that makes it really interesting and that the technology is fairly simple to use.

ER: The same goes for me. You can get results very quickly and start learning and within a couple of hours you can start putting content on the web without needing to learn an entire programming language to get results. If you start simple and keep building and building... and as Eric said, it’s become this whole platform, so that once you’ve learned the basics of HTML and CSS you can use that to launch yourself into other areas that you can take further, e.g. building web applications. The web is so rich with capabilities and support for so many various things. It’s just amazing. 

EF: That’s a good point. Over the last decade HTML has come far. It’s now more media oriented and is concerned mainly with video, audio. The sound APIs coming out now are really impressive. Just look at YouTube!


RS: A large section of the MPV community are interested in learning about audio, video and design software and techniques. What do you think will excite this group of people about learning CSS and HTML?

ER: I think reaching out to a whole new audience that is new to HTML and CSS is really exciting. Figuring out how to make it fun for them and not dry is challenging and exciting. Even if people look at Wordpress and think “well, I don’t need to know this stuff cos’ I can just throw up a Wordpress blog.” As soon as you do that you want to start customising it or start adding support for this or whatever is special to you and meets your specific needs that may not have been done before. That’s when you need to start understanding the technology.

If you want to put up a special audio clip how do you do that in a way that works for you on your website? So even if you’re using tools available to help you create websites, it’s very helpful to understand how it’s working underneath so if something goes wrong or you want to customise it you have those capabilities. It’s important that your website stands out so it doesn’t look like everyone else’s who is using the same template.

HTML5 & CSS 100: Quicklook Guide

HTML5 & CSS 100: Quicklook Guide


EF: I have to say, and especially as I’ve been a MPV customer for a long time, that I’ve enjoyed working with macProVideo a lot. Unlike other publishers you’ve allowed us to define the creative style and delivery for the courses. 

But, back to your question... We’ve seen this a lot with our books. When we wrote the books we weren’t sure who the audience was going to be exactly. There are a lot of people who are in a job which isn’t a high-tech job and they want to make a transition and stop being an administrator and become, for example, an entry-level HTML programmer in a web design house. So, one thing we’re careful about in these videos is not to tell people they are “hobbyists”, etc. We really cover the key points you need to know as a professional. So while the wacky style is there, you simply can’t finish watching these videos without knowing what you need to know!


RS: How long do you anticipate it’ll take someone to learn enough HTML and CSS to be able to apply this skill in a job situation?

EF: Well, depends on the job they’re working in to. But HTML and CSS for creating static pages is not that bad. Let’s say there’s someone totally new to it who needs to learn it in an incremental style... give it a few hours a week for a couple of months and before you know it you’ll have a pretty good level of competency! At the same time, in the 90 minute Quicklook tutorial, as long as you know how to use a text editor, you can leave that tutorial having created a page using HTML and CSS for styling. It’s quite far to go in 90 minutes!

ER: Once they’re done watching the courses, the best thing for the user to do is put the knowledge into practice. That could be putting up their own blog, website or helping someone with a cause they are passionate about. It’s important to apply these skills in a practical way to help the learning sink in. 

EF: It’s also about getting into areas where you’re outside your comfort zone. A real-world project tends to do that because you get to a point where there’s that little thing you need to do, which you don’t know how to do, but you’ve got to figure out how. That’s how you really pick up any technologies, whether it’s learning to program, creating websites, or even producing an album. 

In our videos what we’ve done (rather than tell people to pick their own project - which doesn’t work out well in our experience), is we try to create interesting examples, that we’re forced into doing... and the reader can follow along with us as we do that. 

HTML5 & CSS 101: Hypertext Markup Language

HTML5 & CSS 101: Hypertext Markup Language



RS: So, who’s responsible for the “zany” projects? 

EF: I don’t know! What do you think Beth?

ER: I think it’s pretty collaborative. I think you tend to have the zanier ideas, but it’s a pretty combined effort.

EF: In the videos we can create these high-pressure situations that have to get done... so one thing we do at the end of one of our courses is have a call from our agent mid-video. He puts us under pressure with a variety of scenarios. Like an opportunity to develop a site for Lady Discostep, who is obviously the newest hit combining disco with Dubstep! But you’ll have to watch them to see how the example pans out.


RS: When it comes to tools, what are your preferred ways to make sites? Do you use Dreamweaver, for example?

EF: We don’t. In terms of what we use we do bounce around a lot. We discuss this in the Quicklook course: there’s a lot of tools out there you can use if you have them. But we recommend you fly without a safety net and just use a basic text editor. We do it the simplest way possible without any help from an editor. Hopefully this’ll help whoever is watching as they can grab whatever they have to hand: Text Edit like us, or Dreamweaver and use the code pane and use that as well.

ER: I use basic editors too. I do like the editors that have come out that have code highlighting which makes it easier to make sure your elements are closed and your tags are matching, etc. But I don’t use tools like Dreamweaver that has a WYSIWYG editor because I want to be in control of what’s happening behind the scenes. With editors that generate code for you I find this causes me more trouble down the road than if I build it myself.


EF: I tend to be faddish, so I’ll use Coda for a while and then another editor for a while. If you think about a site like Disney.com, you might imagine the team are sitting there using Adobe’s Dreamweaver suite. But that’s not actually what happens. Most of those sites are crafted from scratch using a much simpler editor. I don’t know if that’s the same story across the industry though. 

I think editors like Coda are great particularly as client side web development becomes more and more about interactive web applications. We do need complete programming environments around this. The reason we chose not to use a tool like that is really to keep it simple and not to get distracted by how these tools work.

ER: I think there are new tools coming out that help you to generate animations and make use of the advanced features of HTML5.


RS: Like Hype?

ER: Yes, exactly! Right now Hype is great. It’s new, small and streamlined. I do think people will get benefit using tools like that especially as it generates JavaScript and advanced CSS behind the scenes.


RS: With the rise of Mobile devices which have become browsers in themselves. Is it easy for people when learning how to create responsive web sites... I don’t even know if we’d call them web pages anymore!

EF: I tend to refer to static pages as “pages” and things that are more interactive, “web apps.” The mobile space is really interesting. One question we get asked a lot is “as HTML5 is new should I be worried about developing for it yet?” If you’re providing content to mobile / smartphone users, you should be doing it today! It’s pretty much out there on every mobile device. At Disney a heck of a lot of our traffic was coming from iOS and other modern browsers. 

This goes back to the question of why someone would want to learn HTML and CSS... For people who are really new to it, there’s one key thing you’ve got to learn up front, and that is if you’re used to creating documents in Microsoft Word, you type in the content, style it, format it... and it’s all the together in one document. With HTML and CSS it’s different. You have HTML which allows you to enter content and give it structure: you tell it what is a heading, a sub-heading, what’s emphasized, etc. But then you’ve got this totally different description language called CSS and that’s where you do all your styling.

People sometimes wonder why they should be different. Mobile is a key part that demonstrates why. The way I present something on the iPhone, iPad, desktop, or even a screen reader for someone who is visually impaired is going to be really different in terms of how the content is displayed. So the key decision in HTML to separate the content from how it is displayed is really key to how you can present that stuff differently depending on where it’s been displaying. 

ER: Yes. And the key there is you’re using the same content, but just displaying it differently depending on the device. In terms of creating responsive websites, it’s not hard to do the basics at all, but some of the more advanced features of CSS and JavaScript will help - obviously you’ll need to know the basics first.


RS: Where do you see JavaScript fitting in? If HTML is the structure, CSS is the presentation...

ER: JavaScript is the behavior. Once people start getting webpages up using HTML and CSS I think they’ll want to start adding that behavior fairly quickly because it is really exciting to have your page be responsive. Even the little things, like having your menus disappearing and re-appearing, all the way up to building a fully-fledged video game. That would require a lot of JavaScript. It’s also a great way to learn programming.

EF: We like to talk about the 3 elements of HTML, CSS and JavaScript. Most people got very excited about HTML5 when it came out about 18 months ago, and most of that was down to the new JavaScript APIs which had been added to HTML5. In its own right, JavaScript is really taking off. In the last 5 years every major company has invested a ton of money in the runtime engines of JavaScript, so it’s so much faster than it was in the earlier days.

JavaScript is even popping up in a lot of embedded environments, places like MAX/MSP - a powerful audio platform. It’s a very powerful language and I’m glad to see it really comes to life.

ER: The change we’ve noticed and seen on the web the last few years, from what was largely a collection of static pages to a platform for applications is powered by JavaScript. 


RS: These are exciting times! So, what do you both do when you’re not developing sites, writing best-selling books and creating video courses for macProVideo?

EF: I’m an untalented music/audio hobbyist. That’s how I found out about macProVideo. I’ve got way too much audio equipment: I can barely drive and I’ve already got a Ferrari! I just love it all. Whenever I get time outside of writing and programming that’s what I like to do. On top of that my 22 month-old is a lot of fun too so I spend a lot of time there!

ER: I am a big outdoor lover, so I try to spend as much time as I can outside, hiking, kayaking, all that stuff! 

EF: Yeah, I just do more computer and Beth gets away from it!


RS: Thanks so much. We’re really excited about your new range of web courses at macProVideo.


Rounik Sethi

Rounik Sethi | Articles by this author

Rounik is the Executive Editor for AskAudioMag.com & the quarterly print magazine by the same name. As an Apple Certified Trainer for Logic (and a self-confessed Mac fanatic) he's taught teachers, professional musicians and hobbyists how to get the best out of Apple's creative software. He is a Visiting lecturer at Bath Spa University's Teacher training program, facilitating workshops on using music and digital media tools in the classroom. If you're looking for Rounik, you'll most likely find him (and his articles) on AskAudioMag.com & macProVideo.com.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2014 macProVideo.com
a division of NonLinear Educating Inc.
Link