Using Dreamweaver and WordPress for Your Sites - Charting Your Career Path - Getting a Web Development Job For Dummies (2015)

Getting a Web Development Job For Dummies (2015)

Part IV. Charting Your Career Path

9781118967768-pp0401

webextras.eps Check out www.dummies.com/extras/gettingawebdevelopmentjob for tips on getting up to speed with specific tools.

In this part …

· Find a web development job

· Create your portfolio site

· Land the job and do it well

Chapter 15. Using Dreamweaver and WordPress for Your Sites

In This Chapter

arrow Understanding why Dreamweaver is king

arrow Using downloadable WordPress software

arrow Creating your site at WordPress.com

Web development has, in some important ways, settled down.

The core technologies for most website development today are the latest versions of the same set that people have used since about the year 2000: HTML (today, HTML5), CSS, and JavaScript. Also, web browsers on personal computers are getting more and more similar in how they display web pages, so you don’t have to worry nearly as much about what your pages will look like on various browsers. Today, you don’t have to learn a lot that’s new about core technologies to do the basic work of creating websites.

This makes it much easier on the people creating web development tools. More and more of your work can be done directly in a tool, without much, if any, hand-tweaking.

Adobe Dreamweaver is the tool of choice for mainstream professional web developers. It is, arguably, the most complete tool on the market. Dreamweaver is also expensive, costing hundreds of dollars a year. On the upside, it allows you to position text and graphics precisely, to create pages that work across mobile and desktop platforms relatively easily, and much more.

WordPress is the tool of choice for many other web developers, including bloggers who don’t think of themselves as web developers at all. WordPress is also used by real pros who specialize, more or less exclusively, in WordPress development. By some estimates, roughly half the sites being published today are WordPress products. WordPress is free or very inexpensive to use and isn’t really designed for precise visual control, nor for knowing exactly what you’re going to get as your site is viewed across mobile and desktop platforms.

These two tools are very different, but they cover the majority of site development work undertaken today. As a web development professional, it’s worth understanding both. Then you can choose the right tool for the job, or choose a job where you get to use the tool you prefer.

Discovering the Biggest Trends in Websites Today

Today, websites are more and more database-driven, assembled on the fly, with content provided by calls to various databases. This change prioritizes two things.

The first new reality caused by database-driven web pages is that page design is more about creating a container for content than it is about fine-tuning the page’s look to the last pixel. You put buckets on the page and expect them to only fully come to life as you pour content into them.

Amazon is a great example of this. Most of the content on the page is at least semi-customized and updated on an ongoing basis. As a designer, you’re creating page designs and sample pages; it’s impossible to predict, let alone control, exactly what each and every user will see.

The second new reality brought about by database-driven web pages is that it’s increasingly considered a web designer’s job to know a fair amount about interfacing to various databases. Knowing how to do some work in Python and SQL, the two standards for accessing databases, can be a huge help. Even just knowing enough to tweak existing code — similarly to the way a lot of web designers work in JavaScript — is a big advantage. We don’t cover this topic in this book, because it’s too extensive, but knowing some Python and SQL is important for many web designers.

The other big trend that affects page design is that the range of screen sizes and types of devices that your web page will ultimately appear on is now both hugely extensive and ever-changing. The “mobile” category stretches from small-screen smartphones, through iPads with high-resolution Retina displays, to laptops, to main displays and external monitors that can hold 20 or 30 smartphone screens’ worth of text and graphics.

The range in screen sizes means more than it used to, as well, because more and more web access comes from mobile usage. So the days when you could put a special version, representing only a fractional part of your “real” website, on mobile phones are long gone.

The differences in screen sizes are so great that you have to include or exclude entire parts of a page design depending on how large the screens involved are. So part of your design process might be to have two or three different “suites” of screens — perhaps smartphone, tablet, and laptop display and up. But even this decision, though it might simplify specific design problems, is a big deal, requiring thought, attention, care, and maintenance of standards definitions, plus periodic review.

