RSS

Learning the design process: Dreamweaver CS5.5

02 Jan

David Powers, Dreamweaver CS5.5, 2011.

I was recommended a book by David Powers, “Designing and Developing for Mobile with jQuery, HTML5 and CSS3”. The book displays a step by step guide to creating a mobile website/app. This will benefit me to gain a better knowledge of how to create the structure for a web app. I have learnt a lot from the workshops up to now, and have learnt that in the newer versions of Dreamweaver, creating a website has become much easier than when it used to be all about the coding!

I will now work through the book to create a working web app, and product me results and evaluate what I have learnt, so that I can then begin drafting and creating the web app for my chosen theme.

The book was fairly straight forward, however I came across several issues due to working with a newer version of Dreamweaver  and possibly the mobile templates/jQuery files having differed since the book was created. Here’s a list of the issues that I had:

  • I had to manually add back buttons, as in CS6 they need to be enabled through the jQuery functions panel
  • Back buttons don’t automatically create themselves, and when loading external pages from index.html the back buttons it says will be created do not appear.
  • Clicking on the image does not load to the next page as the “href” is placed after. However, you are told to place the image first to allow auto re-sizing, which does not function correctly as displayed in the book.
  • As it mentioned that it should automatically create back buttons when browsing (though in the version I used from CS6 I had to manually create them on each page), it stated code which would be useful to prevent the homepage from being given a “back” button (data-backbtn=”false”) which would be inserted to the div for the header. This however is beneficial if it does work properly when taken to a live web space, so I will keep it in mind with my design.
  • Later it explains how to add an icon for the back/home buttons. Upon doing so the images were not added, for reasons which I don’t know, as the coding is the same as the tutorial’s finished version.

Having issues from following basic tutorials can become very frustrating as the code is the same, and I don’t know why it would not work, other than the external files differing and how mobile websites/apps work compared to when the book was made in 2011 to now. I guess this is why it is always better to use the tutorials as a starting point to your experimentation to create something; a theory I had when I began graphic design and teaching myself how to use some other programs from the Adobe suite after seeing what others had created and watching online tutorials.

I had to research on the internet about why the automatic “back” button had been disabled in the new version of Dreamweaver. I came across a forum topic on Adobe which explained that it was not due to Dreamweaver but a change in the jQuery JavaScript file. They mentioned a website that explains how to “re-enable” the feature, that also explains many other functions with mobile websites that I found to be very useful jQuery Mobile

I have gained a lot of useful information from the book; and been able to learn what I wanted about creating mobile websites, as without it I would struggle to find the specifics that I would want to know for where to begin making one.

img_tut1img_tut2

img_tut3img_tut4

I have learnt that working from the template and not redirecting to additional .html files has worked out to be more reliable than redirecting to other .html files. That may have been the coding, though I followed the tutorial in the book so it shouldn’t be. I will need to look further into automatically re-sizing the images; there is probably another function which is turned off by default. If I can’t amend it then I will simply re-size the images manually, which is not a problem.

I now feel capable of creating the mobile website, since following the tutorial to create a basic website with a navigation page which links to other pages. I have also read up to understand what further you can do, such as animations when you click the navigation links, adding collapsing bars and more; so that I can get a good idea of what my website will look like and what is available to include for functionality on a smartphone.

Advertisements
 
Leave a comment

Posted by on January 2, 2013 in PCA - Interactive Design

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: