Practical Web Development - Paul Wellens - E-Book

Practical Web Development E-Book

Paul Wellens

0,0
35,99 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

This book is perfect for beginners who want to get started and learn the web development basics, but also offers experienced developers a web development roadmap that will help them to extend their capabilities.

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB
MOBI

Seitenzahl: 383

Veröffentlichungsjahr: 2015

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

Practical Web Development
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. The World Wide Web
World Wide Web
The Internet
HTTP and HTML
HTML
HTTP
The World Wide Web Consortium (W3C)
Mosaic
The first browser
Netscape
Internet Explorer
The explosion of the Web
Amazon.com and e-commerce
Google and Yahoo!
Social networking
Web development
HTML
HTML editors and other tools
Browsers and web servers
CSS
JavaScript
PHP
Data
Summary
2. HTML
HTML versions
Semantic and presentational HTML
The structure and syntax of an HTML document
Doctype
<html>
<head>
<body>
Syntax for tags or elements inside the document
HTML comments
Links
The <a> tag and attributes
The href attribute
The <a> name attribute
The <a> target attribute
Classic document elements
<h1>, <h2>, <h3>, … <h6> – headings
<p> – paragraph
<span> – span
Lists
Images
<img> element and attributes
Image width and height
Input forms
Form elements
Form attributes
The label attribute
Input attributes
The name attribute
The value attribute
The checked attribute
The readonly attribute
Textarea
Drop-down lists
The disabled attribute
The selected attribute
Tables
Table elements
<table>
<thead> <tbody>
<tr>
<th> <td>
Table attributes
colspan (td)
rowspan (td)
<div>, the "uebertag"
HTML entities
HTML5-specific tags
Summary
3. CSS
Adding styles to our documents
External style sheets
Internal CSS
Inline styles
The Document Object Model (DOM)
Selectors
Multiple classes
Descendants
Selecting children or siblings
Specificity
Block elements and inline elements
Colors
Fonts
So what are fonts?
Font families
Serif fonts
Sans-serif fonts
Monospace fonts
The font-family property
Font-weight and font-style
Font-size
Line-height
The box model
Padding
Border
Margin
Collapsing margins
Positioning
Float
position:relative
position:absolute
Styling lists
list-style-type
list-style-image
list-style-position
Styling anchors – pseudo-classes
Firebug
Summary
4. JavaScript
Programming 101
Compiled and interpreted languages compared
JavaScript is not the same as Java
Java
JavaScript
Our first JavaScript program
Variables
Variable declarations
Values of variables
Numbers
Strings
Converting strings to numbers
Expressions and operators
Arithmetic operators
Addition(+)
Subtraction (-)
Multiplication (*)
Division (/)
Modulo (%)
Relational operators
Control flow
if
while
switch
Functions
Scope of variables
Objects
JSON
DOM objects, properties, methods, and events
The Window object
The Document object
write and writeln methods
Nodes and DOM traversing
Events
Summary
5. PHP
Introduction to PHP
Our first real PHP program
PHP and web hosting
Web hosting 101
Domain name
Web hosting companies
Server-side setup
Additional server-side services
PHP development environment
PHP as a web development language
Variables, values, operators, and expressions
Scope of variables
Local variables
Global variables
Static variables
String operators
To double quote or to single quote, that is the question
Control flow
Functions
String functions
strpos()
strlen()
substr()
Date functions
time()
date()
strtotime()
Arrays
Numeric arrays or indexed arrays
Associative arrays
Cool control statements for associative arrays
Sending data back to the server – forms
POST or GET, what should we get?
$_POST and $_GET arrays
Files
include, require, and require_once
Regular files
File functions or f-functions
fopen
file_exists(), is_file(), and is_dir()
fread and fwrite
One line at a time – fgets()
The printf family
Syntax of printf family of functions
Summary
6. PHP and MySQL
Databases
Relational databases
SQL
MySQL
phpMyAdmin
Creating databases
Creating and managing users
Creating and managing database tables
MySQLi in PHP
Connecting to the database
Our first SQL query, really!
Writing a MySQL query in PHP
Fetching the result
Obtaining data from more than one table
Adding data
Updating data
Summary
7. jQuery
Obtaining the jQuery library
Where to place the jQuery library on your page?
jQuery UI and jQuery Mobile
Using jQuery selectors and methods
html()
text()
attr()
.val()
show() and hide()
.find()
.parent()
.next()
.css()
jQuery documentation
Event handlers and jQuery
preventDefault()
$(this)
updateNewsContent()
Summary
8. Ajax
XMLHttpRequest
Ajax and jQuery
jQuery Ajax methods
$.load() method
$.post()
$.ajax()
Summary
9. The History API – Not Forgetting Where We Are
The problem we are trying to solve
The self-service restaurant
HTML5 History API and the history object
pushState()
popstate event
popstate and different browsers
The History plugin
Bookmarking
Summary
10. XML and JSON
XML
XML format
Displaying XML files
XML editors
XML Schema
SimpleXML
The XML file
The XML Schema file
The CSS file
The PHP file
Creating XML files with SimpleXML
Generating our HTML on the client side
XSLT
JSON
JSON syntax
JSON values
JSON objects
JSON strings
JSON arrays
JSON numbers
JSON and PHP
JSON with Ajax and jQuery
Two useful JSON methods
Summary
11. MongoDB
Relational database management systems
NoSQL databases
MongoDB
Installing MongoDB
The MongoDB shell
Creating databases, collections, and documents
_id and ObjectIds
Loading scripts
Removing documents
Updating documents
MongoDB data types
Basic data types
Dates
Embedded documents
One more example
MongoDB and PHP
Getting our gallery data
CRUD operations with MongoDB and PHP
Insert documents
Update documents
Queries with conditions
MongoDB cursor object
Summary
12. Mobile First, Responsive Design with Progressive Enhancement
Responsive design
Déjà vu
Media queries
Using the media attribute
Do more with less
Mobile first
Why mobile first?
We have come a long way
Mobile devices have newer capabilities
Mobile devices are not only used while on the road
Content first, navigation next
Small means big
Mobile input
Mobile first recap
Progressive enhancement
EnhanceJS
enhance.js
loadStyles and loadScripts
enhanced and FOUC
Modernizr
The Modernizr object
Polyfills and Modernizr
yepnope.js or Modernizr.load
Summary
13. Foundation – A Responsive CSS/JavaScript Framework
Our responsive toolkit – Foundation
Foundation components
The grid system
Class end
Visibility classes
The block grid system
Useful UI elements
Thumbnails – for simple galleries
Reveal modals – your better pop-up
Dropdowns
Example – a simple photo gallery
Accordions
Awesome Font awesome
Equalizer – the hardest thing to do with two <div>s made easy
Navigation
Top bar – not just your regular menu bar
Adding more magic
Yet more magic – off-canvas, the coolest thing
Summary
14. Node.js
Node.js
Installing node.js
npm
node
Adding HTML
Serving up static content
A tale of two (JavaScript) cities
node.js and MongoDB
Déjà vu … once more
Express
Installing Express
Our first Express app
An example with middleware
Templating and handlebars.js
Creating a layout
Our last Hello, World example
Summary
A. Bootstrap – An Alternative to Foundation
Bootstrap components
The Bootstrap grid system
Visibility classes
Buttons
Other UI elements
Thumbnails
Dropdowns
Modal – the Bootstrap popup
Combining dropdowns and modals
Collapse – an accordion for Bootstrap
Navigation
Summary
Index