Taken together, the increase in database-driven web pages and the proliferation of target screen sizes means that web design tools are all the more important. There’s just not much percentage in hand-tweaking the HTML, CSS, and JavaScript for individual web pages. Instead, your page designs have to be both highly flexible and pretty darn bulletproof.

With these changes, the role of web design tools is growing steadily. In this chapter, we discuss the two biggest web design tools: Dreamweaver and WordPress. There are many others, but these are the two beasts that will do the most to give you flexibility in your career if you know them — and that may impose challenges for your career if you don’t.

Choosing Adobe Dreamweaver

A review in PC Magazine sums it up: “As an advanced website editor, Dreamweaver has no serious completion … for building up-to-date multiplatform websites.”

Dreamweaver has a graphical user interface that supports nearly all HTML5 and CSS features, reducing the need for hand-coding. However, although Dreamweaver offers a lot of cool features that are implemented in JavaScript, you can still do a lot more if you tweak the JavaScript that Dreamweaver generates and write new JavaScript code of your own.

There are a great many Dreamweaver resources available, including free tutorials. Figure 15-1 shows a free tutorial available from the Utah schools. The website that provides the tutorial is very basic — not a strong example of what you can do with Dreamweaver — but the information is useful, and the site provides sample graphics and other resources.

To access the tutorial, visit www.schools.utah.gov/ate/marketing/curriculum/ecommerce/course1/sitedevel/linkcolors_dw4.htm.

9781118967768-fg1501

Figure 15-1: Utah provides free online training for Dreamweaver.

Dreamweaver started life as the flagship product of a company called Macromedia, but was acquired by Adobe in 2005. In the decade since, Adobe has improved the product greatly and integrated it with other Adobe tools.

The most current version, as of this writing, is called Dreamweaver Creative Cloud. It’s only available as a subscription service, although you can buy older versions of Dreamweaver from many sources.

Figure 15-2 shows a table of Dreamweaver versions. This is useful information to have in case an organization that you’re thinking of joining still uses an older version of Dreamweaver.

Pros of Dreamweaver

Take a look at some of the major features that make Dreamweaver the tool of choice for web development — features you’ll have to match if you want to use a different tool, or if you hand-code your website:

· Fluid-grid page layouts: Fluid-grid page layouts automatically resize to fit different screen sizes, without the need for you to hand-code CSS to support the changes.

9781118967768-fg1502

Figure 15-2: Dreamweaver has a rich history of ownership and versions.

· Interactive CSS design: Dreamweaver allows you to drag and drop complex features like shadows and curved corners, which causes the appropriate CSS code to be inserted into your page.

· Interactive JavaScript-supported features: You can use UI widgets to create pop-up dialogs, menus, and other UI features. These widgets cause the appropriate JavaScript code to be inserted into your page.

· Interactive multimedia support: You can insert a multimedia element into your page and specify whether it will be supported by HTML5 or Flash. Even though it’s provided by Adobe, which has good reason to push its own Flash format on people, Dreamweaver has full support for HTML5 as well.

· Template management: Dreamweaver makes it easy to create templates, and includes the capability to make areas of the template editable or uneditable — just the kind of control you need for a complex, database-driven website.

· Flexible previewing: It takes just a few clicks to see a live preview of multimedia content or your page layout.

· Browser support: Dreamweaver features, such as fetching data from a database, work in all modern browsers.

warning.eps Microsoft’s offering that competes with Dreamweaver, Expression Web, supports a crucial feature for most modern sites — pages that fetch data from a database — only in Microsoft Internet Explorer, which is just unacceptable.

· Integration with Photoshop, and so on: In Dreamweaver, you just double-click an image to open it in Photoshop — assuming you paid for Photoshop as well as Dreamweaver, of course!

Cons of Dreamweaver

