Chapter 2 – Requirements + Recommendations

One aspect of developing HTML5 banners that I love is its relatively low entry point with regards to initial investment.  In fact, many people reading this probably already have the essential tools necessary. But in the interest of not wanting to leave anyone out, let me briefly mention the basic tools needed.  If you are already a web developer and are simply looking for the specifics regarding best practices of HTML5 banner creation, then feel free to skip these early chapters. 

Otherwise, please read on.

Software

There are many tools that promise to make your life super easy.  Some will.  Some won’t.  I do have my preferences, but let’s just start with the basics.

Below is a list of software applications that are required for professional HTML5 banner production.  However, for the purposes of this book, you really only need a computer and text editing software. 

  1. A text editor.  There are many available that offer features developers appreciate to write code more efficiently, but even plain old notepad is still used by
    many developers.

    A recommendation for PC:

    Notepad++: https://notepad-plus-plus.org/

    And for Mac users:

    Sublime: http://www.sublimetext.com/

  2. Adobe Photoshop.  Photoshop is a digital image manipulation tool focusing primarily on bitmaps.  It is not needed to learn the fundamentals, but if you find yourself drawn to what we’re doing in this book, you’ll want Photoshop. Though there are other open source tools such as GIMP, Photoshop is the industry standard.  The reason why you need an image editor is because designers are very likely to send you files created with Photoshop.  This of course has the additional bonus of being a tool you can use to develop your design skills as well.

  3. Adobe Illustrator.  Illustrator is similar to Photoshop but its focus is vector files. Again, these are tools of the trade and both types of files are constantly shared between front-end developers and designers.

    You can get both Photoshop and Illustrator via a monthly subscription to Adobe’s Creative Cloud:  http://www.adobe.com/creativecloud.html

    It is a monthly expense that is unfortunate, but to me, when I consider how powerful each of these tools is, it’s truly a good value.  If you are on a tight budget you may be able to obtain student prices.

    As I said above about Photoshop, Adobe Illustrator is not required for this book.

  4. Web Browsers. Browsers are necessary for testing.  There’s actually quite a lot to know about testing your work, so we’ll reserve the specifics for a chapter dedicated to testing.

  5. FTP software.  FTP stands for File Transfer Protocol.  FTP software, also known as an FTP client, enables you to upload files to a server.  This is important for making your work publicly accessible.  There are several good FTP clients available.  Lately I’ve been using FileZilla.  It’s free.  FileZilla: https://filezilla-project.org/

ADVANCED SOFTWARE RECOMMENDATION

Local Server.

Installing a server on your personal computer is an important part of professional development however it is not needed for HTML5 banners.  I want to mention it though because as you progress it is something you’ll want.  A server from our point of view is what we call a computer that is specifically designated to serve web pages.  When you visit a site online, you are visiting a server.  A local server lets you simulate real world environments on your own computer. 

If this interests you – and it will if you stay on this path – the kind of server you want is clear.  It is best for beginners to install what is known as a LAMP setup.  LAMP stands for Linux, Apache, MySQL and PHP.  This describes the most fundamental components to a server.  This basic configuration also happens to drive most websites on the World Wide Web.

We’re saying Linux, but chances are you are on a PC or Mac.  If so, there is a solution for you.  You don’t have to use or have a Linux computer.  There are many installers available to make setting up a LAMP type server relatively easy.  I like something called XAMPP (Available for both Mac and PC). 

XAMPP: https://www.apachefriends.org/index.html

Once a server is installed you’ll be able to test HTML5 Banners (and any other web development you might be interested in) on a real server that happens to be running from your own computer.  This is the ideal situation because it is more likely to reveal issues that you would encounter online.

With that said, it’s not essential to have a server for HTML5 banners.  You can test without it.  It’s just highly recommended as a part of your professional front-end developer’s resources.

Hardware

  1. A Computer. With regard to development, you can use any kind of computer you want.  Some prefer Macs, some a PC.  Yes, there are other kinds of machines and operating systems out there, but in my experience, few developers use them for HTML5 banners.  However, a good set up will include both a Mac and PC.  You don’t need both for creation, but the professionals will have both for testing.  I realize that can involve some expensive equipment, but it is possible to find relatively low cost computers used.  In fact, for testing, sometimes a used computer is desirable because a more dated machine will more readily reveal issues with your code than a brand new one.

  2. Mobile Devices.  Additionally, professional front-end developers also tend to have an array of mobile devices as well.  The reason for this is testing.  Testing is extremely important and thus this subject will have its own chapter.  Again, stay tuned for that.

Services

  1. Hosting.  In order for you to show your work to your client and to promote yourself, you’ll want a publicly accessible server to put your work on.   This is also called “hosting”. There are many companies offering hosting.  Some are even free. However, in my experience, the old axiom “you get what you pay for” is most definitely true with regards to hosting.

Next: Chapter 3