Practical Web Development

Practical Web Development

Copyright © 2015 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: July 2015

Production reference: 1240715

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78217-591-9

www.packtpub.com

Credits

Author

Paul Wellens

Reviewers

Jorge Albaladejo

Elvis Boansi

Adam Maus

Jesús Pérez Paz

Commissioning Editor

Edward Gordon

Acquisition Editors

James Jones

Sonali Vernekar

Content Development Editor

Ritika Singh

Technical Editor

Ryan Kochery

Copy Editors

Alpha Singh

Ameesha Green

Jasmine Nadar

Project Coordinator

Milton Dsouza

Proofreader

Safis Editing

Indexer

Rekha Nair

Production Coordinator

Manu Joseph

Cover Work

Manu Joseph

About the Author

Paul Wellens has been a senior product manager for a major computer company in the Los Angeles area and Silicon Valley for over two decades. Before that, he used to install Unix systems and train companies in Europe, from his native Belgium. Later in his career, he became a web development aficionado because it brought him back to another passion of his: programming.

This is not his first book. His prior publication is of a different nature. Nature is what it is all about as it is a guidebook on Eastern California, which is illustrated with his own photographs. Therefore, it should not come as a surprise to learn that, besides experimenting with new web technologies, his major hobbies are photography and hiking in the Eastern Sierra.