Dreamweaver has a lot going for it. For one thing, it’s the only tool in its class. For individuals, the choice is simple and stark: Become a Dreamweaver expert, try to get other, cheaper tools to do what Dreamweaver does, or hand-code your pages and templates in HTML5 and CSS.

When considering these choices, look at the “Using WordPress Software” section later in this chapter. WordPress software is the most widely used inexpensive tool out there. Dreamweaver does have some downsides, however:

· Complexity: Dreamweaver is a very complicated tool. You have many ways to perform most functions. For instance, if you want a live preview, you can preview just multimedia; the whole page; or actually publish to an intranet or the web, and see what things will really look like. Other tools give you simpler options.

· Cost: Dreamweaver can cost nearly $1,000 as a stand-alone tool, or add a big chunk to your Adobe software subscription. Either way, the cost of Dreamweaver is a big issue, especially when compared to all the freeware tools out there that support writing HTML5 and CSS directly.

· Keeping up: After you adopt Dreamweaver, you’re locked into an ongoing cycle of upgrades, learning new features, deploying the features, and (if you wish) giving feedback. You become a “Dreamweaver person” rather than just a web design expert.


It’s all about columns

Dreamweaver creates grids of vertical columns for your work. Pages targeted for phones use four columns; for tablets, eight columns; and for desktop displays, twelve columns. This provides a strong visual metaphor to support the range of screen sizes you’ll be dealing with, although no such approach can fully match the complexity and trade-offs of working on pages that will appear on widely disparate screen sizes.

Dreamweaver gives you a really good start, however. Consider using Dreamweaver as your starting point for multi-platform web publishing.


warning.eps Resizing your page layout will only get you so far; you want to add different content areas for the larger screens and drop them for the smallest ones. Having content areas appear conditionally is confusing. Consider using two or three different page layouts to cover the full range of screen sizes.

Using WordPress Software

So, as described earlier, Dreamweaver is the leader in its market — multi-platform web publishing. Are there real alternatives?

There definitely are, and the leading alternative is WordPress software. WordPress, in this form, is downloadable software that you can install and modify.

WordPress software is open-source, so you can change just about anything in it that you want to. And you don’t have to do the work yourself; there’s a lively community with lots of expertise out there.

With WordPress, there’s only a small core team of paid professionals who are responsible for updating and releasing the core software. (Often in annoyingly small releases that are prone to lacking focus and direction.) The rest of the work is done by the WordPress community. Much of the work is done for love, although of course many in the community make their living doing WordPress-based work for clients as well.

WordPress has many different page looks referred to as themes. Each theme is a combination of HTML and CSS. WordPress themes are “deep” — they’re highly capable, and you can modify them really extensively using CSS as well as HTML.

You can modify them or add JavaScript as needed to add the functionality that you want.

By using WordPress software, you inherit a great deal of functionality and expertise at low cost. However, there are a few issues that limit the use of WordPress software among website developers:

· Sameness: WordPress pages famously have a certain look and feel that seems to persist across themes. It can feel challenging to find or develop a WordPress-based site that doesn’t feel like you’ve seen and used it somewhere before.

· Blog focus: WordPress was originally developed as blogging software, and the blogging focus continues today. Most business sites de-emphasize blogs or don’t support them at all. (In fact, many business sites are written from scratch, but have blogs associated with them that are WordPress-based.)

· Complexity: WordPress software has developed in layers of inspiration and change over more than a decade. This often means there are new capabilities layered on top of old ones in a confusing and occasionally brittle manner.

· Performance: Written and changed over many years, WordPress software can run slowly, and the CSS and HTML maintained by the WordPress community are often “thicker” than they need to be. Making changes, debugging, or enhancing performance can be wearying tasks.

· Maintainability: After you modify WordPress software, you have a Hobson’s choice each time a new release of the core software comes out, or there are improvements to a theme you’re using: Do you take the new release and add your modifications to it again, or do you take things from the new release and add them to your modified WordPress software? The tendency in the community is to take the new release and modify it as needed.

