Using Regular Expressions in HTML5

Regular Expressions

At Uni, Regular expressions scared me to death. doing my HND. It was like algebra. I never got to grips with it and I failed the module unfortunately. I was too gutless to learn how to implement them and it was tricky enough trying to remember all the combinations and how it is all put together. I thought it was quite intimidating and if I’m honest with myself, I didn’t pull myself together to put proper time into studying them.

But that’s in the past. Now they excite me and I want to learn how they can be used in forms. I’m finally starting to learn and have begun to see the potential of what they can do. Especially with their new use as part of the new pattern attribute in HTML5. The problem with my learning curve with HTML5 is finding a place tat adequately explain (in my opinion the regular expressions you will need and how they are used.

So, just to recap, again? What is a Regular Expression? My definition is that a Regular Expression is a carefully constructed set of characters and numbers that are designed to make customised condition checks on text input in a concise manner.

A concise manner yes but is it very clear? Well, not really. When I think of regular expressions, I liken it to working out Algebra for the first tine. What I want to first of all is give you the characters individually, explain them in the clearest way I can, and then, show you the best way of learning Regular Expressions. And the best way to do that is just to do them.

So the characters used in Regular expressions are as follows;

Characters
. The dot character;  A dot (.) is a shorthand character class that matches any character including spaces and tabs.

? This is an optional character for extra characters that could be there but are not necessarily needed

\d a character class that represents a digit

\s whitespace character \S not a whitespace character non whitespace

\W is shorthand for ‘any letter, number or the underscore character’.

The ^ (carat) and the $ (dollar) For searching exact strings and nothing else e.g. ^jonnie$

The Pipe | indicates an Or alternative condition in the expression e.g. (a-z) | (A-Z){3} . It is known as an alternation character.

\ literal escape character. Used when a character is needed that is otherwise needed as a Regex character. These are known asescape characters. E.g \    \n turning a special character into a literal. ?= Followed by + one or more of a character

inside an open bracket you declare a numeric regular expression with 3 character

[0-9] for a character sequence or range, in this case any digit from 0 to 9. 

{3} three characters – Defining How many characters an expression is required to match.

an expression that will contain the literal – character

\ turns the procceding character into a literal

That’s a quick rundown on the characters available in regex. There’s a lot to go through. You can find the whole range in this cheatsheet here.  http://www.cheatography.com/davechild/cheat-sheets/regular-expressions

Example 1 – Searching for an american standard phone number ([0-9]{3}) [0-9]{3}-[0-9]{4}

This is an expression that will search for an american standard phone number which will be a series of digits including an – character and 9 characters in total.

{[0-9] is the part that searches for digits in the range 1 to 9. Putting the number 3 in curly braces {3} ensures that this particular part of the pattern allows for 3 digits in the 0-9 range. e.g. 234. This section is ended with a closing round bracket which completes a group, otherwise known as a sub-expression.

The next 2 sections work in exactly the same way. The dash in between the next 2 blocks indicates that the “-” character is a required pattern in the string so 123 456-789 is a valid string but 123 456 789 is not. For a regular expression, this pattern is relatively straight forward.

Example 2 Date Picker (0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}

What on earth does this mean? Well, it follows European date method of DD.MM.YYYY i.e. 01.01.1900 using the full stop as he separator.

To do it correctly takes a little bit of logic and working out.

To start with, the maximum number of days you can have in a month is 31. In this format, you have a number that starts in (0) zero, starts with one (1) or a two or a three (3). But when you get to 30 you never get further than the number 31. So that condition is expressed in Square Brackets as so 3[01] The condition is 30, or 31
The full stop character (.) indicates a literal text that must be input to fulfill the condition. It separates the day month and year digits.

We use the Pipe (|) character when we need to test an alternative expression.

The month section of the expression works in a similar way. The first character must be a 0 or a 1 and when 1 is the first character of the expression you can only have a 1 or a 2 as the second character which would make up November and December.

Finally, the last part of the expression simply requires 4 digits of 0-9. They are all numeric characters.

There is one drawback to this simplified expression. If you input for example the 30th February for any year the expression will validate it, even thoough that date does not exist in our calendar. There is an expression that checks for this sort of error but that is for another day.

Example 3 US Social Security Number ^[ABCEGHJKLMNPRSTVXY]{1}\d{1}[A-Z]{1}([ -])*\d{1}[A-Z]{1}\d{1}$

This looks like a fairly long expresson but it’s output is merely a string of 6 characters. It represents an american social security number.

^ is the carat symbol and represents the start of an assertion class of an expression expression. It matches if an assertion (or a given text) is true.

[ABCEGHJKLMNPRSTVXY]{1} By now you might be able to work out what this means. This means search for one digit in any of these character ranges. It wants the Uppercase character range but not any of D F, I, O, Q, U, W and Z. Any of those characters will not be accepted by this expression.

\d – A shorthand character which means it wants a number, any number between 0 and 9. Then, [A-Z] wants any uppercase letter. The expression is case sensitive. As before the number in the curly braces {} represents the number of characters required in this part of the expression.

[ -] Here, this is a literal part of the expression. The output requires the dash character.

The rest of the expression is straight forward. A number, an uppercase letter and anther number and finally a $ to mark the end of the expression.

Example 4 (?=^.{8,}$) ((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$

http://alistapart.com/article/forward-thinking-form-validation Minimum 8
characters, one number, one uppercase and one lowercase letter

This looks the most complicated of the lot, but is really just an expression that validates a string with a certain amount of characters.

?= is new to us. It means look ahead or following and defines the condition requiring 8 characters minimum.

W+ searching for at least one special character, at least one lowercase character, uppercase and then lower case.

In practice, it’s a little unreliable but tends to valiate correctly in pattersn like ffGG4%gHd or ftFf%gfd but not FFFddd^^&333FFF.

Example 5 ^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$ Checking for Hexadecimal Codes

^ starts the beginning of the line and at the end $ marks the end of the line and the expression
# makes the # character valid in the expression by passing it as a literal. But it is an optional character and does not need to be included as a valid input.

| 6 digits of 3. ([a-fA-F0-9]{6} | [a-fA-F0-9]{3})

Next comes the meat and bones of the expression..  We are testing character ranges of A to F in upper and lowercase and making sure we can include digits of 0 to 9 to replicate a valid hexadecimal number.  We can do this to show 3 characters too and to do we we user an alternation character  i.e. I

Example 6

Well, on this last idea I believe I had ideas above my station. Basically I was trying to find a regex that will search for a given word, could be any word in a sentence that someone would type in an input text box. To put it another way I wanted to write a regular expression that searched for a substring inside another string, a string that is inside another that someone might type in a text box

E.g. Could be “Football” with the string, “I think Football is great”

At the moment the closest I can get is this expression:  (\s|^)+(baloney|darn|drat|fooey|gosh\sdarnit|heck)+(\s|$)

It matches the words in the list but nothing more than a space either side of the matched word. It’s taken me several days and advice from regex experts but I’m finally beginning to concede that I’m not going to be able to do what I want that from HTML5 regex.
Links!
http://stackoverflow.com/questions/19592651/how-can-i-write-a-html5-regular-expression-that-validates-a-given-word-within-a
http://www.html5pattern.com/
http://www.cheatography.com/davechild/cheat-sheets/regular-expressions/

That’s about all I’m comfortable with so far in regular expressions. Hopefully as the years go on a bit more help and guidance will be available as people experiment more with HTML5 pattern attributes. I still want to look into this more and post my findings here. For now I hope this has been useful. 🙂

Advertisements

Fun and frustration with HTML5 forms

Forms on websites are everywhere aren’t they? They’re on most, if not all webpages because without them you can’t transact business or send information via a server. In my early years in learning about the internet they were always a formidable prospect.

I remember the first form I ever made over the internet for a college course. We didn’t have a web server to transmit information so we had to make do with using our email addresses as a method. At least I could see results on the screen in an email message and I could marvel at the delights at having got something transmitted over the web like some sort of pro.
Except that wasn’t really way things were done. For years I used to sit back at forms I fill in or see on the web and just think, “how on earth is this done?” And in some ways I still do.

I’m not like most programmers who can do half the code in their head and just remember what they’ve done. I can read code, take it in and understand what I’m reading, but writing it on the fly I trickier for me. So I’ve found and used various scripts for transmitting emails and messages for my clients but it can be labourious to do, not to mention frustrating.

Lucky that with HTML5 there is something very exciting on the horizon to make things better for everyone. HTML5 has helped demystify a few things for me. I’ll go through these now.

Inline Scripts

Firstly, I’m sure I’m not the only web designer to set up script, reference it as so on my web page;

<script type = “text/javascript” src = “filename.js”></script>

place it somewhere in my document, upload it, test it and then….. nothing!

I have lost hours of my time, scratching my head, checking every last character of the code for syntax errors and the like before moving the code either to the head or the body element of my code. And then, as fast as the click of a finger, it works the way it is supposed to.

The best place to put these scripts is in the body element of your page. So for organisation I would put it somewhere at the bottom, before closing body element. When a browser renders code, it reads the code and transmits it from top to bottom but it will deal with objects put in the head tag first loading the script before there’s anything to link it to. It also has the side effect of slowing down the page.

Now that I’ve sorted that I should be able to keep my mind clear that any problems with the script not functioning should be left in the code itself and not in the JS Hook.

Validation

The second issue I’ve had in the past is the issue of finding a script that not only correctly validates form input, but that when it does, actually blocks the script from being sent through Cyberspace. I know a Jquery script that can do that, but not a JS and it used to frustrate me that forms were sent over the server despite errors being correctly found. I still haven’t figured it out and I know it still needs figuring out.

Recently I’ve been looking into HTML5 forms and there are great things coming up in HTML5 to make life for Web Designers much much easier. 

There’s a wealth of new attributes for the form element designed to reduce the need for JS scripting. Here I’ve created an example of a HTML5 form with some of the new attributes that are offered. Think of it as a one size fits all snippet<body> 

<form action = “put src file here” method = “post is best” id “formIdGoesHere” novalidate autocomplete = “on”>
       <input id=”username” type=”text” pattern=”” title=”Form title” step = “” autocomplete novalidate>
       <input id=”FirstName” type=”text” title =”Check!” required autofocus placeholder = “placeholder text” title = “” min = “” max = “” formtarget = “_blank”>

       <input id = “password” pattern = “” required>

       <input id=”image” type = “image” height = “” width = “” src = “” alt = “”>
      <input type=”file” name=”img” multiple>
</form>
</body>

Above are some examples of the newest attributes in HTML forms and input types. There are attributes, nice, simple easy attributes that are designed to do all the legwork for you. Of course, even the newest browsers haven’t caught up with the attributes yet, so it’s little wonder few people haven’t started using it yet and we all know how far behind internet explorer is, but it shows the exciting possibilities that exist in HTML5 forms.

For instance, what would have taken complicated Javascript code to validate a text box is now handled by a simple “required” attribute. If an input doesn’t meet a particular requirement, a message is returned by the browser.

But that doesn’t mean Javascript is completely shoved out the picture. Not by any means. Below is a hack I found that delves into the file at DOM level and checks for invalid input. It even checks for no input at all and prints an appropriate message. You can customize the error message by using this piece of Javascript.

I wrote a page for my site a few days ago that demonstrates a few of these extra attributes.

var form = document.forms[0],
submit = document.getElementById(‘submit’),
input = document.getElementById(‘username’);

input.addEventListener(‘invalid’, function(e) {
    if(input.validity.valueMissing){
              e.target.setCustomValidity(“Empty fields are not allowed.”);
    }

else if(!input.validity.valid) {
     e.target.setCustomValidity(“Invalid text. You need letters and numbers of at least 6 to 12          

    characters!!”); 

}
// to avoid the ‘sticky’ invlaid problem when resuming typing after getting a custom invalid message
input.addEventListener(‘input’, function(e){
       e.target.setCustomValidity(”);
});
}, false);

Src: http://developer.nokia.com/Blogs/Code/2012/11/21/creating-a-custom-html5-form-validation/ 

The code goes into the DOM and changes the default browser messages so you can create more descriptive and helpful error messages. The code also seems to be indicating there’s a condition to be tested in the form. This is done with regular expression via the Form pattern attribute. I will explore this more in my next blog.

HTML5 vs Flash. And the winner is?

 

What are the main differences between Flash and HTML5 for Multimedia?

For a start Flash is currently the leader, even if it is reaching the end of its natural life. It is the most developed, the most used, the most familiar and frankly it is my first go to when creating interactive experiences.

So, for me web interaction requires those dodgy plugins that annoyingly for me, have to crash at least thrice every other day which is a frustration I’m sure we could all do without.

But despite all of that, Flash still leads and why is this? I’m willing to bet that most if not all people when they were taught about making interactive Multimedia applications, they were taught to do it with Flash, or maybe Java. Much of my education and teaching for multimedia, is founded on Flash which is driven by rather expensive investments into the Adobe Creative Suite which drives Flash and some online multimedia production. If Adobe is right about one thing it is that their Tools are industry standard.

Yet for about as long as I have used Flash I have not been to far from someone warning me off it. Why? It is buggy, it crashes your browser and more importantly not compatible with mobile devices. More and more people are browsing the web on mobile and tablet devices. That number is always increasing and the trend isn’t going to go away.

Flash has not caught up and that will always hold it back. There is an alternative.

Over the past few years HTML5 has come increasingly on the scene and Flash (from my point of view at least) has been increasingly forgotten about. Most of the things you can do in Flash, can now be done in HTML5.

So which is better? I went back into Flash and I compared what could be done in it that cannot be done in HTML5. Here’s the lowdown.

Image

Conclusion:

The question we have to ask here is, does Flash still have a place? Flash is dying, I think that much is true, but the results here suggest to me that there is still life in it yet.  HTML5 is awesome but there is still a lot of development and growth to come from this platform to catch up with what for me is still the market leader despite its faults.  So I’m going to take a back seat on this one.  There’s no one clear winner for me, I’d say it’s necker-neck. 

 

Myths of Google Web Designer

Today I’ve spent the day working through some of the more tricky aspects of Google Web Designer. So in this post, I want to go through some of these and dispel what are in my opinion some damaging myths about the, lets be frank, free and beta release application.

I’ve already outed myself as a GWD enthusiast. I’m also something of an apoligist for the software. I love it to bits already and I won’t have a bad word said about it. But that’s not to say I’m not aware of it’s limitations. Then, so are the engineers. I’m a believer that nothing in life is perfect and when something is handed to you on a plate, for free, you don’t have a lot of stick to beat your provider with.  The point is I read some comments online about people who have abandoned the tool already and that makes me sad. Because I think they’re missing out!

So then here goes. Myths. The following notes refer to the following release of GWD

GWD Primer Working with GWD Beta Release 1.0.0.924 Shell 0.9.12.0

The very first release of the GWD tool.

Working with GWD – Creating centered web interfaces

GWD is great. It has is faults both technically and aesthetically but I always thought it to be smooth to use for a first release Beta application. It’s a shame for me that it has such harsh critics and people are already abandoning it.

I do agree about one thing. It does work better as an ad builder. It has all the tools needed tools for web design too (well most if not all). Such as the ability to drag and drop any HTML5 element onto the stage. But right now it’s not truly fit for quality web design and I would encourage designers to continue doing what they’re currently doing; what makes them comfortable in designing but don’t disregard the potential of what GWD may be able to do in the future.

One myth I keep hearing is that Google given GWD the wrong title. I don’t think that’s true. It’s no secret that the first release is advertising focused and with only basic tools for editing and creating web pages. But not impossible.

There is one example I’d like to share to illustrate this.

When you drag and drop an element with the Tag tool, GWD automatically populates the area in absolute position, a position of the stage nailed down to the pixel. What this means that the margin tools you need to center web page content will not work. For this, you need relative positioning.

Now this is fine in itself. Absolute and relative positioning are such fundamental parts of CSS that I am sure that Google are working on a setting to switch elements from absolute position. And in fact, it’s all ticketyboo for most requirements in advertisement building.

But what about Web Design? there is a work around I think will help get people started in building web interfaces in Google Web Designer.

1) Create a containing <div> tag. Create a containing div tag with CSS ID container and give it a suitable size by dragging and dropping on the stage To make container divs, drag and drop a suitably sized width. onto the stage.

2) Some simple edits to CSS Code. You’ll find something like the following code in Code view.

left: 50px;
top: 50px;
width: 700px;
position: absolute;

You’ll need to make a few adjustments to the container element:

  • Where position is absolute change this to relative. 
  • Where left is 50px change this to 0px.
  • And finally you need to add a margin: 0 auto; style to your container (or check it is attached to the element already along with a background colour; background-color: red;

And that should be it. You should find that the containing element behaves in exactly the way it would when designing projects outside of GWD. And there it is,  the beginnings of a centered web interface with GWD. The point I’m trying to make, is, Web Design is perfectly possible just not kitted up to help professional designers create stunning websites as easily as maybe it could.

Working with Animations

Learning to handle animations in GWD is a real learning curve and once it is cracked, I think you’ve gone a long way to becoming an expert user before such as time as GWD alpha is released. All it needs is tine and practice In this section of my post I wanted to share a helpful point about animating CSS5 and HTML5 elements that were passed on to me and GWD beta users.

When you’re working with CSS animation you have to make sure there is a balance between the base class and the animatons keyframe points.

What does that mean? When you put objects on the stage and format them (giving them colours and position on the stage), Google Web Designer generates standalone CSS code which we call the base class. And what is the CSS base class? It is the original condition that is set before the animation code is processed and the animation runs.

Example

If you had a div element that is formatted with the following styles.

top: 64px;
left: 97px;
width: 113px;
height: 115px;
opacity: 0;

Then, you create a keyframe so that now there is now 2 points in the animation. Here’s the point that I didn’t grasp properly until it was explained to me in the Google Feedback forum. When you select keyframes in the design view GUI you actually reset the conditions of the base class to either the opening frame (the original condition) and the second frame which is obviously different (e.g. it could be a different colour, size or position on the stage).

If you select the second keyframe, it changes the condition in the base class, and then the animation plays as it should. If you select the first keyframe, it starts a seamless motion from the original base class as it was created, and then the animation plays as it should.

Think of it this way, it is about using Google Web Designer, to manipulate base class so that the will not be any flash of the original CSS state of your element and it is an important feature of CSS and using Google Web Designer.

3D Tools

Two of Google Web Designer’s most exciting tools are the 3D rotate and translate tools. I was experimenting with Rotate and found that the code was the same as the transform code that it puts out. I suspect that it’s using the CSS Translate code so that it reflects what the Rotate effect does to an element.

Of course, I’m not an engineer and I’m sure the way it works is absolutely fine for most situations. But today I found myself working for an hour trying to play with the tool to rotate a text object with 360 degree rotation.

Looking online, it can easily be done, even if for now it just needs you to manually input the code into code view for the time being.

http://www.cssrotate.com/

a#rotator img:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg); }This workaround, or something like it, should work well, even if you can’t yet achieve it from the 3D rotate team.

The name of GWD

I mentioned before about people abandoning Google Web Designer in favour of what they know, because they either don’t believe in what Google is promising or that the product currently provides.

That’s cool! I like to stick with that’s familiar too. I like Dreamweaver and the rest of the creative suite, and I like coding from text editors too. I never got into Adobe Edge unfortunately due to financial reasons and I’ve the name Tumult Hype before. It’s personal choice but I can only reiterate, Rome wasn’t built in a day,  Don’t forget about Google Web Designer because when you think about the big picture, I think Google is onto a winner here and I’ll stick around on the journey, however long it lasts.

I warming to Google because of Google Web Designer

If you’ve been following my posts on various social media for the past week or so, you probably haven’t failed to notice my raving posts about Google’s fantastic offering to the web and digital design world, the not quite so originally but professionally named Google Web Designer!

I just can’t shut up about it. I often post links to useful tools on the web like colour analysers, code generators, meta tag features and the like. This Tool takes them and puts them in a one lovely executable file making good web design and banner advertising, with a few simple clicks of the mouse.

If you’re not code heavy or have problems taking in complicated code, this is an absolute dream. So I’ve raved about it, I’ve referenced my affinity for Google and their program on Twitter, cheerled for them on the GWD Beta forum (and their engineers have noticed me) on google plus and facebook and made it known that I am enthusiastic for GWD.

Why? Well, below are just a few reasons.

  • Editable events and components – Event support for HTML5 elements – More and more components in GWD, making it easier to add the most complicated elements to your project.
  • File picker – an ease of use innovation that has been promised will come in. This is for adding image elements as it has been a big hassle typing the file paths into GWD.
  • The ability to add none Google Web Fonts into projects
  • Adding of HTML  Audio as a GWD component!
  • A new component feature for building web forms. Yes! Yes! Yes!

And for me the biggest and most exciting thing, the ability to add files not created in GWD. Importing of own code into GWD – Importing your own code outside of GWD so it is open and available to be transferred and used in GWD. That idea is simply exciting.

All in general demystifies the complexities of HTML5. Now don’t get me wrong, I’m very clued up on web markup and CSS rules but I’m very excited that simple mouse clicks and create HTML5 code and do it well.

I just find it so exciting and the tools I’ve craved for, that admittedly some exist in Adobe CS, but I think it’s  like a Photoshop for Vector graphics. It’s like the very latest version of Dreamweaver or Adobe Edge, It has the benefits of some of the best text editors.  It is intuitive. It is so user friendly. And Free. You cannot ask for a better deal than that.

If you need further encouragement, take a look at this web page that was created using Google Web Designer.

http://hoopstheapp.com

In the last week, Google went right up in my estimations. I’ve always been aware that Google are giants in the digital world. But I don’t think I ever really appreciated it until now. They’re major players. Pretty much everything to do with the web, and beyond you can get that they have something to do with it.

I like what’s familiar and I didn’t really “get” Google+ because for Social Networking, I have and have always had Facebook as my first option for social media. But GWD has helped me recognise that Google really is leading and in some ways monopolising the internet. And maybe, just maybe I’m starting to understand Google+.   As a web designer, Google are also my first line in web management and analytics  (Adwords, Adsense, Webmaster).  They are even right there on my phone.

So yes, I have warmed to Google!  In fact, after all these years, I think I’d go so far as to say I am a fan.

Jonnie Grieve Digital Media’s take on Google Web Designer

So last night, I was watching a quite awful game of football (awful for my club at least) when I turned to my netbook for solace and left the game trailing in the background. I then noticed on Twitter that “Google Web Designer” was trending.
Curious, I clicked the hashtag and read a number of tweets on Google’s latest innovation. Google Web Designer is a fun new app for creating HTML5/CSS animations for all browsers and devices. No Flash, no incompatibilities.

It does what it says on the tin.

“Create engaging, interactive HTML5-based designs and motion graphics that can run on any device … Now everything you create is accessible on any screen – desktop, tablet or mobile – without compatibility issues” –   Google Web Designer Website

The last time I thought about an application such as this, I was salivating over Adobe Edge and it’s proposed capabilities for HTML5 and CSS design or even going back further, I still have a copy of Adobe Catalyst CS5, a design package for creating Rich Internet Applications without the need for writing code. Sadly, Catalyst never really got off the ground. 

But Google is looking to usurp the competition from right under its noses. Announced back in June, it completely went under the radar for me.

So today, I logged onto my computer, downloaded Google Web Designer (GWD) and had a go.

Like most applications of its size, it’s a little overwhelming at first, even if it does follow the regular interface conventions and look like the Adobe packages they’re clearly inspired by. I think GWD is like an amalgamation of various Adobe products.

The biggest one that comes back at you is of course, Adobe Dreamweaver with it’s code and design views and menu-click code generation. We have the Pen Tool, a staple of Photoshop, developed and included in GWD; property inspector panels as you’d expect; colour pickers displayed to hexadecimal; and if you’re looking for Flash tools… well GWD also has a wonderful timeline interface for creating great CSS animations. You have full access to code and design views throughout all your designing and building! Any changes you make to the code are reflected in design view, and vice versa. It’s pretty much all there. 

I was impressed at the speed it downloaded. For me it downloaded as good as instantly and was on my computer and ready to use before I knew it. 

As I said before, my impression was of Google’s very own Dreamweaver but brand spanking new interface. It’s a first edition application and in Beta release. There are so many more possibilities to come in the future and it is all available for FREE. As much as I love Adobe, you can’t argue with that, and you don’t have to worry about 3 to 4 figure holes in your pocket or extortionate monthly subscription fees for access to this lovely piece of software. 

It’s early days of course but I think GWD will be pushing the boundaries very soon as it grows and it must already be giving Adobe web developers the heebie-jeebies. – for the web side of things at the very least.

There are downsides of course. The application is Beta like I said so there are changes and improvements ahead.

I’ve been playing around this new toy all day and I was creating a test Ad but I was struggling; scratching my head wondering, how on earth do you add images to your websites or Ads? Oh, there it is, the Tag button, making sure of course you select the sub-button at the top for Image elements. There we go. Problem solved.

Except, I then have to give GWD the image source for the image to appear. So I type in the filename. Nothing doing. Fair enough, a file name seems a source path. So I type in the entire source path, nothing. Hmmm. Maybe something like “/../images/filename.png”. Again nothing, and then you just think, wouldn’t it be much easier if I could just select the file from a file picker like any other program. That is an issue that needs putting right.

GWD is not not exactly a WYSIWYG editor. What I mean by that is it is clearly driven by mouse click instructions although you do have full access to code. That’s all good, but as a Beta release, there are bugs applicable. There are app freezes with no apparent error messages, so you’re finding yourself having to save (if possible) and quit and start again which can get tiresome and that’s after you even realise something is wrong. 

More compatibility for timeline feature is needed, I think. You can do a lot of things with <div> elements but other elements are found wanting. Rectangles and shapes cannot have their colour changed despite all that I have tried. So I’m sure in the future that will be updated and changed.

That said, I see a lot of potential in this application. So far I see the most potential in advertising creation but most of all it is FREE and FUN and something I have no hesitation in recommending to Web Designers and anyone who just wants to have a crack at doing some good things with digital design. 🙂
www.jonniegrieve.co.uk