Acknowledgments

I have written books before and I know that the result can only be successful if there are some nice people to assist you. This is the first time that I have worked with a publisher, Packt Publishing, so these are the first people I would like to thank. I would like to thank Shivani Wala for discovering me and James Jones for working with me to figure out the right book for me to write and for you to read. I enjoyed working with Priyanka Shah, Ritika Singh, and Ryan Kochery who assisted me in bringing this cool project to completion, without a single complaint, even though I was once again late with a deliverable. Thank you for being so patient with me.

I would also like to thank (yes, this is a note of cynicism) the three companies that "manage" the railroads in Belgium. Without their comedy of errors with trains—delays, cancellations, failure to depart because of mechanical problems, or trains departing from the station where you want to get to, as opposed to depart from, I would never had so much time to work on this book on my iPad. It is not in their honor, but, because for 2 years, it was the highlight of my day to safely arrive at Antwerp Central Station—which was rated by an American newspaper as the most beautiful train station in the world—that we decided to use it as the cover photo.

Next, I would like to thank my web developer buddy, Björn Beheydt, for taking the time to read the early versions of the chapters of this book and providing constructive feedback. I would also like to mention Steve Drach and Bart Reunes for always being there when I needed some technical advice.

Then, there are places that I would like to call a home away from home, where folks did not mind that I was typing away on my Bluetooth keyboard when inspiration kicked in. Most notably, I have to thank the folks at Trapke Op (Caro, Maressa, Evi, Klaartje and Jill) in Brecht, Belgium, where I typed these sentences. These wonderful people helped me make it to the finish line. Het Boshuisje in Zoersel, where Hendrik Conscience wrote books over a hundred years before I did, also comes to mind. I would like to thank Theo for always giving me a seat to land with my iPad, keyboard, and work.

Less related to this book, but still in need of a mention, are all my friends in California that inspired me to carry on doing great things in hard times. In particular, I want to express my appreciation to the people that work(ed) at the Gordon Biersch Restaurant in Palo Alto, which I can still proudly call my photo gallery. I thank them for their support for over 11 years and for still welcoming me when I visit them; they make me feel as if I only left last night. That also includes the patrons of the place with whom I've had numerous conversations and enjoyed every single one of them.

If you read this book, or my previous book, you will notice that I have a certain affinity and passion for a particular part of California. So, I would like to thank all the wonderful folks that live in the town of June Lake, California, for always having inspired me to come back and be creative. My goal in life is to go there as often as I can.

Finally, I would like to thank my mother. It has been hard for her since my father passed away and her son returned. I am dedicating this book to her, not that I expect her to read it, but I really appreciate the patience she had with me while I was writing it.

About the Reviewers

Jorge Albaladejo is a software engineer with a master's degree in information and communication technologies from HES-SO, Switzerland. With over a decade of experience building cloud, SaaS, and web applications, he considers himself to be a passionate and versatile full-stack web developer.

Throughout his professional experience, he has worked with many companies in different fields, such as project management, social networks, quality assurance, weather data visualization, and video games. He devours countless books about software engineering, project management, and science fiction, and he is passionate about clean, long-lasting software architectures.

He is currently working as a freelance contractor under the commercial name of CometaStudio, and he is mostly interested in start-ups and mid-sized companies that build great web experiences for great causes that make a difference. His next dream is to become a digital nomad who travels around the globe while working at the same time—and learn languages in the process!

Elvis Boansi is a software developer at John Jay College. He develops and maintains custom web applications that are used by members of the college. In his spare time, he enjoys playing soccer and basketball with his friends.

