An Introduction to the World Wide Web for Very Senior Programmers

Slides

Transcript

Welcome to an introduction to the worldwide web. Who here is a very senior programmer? I need some more noise. Yes, thank you. Very good. So this talk is for you. It is December 15th, 1995. Now it is unseasonably warm for December, but the scientists have reassured us that climate change will be fixed by the next millennium. And talking of the next millennium, please give me a cheer if you are ready and you have sorted out your millennium bug problems. Thank you very much. I like to hear it. Of course, because you're all very very senior programmers. Very good.

All right. So, um, why are we here today? We are in a dot comt boom. There are websites for everything these days. There are bookshops, auction sites, dating sites. There's a guy Craig who made a list. We are truly in innovative times and it is all powered by the worldwide web and HTML. And I want to talk about HTML today and languages in general.

Please here give me a cheer if you are a Cobol programmer. Thank you very much. Very good. And what about C++? Not that many of you. What about early adopters in the audience? Anyone here writing Java? Very good. PHP? Yes, that came out the this year, didn't it? How many personal homepages have you made, Ilija? "Too many." Too many. That's a lot. What I like to hear.

Okay, so we we've we've got a lot happening on the world wide web and HTML 2.0 has just been released just a few months ago and it is changing the way we look at the world wide web. But I also want to talk to you today about how we build stuff for the world wide web. And I want to plant a question in your head. Why are we still writing HTML using text and text editors, if this is the way the worldwide web is going? So, I'm going to tell you all about HTML, all about the new advancements, and everything's going to be wonderful. Let's go. Oh, Ilija, were you on the phone again? I mean, it happens. It's fine. I'm sure you'll get a second phone line at some point. We'll just wait. Won't take too long. Excellent. Okay. Very lucky that it connected first time, right?

So just a quick primer because I know most of you here are working on servers and and programming and the back end and databases and stuff. So let's go and have a look at the world wide web. Quick primer. So, the world wide web, invented by my mate Tim Berners-Lee in 1989 and it was released publicly just four years ago in 1991. And so much has happened over the last few years, but it has exponentially increased this year in 1995.

So quickly, now, I know what you're seeing here is probably blowing your mind right now but please, I will tell you all about it in due course. Let's focus on this for now. HyperText markup language, that's what HTML stands for again, invented by Tim Berners-Lee just two years ago in 1993. And it is machine readable. It defines the content of everything that we see on our CRT monitors in front of us. And it's the new programming language of the worldwide web. It is a fully-fledged programming language.

Surfing the web is fresh this year in 1995. You can buy books about the internet and you can even buy books from a website. If you can't get down to your local bookstore, there's a really small independent homepage called amazon.com, and you can purchase this and it will ship to your house in 15 to 30 business days. And I really want you to to be encouraged to support your local online websites, your local stores. I have no doubt that amazon.com will continue to be a beautiful and healthy community-based business.

All right. So, what will the web look like in 30 years? That's the question we're talking about today. This is an artist's impression of what the year 2020 will look like. 2020 is going to be a great year. We're going to be in our homes surrounded by devices doing meetings, family quizzes, dating probably, and shopping, all of the things, working in our homes trapped by our devices. It's going to be a brilliant year and I I cannot wait to have the internet glued to my eyes.

But some people, however, do not believe in this brilliant future. Some people think that next year in 1996, the internet will completely collapse. Don't like this guy, Bob. He's not on my team. But you in here, you can prevent the collapse of the internet by adopting HTML 2.0 today and building amazing homepages, growing the world wide web for everyone as a community, and we will all profit inside our hearts.

So today's agenda is this. I'm going to be talking about images. Remember that thing that blew your mind just now? We're going to be talking about images on the world wide web. We're going to be talking about new advancements and proposals for how we might present HTML on a page to our users, how we might style it. And then we might also talk about, and we WILL also talk about going beyond the read only experience that the world wide web has been for the last four years. We're going to talk about bringing CD ROM rich media and interactivity to our browsers. And we're going to talk about how visual tools are going to bring it all together. And they're beginning to bring it all together. And then I'm going to give you my prediction for what all of this is going to look like, how we are going to be building homepages in the year 2025 if we have all managed to survive the millennium bug.

So, HTML 2.0 here. Look at this again. It's glorious. HTML 2 was released on 22nd of September 1995, just a few months ago. And the biggest innovation in HTML 2.0 is this I M G tag which stands for image. This is an image, I M G. It's fascinating, isn't it? And also HTML 2.0 is incredible because it sets out the first set of real standards for the world wide web and the guys all formed the World Wide Web Consortium to kind of govern those standards and push us forward to a new and bright future on the web.

