Quick Tip: Using Dreamweaver for your CMS Development with Drupal, WordPress, Joomla, etc

Drupal, WP and Joomla icons next to each other

Are you looking to do some theming or plugin development for a common CMS (Content Management Systems) such as Drupal, WordPress or Joomla? If that’s the case, then this tip may be useful for you. Dreamweaver CS6 has a neat option to provide code hinting for common CMS’. Start by setting up your server and local environments in the Manage Sites panel then open up one of the PHP scripts for whatever CMS you may be using. Once you have a document open, go up to the Sites menu once again and find the item “Site Specific Code Hints”. A window will come up, but as long as it is a common CMS, Dreamweaver should automatically recognize which CMS it is, so all you should have to do is click OK. After you have done this, Dreamweaver will add a config file to your local site and from then on out you will have code hinting for your custom web development with your CMS of choice.

Making Use of Amazon Web Services for Your Web Development

 

You, as a web developer, may very well be aware of Amazon’s Web Services for hosting web sites and services. Depending on your skill level, some of what Amazon has to offer may seem daunting or out of reach. I’m here today to give you an idea of some rather novel uses of AWS that require a minimal skill level to attain. This can range from hosting files to hosting a complete site merely by dropping files into your AWS account. The best part is that most of what I will go over will be covered in Amazon’s free tier of service, meaning the service will be entirely free for the first year.

First you will need to create your AWS account which can be done here. From there you will want to go into your console, which can be accessed at the same page once you have an account. There is a wide variety of services whose uses range from deploying virtual servers, managing DNS, to deploying entire virtual networks of machines. We are just going to focus mainly on Amazon’s S3 service here which is used for scalable cloud storage, so you may ignore the plethora of other offerings for the time being.

Once you have made it to your S3 console there will be a button that says “Create Bucket”. S3 buckets are essentially places for you to store various files. Once you create a bucket you can store all sorts of files there with the ability to make them public or private. We will go ahead and create a bucket and give it a name that makes sense (this will be part of the URL at which you access these files).  Do not worry about logging, I will not cover this but you will want to look into AWS Cloudwatch to manage logging and the availability of these files.

Being developer you may be wondering what use you will have for yet another cloud storage service, but since AWS is publicly accessible at and essentially static domain (or even your own domain name, which I will cover briefly in a moment) you can use S3 to access files in other websites you are creating or maintaining. To do this we will want right click the bucket we created and click the website tab. Click “Enabled” and for the Index document, type in “index.html” and for the Error document type in “error.html”. If you are looking to host a website here in S3, you will want to actually create and upload these files, but if you are just looking to host files, they do not necessarily have to exist. Also, take not of the endpoint, this is now the link to your site or the domain prefix for the files you host. Next you will want to upload files which you would like to host, then once they appear as files in your bucket, right click the files and choose “Make Public”. They are now accesible via the browser or from other sites at amazon-endpoint-domain/your-file-name. If you would like to make this a site on its own with a domain name you own, you will need to make a DNS CNAME record pointing www.yourdomain.com to your S3 buckets domain name. You can find out how to do this by contacting your current host or registrar.

What you can do now is create webpages or Javascript libraries or files of your own using Dreamweaver and host them at your new Amazon S3 site. This is great for hosting a static website (no php or server side languages, just html, css, and javascript) or even as a CDN. CDN’s or content delivery networks are a common place to hold libraries of scripts in a single place. Giving you access to your scripts on multiple sites and aiding in cacheing these scripts for your end users.

A New Way to Debug your Website on Many Devices

Adobe Shadow Icon

 

Adobe has just released a public beta for yet another useful application for web development. The current title is Adobe shadow. Now I haven’t had much time to play around with it as of yet, but I’ll provide the run down.

 

What Adobe Shadow is used for is previewing your website on not only your browser, but also any mobile devices you can find. The application has two pieces: the application itself, which can be downloaded as a beta currently at Adobe Labs; and second is a Google Chrome extension. This means you will need to use Google Chrome currently when debugging your website, but if you aren’t already using Chrome, you should be. It is in my opinion the best browser and is also rated as the most secure browser.

 