I'd like to thank my employers at John Jay College for all of their support. I would also like to thank my supervisors, Ana and Juan, for their feedback. I thank my friends, Sanga, Steve, and Loric, for constantly sharing their knowledge with me.

Adam Maus is a software developer with a master's degree in computer science and works at the Center for Health Enhancement Systems Studies at the University of Wisconsin in Madison in the United States. His interests lie in developing web technologies that utilize data mining to create better user experiences. He primarily works on websites that help people undergoing addiction recovery support, as well as people who are aging. In his free time, he enjoys running, biking, and reading books.

Jesús Pérez Paz is a full-stack web developer with experience in project management. He works at PepitaStore Inc. and collaborates with Mozilla.

His main area of work is design, and he integrates the user interface (or frontend) of web pages / applications; however, lately, he has been diving into backend stuff and has become a full-stack web developer.

He loves the open/free Internet and thinks that the Internet is a global public resource that must remain open and accessible to everyone.

www.PacktPub.com

Support files, eBooks, discount offers, and more

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.

Why subscribe?

Fully searchable across every book published by PacktCopy and paste, print, and bookmark contentOn demand and accessible via a web browser

Free access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.

Preface

I am fortunate to have lived and worked in California for a long time. The majority of that time, I lived in Palo Alto, which is the center of Silicon Valley, the home of Stanford University, and the birthplace of many companies, big and small, such as Sun Microsystems, where I worked. I sat on the front row to see how the World Wide Web developed, as well as being present for the advent of social media. Facebook started on the other side of the wall of my favorite restaurant. Now, some Facebook guy or girl is sitting in what used to be my office at the bottom of the Dumbarton Bridge. As a product manager for Solaris, one of my tasks was to make sure that Netscape Navigator was included with our operating system. So, I was right at the source in which the development of the Web began. I even went to the Web 2.0 conference and bought the book of the same name.

Then, I felt the need to have my own website to display my photographs and inform people about the beauty and interesting places of the parts of California that I had discovered during my many journeys travelling around the state. So, I created one. One day, I was telling a friend about it and he tried to look at it on his mobile phone. It looked terrible. So, I bought a Nokia phone (a brick compared to what we have today) so that I could test my own site to make sure that it looked good on a phone as well. This is how I caught the bug of responsive design, years before someone started calling it this.

Upon my return to Belgium, I decided that it was time to learn as much as possible (I love to learn new things) about what is out there beyond creating websites and took a 6-month course on PHP web development. A lot of it looked familiar as I was previously a UNIX and C developer. There were only 12 people in the class, who were all bright minds, and I quickly discovered that there was more to learn.

As the classes took place in Leuven, a major university town in Belgium, I went to the local university bookstore and bought book after book on all kinds of related topics and quickly became a jQuery fan. jQuery, by the way, was not even included in the course. I started wondering why someone needed to have 35 different books to learn about web development and that writing a single book that gave a comprehensive overview of what you need to know to engage in web development would not be a bad idea.

Since then, web development has changed a lot; more books were needed, eBooks this time, but the concept remained the same. So, now you know why I wrote the book.

This book gives you an overview of all the general aspects of web development, in a traditional way, using plain HTML to do static websites, as well as the current way, to enable you to create your web pages dynamically and make sure that they look great on mobile devices as well, by using responsive design. We conclude by giving you a hint of what is yet to come if you replace the traditional web server by writing your own using node.js.

What this book covers

Chapter 1, The World Wide Web, gives you an overview of the history of what we know today as the World Wide Web.

Chapter 2, HTML, introduces HTML and gives you an overview of the most commonly used HTML tags to do web development. You will be able to create a basic website after reading this chapter.

Chapter 3, CSS, explains how to use Cascading Style Sheets (CSS). This is used for the presentation part or layout of your website, from color to dimensions to typefaces. The most commonly used CSS properties are explained here. Once you are done with this chapter, you will be able to make your basic website look good.

Chapter 4, JavaScript, first gives you an introduction to the world of programming and programming languages. Next, the overall syntax of JavaScript and how to use it for client-side programming is introduced.