So this is all about the new I M G tag, image tag. This is how you use it. It comes with two attributes. You write them in capital letters in HTML 2.0. We got the source which is where your image is on the server. And then we've got this alt. Now this alt is providing alternative text for the image. Now some browsers right now cannot render images. They need to be inside an anchor link. It's all very convoluted and silly. But this alternative text ensures that even if your users are using an inferior browser, they can still access this image, such as this baby. I think this is going to be really big. This is this is going to go places. There are three types of images you can use right now. I'm sure you're all familiar with XBM. It's just a monochrome bitmap. We don't need to talk about that. And then this one, no one's really sure how to pronounce it. I'm going to go with GIF, like giraffe. So GIFs, 256 colors in a GIF. lossless compression as well. And it moves. This is a GIF. This is a little baby GIF. And it's incredible. And then we've got JPEGs. Now, JPEGs are what photos are on your computer. They have 16 million colors. The compression's a little bit lossy, but I am really, really looking forward to receiving many unsolicited JPEGs and unsolicited GIF pics in my email inbox as the internet grows and progresses. It's extremely exciting, images on the web.

You can make your homepages really pop with all of these. Look at this. My favorite is this skeleton. Look at this creepy little guy. I love it. There's a growing library that you can access. You can just take these, use them. They're all free. Use Creative Commons. Put them on your homepage. Make sure to use this one when you are working in progress because people need to know. It's very exciting. Look at this thing. Look at it. Look at it go. I mean, the possibilities are endless.

You can also level up even further with something called an image map. This is how you use it. This is the source of your image map. And what happens here with this anchor tag and this image, when someone clicks on your page, the client will send the x and y coordinates of that to the back end. And depending on which coordinates were clicked, you can then send someone somewhere. So without needing to push the designs of HTML and styling HTML any further, you can just put a full beautiful image on your page like what Microsoft does on their world wide web server. Look, it's an image. You can click here. You can go and explore the FTP server if you want. Find out about Windows socket. The Microsoft network, finds the facts about the server. It's incredible, isn't it? Um this is this is an image on the web. There are other people who are using image maps too, which is very exciting. Hong Kong Polytechnic University are using this. They even tell you that the above is an image map. So, they're educating you about the web, through their their content and of course it's under construction as well. So, it's going to improve as time goes on. I'll tell you who else is using an image map. The White House. Look at this incredible design. You can sign a guest book. You can read some welcome messages. I am so excited about this one because how groundbreaking and truly incredible to have access to the unfiltered thoughts and feelings of the President of the United States of America [RAPTUROUS APPLAUSE]. Yes, that's what I'm talking about.

On a more serious note though, HTML is a machine readable visual experience, right? So, we're getting that built in with our images. Even if the alt attributes are used primarily in your heart for those of those people with older browsers, screen readers are now shipping with Windows 95. And that means those screen readers can read what your images are all about should you provide that alt text. And I know you are all very very senior programmers and therefore you will all be following those rules. And so what's really really exciting if we survive the millennium bug that the future of the world wide web is guaranteed to be accessible for all. No question.

But I'm going to talk about presenting HTML. That's what we're calling it here. What happens now is that you I'm sure you're all aware if you have a browser you can change the fonts, the colors. You can do that on your own browser, on your own machine, to affect the way you view the world wide web as you're browsing through those documents. But this isn't very future proof. It's only static on your machine. You can't share it with anyone. You can't share it between machines should you be using Windows and Macintosh. And also probably your configuration is messing with those documents that you're reading and the author will never know and so you'll just think the author's terrible at HTML, but it's your fault. So there is a proposal that was presented at the web conference in Chicago last year. Give me a cheer if you were there. [CHEERS] Yes. Oh you guy in the Windows 95. I remember you. I had to get security to escort you out. Y wouldn't stop talking at me about your Windows 3.1 server. So this cascading HTML stylesheets proposal is extremely exciting. You define an ordered list or cascade of stylesheets to set styles for your HTML 2.0 tags and you define the influence of those styles as a percentage. So, for example, here you've got a font size for the H1 at 24 points, 50% influence. Somewhere further down in the stylesheet, you'll have an H1 font size of 32 points with a 70% influence. It makes perfect sense, doesn't it?[LAUGHS] Of course, no conflicts whatsoever.

You can also compute things in this cascading HTML stylesheets proposal. So just like HTML, this will be a proper programming language as well. So say for example, the age of a page that's been open in your browser is greater than 3 days. Maybe you want to decay the website a little bit by turning the background yellow. You also might want to load a different stylesheet depending on the display height of the CRT monitor. And you can also use wild cards, again fully functional programming language. And you can also optimize for different media. So at the moment we're really focused, we're really stuck in this whole kind of document replication on the web. But what about printing? What about speech for screen readers? And what about braille? So you could use cascading HTML stylesheets to change the volume of the speech for an emphasis tag and you can just change anything you want if someone wanted to print out your website.

