Use of advanced CSS3 in HTML export

[netsi]

Hi,
It would be great if Xara could use advanced CSS3 and SVG when exporting shapes to HTML. This is a video showing how a plugin for Adobe Photoshop which can generate CSS3 for shadows, gradients and more. See it as an example of what can be done using CSS3. http://screencast.com/t/j5EKEztFVreZ...JIzkn9GN1uSu0A

The CSS3 is generated by a addin for Photoshop called CSSHat (https://csshat.com/)

[gwpriester]

I am sure I am missing something, but Xara does all that by pressing one button and dragging the shadow around.

I know that there are some cool things you can do, someone posted some buttons that expand and contract that was impressive, but this Photoshop plug-in...?

[netsi]

Gary, the difference is the code which is exported. Xara will generate a bitmap with the button and the shadow, where as the plug-in will generate HTML and CSS which will be rendered into the button.
You may ask: "Why is that smart?"
It depends ofcause of the situation, but here are some arguments for using CSS based buttons:
a) The CSS button will contain text which can be read by search engines, can be changed easily (for instance translated)
b) The colors, shadows, gradients, size and other CSS effects can be dynamically changed using script or CSS code on the client (without having to export again each time)
c) The byte size is smaller for text/css based buttons

With HTML5 and CSS3 the web offers a lot of effects normally made in a drawing program like photoshop and Xara Designer Pro.
Did you know that round corners can be applied to ANY HTML element simply by adding the code below to the element through CSS?
CSS:
.round {
border-radius: 10px;
}
HTML:
<div class="round">I have round corners</div>
<img src="photo.jpg" class="round" title="I also have round corners" />

I have made a simple implementation using jsFiddle (an online tool where you can enter HTML, CSS and javascript and run it).
You can try to play around with it in your browser. http://jsfiddle.net/netsi1964/j5tE7/17/
Some of this CSS is perhaps not too easy to understand if You are not working with CSS but believe me it is simple stuff for frontend developers :-)
There are many online free webapps like jsFiddle, for instance I also used "Prefixr" (http://prefixr.com/index.php) which will automatically add "vendor prefixes" to your CSS. Vendor prefixes are temporary CSS which are used until the browsers agree on standard for things like box-shadow.

Hope this did not get too technical :-) But you can see how easy an effect can be applied dynamically. Just imagine that to get the round cornor/drop shadow on the cat (on my jsFiddle) you would need to create it 4 times in Xara and export it 4 times. Not only would it take more time, but it would require a lot more bytes, making the website be more heavy for any visiting client.

Also I have added animation to the hover effects simply by adding this CSS code:
* {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}

It simply states that changes to any attribute ("all") should be animated over 1 second ("1s"). Because this is a new standard and to be sure that it works in various browsers (for now) the transition is repeated for each vendor. For instance "-ms-" is microsoft internet explorer.

Hope you learned something from this post :-)

[steve.ledger]

I guess Xara will likely support some CSS3 in future (probably already does via placeholders), but at the moment it's not a standard or is there full cross browser support.

Remembering Designers' roots as a vector illustration application I think bringing in this level of coding to the HTMLfilter.dll would require a whole new approach and possibly new UIs of a significant nature.

[netsi]

Sledger: I have no doubt that it is not easy :-) But the trend now on frontend development is to use these advanced HTML5 and CSS3 features together with javascript polyfills (which in most cases can make older browsers render advanced features).
The global trend is also that modern browsers are more spread. Curently Google Chrome on a global base is the most used browser. Microsoft will release Internet Explorer 10 soon, and it will start to support these features even more.
Another aspect is also that mobile browsers are becoming a big factor with things like smart phones and iPad (and other pads). Another thing is an open source browser engine like webkit, which is used in Google Chrome, Apple Safari, iOS (iPad/iPhone) and Android mobile OS. Actually also modern TV sets like the 8 series from Samsung uses webkit. Apps for Samsung TV is a collection of HTML/CSS and javascript.

The support for various CSS3 and HTML5 stuff can be checked on for instance: http://www.browsersupport.net/ and http://caniuse.com/

Also, please read my post as inspiration :-)

[steve.ledger]

No argument from me mate, just trying to add some perspective and a little personal reasoning
Remember, Xara isn't and doesn't want to be a HTML editor. We aren't talking about keeping up with high-end, high-priced professional web development applications.

[gwpriester]

a) The CSS button will contain text which can be read by search engines, can be changed easily (for instance translated)
b) The colors, shadows, gradients, size and other CSS effects can be dynamically changed using script or CSS code on the client (without having to export again each time)
c) The byte size is smaller for text/css based buttons

a) Designer Pro X adds text grouped to a button as Alt text so it can be read by search engines. Though I suspect search engines are less concerned with button text than they are with good solid Page Titles.

b) Small advantage. But how long does it take to change the menu bar and to republish the site?

c) I'm not sure that the size difference is significant unless someone is viewing the site on a 14K dial-up account.

I am not saying that these new advances are not significant, but at what cost to the average site designer who is not code savvy? And what is the benefit to the site visitor who is not going to know if the shadow under the button is a bitmap or a shadow created with a CSS3 script?

[mwenz]

No argument from me mate, just trying to add some perspective and a little personal reasoning
Remember, Xara isn't and doesn't want to be a HTML editor. We aren't talking about keeping up with high-end, high-priced professional web development applications.

High Priced? Microsoft Expression Web, which is really a suite of applications, can be had at just over $100 and at times for less than that. Aside from not as many add-ins, it is every bit, and in some cases better, than Dreamweaver. I have and use both, but for the money, it is EW over DW any day.

As for supporting what really is a moving target in HTML5 and CSS3, Xara should be moving in that direction in their conditional code. But it wouldn't be prudent to release half-arsed support for it now. I do hope for those using Xara for web sites, though, that they are testing and compiling such code so they are more ready once they become standard coding practices.

Take care, Mike