Chapter 5, PHP, explains PHP, which is another programming language. This one is used to do server-side programming. It requires a web server to do the development of your website and deploy it. You will learn how to dynamically create your web pages, rather than having to write a bunch of HTML files.

Chapter 6, PHP and MySQL, introduces MySQL, an open source database. You will learn how to create a database, manage it using the phpMyAdmin tool, and perform basic CRUD (create, replace, update, delete) operations from within a PHP program.

Chapter 7, jQuery, covers a popular JavaScript library. It allows you to write more compact and clean code and handles browser incompatibilities for you. With this, it is going to be a lot easier and faster for you to write JavaScript code that traverses and manipulates the web page. It does so by using selectors, which you learned to use with CSS. So, with jQuery, you can write JavaScript code without having to learn a lot of JavaScript.

Chapter 8, Ajax, introduces Ajax. It represents a collection of techniques to make it easy to dynamically change only portions of a website. With this chapter, we have entered the world of what I call "modern web development". The interface that we use for our Ajax calls is jQuery.

Chapter 9, The History API—Not Forgetting Where We Are, explains a very important piece of the web development puzzle. Once we are changing pages on the fly so they look different but actually remain the same page (URL), strange things can happen when visitors want to go back to what they think is the previous page. A solution for this is described here that will not only work for HTML5 but for HTML4 as well.

Chapter 10, XML and JSON, describes XML and JSON. They are two popular formats to exchange data, for example the server and the client. Although XML is used in a variety of environments, JSON is closer to the web development community.

Chapter 11, MongoDB, describes an alternative to MySQL as a database. This is a so-called NoSQL database and a document database. Documents are conveniently in the JSON format. Here, how to access a MongoDB database from within a PHP program is described.

Chapter 12, Mobile First, Responsive Design with Progressive Enhancement, has the longest chapter title of the book. It explains how modern web development has to be done now that more people are using mobile devices instead of traditional computer screens to go to websites.

Chapter 13, Foundation – A Responsive CSS/JavaScript Framework, describes most of the features of the Foundation framework, which helps you with your responsive design. It contains everything that I have always wanted to write myself but never had the time to do. This concludes the part of the book that covers what I call modern web development.

Chapter 14, Node.js, gives an overview of what I call the avant-garde of web development. It introduces node.js, which allows you to write your server-side code in JavaScript, including your own web server, which is facilitated by using the Express framework.

Appendix, Bootstrap – An Alternative to Foundation, describes the popular CSS/JavaScript framework, which is an alternative to Foundation to help you with responsive design. The main reason to include this is to point out key differences and similarities.

The online chapter, The Mono County Site, provides a full example of a website or application where we apply most, if not all, the things we learned. It is available at https://www.packtpub.com/sites/default/files/downloads/B03816_Appendix.pdf.

What you need for this book

You will need the following software to work with the examples in this book:

Software

Source

Firefox and Firebug

http://www.mozilla.org

Apache Web Server

Part of the OS

XAMPP (includes MySQL and PHPMyAdmin)

http://www.apachefriends.org

MySQL

http://www.mysql.com

PHPMyAdmin

phpmyadmin.net

jQuery

http://www.jquery.com

The History jQuery plugin

https://github.com/browserstate/history.js

MongoDB

mongodb.org

Foundation

foundation.zurb.com

Node.js

nodejs.org

Bootstrap

getbootstrap.com

Who this book is for

This book is for anyone who wants to get to grips with the broader picture of web development today. It is perfect for beginners who want to get started and learn web development basics, such as HTML, but it also offers experienced developers a web development road map that will help them to extend their capabilities and gain a greater insight into how different technologies interact and work together.

Conventions

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We can include other contexts through the use of the include directive."

A block of code is set as follows:

<body> <div id="header"></div> <div id="container"> <div id="left"></div><div id="middle"></div><div id="right"></div> </div> <div id="footer"></div> </body>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<tag class="value1 value2">text<?tag>

Any command-line input or output is written as follows:

{ "key" : { "name":"Schwarzenegger","first":"Arnold","profession":"governator" } }

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: " Now, not until a user clicks the Beach button, Hello, World will turn into Hello, Beach."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[email protected]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.