Once you have installed both pieces, you then register all of your mobile devices. iPhones, iPads, and Android devices are currently supported. After the setup you can view and debug your website simultaneously on your computer and all your devices. This is great to not only see how your site works on all of your testing devices but also debugging your Javascript and other code that exists on your website.

 

This will work great testing your HTML 5 and jQuery applications and will also be quite powerful in conjunction with Dreamweaver CS5.5 and it’s mobile support.

Turns out LESS really is more

 

Today I will briefly go over a new means to style your webpage. You most likely have some experience or familiarity with CSS, but for those who do not, CSS (cascading style sheets) is the web standard for giving design to your page. The problem I have found with CSS in the past has been that it is very much so static, meaning that everything you want your CSS to do with your elements of the page you have to write out specifically. I want my styles to be dynamic, I want elements to be styled differently under different circumstances, and I don’t want to have to type the same thing over and over again just because I have elements that require similar styling. With LESS, this is no longer a problem. What LESS is essentially is a language to program you CSS instead of writing static stylesheets. LESS follows similar syntax as CSS but allows for things such as variables and functions, making your styles take shape according to output (desktop, mobile, etc.) or other conditions and also allows for reusable code and styles. Even better on the reusable code, you can import other LESS stylesheets into your styles. Why would you want to do something like that? Well what this will let you do is build a series of functions and styles that you know you will be using in pretty much every web project so you dont have to rewrite the styles at all. For those of you who are programmers, it’s the same a building libraries. Also, since the language is so similar to CSS, you will be able to take advantage of some of your code hints in Dreamweaver or the IDE of your choosing.

LESS is very easy to use. By only importing the less.js javascript file and a slight change on your typical linking of stylesheets, you can bring in your LESS styles.

Quick Tip from Jerome – Dropbox

If you have a Flash or InDesign project that you are putting time into both at work and at home or just have files that you access and edit frequently from multiple machines, then Dropbox is a tool that you should look into. Dropbox is available for essentially all platforms, mobile, Mac, Windows, and even Linux. Once you have installed Dropbox and logged into your account, it creates a Dropbox folder in your home directory. Anything you put in that folder from then on is synchronized over the internet to any other devices on which you have Dropbox installed. For mobile devices you merely open the Dropbox app and you then have access to these files as well. Bear in mind that Dropbox is completely free for up to 2GB of storage, not a bad deal at all!

Now if you are feeling saucy and really want to take full advantage of this great tool, you can further its usefulness by using symbolic links or “symlinks”. What these symlinks do is to redirect anything you put into a folder into another folder. For example, if I created a symlink between my Documents folder and a folder on my Dropbox, then anything I put into my Documents folder will go right into my Dropbox. Pretty slick. Just know that it will remove the original folder from your system. In the case of our example, my Documents folder would disappear unless I removed the symlink. So be sure to back up. (It wouldn’t be a bad idea to know how to remove this symlink either.) Are any other ActionScript 3.0 developers salivating over this besides me? What this means is that you can have all your 3rd party or home brew libraries and classes stored in the ‘clouds’ and any updates you make on one machine goes to all. Now that’s better living through technology.

Need help with this symlink business? Here’s a link:
Symlink Tutorial

The End is Near, Part II

Time is quickly running out for Ascend Training’s regularly scheduled CS4 classes. Our last CS4 hands-on training will be:

Dreamweaver CS4 Level 1, Chicago, Aug 30 – Sep 1, Deerfield, Oct 11 – 13

Ascend Training is happy to put CS4 classes on our regular schedule for groups of 3 or more people. We will also be happy to provide our CS4 curriculum for our on-site training. Any of our students taking CS4 classes are still eligible for 8 months worth of free retakes in the CS5 version of the class. Those retaking a class in CS5 who have originally taken CS4 classes will also have the option of buying the book used in the new class.

Getting a New Computer Without That Hefty Price Tag