· Control: Web development professionals and organizations that have one or more websites are used to doing their own thing, on their own schedule. (And to redoing sites every few years for freshness and functionality.) Being subject to someone else’s development schedule and release calendar can feel strange and frustrating.

tip.eps We refer here, many times over, to WordPress software. This is software you can download to your own system, tweak, and then use to host your own websites, or even whole networks of websites. Confusingly, there’s an easier-to-use, but less flexible, WordPress–based alternative, WordPress.com, described in the next section. (The naming of these alternatives by the company that controls the core of WordPress, Automaticc, has never been very helpful.) Most expert website creators will want to use WordPress software, rather than WordPress.com, for most of their projects.

tip.eps There are thousands and thousands of jobs relating to WordPress software development. Though some developers look down their nose a bit at WordPress, because you don’t have the same degree of control as with tools like Dreamweaver, lots of great work gets done in WordPress, and it’s a rich source of jobs.

You can get a comparison of WordPress software and WordPress.com at www.wordpress.com. It’s useful, but it soft-pedals the restrictions on using WordPress.com described in the next section. To see the comparison (See Figure 15-3), visithttp://en.support.wordpress.com/com-vs-org/.

9781118967768-fg1503

Figure 15-3: You can compare WordPress.com and WordPress software on the WordPress site.

Using WordPress.com

One of the quickest and least expensive ways to put up a surprisingly capable website is to use WordPress.com to develop and host your site.

WordPress.com gives you a wide choice of themes and add-ons. You can have a good-looking, highly functional site up in a day. If you have content handy, it can be quite impressive.

The site includes hosting at no cost for a small site, and at reasonable cost for a larger one. WordPress.com also makes it easy to find and register a custom domain name, although you have to pay an annual fee for the name.

Because WordPress.com is such a useful tool for getting a site up fast, many web development pros use it when they need to do a website for friends and family, or colleagues who are doing personal projects.

However, WordPress.com is much less capable and flexible than WordPress software. You have a much more limited choice of themes and add-ons. You can pay for the right to customize the CSS in the theme for your website at a small monthly charge, but you can’t modify the software itself.

WordPress.com also has the same concerns as WordPress software, but to a greater extent. For instance, the tendency of sites to look the same is stronger. With a wide, but still limited, choice of themes and add-ons, it’s hard to create a site that feels very different from a thousand other sites out there.

warning.eps E-commerce and advertising are not allowed on WordPress.com websites. This is fine for many sites that either have a personal focus, or represent a business online. But if you need these capabilities from the get-go, you need to use WordPress software, or some other approach.

warning.eps WordPress.com sites often show advertising to users — not your advertising, but Automaticc’s. You don’t get to see the advertising because it’s not shown to anyone with a WordPress account. You can pay a small fee per month to have the advertising removed.

If you do need advertising options, WordPress will tell you what you can do; see Figure 15-4 for details. Google AdSense, the most popular advertising option, is not allowed on WordPress.com sites. To see the full set of options and restrictions, visithttp://en.support.wordpress.com/advertising/.

9781118967768-fg1504

Figure 15-4: Your advertising options are limited on WordPress.com sites.

You can get a comparison of WordPress software and WordPress.com on the WordPress.com website. It’s useful, but it soft-pedals the restrictions on using WordPress.com described below. To see the comparison, visit http://en.support.wordpress.com/com-vs-org/.

If you need to add these capabilities later, you’ll have to move your domain name and site content to a new host. There are people who specialize in doing this, but it’s not completely easy or free.

With all these limitations, why does anyone use WordPress.com? It’s very easy and very inexpensive. In particular, as a web developer, it’s the easiest way for you to help friends who need a site without tying them or you into a lot of hassle and expense going forward.

tip.eps It’s not that hard to get a WordPress.com–type experience from one of the many WordPress developers out there. They’ll host the software for you and add the capabilities you need. You can search online or ask friends and colleagues for their experience.