Chapter 1. The World Wide Web

This book talks about the past, present, and future of Web Development. Beginning with Chapter 2, HTML, we will walk you through all the technologies you need to know about, in order to practice web development. Before we do that, we want to set the stage, so that we all know which Web we are talking about: this would be the World Wide Web (www).

World Wide Web

I love history! So let us start with a little history about the World Wide Web. I was fortunate enough to be able to work at a company that developed the first commercial version of the UNIX Operating System. They were founded in 1977 and I joined them ten years later. UNIX is an Operating System (the thing you need to make your computer do something) that was intended to run on minicomputers (although they were called that, they could not fit into your apartment and required air-cooling). These computers were typically used as an isolated system that had quite a number of text-based terminals attached to them.

Today UNIX lives on, and forms the basis of Linux, Solaris, MacOS, and others. Our company spotted an opportunity to add products that would add features and technologies that today are standard. Some of these examples are email (ability to send a mail to a person on another computer), and ftp (ability to transfer a file to another computer, or to just access another computer). Yes, you had to pay extra if you wanted to be able to send mail. Thanks to the Internet, all of this was made possible.

The Internet

The Internet is a global network that today interconnects billions of computers worldwide. Its origin dates back to research done for the US government, but today everybody can get on the Internet, using its standard set of protocols, commonly referred to as TCP/IP (the IP here being Internet Protocol).

Every computer or device that is connected to the Internet will have a unique Internet address, aka IP address. It is a set of 4 numbers separated by dots, for example, 192.25.13.90. Of course, you will never tell your friend that you bought something at 192.25.13.90 but at, for instance, www.amazon.com. This is because the Internet also uses a feature that translates IP addresses into easier to remember domain names. The example I used happens to be a website you can go to and buy things from a practice that we all know has caused the www to become what it is today.

The Internet and the www are, in everyday speech, treated as if they are synonyms but they are indeed not. There are a lot of different services provided on the Internet (by companies calledInternet Service Providers (ISP)), and that was already the case before the www existed (for example, giving you access to electronic mail). What it took for the www to emerge was (just like in JavaScript) a series of asynchronous events. Two of those are too important to not mention.

HTTP and HTML

You have probably heard this story many times, but the World Wide Web would not have existed without it. It is the story of Tim Berners Lee, an engineer at the European Centre for Nuclear Research (CERN). The centre had many computers that were, of course, hooked up to the Internet. It also produced a tremendous amount of data and documents, and that became almost impossible to manage. Tim worked out a solution by developing a language to write these documents in, a protocol on top of the Internet to manage them, as well as a computer program for users to access them.

HTML

HTML, short for Hypertext Markup Language is the name of that language. Hypertext is text that contains hyperlinks, which in turn are those parts of a document which readers can click on to take them to a different document, using the link. You have all seen the blue underlined parts of a text, in not-so-good-looking web pages. These are hyperlinks.

A document in HTML consists of tags, with text in between them. There are opening and closing tags for example, as follows:

<h1>Hello, world</h1>

Here, <h1> is the opening tag and </h1> the closing one. We will learn about a similar markup language: XML. HTML and XML are not the same though. One important difference is that in XML you can define your own tags, as long as you close each one you've opened. XML is used to transfer the data and the tags are used to organize the data.

In HTML, tags do have a specific meaning. <h1> would be used in a document for the text of a level one header. A <a> tag—the anchor tag—is the one used to include the hyperlinks we just discussed. So the purpose of writing HTML is not to transfer data, but to present it to human users.

To do so, these tags are interpreted by the computer program we mentioned earlier. Such a program is called a browser. When the reader clicks on a hyperlink, the browser will detect that as well, and send a request to yet another program, the web server, to go fetch another document.

HTTP

This is where HTTP, the Hypertext Transfer Protocol fits in. If a user clicks on a link, it is like saying: go fetch another HTML document. The name of that document would be part of a longer string that starts with http:// and also contains the domain name of the server. It is called a uniform resource locator, but we all refer to it as URL. Following is an example: http://www.paulpwellens.com/examples/secondpage.html.