As much as I love the applications included in the Adobe Creative Suite I sometimes wonder if my computer is going to make it through my next Flash project or if it will even be able to open the flier I am editing with InDesign. So, seeing as the computers I own are getting on in years, I’ve been thinking it is about time for an upgrade. Now I have always been a Mac guy myself, but their prices are getting more and more outrageous. To get the power I want in a desktop without breaking the bank, I am in the process of choosing parts for a computer I intend to build myself. Now this may sound completely beyond your knowledge and skills, but surprisingly enough its no more complicated than my Lego Death Star I built in the 4th grade. All you need is proper manuals, here is a useful site that will tell you the necessary components and how to choose the correct ones. There are many more tutorials to be found by simple Google searches. Buying your own components and building your own computer will give you about twice as much bang for your buck. Yeah, the jig is up Dell and HP.

That being said, I have a few tips to save you even more cash. When it comes to computer hardware, take your time, you don’t want to get something that’s outdated but also don’t want to be spending too much on a piece of hardware that you could find on sale or cheaper elsewhere. If you are unfamiliar with Gizmodo, this site is your best friend when it comes to tech deals. Each day, Gizmodo will post an article called Dealzmodo that lists the best deals of the day for primarily tech items. There are always hardware deals on Gizmodo. Newegg is one of the best sources in general for hardware, everything you need will be on Newegg at reasonable prices. For in depth reviews of hardware, tomshardware.com is the place to go. One last thing, and this should go with out saying, avoid ebay. As appealing as some of those prices are, this is fragile technology and I, for one, would not trust ebayers with this stuff.

lego death star

On second thought, building a computer may be less complicated than the old Lego Death Star. I must’ve had a lot more patience back then.

Thats all for today,

By Popular Demand…HTML Email Marketing

Wow! Ascend Training would like to thank everyone that attended last night’s HTML Email Marketing Event. Because of you it was a roaring success! Not only will we be repeating this event in Deerfield (date to be determined), but we have also added a new class to our offerings.

Description of class:

This 2 day class is aimed at those with little or no HTML experience who want to create effective email marketing campaigns. The class will cover how to use HTML to create email layouts and forms, import graphics, and generate cascading style sheets (CSS). Most importantly, the class will cover how to avoid being tagged as a “spammer”. Students leave with the comprehensive skill-set they need to return to the office and start their own e-marketing campaigns.

Creating HTML Emails: Building and Broadcasting Successful Email Campaigns, will be offered for a limited time at a special promotional rate. Regularly $895, you can register for this exciting new class for $635 (offer expires September 10, 2010).

For class details and dates, please visit our website.

Building and Broadcasting Successful Email Campaigns

Free Event: Creating Email Newsletter Blasts!

Learn the ins and outs of creating killer html email marketing blasts! Look at the behind the scenes html development, in addition to best practices and avoiding being tagged as a “spammer.” This free event is at our Chicago training facility August 17th, 2010 , 5pm.

Register for this free event.

Learn about our Adobe Dreamweaver Training

Adobe Announces CS4 World Wide Webcast

With the campaign “It’s Going to be Brilliant,” Adobe has announced the release of the newest Creative Suite, CS4. The broadcast can be viewed at the Ascend Training Chicago facility with the Chicago Area Adobe User Group Sept. 23rd at 11am, or viewed online.

The release of CS3 saw major modifications in the original Adobe apps such as Photoshop, InDesign and Illustrator. While there were improvements in Dreamweaver and Flash, since the purchase of Macromedia occurred in the middle of the development cycle, the biggest change there was just getting these apps into the Creative Suite.

With the release of CS4, we can plan to see not only major leaps in the web apps, but tighter integration between the entire CS4 family. According to a Comscore report, 82% of online video viewings in the US and 73% worldwide use Adobe Flash technology. With the newest release of the Flash 10 Beta, code named Astro, expressive features and visual performance improvements.

Register for the Adobe Webcast at Ascend: http://www.ascendtraining.com/events.php

- Jori Curry