DeanLogic

I decided to take a glance at the widgets I put in earlier today and stumbled onto a nice little tool over at Adobe.  In Dreamweaver you have a few options for viewing your work to determine how it will look in the real world.  The first method is to use a split view, which gives you one frame of code and another frame of design.  The obvious benefit is that you can quickly find your code problems before sending it up to the site.  However, as you notice from the image below, it might not actually be what  you really see.

Adobe apparently has their previewer using some of the same code as Chrome, because the color changes I added to the Aqua Button widget show in the preview but not in my FireFox browser.  Dreamweaver helps you determine what the page will look like in the real world, without loading every version of every browser, with a Preview Menu.  On the menu are the browsers loaded on your PC and then a couple of other options.

There is a Preview in BrowserLab option that launches Adobe BrowserLab.  This, complimentary until April 12, 2012, tool allows you to view a web page in multiple browser simulators.  The browser choices even differentiate between OS version, because there are FireFox for OS X and Windows options.  The menu launches BrowserLab with your file version of your page or  you can load your site using the URL.   You can select multiple browsers for viewing the site, but BrowserLab will do a initial loading of all the select browsers before you can view.  Once everything is loaded, you can switch between the browsers selected and view 2 browser options at the same time, either in split view or onion layers. From the screen shot below, you can see that Chrome displays orange buttons, while FireFox does not.  This makes BrowserLab a very useful tool for quickly viewing your website across many browser version.  I hope that Adobe keeps it free for those who have Dreamweaver.  I also have used Adobe Story for some movie projects, which also has a “complimentary until April 12, 2012″.  I am guessing Super Duber Master Creative Collection Suite 6 will be launched then.  Maybe by then, I’ll have made some money off of one of my hobbies to pay for the expensive upgrade.

The other option on the Preview menu is Preview in Device Central .  Device Central is part of a few different Adobe applications.  It makes sense that Dreamweaver would give a device preview.  Everybody wants to know how their site will look like on mobile devices or a tablet or even a television. Yes, a television.   There is a device library that allows for downloading of different device profiles.  Even though Apple doesn’t like Adobe much, apparently Adobe is nice enough to provide iPad and iPhone profiles.  There are also BlackBerry phone and tablet profiles and bunch others.  And if Adobe didn’t create a profile you are looking for, apparently you can create one and share it in the library.  Once you have download the profile, you can add it to your test devices.

Finally, you can use the Multiscreen Preview to see how your site will look in different screen resolutions.  The default sizes are Phone (320 x 300), Tablet (768 x 300) and Desktop (1126 x 276).  Since these dimensions won’t fit all issue, you can modify the sizes, however, they might not fit neatly in the three pain window like the defaults.  You can also use this tool to setup multiple css files to be shown based on the size of the screen (small, medium, large).

With all of these tools, it will be easy for anyone to prepare their site for almost any possible viewer.

Dreamweaver has a Widget Browser for checking out the free and paid Dreamweaver widgets in the Adobe Exchange.  The benefit of the Widget Browser is that you can easily see which ones you have installed and what is available without having to go to the website.

When you decide on using one, then you can use the Widget Browser to configure the widget, so some success.  It all depends on the developer as to how useful the widget configuration is and customizing your selected widget.  I downloaded and installed the Aqua Button, the Weather Updater and the Twitter widgets.

The Weather widget has the configuration screen so that you can see what was setup, but you can’t edit the cities displayed in the widget and set it as a personal preset.  But, since I could see the code behind, I did a quick search (weather ‘INXX0012′) and figured out it was using city codes from Weather.com.  Once on the site, I looked up some cities and took the code from the URL.  Then I put the city codes into the function call that places the widget on the page.  The style sheet for the widget didn’t display the full widget, so I had to adjust the height slightly in order to see the “Read full forecast” text at the bottom of the widget.

The Aqua Button widget configuration has a lot more options, which allow you to change size, color, font and even add the text.  However, after saving the settings and attempting to insert it into page, the settings didn’t really change anything on the buttons.  As stated before, it possible that the developer of the widget didn’t do something right and that is the reason that the changes I made to my preset didn’t appear on the web page.  Which brings me to the Twitter Client.  UPDATE : The preset options do show up in Chrome.

The Twitter Client confirmation screen has plenty of options for changing the color, font styles and even pointing to a Twitter account.  However, it only shows either tweets from, to , mentioning or tagged, but not all (at least from what I see).  I made a personal configuration, saved it and then inserted into the Demo site page.  The changes I made in the configuration showed on the page, just as it looked in the preview for the configuration.  The only small issue deals with the how the preview looks and how it actually works in the site.  If I decided before hand on the width of the all the widgets, then I could have easily entered in that value.  But, since I am just throwing things on the Demo page and seeing what would stick, I decided to change my preset and then re-insert it into the web page.  It would be nice if there was a link between updating the preset and having it change in the Dreamweaver site.  Because it isn’t very hard to delete the widget code, you can select the main tag and collapse the code, it isn’t a huge issue.  Also, I could have still just updated the inserted code to include the changes I made to the widget.