What you can do with HTTP has evolved over time and we will learn about it later on in the book, but for now we need to move on with our history lesson. One more little tidbit of history for you: guess how our friend Tim called his browser, the first ever browser: WorldWideWeb. He later renamed it to avoid confusion.

The World Wide Web Consortium (W3C)

After he left the CERN in 1994, Tim Berners Lee founded the World Wide Web Consortium (W3C). The consortium tries to enforce compatibility and agreement between vendors that deliver components for the web. Incompatible versions of HTML would cause browsers to render web pages differently; and incompatible features added to browsers have the same unexpected result.

If you visit www.w3.org, the consortiums website, you will notice that the W3C has evolved into a standards body for many technologies, but even in those days, having such an organization was sorely needed.

Mosaic

History moved on, and so did I! Our company was acquired by Sun Microsystems and I became product manager for our PC UNIX product. Oh yes, before I forget, PCs were everywhere by then and that phenomenon would, in the long run, also contribute to the explosion of the World Wide Web.

One day, in the year 1993, my engineering manager walked into my office, together with Jonathan, his lead programmer. They wanted to show me what he (Jonathan) had done over the weekend. It was a port (take the source code of a program and make it run as a binary on a computer) of a program calledMosaic for our PC UNIX product. I saw him type a few commands but did not quite understand why these guys were so excited. Little did I know that this seemingly innocent little program was going to change our lives forever!

The first browser

Mosaic was developed at the National Center for Supercomputer Applications (NCSA)at the University of Illinois in Champaign-Urbana (this is a long drive through cornfields from Chicago, which I took once) by a team led by Marc Andreesen. It was the first browser to support multiple protocols (hence the name) as well as display an image and text on the same page (surprisingly, this is not a trivial matter on a webpage!) It soon caught attention worldwide and the browser was ported to many platforms, so that more and more people could develop or have access to websites.

In November 1992, there were 26 websites. In the Mosaic browser, there was a What's new section that showed a new website everyday. Three years later, there were 10,000 and another three years later, millions. Today, I do not think it is possible to count them anymore. So how did we get from thousands to millions?

Netscape

Marc Andreesen founded a company, named it after Mosaic, and then later renamed it Netscape Communications Corporation. They basically rewrote the Mosaic browser and optimized it for environments with lower network bandwidth, such as individuals who access the Internet from home through their ISP. The browser was called Netscape Navigator. This was clearly the first commercial browser, making it to the shelves of computer retail stores as part of a bundle, Netscape Communicator.

Netscape was also credited as the first browser to include support for JavaScript. With this scripting language, interactivity could be added to web pages. The World Wide Web could be at anybody's fingertips, as long as you had Netscape. From 1994 to about 1999, Netscape clearly had the biggest market share for browsers.

Over time, Netscape was moved over to Mozilla Corporation, an Open Source organization, and the development of Netscape ended. Today, users can download the Firefox browser from www.mozilla.org.

Internet Explorer

Another derivative of Mosaic, Spyglass Mosaic, made it into the Microsoft codebase and was eventually bundled with Microsoft Windows. We know it today as Internet Explorer. This is how we reach the topic of the so-called browser wars. As I mentioned, Netscape was trying to win over as many customers as possible by getting into the retail market and charge for its browser. Microsoft, on the other hand, decided to bundle Internet Explorer for free in its Windows Operating System (of course you had to pay for Windows).

This led to many lawsuit-like situations as Microsoft was accused of unfair competition by the other browser vendors. This situation has now changed as all browsers are free. Computer users can today choose which browser they want to use. On tablets, choices are limited, but on the other hand, browsers on tablets usually have all the latest features.

A different and potentially more bloody war was going on at the technical level. Despite having a standards body, the W3C, which controlled and introduced new features (both HTML and CSS), not all browsers were adapting those features equally as fast. So the same web pages continued to look different when they were rendered by different browsers. Sad but true to say, the browser that was the most incompatible and unpredictable, Internet Explorer, was, by the turn of the century, also the one used by the majority of the people who would surf the web.

Developers therefore had no choice but to delay the use of new cool features at the expense of spending a considerable amount of extra time making their web pages look the same on a PC used by most visitors as it did on the system where they were created.

