Coding All-in-One For Dummies. Nikhil Abraham
Чтение книги онлайн.

Читать онлайн книгу Coding All-in-One For Dummies - Nikhil Abraham страница 5

СКАЧАТЬ starting to take over installed software. Think of the last time you downloaded and installed software for your computer – you may not even remember! Installed software like Windows Media Player and Winamp that play music and movies have been replaced with websites like YouTube and Netflix. Traditional installed word processor and spreadsheet software like Microsoft Word and Excel is starting to see competition from web software like Google Docs and Sheets. Google is even selling laptops called Chromebooks that contain no installed software, and instead rely exclusively on web software to provide functionality.

      The remainder of this book focuses on developing and creating web software, not just because web software is growing rapidly but also because programs for the web are easier to learn and launch than traditional installed software.

Taking a Tour of a Web App Built with Code

With all this talk of programming, let us actually take a look at a web application built with code. Yelp.com is a website that allows you to search and find crowd-sourced reviews for local businesses like restaurants, nightlife, and shopping. As shown in Figure 1-6, Yelp did not always look as polished as it does today, but its purpose has stayed relatively constant over the years.

      FIGURE 1-6: Yelp’s website in 2004 and in 2014.

      Defining the app’s purpose and scope

      Once you understand an app’s purpose, you can identify a few actionable tasks a user should be able to perform to achieve that purpose. Regardless of design, the Yelp’s website has always allowed users to do the following:

      ❯❯ Search local listings based on venue type and location.

      ❯❯ Browse listing results for address, hours, reviews, photos, and location on a map.

      Successful web applications generally allow for completing only a few key tasks when using the app. Adding too many features to an app is called scope creep, which dilutes the strength of the existing features, and so is avoided by 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 СКАЧАТЬ