Now, of course, in order to get around all of those extra configurations that users have done to their browsers, you probably need to add a common default fallback kind of thing to reset what that browser configuration has done. But, you can deal with that. And you can also probably change the window settings. So say for example your website has got a dark background, you could access the window and change that too to really like make the the page and the browser experience a seamless kind of experience. It's going to be really really exciting.

So next I want to talk about how things are moving and how what's happened in in the last week that is really changing things. So, I've been talking a lot about how HTML is read only, mimics print media, it's static, and it's becoming more visual with the introduction of images in HTML 2.0. But I don't know whether you've heard that as of last week, this is all about to change. A new programming language has been made, invented, released. It's called JavaScript. Now, it's not to be confused with Java. It's nothing to do with Java. And it was released last week, invented by Brendan Eich at Netscape. And does anyone know what JavaScript does? I've got a story for you. It brings interactivity to the world wide web, to the internet.

Now, I probably know that you're like, "Well, what am I going to do? How am I going to make the web interactive? I just read websites." Well, let me show you this. Imagine the possibilities. This is a function that executes in the browser. It's called hello. And it prints a greeting. And it's called when the page has loaded and it's ready. And look, there's no static typing. You can do whatever you want. You can track your visitor activity. You know those kind of fake guest book counters you've been creating you've been kind of making? You can do that real time you can you can you can increment that number every time someone visits your page you can show dynamic advertisements cookies, you can use client-side cookies now. I'm legitimately interested in those! You can create all sorts of connections between third parties and sell people's data and it won't slow down your homepages whatsoever and all features will be supported in all browsers. The future really is here and you can all profit from it.

Recap: HTML 2.0, I M G tag, unsolicited GIF pics, cascading HTML stylesheets, JavaScript for interactivity and I'm going to give you a little demo about that JavaScript later. But there is even more. If you can handle it. This year, multimedia tools for the world wide web have emerged. [APPLAUSE STARTS] Yes, you can round of applause that. [APPLAUSE CONTINUES] Yes, we've got two: Macromedia Shockwave Player and FutureWave FutureSplash Animator. And they're changing the game. Right.

This is Macromedia Shockwave. This is not Macromedia Shockwave player, this is Chip's challenge. And I'm stuck on this level. If anyone wants to help me later, if you can find me outside, but you can use Macromedia Director and publish stuff like this on the internet. Imagine bringing all of that good stuff from Encarta 95 onto the internet in a web browser using Macromedia. You can make games. Now, full disclosure, you do need an internet speed of 28.8 kilobytes to make use of this. Please upgrade your modems now because this is the future because Intel is paving the way for this innovation and is using Shockwave to celebrate the 25th anniversary of the microprocessor. What's really great about this website is they have an HTML version and a Shockwave version. So just in case your internet isn't fast enough, Intel have thought about you. Really innovative, really exciting. Now you don't need a CD ROM to use Shockwave. You can download it from the internet. Now on a 56 KB mode it's 6 minutes. I think on a 28 it might be about 2 hours but it's worth it. Honestly it's absolutely worth it.

We've also got FutureWave FutureSplash Animator. Now originally Future Wave started off in the pen computing industry. They made SmartSketch for PenOS. Now we know as a collective as a society no one wants to touch screens. No one wants to interact with little things in their hands. We want to be sat at desks with our CRT monitors, our mice, collection of balls on the side, our beautiful beige keyboards. We don't want that. And FutureWave knew this. So they ported SmartSketch to Windows and Macintosh and they re-released it as FutureSplash Animator. It's quite similar to Macromedia. And this is what it looks like. Look at that. This is not a GIF. This is FutureWave FutureSplash in the browser. I think this is a GIF though. But look at this. You can click onto these things and it will open up a big portal into their demo site.

Now, there have been some rumors that because of the competition, Macromedia are probably going to try to acquire FutureWave. But I think those rumors are just a flash in the pan [LAUGHS]. So we can ignore them.

So what's this showing us is that the enduser experience is evolving. We got the I M G tag, we've got stylesheets, JavaScript for interactivity and multimedia experiences. But what about us? What about us? Those people who are crafting these homepages, these experiences on the world wide web. Give me a cheer if you're still using MS DOS editor. Oh, that's a sad cheer, wasn't it? What about Notepad on Windows 95? [WHOOPING] Yes. And command line editors. Who's still there? Yeah. Yeah. That's that was really telling that all the backend devs are just "Yeah. Yeah. I'm on the command line. You can't take me into a notepad!" But why why are you still there? Why are you still writing text? Text is slow. Text is rubbish. And Brett Victor in 1973 stood on stage and said that he believes in 40 years we will not be writing code in text files and that is in 2013. So we can start that future now. We have no choice because the future is GUIs: graphical user interfaces. You can do anything with GUIs. You don't need to use text editors. Text input is holding you back.

