Coding All-in-One For Dummies. Nikhil Abraham

most developers. For example, it took Yelp, which has 30,000 restaurant reviews, exactly one decade after its founding to allow users to make reservations at those restaurants directly on its website.

      Whether you’re using or building an app, have a clear sense of the app’s purpose.

      Standing on the shoulders of giants

      Developers make strategic choices and decide which parts of the app to code themselves, and on which parts of the app to use code built by others. Developers often turn to third-party providers for functionality that is either not core to the business or not an area of strength. In this way, apps stand on the shoulders of others, and benefit from others who have come before and solved challenging problems.

Yelp, for instance, displays local listing reviews and places every listing on a map. While Yelp solicits the reviews and writes the code to display basic listing data, it is Google, as shown in Figure 1-7, that develops the maps used on Yelp’s website. By using Google’s map application instead of building its own, Yelp created the first version of the app with fewer engineers than otherwise would have been required.

      FIGURE 1-7: Google maps used for the Yelp web application.

      Chapter 2

      Programming for the Web

      IN THIS CHAPTER

      ❯❯ Seeing the code powering websites you use every day

      ❯❯ Understanding the languages used to make websites

      ❯❯ Finding out how applications are created for mobile devices

      “To think you can start something in your college dorm room … and build something a billion people use is crazy to think about. It’s amazing.”

– MARK ZUCKERBERG

      Programming for the web allows you to reach massive audiences around the world faster than ever before. Four years after its 2004 launch, Facebook had 100 million users, and by 2012 it had over a billion. By contrast, it took desktop software years to reach even one million people. These days, mobile phones are increasing the reach of web applications. Although roughly 300 million desktop computers are sold every year, almost two billion mobile phones are sold in that time – and the number is steadily increasing.

      In this chapter, you discover how websites are displayed on your computer or mobile device. I introduce the languages used to program websites and show you how mobile-device applications are made.

Displaying Web Pages on Your Desktop and Mobile Device

      On desktop computers and mobile devices, web pages are displayed by applications called browsers. The most popular web browsers include Google Chrome, Mozilla Firefox (formerly Netscape Navigator), Microsoft Internet Explorer, and Apple Safari. Until now, you have likely interacted with websites you visit as an obedient user, and followed the rules the website has created by pointing and clicking when allowed. The first step to becoming a producer and programmer of websites is to peel back the web page, and see and play with the code underneath it all.

      Hacking your favorite news website

      What’s your favorite news website? By following a few steps, you can see and even modify the code used to create that website. (No need to worry; you won’t be breaking any rules by following these instructions.)

      Although you can use almost any modern browser to inspect a website’s code, these instructions assume you’re using the Google Chrome browser. Install the latest version by going to www.google.com/chrome/browser.

      To “hack” your favorite news website, follow these steps:

      1. Open your favorite news website using the Chrome browser.

      In this example, I use www.huffingtonpost.com.

      2. Place your mouse cursor over any static fixed headline and right-click once, which opens a contextual menu.

3. Then left-click once on the Inspect Element menu choice. (See Figure 2-1.)

      If using a Macintosh computer, you can right-click by holding down the Control key and clicking once.

The Developer Tools panel opens at the bottom of your browser. This panel shows you the code used to create this web page! Highlighted in blue is the specific code used to create the headline where you originally put your mouse cursor. (See Figure 2-2.)

      Look at the left edge of the highlighted code. If you see a right-pointing arrow, left-click once on the arrow to expand the code.

      4. Scan the highlighted code carefully for the text of your headline. When you find it, double-click the headline text.

This allows you to edit the headline. (See Figure 2-3.)

      Be careful not to click anything that begins with http, which is the headline link. Clicking a headline link will open a new window or tab and loads the link.

      5. Insert your name in the headline and press Enter.

Your name now appears on the actual web page. (See Figure 2-4.) Enjoy your newfound fame!

      If you were unable to edit the headline after following these steps, visit http://goggles.webmaker.org for an easier, more guided tutorial. It’s a foolproof teaching aid that shows that any code on the Internet can be edited and modified. On that page, follow the instructions to add the bookmark to your web browser bookmark toolbar, and click the “Sample activity page” button to try a step-by-step tutorial. Try again to hack your favorite news website by following the “Remix the News” activity instructions.

      FIGURE 2-1: Right-click a headline and select Inspect Element from the menu that appears.

      FIGURE 2-2: The blue highlighted code is used to create the web page headline.

      FIGURE 2-3: Double-click the headline text to edit it with your own headline.

      FIGURE 2-4: You successfully changed the headline of a major news website.

      If you successfully completed the preceding steps and changed the original headline, it’s time for your 15 minutes of fame to come to an end. Reload the web page, and the original headline reappears. What just happened? Did your changes appear to everyone visiting the web page? And why did your edited headline disappear?

      To answer these questions, you first need to understand how the Internet delivers web pages to your computer.

      Understanding how the World Wide Web works