After I inserted the Twitter Client, the Weather Update client stopped working.  Not a very good sign.  Hopefully it means the Weather.com site is down.  If it doesn’t come back, I guess I’ll have modify the widget to get it to work again.

I have created a Demo site using Dreamweaver.  I used a HTML5 template, because I figure I probably should learn some HTML5 while I am doing this.

The first thing I had to do was setup a ftp user on my website and give the user access to the “demo” folder.  To make things simple, I also created a subdomain for the demo folder (http://demo.deanlogic.com).  Unfortunately, the Dreamweaver template is a little finicky and the path url to the image wasn’t correct on my first couple of attempts to drag and drop the image into the page.  Also, the css added to the page when using a pre-defined template causes hickups when you delete code.

For now, I have just removed the default text on how to use the template and added my site’s logo. Baby steps.  Because I created the index page as a php type, I can add a little php code to the page as part of the example.  A quick demo would be to add the copyright notice in the footer.

As most coding sites do, php offers examples at the bottom of the functions page.  This is very helpful if you don’t fully understand the function.

To create a copyright notice that continues to update without intervention, you only need to get the current year and display it after the copyright text and symbol.

Copyright &copy; <?php echo date('Y'); ?>

So that it is a little more “authentic”, the copyright year should probably be in the format of a range (i.e. 2007-2010).  This way, you can have a static start year and a continuing end range.  Since the start for the Demo site is this year, then I will be a little more tricky and only do the range once the year flips over to 2012.

Copyright © 2011
<?php
if(date('Y') != 2011) {
print(' - ' . date('Y'));
}
?>

Actually, not very hard or tricky to do.  Just check to see if the current year isn’t equal to the set year (i.e. 2011) and if it isn’t, then print out the dash and the current year.  The start year is static.

I’ll probably add some more simple php script to the main demo page later.  I know I will probably have to use some other php script for other examples in the future.

While I was at work pondering what other better careers there might be out there, I decided that I probably should make sure my skills are up-to-date.  Since I am limited to what software I have installed on my home PC, I will be brushing up on those skills and learn some new ones in the process.  The best way for me to learn something is to actually have something to do, instead of just reading through a book and trying to absorb it.  I’ve absorbed plenty of useless facts by reading, but that doesn’t beat actually putting to work knowledge that has been gained.

I plan on going through the Flex/Flash Builder and attempt to use as many features as possible.  In order to do this, I’ll need to have something things setup to show what I create in action.  Beyond having a website available to do this, the first step is to setup a empty database and tables on the site, so I can input data and retrieve data.  I’ll use Google Docs – Drawing to map out the basic database and post it below.  It’s not exactly a database mapper, but it is free and pretty simple to use.  I’ve embedded the published page, so if I make updates, it should update what is seen below.

To keep things simple, I’ll just create a 3 table database for now.  A Customer, Address and Contacts table.  By not including the address or any contact information in the Customer table, I can create multiple contacts types and addresses for each customer.  For example, if the customer has an e-mail, main phone and cell phone as methods of contacting, then I would have 3 entries in the Contact table for the one customer.  Later, I should add a boolean value to determine which of the Contacts is the primary and make sure the method of input verifies only one Contact is selected.  Like wise for the Address.  The address could be the physical, delivery, billing or another type of address.  If it is the physical address, I will probably want to add Latitude and Longitude information, in order to connect any map tools.  And, I will need to added a primary flag as well.  I added a Nickname field in order to give the location a name relative to it’s purpose.  An example of this is a customer with multiple satellite locations.  You still have the one customer, but there are multiple physical addresses.  Most likely, in real world situations, the customer would have multiple customer accounts for each of the physical locations.  I’m sure a debate would be endless on the merits of both.

Another thing to consider is the Type values.  Some would probably argue that the proper way to handle the types is to create a table for the Types and use the ID in the Customer, Contact and Address tables.  Of course, this would also require setting up a table to determine which types would go into the corresponding list value.  This is why you map out your database before you start creating it.  Which I didn’t, but since I don’t have any data in my database, I can easily change the column types.  I could have made it even more lose on the tables and called the Customer table something like Human and allowed it to be any type of Human that will be using the application, but I think that is fine.  The only issue is, that the Address and Contact tables are actually just Customer Address and Customer Contact.

I am using MySQL 5 for my database, because that’s what comes with my website.  The site also uses Perl 5 and PHP 5, so I will be using PHP for any back end scripting that I need.  Since I have Dreamweaver installed, I plan on creating a demo site using that, instead of just adding pages inside of my WordPress blog.  This will also give my wife the opportunity to see how Dreamweaver works.  I would like to figure out some skinning for Flex, so I will use Fireworks and possibly Flash Professional for that.

Now that I have my basic database setup, it is time to figure out how I am going to go about down this learning/refreshing path.