Things got far worse before they began to get better, as more developers started using JavaScript to add interaction and animation to the pages, whereas many System Administrators recommended a configuration with JavaScript switched off. Sometimes this resulted in the visitor seeing nothing at all on the page.

But do not despair, we are in 2015 now! In this book, we will take a different approach and always let you use the new features when the browser supports it.

The explosion of the Web

By the turn of the century, every company wanted to have a webpage. Web pages were created by linking more web pages, with information about the company or just the owner of the site. The latter was made possible by smart ISPs that also offered web hosting. People have to be able to access your site even while you or your computer is sleeping; so these services offer 24/7 uptime to put your HTML files. Web hosting companies also take care of getting you a domain name, such as www.thecoolestphotographer.com.

At some point, obtaining the domain name you wanted was bordering on another browser war, as there could only be one xyz.com, and if some entrepreneurial folks thought that having xyz.com first would be worth money, they would grab it.

When I wanted one for myself, paulwellens.com was already taken by a British rugby player, so I went for www.paulpwellens.com (P is my middle initial). I am neither British nor a rugby player so this was fine with me.

So a lot of pages were created worldwide, but all they had initially was information for you to look at, nothing else. In some cases, they were created once and never updated. That fortunately was the exception to confirm the rule. Many companies decided that they had to have a presence on the web and corporate websites were thus created. The advent of CSS facilitated this a lot, as it allowed the separation of presentation and content. That way, the marketing department would provide the corporate logo, and the look and feel, and all the other departments would provide the content.

Amazon.com and e-commerce

Some creative minds realized that the Web presented an opportunity to do more than just provide information. It is only a (relatively) small step from providing the information of the products you have on your site, to actually selling them. E-commerce was thus born. Amazon comes to mind as a good example of a site that everybody can relate to as being a Web shop. Developing a web shop of course involved a lot more than having someone in the company type in some content.

These products are real products; they sit in a warehouse, have a part number, a price, a name and description, different sizes and colors, and so on. That information, more than likely, is already present in some database that is updated each time a product is sold in a retail store. To sell something online, your webpage has to interact with the visitor, present him with some kind of an on-screen shopping cart, calculate subtotals, check warehouse inventory, and so on.

To do this, more and more programming was involved, and not just data entry into an HTML file anymore. So the job of Web Developer was born. Traditional programmers are skilled in a single programming language (Java or C++) and usually a single platform (Solaris or .NET). Web Developers have to be fluent in at least four different languages, as well as know a thing or two about databases. I would like to add one aspect which, to me, makes this job very exciting—one gets to be involved in design aspects. The gap between a Web Designer and a Web Developer is narrowing. So today, one talks about Front-End and Back-End developers.

So this is what we will teach you in this book; how to be a Web Developer, but not before wrapping up our history lesson. There are a few more things that made the web what it is today.

Google and Yahoo!

So you have a website with information, or a web shop because you are selling something on the web, like www.mycoolproduct.com. How do you expect to reach your potential customers, call every single one of them? This is where Google or Yahoo fit in. These popular companies developed the so-called search engines. You want to find out everything there is to know about a movie you just watched, a song you cannot remember the name of, or simply the phone number of your favorite restaurant? You visit google.com, yahoo.com, or equivalent sites and type in what you are looking for. Chances are you will find it.

We did a usability study at work where we gave one group a set of CDs, a stack of manuals, and a computer to install; the other group did not get the manuals but Internet access. The second group did way better because they felt they did not need the manuals, as they assumed them to probably be out of date, and immediately looked things up online. And this happened over 10 years ago.

Today, the use of search engines is so commonplace that terms like Yahoo! and Google are used as verbs. In some languages, they actually have become verbs and made it into the official dictionary.

Social networking

I know people who do not use Facebook today, but I do not know anybody who does not know of Facebook. For years I walked by the building where Facebook had its office. I was not really interested. Then, when I moved back to Belgium, I decided to join them so I could stay in touch with my friends in California, who live in a different time zone and several thousands of miles away. From one of them I found out that the Facebook folks have since moved into the building where I used to have my office. Funny how that goes sometimes!