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.

I am Excited About Adobe’s Creative Cloud and You Should be Too!

I have recently returned from a trip to Los Angeles for the Adobe MAX conference and am excited to tell you about Adobe’s biggest announcement from MAX, Creative Cloud. Now keep in mind that we were only given a glimpse of what’s in store, so don’t take everything I say as exactly how it will be. We were promised more details in November so be sure to keep up with that.

Adobe’s Creative Cloud will consist of a few pieces conjoined into one service. It will all be included in a subscription with a supposedly ”attractive” price. My biggest concern with the service is just that. The pricing of the Creative Suite is far from attractive to me, but pricing will be announced in November. I know that great software and services will come at a cost, but not many people can afford software priced as high as Adobe has charged in the past. I am hopeful, though, that between saving money by a solely digital distribution method in future versions and also the fact that cheaper prices will greatly increase the user base, that it will be beneficial for us and Adobe to have Creative Cloud come with reasonable pricing.

Pricing aside, let’s get into the meat and potatoes of the Creative Cloud. The service will come with 20GB of cloud storage for whatever you may need and it does sound like there will be options to upgrade the size of this storage (20GB is a lot for, but for you video editing types you will likely need a lot more). It seems like this cloud storage will be incorporated into every application included in Creative Cloud. This will make working between different devices extremely easy, since you can save your work into the clouds. Your cloud storage will be automatically synced between all devices you are using the cloud service on and your files are accesible and shareable through not only your Adobe applications, but directly through the browser as well. Now this is just the tip of the iceberg.

Next up is the publishing end of things. Your Creative Cloud will have publishing options in 3 realms. If you didn’t already assume, Creative Cloud comes with a social networking aspect. You create you cloud profile, can share your work and connect with other creatives. The browser based part of the cloud is very well done. You can not only categorize and add meta data to your various files all through the browser, or any application accessing your cloud for that matter, but you are given great detail on your files. So much detail that you can even view and turn off layers in your Photoshop files while you are spooling through your files in the browser. Pretty nifty. For web developers, business catalyst is part of your cloud service allowing you to post your sites to the web and there is also the CMS aspect of business catalyst of which you can take advantage. The third part here is the Digital Publishing Suite for InDesign. This allows you to take your creations in InDesign and publish them to all devices as an epub file. This will be a great tool to create magazines, comics, and whatever else you can think of and publish them. This service will cost money for the actual publishing, but you can also charge your audience to download the works. In this digital age, you can still do your print projects but have them completely digital. This doesn’t only make it easy to publish your work, but you can add all sorts of interactive elements that you would not be able to do in a physical print.

Now for the finale. It seems your subscription includes the Creative Suite, I was given the impression that it is the suite in its entirety, but I want that in writing. Come early 2012, it appears as though everything Adobe will be lumped into a single, subscription based service that is Creative Cloud. Better yet, there is a suite of Mobile applications (for the most part actually created using the Flash platform) thrown into the mix and again its my understanding that all of these are included in your subscription. I will go over these applications briefly.

Photoshop Touch – A touch version of Photoshop, obviously. It retains a majority of the functionality from the Desktop application.

Proto – Quickly make a mock up website that includes much of the functionality and linking created through the touch app. Also creates HTML code to turn your mockup into a fully functional site.

Ideas – This one is already available. Create vector graphics and image all with a simple touch interface.

Debut – An app to make stunning presentations.

Collage – A re-imagining of  the “drawing board”. A quick and easy way to throw pictures, color schemes, and notes on a virtual white board. Portray an idea in only a few moments that can then be passed along to designers to create a finished product.

Kuler – Create and share color palettes.

So that is the gist of it. The touch apps provide great ways to kick start a project, or even the tools to complete a project. Again, pricing will be announced in November and the service itself will be released early 2012. So, I would recommend staying tuned for further information.

A Great New Tool Fresh from Adobe Labs – Adobe Edge

Just yesterday a brand new tool was released to the public. Adobe Edge is a tool that allows you to easily create HTML 5 animations in a Flash-esque application. It uses a timeline, much like Flash, where you can add objects onto the stage and manipulate them in various ways across the timeline. These animations are created using SVG and CANVAS of HTML 5. Your projects are saved as HTML, Javascript and CSS files that make up the animations and this makes it very easy to place in your web pages through Dreamweaver.

In the current version only animations are available, but Adobe has promised that there will be new features added in new builds of the preview version. So, if you find Adobe Edge to be a useful tool (and how could you not?) be sure to follow the updates.

Tech Tip for the Web Designer

For those of you that are new to web design or would like to get started in the field, or if you are like me and just too lazy to code your CSS, I have a great tool for you! I recently stumbled on this web app CSS3 Generator which allows you to style a box to your liking using a simple graphical interface. Once you have the box styled, press the “Get the Code” button and you have the CSS code necessary to style any object on a site you are working exactly like you have styled the box. This works great with Dreamweaver and using HTML5.

What is AIR and Why Do I Care?


I’m sure many of you have hear of Adobe AIR (Adobe Integrated Runtime), but it may be little more than a buzz word to some. What I intend to do is provide a brief overview of what AIR is and what it does and also why it will be important in this mobile age we are coming in to.

To begin, unless your a developer, integrated runtime probably means nothing to you. A runtime environment is essentially a virtual environment where code runs. A good example of a runtime is the Java Runtime Environment (this annoying updates that Windows will bother you incessantly about).

The Java Runtime Environment is obviously to run Java code, but AIR is used for rich internet applications. So AIR is a runtime for Flash platform applications and also HTML/CSS/AJAX applications. Essentially what it does is allow you to take applications written in these various languages and, through AIR, run them on platforms supported by AIR. As of now, AIR supports a handful of platforms such as Android, iOS, Desktop (Mac/PC/Linux).

What it boils down to is you can take your Flash platform and HTML/CSS/Javascript applications and with little to no change in your code, make them into applications for mobile and desktop.

A Few Quick Tips to Improve Your Digital Photos

For you digital photographers out there, I have a few nuggets of wisdom I have stumbled on that could potentially improve the quality of your photos.

I know that for myself, clicking the shutter can be problematic since I tend to shake the camera as I press the shutter. The best way to avoid this is to set your camera on a timer to allow a few seconds to line up and stabilize your shot.

For your DSLR, there are some great apps out there that allow you to control your camera through your phone or tablet. Apps like DSLR Remote are great and well worth the cost.

A great way to get some very neat and creative shots is to increase your exposure time. This will then allow your to paint with a light source.

For some in-depth training, check out our Photoshop Classes. Our Photoshop for Digital Photographers course is back and scheduled on June 1-2.

Photoshop Express – Photoshop for the iPhone/iPad!

Yes, Adobe has made a version of Photoshop for iPhones and iPads, and the best part? IT’S FREE! Here is a link to a video that demos this new app: http://www.youtube.com/watch?v=2hui0p_qI-Q

This is a great application for photographers looking to edit their photos on the go or for casual user who would like to edit or enhance their photos. Not only does it allow simple editing and enhancement all by touch, but also gives you the option to upload directly to Facebook and Picasa or share to friends via email.

Photoshop Express, I’m sure, will have photographers and graphic designers very excited, but another reason this app is so significant is that it is a precursor to having full desktop applications that have gone completely  mobile. This very well could be the beginning of the end for desktop computing in general.