Now I'm sure you're thinking, well what the hell do I use, Salma? What am I doing? I don't know anything but the command line. Well, here are your options. There is good news because GUIs are already here. We've got GUIs for native apps. We've got Visual Basic. You can build Windows apps super fast. You can do anything in Visual Basic. You can even build a GUI in Visual Basic to track the hacker's IP address. Okay, that was a reference that none of you really understood. Google it. Um, Google does exist now, by the way. You can interact with databases and software components. Visual basic is everything. You can also build in Visual Basic a game engine. This is Unreal Engine released this year. You can build great games. It's built in Visual Basic. Visual programming is the future, but it's here now. We are living in the future. And the worldwide web also has GUIs!

All right. The future is here. It is now time to choose your GUI of choice and specialize so you do not get left behind. And I'm going to show you your options right now. We have something called Beverly Hills Internet. It was founded last year by my mates David and John. It's free. It's in the browser. You can make your homepages using a GUI in the browser. And what's great is that you get 2 megabytes of storage. Imagine being able to fill up 2 megabytes of storage. You'll be going into the next millennium. And the great thing about Beverly Hills Internet is that it's a web directory. It really helps us build community. You put your homepage in a category and you can find other like-minded people who are in the same category and browse through like a kind of a ring browse kind of style. But actually just the other day, Beverly Hills Internet rebranded to Geocities. It's very exciting. Same thing, a bit of a brand new look. I think they're also previewing cascading HTML stylesheets on this somehow. But it's incredible and it's a good one.

We've also go FrontPage 1.0 developed by Vermeer Technologies. It's a full GUI to build HTML and put your websites online. You can upload them via FTP directly in the interface. And what you see here is what you get on the internet. Now again, in this technology world, everyone wants to acquire everyone else. There is talk that Microsoft's going to get their hands on FrontPage, maybe even next year. I'm not convinced. We'll have to see how that goes because I'm sure even if Microsoft do acquire it, they will make sure that all of the markup created in FrontPage will work as equally well in every browser and not just internet explorer.

We've also got iBand Backstage Designer, another full GUI to build HTML. Again, people are talking about an acquisition, talking about Macromedia, taking it over. But again, whoever's starting these rumors are just trying to weave their own dreams into the conversation.

Recap: images, stylesheets, JavaScript, GUIs, and now we have come to the innovation point in this talk. We have now come to my prediction of how we're going to be building websites. taking all of this into account in 30 years in 2025. Now, unfortunately, I'm not a designer. So, I had to mock up my vision of the future in Microsoft Paint. Here we go. And so, we've got our HTML on the side here, images. We've got our cascading HTML stylesheets and their influences here. And we've got what you see is what you get right in the middle of here. And we've also got JavaScript. So when the mouse moves, you show a little greeting [LAUGHS]. It's very exciting. Constant popups, constant greetings. So joyful. Please do this. I want to visit your site and be greeted incessantly. It looks like this. Look at that. Greetings. And when you click it, it pops up again. I made it. It's great. And we've also got multimedia experiences inside this GUI, this fictional GUI called nordcraft.com. We've got this animation thing here. We're rotating me. It's very exciting. Everything is brought together in this visual interface. So that that's my prediction. It's a little bit crude, but I think you're all very senior programmers in here. So, you can take this idea and you can run with it. And in 30 years, you can build your own visual framework that takes all of these ideas into account.

And so as well in 30 years all of you will continue to have your own personal homepage whether it's using Beverly Hills internet, Geocities, one of these GUIS, you'll be you'll be using the GUIs, you'll be using image tags and image maps across your websites you will of course master the very intuitive influence of cascading HTML stylesheets, and you're probably going to use JavaScript for everything because let's face it if you can use JavaScript to dynamically pop up those greetings every time, you can probably use JavaScript to create HTML and cascading HTML stylesheets. So everything can be JavaScript because there's no typing. So you can just do whatever you want. And of course, you're going to be using GUIs. And what's more, all browsers are going to be on board, right? Every new feature for JavaScript release, especially regarding dates, will be supported by every single browser, every single cascading HTML stylesheet feature will be supported. And that is my vision of the future everybody.

That was the introduction to the world wide web. You can find me on the world wide web everywhere. My homepage is built with a GUI. And you can also visit my live mockup wink wink of nordcraft.com. Thank you very much for listening everyone. I am Salma and I can't wait to talk to you about 1995 at the rest of the conference. Thank you so much.