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.
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.
You will need the following software to work with the examples in this book:
|
Software |
Source |
|---|---|
|
Firefox and Firebug | |
|
Apache Web Server |
Part of the OS |
|
XAMPP (includes MySQL and PHPMyAdmin) | |
|
MySQL | |
|
PHPMyAdmin | |
|
jQuery | |
|
The History jQuery plugin | |
|
MongoDB | |
|
Foundation | |
|
Node.js | |
|
Bootstrap |
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.
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."
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.
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.
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.
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 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.
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.